Merge pull request #1589 from ral-facilities/create-banner-when-spares-filter-is-applied-#1587

joshdimanteto · web-flow · commit 3afc4b9ee5da · 2025-11-12T14:45:27.000Z
Create a banner for when the spares filter is applied on items table #1587
diff --git a/cypress/e2e/with_mock_data/items.cy.ts b/cypress/e2e/with_mock_data/items.cy.ts
@@ -505,6 +505,12 @@ describe('Items', () => {
     cy.findByText('eUc80U7FqJum').should('not.exist');
     cy.findByText('WrgqAVk3qUQK').should('not.exist');
     cy.findByRole('button', { name: 'Show Spare Items' }).should('be.disabled');
+
+    cy.findByText('Spares Definition Filter Applied').should('exist');
+    cy.findByLabelText(
+      'Items that are contained within the system type Storage are classified as spares'
+    ).should('exist');
+
     cy.findByRole('button', { name: 'Clear Filters' }).click();
     cy.findByText('dfzqkOJbqifO').should('exist');
     cy.findByText('tenrMn1KOmIg').should('exist');
diff --git a/src/catalogue/items/__snapshots__/catalogueItemsPage.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsPage.component.test.tsx.snap
@@ -212,7 +212,7 @@ exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
           </div>
         </div>
         <div
-          class="MuiTableContainer-root css-13mblvd-MuiTableContainer-root"
+          class="MuiTableContainer-root css-1h4z99x-MuiTableContainer-root"
           data-testid="catalogue-items-table-container"
         >
           <table
diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -169,8 +169,6 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
     isItemSelectable,
     requestOrigin,
   } = props;
-  // Breadcrumbs + Mui table V2 + extra
-  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
   const contentHeight = getPageHeightCalc('80px');
 
   const { data: catalogueItemsData, isLoading: isLoadingCatalogueItems } =
@@ -819,10 +817,23 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
             'aria-label': `${row.original.catalogueItem.name} row`,
           };
         },
-    muiTableContainerProps: {
-      sx: { height: dense ? '360.4px' : tableHeight, flexShrink: 1 },
-      // @ts-expect-error: MRT Table Container props does not have data-testid
-      'data-testid': 'catalogue-items-table-container',
+    muiTableContainerProps: ({ table }) => {
+      const showAlert =
+        table.getState().showAlertBanner ||
+        table.getFilteredSelectedRowModel().rows.length > 0 ||
+        table.getState().grouping.length > 0;
+      return {
+        sx: {
+          height: dense
+            ? '360.4px'
+            : getPageHeightCalc(
+                // Breadcrumbs + Mui table V2 + extra
+                `50px + 110px + 48px ${showAlert ? '+ 58.75px' : ''}`
+              ),
+          flexShrink: 1,
+        },
+        'data-testid': 'catalogue-items-table-container',
+      };
     },
     muiTableBodyCellProps: ({ column, row }) => {
       const disabledGroupedHeaderColumnIDs = [
diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
diff --git a/src/items/itemsTable.component.test.tsx b/src/items/itemsTable.component.test.tsx
@@ -1,6 +1,13 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
-import { CatalogueCategory, CatalogueItem } from '../api/api.types';
+import { DefaultBodyType, http, HttpResponse, PathParams } from 'msw';
+import {
+  CatalogueCategory,
+  CatalogueItem,
+  SparesDefinition,
+} from '../api/api.types';
+import { server } from '../mocks/server';
+import SystemTypesJSON from '../mocks/SystemTypes.json';
 import {
   getCatalogueCategoryById,
   getCatalogueItemById,
@@ -227,6 +234,16 @@ describe('Items Table', () => {
       expect(screen.queryByText('tenrMn1KOmIg')).not.toBeInTheDocument();
     });
 
+    expect(
+      await screen.findByText('Spares Definition Filter Applied')
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByLabelText(
+        'Items that are contained within the system type Storage are classified as spares'
+      )
+    ).toBeInTheDocument();
+
     const clearFiltersButton = screen.getByRole('button', {
       name: 'Clear Filters',
     });
@@ -238,6 +255,59 @@ describe('Items Table', () => {
     });
   });
 
+  it('sets the spares definition filter and clears the spares filters (multiple systems types in spares definition)', async () => {
+    server.use(
+      http.get<PathParams, DefaultBodyType, SparesDefinition>(
+        '/v1/settings/spares-definition',
+        () => {
+          return HttpResponse.json(
+            { system_types: [SystemTypesJSON[0], SystemTypesJSON[2]] },
+            { status: 200 }
+          );
+        }
+      )
+    );
+    props.catalogueCategory = getCatalogueCategoryById(
+      '9'
+    ) as CatalogueCategory;
+    props.catalogueItem = getCatalogueItemById('11') as CatalogueItem;
+    createView();
+
+    await waitFor(() => {
+      expect(screen.getByText('Serial Number')).toBeInTheDocument();
+    });
+    const showSparesButton = screen.getByRole('button', {
+      name: 'Show Spare Items',
+    });
+    expect(showSparesButton).not.toBeDisabled();
+
+    await user.click(showSparesButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('tenrMn1KOmIg')).not.toBeInTheDocument();
+    });
+
+    expect(
+      await screen.findByText('Spares Definition Filter Applied')
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByLabelText(
+        'Items that are contained within a system type of one of Storage or Scrapped are classified as spares'
+      )
+    ).toBeInTheDocument();
+
+    const clearSparesFiltersButton = screen.getByRole('button', {
+      name: 'Clear Spares Definition Filter',
+    });
+
+    await user.click(clearSparesFiltersButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('tenrMn1KOmIg')).toBeInTheDocument();
+    });
+  });
+
   it('navigates to catalogue item landing page', async () => {
     createView();
     const serialNumber = '5YUQDDjKpz2z';
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
@@ -1,3 +1,4 @@
+import { InfoOutlined } from '@mui/icons-material';
 import AddIcon from '@mui/icons-material/Add';
 import ClearIcon from '@mui/icons-material/Clear';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -6,12 +7,16 @@ import SaveAsIcon from '@mui/icons-material/SaveAs';
 import {
   Box,
   Button,
+  IconButton,
   ListItemIcon,
   ListItemText,
   MenuItem,
   Link as MuiLink,
   TableCellBaseProps,
+  Tooltip,
+  Typography,
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import {
   MaterialReactTable,
   useMaterialReactTable,
@@ -93,8 +98,14 @@ export function ItemsTable(props: ItemTableProps) {
   const { data: usageStatusData, isLoading: isLoadingUsageStatus } =
     useGetUsageStatuses();
 
-  const { encodedSparesFilter, isLoading: isLoadingSparesDefinition } =
-    useSparesFilterState();
+  const {
+    encodedSparesFilter,
+    isLoading: isLoadingSparesDefinition,
+    sparesDefinition,
+  } = useSparesFilterState();
+
+  const isSparesDefinitionDefined =
+    sparesDefinition !== '' && sparesDefinition.system_types.length !== 0;
 
   const systemIdSet = new Set<string>(
     itemsData?.map((item) => item.system_id) ?? []
@@ -142,8 +153,6 @@ export function ItemsTable(props: ItemTableProps) {
     'create' | 'duplicate' | 'edit'
   >('create');
 
-  // Breadcrumbs + Mui table V2 + extra
-  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
   const columns = React.useMemo<MRT_ColumnDef<TableRowData>[]>(() => {
     const viewCatalogueItemProperties = catalogueCategory?.properties ?? [];
     const systemTypeValues = systemTypesData?.map((type) => type.value);
@@ -479,7 +488,7 @@ export function ItemsTable(props: ItemTableProps) {
         },
     manualFiltering: false,
     paginationDisplayMode: 'pages',
-    positionToolbarAlertBanner: 'bottom',
+    positionToolbarAlertBanner: 'top',
     autoResetPageIndex: false,
     displayColumnDefOptions: dense
       ? undefined
@@ -507,10 +516,31 @@ export function ItemsTable(props: ItemTableProps) {
     //MRT
     mrtTheme,
     //MUI
-    muiTableContainerProps: {
-      sx: { height: dense ? '360.4px' : tableHeight },
-      // @ts-expect-error: MRT Table Container props does not have data-testid
-      'data-testid': 'items-table-container',
+    muiToolbarAlertBannerProps: {
+      sx: {
+        '& .MuiAlert-message': {
+          maxWidth: undefined,
+          width: '100%',
+        },
+      },
+    },
+    muiTableContainerProps: ({ table }) => {
+      const showAlert =
+        table.getState().showAlertBanner ||
+        table.getFilteredSelectedRowModel().rows.length > 0 ||
+        table.getState().grouping.length > 0;
+      return {
+        sx: {
+          height: dense
+            ? '360.4px'
+            : getPageHeightCalc(
+                // Breadcrumbs + Mui table V2 + extra
+                `50px + 110px + 48px ${showAlert ? '+ 54px' : ''}`
+              ),
+          flexShrink: 1,
+        },
+        'data-testid': 'items-table-container',
+      };
     },
     muiTableBodyCellProps: ({ column }) => {
       const disabledGroupedHeaderColumnIDs = [
@@ -606,18 +636,20 @@ export function ItemsTable(props: ItemTableProps) {
         >
           Clear Filters
         </Button>
-        <Button
-          sx={{ mx: 0.5 }}
-          variant="outlined"
-          disabled={searchParams.get('state') === encodedSparesFilter}
-          onClick={() => {
-            const newParams = new URLSearchParams(searchParams);
-            newParams.set('state', encodedSparesFilter);
-            setSearchParams(newParams, { replace: false });
-          }}
-        >
-          Show Spare Items
-        </Button>
+        {isSparesDefinitionDefined && (
+          <Button
+            sx={{ mx: 0.5 }}
+            variant="outlined"
+            disabled={searchParams.get('state') === encodedSparesFilter}
+            onClick={() => {
+              const newParams = new URLSearchParams(searchParams);
+              newParams.set('state', encodedSparesFilter);
+              setSearchParams(newParams, { replace: false });
+            }}
+          >
+            Show Spare Items
+          </Button>
+        )}
       </Box>
     ),
     renderRowActionMenuItems: ({ closeMenu, row, table }) => {
@@ -669,6 +701,51 @@ export function ItemsTable(props: ItemTableProps) {
         </MenuItem>,
       ];
     },
+    renderToolbarAlertBannerContent:
+      isSparesDefinitionDefined &&
+      searchParams.get('state') === encodedSparesFilter
+        ? ({ table }) => (
+            <Grid container alignItems="center" sx={{ px: 1, py: 0.5 }}>
+              <Grid size={2} />
+              <Grid size={8}>
+                <Box display="flex" alignItems="center" justifyContent="center">
+                  <Typography variant="inherit" sx={{ pr: 1 }}>
+                    Spares Definition Filter Applied
+                  </Typography>
+                  <Tooltip
+                    title={
+                      sparesDefinition.system_types.length === 1
+                        ? `Items that are contained within the system type ${sparesDefinition.system_types[0].value} are classified as spares`
+                        : `Items that are contained within a system type of one of ${sparesDefinition.system_types
+                            .map((sys) => sys.value)
+                            .join(', ')
+                            .replace(
+                              /, ([^,]*)$/,
+                              ' or $1'
+                            )} are classified as spares`
+                    }
+                  >
+                    <InfoOutlined fontSize="small" />
+                  </Tooltip>
+                </Box>
+              </Grid>
+              <Grid size={2} display="flex" justifyContent="flex-end">
+                <Tooltip title="Clear Spares Definition Filter">
+                  <span>
+                    <IconButton
+                      size="small"
+                      aria-label="Clear Spares Definition Filter"
+                      onClick={() => table.resetColumnFilters()}
+                      sx={{ color: 'inherit' }}
+                    >
+                      <ClearIcon fontSize="small" />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </Grid>
+            </Grid>
+          )
+        : undefined,
     renderBottomToolbarCustomActions: ({ table }) =>
       displayTableRowCountText(table, itemsData, 'Items', {
         paddingLeft: '8px',
@@ -683,6 +760,13 @@ export function ItemsTable(props: ItemTableProps) {
       : undefined,
   });
 
+  React.useEffect(() => {
+    if (isSparesDefinitionDefined)
+      table.setShowAlertBanner(
+        searchParams.get('state') === encodedSparesFilter
+      );
+  }, [encodedSparesFilter, isSparesDefinitionDefined, searchParams, table]);
+
   return (
     <div style={{ width: '100%' }}>
       <MaterialReactTable table={table} />
diff --git a/src/utils.tsx b/src/utils.tsx
@@ -26,6 +26,7 @@ import {
 } from 'material-react-table';
 import React from 'react';
 import { useGetSparesDefinition } from './api/settings';
+import { SparesDefinition } from './api/api.types';
 
 /* Returns a name avoiding duplicates by appending _copy_n for nth copy */
 export const generateUniqueName = (
@@ -597,6 +598,7 @@ export const COLUMN_FILTER_BOOLEAN_OPTIONS = ['Yes', 'No'];
 export const useSparesFilterState = (
   urlParamName?: string
 ): {
+  sparesDefinition: '' | SparesDefinition;
   sparesFilterState: string;
   encodedSparesFilter: string;
   isLoading: boolean;
@@ -629,5 +631,6 @@ export const useSparesFilterState = (
     sparesFilterState,
     encodedSparesFilter,
     isLoading: isLoadingSparesDefinition,
+    sparesDefinition,
   };
 };

Original file line number	Diff line number	Diff line change
@@ -212,7 +212,7 @@ exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
`212`	`212`	`</div>`
`213`	`213`	`</div>`
`214`	`214`	`<div`
`215`		`- class="MuiTableContainer-root css-13mblvd-MuiTableContainer-root"`
	`215`	`+ class="MuiTableContainer-root css-1h4z99x-MuiTableContainer-root"`
`216`	`216`	`data-testid="catalogue-items-table-container"`
`217`	`217`	`>`
`218`	`218`	`<table`