Merge pull request #1405 from kianamcc/PORTALS-3304

PORTALS-3304: New What We Do Component

apps/portals/elportal/src/config/resources.ts

@@ -14,6 +14,7 @@ export const cohortBuilderSql = 'SELECT * FROM syn52234652'
 export const cohortBuilderFilesSql = 'SELECT * FROM syn52234677'
 export const partnersSql =
   'SELECT * FROM syn62661043 order by organizationName desc'
+export const whatWeDoSql = 'SELECT * FROM syn64130706'
 
 export const defaultSearchConfiguration = {
   fullTextSearchHelpURL: 'https://help.eliteportal.org/help/search-tips',

apps/portals/elportal/src/pages/HomePage.tsx

@@ -10,9 +10,15 @@ import {
   SynapseConstants,
   UserCardListRotate,
   RecentPublicationsGrid,
+  ImageCardGridWithLinks,
 } from 'synapse-react-client'
 import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
-import { partnersSql, peopleSql, topPublicationsSql } from '../config/resources'
+import {
+  partnersSql,
+  peopleSql,
+  topPublicationsSql,
+  whatWeDoSql,
+} from '../config/resources'
 
 export default function HomePage() {
   return (
@@ -29,6 +35,13 @@ export default function HomePage() {
           loadingSkeletonRowCount={10}
         />
       </SectionLayout>
+      <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
+        <ImageCardGridWithLinks
+          sql={whatWeDoSql}
+          title="What We Do"
+          summaryText="We provide multi-omic datasets, software tools, and publications that empower researchers to discover the latest health-promoting therapeutics."
+        />
+      </SectionLayout>
       <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
         <Goals entityId={'syn51449135'} />
       </SectionLayout>

packages/synapse-react-client/src/components/ImageCardGridWithLinks/ImageCardGridWithLinks.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react'
+import ImageCardGridWithLinks from './ImageCardGridWithLinks'
+import { MemoryRouter } from 'react-router-dom'
+import React from 'react'
+
+const meta = {
+  title: 'Home Page/ImageCardGridWithLinks',
+  component: ImageCardGridWithLinks,
+  parameters: {
+    chromatic: { viewports: [600, 1200] },
+  },
+} satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Demo: Story = {
+  render: args => (
+    <MemoryRouter>
+      <ImageCardGridWithLinks {...args} />
+    </MemoryRouter>
+  ),
+  args: {
+    sql: 'SELECT * FROM syn64130706',
+    title: 'title',
+    summaryText: 'summary',
+  },
+}

packages/synapse-react-client/src/components/ImageCardGridWithLinks/ImageCardGridWithLinks.test.tsx

@@ -0,0 +1,143 @@
+import ImageCardGridWithLinks, {
+  ImageCardGridWithLinksProps,
+} from './ImageCardGridWithLinks'
+import useGetQueryResultBundle from '../../synapse-queries/entity/useGetQueryResultBundle'
+import { createMemoryRouter, RouterProvider } from 'react-router-dom'
+import { screen, render, waitFor } from '@testing-library/react'
+import { createWrapper } from '../../testutils/TestingLibraryUtils'
+import React from 'react'
+import {
+  BatchFileResult,
+  ColumnTypeEnum,
+  QueryResultBundle,
+} from '@sage-bionetworks/synapse-types'
+import { getUseQuerySuccessMock } from '../../testutils/ReactQueryMockUtils'
+import { SynapseClient } from '../../index'
+
+jest.mock('../../synapse-queries/entity/useGetQueryResultBundle')
+const mockUseGetQueryResultBundle = jest.mocked(useGetQueryResultBundle)
+
+describe('ImageCardGridWithLinks Tests', () => {
+  const mockProps: ImageCardGridWithLinksProps = {
+    sql: 'SELECT * FROM syn64112885',
+    title: 'Test title',
+    summaryText: 'This is a summary.',
+  }
+
+  const mockQueryResult: QueryResultBundle = {
+    concreteType: 'org.sagebionetworks.repo.model.table.QueryResultBundle',
+    queryResult: {
+      concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',
+      queryResults: {
+        concreteType: 'org.sagebionetworks.repo.model.table.RowSet',
+        tableId: 'syn64112885',
+        etag: 'DEFAULT',
+        headers: [
+          {
+            name: 'Image',
+            columnType: ColumnTypeEnum.FILEHANDLEID,
+            id: '81723',
+          },
+          {
+            name: 'LinkText',
+            columnType: ColumnTypeEnum.STRING,
+            id: '81724',
+          },
+          {
+            name: 'Link',
+            columnType: ColumnTypeEnum.LINK,
+            id: '81725',
+          },
+        ],
+        rows: [
+          {
+            rowId: 1,
+            values: [
+              '149976034',
+              'Comparative Biology',
+              'https://en.wikipedia.org/wiki/Comparative_biology#:~:text=Comparative%20biology%20uses%20natural%20variation,role%20of%20organisms%20in%20ecosystems.',
+            ],
+          },
+          {
+            rowId: 2,
+            values: [
+              '149976044',
+              'Reference Genomes',
+              'https://en.wikipedia.org/wiki/Reference_genome',
+            ],
+          },
+        ],
+      },
+    },
+    selectColumns: [
+      {
+        name: 'Image',
+        columnType: ColumnTypeEnum.FILEHANDLEID,
+        id: '81723',
+      },
+      {
+        name: 'LinkText',
+        columnType: ColumnTypeEnum.STRING,
+        id: '81724',
+      },
+      {
+        name: 'Link',
+        columnType: ColumnTypeEnum.LINK,
+        id: '81725',
+      },
+    ],
+  }
+
+  const mockFileResult = [
+    {
+      fileHandleId: '149976034',
+      preSignedURL: 'https://mockurl.com/orangecat.jpeg',
+    },
+    {
+      fileHandleId: '149976044',
+      preSignedURL: 'https://mockurl.com/tabbycat.jpeg',
+    },
+  ]
+
+  const mockBatchFileResult: BatchFileResult = {
+    requestedFiles: mockFileResult,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.spyOn(SynapseClient, 'getFiles').mockResolvedValue(mockBatchFileResult)
+    mockUseGetQueryResultBundle.mockReturnValue(
+      getUseQuerySuccessMock(mockQueryResult),
+    )
+  })
+
+  const renderWithRouter = (props: ImageCardGridWithLinksProps) => {
+    const router = createMemoryRouter([
+      {
+        path: '/',
+        element: <ImageCardGridWithLinks {...props} />,
+      },
+    ])
+    return render(<RouterProvider router={router} />, {
+      wrapper: createWrapper(),
+    })
+  }
+
+  it('fetches and displays cards', async () => {
+    renderWithRouter(mockProps)
+
+    await waitFor(() =>
+      expect(mockUseGetQueryResultBundle).toHaveBeenCalledTimes(1),
+    )
+
+    expect(screen.getByText('Test title')).toBeInTheDocument()
+    expect(screen.getByText('This is a summary.')).toBeInTheDocument()
+    expect(screen.getByText('Comparative Biology')).toBeInTheDocument()
+    expect(screen.getByText('Reference Genomes')).toBeInTheDocument()
+
+    await waitFor(() => {
+      const images = screen.getAllByRole('img')
+      expect(images).toHaveLength(2)
+    })
+  })
+})