MMT-3961: As a user, I can view a list of associated variables for a collection when the associated variables count is >20

sharedUtils/__tests__/getConfig.test.js

@@ -5,7 +5,7 @@ describe('getConfig', () => {
     test('returns a valid json object for applicationConfig', () => {
       const expectedApplicationConfig = {
         apiHost: 'http://localhost:4001/dev',
-        graphQlHost: 'http://localhost:3013/development/api',
+        graphQlHost: 'http://localhost:3013/api',
         cmrHost: 'http://localhost:4000',
         version: 'development'
       }

static.config.json

@@ -4,7 +4,7 @@
     "cmrHost": "http://localhost:4000",
     "env": "development",
     "gkrHost": "https://gkr.sit.earthdatacloud.nasa.gov",
-    "graphQlHost": "http://localhost:3013/development/api",
+    "graphQlHost": "http://localhost:3013/api",
     "mmtHost": "http://localhost:5173",
     "edscHost": "https://search.sit.earthdata.nasa.gov",
     "version": "development",

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

@@ -5,22 +5,20 @@ import {
   ToolPreview,
   VariablePreview
 } from '@edsc/metadata-preview'
-import PropTypes from 'prop-types'
-
-import { useSuspenseQuery } from '@apollo/client'
 import { useParams } from 'react-router'
-
+import { useSuspenseQuery } from '@apollo/client'
 import Col from 'react-bootstrap/Col'
+import PropTypes from 'prop-types'
 import Row from 'react-bootstrap/Row'
 
+import getConceptTypeByDraftConceptId from '@/js/utils/getConceptTypeByDraftConceptId'
+
 import conceptTypeDraftQueries from '../../constants/conceptTypeDraftQueries'
 import conceptTypeQueries from '../../constants/conceptTypeQueries'
 
-import getConceptTypeByDraftConceptId from '../../utils/getConceptTypeByDraftConceptId'
 import { getApplicationConfig } from '../../../../../sharedUtils/getConfig'
 
 import '@edsc/metadata-preview/dist/style.min.css'
-
 /**
  * MetadataPreview
  * @typedef {Object} MetadataPreview
@@ -64,9 +62,12 @@ const MetadataPreview = ({
     }
   }
 
+  const variableParams = (conceptType === 'Collection') ? { limit: 1000 } : null
+
   const { data } = useSuspenseQuery(query, {
     variables: {
-      params
+      params,
+      variableParams
     }
   })
 

static/src/js/components/MetadataPreview/__tests__/MetadataPreivew.test.jsx → static/src/js/components/MetadataPreview/__tests__/MetadataPreview.test.jsx

@@ -21,6 +21,7 @@ import conceptTypeQueries from '../../../constants/conceptTypeQueries'
 import {
   mockCollection,
   mockCollectionDraft,
+  mockCollectionWithAssociatedVariables,
   mockServiceDraft,
   mockToolDraft,
   mockVariableDraft
@@ -98,7 +99,8 @@ describe('MetadataPreview', () => {
               params: {
                 conceptId: 'TD000000-MMT',
                 conceptType: 'Tool'
-              }
+              },
+              variableParams: null
             }
           },
           result: {
@@ -175,7 +177,8 @@ describe('MetadataPreview', () => {
               params: {
                 conceptId: 'SD000000-MMT',
                 conceptType: 'Service'
-              }
+              },
+              variableParams: null
             }
           },
           result: {
@@ -247,7 +250,8 @@ describe('MetadataPreview', () => {
               params: {
                 conceptId: 'VD000000-MMT',
                 conceptType: 'Variable'
-              }
+              },
+              variableParams: null
             }
           },
           result: {
@@ -320,7 +324,8 @@ describe('MetadataPreview', () => {
               params: {
                 conceptId: 'CD000000-MMT',
                 conceptType: 'Collection'
-              }
+              },
+              variableParams: { limit: 1000 }
             }
           },
           result: {
@@ -437,7 +442,10 @@ describe('MetadataPreview', () => {
         mock: [{
           request: {
             query: conceptTypeQueries.Collection,
-            variables: { params: { conceptId: 'C1000000-MMT' } }
+            variables: {
+              params: { conceptId: 'C1000000-MMT' },
+              variableParams: { limit: 1000 }
+            }
           },
           result: {
             data: {
@@ -465,4 +473,46 @@ describe('MetadataPreview', () => {
       expect(CollectionPreview).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('when the conceptType is Collection and there are more than 20 Associated Variables', () => {
+    test('renders a Collection Preview with correct Associated Variables', async () => {
+      setup({
+        overrideProps: {
+          conceptId: 'C1000000-MMT',
+          conceptType: 'Collection'
+        },
+        mock: [{
+          request: {
+            query: conceptTypeQueries.Collection,
+            variables: {
+              params: { conceptId: 'C1000000-MMT' },
+              variableParams: { limit: 1000 }
+            }
+          },
+          result: {
+            data: {
+              collection: mockCollectionWithAssociatedVariables
+            }
+          }
+        }],
+        initialEntries: '/C1000000-MMT',
+        overrideRoute: '/:conceptId',
+        overridePath: '/'
+      })
+
+      await waitFor(() => {
+        expect(CollectionPreview).toHaveBeenCalledWith({
+          cmrHost: 'http://example.com',
+          conceptId: 'C1000000-MMT',
+          conceptType: 'collection',
+          conceptUrlTemplate: '/{conceptType}/{conceptId}',
+          isPlugin: true,
+          collection: mockCollectionWithAssociatedVariables,
+          token: null
+        }, {})
+      })
+
+      expect(CollectionPreview).toHaveBeenCalledTimes(1)
+    })
+  })
 })