EDSC-3886: visual identifier for datasets that support combination se…

…rvices (#1691) * EDSC-3886: initial implementation for combine badge. * EDSC-3886: use checks in table for consistency * EDSC-3886: add hasCombine to tests * EDSC-3886: add tests for combine * EDSC-3886: reorder imports --------- Co-authored-by: Benjamin Poreh <bnp26@case.edu>
nasa · Nov 15, 2023 · 5cd33a3 · 5cd33a3
1 parent e3a9da6
commit 5cd33a3
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 5 deletions.
diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.js b/static/src/js/components/CollectionResults/CollectionResultsItem.js
@@ -6,6 +6,7 @@ import {
   FaClock,
   FaCloud,
   FaCogs,
+  FaCubes,
   FaFileAlt,
   FaGlobe,
   FaInfoCircle,
@@ -54,6 +55,7 @@ export const CollectionResultsItem = forwardRef(({
     displayOrganization,
     granuleCount,
     hasFormats,
+    hasCombine,
     hasMapImagery,
     hasSpatialSubsetting,
     hasTemporalSubsetting,
@@ -205,6 +207,7 @@ export const CollectionResultsItem = forwardRef(({
                     || hasTransforms
                     || hasFormats
                     || hasTemporalSubsetting
+                    || hasCombine
                   ) && (
                     <MetaIcon
                       className="collection-results-item__meta-icon collection-results-item__meta-icon--customizable"
@@ -265,6 +268,16 @@ export const CollectionResultsItem = forwardRef(({
                                 />
                               )
                             }
+                            {
+                              hasCombine && (
+                                <EDSCIcon
+                                  className="collection-results-item__icon svg fa-file-svg"
+                                  title="A white cubes icon"
+                                  icon={FaCubes}
+                                  size="0.675rem"
+                                />
+                              )
+                            }
                           </>
                         )
                       }
@@ -284,7 +297,7 @@ export const CollectionResultsItem = forwardRef(({
                                       size="0.725rem"
                                       icon={FaGlobe}
                                     />
-                                    Spatial subsetting
+                                    Spatial subset
                                   </li>
                                 )
                               }
@@ -297,7 +310,7 @@ export const CollectionResultsItem = forwardRef(({
                                       size="0.725rem"
                                       icon={FaClock}
                                     />
-                                    Temporal subsetting
+                                    Temporal subset
                                   </li>
                                 )
                               }
@@ -310,7 +323,7 @@ export const CollectionResultsItem = forwardRef(({
                                       size="0.725rem"
                                       icon={FaTags}
                                     />
-                                    Variable subsetting
+                                    Variable subset
                                   </li>
                                 )
                               }
@@ -323,7 +336,7 @@ export const CollectionResultsItem = forwardRef(({
                                       size="0.725rem"
                                       icon={FaSlidersH}
                                     />
-                                    Transformation
+                                    Transform
                                   </li>
                                 )
                               }
@@ -336,7 +349,20 @@ export const CollectionResultsItem = forwardRef(({
                                       size="0.725rem"
                                       icon={FaFileAlt}
                                     />
-                                    Reformatting
+                                    Reformat
+                                  </li>
+                                )
+                              }
+                              {
+                                hasCombine && (
+                                  <li>
+                                    <EDSCIcon
+                                      className="collection-results-item__tooltip-feature-icon"
+                                      title="A white boxes icon"
+                                      size="0.725rem"
+                                      icon={FaCubes}
+                                    />
+                                    Combine
                                   </li>
                                 )
                               }

diff --git a/static/src/js/components/CollectionResults/CollectionResultsTable.js b/static/src/js/components/CollectionResults/CollectionResultsTable.js
@@ -6,7 +6,9 @@ import {
   OverlayTrigger,
   Tooltip
 } from 'react-bootstrap'
+
 import { FaCheck, FaInfoCircle } from 'react-icons/fa'
+
 import { commafy } from '../../util/commafy'
 
 import { collectionMetadataPropType } from '../../util/propTypes/collectionMetadata'
@@ -285,6 +287,19 @@ export const CollectionResultsTable = ({
       customProps: {
         centerContent: true
       }
+    },
+    {
+      Header: 'Combine',
+      Cell: ({ value }) => (
+        <div className="edsc-table-cell">
+          {value ? <EDSCIcon className="text-success" icon={FaCheck} /> : '-'}
+        </div>
+      ),
+      accessor: 'hasCombine',
+      width: '120',
+      customProps: {
+        centerContent: true
+      }
     }
     /* eslint-enable */
   ])

diff --git a/static/src/js/components/CollectionResults/__tests__/CollectionResultsItem.test.js b/static/src/js/components/CollectionResults/__tests__/CollectionResultsItem.test.js
@@ -3,6 +3,7 @@ import Enzyme, { shallow } from 'enzyme'
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 import {
   FaClock,
+  FaCubes,
   FaFileAlt,
   FaGlobe,
   FaSlidersH,
@@ -408,6 +409,23 @@ describe('CollectionResultsList component', () => {
           expect(metaIcon.props().metadata.props.children[1].props.icon).toEqual(FaClock)
         })
       })
+
+      describe('combination icon', () => {
+        test('renders the metadata correctly', () => {
+          const { enzymeWrapper } = setup({
+            collectionMetadata: {
+              ...collectionListItemProps.collectionMetadata,
+              hasCombine: true
+            }
+          })
+          const metaContainer = enzymeWrapper.find('.collection-results-item__meta')
+          const featureItem = metaContainer.find('#feature-icon-list-view__customize')
+          const metaIcon = featureItem.find(MetaIcon)
+
+          expect(featureItem.length).toEqual(1)
+          expect(metaIcon.props().metadata.props.children[5].props.icon).toEqual(FaCubes)
+        })
+      })
     })
   })
 

diff --git a/static/src/js/components/CollectionResults/__tests__/CollectionResultsTable.test.js b/static/src/js/components/CollectionResults/__tests__/CollectionResultsTable.test.js
@@ -114,6 +114,11 @@ describe('CollectionResultsTable component', () => {
       accessor: 'hasFormats'
     }))
 
+    expect(columns[15]).toEqual(expect.objectContaining({
+      Header: 'Combine',
+      accessor: 'hasCombine'
+    }))
+
     expect(table.props().data).toEqual(collectionData)
     expect(table.props().itemCount).toEqual(props.itemCount)
     expect(table.props().loadMoreItems).toEqual(props.loadMoreItems)

diff --git a/static/src/js/components/CollectionResults/__tests__/mocks.js b/static/src/js/components/CollectionResults/__tests__/mocks.js
@@ -7,6 +7,7 @@ export const collectionListItemProps = {
     datasetId: 'Test Collection',
     displayOrganization: 'TESTORG',
     granuleCount: 10,
+    hasCombine: false,
     hasFormats: false,
     hasSpatialSubsetting: false,
     hasTemporalSubsetting: false,
@@ -39,6 +40,7 @@ export const collectionResultsBodyData = {
   datasetId: 'test dataset id',
   displayOrganization: 'test/org',
   granuleCount: 42,
+  hasCombine: false,
   hasFormats: false,
   hasMapImagery: false,
   hasSpatialSubsetting: false,
@@ -67,6 +69,7 @@ export const collectionData = [{
   datasetId: 'Test Collection',
   displayOrganization: 'TESTORG',
   granuleCount: 10,
+  hasCombine: false,
   hasFormats: false,
   hasSpatialSubsetting: false,
   hasTemporalSubsetting: false,

diff --git a/static/src/js/util/__tests__/formatCollectionList.test.js b/static/src/js/util/__tests__/formatCollectionList.test.js
@@ -59,6 +59,7 @@ describe('formatCollectionList', () => {
       datasetId: 'test dataset id',
       displayOrganization: 'test/org',
       granuleCount: 42,
+      hasCombine: false,
       hasFormats: false,
       hasMapImagery: false,
       hasSpatialSubsetting: false,
@@ -104,6 +105,7 @@ describe('formatCollectionList', () => {
       datasetId: null,
       displayOrganization: '',
       granuleCount: 0,
+      hasCombine: false,
       hasFormats: false,
       hasMapImagery: false,
       hasSpatialSubsetting: false,
@@ -233,6 +235,7 @@ describe('formatCollectionList', () => {
       datasetId: 'test dataset id',
       displayOrganization: 'test/org',
       granuleCount: 42,
+      hasCombine: false,
       hasFormats: true,
       hasMapImagery: false,
       hasSpatialSubsetting: true,

diff --git a/static/src/js/util/formatCollectionList.js b/static/src/js/util/formatCollectionList.js
@@ -90,6 +90,7 @@ export const formatCollectionList = (collections, metadata, projectIds = [], bro
     const isLast = index === collectionIds.length - 1
 
     // Determine service feature flags
+    let hasCombine = false
     let hasFormats = false
     let hasSpatialSubsetting = false
     let hasTemporalSubsetting = false
@@ -100,13 +101,15 @@ export const formatCollectionList = (collections, metadata, projectIds = [], bro
       const service = serviceFeatures[key]
 
       const {
+        has_combine: serviceHasCombine,
         has_formats: serviceHasFormats,
         has_spatial_subsetting: serviceHasSpatialSubsetting,
         has_temporal_subsetting: serviceHasTemporalSubsetting,
         has_transforms: serviceHasTransforms,
         has_variables: serviceHasVariables
       } = service
 
+      if (serviceHasCombine) hasCombine = true
       if (serviceHasFormats) hasFormats = true
       if (serviceHasSpatialSubsetting) hasSpatialSubsetting = true
       if (serviceHasTemporalSubsetting) hasTemporalSubsetting = true
@@ -139,6 +142,7 @@ export const formatCollectionList = (collections, metadata, projectIds = [], bro
       datasetId,
       displayOrganization,
       granuleCount,
+      hasCombine,
       hasFormats,
       hasMapImagery,
       hasSpatialSubsetting,