feat(OperatingSystem): enhance the filter to fetch custom endpoint (#…

…2262) * feat(OperatingSystem): enhance the filter to fetch custom endpoint * fix: fetchOperatingSystems useCallback hook deps * chore: make codeclimate happy * chore: remove console log * chore: apply pr suggestions, update README
RedHatInsights · Oct 14, 2024 · 8eff938 · 8eff938
1 parent 6d767e6
commit 8eff938
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 28 deletions.
diff --git a/doc/props_table.md b/doc/props_table.md
@@ -17,6 +17,7 @@
   - [initialLoading](#initialloading)
   - [ignoreRefresh](#ignorerefresh)
   - [showTagModal](#showtagmodal)
+  - [fetchCustomOSes](#fetchCustomOSes)
 
 # Props
 
@@ -123,3 +124,28 @@ On the initial mount and when items/sortBy are changed, the inventoryTable ignor
 *boolean*
 
 Will enable TagModal even the filter or the column is not shown.
+
+## fetchCustomOSes
+
+*falsy | (apFilters) => array*
+
+Operating systems filter by default fetches the os versions from inventory API. However, there might be requirement to fetch from some other custom API endpoints. In this case, you can provide your custom operating system API fetch funtion as a prop. The returned result must be in the shape of:
+
+```
+  {
+      "total": Number,
+      "count": Number,
+      "page": Number,
+      "per_page": Number,
+      "results": [
+          {
+              "value": {
+                  "name": String,
+                  "major": Number,
+                  "minor": Number,
+              },
+              "count": Number
+          },
+      ]
+  }
+```
diff --git a/src/Utilities/hooks/useFetchOperatingSystems.js b/src/Utilities/hooks/useFetchOperatingSystems.js
@@ -1,32 +1,46 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { getOperatingSystems } from '../../api';
 
+const initialState = {
+  operatingSystems: [],
+  operatingSystemsLoaded: false,
+};
+
 const useFetchOperatingSystems = ({
   apiParams = [],
   hasAccess,
   showCentosVersions,
+  fetchCustomOSes,
 }) => {
   const mounted = useRef(true);
-  const initialState = {
-    operatingSystems: [],
-    operatingSystemsLoaded: false,
-  };
+
   const [data, setData] = useState(initialState);
 
   const fetchOperatingSystems = useCallback(async () => {
-    if (typeof hasAccess === 'undefined') {
-      return await getOperatingSystems(apiParams, showCentosVersions);
-    } else if (typeof hasAccess !== 'undefined' && hasAccess === true) {
-      return await getOperatingSystems(apiParams, showCentosVersions);
+    if (hasAccess === false) return;
+
+    const fetchFn = fetchCustomOSes || getOperatingSystems;
+    const fetchArgs = [apiParams, showCentosVersions];
+
+    try {
+      return await fetchFn(...fetchArgs);
+    } catch (error) {
+      console.error(error);
+      return { results: [] };
     }
-  }, [hasAccess, apiParams, showCentosVersions]);
+  }, [
+    hasAccess,
+    JSON.stringify(apiParams),
+    showCentosVersions,
+    fetchCustomOSes,
+  ]);
 
   useEffect(() => {
     (async () => {
       const result = await fetchOperatingSystems();
       if (mounted.current) {
         setData({
-          operatingSystems: result.results,
+          operatingSystems: result?.results || [],
           operatingSystemsLoaded: true,
         });
       }
@@ -36,7 +50,7 @@ const useFetchOperatingSystems = ({
       setData(initialState);
       mounted.current = false;
     };
-  }, []);
+  }, [fetchOperatingSystems]);
 
   return data;
 };

diff --git a/src/components/InventoryTable/EntityTableToolbar.js b/src/components/InventoryTable/EntityTableToolbar.js
@@ -103,6 +103,7 @@ const EntityTableToolbar = ({
   showCentosVersions,
   showNoGroupOption,
   enableExport,
+  fetchCustomOSes,
   ...props
 }) => {
   const dispatch = useDispatch();
@@ -171,7 +172,13 @@ const EntityTableToolbar = ({
     setEndDate,
   ] = useLastSeenFilter(reducer);
   const [osFilterConfig, osFilterChips, osFilterValue, setOsFilterValue] =
-    useOperatingSystemFilter(reducer, [], hasAccess, showCentosVersions);
+    useOperatingSystemFilter(
+      reducer,
+      [],
+      hasAccess,
+      showCentosVersions,
+      fetchCustomOSes
+    );
   const [
     updateMethodConfig,
     updateMethodChips,
@@ -691,6 +698,7 @@ EntityTableToolbar.propTypes = {
   showSystemTypeFilter: PropTypes.bool,
   enableExport: PropTypes.bool,
   exportConfig: PropTypes.object,
+  fetchCustomOSes: PropTypes.func,
 };
 
 EntityTableToolbar.defaultProps = {

diff --git a/src/components/InventoryTable/InventoryTable.test.js b/src/components/InventoryTable/InventoryTable.test.js
@@ -13,13 +13,19 @@ import { buildHosts, buildHostsPayload } from '../../__factories__/hosts';
 import * as api from '../../api/api';
 import * as groupsApi from '../InventoryGroups/utils/api';
 import useFetchBatched from '../../Utilities/hooks/useFetchBatched';
-import useFetchOperatingSystems from '../../Utilities/hooks/useFetchOperatingSystems';
 import { buildOperatingSystems } from '../../__factories__/operatingSystems';
 
 import InventoryTable from './InventoryTable';
 import { shouldDispatch, shouldNotDispatch } from '../../Utilities/testUtils';
-
-jest.mock('../../Utilities/hooks/useFetchOperatingSystems');
+import { getOperatingSystems } from '../../api/api';
+
+jest.mock('../../api/api', () => ({
+  __esModule: true,
+  ...jest.requireActual('../../api/api'),
+  getOperatingSystems: jest.fn(() =>
+    Promise.resolve({ total: 0, results: [] })
+  ),
+}));
 jest.mock('../../Utilities/hooks/useFetchBatched');
 
 const TABLE_HEADERS = ['Name', 'Group', 'OS', 'Last seen'];
@@ -182,17 +188,20 @@ const errorState = {
   },
 };
 
+const operatingSystems = [
+  ...buildOperatingSystems(20, { osName: 'RHEL', major: 8 }),
+  ...buildOperatingSystems(20, { osName: 'CentOS Linux', major: 7 }),
+];
 describe('InventoryTable', () => {
-  const operatingSystems = [
-    ...buildOperatingSystems(20, { osName: 'RHEL', major: 8 }),
-    ...buildOperatingSystems(20, { osName: 'CentOS Linux', major: 7 }),
-  ];
   useFeatureFlag.mockReturnValue(false);
-  useFetchOperatingSystems.mockReturnValue({
-    operatingSystems,
-    operatingSystemsLoaded: true,
+  beforeEach(() => {
+    getOperatingSystems.mockReturnValue(
+      Promise.resolve({
+        results: operatingSystems,
+        total: operatingSystems.length,
+      })
+    );
   });
-
   useFetchBatched.mockReturnValue({
     fetchBatched: () =>
       new Promise((resolve) => resolve([{ results: [{ name: 'group-1' }] }])),
@@ -227,12 +236,24 @@ describe('InventoryTable', () => {
       });
     });
 
-    it('fetches operating system versions', async () => {
+    it('fetches operating system versions using custom API', async () => {
+      const store = mockStore(initialState);
+      const fetchCustomOSes = jest.fn(() =>
+        Promise.resolve({ total: 0, results: [] })
+      );
+      renderTable(store, { fetchCustomOSes });
+
+      await waitFor(() => {
+        expect(fetchCustomOSes).toBeCalled();
+      });
+    });
+
+    it('fetches operating system versions using default API', async () => {
       const store = mockStore(initialState);
       renderTable(store);
 
       await waitFor(() => {
-        expect(useFetchOperatingSystems).toBeCalled();
+        expect(getOperatingSystems).toBeCalled();
       });
     });
 

diff --git a/src/components/filters/useOperatingSystemFilter.js b/src/components/filters/useOperatingSystemFilter.js
@@ -16,7 +16,8 @@ export const useOperatingSystemFilter = (
   // TODO Get rid of all additional (unnecessary) parameters
   apiParams,
   hasAccess,
-  showCentosVersions
+  showCentosVersions,
+  fetchCustomOSes
 ) => {
   const [operatingSystemsStateValue, setStateValue] = useState({});
   const operatingSystemsValue = dispatch
@@ -28,6 +29,7 @@ export const useOperatingSystemFilter = (
       apiParams,
       hasAccess,
       showCentosVersions,
+      fetchCustomOSes,
     }
   );
 

diff --git a/src/components/filters/useOperatingSystemFilter.test.js b/src/components/filters/useOperatingSystemFilter.test.js
@@ -1,8 +1,7 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { mockSystemProfile } from '../../__mocks__/hostApi';
 import useFetchOperatingSystems from '../../Utilities/hooks/useFetchOperatingSystems';
 import { buildOperatingSystems } from '../../__factories__/operatingSystems';
-
 import { useOperatingSystemFilter } from './useOperatingSystemFilter';
 jest.mock('../../Utilities/hooks/useFetchOperatingSystems');
 
@@ -72,4 +71,25 @@ describe('useOperatingSystemFilter', () => {
       expect(chipsUpdated).toMatchSnapshot();
     });
   });
+
+  describe('with custom operating system fetch endpoint', () => {
+    it('Should use the provided custom fetch function', async () => {
+      const fetchCustomOSes = jest.fn(
+        Promise.resolve({
+          operatingSystems,
+          operatingSystemsLoaded: true,
+        })
+      );
+
+      renderHook(() =>
+        useOperatingSystemFilter(undefined, [], true, true, fetchCustomOSes)
+      );
+
+      await waitFor(() =>
+        expect(useFetchOperatingSystems).toHaveBeenCalledWith(
+          expect.objectContaining({ fetchCustomOSes })
+        )
+      );
+    });
+  });
 });