Use the new Select component in the catalog

assets/js/components/ChecksCatalog/ChecksCatalog.jsx

@@ -1,19 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { groupBy } from 'lodash';
 
-import { providerData } from '@components/ProviderLabel/ProviderLabel';
+import { PROVIDERS } from '@lib/model';
 import PageHeader from '@components/PageHeader';
 import Accordion from '@components/Accordion';
+import Select, { ALL_FILTER } from '@components/Select';
+import ProviderLabel from '@components/ProviderLabel';
 import CatalogContainer from './CatalogContainer';
 import CheckItem from './CheckItem';
-import ProviderSelection from './ProviderSelection';
 
-const ALL_FILTER = 'all';
-const ALL_FILTER_TEXT = 'All';
-const updatedProvider = {
-  [ALL_FILTER]: { label: ALL_FILTER_TEXT },
-  ...providerData,
-};
+const providerOptionRenderer = (provider) => (
+  <ProviderLabel provider={provider} />
+);
 
 function ChecksCatalog({ catalogData, catalogError, loading, updateCatalog }) {
   const [selectedProvider, setProviderSelected] = useState(ALL_FILTER);
@@ -26,9 +24,11 @@ function ChecksCatalog({ catalogData, catalogError, loading, updateCatalog }) {
     <>
       <div className="flex">
         <PageHeader className="font-bold">Checks catalog</PageHeader>
-        <ProviderSelection
+        <Select
+          optionsName="providers"
           className="ml-auto"
-          providers={Object.keys(updatedProvider)}
+          options={PROVIDERS}
+          optionRenderer={providerOptionRenderer}
           selected={selectedProvider}
           onChange={setProviderSelected}
         />

assets/js/components/ChecksCatalog/ChecksCatalog.test.jsx

@@ -55,7 +55,7 @@ describe('ChecksCatalog ChecksCatalog component', () => {
       />
     );
 
-    await user.click(screen.getByText('All'));
+    await user.click(screen.getByText('All providers'));
 
     const providerFilter = screen.getByText('AWS');
 

assets/js/components/ChecksCatalog/ChecksCatalogPage.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
+import { isValidProvider } from '@lib/model';
 import { getCatalog } from '@state/selectors/catalog';
 import { updateCatalog } from '@state/actions/catalog';
-import { checkProviderExists } from '@components/ProviderLabel/ProviderLabel';
 import ChecksCatalog from './ChecksCatalog';
 
 const buildUpdateCatalogAction = (provider) => {
-  const payload = checkProviderExists(provider)
-    ? { provider, target_type: 'cluster' }
-    : {};
+  const payload = {
+    ...(isValidProvider(provider) ? { provider } : {}),
+    target_type: 'cluster',
+  };
+
   return updateCatalog(payload);
 };