Add a checks provider filter for catalog_new view (trento-project#1136)

* Add provider filter to catalog_new view

* Add tests for ProviderLabel functions

Co-authored-by: Alessio Biancalana <alessio.biancalana@suse.com>

assets/js/components/ChecksCatalog/ChecksCatalogNew.jsx

@@ -1,17 +1,31 @@
 /* eslint-disable react/no-array-index-key */
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { groupBy } from '@lib/lists';
 
 import { getCatalog } from '@state/selectors/catalog';
 import { updateCatalog } from '@state/actions/catalog';
+import {
+  providerData,
+  getLabels,
+  getProviderByLabel,
+} from '@components/ProviderLabel/ProviderLabel';
 import CatalogContainer from './CatalogContainer';
 import CheckItem from './CheckItem';
+import ProviderSelection from './ProviderSelection';
+
+const ALL_FILTER = 'All';
+const updatedProvider = {
+  default: { label: ALL_FILTER },
+  ...providerData,
+};
+const providerLabels = getLabels(updatedProvider);
 
 // eslint-disable-next-line import/prefer-default-export
 export function ChecksCatalogNew() {
   const dispatch = useDispatch();
+  const [selectedProvider, setProviderSelected] = useState(ALL_FILTER);
 
   const {
     data: catalogData,
@@ -20,20 +34,32 @@ export function ChecksCatalogNew() {
   } = useSelector(getCatalog());
 
   useEffect(() => {
-    dispatch(updateCatalog());
-  }, [dispatch]);
-
-  useEffect(() => {
-    getCatalog();
-  }, []);
+    const apiParams =
+      selectedProvider === ALL_FILTER
+        ? {}
+        : { provider: getProviderByLabel(updatedProvider, selectedProvider) };
 
+    dispatch(updateCatalog(apiParams));
+  }, [dispatch, selectedProvider]);
   return (
     <CatalogContainer
-      onRefresh={() => dispatch(updateCatalog())}
+      onRefresh={() =>
+        dispatch(
+          updateCatalog({
+            provider:
+              getProviderByLabel(providerData, selectedProvider) || null,
+          })
+        )
+      }
       isCatalogEmpty={catalogData.length === 0}
       catalogError={catalogError}
       loading={loading}
     >
+      <ProviderSelection
+        providers={providerLabels}
+        selected={selectedProvider}
+        onChange={setProviderSelected}
+      />
       <div>
         {Object.entries(groupBy(catalogData, 'group')).map(
           ([group, checks], idx) => (

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { screen, within, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 
 import { faker } from '@faker-js/faker';
 import { withState, renderWithRouter } from '@lib/test-utils';
@@ -45,4 +46,40 @@ describe('ChecksCatalog ChecksCatalogNew component', () => {
     ];
     expect(actions).toEqual(expectedActions);
   });
+
+  it('should query the catalog with the correct provider', async () => {
+    const user = userEvent.setup();
+
+    const catalog = catalogCheckFactory.buildList(5);
+
+    const initialState = {
+      catalogNew: { loading: false, data: catalog, error: null },
+    };
+
+    const [statefulCatalog, store] = withState(
+      <ChecksCatalogNew />,
+      initialState
+    );
+
+    await act(async () => renderWithRouter(statefulCatalog, store));
+
+    await user.click(screen.getByText('All'));
+
+    const providerFilter = screen.getByText('AWS');
+
+    await user.click(providerFilter);
+
+    const actions = store.getActions();
+    const expectedActions = [
+      {
+        type: 'UPDATE_CATALOG_NEW',
+        payload: {},
+      },
+      {
+        type: 'UPDATE_CATALOG_NEW',
+        payload: { provider: 'aws' },
+      },
+    ];
+    expect(actions).toEqual(expectedActions);
+  });
 });

assets/js/components/ProviderLabel/ProviderLabel.jsx

@@ -8,7 +8,7 @@ import GcpLogo from '@static/gcp-logo.svg';
 import NutanixLogo from '@static/nutanix-logo.svg';
 import KvmLogo from '@static/suse-kvm-logo.svg';
 
-const providerData = {
+export const providerData = {
   aws: {
     logo: AwsLogo,
     label: 'AWS',
@@ -31,6 +31,14 @@ const providerData = {
   },
 };
 
+export const getLabels = (providerDataObject) =>
+  Object.values(providerDataObject).map((item) => item.label);
+
+export const getProviderByLabel = (providerDataObject, providerLabel) =>
+  Object.entries(providerDataObject).find(
+    ([_, value]) => value.label === providerLabel
+  )[0];
+
 function ProviderLabel({ provider }) {
   return (
     <span>

assets/js/components/ProviderLabel/ProviderLabel.test.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ProviderLabel from './ProviderLabel';
+import ProviderLabel, {
+  getProviderByLabel,
+  providerData,
+  getLabels,
+} from './ProviderLabel';
 
 describe('Provider Label', () => {
   it('should display an icon and label with AWS as the provider', () => {
@@ -41,4 +45,19 @@ describe('Provider Label', () => {
       'Provider not recognized'
     );
   });
+
+  describe('Provider Labels functions: ', () => {
+    it('should return a list of all Provider labels', () => {
+      const expectedProviderLabels = ['AWS', 'Azure', 'GCP', 'Nutanix', 'KVM'];
+      expect(getLabels(providerData)).toEqual(expectedProviderLabels);
+    });
+
+    it('should returns the key value of provider from the label value ', () => {
+      const label = 'AWS';
+      const expectedProviderLabels = 'aws';
+      expect(getProviderByLabel(providerData, label)).toEqual(
+        expectedProviderLabels
+      );
+    });
+  });
 });