feat: add expandable prop to ReportWidget

studio/components/interfaces/Reports/ReportWidget.tsx

@@ -1,11 +1,12 @@
 import { NextRouter, useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconExternalLink, IconHelpCircle } from 'ui'
+import { Button, Collapsible, IconExternalLink, IconHelpCircle } from 'ui'
 
 import { BaseReportParams } from './Reports.types'
 import { LogsEndpointParams } from '../Settings/Logs'
 import Panel from 'components/ui/Panel'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
+import { useState } from 'react'
 
 export interface ReportWidgetProps<T = any> {
   data: T[]
@@ -14,6 +15,8 @@ export interface ReportWidgetProps<T = any> {
   tooltip?: string
   className?: string
   renderer: (props: ReportWidgetRendererProps) => React.ReactNode
+  expandable?: (props: ReportWidgetRendererProps) => React.ReactNode
+  expandableText?: string
   // omitting params will hide the "View in logs explorer" button
   params?: BaseReportParams | LogsEndpointParams
   isLoading: boolean
@@ -28,7 +31,6 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
   const router = useRouter()
   const { ref } = router.query
   const projectRef = ref as string
-
   return (
     <Panel
       noMargin
@@ -104,6 +106,17 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
         <LoadingOpacity className="w-full" active={props.isLoading}>
           {props.data === undefined ? null : props.renderer({ ...props, router, projectRef })}
         </LoadingOpacity>
+
+        {props.expandable && (
+          <Collapsible>
+            <Collapsible.Trigger asChild>
+              <Button>{props.expandableText || 'Expand'}</Button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              {props.expandable && props.expandable({ ...props, router, projectRef })}
+            </Collapsible.Content>
+          </Collapsible>
+        )}
       </Panel.Content>
     </Panel>
   )

studio/tests/components/Reports/ReportWidget.test.js

@@ -1,41 +1,8 @@
-// mock the fetch function
-jest.mock('lib/common/fetch')
 import { get } from 'lib/common/fetch'
-
-// mock mobx
-jest.mock('mobx-react-lite')
-import { observer } from 'mobx-react-lite'
-observer.mockImplementation((v) => v)
-
-// mock the router
-jest.mock('next/router')
 import { useRouter } from 'next/router'
-const defaultRouterMock = () => {
-  const router = jest.fn()
-  router.query = {}
-  router.push = jest.fn()
-  router.pathname = 'logs/path'
-  return router
-}
-useRouter.mockReturnValue(defaultRouterMock())
-
-// mock usage flags
-jest.mock('components/ui/Flag/Flag')
-import Flag from 'components/ui/Flag/Flag'
-Flag.mockImplementation(({ children }) => <>{children}</>)
-jest.mock('hooks')
-import { useFlag } from 'hooks'
-useFlag.mockReturnValue(true)
-
-import { fireEvent, waitFor, screen, act } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { render } from '../../helpers'
-import userEvent from '@testing-library/user-event'
-import { wait } from '@testing-library/user-event/dist/utils'
-import { logDataFixture } from '../../fixtures'
-import { LogsTableName } from 'components/interfaces/Settings/Logs'
-import { Presets } from 'components/interfaces/Reports/Reports.types'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
-import { clickDropdown } from 'tests/helpers'
 beforeEach(() => {
   // reset mocks between tests
   get.mockReset()
@@ -48,3 +15,14 @@ test('static elements', async () => {
   await screen.findByText(/Some chart/)
   await screen.findByText(/something/)
 })
+
+test("lazy load component expandable", async ()=>{
+  const Expandable = ()=> "expanded"
+  render(<ReportWidget data={[]} renderer={() => null} expandable={Expandable} />)
+  await screen.findByText(/Expand/)
+})
+
+test("customize expandable text", async ()=>{
+  render(<ReportWidget data={[]} renderer={() => null} expandable={()=> null} expandableText="open_me"/>)
+  await screen.findByText(/open_me/)
+})