only render critical mode if spares is defined #1656

Author: joshdimanteto

cypress/e2e/with_api/catalogueCategories/functions.ts

@@ -258,13 +258,15 @@ export const addCatalogueCategories = (ignoreChecks?: boolean) => {
 };
 
 export const editCatalogueCategories = () => {
-  cy.findByRole('button', { name: 'navigate to catalogue home' }).click();
-  cy.findByText('Spherical Lenses').should('not.exist');
+  cy.get('body').type('{esc}');
   cy.intercept({
     method: 'GET',
     url: '**/catalogue-categories?parent_id=null',
   }).as('getCatalogueCategoryDataRoot');
+  cy.findByRole('button', { name: 'navigate to catalogue home' }).click();
   cy.wait('@getCatalogueCategoryDataRoot', { timeout: 10000 });
+  cy.findByText('Spherical Lenses').should('not.exist');
+
   cy.findByText('Lenses').should('exist');
 
   modifyCatalogueCategory({

cypress/e2e/with_api/catalogueItems/functions.ts

@@ -254,6 +254,7 @@ export const copyToCatalogueItems = (values: { checkedItems: string[] }) => {
   }
   cy.go('back');
   cy.go('back');
+  cy.go('back');
 };
 
 export const moveToCatalogueItems = (values: { checkedItems: string[] }) => {
@@ -454,9 +455,10 @@ export const downloadFile = (
     cy.findByLabelText(`Download ${fileName} attachment`).click();
   }
 
-  cy.findByRole('dialog').should('be.visible');
+  cy.findByRole('dialog').should('exist');
 
   cy.findByRole('button', { name: 'Continue' }).click();
+  cy.findByRole('dialog').should('not.exist');
 };
 
 export const deleteFile = (
@@ -476,7 +478,7 @@ export const deleteFile = (
       cy.findByLabelText(`Delete attachment ${fileName}`).click();
     }
 
-    cy.findByRole('dialog').should('be.visible');
+    cy.findByRole('dialog').should('exist');
 
     cy.findByRole('button', { name: 'Continue' }).click();
   });

cypress/e2e/with_mock_data/catalogueItems.cy.ts

@@ -436,24 +436,20 @@ describe('Catalogue Items', () => {
     cy.findByText('Wavefront Sensors 31').should('exist');
     cy.findByText('Wavefront Sensors 30').should('exist');
 
-    cy.findByTestId('WarningIcon').should('exist');
-    cy.findByTestId('WarningIcon').trigger('mouseover');
-    cy.findByText('Items are running low in this catalogue item').should(
-      'exist'
-    );
+    cy.findByTestId('ErrorIcon').should('exist');
+    cy.findByTestId('ErrorIcon').trigger('mouseover');
+    cy.findByText('This catalogue item is critical.').should('exist');
   });
 
   it('displays the catalogue item landing page (Criticality)', () => {
     cy.visit('/catalogue/6/items/10');
 
     cy.setMode({ critical: true });
 
-    cy.findByTestId('WarningIcon').should('exist');
-    cy.findByTestId('WarningIcon').trigger('mouseover');
-    cy.findByText('Items are running low in this catalogue item').should(
-      'exist'
-    );
-    cy.findAllByText('-4.55').should('have.length', 2);
+    cy.findByTestId('ErrorIcon').should('exist');
+    cy.findByTestId('ErrorIcon').trigger('mouseover');
+    cy.findByText('This catalogue item is critical.').should('exist');
+    cy.findAllByText('-4.6').should('have.length', 2);
   });
 
   it('navigates to the landing page and navigates back to the table view', () => {
@@ -529,8 +525,6 @@ describe('Catalogue Items', () => {
     cy.url().should('contain', '/manufacturers/1');
   });
 
- 
-
   it('checks the href property of the manufacturer link', () => {
     cy.findByRole('button', { name: 'Show/Hide columns' }).click();
     cy.findByText('Hide all').click();
@@ -785,6 +779,7 @@ describe('Catalogue Items', () => {
   });
 
   it('check table state persists on page reload', () => {
+    cy.setMode({ critical: false });
     cy.findByText('Cameras 1').should('exist');
     cy.findByRole('button', { name: 'Clear Filters' }).should('be.disabled');
 
@@ -795,7 +790,7 @@ describe('Catalogue Items', () => {
     cy.findByRole('link', { name: 'Cameras 15' }).should('exist');
     cy.location('search').should(
       'eq',
-      '?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0AdmpcSADQgBuOJMoGAngA5NoIAM4YATglr4W7TkJABhBsXFoRAAgCMAVhABffQF19QA'
+      '?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0AdmpcSADQgBuOJMoGAngA5NoIAM4YATglr4W7TkJABhBsXFoRAAgCMAVhABffQF1WYAGoIR3dFjxEyFGmHHFMxJAH0MCRjABmOCLEhkA'
     );
 
     cy.reload();
@@ -804,11 +799,12 @@ describe('Catalogue Items', () => {
     cy.findByText('Cameras 1').should('not.exist');
     cy.location('search').should(
       'eq',
-      '?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0AdmpcSADQgBuOJMoGAngA5NoIAM4YATglr4W7TkJABhBsXFoRAAgCMAVhABffQF19QA'
+      '?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0AdmpcSADQgBuOJMoGAngA5NoIAM4YATglr4W7TkJABhBsXFoRAAgCMAVhABffQF1WYAGoIR3dFjxEyFGmHHFMxJAH0MCRjABmOCLEhkA'
     );
   });
 
   it('can load and clear date filters', () => {
+    cy.setMode({ critical: true });
     cy.visit(
       '/catalogue/4/items?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0luSCAZgsUgPoYKXEgA0IANxwkY8EBgCeABx7QQSTD35DsIuQCYADOoAsAWk0BGAwGYAKps3RL1zdUuaAWiAC%2BvUJJmoAzhgBOCAB2%2BHyCwrIgrgC6LjFAA'
     );
@@ -967,7 +963,9 @@ describe('Catalogue Items', () => {
   it('can navigate to an items page from the table view', () => {
     cy.visit('/catalogue/5');
 
-    cy.findAllByRole('link', { name: 'Click here' }).eq(0).click();
+    cy.findAllByRole('link', { name: 'Click here' }).first().scrollIntoView();
+
+    cy.findAllByRole('link', { name: 'Click here' }).first().click();
 
     cy.url().should('contain', 'catalogue/5/items/89/items');
   });
@@ -1131,7 +1129,7 @@ describe('Catalogue Items', () => {
           number_of_spares: 0,
           number_of_spares_required: null,
           criticality: null,
-          is_flagged: null,
+          is_flagged: false,
         })
       );
       expect(JSON.stringify(await patchRequests[1].json())).equal(
@@ -1160,7 +1158,7 @@ describe('Catalogue Items', () => {
           number_of_spares: 0,
           number_of_spares_required: null,
           criticality: null,
-          is_flagged: null,
+          is_flagged: false,
         })
       );
     });

cypress/e2e/with_mock_data/items.cy.ts

@@ -55,11 +55,9 @@ describe('Items', () => {
 
     cy.setMode({ critical: true });
 
-    cy.findByTestId('WarningIcon').should('exist');
-    cy.findByTestId('WarningIcon').trigger('mouseover');
-    cy.findByText('Items are running low in this catalogue item').should(
-      'exist'
-    );
+    cy.findByTestId('ErrorIcon').should('exist');
+    cy.findByTestId('ErrorIcon').trigger('mouseover');
+    cy.findByText('This catalogue item is critical.').should('exist');
     cy.findAllByText('(Item Details)').should('exist');
   });
 

src/catalogue/category/catalogueCard.component.tsx

@@ -12,8 +12,10 @@ import {
   type MRT_Row,
   type MRT_TableInstance,
 } from 'material-react-table';
+import React from 'react';
 import { Link } from 'react-router';
 import { CatalogueCategory } from '../../api/api.types';
+import { APISettingsContext } from '../../apiConfigProvider.component';
 import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
 import { useAppSelector } from '../../state/hook';
 import { selectCriticality } from '../../state/slices/criticalitySlice';
@@ -41,6 +43,9 @@ export const getCriticalityLabel = (isCritical: boolean | null) => {
 
 function CatalogueCard(props: CatalogueCardProps) {
   const { table, card } = props;
+
+  const apiSettings = React.useContext(APISettingsContext);
+  const isSparesDefinitionDefined = !!apiSettings.spares;
   const selectedCategories = table
     .getSelectedRowModel()
     .rows.map((row) => row.original);
@@ -74,7 +79,9 @@ function CatalogueCard(props: CatalogueCardProps) {
           backgroundColor: isSelected
             ? table.options.mrtTheme.selectedRowBackgroundColor
             : undefined,
-          ...(isCriticalMode && criticalityCardStyle({ theme, showFlagged })),
+          ...(isCriticalMode &&
+            isSparesDefinitionDefined &&
+            criticalityCardStyle({ theme, showFlagged })),
         })}
       >
         <CardActions>
@@ -88,7 +95,7 @@ function CatalogueCard(props: CatalogueCardProps) {
           />
         </CardActions>
         <CardContent sx={{ display: 'flex', alignItems: 'center', padding: 0 }}>
-          {isCriticalMode && (
+          {isCriticalMode && isSparesDefinitionDefined && (
             <CriticalityTooltipIcon
               showFlagged={showFlagged}
               label={getCriticalityLabel(showFlagged)}

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

@@ -2,6 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { CatalogueCategory } from '../../api/api.types';
+import APIConfigProvider from '../../apiConfigProvider.component';
 import { server } from '../../mocks/server';
 import { URLPathKeyType } from '../../paths';
 import { RootState } from '../../state/store';
@@ -17,7 +18,9 @@ describe('CardView', () => {
     preloadedState?: Partial<RootState>
   ) => {
     return renderComponentWithRouterProvider(
-      <CardView />,
+      <APIConfigProvider>
+        <CardView />
+      </APIConfigProvider>,
       urlPathKey || 'catalogue',
       path || '/catalogue',
       preloadedState
@@ -93,7 +96,7 @@ describe('CardView', () => {
       expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
     );
 
-    const addButton = screen.getByRole('button', {
+    const addButton = await screen.findByRole('button', {
       name: 'Add Catalogue Category',
     });
     await user.click(addButton);
@@ -354,6 +357,26 @@ describe('CardView', () => {
     ).toBeInTheDocument();
   });
 
+  it('does not show criticality states for catalogue categories and the filter button', async () => {
+    server.use(
+      http.get('/v1/settings/spares-definition', () => {
+        return HttpResponse.json(undefined, { status: 204 });
+      })
+    );
+    createView('/catalogue', undefined, {
+      criticality: { isCriticalMode: true },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Beam Characterization')).toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: 'Show Critical Categories' })
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it('clicks on shows critical Categories filter button', async () => {
     createView('/catalogue', undefined, {
       criticality: { isCriticalMode: true },
@@ -487,7 +510,7 @@ describe('CardView', () => {
       );
 
       await user.click(
-        screen.getByRole('button', { name: 'Show/Hide filters' })
+        await screen.findByRole('button', { name: 'Show/Hide filters' })
       );
 
       const dropdownButtons = await screen.findAllByTestId('FilterListIcon');

src/catalogue/category/catalogueCardView.component.tsx

@@ -20,6 +20,7 @@ import {
 import Grid from '@mui/material/Grid2';
 import {
   MRT_BottomToolbar,
+  MRT_Column,
   MRT_ColumnDef,
   MRT_TopToolbar,
   useMaterialReactTable,
@@ -54,6 +55,7 @@ import CatalogueCard from './catalogueCard.component';
 import CatalogueCategoryDialog from './catalogueCategoryDialog.component';
 
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
+import { APISettingsContext } from '../../apiConfigProvider.component';
 import ErrorPage from '../../common/errorPage.component';
 import MRTTopTableAlert from '../../common/mrtTopTableAlert.component';
 import { useAppSelector } from '../../state/hook';
@@ -198,6 +200,9 @@ function CatalogueCardView() {
     !catalogueCategoryId ? 'null' : catalogueCategoryId
   );
 
+  const apiSettings = React.useContext(APISettingsContext);
+  const isSparesDefinitionDefined = !!apiSettings.spares;
+
   const catalogueCategoryNames: string[] = catalogueCategoryData
     ? catalogueCategoryData.map((item) => item.name)
     : [];
@@ -323,25 +328,34 @@ function CatalogueCardView() {
         filterSelectOptions: ['Catalogue Categories', 'Catalogue Items'],
         enableGrouping: false,
       },
-      {
-        header: 'Is Critical',
-        Header: ({ column }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Tooltip title={CriticalTooltipText}>
-              <InfoOutlined sx={{ mr: 1 }} fontSize="small" />
-            </Tooltip>
-            <OverflowTip>{column.columnDef.header}</OverflowTip>
-          </Box>
-        ),
-        accessorFn: (row: CatalogueCategory) => (row.is_flagged ? 'Yes' : 'No'),
-        id: 'is_flagged',
-        filterVariant: COLUMN_FILTER_VARIANTS.boolean,
-        enableColumnFilterModes: false,
-        size: 200,
-        filterSelectOptions: COLUMN_FILTER_BOOLEAN_OPTIONS,
-      },
+      ...(isSparesDefinitionDefined
+        ? [
+            {
+              header: 'Is Critical',
+              Header: ({
+                column,
+              }: {
+                column: MRT_Column<CatalogueCategory, unknown>;
+              }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Tooltip title={CriticalTooltipText}>
+                    <InfoOutlined sx={{ mr: 1 }} fontSize="small" />
+                  </Tooltip>
+                  <OverflowTip>{column.columnDef.header}</OverflowTip>
+                </Box>
+              ),
+              accessorFn: (row: CatalogueCategory) =>
+                row.is_flagged ? 'Yes' : 'No',
+              id: 'is_flagged',
+              filterVariant: COLUMN_FILTER_VARIANTS.boolean,
+              enableColumnFilterModes: false,
+              size: 200,
+              filterSelectOptions: COLUMN_FILTER_BOOLEAN_OPTIONS,
+            },
+          ]
+        : []),
     ];
-  }, [propertyNames]);
+  }, [isSparesDefinitionDefined, propertyNames]);
 
   const initialColumnFilterFnState = React.useMemo(() => {
     return getInitialColumnFilterFnState(columns);
@@ -458,7 +472,7 @@ function CatalogueCardView() {
             </Button>
           </>
         )}
-        {isCriticalMode && (
+        {isCriticalMode && isSparesDefinitionDefined && (
           <Button
             sx={{ mx: 0.5 }}
             startIcon={