address review comments #1656

Author: joshdimanteto

cypress/e2e/with_mock_data/catalogueItems.cy.ts

@@ -964,8 +964,13 @@ describe('Catalogue Items', () => {
     cy.visit('/catalogue/5');
 
     cy.findAllByRole('link', { name: 'Click here' }).first().scrollIntoView();
+    cy.findAllByRole('link', { name: 'Click here' })
+      .first()
+      .should('be.visible');
 
-    cy.findAllByRole('link', { name: 'Click here' }).first().click();
+    cy.findAllByRole('link', { name: 'Click here' })
+      .first()
+      .click({ force: true });
 
     cy.url().should('contain', 'catalogue/5/items/89/items');
   });

src/api/api.types.tsx

@@ -26,6 +26,10 @@ export interface Rule {
 export interface SparesDefinition {
   system_types: SystemType[];
 }
+
+// ------------------------------------- IN USE -----------------------------------------------------
+
+export type InUseDefinition = SparesDefinition;
 // ------------------------------------ MANUFACTURERS -----------------------------------------------
 
 interface AddressPost {
@@ -46,14 +50,14 @@ export interface ManufacturerPost {
   telephone?: string | null;
 }
 
-export interface ManufacturerPatch
-  extends Partial<Omit<ManufacturerPost, 'address'>> {
+export interface ManufacturerPatch extends Partial<
+  Omit<ManufacturerPost, 'address'>
+> {
   address?: AddressPatch;
 }
 
 export interface Manufacturer
-  extends Required<Omit<ManufacturerPost, 'address'>>,
-    CreatedModifiedMixin {
+  extends Required<Omit<ManufacturerPost, 'address'>>, CreatedModifiedMixin {
   id: string;
   code: string;
   address: Address;
@@ -138,8 +142,7 @@ export interface CatalogueCategoryPostProperty {
   allowed_values?: AllowedValues | null;
 }
 
-export interface CatalogueCategoryPropertyPost
-  extends CatalogueCategoryPostProperty {
+export interface CatalogueCategoryPropertyPost extends CatalogueCategoryPostProperty {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default_value: any;
 }
@@ -150,8 +153,7 @@ export interface CatalogueCategoryPropertyPatch {
   unit_id?: string | null;
 }
 
-export interface CatalogueCategoryProperty
-  extends Required<CatalogueCategoryPostProperty> {
+export interface CatalogueCategoryProperty extends Required<CatalogueCategoryPostProperty> {
   id: string;
   unit: string | null;
 }
@@ -166,7 +168,8 @@ export interface CatalogueCategoryPost {
 export type CatalogueCategoryPatch = Partial<CatalogueCategoryPost>;
 
 export interface CatalogueCategory
-  extends Required<Omit<CatalogueCategoryPost, 'properties'>>,
+  extends
+    Required<Omit<CatalogueCategoryPost, 'properties'>>,
     CreatedModifiedMixin {
   id: string;
   code: string;
@@ -208,7 +211,8 @@ export interface CatalogueItemPost {
 
 export type CatalogueItemPatch = Partial<CatalogueItemPost>;
 export interface CatalogueItem
-  extends CreatedModifiedMixin,
+  extends
+    CreatedModifiedMixin,
     Required<Omit<CatalogueItemPost, 'properties'>> {
   id: string;
   properties: Property[];
@@ -237,8 +241,7 @@ export interface ItemPost {
 export type ItemPatch = Partial<ItemPost>;
 
 export interface Item
-  extends CreatedModifiedMixin,
-    Required<Omit<ItemPost, 'properties'>> {
+  extends CreatedModifiedMixin, Required<Omit<ItemPost, 'properties'>> {
   id: string;
   usage_status: string;
   properties: Property[];
@@ -268,8 +271,7 @@ export interface AttachmentUploadInfo {
 }
 
 export interface AttachmentMetadata
-  extends Required<AttachmentPostMetadata>,
-    CreatedModifiedMixin {
+  extends Required<AttachmentPostMetadata>, CreatedModifiedMixin {
   id: string;
 }
 
@@ -291,8 +293,7 @@ export interface ImagePost extends ObjectFileUploadMetadata {
 }
 
 export interface APIImage
-  extends Required<Omit<ImagePost, 'upload_file'>>,
-    CreatedModifiedMixin {
+  extends Required<Omit<ImagePost, 'upload_file'>>, CreatedModifiedMixin {
   id: string;
   primary: boolean;
   thumbnail_base64: string;

src/api/settings.test.tsx

@@ -2,7 +2,7 @@ import { renderHook, waitFor } from '@testing-library/react';
 import SystemTypesJSON from '../mocks/SystemTypes.json';
 import { hooksWrapperWithProviders } from '../testUtils';
 
-import { useGetSparesDefinition } from './settings';
+import { useGetInUseDefinition, useGetSparesDefinition } from './settings';
 
 describe('settings api functions', () => {
   afterEach(() => {
@@ -24,4 +24,20 @@ describe('settings api functions', () => {
       });
     });
   });
+
+  describe('useGetInUseDefinition', () => {
+    it('sends request to fetch the in use definition and returns successful response', async () => {
+      const { result } = renderHook(() => useGetInUseDefinition(), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      expect(result.current.data).toEqual({
+        system_types: [SystemTypesJSON[1]],
+      });
+    });
+  });
 });

src/api/settings.tsx

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { imsApi } from './api';
-import { SparesDefinition } from './api.types';
+import { InUseDefinition, SparesDefinition } from './api.types';
 
 // This request can return a 204 status, in which case it returns an empty string.
 const getSparesDefinition = async (): Promise<SparesDefinition | ''> => {
@@ -21,3 +21,22 @@ export const useGetSparesDefinition = (): UseQueryResult<
     },
   });
 };
+
+// This request can return a 204 status, in which case it returns an empty string.
+const getInUseDefinition = async (): Promise<InUseDefinition | ''> => {
+  return imsApi.get('/v1/settings/in-use-definition').then((response) => {
+    return response.data;
+  });
+};
+
+export const useGetInUseDefinition = (): UseQueryResult<
+  InUseDefinition | '',
+  AxiosError
+> => {
+  return useQuery({
+    queryKey: ['InUseDefinition'],
+    queryFn: () => {
+      return getInUseDefinition();
+    },
+  });
+};

src/catalogue/category/catalogueCardView.component.test.tsx

@@ -357,7 +357,7 @@ describe('CardView', () => {
     ).toBeInTheDocument();
   });
 
-  it('does not show criticality states for catalogue categories and the filter button', async () => {
+  it('does not show criticality states or the critical filter button for catalogue categories', async () => {
     server.use(
       http.get('/v1/settings/spares-definition', () => {
         return HttpResponse.json(undefined, { status: 204 });

src/catalogue/category/catalogueCategoryTableView.component.tsx

@@ -71,7 +71,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
     catalogueCategoryData?.map((item) => item.name) || [];
 
   const noResultsTxt = 'No catalogue categories found';
-  console.log(isSparesDefinitionDefined);
+
   const columns = React.useMemo<MRT_ColumnDef<CatalogueCategory>[]>(() => {
     return [
       ...(isSparesDefinitionDefined

src/catalogue/items/catalogueItemLayout.component.test.tsx

@@ -1,5 +1,8 @@
 import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import APIConfigProvider from '../../apiConfigProvider.component';
+import { server } from '../../mocks/server';
 import { URLPathKeyType } from '../../paths';
 import { RootState } from '../../state/store';
 import { renderComponentWithRouterProvider } from '../../testUtils';
@@ -17,7 +20,9 @@ describe('Catalogue Item Layout', () => {
     preloadedState?: Partial<RootState>
   ) => {
     return renderComponentWithRouterProvider(
-      <CatalogueItemLayout />,
+      <APIConfigProvider>
+        <CatalogueItemLayout />
+      </APIConfigProvider>,
       urlPathKey,
       path,
       preloadedState
@@ -48,6 +53,24 @@ describe('Catalogue Item Layout', () => {
     ).toBeInTheDocument();
   });
 
+  it('renders catalogue items landing page title correctly when spares definition is not defined', async () => {
+    server.use(
+      http.get('/v1/settings/spares-definition', () => {
+        return HttpResponse.json(undefined, { status: 204 });
+      })
+    );
+    createView('/catalogue/6/items/10', 'catalogueItem', {
+      criticality: { isCriticalMode: true },
+    });
+    await waitFor(() => {
+      expect(screen.getByText('Wavefront Sensors 31')).toBeInTheDocument();
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByTestId('ErrorIcon')).not.toBeInTheDocument()
+    );
+  });
+
   it('renders catalogue items landing page title correctly when is_flagged is null (critical mode)', async () => {
     createView('/catalogue/6/items/9', 'catalogueItem', {
       criticality: { isCriticalMode: true },

src/catalogue/items/catalogueItemLayout.component.tsx

@@ -1,7 +1,9 @@
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import React from 'react';
 import { Outlet, useLocation, useParams } from 'react-router';
 import { useGetCatalogueItem } from '../../api/catalogueItems';
+import { APISettingsContext } from '../../apiConfigProvider.component';
 import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
 import { useAppSelector } from '../../state/hook';
 import { selectCriticality } from '../../state/slices/criticalitySlice';
@@ -14,6 +16,8 @@ function CatalogueItemLayout() {
   const { data: catalogueItem } = useGetCatalogueItem(catalogueItemId);
   const location = useLocation();
   const { isCriticalMode } = useAppSelector(selectCriticality);
+  const apiSettings = React.useContext(APISettingsContext);
+  const isSparesDefinitionDefined = !!apiSettings.spares;
 
   const showFlagged = catalogueItem?.is_flagged ?? null;
 
@@ -53,10 +57,11 @@ function CatalogueItemLayout() {
             gap: 1,
             padding: 1,
             ...(isCriticalMode &&
+              isSparesDefinitionDefined &&
               criticalityHeaderStyle({ theme, showFlagged })),
           })}
         >
-          {isCriticalMode && (
+          {isCriticalMode && isSparesDefinitionDefined && (
             <CriticalityTooltipIcon
               label={getCICriticalityLabel(showFlagged)}
               showFlagged={showFlagged}

src/catalogue/items/catalogueItemsDetailsPanel.component.tsx

@@ -1,11 +1,9 @@
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import {
   Box,
   Collapse,
   Link as MuiLink,
   Tab,
   Tabs,
-  Tooltip,
   Typography,
 } from '@mui/material';
 import Grid from '@mui/material/Grid2';
@@ -21,7 +19,10 @@ import PrimaryImage from '../../common/images/primaryImage.component';
 import { useAppSelector } from '../../state/hook';
 import { selectCriticality } from '../../state/slices/criticalitySlice';
 import { formatDateTimeStrings, roundUpTenth } from '../../utils';
-import { CriticalityInfoToolTip } from './catalogueItemsLandingPage.component';
+import {
+  CriticalityInfoToolTip,
+  NumberOfSparesRequiredInfoToolTip,
+} from './catalogueItemsLandingPage.component';
 import CatalogueLink from './catalogueLink.component';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -197,20 +198,7 @@ function CatalogueItemsDetailsPanel(props: CatalogueItemsDetailsPanelProps) {
                           ) ?? 'None'}
                         </Typography>
                         {catalogueItemIdData.number_of_spares_required ===
-                          null && (
-                          <Tooltip
-                            title={
-                              'Unable to determine if the number of spares required for this catalogue item. If the expected lifetime is "None" please update this field. Otherwise wait until this is recalculated.'
-                            }
-                            placement="top"
-                            enterTouchDelay={0}
-                            arrow
-                            aria-label="number of spares required warning"
-                            sx={{ ml: 2 }}
-                          >
-                            <InfoOutlinedIcon />
-                          </Tooltip>
-                        )}
+                          null && <NumberOfSparesRequiredInfoToolTip />}
                       </Box>
                     </Grid>
                   )}