MMT-4000: As a user, I can see the metadata preview for Visualizations on MMT (#1366)

* MMT-4000: Fix apollo errors on main for the collection test by adding associationDetails

* MMT-4000: Adding cmr-preview for Visualization records

* MMT-4000: Update MMT to include the latest cmr-preview page and the visualizations associated to the collection

* MMT-4000: Bump express to match dependabot PR and run npm audit fix

* MMT-4000: Add in `name` field to pass to vis preview

Author: eudoroolivares2016

package-lock.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.5",
-    "@edsc/metadata-preview": "^1.3.19",
+    "@edsc/metadata-preview": "^1.4.0-beta.2",
     "@node-saml/node-saml": "^4.0.5",
     "@rjsf/core": "^5.15.0",
     "@rjsf/utils": "^5.15.0",
@@ -96,7 +96,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "http": "^0.0.1-security",
     "http-proxy": "^1.18.1",
     "jsdom": "^22.1.0",

package.json

@@ -580,7 +580,8 @@ const insertMetadata = async () => {
       let url
       const headers = {
         'Content-Type': contentType,
-        Authorization: systemToken
+        Authorization: systemToken,
+        'Cmr-Validate-Keywords': 'false'
       }
 
       if (collectionUri.includes('EDF_DEV06')) {

setup/setupCmr.js

@@ -3,7 +3,8 @@ import {
   CollectionPreview,
   ServicePreview,
   ToolPreview,
-  VariablePreview
+  VariablePreview,
+  VisualizationPreview
 } from '@edsc/metadata-preview'
 import { useParams } from 'react-router'
 import { useSuspenseQuery } from '@apollo/client'
@@ -124,6 +125,16 @@ const MetadataPreview = ({
             />
           )
         }
+        {
+          conceptType === 'Visualization' && (
+            <VisualizationPreview
+              cmrHost={cmrHost}
+              visualization={concept}
+              conceptId={conceptId}
+              conceptType={type}
+            />
+          )
+        }
       </Col>
     </Row>
   )

static/src/js/components/MetadataPreview/MetadataPreview.jsx

@@ -2,7 +2,8 @@ import {
   CollectionPreview,
   ServicePreview,
   ToolPreview,
-  VariablePreview
+  VariablePreview,
+  VisualizationPreview
 } from '@edsc/metadata-preview'
 import { render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
@@ -24,7 +25,8 @@ import {
   mockCollectionWithAssociatedVariables,
   mockServiceDraft,
   mockToolDraft,
-  mockVariableDraft
+  mockVariableDraft,
+  mockVisualizationDraft
 } from './__mocks__/MatadataPreviewMocks'
 
 vi.mock('@edsc/metadata-preview')
@@ -236,6 +238,73 @@ describe('MetadataPreview', () => {
     })
   })
 
+  describe('when the conceptType is Visualization draft', () => {
+    test('renders a Visualization Preview component', async () => {
+      setup({
+        overrideProps: {
+          conceptId: 'VISD000000-MMT',
+          conceptType: 'Visualization'
+        },
+        mock: [{
+          request: {
+            query: conceptTypeDraftQueries.Visualization,
+            variables: {
+              params: {
+                conceptId: 'VISD000000-MMT',
+                conceptType: 'Visualization'
+              },
+              variableParams: null
+            }
+          },
+          result: {
+            data: {
+              draft: mockVisualizationDraft
+            }
+          }
+        }],
+        initialEntries: '/drafts/visualizations/VISD000000-MMT'
+      })
+
+      await waitFor(() => {
+        expect(VisualizationPreview).toHaveBeenCalledWith({
+          cmrHost: 'http://example.com',
+          conceptId: 'VISD000000-MMT',
+          conceptType: 'visualization-draft',
+          conceptUrlTemplate: '/{conceptType}/{conceptId}',
+          isPlugin: true,
+          visualization: {
+            __typename: 'Visualization',
+            conceptId: 'VISD0000000000-CMR',
+            description: 'Draft test description',
+            generation: {},
+            identifier: 'Extra Data',
+            metadataSpecification: {
+              url: 'https://cdn.earthdata.nasa.gov/umm/visualization/v1.1.0',
+              name: 'Visualization',
+              version: '1.1.0'
+            },
+            pageTitle: 'Creating Test 3',
+            name: 'Creating Test 3',
+            nativeId: 'Visualization-1303',
+            providerId: 'MMT_1',
+            revisionDate: '2025-04-25T17:25:17.825Z',
+            revisionId: '1',
+            scienceKeywords: null,
+            spatialExtent: null,
+            specification: {},
+            subtitle: null,
+            temporalExtents: null,
+            title: 'Draft test title',
+            ummMetadata: null,
+            visualizationType: 'tiles'
+          }
+        }, {})
+      })
+
+      expect(VisualizationPreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
   describe('when the conceptType is Variable draft', () => {
     test('renders a Variable Preview component', async () => {
       setup({