MMT-3990: Adding Published and Draft Visualizations (#1355)

* MMT-3990: Adding Published and Draft Visualizations

* MMT-3990: Removing Search Bar for now

* MMT-3990: Adding comments and lint

Author: mandyparson

static.config.json

@@ -29,7 +29,8 @@
     "ummC": "1.18.3",
     "ummS": "1.5.3",
     "ummT": "1.2.0",
-    "ummV": "1.9.0"
+    "ummV": "1.9.0",
+    "ummVis": "1.1.0"
   },
   "ummJsonSchemaUrl": "http://json-schema.org/draft-07/schema#",
   "edl": {

static/src/js/components/DraftList/DraftList.jsx

@@ -9,7 +9,6 @@ import Col from 'react-bootstrap/Col'
 import Row from 'react-bootstrap/Row'
 
 import { DATE_FORMAT } from '@/js/constants/dateFormat'
-import conceptIdTypes from '@/js/constants/conceptIdTypes'
 import conceptTypeDraftsQueries from '@/js/constants/conceptTypeDraftsQueries'
 import constructDownloadableFile from '@/js/utils/constructDownloadableFile'
 import urlValueTypeToConceptTypeStringMap from '@/js/constants/urlValueToConceptStringMap'
@@ -58,7 +57,7 @@ const DraftList = () => {
 
     let cellData = originalCellData
 
-    if (!cellData && draftType === conceptIdTypes.C) cellData = '<Blank Short Name>'
+    if (!cellData && draftType === 'Collection') cellData = '<Blank Short Name>'
     if (!cellData) cellData = '<Blank Name>'
 
     return (
@@ -71,7 +70,7 @@ const DraftList = () => {
   const buildEllipsisTextCell = useCallback((originalCellData) => {
     let cellData = originalCellData
 
-    if (!cellData && draftType === conceptIdTypes.C) cellData = '<Blank Entry Title>'
+    if (!cellData && draftType === 'Collection') cellData = '<Blank Entry Title>'
     if (!cellData) cellData = '<Blank Long Name>'
 
     return (
@@ -114,7 +113,23 @@ const DraftList = () => {
       dataAccessorFn: buildEllipsisTextCell
     }
   ]
-  const nonCollectionColumns = [
+
+  const visColumns = [
+    {
+      dataKey: 'previewMetadata.name',
+      title: 'Name',
+      className: 'col-auto',
+      dataAccessorFn: buildPrimaryEllipsisLink
+    },
+    {
+      dataKey: 'previewMetadata.title',
+      title: 'Long Name',
+      className: 'col-auto',
+      dataAccessorFn: buildEllipsisTextCell
+    }
+  ]
+
+  const defaultColumns = [
     {
       dataKey: 'ummMetadata.Name',
       title: 'Name',
@@ -147,9 +162,18 @@ const DraftList = () => {
     }
   ]
 
-  const columns = draftType === conceptIdTypes.C
-    ? [...collectionColumns, ...commonColumns]
-    : [...nonCollectionColumns, ...commonColumns]
+  const getColumns = () => {
+    switch (draftType) {
+      case 'Collection':
+        return [...collectionColumns, ...commonColumns]
+      case 'Visualization':
+        return [...visColumns, ...commonColumns]
+      default:
+        return [...defaultColumns, ...commonColumns]
+    }
+  }
+
+  const columns = getColumns()
 
   return (
     <Row>

static/src/js/components/DraftList/__tests__/DraftList.test.jsx

@@ -13,9 +13,16 @@ import constructDownloadableFile from '@/js/utils/constructDownloadableFile'
 
 import { GET_TOOL_DRAFTS } from '@/js/operations/queries/getToolDrafts'
 import { GET_COLLECTION_DRAFTS } from '@/js/operations/queries/getCollectionDrafts'
+import { GET_VISUALIZATION_DRAFTS } from '@/js/operations/queries/getVisualizationDrafts'
 
 import ErrorBoundary from '@/js/components/ErrorBoundary/ErrorBoundary'
 
+import {
+  mockCollectionDrafts,
+  mockToolDrafts,
+  mockVisualizationDrafts
+} from './__mocks__/DraftListMocks'
+
 import DraftList from '../DraftList'
 
 vi.mock('react-bootstrap/Placeholder', () => ({ default: vi.fn() }))
@@ -27,124 +34,6 @@ vi.mock('react-router-dom', async () => ({
   useParams: vi.fn().mockImplementation(() => ({ draftType: 'tools' }))
 }))
 
-const mockToolDrafts = {
-  count: 3,
-  items: [
-    {
-      conceptId: 'TD1200000092-MMT_2',
-      revisionDate: '2023-12-08T17:56:09.385Z',
-      revisionId: '1',
-      ummMetadata: {
-        Name: 'Tool TD1200000092 short name',
-        LongName: 'Tool TD1200000092 long name'
-      },
-      name: 'Tool TD1200000092 short name',
-      previewMetadata: {
-        conceptId: 'TD1200000092-MMT_2',
-        revisionId: '1',
-        name: 'Tool TD1200000092 short name',
-        longName: 'Tool TD1200000092 long name',
-        __typename: 'Tool'
-      },
-      providerId: 'MMT_2',
-      __typename: 'Draft'
-    },
-    {
-      conceptId: 'TD1200000093-MMT_2',
-      revisionDate: '2023-11-08T17:56:09.385Z',
-      revisionId: '1',
-      ummMetadata: {},
-      previewMetadata: {
-        conceptId: 'TD1200000093-MMT_2',
-        revisionId: '1',
-        name: null,
-        longName: null,
-        __typename: 'Tool'
-      },
-      providerId: 'MMT_2',
-      __typename: 'Draft'
-    },
-    {
-      conceptId: 'TD1200000094-MMT_2',
-      revisionDate: '2023-10-08T17:56:09.385Z',
-      revisionId: '1',
-      ummMetadata: {
-        Name: 'Tool TD1200000094 short name',
-        LongName: 'Tool TD1200000094 long name'
-      },
-      previewMetadata: {
-        conceptId: 'TD1200000094-MMT_2',
-        revisionId: '1',
-        name: null,
-        longName: null,
-        __typename: 'Tool'
-      },
-      providerId: 'MMT_2',
-      __typename: 'Draft'
-    }
-  ],
-  __typename: 'DraftList'
-}
-
-const mockCollectionDrafts = {
-  count: 3,
-  items: [
-    {
-      conceptId: 'CD1200000092-MMT_2',
-      revisionDate: '2023-12-08T17:56:09.385Z',
-      revisionId: '1',
-      ummMetadata: {
-        ShortName: 'Collection CD1200000092 short name',
-        EntryTitle: 'Collection CD1200000092 entry title'
-      },
-      shortName: 'Collection CD1200000092 short name',
-      previewMetadata: {
-        conceptId: 'CD1200000092-MMT_2',
-        revisionId: '1',
-        shortName: 'Collection CD1200000092 short name',
-        entryTitle: 'Collection CD1200000092 entry title',
-        __typename: 'Collection'
-      },
-      providerId: 'MMT_2',
-      __typename: 'Draft'
-    },
-    {
-      conceptId: 'CD1200000093-MMT_2',
-      revisionDate: '2023-11-08T17:56:09.385Z',
-      revisionId: '1',
-      ummMetadata: {},
-      previewMetadata: {
-        conceptId: 'CD1200000093-MMT_2',
-        revisionId: '1',
-        shortName: null,
-        entryTitle: null,
-        __typename: 'Collection'
-      },
-      providerId: 'MMT_2',
-      __typename: 'Draft'
-    },
-    {
-      conceptId: 'CD1200000094-MMT_2',
-      revisionDate: '2023-10-08T17:56:09.385Z',
-      revisionId: '1',
-      ummMetadata: {
-        ShortName: 'Collection CD1200000094 short name',
-        EntryTitle: 'Collection CD1200000094 entry title'
-      },
-      previewMetadata: {
-        conceptId: 'CD1200000094-MMT_2',
-        revisionId: '1',
-        shortName: null,
-        entryTitle: null,
-        __typename: 'Collection'
-      },
-      providerId: 'MMT_2',
-      __typename: 'Draft'
-    }
-  ],
-  __typename: 'DraftList'
-}
-
 const setup = ({ overrideMocks = false }) => {
   const mocks = [{
     request: {
@@ -335,4 +224,51 @@ describe('DraftList', () => {
       )
     })
   })
+
+  describe('when draft type Visualization is given', () => {
+    test('renders Visualization draft list', async () => {
+      useParams.mockImplementation(() => ({ draftType: 'visualizations' }))
+
+      setup({
+        overrideMocks: [{
+          request: {
+            query: GET_VISUALIZATION_DRAFTS,
+            variables: {
+              params: {
+                conceptType: 'Visualization',
+                limit: 20,
+                offset: 0,
+                sortKey: ['-revision_date']
+              }
+            }
+          },
+          result: {
+            data: {
+              drafts: mockVisualizationDrafts
+            }
+          }
+        }]
+      })
+
+      const rows = await screen.findAllByRole('row')
+
+      expect(within(rows[1]).getByRole('cell', { name: 'Short Name 1' })).toBeInTheDocument()
+      expect(within(rows[1]).getByRole('cell', { name: 'Long Name 1' })).toBeInTheDocument()
+      expect(within(rows[1]).getByRole('cell', { name: 'Friday, April 25, 2025 5:26 PM' })).toBeInTheDocument()
+      expect(within(rows[1]).getByRole('cell', { name: 'MMT_1' })).toBeInTheDocument()
+      expect(within(rows[1]).getByRole('button', { name: /Download JSON/ })).toBeInTheDocument()
+
+      expect(within(rows[2]).getByRole('cell', { name: '<Blank Name>' })).toBeInTheDocument()
+      expect(within(rows[2]).getByRole('cell', { name: '<Blank Long Name>' })).toBeInTheDocument()
+      expect(within(rows[2]).getByRole('cell', { name: 'Thursday, May 15, 2025 10:30 AM' })).toBeInTheDocument()
+      expect(within(rows[2]).getByRole('cell', { name: 'MMT_1' })).toBeInTheDocument()
+      expect(within(rows[2]).getByRole('button', { name: /Download JSON/ })).toBeInTheDocument()
+
+      expect(within(rows[3]).getByRole('cell', { name: 'Short Name 3' })).toBeInTheDocument()
+      expect(within(rows[3]).getByRole('cell', { name: 'Long Name 3' })).toBeInTheDocument()
+      expect(within(rows[3]).getByRole('cell', { name: 'Thursday, June 5, 2025 2:45 PM' })).toBeInTheDocument()
+      expect(within(rows[3]).getByRole('cell', { name: 'MMT_1' })).toBeInTheDocument()
+      expect(within(rows[3]).getByRole('button', { name: /Download JSON/ })).toBeInTheDocument()
+    })
+  })
 })