From 14284e928f304e4c33f2fc82973ebc339812f954 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:04:46 -0500
Subject: [PATCH 01/14] EDSC-4322: Fix portal mock test

---
 .../__tests__/SearchSidebarHeader.test.js     |  3 +-
 .../__tests__/availablePortalsMock.json       | 65 +++++++++++++++++++
 2 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json

diff --git a/static/src/js/components/SearchSidebar/__tests__/SearchSidebarHeader.test.js b/static/src/js/components/SearchSidebar/__tests__/SearchSidebarHeader.test.js
index ad979bd6f6..3dabd18ee1 100644
--- a/static/src/js/components/SearchSidebar/__tests__/SearchSidebarHeader.test.js
+++ b/static/src/js/components/SearchSidebar/__tests__/SearchSidebarHeader.test.js
@@ -25,8 +25,7 @@ import SearchSidebarHeader from '../SearchSidebarHeader'
 import SearchFormContainer from '../../../containers/SearchFormContainer/SearchFormContainer'
 import PortalLinkContainer from '../../../containers/PortalLinkContainer/PortalLinkContainer'
 
-// eslint-disable-next-line import/no-unresolved
-import availablePortals from '../../../../../../portals/availablePortals.json'
+import availablePortals from './availablePortalsMock.json'
 
 import * as getApplicationConfig from '../../../../../../sharedUtils/config'
 
diff --git a/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json b/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json
new file mode 100644
index 0000000000..fd0f0745b6
--- /dev/null
+++ b/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json
@@ -0,0 +1,65 @@
+{
+  "edsc": {
+    "features": {
+      "advancedSearch": true,
+      "authentication": true,
+      "featureFacets": [
+        { }
+      ]
+    },
+    "footer": {
+      "attributionText": "NASA Official: Stephen Berrick",
+      "displayVersion": true,
+      "primaryLinks": [ ],
+      "secondaryLinks": [ ]
+    },
+    "pageTitle": "Earthdata Search",
+    "portalBrowser": false,
+    "title": {
+      "primary": "Earthdata Search"
+    },
+    "ui": {
+      "showNonEosdisCheckbox": true,
+      "showOnlyGranulesCheckbox": true,
+      "showTophat": true
+    },
+    "portalId": "edsc"
+  },
+  "idn": {
+    "moreInfoUrl": "https://ceos.org/ourwork/workinggroups/wgiss/access/international-directory-network/",
+    "pageTitle": "IDN",
+    "parentConfig": "edsc",
+    "portalBrowser": true,
+    "query": {
+      "hasGranulesOrCwic": null
+    },
+    "title": {
+      "primary": "IDN",
+      "secondary": "CEOS International Directory Network"
+    },
+    "ui": {
+      "showNonEosdisCheckbox": false,
+      "showOnlyGranulesCheckbox": false
+    },
+    "portalId": "idn"
+  },
+  "soos": {
+    "moreInfoUrl": "http://www.soos.aq",
+    "pageTitle": "Southern Ocean Observing System",
+    "parentConfig": "edsc",
+    "portalBrowser": true,
+    "query": {
+      "hasGranulesOrCwic": null,
+      "tagKey": [ ]
+    },
+    "title": {
+      "primary": "SOOS",
+      "secondary": "Southern Ocean Observing System"
+    },
+    "ui": {
+      "showNonEosdisCheckbox": false,
+      "showOnlyGranulesCheckbox": false
+    },
+    "portalId": "soos"
+  }
+}
\ No newline at end of file

From 13cdb9d1ba0dcbd20da531bc6ef7d7901b3a1409 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:05:21 -0500
Subject: [PATCH 02/14] EDSC-4322: Fix Customizable Icons styling

---
 README.md                                     |  2 +-
 .../CustomizableIcons/CustomizableIcons.jsx   | 41 +++++++------
 .../CustomizableIcons/CustomizableIcons.scss  | 57 +++++++++++++++++++
 .../__tests__/CustomizableIcons.test.js       |  6 +-
 .../AccessMethodRadio/AccessMethodRadio.jsx   | 26 ++++-----
 .../GranuleResultsDataLinksButton.scss        |  4 +-
 .../src/js/components/MetaIcon/MetaIcon.scss  |  4 +-
 static/src/js/components/Tour/TourSteps.jsx   |  2 +-
 8 files changed, 101 insertions(+), 41 deletions(-)
 create mode 100644 static/src/js/components/CustomizableIcons/CustomizableIcons.scss

diff --git a/README.md b/README.md
index 361f66f87a..c76951cc93 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ The local development environment for the static assets can be started by execut
 
 This will run the React application at [http://localhost:8080](http://localhost:8080) -- please see `Serverless Framework` below for enabling the 'server' side functionality.
 
-### Serverless Framework
+### Serverless Framework Locally
 
 The [serverless framework](https://serverless.com/framework/docs/providers/aws/) offers many plugins which allow for local development utilizing many of the services AWS offers. For the most part we only need API Gateway and Lambda for this application but there are plugins for many more services (a list of known exceptions will be maintained below).
 
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx b/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
index 8a84aacbfd..5d5dc3f745 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
+++ b/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import {
   Settings,
@@ -17,6 +18,8 @@ import {
 import MetaIcon from '../MetaIcon/MetaIcon'
 import EDSCIcon from '../EDSCIcon/EDSCIcon'
 
+import './CustomizableIcons.scss'
+
 /**
  * Renders icons indicating customization options for access methods.
  * Used by CollectionResultsItem and AccessMethodRadio.
@@ -37,10 +40,12 @@ export const CustomizableIcons = ({
   hasCombine,
   forAccessMethodRadio
 }) => {
-  let metaIconClasses = 'collection-results-item__meta-icon collection-results-item__meta-icon--customizable'
-  if (forAccessMethodRadio) {
-    metaIconClasses += ' meta-icon__accessMethod'
-  }
+  const metaIconClasses = classNames([
+    'customizable-icons__meta-icon',
+    {
+      'customizable-icons__meta-icon__accessMethod': forAccessMethodRadio
+    }
+  ])
 
   return (
     (
@@ -56,14 +61,14 @@ export const CustomizableIcons = ({
         id="feature-icon-list-view__customize"
         icon={Settings}
         label="Customize"
-        tooltipClassName="collection-results-item__tooltip text-align-left"
+        tooltipClassName="customizable-icons__tooltip text-align-left"
         metadata={
           (
             <>
               {
                 hasSpatialSubsetting && (
                   <EDSCIcon
-                    className="collection-results-item__icon svg fa-globe-svg"
+                    className="customizable-icons__icon svg fa-globe-svg"
                     title="A white globe icon"
                     icon={FaGlobe}
                     size="0.675rem"
@@ -73,7 +78,7 @@ export const CustomizableIcons = ({
               {
                 hasTemporalSubsetting && (
                   <EDSCIcon
-                    className="collection-results-item__icon svg fa-clock-svg"
+                    className="customizable-icons__icon svg fa-clock-svg"
                     title="A white clock icon"
                     icon={FaClock}
                     size="0.675rem"
@@ -83,7 +88,7 @@ export const CustomizableIcons = ({
               {
                 hasVariables && (
                   <EDSCIcon
-                    className="collection-results-item__icon svg fa-tags-svg"
+                    className="customizable-icons__icon svg fa-tags-svg"
                     title="A white tags icon"
                     icon={FaTags}
                     size="0.675rem"
@@ -93,7 +98,7 @@ export const CustomizableIcons = ({
               {
                 hasTransforms && (
                   <EDSCIcon
-                    className="collection-results-item__icon svg fa-sliders-svg"
+                    className="customizable-icons__icon svg fa-sliders-svg"
                     title="A white horizontal sliders icon"
                     icon={Filter}
                     size="0.675rem"
@@ -103,7 +108,7 @@ export const CustomizableIcons = ({
               {
                 hasFormats && (
                   <EDSCIcon
-                    className="collection-results-item__icon svg fa-file-svg"
+                    className="customizable-icons__icon svg fa-file-svg"
                     title="A white file icon"
                     icon={FileGeneric}
                     size="0.675rem"
@@ -113,7 +118,7 @@ export const CustomizableIcons = ({
               {
                 hasCombine && (
                   <EDSCIcon
-                    className="collection-results-item__icon svg fa-file-svg"
+                    className="customizable-icons__icon svg fa-file-svg"
                     title="A white cubes icon"
                     icon={FaCubes}
                     size="0.675rem"
@@ -129,12 +134,12 @@ export const CustomizableIcons = ({
               <div>
                 Supports customization:
               </div>
-              <ul className="collection-results-item__tooltip-feature-list">
+              <ul className="customizable-icons__tooltip-feature-list">
                 {
                   hasSpatialSubsetting && (
                     <li>
                       <EDSCIcon
-                        className="collection-results-item__tooltip-feature-icon"
+                        className="customizable-icons__tooltip-feature-icon"
                         title="A white globe icon"
                         size="0.725rem"
                         icon={FaGlobe}
@@ -147,7 +152,7 @@ export const CustomizableIcons = ({
                   hasTemporalSubsetting && (
                     <li>
                       <EDSCIcon
-                        className="collection-results-item__tooltip-feature-icon"
+                        className="customizable-icons__tooltip-feature-icon"
                         title="A white clock icon"
                         size="0.725rem"
                         icon={FaClock}
@@ -160,7 +165,7 @@ export const CustomizableIcons = ({
                   hasVariables && (
                     <li>
                       <EDSCIcon
-                        className="collection-results-item__tooltip-feature-icon"
+                        className="customizable-icons__tooltip-feature-icon"
                         title="A white tags icon"
                         size="0.725rem"
                         icon={FaTags}
@@ -173,7 +178,7 @@ export const CustomizableIcons = ({
                   hasTransforms && (
                     <li>
                       <EDSCIcon
-                        className="collection-results-item__tooltip-feature-icon"
+                        className="customizable-icons__tooltip-feature-icon"
                         title="A white horizontal sliders icon"
                         size="0.725rem"
                         icon={Filter}
@@ -186,7 +191,7 @@ export const CustomizableIcons = ({
                   hasFormats && (
                     <li>
                       <EDSCIcon
-                        className="collection-results-item__tooltip-feature-icon"
+                        className="customizable-icons__tooltip-feature-icon"
                         title="A white file icon"
                         size="0.725rem"
                         icon={FileGeneric}
@@ -199,7 +204,7 @@ export const CustomizableIcons = ({
                   hasCombine && (
                     <li>
                       <EDSCIcon
-                        className="collection-results-item__tooltip-feature-icon"
+                        className="customizable-icons__tooltip-feature-icon"
                         title="A white boxes icon"
                         size="0.725rem"
                         icon={FaCubes}
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss b/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
new file mode 100644
index 0000000000..fc99019cf8
--- /dev/null
+++ b/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
@@ -0,0 +1,57 @@
+.customizable-icons {
+  border-bottom: 1px solid $border-color;
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  &__meta-item {
+    display: flex;
+    align-items: center;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+    font-size: 0.825rem;
+    font-weight: 500;
+    color: $color__carbon--70;
+    letter-spacing: 0.01em;
+  }
+
+  &__meta-icon {
+    color: $color__nasa-blue;
+    font-size: 0.75rem;
+    margin-right: 0;
+    &:hover {
+      color: $color__nasa-blue--shade;
+    }
+  }
+
+  &__icon {
+    margin-right: 0.25rem;
+    position: relative;
+    top: -0.05rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &__tooltip {
+    font-size: 0.75rem;
+  }
+
+  &__tooltip-feature-list {
+    width: auto;
+    margin: 0 auto;
+    padding: 0;
+    list-style: none;
+    text-align: center;
+  }
+
+  &__tooltip-feature-icon {
+    margin-right: 0.325rem;
+    color: $color__carbon--30;
+  }
+}
diff --git a/static/src/js/components/CustomizableIcons/__tests__/CustomizableIcons.test.js b/static/src/js/components/CustomizableIcons/__tests__/CustomizableIcons.test.js
index b8dde1bd32..6f6fe558c9 100644
--- a/static/src/js/components/CustomizableIcons/__tests__/CustomizableIcons.test.js
+++ b/static/src/js/components/CustomizableIcons/__tests__/CustomizableIcons.test.js
@@ -27,7 +27,7 @@ describe('CustomizableIcons component', () => {
     // Ensure the when not using the `forAccessMethodRadio` use `metaIconClasses`
     const metaIcon = screen.getByText('Customize')
     const metaIconWrapper = metaIcon.parentElement
-    expect(metaIconWrapper.className).toEqual('meta-icon collection-results-item__meta-icon collection-results-item__meta-icon--customizable')
+    expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon')
 
     // Ensure that each of the icons rendered
     expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
@@ -45,7 +45,7 @@ describe('CustomizableIcons component', () => {
       // Ensure the when using the `forAccessMethodRadio` adds the `meta-icon__accessMethod` to classname
       const metaIcon = screen.getByText('Customize')
       const metaIconWrapper = metaIcon.parentElement
-      expect(metaIconWrapper.className).toEqual('meta-icon collection-results-item__meta-icon collection-results-item__meta-icon--customizable meta-icon__accessMethod')
+      expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon customizable-icons__meta-icon__accessMethod')
     })
   })
 
@@ -59,7 +59,7 @@ describe('CustomizableIcons component', () => {
       // Ensure the when not using the `forAccessMethodRadio` use `metaIconClasses`
       const metaIcon = screen.getByText('Customize')
       const metaIconWrapper = metaIcon.parentElement
-      expect(metaIconWrapper.className).toEqual('meta-icon collection-results-item__meta-icon collection-results-item__meta-icon--customizable')
+      expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon')
 
       // Ensure that each of the icons that are supposed to render do
       expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
diff --git a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
index 29f9c44b68..e0f32861e4 100644
--- a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
+++ b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
@@ -70,19 +70,6 @@ export const AccessMethodRadio = ({
         onClick={onClick}
         disabled={disabled}
       />
-      {
-        customizationOptions && (
-          <CustomizableIcons
-            hasSpatialSubsetting={hasSpatialSubsetting}
-            hasVariables={hasVariables}
-            hasTransforms={hasTransforms}
-            hasFormats={hasFormats}
-            hasTemporalSubsetting={hasTemporalSubsetting}
-            hasCombine={hasCombine}
-            forAccessMethodRadio
-          />
-        )
-      }
       <div className="access-method-radio__radio">
         { checked && <EDSCIcon icon={Check} className="access-method-radio__radio-icon" /> }
       </div>
@@ -97,6 +84,19 @@ export const AccessMethodRadio = ({
                 {subtitle}
               </span>
             </span>
+            {
+              customizationOptions && (
+                <CustomizableIcons
+                  hasSpatialSubsetting={hasSpatialSubsetting}
+                  hasVariables={hasVariables}
+                  hasTransforms={hasTransforms}
+                  hasFormats={hasFormats}
+                  hasTemporalSubsetting={hasTemporalSubsetting}
+                  hasCombine={hasCombine}
+                  forAccessMethodRadio
+                />
+              )
+            }
           </div>
           <div className="access-method-radio__header-content">
             <span className="access-method-radio__description">
diff --git a/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss b/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss
index c09c28395f..3008e3ef22 100644
--- a/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss
+++ b/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss
@@ -9,7 +9,7 @@
     cursor: pointer;
 
     .button__icon {
-      color: rgba($color__spacesuit-white, 0.7);
+      color: $color__carbon--40;
     }
 
     &:hover {
@@ -59,7 +59,7 @@
 
   &__icon {
     margin-left: 0.5rem;
-    color: rgba($color__spacesuit-white, 0.8);
+    color: $color__carbon--40;
     opacity: 0;
     transition: all 0.2s ease;
 
diff --git a/static/src/js/components/MetaIcon/MetaIcon.scss b/static/src/js/components/MetaIcon/MetaIcon.scss
index e8abf6d2ce..23e9595925 100644
--- a/static/src/js/components/MetaIcon/MetaIcon.scss
+++ b/static/src/js/components/MetaIcon/MetaIcon.scss
@@ -9,9 +9,7 @@
   letter-spacing: 0.01em;
 
   &__accessMethod {
-    position: absolute;
-    top: $spacer*0.75;
-    right: $spacer*0.25
+    margin-left: auto;
   }
 
   &__icon {
diff --git a/static/src/js/components/Tour/TourSteps.jsx b/static/src/js/components/Tour/TourSteps.jsx
index 39d766bf13..2f86c89f23 100644
--- a/static/src/js/components/Tour/TourSteps.jsx
+++ b/static/src/js/components/Tour/TourSteps.jsx
@@ -642,7 +642,7 @@ const TourSteps = ({
               <ExternalLink
                 href="https://www.earthdata.nasa.gov/learn/earthdata-search"
               >
-                Earthdata Search wiki
+                Earthdata Search
               </ExternalLink>
             </li>
           </ul>

From c96ede47292868e06e679e77d22dc3f7cb99f687 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Wed, 4 Dec 2024 21:11:44 -0500
Subject: [PATCH 03/14] EDSC-4322: Match colors of nearby similar buttons

EDSC-4322: revert style change

EDSC-4322: Match colors
---
 .../GranuleResults/GranuleResultsDataLinksButton.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss b/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss
index 3008e3ef22..80c7d8dc55 100644
--- a/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss
+++ b/static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.scss
@@ -9,7 +9,7 @@
     cursor: pointer;
 
     .button__icon {
-      color: $color__carbon--40;
+      color: $color__carbon--50;
     }
 
     &:hover {
@@ -59,7 +59,7 @@
 
   &__icon {
     margin-left: 0.5rem;
-    color: $color__carbon--40;
+    color: $color__carbon--50;
     opacity: 0;
     transition: all 0.2s ease;
 

From a02edafe1a0a75c6b1ef9ba8ac4bf58921eb9efa Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:07:34 -0500
Subject: [PATCH 04/14] EDSC-4322: Refactor customizable icons and where its
 being called

---
 README.md                                     |   2 +-
 .../CollectionResultsItem.jsx                 |  57 +++-
 .../CollectionResultsItem.scss                |  11 +-
 .../CustomizableIcons/CustomizableIcons.jsx   | 257 +++++-------------
 .../CustomizableIcons/CustomizableIcons.scss  |  29 +-
 .../AccessMethodRadio/AccessMethodRadio.jsx   |  28 +-
 .../src/js/components/MetaIcon/MetaIcon.scss  |   6 +-
 7 files changed, 141 insertions(+), 249 deletions(-)

diff --git a/README.md b/README.md
index c76951cc93..a44a2334f6 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ To ensure that you're using the correct version of Node it is recommended that y
 
     nvm use
 
-##### Serverless Framework
+##### Running Serverless Framework locally
 
 Earthdata Search utilizes the [Serverless Framework](https://serverless.com/) for managing AWS resources. In order to fully run and manage the application you'll need to install it:
 
diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
index c60a6f3a3d..b88285cb2b 100644
--- a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
+++ b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
@@ -8,9 +8,10 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 import { AlertInformation } from '@edsc/earthdata-react-icons/horizon-design-system/earthdata/ui'
 import {
-  Plus,
+  CloudFill,
   Minus,
-  CloudFill
+  Plus,
+  Settings
 } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
 
 import {
@@ -27,6 +28,7 @@ import { retrieveThumbnail } from '../../util/retrieveThumbnail'
 
 import Button from '../Button/Button'
 import CustomizableIcons from '../CustomizableIcons/CustomizableIcons'
+import AvailableCustomizationsToolTipIcons from '../CustomizableIcons/AvailableCustomizationsToolTipIcons'
 import EDSCIcon from '../EDSCIcon/EDSCIcon'
 import MetaIcon from '../MetaIcon/MetaIcon'
 import Spinner from '../Spinner/Spinner'
@@ -171,6 +173,36 @@ export const CollectionResultsItem = forwardRef(({
     />
   )
 
+  const availableCustomizationsIcons = (
+    <CustomizableIcons
+      hasSpatialSubsetting={hasSpatialSubsetting}
+      hasVariables={hasVariables}
+      hasTransforms={hasTransforms}
+      hasFormats={hasFormats}
+      hasTemporalSubsetting={hasTemporalSubsetting}
+      hasCombine={hasCombine}
+    />
+  )
+
+  const customComponentsToolTips = (
+    <AvailableCustomizationsToolTipIcons
+      hasSpatialSubsetting={hasSpatialSubsetting}
+      hasVariables={hasVariables}
+      hasTransforms={hasTransforms}
+      hasFormats={hasFormats}
+      hasTemporalSubsetting={hasTemporalSubsetting}
+      hasCombine={hasCombine}
+      forAccessMethodRadio={false}
+    />
+  )
+
+  const supportsDataCustomizations = hasSpatialSubsetting
+    || hasVariables
+    || hasTransforms
+    || hasFormats
+    || hasTemporalSubsetting
+    || hasCombine
+
   const component = (
     <div
       className="collection-results-item"
@@ -233,15 +265,18 @@ export const CollectionResultsItem = forwardRef(({
                     />
                   )
                 }
-                <CustomizableIcons
-                  hasSpatialSubsetting={hasSpatialSubsetting}
-                  hasVariables={hasVariables}
-                  hasTransforms={hasTransforms}
-                  hasFormats={hasFormats}
-                  hasTemporalSubsetting={hasTemporalSubsetting}
-                  hasCombine={hasCombine}
-                  forAccessMethodRadio={false}
-                />
+                {
+                  supportsDataCustomizations && (
+                    <MetaIcon
+                      id="feature-icon-list-view__customize"
+                      icon={Settings}
+                      label="Customize"
+                      tooltipClassName="collection-results-item__tooltip text-align-left"
+                      tooltipContent={customComponentsToolTips}
+                      metadata={availableCustomizationsIcons}
+                    />
+                  )
+                }
                 {
                   cloudHosted && (
                     <MetaIcon
diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.scss b/static/src/js/components/CollectionResults/CollectionResultsItem.scss
index dcbe28487d..ceee9b81f0 100644
--- a/static/src/js/components/CollectionResults/CollectionResultsItem.scss
+++ b/static/src/js/components/CollectionResults/CollectionResultsItem.scss
@@ -145,16 +145,7 @@
     color: $color__carbon--70;
     letter-spacing: 0.01em;
   }
-
-  &__meta-icon {
-    color: $color__nasa-blue;
-    font-size: 0.75rem;
-
-    &:hover {
-      color: $color__nasa-blue--shade;
-    }
-  }
-
+  // TODO I don't think these meta label or detail are being used
   &__meta-label {
     display: none;
     margin-left: 0.25rem;
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx b/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
index 5d5dc3f745..33f2a4cb5b 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
+++ b/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
@@ -1,12 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 
-import {
-  Settings,
-  FileGeneric,
-  Filter
-} from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+import { FileGeneric, Filter } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
 
 import {
   FaClock,
@@ -15,7 +10,6 @@ import {
   FaTags
 } from 'react-icons/fa'
 
-import MetaIcon from '../MetaIcon/MetaIcon'
 import EDSCIcon from '../EDSCIcon/EDSCIcon'
 
 import './CustomizableIcons.scss'
@@ -38,192 +32,80 @@ export const CustomizableIcons = ({
   hasFormats,
   hasTemporalSubsetting,
   hasCombine,
-  forAccessMethodRadio
-}) => {
-  const metaIconClasses = classNames([
-    'customizable-icons__meta-icon',
-    {
-      'customizable-icons__meta-icon__accessMethod': forAccessMethodRadio
-    }
-  ])
-
-  return (
-    (
-      hasSpatialSubsetting
+  iconClassname
+}) => (
+  hasSpatialSubsetting
       || hasVariables
       || hasTransforms
       || hasFormats
       || hasTemporalSubsetting
       || hasCombine
-    ) && (
-      <MetaIcon
-        className={metaIconClasses}
-        id="feature-icon-list-view__customize"
-        icon={Settings}
-        label="Customize"
-        tooltipClassName="customizable-icons__tooltip text-align-left"
-        metadata={
-          (
-            <>
-              {
-                hasSpatialSubsetting && (
-                  <EDSCIcon
-                    className="customizable-icons__icon svg fa-globe-svg"
-                    title="A white globe icon"
-                    icon={FaGlobe}
-                    size="0.675rem"
-                  />
-                )
-              }
-              {
-                hasTemporalSubsetting && (
-                  <EDSCIcon
-                    className="customizable-icons__icon svg fa-clock-svg"
-                    title="A white clock icon"
-                    icon={FaClock}
-                    size="0.675rem"
-                  />
-                )
-              }
-              {
-                hasVariables && (
-                  <EDSCIcon
-                    className="customizable-icons__icon svg fa-tags-svg"
-                    title="A white tags icon"
-                    icon={FaTags}
-                    size="0.675rem"
-                  />
-                )
-              }
-              {
-                hasTransforms && (
-                  <EDSCIcon
-                    className="customizable-icons__icon svg fa-sliders-svg"
-                    title="A white horizontal sliders icon"
-                    icon={Filter}
-                    size="0.675rem"
-                  />
-                )
-              }
-              {
-                hasFormats && (
-                  <EDSCIcon
-                    className="customizable-icons__icon svg fa-file-svg"
-                    title="A white file icon"
-                    icon={FileGeneric}
-                    size="0.675rem"
-                  />
-                )
-              }
-              {
-                hasCombine && (
-                  <EDSCIcon
-                    className="customizable-icons__icon svg fa-file-svg"
-                    title="A white cubes icon"
-                    icon={FaCubes}
-                    size="0.675rem"
-                  />
-                )
-              }
-            </>
-          )
-        }
-        tooltipContent={
-          (
-            <>
-              <div>
-                Supports customization:
-              </div>
-              <ul className="customizable-icons__tooltip-feature-list">
-                {
-                  hasSpatialSubsetting && (
-                    <li>
-                      <EDSCIcon
-                        className="customizable-icons__tooltip-feature-icon"
-                        title="A white globe icon"
-                        size="0.725rem"
-                        icon={FaGlobe}
-                      />
-                      Spatial subset
-                    </li>
-                  )
-                }
-                {
-                  hasTemporalSubsetting && (
-                    <li>
-                      <EDSCIcon
-                        className="customizable-icons__tooltip-feature-icon"
-                        title="A white clock icon"
-                        size="0.725rem"
-                        icon={FaClock}
-                      />
-                      Temporal subset
-                    </li>
-                  )
-                }
-                {
-                  hasVariables && (
-                    <li>
-                      <EDSCIcon
-                        className="customizable-icons__tooltip-feature-icon"
-                        title="A white tags icon"
-                        size="0.725rem"
-                        icon={FaTags}
-                      />
-                      Variable subset
-                    </li>
-                  )
-                }
-                {
-                  hasTransforms && (
-                    <li>
-                      <EDSCIcon
-                        className="customizable-icons__tooltip-feature-icon"
-                        title="A white horizontal sliders icon"
-                        size="0.725rem"
-                        icon={Filter}
-                      />
-                      Transform
-                    </li>
-                  )
-                }
-                {
-                  hasFormats && (
-                    <li>
-                      <EDSCIcon
-                        className="customizable-icons__tooltip-feature-icon"
-                        title="A white file icon"
-                        size="0.725rem"
-                        icon={FileGeneric}
-                      />
-                      Reformat
-                    </li>
-                  )
-                }
-                {
-                  hasCombine && (
-                    <li>
-                      <EDSCIcon
-                        className="customizable-icons__tooltip-feature-icon"
-                        title="A white boxes icon"
-                        size="0.725rem"
-                        icon={FaCubes}
-                      />
-                      Combine
-                    </li>
-                  )
-                }
-              </ul>
-            </>
-          )
-        }
-      />
-    )
-  )
-}
+) && (
+  <>
+    {
+      hasSpatialSubsetting && (
+        <EDSCIcon
+          className="customizable-icons__icon"
+          title="A white globe icon"
+          icon={FaGlobe}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasTemporalSubsetting && (
+        <EDSCIcon
+          className="customizable-icons__icon"
+          title="A white clock icon"
+          icon={FaClock}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasVariables && (
+        <EDSCIcon
+          className="customizable-icons__icon"
+          title="A white tags icon"
+          icon={FaTags}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasTransforms && (
+        <EDSCIcon
+          className="customizable-icons__icon"
+          title="A white horizontal sliders icon"
+          icon={Filter}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasFormats && (
+        <EDSCIcon
+          className="customizable-icons__icon"
+          title="A white file icon"
+          icon={FileGeneric}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasCombine && (
+        <EDSCIcon
+          className="customizable-icons__icon"
+          title="A white cubes icon"
+          icon={FaCubes}
+          size="0.675rem"
+        />
+      )
+    }
+  </>
+)
 
 CustomizableIcons.defaultProps = {
-  forAccessMethodRadio: false,
   hasSpatialSubsetting: false,
   hasVariables: false,
   hasTransforms: false,
@@ -238,8 +120,7 @@ CustomizableIcons.propTypes = {
   hasTransforms: PropTypes.bool,
   hasFormats: PropTypes.bool,
   hasTemporalSubsetting: PropTypes.bool,
-  hasCombine: PropTypes.bool,
-  forAccessMethodRadio: PropTypes.bool
+  hasCombine: PropTypes.bool
 }
 
 export default CustomizableIcons
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss b/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
index fc99019cf8..0cd4ad3988 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
+++ b/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
@@ -1,33 +1,6 @@
 .customizable-icons {
   border-bottom: 1px solid $border-color;
 
-  &__meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
-  &__meta-item {
-    display: flex;
-    align-items: center;
-    margin-right: 0.5rem;
-    flex-shrink: 0;
-    font-size: 0.825rem;
-    font-weight: 500;
-    color: $color__carbon--70;
-    letter-spacing: 0.01em;
-  }
-
-  &__meta-icon {
-    color: $color__nasa-blue;
-    font-size: 0.75rem;
-    margin-right: 0;
-    &:hover {
-      color: $color__nasa-blue--shade;
-    }
-  }
-
   &__icon {
     margin-right: 0.25rem;
     position: relative;
@@ -38,6 +11,8 @@
     }
   }
 
+
+  // TODO these get removed or moved over
   &__tooltip {
     font-size: 0.75rem;
   }
diff --git a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
index e0f32861e4..8d4a1a354e 100644
--- a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
+++ b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { Check } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+import { Check, Settings } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
 import { FaQuestionCircle } from 'react-icons/fa'
 
 import EDSCIcon from '../../EDSCIcon/EDSCIcon'
 import ExternalLink from '../../ExternalLink/ExternalLink'
 import CustomizableIcons from '../../CustomizableIcons/CustomizableIcons'
+import MetaIcon from '../../MetaIcon/MetaIcon'
 
 import './AccessMethodRadio.scss'
 
@@ -53,6 +54,17 @@ export const AccessMethodRadio = ({
     hasCombine = false
   } = customizationOptions || {}
 
+  const availableCustomizationsIcons = (
+    <CustomizableIcons
+      hasSpatialSubsetting={hasSpatialSubsetting}
+      hasVariables={hasVariables}
+      hasTransforms={hasTransforms}
+      hasFormats={hasFormats}
+      hasTemporalSubsetting={hasTemporalSubsetting}
+      hasCombine={hasCombine}
+    />
+  )
+
   return (
     <label
       className={labelClassName}
@@ -86,14 +98,12 @@ export const AccessMethodRadio = ({
             </span>
             {
               customizationOptions && (
-                <CustomizableIcons
-                  hasSpatialSubsetting={hasSpatialSubsetting}
-                  hasVariables={hasVariables}
-                  hasTransforms={hasTransforms}
-                  hasFormats={hasFormats}
-                  hasTemporalSubsetting={hasTemporalSubsetting}
-                  hasCombine={hasCombine}
-                  forAccessMethodRadio
+                <MetaIcon
+                  id="feature-icon-list-view__customize"
+                  icon={Settings}
+                  label="Customize"
+                  tooltipClassName="collection-results-item__tooltip text-align-left"
+                  metadata={availableCustomizationsIcons}
                 />
               )
             }
diff --git a/static/src/js/components/MetaIcon/MetaIcon.scss b/static/src/js/components/MetaIcon/MetaIcon.scss
index 23e9595925..6f46755644 100644
--- a/static/src/js/components/MetaIcon/MetaIcon.scss
+++ b/static/src/js/components/MetaIcon/MetaIcon.scss
@@ -8,9 +8,9 @@
   color: $color__carbon--80;
   letter-spacing: 0.01em;
 
-  &__accessMethod {
-    margin-left: auto;
-  }
+  // &__accessMethod {
+  //   margin-left: auto;
+  // }
 
   &__icon {
     color: $color__carbon--50;

From b4d2ca19c0ad8d74890741d9110ffa183950395f Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:57:21 -0500
Subject: [PATCH 05/14] EDSC-4322: Fixing customizable icon tooltips

---
 .../CollectionResultsItem.jsx                 |   5 +-
 .../AvailableCustomizationsTooltipIcons.jsx   | 148 ++++++++++++++++++
 .../AvailableCustomizationsTooltipIcons.scss  |  14 ++
 .../AccessMethodRadio/AccessMethodRadio.jsx   |  13 ++
 .../src/js/components/MetaIcon/MetaIcon.scss  |   4 +-
 5 files changed, 179 insertions(+), 5 deletions(-)
 create mode 100644 static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.jsx
 create mode 100644 static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.scss

diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
index b88285cb2b..fc7b03de91 100644
--- a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
+++ b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
@@ -28,7 +28,7 @@ import { retrieveThumbnail } from '../../util/retrieveThumbnail'
 
 import Button from '../Button/Button'
 import CustomizableIcons from '../CustomizableIcons/CustomizableIcons'
-import AvailableCustomizationsToolTipIcons from '../CustomizableIcons/AvailableCustomizationsToolTipIcons'
+import AvailableCustomizationsTooltipIcons from '../CustomizableIcons/AvailableCustomizationsTooltipIcons'
 import EDSCIcon from '../EDSCIcon/EDSCIcon'
 import MetaIcon from '../MetaIcon/MetaIcon'
 import Spinner from '../Spinner/Spinner'
@@ -185,14 +185,13 @@ export const CollectionResultsItem = forwardRef(({
   )
 
   const customComponentsToolTips = (
-    <AvailableCustomizationsToolTipIcons
+    <AvailableCustomizationsTooltipIcons
       hasSpatialSubsetting={hasSpatialSubsetting}
       hasVariables={hasVariables}
       hasTransforms={hasTransforms}
       hasFormats={hasFormats}
       hasTemporalSubsetting={hasTemporalSubsetting}
       hasCombine={hasCombine}
-      forAccessMethodRadio={false}
     />
   )
 
diff --git a/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.jsx b/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.jsx
new file mode 100644
index 0000000000..3dccd057c6
--- /dev/null
+++ b/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.jsx
@@ -0,0 +1,148 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { FileGeneric, Filter } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+
+import {
+  FaClock,
+  FaCubes,
+  FaGlobe,
+  FaTags
+} from 'react-icons/fa'
+
+import EDSCIcon from '../EDSCIcon/EDSCIcon'
+import './AvailableCustomizationsTooltipIcons.scss'
+
+/**
+ * Renders tool-tip-icons indicating customization options for access methods.
+ * @param {boolean} hasSpatialSubsetting
+ * @param {boolean} hasVariables
+ * @param {boolean} hasTransforms
+ * @param {boolean} hasFormats
+ * @param {boolean} hasTemporalSubsetting
+ * @param {boolean} hasCombine
+ * @param {boolean} forAccessMethodRadio - indicates usage for AccessMethodRadio
+ */
+export const availableCustomizationsTooltipIcons = ({
+  hasSpatialSubsetting,
+  hasVariables,
+  hasTransforms,
+  hasFormats,
+  hasTemporalSubsetting,
+  hasCombine
+}) => (
+  hasSpatialSubsetting
+      || hasVariables
+      || hasTransforms
+      || hasFormats
+      || hasTemporalSubsetting
+      || hasCombine
+) && (
+  <>
+    <div>
+      Supports customization:
+    </div>
+    <ul className="available-customizations-tooltip-icons__tooltip-feature-list">
+      {
+        hasSpatialSubsetting && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white icon"
+              size="0.725rem"
+              icon={FaGlobe}
+            />
+            Spatial subset
+          </li>
+        )
+      }
+      {
+        hasTemporalSubsetting && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white clock icon"
+              size="0.725rem"
+              icon={FaClock}
+            />
+            Temporal subset
+          </li>
+        )
+      }
+      {
+        hasVariables && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white tags icon"
+              size="0.725rem"
+              icon={FaTags}
+            />
+            Variable subset
+          </li>
+        )
+      }
+      {
+        hasTransforms && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white horizontal sliders icon"
+              size="0.725rem"
+              icon={Filter}
+            />
+            Transform
+          </li>
+        )
+      }
+      {
+        hasFormats && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white file icon"
+              size="0.725rem"
+              icon={FileGeneric}
+            />
+            Reformat
+          </li>
+        )
+      }
+      {
+        hasCombine && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white boxes icon"
+              size="0.725rem"
+              icon={FaCubes}
+            />
+            Combine
+          </li>
+        )
+      }
+    </ul>
+  </>
+)
+
+availableCustomizationsTooltipIcons.defaultProps = {
+  forAccessMethodRadio: false,
+  hasSpatialSubsetting: false,
+  hasVariables: false,
+  hasTransforms: false,
+  hasFormats: false,
+  hasTemporalSubsetting: false,
+  hasCombine: false
+}
+
+availableCustomizationsTooltipIcons.propTypes = {
+  hasSpatialSubsetting: PropTypes.bool,
+  hasVariables: PropTypes.bool,
+  hasTransforms: PropTypes.bool,
+  hasFormats: PropTypes.bool,
+  hasTemporalSubsetting: PropTypes.bool,
+  hasCombine: PropTypes.bool,
+  forAccessMethodRadio: PropTypes.bool
+}
+
+export default availableCustomizationsTooltipIcons
diff --git a/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.scss b/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.scss
new file mode 100644
index 0000000000..2f5a0ccf8d
--- /dev/null
+++ b/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.scss
@@ -0,0 +1,14 @@
+.available-customizations-tooltip-icons {
+  &__tooltip-feature-list {
+    width: auto;
+    margin: 0 auto;
+    padding: 0;
+    list-style: none;
+    text-align: center;
+  }
+
+  &__tooltip-feature-icon {
+    margin-right: 0.325rem;
+    color: $color__carbon--30;
+  }
+}
diff --git a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
index 8d4a1a354e..409858d2a2 100644
--- a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
+++ b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
@@ -9,6 +9,7 @@ import { FaQuestionCircle } from 'react-icons/fa'
 import EDSCIcon from '../../EDSCIcon/EDSCIcon'
 import ExternalLink from '../../ExternalLink/ExternalLink'
 import CustomizableIcons from '../../CustomizableIcons/CustomizableIcons'
+import AvailableCustomizationsTooltipIcons from '../../CustomizableIcons/AvailableCustomizationsTooltipIcons'
 import MetaIcon from '../../MetaIcon/MetaIcon'
 
 import './AccessMethodRadio.scss'
@@ -65,6 +66,17 @@ export const AccessMethodRadio = ({
     />
   )
 
+  const customComponentsToolTips = (
+    <AvailableCustomizationsTooltipIcons
+      hasSpatialSubsetting={hasSpatialSubsetting}
+      hasVariables={hasVariables}
+      hasTransforms={hasTransforms}
+      hasFormats={hasFormats}
+      hasTemporalSubsetting={hasTemporalSubsetting}
+      hasCombine={hasCombine}
+    />
+  )
+
   return (
     <label
       className={labelClassName}
@@ -103,6 +115,7 @@ export const AccessMethodRadio = ({
                   icon={Settings}
                   label="Customize"
                   tooltipClassName="collection-results-item__tooltip text-align-left"
+                  tooltipContent={customComponentsToolTips}
                   metadata={availableCustomizationsIcons}
                 />
               )
diff --git a/static/src/js/components/MetaIcon/MetaIcon.scss b/static/src/js/components/MetaIcon/MetaIcon.scss
index 6f46755644..fa4233bc15 100644
--- a/static/src/js/components/MetaIcon/MetaIcon.scss
+++ b/static/src/js/components/MetaIcon/MetaIcon.scss
@@ -9,8 +9,8 @@
   letter-spacing: 0.01em;
 
   // &__accessMethod {
-  //   margin-left: auto;
-  // }
+  //   margin-left: au;
+  // }to
 
   &__icon {
     color: $color__carbon--50;

From c813288f857d45757d30afaa6e1c8c039f15ec4b Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:16:01 -0500
Subject: [PATCH 06/14] EDSC-4322: Clean up styling remove unused classes

EDSC-4322: remove unused class
---
 .../components/AccessMethod/AccessMethod.scss | 12 ++++---
 .../CollectionResultsItem.scss                | 33 -------------------
 .../CustomizableIcons/CustomizableIcons.jsx   |  3 +-
 .../CustomizableIcons/CustomizableIcons.scss  | 19 -----------
 .../AccessMethodRadio/AccessMethodRadio.scss  |  2 +-
 .../src/js/components/MetaIcon/MetaIcon.scss  | 11 +------
 6 files changed, 10 insertions(+), 70 deletions(-)

diff --git a/static/src/js/components/AccessMethod/AccessMethod.scss b/static/src/js/components/AccessMethod/AccessMethod.scss
index 4d57cdd218..f2049e052e 100644
--- a/static/src/js/components/AccessMethod/AccessMethod.scss
+++ b/static/src/js/components/AccessMethod/AccessMethod.scss
@@ -91,17 +91,19 @@
 }
 
 .harmony-select-item {
-  line-height: 1;
   display: flex;
   align-items: center;
   height: auto;
   position: relative;
   user-select: none;
-}
 
-.harmony-select-item[data-highlighted] {
-  outline: none;
-  background-color: $color__carbon--10;
+  &:hover {
+    background-color: $color__carbon--10;
+
+    .meta-icon__metadata {
+      background-color: $color__carbon--20;
+    }
+  }
 }
 
 .harmony-scroll-area-root {
diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.scss b/static/src/js/components/CollectionResults/CollectionResultsItem.scss
index ceee9b81f0..a189f85d2d 100644
--- a/static/src/js/components/CollectionResults/CollectionResultsItem.scss
+++ b/static/src/js/components/CollectionResults/CollectionResultsItem.scss
@@ -145,26 +145,6 @@
     color: $color__carbon--70;
     letter-spacing: 0.01em;
   }
-  // TODO I don't think these meta label or detail are being used
-  &__meta-label {
-    display: none;
-    margin-left: 0.25rem;
-  }
-
-  &__meta-detail {
-    margin-left: 0.25rem;
-    padding: 0.075rem 0.5rem;
-    border-radius: 1rem;
-    background-color: $color__carbon--20;
-    color: $color__carbon--60;
-    font-size: 0.625rem;
-    font-weight: 700;
-
-    .collection-results-item__meta-item:hover & {
-      background-color: $color__carbon--30;
-      color: $color__carbon--90;
-    }
-  }
 
   &__desc {
     display: -webkit-box;
@@ -328,19 +308,6 @@
     }
   }
 
-  &__tooltip-feature-list {
-    width: auto;
-    margin: 0 auto;
-    padding: 0;
-    list-style: none;
-    text-align: center;
-  }
-
-  &__tooltip-feature-icon {
-    margin-right: 0.325rem;
-    color: $color__carbon--30;
-  }
-
   &__popover {
     display: flex;
     flex-direction: column;
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx b/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
index 33f2a4cb5b..076598c69f 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
+++ b/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
@@ -31,8 +31,7 @@ export const CustomizableIcons = ({
   hasTransforms,
   hasFormats,
   hasTemporalSubsetting,
-  hasCombine,
-  iconClassname
+  hasCombine
 }) => (
   hasSpatialSubsetting
       || hasVariables
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss b/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
index 0cd4ad3988..9dada8e98c 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
+++ b/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
@@ -10,23 +10,4 @@
       margin-right: 0;
     }
   }
-
-
-  // TODO these get removed or moved over
-  &__tooltip {
-    font-size: 0.75rem;
-  }
-
-  &__tooltip-feature-list {
-    width: auto;
-    margin: 0 auto;
-    padding: 0;
-    list-style: none;
-    text-align: center;
-  }
-
-  &__tooltip-feature-icon {
-    margin-right: 0.325rem;
-    color: $color__carbon--30;
-  }
 }
diff --git a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.scss b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.scss
index f55ab70b5e..7a80fa5c23 100644
--- a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.scss
+++ b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.scss
@@ -84,7 +84,7 @@
     margin-bottom: 0.25rem;
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: flex-start;
   }
 
   &__header-secondary {
diff --git a/static/src/js/components/MetaIcon/MetaIcon.scss b/static/src/js/components/MetaIcon/MetaIcon.scss
index fa4233bc15..f0261581a2 100644
--- a/static/src/js/components/MetaIcon/MetaIcon.scss
+++ b/static/src/js/components/MetaIcon/MetaIcon.scss
@@ -8,10 +8,6 @@
   color: $color__carbon--80;
   letter-spacing: 0.01em;
 
-  // &__accessMethod {
-  //   margin-left: au;
-  // }to
-
   &__icon {
     color: $color__carbon--50;
     font-size: 0.75rem;
@@ -21,7 +17,7 @@
     }
   }
 
-  &__metadata{
+  &__metadata {
     margin-left: 0.25rem;
     padding: 0.075rem 0.5rem;
     border-radius: 1rem;
@@ -29,10 +25,5 @@
     color: $color__carbon--80;
     font-size: 0.625rem;
     font-weight: 700;
-
-    .meta-icon:hover & {
-      background-color: $color__carbon--20;
-      color: $color__carbon--90;
-    }
   }
 }

From 0ce75ef62deee7bd58b8eb151233dee1ef1bd1ef Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 18:08:42 -0500
Subject: [PATCH 07/14] EDSC-4322: Renaming files

---
 .../AvailableCustomizationsIcons.jsx}         | 24 +++++++++----------
 .../AvailableCustomizationsIcons.scss}        |  2 +-
 .../AvailableCustomizationsTooltipIcons.jsx   |  0
 .../AvailableCustomizationsTooltipIcons.scss  |  0
 .../AvailableCustomizationsIcons.test.js}     |  0
 .../CollectionResultsItem.jsx                 |  6 ++---
 .../AccessMethodRadio/AccessMethodRadio.jsx   |  6 ++---
 7 files changed, 18 insertions(+), 20 deletions(-)
 rename static/src/js/components/{CustomizableIcons/CustomizableIcons.jsx => AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx} (78%)
 rename static/src/js/components/{CustomizableIcons/CustomizableIcons.scss => AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss} (84%)
 rename static/src/js/components/{CustomizableIcons => AvailableCustomizationsIcons}/AvailableCustomizationsTooltipIcons.jsx (100%)
 rename static/src/js/components/{CustomizableIcons => AvailableCustomizationsIcons}/AvailableCustomizationsTooltipIcons.scss (100%)
 rename static/src/js/components/{CustomizableIcons/__tests__/CustomizableIcons.test.js => AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js} (100%)

diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
similarity index 78%
rename from static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
rename to static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
index 076598c69f..374b53432f 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.jsx
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
@@ -12,20 +12,18 @@ import {
 
 import EDSCIcon from '../EDSCIcon/EDSCIcon'
 
-import './CustomizableIcons.scss'
+import './AvailableCustomizationsIcons.scss'
 
 /**
  * Renders icons indicating customization options for access methods.
- * Used by CollectionResultsItem and AccessMethodRadio.
  * @param {boolean} hasSpatialSubsetting
  * @param {boolean} hasVariables
  * @param {boolean} hasTransforms
  * @param {boolean} hasFormats
  * @param {boolean} hasTemporalSubsetting
  * @param {boolean} hasCombine
- * @param {boolean} forAccessMethodRadio - indicates usage for AccessMethodRadio
  */
-export const CustomizableIcons = ({
+export const AvailableCustomizationsTooltipIcons = ({
   hasSpatialSubsetting,
   hasVariables,
   hasTransforms,
@@ -44,7 +42,7 @@ export const CustomizableIcons = ({
     {
       hasSpatialSubsetting && (
         <EDSCIcon
-          className="customizable-icons__icon"
+          className="available-customization-icons__icon"
           title="A white globe icon"
           icon={FaGlobe}
           size="0.675rem"
@@ -54,7 +52,7 @@ export const CustomizableIcons = ({
     {
       hasTemporalSubsetting && (
         <EDSCIcon
-          className="customizable-icons__icon"
+          className="available-customization-icons__icon"
           title="A white clock icon"
           icon={FaClock}
           size="0.675rem"
@@ -64,7 +62,7 @@ export const CustomizableIcons = ({
     {
       hasVariables && (
         <EDSCIcon
-          className="customizable-icons__icon"
+          className="available-customization-icons__icon"
           title="A white tags icon"
           icon={FaTags}
           size="0.675rem"
@@ -74,7 +72,7 @@ export const CustomizableIcons = ({
     {
       hasTransforms && (
         <EDSCIcon
-          className="customizable-icons__icon"
+          className="available-customization-icons__icon"
           title="A white horizontal sliders icon"
           icon={Filter}
           size="0.675rem"
@@ -84,7 +82,7 @@ export const CustomizableIcons = ({
     {
       hasFormats && (
         <EDSCIcon
-          className="customizable-icons__icon"
+          className="available-customization-icons__icon"
           title="A white file icon"
           icon={FileGeneric}
           size="0.675rem"
@@ -94,7 +92,7 @@ export const CustomizableIcons = ({
     {
       hasCombine && (
         <EDSCIcon
-          className="customizable-icons__icon"
+          className="available-customization-icons__icon"
           title="A white cubes icon"
           icon={FaCubes}
           size="0.675rem"
@@ -104,7 +102,7 @@ export const CustomizableIcons = ({
   </>
 )
 
-CustomizableIcons.defaultProps = {
+AvailableCustomizationsTooltipIcons.defaultProps = {
   hasSpatialSubsetting: false,
   hasVariables: false,
   hasTransforms: false,
@@ -113,7 +111,7 @@ CustomizableIcons.defaultProps = {
   hasCombine: false
 }
 
-CustomizableIcons.propTypes = {
+AvailableCustomizationsTooltipIcons.propTypes = {
   hasSpatialSubsetting: PropTypes.bool,
   hasVariables: PropTypes.bool,
   hasTransforms: PropTypes.bool,
@@ -122,4 +120,4 @@ CustomizableIcons.propTypes = {
   hasCombine: PropTypes.bool
 }
 
-export default CustomizableIcons
+export default AvailableCustomizationsTooltipIcons
diff --git a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
similarity index 84%
rename from static/src/js/components/CustomizableIcons/CustomizableIcons.scss
rename to static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
index 9dada8e98c..eb9c921020 100644
--- a/static/src/js/components/CustomizableIcons/CustomizableIcons.scss
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
@@ -1,4 +1,4 @@
-.customizable-icons {
+.available-customization-icons {
   border-bottom: 1px solid $border-color;
 
   &__icon {
diff --git a/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
similarity index 100%
rename from static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.jsx
rename to static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
diff --git a/static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.scss b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.scss
similarity index 100%
rename from static/src/js/components/CustomizableIcons/AvailableCustomizationsTooltipIcons.scss
rename to static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.scss
diff --git a/static/src/js/components/CustomizableIcons/__tests__/CustomizableIcons.test.js b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js
similarity index 100%
rename from static/src/js/components/CustomizableIcons/__tests__/CustomizableIcons.test.js
rename to static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js
diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
index fc7b03de91..e10307424f 100644
--- a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
+++ b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
@@ -27,8 +27,8 @@ import { pluralize } from '../../util/pluralize'
 import { retrieveThumbnail } from '../../util/retrieveThumbnail'
 
 import Button from '../Button/Button'
-import CustomizableIcons from '../CustomizableIcons/CustomizableIcons'
-import AvailableCustomizationsTooltipIcons from '../CustomizableIcons/AvailableCustomizationsTooltipIcons'
+import AvailableCustomizationsIcons from '../AvailableCustomizationsIcons/AvailableCustomizationsIcons'
+import AvailableCustomizationsTooltipIcons from '../AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons'
 import EDSCIcon from '../EDSCIcon/EDSCIcon'
 import MetaIcon from '../MetaIcon/MetaIcon'
 import Spinner from '../Spinner/Spinner'
@@ -174,7 +174,7 @@ export const CollectionResultsItem = forwardRef(({
   )
 
   const availableCustomizationsIcons = (
-    <CustomizableIcons
+    <AvailableCustomizationsIcons
       hasSpatialSubsetting={hasSpatialSubsetting}
       hasVariables={hasVariables}
       hasTransforms={hasTransforms}
diff --git a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
index 409858d2a2..1fa0cbdddc 100644
--- a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
+++ b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
@@ -8,8 +8,8 @@ import { FaQuestionCircle } from 'react-icons/fa'
 
 import EDSCIcon from '../../EDSCIcon/EDSCIcon'
 import ExternalLink from '../../ExternalLink/ExternalLink'
-import CustomizableIcons from '../../CustomizableIcons/CustomizableIcons'
-import AvailableCustomizationsTooltipIcons from '../../CustomizableIcons/AvailableCustomizationsTooltipIcons'
+import AvailableCustomizationsIcons from '../../AvailableCustomizationsIcons/AvailableCustomizationsIcons'
+import AvailableCustomizationsTooltipIcons from '../../AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons'
 import MetaIcon from '../../MetaIcon/MetaIcon'
 
 import './AccessMethodRadio.scss'
@@ -56,7 +56,7 @@ export const AccessMethodRadio = ({
   } = customizationOptions || {}
 
   const availableCustomizationsIcons = (
-    <CustomizableIcons
+    <AvailableCustomizationsIcons
       hasSpatialSubsetting={hasSpatialSubsetting}
       hasVariables={hasVariables}
       hasTransforms={hasTransforms}

From 2c66bc9122348ac46a0c34a3a29c274197af2bed Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:37:44 -0500
Subject: [PATCH 08/14] EDSC-4322: rename var

---
 .../js/components/CollectionResults/CollectionResultsItem.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
index e10307424f..c3fd354acb 100644
--- a/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
+++ b/static/src/js/components/CollectionResults/CollectionResultsItem.jsx
@@ -184,7 +184,7 @@ export const CollectionResultsItem = forwardRef(({
     />
   )
 
-  const customComponentsToolTips = (
+  const availableCustomizationsTooltipIcons = (
     <AvailableCustomizationsTooltipIcons
       hasSpatialSubsetting={hasSpatialSubsetting}
       hasVariables={hasVariables}
@@ -271,7 +271,7 @@ export const CollectionResultsItem = forwardRef(({
                       icon={Settings}
                       label="Customize"
                       tooltipClassName="collection-results-item__tooltip text-align-left"
-                      tooltipContent={customComponentsToolTips}
+                      tooltipContent={availableCustomizationsTooltipIcons}
                       metadata={availableCustomizationsIcons}
                     />
                   )

From 73f3785d629bc1da3fa726c887c529dc172be2c8 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:41:17 -0500
Subject: [PATCH 09/14] EDSC-4322: Add tests and fix one test mistake

---
 .../AvailableCustomizationsTooltipIcons.jsx   |  5 +-
 .../AvailableCustomizationsIcons.test.js      | 29 ++-------
 ...vailableCustomizationsTooltipIcons.test.js | 59 +++++++++++++++++++
 3 files changed, 65 insertions(+), 28 deletions(-)
 create mode 100644 static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js

diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
index 3dccd057c6..6b67985dea 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
@@ -21,7 +21,6 @@ import './AvailableCustomizationsTooltipIcons.scss'
  * @param {boolean} hasFormats
  * @param {boolean} hasTemporalSubsetting
  * @param {boolean} hasCombine
- * @param {boolean} forAccessMethodRadio - indicates usage for AccessMethodRadio
  */
 export const availableCustomizationsTooltipIcons = ({
   hasSpatialSubsetting,
@@ -48,7 +47,7 @@ export const availableCustomizationsTooltipIcons = ({
           <li>
             <EDSCIcon
               className="available-customizations-tooltip-icons__tooltip-feature-icon"
-              title="A white icon"
+              title="A white globe icon"
               size="0.725rem"
               icon={FaGlobe}
             />
@@ -113,7 +112,7 @@ export const availableCustomizationsTooltipIcons = ({
           <li>
             <EDSCIcon
               className="available-customizations-tooltip-icons__tooltip-feature-icon"
-              title="A white boxes icon"
+              title="A white cubes icon"
               size="0.725rem"
               icon={FaCubes}
             />
diff --git a/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js
index 6f6fe558c9..13278372ea 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js
+++ b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 
-import CustomizableIcons from '../CustomizableIcons'
+import AvailableCustomizationsIcons from '../AvailableCustomizationsIcons'
 
 const setup = (overrideProps) => {
   const props = {
@@ -16,19 +16,14 @@ const setup = (overrideProps) => {
   }
 
   return render(
-    <CustomizableIcons {...props} />
+    <AvailableCustomizationsIcons {...props} />
   )
 }
 
-describe('CustomizableIcons component', () => {
+describe('AvailableCustomizationsIcons component', () => {
   test('on load should contain all of the custom icons for the customizable options', () => {
     setup()
 
-    // Ensure the when not using the `forAccessMethodRadio` use `metaIconClasses`
-    const metaIcon = screen.getByText('Customize')
-    const metaIconWrapper = metaIcon.parentElement
-    expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon')
-
     // Ensure that each of the icons rendered
     expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
     expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
@@ -38,29 +33,13 @@ describe('CustomizableIcons component', () => {
     expect(screen.getByTitle('A white cubes icon')).toBeInTheDocument()
   })
 
-  describe('if the customizableIcon is for the access method radio', () => {
-    test('the class name should be appended with', () => {
-      setup({ forAccessMethodRadio: true })
-
-      // Ensure the when using the `forAccessMethodRadio` adds the `meta-icon__accessMethod` to classname
-      const metaIcon = screen.getByText('Customize')
-      const metaIconWrapper = metaIcon.parentElement
-      expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon customizable-icons__meta-icon__accessMethod')
-    })
-  })
-
-  describe('if some of the conditionals are false', () => {
+  describe('when some of the dat customizations are not supported', () => {
     test('those icons do not render', () => {
       setup({
         hasVariables: false,
         hasCombine: false
       })
 
-      // Ensure the when not using the `forAccessMethodRadio` use `metaIconClasses`
-      const metaIcon = screen.getByText('Customize')
-      const metaIconWrapper = metaIcon.parentElement
-      expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon')
-
       // Ensure that each of the icons that are supposed to render do
       expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
       expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
diff --git a/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js
new file mode 100644
index 0000000000..fafa67009c
--- /dev/null
+++ b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import AvailableCustomizationsTooltipIcons from '../AvailableCustomizationsTooltipIcons'
+
+const setup = (overrideProps) => {
+  const props = {
+    hasSpatialSubsetting: true,
+    hasVariables: true,
+    hasTransforms: true,
+    hasFormats: true,
+    hasTemporalSubsetting: true,
+    hasCombine: true,
+    ...overrideProps
+  }
+
+  return render(
+    <AvailableCustomizationsTooltipIcons {...props} />
+  )
+}
+
+describe('AvailableCustomizationsTooltipIcons component', () => {
+  test('on load should contain all of the custom icons for the customizable options', () => {
+    setup()
+
+    // Ensure that each of the icons rendered
+    expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white tags icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white horizontal sliders icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white file icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white cubes icon')).toBeInTheDocument()
+  })
+
+  test('ensure Tool-Tip content are list items', () => {
+    setup()
+    const iconListItemsCount = screen.getAllByRole('listitem').length
+    // Ensure that each of the icons rendered
+    expect(iconListItemsCount).toEqual(6)
+  })
+
+  describe('when some of the dat customizations are not supported', () => {
+    test('those icons do not render', () => {
+      setup({
+        hasVariables: false,
+        hasCombine: false
+      })
+
+      // Ensure that each of the icons that are supposed to render do
+      expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
+      expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
+      expect(screen.getByTitle('A white horizontal sliders icon')).toBeInTheDocument()
+      expect(screen.getByTitle('A white file icon')).toBeInTheDocument()
+
+      // Ensure that the icons for `hasVariables` and `hasCombine` which were passed false do not render
+      expect(screen.queryByTitle('A white cubes icon')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('A white tags icon')).not.toBeInTheDocument()
+    })
+  })
+})

From 8538ec46af5bcc0892777ba654b5bed8b10fb425 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:47:43 -0500
Subject: [PATCH 10/14] EDSC-4322: Fix readme mistake

---
 README.md                                  | 2 +-
 static/src/js/components/Facets/Facets.jsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a44a2334f6..9ab8e12add 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ The local development environment for the static assets can be started by execut
 
 This will run the React application at [http://localhost:8080](http://localhost:8080) -- please see `Serverless Framework` below for enabling the 'server' side functionality.
 
-### Serverless Framework Locally
+### Serverless Framework
 
 The [serverless framework](https://serverless.com/framework/docs/providers/aws/) offers many plugins which allow for local development utilizing many of the services AWS offers. For the most part we only need API Gateway and Lambda for this application but there are plugins for many more services (a list of known exceptions will be maintained below).
 
diff --git a/static/src/js/components/Facets/Facets.jsx b/static/src/js/components/Facets/Facets.jsx
index 03569ead46..21c0a194c1 100644
--- a/static/src/js/components/Facets/Facets.jsx
+++ b/static/src/js/components/Facets/Facets.jsx
@@ -47,6 +47,7 @@ const Facets = (props) => {
     featuresFacet.children.push({
       applied: featureFacets.availableInEarthdataCloud,
       title: 'Available in Earthdata Cloud',
+      description: 'Include only collections that support customization (temporal, spatial, or variable subsetting, reformatting, etc.)',
       type: 'feature'
     })
   }
@@ -64,6 +65,7 @@ const Facets = (props) => {
     featuresFacet.children.push({
       applied: featureFacets.mapImagery,
       title: 'Map Imagery',
+      description: 'Include only collections that support customization (temporal, spatial, or variable subsetting, reformatting, etc.)',
       type: 'feature'
     })
   }

From 3d40d3f92db9e53e1d46ee567d1116fe99e923eb Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:52:00 -0500
Subject: [PATCH 11/14] ESDC-4322: Cleanup

---
 .../__tests__/AvailableCustomizationsTooltipIcons.test.js       | 2 +-
 static/src/js/components/Facets/Facets.jsx                      | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js
index fafa67009c..beff34ff75 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js
+++ b/static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js
@@ -38,7 +38,7 @@ describe('AvailableCustomizationsTooltipIcons component', () => {
     expect(iconListItemsCount).toEqual(6)
   })
 
-  describe('when some of the dat customizations are not supported', () => {
+  describe('when some of the the customizations are not supported', () => {
     test('those icons do not render', () => {
       setup({
         hasVariables: false,
diff --git a/static/src/js/components/Facets/Facets.jsx b/static/src/js/components/Facets/Facets.jsx
index 21c0a194c1..03569ead46 100644
--- a/static/src/js/components/Facets/Facets.jsx
+++ b/static/src/js/components/Facets/Facets.jsx
@@ -47,7 +47,6 @@ const Facets = (props) => {
     featuresFacet.children.push({
       applied: featureFacets.availableInEarthdataCloud,
       title: 'Available in Earthdata Cloud',
-      description: 'Include only collections that support customization (temporal, spatial, or variable subsetting, reformatting, etc.)',
       type: 'feature'
     })
   }
@@ -65,7 +64,6 @@ const Facets = (props) => {
     featuresFacet.children.push({
       applied: featureFacets.mapImagery,
       title: 'Map Imagery',
-      description: 'Include only collections that support customization (temporal, spatial, or variable subsetting, reformatting, etc.)',
       type: 'feature'
     })
   }

From 5f4e59b61ccf420d0ac23ace27f5e25a2bfb0f95 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:04:53 -0500
Subject: [PATCH 12/14] EDSC-4322: Update var name remove class not being used

---
 .../FormFields/AccessMethodRadio/AccessMethodRadio.jsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
index 1fa0cbdddc..b6e34639e9 100644
--- a/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
+++ b/static/src/js/components/FormFields/AccessMethodRadio/AccessMethodRadio.jsx
@@ -66,7 +66,7 @@ export const AccessMethodRadio = ({
     />
   )
 
-  const customComponentsToolTips = (
+  const availableCustomizationsTooltipIcons = (
     <AvailableCustomizationsTooltipIcons
       hasSpatialSubsetting={hasSpatialSubsetting}
       hasVariables={hasVariables}
@@ -114,8 +114,8 @@ export const AccessMethodRadio = ({
                   id="feature-icon-list-view__customize"
                   icon={Settings}
                   label="Customize"
-                  tooltipClassName="collection-results-item__tooltip text-align-left"
-                  tooltipContent={customComponentsToolTips}
+                  tooltipClassName="text-align-left"
+                  tooltipContent={availableCustomizationsTooltipIcons}
                   metadata={availableCustomizationsIcons}
                 />
               )

From 2258a523f868be805c11ef58af1129f40f359fe6 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Wed, 18 Dec 2024 20:56:56 -0500
Subject: [PATCH 13/14] EDSC-4322: Fix naming convention, tweak background
 color to match other selected buttons when hovered

---
 .../src/js/components/AccessMethod/AccessMethod.scss |  4 ++--
 .../AvailableCustomizationsIcons.jsx                 |  8 ++++----
 .../AvailableCustomizationsTooltipIcons.jsx          | 12 +++++-------
 .../__tests__/availablePortalsMock.json              |  2 +-
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/static/src/js/components/AccessMethod/AccessMethod.scss b/static/src/js/components/AccessMethod/AccessMethod.scss
index f2049e052e..3afd9e9318 100644
--- a/static/src/js/components/AccessMethod/AccessMethod.scss
+++ b/static/src/js/components/AccessMethod/AccessMethod.scss
@@ -55,7 +55,7 @@
   margin-left: $spacer;
 
   &:hover {
-    background-color: $color__carbon--10;
+    background-color: $color__carbon--5;
   }
 }
 
@@ -98,7 +98,7 @@
   user-select: none;
 
   &:hover {
-    background-color: $color__carbon--10;
+    background-color: $color__carbon--5;
 
     .meta-icon__metadata {
       background-color: $color__carbon--20;
diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
index 374b53432f..c61ad8f141 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
@@ -23,7 +23,7 @@ import './AvailableCustomizationsIcons.scss'
  * @param {boolean} hasTemporalSubsetting
  * @param {boolean} hasCombine
  */
-export const AvailableCustomizationsTooltipIcons = ({
+export const AvailableCustomizationIcons = ({
   hasSpatialSubsetting,
   hasVariables,
   hasTransforms,
@@ -102,7 +102,7 @@ export const AvailableCustomizationsTooltipIcons = ({
   </>
 )
 
-AvailableCustomizationsTooltipIcons.defaultProps = {
+AvailableCustomizationIcons.defaultProps = {
   hasSpatialSubsetting: false,
   hasVariables: false,
   hasTransforms: false,
@@ -111,7 +111,7 @@ AvailableCustomizationsTooltipIcons.defaultProps = {
   hasCombine: false
 }
 
-AvailableCustomizationsTooltipIcons.propTypes = {
+AvailableCustomizationIcons.propTypes = {
   hasSpatialSubsetting: PropTypes.bool,
   hasVariables: PropTypes.bool,
   hasTransforms: PropTypes.bool,
@@ -120,4 +120,4 @@ AvailableCustomizationsTooltipIcons.propTypes = {
   hasCombine: PropTypes.bool
 }
 
-export default AvailableCustomizationsTooltipIcons
+export default AvailableCustomizationIcons
diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
index 6b67985dea..710e6515b5 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
@@ -22,7 +22,7 @@ import './AvailableCustomizationsTooltipIcons.scss'
  * @param {boolean} hasTemporalSubsetting
  * @param {boolean} hasCombine
  */
-export const availableCustomizationsTooltipIcons = ({
+export const AvailableCustomizationsTooltipIcons = ({
   hasSpatialSubsetting,
   hasVariables,
   hasTransforms,
@@ -124,8 +124,7 @@ export const availableCustomizationsTooltipIcons = ({
   </>
 )
 
-availableCustomizationsTooltipIcons.defaultProps = {
-  forAccessMethodRadio: false,
+AvailableCustomizationsTooltipIcons.defaultProps = {
   hasSpatialSubsetting: false,
   hasVariables: false,
   hasTransforms: false,
@@ -134,14 +133,13 @@ availableCustomizationsTooltipIcons.defaultProps = {
   hasCombine: false
 }
 
-availableCustomizationsTooltipIcons.propTypes = {
+AvailableCustomizationsTooltipIcons.propTypes = {
   hasSpatialSubsetting: PropTypes.bool,
   hasVariables: PropTypes.bool,
   hasTransforms: PropTypes.bool,
   hasFormats: PropTypes.bool,
   hasTemporalSubsetting: PropTypes.bool,
-  hasCombine: PropTypes.bool,
-  forAccessMethodRadio: PropTypes.bool
+  hasCombine: PropTypes.bool
 }
 
-export default availableCustomizationsTooltipIcons
+export default AvailableCustomizationsTooltipIcons
diff --git a/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json b/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json
index fd0f0745b6..3332f5cfa9 100644
--- a/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json
+++ b/static/src/js/components/SearchSidebar/__tests__/availablePortalsMock.json
@@ -62,4 +62,4 @@
     },
     "portalId": "soos"
   }
-}
\ No newline at end of file
+}

From 535e25f6a3071e7c1dbb79ec405128a9e730c623 Mon Sep 17 00:00:00 2001
From: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:59:40 -0500
Subject: [PATCH 14/14] EDSC-4322: Pluralize consistently

---
 .../AvailableCustomizationsIcons.jsx          | 20 +++++++++----------
 .../AvailableCustomizationsIcons.scss         |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
index c61ad8f141..485407733a 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
@@ -23,7 +23,7 @@ import './AvailableCustomizationsIcons.scss'
  * @param {boolean} hasTemporalSubsetting
  * @param {boolean} hasCombine
  */
-export const AvailableCustomizationIcons = ({
+export const AvailableCustomizationsIcons = ({
   hasSpatialSubsetting,
   hasVariables,
   hasTransforms,
@@ -42,7 +42,7 @@ export const AvailableCustomizationIcons = ({
     {
       hasSpatialSubsetting && (
         <EDSCIcon
-          className="available-customization-icons__icon"
+          className="available-customizations-icons__icon"
           title="A white globe icon"
           icon={FaGlobe}
           size="0.675rem"
@@ -52,7 +52,7 @@ export const AvailableCustomizationIcons = ({
     {
       hasTemporalSubsetting && (
         <EDSCIcon
-          className="available-customization-icons__icon"
+          className="available-customizations-icons__icon"
           title="A white clock icon"
           icon={FaClock}
           size="0.675rem"
@@ -62,7 +62,7 @@ export const AvailableCustomizationIcons = ({
     {
       hasVariables && (
         <EDSCIcon
-          className="available-customization-icons__icon"
+          className="available-customizations-icons__icon"
           title="A white tags icon"
           icon={FaTags}
           size="0.675rem"
@@ -72,7 +72,7 @@ export const AvailableCustomizationIcons = ({
     {
       hasTransforms && (
         <EDSCIcon
-          className="available-customization-icons__icon"
+          className="available-customizations-icons__icon"
           title="A white horizontal sliders icon"
           icon={Filter}
           size="0.675rem"
@@ -82,7 +82,7 @@ export const AvailableCustomizationIcons = ({
     {
       hasFormats && (
         <EDSCIcon
-          className="available-customization-icons__icon"
+          className="available-customizations-icons__icon"
           title="A white file icon"
           icon={FileGeneric}
           size="0.675rem"
@@ -92,7 +92,7 @@ export const AvailableCustomizationIcons = ({
     {
       hasCombine && (
         <EDSCIcon
-          className="available-customization-icons__icon"
+          className="available-customizations-icons__icon"
           title="A white cubes icon"
           icon={FaCubes}
           size="0.675rem"
@@ -102,7 +102,7 @@ export const AvailableCustomizationIcons = ({
   </>
 )
 
-AvailableCustomizationIcons.defaultProps = {
+AvailableCustomizationsIcons.defaultProps = {
   hasSpatialSubsetting: false,
   hasVariables: false,
   hasTransforms: false,
@@ -111,7 +111,7 @@ AvailableCustomizationIcons.defaultProps = {
   hasCombine: false
 }
 
-AvailableCustomizationIcons.propTypes = {
+AvailableCustomizationsIcons.propTypes = {
   hasSpatialSubsetting: PropTypes.bool,
   hasVariables: PropTypes.bool,
   hasTransforms: PropTypes.bool,
@@ -120,4 +120,4 @@ AvailableCustomizationIcons.propTypes = {
   hasCombine: PropTypes.bool
 }
 
-export default AvailableCustomizationIcons
+export default AvailableCustomizationsIcons
diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
index eb9c921020..87b9c2ea14 100644
--- a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
+++ b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
@@ -1,4 +1,4 @@
-.available-customization-icons {
+.available-customizations-icons {
   border-bottom: 1px solid $border-color;
 
   &__icon {