Merge branch 'develop' into implement-base-authorisation-#1472

Author: MatteoGuarnaccia5

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,
@@ -277,14 +278,16 @@ export function Layout() {
           <ConfigProvider>
             <AuthProvider>
               <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>
             </AuthProvider>
           </ConfigProvider>

src/apiConfigProvider.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.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/app.types.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;
+}