Merge pull request #1598 from ral-facilities/create-api-config-provider-#1595

Create a provider for API config #1595

Author: joshdimanteto

src/App.tsx

@@ -27,6 +27,7 @@ import {
   clearFailedAuthRequestsQueue,
   retryFailedAuthRequests,
 } from './api/api';
+import APIConfigProvider from './apiConfigProvider.component';
 import { MicroFrontendId } from './app.types';
 import CatalogueLayout, {
   CatalogueErrorComponent,
@@ -275,14 +276,16 @@ export function Layout() {
         <IMSThemeProvider>
           <ConfigProvider>
             <QueryClientProvider client={queryClient}>
-              <React.Suspense
-                fallback={
-                  <Preloader loading={true}>Finished loading</Preloader>
-                }
-              >
-                <ViewTabs />
-                <ReactQueryDevtools initialIsOpen={false} />
-              </React.Suspense>
+              <APIConfigProvider>
+                <React.Suspense
+                  fallback={
+                    <Preloader loading={true}>Finished loading</Preloader>
+                  }
+                >
+                  <ViewTabs />
+                  <ReactQueryDevtools initialIsOpen={false} />
+                </React.Suspense>
+              </APIConfigProvider>
             </QueryClientProvider>
           </ConfigProvider>
         </IMSThemeProvider>

src/admin/systemTypes/__snapshots__/systemsTypes.component.test.tsx.snap

@@ -8,10 +8,10 @@ import {
 import { MRT_Localization_EN } from 'material-react-table/locales/en';
 import React from 'react';
 import type { SystemType } from '../../api/api.types';
-import { useGetSparesDefinition } from '../../api/settings';
 import { useGetSystemTypes } from '../../api/systems';
 import { usePreservedTableState } from '../../common/preservedTableState.component';
 
+import { APISettingsContext } from '../../apiConfigProvider.component';
 import {
   COLUMN_FILTER_BOOLEAN_OPTIONS,
   COLUMN_FILTER_FUNCTIONS,
@@ -35,12 +35,12 @@ function SystemTypes() {
   const { data: systemTypesData = [], isLoading: isLoadingSystemTypes } =
     useGetSystemTypes();
 
-  const { data: sparesDefinition, isLoading: isLoadingSparesDefinition } =
-    useGetSparesDefinition();
+  const apiSettings = React.useContext(APISettingsContext);
+  const sparesDefinition = apiSettings?.spares?.sparesDefinition;
 
   const [tableRows, setTableRows] = React.useState<TableRowData[]>([]);
 
-  const isLoading = isLoadingSystemTypes || isLoadingSparesDefinition;
+  const isLoading = isLoadingSystemTypes;
   //Once loading finished - use same logic as catalogueItemsTable to pair up data
   React.useEffect(() => {
     if (!isLoading && systemTypesData) {

src/admin/systemTypes/systemTypes.component.tsx

@@ -1,12 +1,17 @@
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent, type UserEvent } from '@testing-library/user-event';
+import APIConfigProvider from '../../apiConfigProvider.component';
 import { renderComponentWithRouterProvider } from '../../testUtils';
 import SystemTypes from './systemTypes.component';
 
 describe('SystemTypes', () => {
   let user: UserEvent;
   const createView = () => {
-    return renderComponentWithRouterProvider(<SystemTypes />);
+    return renderComponentWithRouterProvider(
+      <APIConfigProvider>
+        <SystemTypes />
+      </APIConfigProvider>
+    );
   };
 
   beforeEach(() => {
@@ -16,16 +21,16 @@ describe('SystemTypes', () => {
   it('renders table correctly', async () => {
     const view = createView();
 
+    await waitFor(() => {
+      expect(screen.getByText('Storage')).toBeInTheDocument();
+    });
+
     await waitFor(
       () => {
         expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
       },
       { timeout: 10000 }
     );
-
-    await waitFor(() => {
-      expect(screen.getByText('Storage')).toBeInTheDocument();
-    });
     expect(view.asFragment()).toMatchSnapshot();
   });
 

src/admin/systemTypes/systemsTypes.component.test.tsx

@@ -0,0 +1,108 @@
+import type { RenderResult } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import * as React from 'react';
+import APIConfigProvider, {
+  APISettingsContext,
+} from './apiConfigProvider.component';
+import { server } from './mocks/server';
+import { renderComponentWithRouterProvider } from './testUtils';
+
+const APIConfigTest: React.FC = (): React.ReactElement => {
+  const settings = React.useContext(APISettingsContext);
+
+  // Return the settings as a string to inspect later in tests.
+  return <div data-testid="settings">{JSON.stringify(settings)}</div>;
+};
+
+describe('APIConfigProvider', () => {
+  beforeEach(() => {
+    global.document.dispatchEvent = vi.fn();
+    global.CustomEvent = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Create a wrapper for our settings tests.
+  const renderComponent = (): RenderResult =>
+    renderComponentWithRouterProvider(
+      <APIConfigProvider>
+        <APIConfigTest />
+      </APIConfigProvider>
+    );
+
+  it('settings are loaded (with spares)', async () => {
+    renderComponent();
+
+    // Preloader is in a loading state when ConfigProvider is
+    // loading the configuration.
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    });
+    expect(screen.getByTestId('settings')).toBeInTheDocument();
+    expect(screen.getByTestId('settings')).toHaveTextContent(
+      JSON.stringify({
+        spares: {
+          sparesFilterState:
+            '?state=N4IgxgYiBcDaoEsAmMQGcCeaAuBTAtgHTYYAOuhAbgIYA2ArriADQg0NNygnmo4BOCAHYBzFmzqNUAZWwB7ftRFMAvgF11KoA',
+          sparesColumnsFilters: {
+            cF: [
+              {
+                id: 'system.type.value',
+                value: [{ type: 'string', value: 'Storage' }],
+              },
+            ],
+          },
+          isLoading: false,
+          sparesDefinition: { system_types: [{ id: '1', value: 'Storage' }] },
+        },
+      })
+    );
+  });
+
+  it('settings are loaded (without spares)', async () => {
+    server.use(
+      http.get('/v1/settings/spares-definition', () => {
+        return HttpResponse.json({ system_types: [] }, { status: 200 });
+      })
+    );
+    renderComponent();
+
+    // Preloader is in a loading state when ConfigProvider is
+    // loading the configuration.
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    });
+    expect(screen.getByTestId('settings')).toBeInTheDocument();
+    expect(screen.getByTestId('settings')).toHaveTextContent(
+      JSON.stringify({})
+    );
+  });
+
+  it('settings are loaded (without spares 204 no content)', async () => {
+    server.use(
+      http.get('/v1/settings/spares-definition', () => {
+        return HttpResponse.json(undefined, { status: 204 });
+      })
+    );
+    renderComponent();
+
+    // Preloader is in a loading state when ConfigProvider is
+    // loading the configuration.
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    });
+    expect(screen.getByTestId('settings')).toBeInTheDocument();
+    expect(screen.getByTestId('settings')).toHaveTextContent(
+      JSON.stringify({})
+    );
+  });
+});

src/apiConfigProvider.component.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { SparesFilterStateType } from './app.types';
+import Preloader from './preloader/preloader.component';
+
+import { useSparesFilterState } from './utils';
+
+interface APISettings {
+  spares?: SparesFilterStateType;
+}
+
+export const APISettingsContext = React.createContext<APISettings>({});
+
+function APIConfigProvider({ children }: { children: React.ReactNode }) {
+  const [loading, setLoading] = React.useState(true);
+  const [settings, setSettings] = React.useState<APISettings>({});
+
+  const sparesInfo = useSparesFilterState();
+
+  React.useEffect(() => {
+    const updateConfigurationState = async () => {
+      const isSparesDefinitionDefined =
+        sparesInfo.sparesDefinition !== '' &&
+        sparesInfo.sparesDefinition.system_types.length !== 0;
+
+      if (!sparesInfo.isLoading) {
+        setLoading(false);
+        setSettings({
+          spares: isSparesDefinitionDefined ? sparesInfo : undefined,
+        });
+      }
+    };
+
+    updateConfigurationState();
+  }, [sparesInfo]);
+
+  return (
+    <Preloader loading={loading}>
+      <APISettingsContext.Provider value={settings}>
+        {children}
+      </APISettingsContext.Provider>
+    </Preloader>
+  );
+}
+
+export default APIConfigProvider;

src/apiConfigProvider.component.tsx

@@ -1,9 +1,11 @@
 import type { Body, Meta } from '@uppy/core';
+import { MRT_ColumnFiltersState } from 'material-react-table';
 import {
   CatalogueCategory,
   CatalogueItem,
   Item,
   ItemPost,
+  SparesDefinition,
   System,
   type APIImage,
   type ObjectFileUploadMetadata,
@@ -224,3 +226,12 @@ export interface AdvancedSerialNumberOptionsType {
 export interface UppyImageUploadResponse extends APIImage, Body {}
 
 export interface UppyUploadMetadata extends ObjectFileUploadMetadata, Meta {}
+
+// --------------------------------- SPARES -----------------------------------------------------------
+
+export interface SparesFilterStateType {
+  sparesDefinition: '' | SparesDefinition;
+  sparesFilterState: string;
+  sparesColumnsFilters: { cF: MRT_ColumnFiltersState };
+  isLoading: boolean;
+}