catalogue items flagging #1656

Author: joshdimanteto

cypress/e2e/with_api/systems/functions.ts

@@ -216,7 +216,7 @@ export const navigateToItemsTableViaSpares = () => {
   cy.findByText('Number of spares').should('exist');
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(1000);
-  cy.findByRole('link', { name: '1' }).click();
+  cy.findAllByRole('link', { name: '1' }).first().click();
   cy.findByText('MX432424').should('exist');
 
   // Catalogue items landing page
@@ -226,7 +226,7 @@ export const navigateToItemsTableViaSpares = () => {
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(100);
   cy.findByText('Number of spares').should('exist');
-  cy.findByRole('link', { name: '1' }).click();
+  cy.findAllByRole('link', { name: '1' }).first().click();
   cy.findByText('MX432424').should('exist');
   cy.visit('/systems');
 };

cypress/e2e/with_mock_data/catalogueItems.cy.ts

@@ -90,7 +90,7 @@ describe('Catalogue Items', () => {
   it('navigates to items page with spares definition applied', () => {
     cy.visit('/catalogue/9/items');
 
-    cy.findByRole('link', { name: '1' }).click();
+    cy.findAllByRole('link', { name: '1' }).first().click();
 
     cy.findByText('dfzqkOJbqifO').should('exist');
 
@@ -100,7 +100,7 @@ describe('Catalogue Items', () => {
   it('navigates to items page with spares definition applied (from landing page)', () => {
     cy.visit('/catalogue/9/items/11');
 
-    cy.findByRole('link', { name: '1' }).click();
+    cy.findAllByRole('link', { name: '1' }).first().click();
 
     cy.findByText('dfzqkOJbqifO').should('exist');
 
@@ -117,7 +117,7 @@ describe('Catalogue Items', () => {
 
     cy.findAllByLabelText('Expand').eq(1).click();
 
-    cy.findByRole('link', { name: '1' }).click();
+    cy.findAllByRole('link', { name: '1' }).first().click();
 
     cy.findByText('dfzqkOJbqifO').should('exist');
 
@@ -1088,7 +1088,7 @@ describe('Catalogue Items', () => {
       });
   });
 
-  it('can copy multiple catalogue items', () => {
+  it.only('can copy multiple catalogue items', () => {
     cy.visit('/catalogue/5');
 
     cy.findAllByLabelText('Toggle select row').first().click();
@@ -1140,6 +1140,9 @@ describe('Catalogue Items', () => {
           created_time: '2024-01-01T12:00:00.000+00:00',
           modified_time: '2024-01-02T13:10:10.000+00:00',
           number_of_spares: 0,
+          number_of_spares_required: null,
+          criticality: null,
+          is_flagged: null,
         })
       );
       expect(JSON.stringify(await patchRequests[1].json())).equal(
@@ -1168,6 +1171,9 @@ describe('Catalogue Items', () => {
           created_time: '2024-01-01T12:00:00.000+00:00',
           modified_time: '2024-01-02T13:10:10.000+00:00',
           number_of_spares: 0,
+          number_of_spares_required: null,
+          criticality: null,
+          is_flagged: null,
         })
       );
     });

src/App.tsx

@@ -27,6 +27,7 @@ import CatalogueLayout, {
   catalogueLayoutLoader,
 } from './catalogue/catalogueLayout.component';
 import CatalogueCardView from './catalogue/category/catalogueCardView.component';
+import CatalogueItemLayout from './catalogue/items/catalogueItemLayout.component';
 import CatalogueItemsLandingPage from './catalogue/items/catalogueItemsLandingPage.component';
 import CatalogueItemsPage from './catalogue/items/catalogueItemsPage.component';
 import SettingsMenuItems from './common/settingsMenuItems.component';
@@ -155,7 +156,7 @@ const routeObject: RouteObject[] = [
                   },
                   {
                     path: paths.catalogueItem,
-                    Component: Outlet,
+                    Component: CatalogueItemLayout,
                     children: [
                       {
                         index: true,

src/api/api.types.tsx

@@ -214,6 +214,9 @@ export interface CatalogueItem
   id: string;
   properties: Property[];
   number_of_spares: number | null;
+  number_of_spares_required: number | null;
+  criticality: number | null;
+  is_flagged: boolean | null;
 }
 
 // ------------------------------------ ITEMS ------------------------------------------------

src/api/catalogueItems.test.tsx

@@ -170,6 +170,9 @@ describe('catalogue items api functions', () => {
         obsolete_reason: null,
         properties: [],
         number_of_spares: 0,
+        number_of_spares_required: null,
+        criticality: null,
+        is_flagged: null,
         ...CREATED_MODIFIED_TIME_VALUES,
       };
     });
@@ -274,6 +277,9 @@ describe('catalogue items api functions', () => {
             obsolete_reason: null,
             obsolete_replacement_catalogue_item_id: null,
             number_of_spares: 0,
+            number_of_spares_required: null,
+            criticality: null,
+            is_flagged: null,
             properties: [
               {
                 id: '90',
@@ -304,6 +310,9 @@ describe('catalogue items api functions', () => {
             obsolete_reason: null,
             obsolete_replacement_catalogue_item_id: null,
             number_of_spares: 0,
+            number_of_spares_required: null,
+            criticality: null,
+            is_flagged: null,
             properties: [
               {
                 id: '90',
@@ -413,6 +422,9 @@ describe('catalogue items api functions', () => {
             obsolete_reason: null,
             obsolete_replacement_catalogue_item_id: null,
             number_of_spares: 0,
+            number_of_spares_required: null,
+            criticality: null,
+            is_flagged: null,
             properties: [
               {
                 id: '90',
@@ -443,6 +455,9 @@ describe('catalogue items api functions', () => {
             obsolete_reason: null,
             obsolete_replacement_catalogue_item_id: null,
             number_of_spares: 0,
+            number_of_spares_required: null,
+            criticality: null,
+            is_flagged: null,
             properties: [
               {
                 id: '90',

src/catalogue/category/catalogueCardView.component.tsx

@@ -48,6 +48,7 @@ import {
   getPageHeightCalc,
   MRT_Functions_Localisation,
   mrtTheme,
+  OverflowTip,
 } from '../../utils';
 import CatalogueCard from './catalogueCard.component';
 import CatalogueCategoryDialog from './catalogueCategoryDialog.component';
@@ -326,7 +327,7 @@ function CatalogueCardView() {
             <Tooltip title={CriticalTooltipText}>
               <InfoOutlined sx={{ mr: 1 }} fontSize="small" />
             </Tooltip>
-            {column.columnDef.header}
+            <OverflowTip>{column.columnDef.header}</OverflowTip>
           </Box>
         ),
         accessorFn: (row: CatalogueCategory) => (row.is_flagged ? 'Yes' : 'No'),

src/catalogue/category/catalogueCategoryTableView.component.tsx

@@ -76,7 +76,9 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
               {showFlagged && (
                 <CriticalityTooltipIcon label={CriticalTooltipText} />
               )}
-              <OverflowTip>{renderedCellValue}</OverflowTip>
+              <OverflowTip sx={{ fontSize: 'inherit' }}>
+                {renderedCellValue}
+              </OverflowTip>
             </Box>
           );
         },

src/catalogue/items/__snapshots__/catalogueItemsPage.component.test.tsx.snap

@@ -217,7 +217,7 @@ exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
         >
           <table
             class="MuiTable-root MuiTable-stickyHeader css-1gcyac0-MuiTable-root"
-            style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-catalogueItem_name-size: 200; --col-catalogueItem_name-size: 200; --header-catalogueItem_modified_time-size: 350; --col-catalogueItem_modified_time-size: 350; --header-View_Items-size: 200; --col-View_Items-size: 200; --header-catalogueItem_description-size: 250; --col-catalogueItem_description-size: 250; --header-catalogueItem_is_obsolete-size: 200; --col-catalogueItem_is_obsolete-size: 200; --header-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --col-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --header-catalogueItem_obsolete_reason-size: 225; --col-catalogueItem_obsolete_reason-size: 225; --header-catalogueItem_properties_1-size: 250; --col-catalogueItem_properties_1-size: 250; --header-catalogueItem_properties_2-size: 250; --col-catalogueItem_properties_2-size: 250; --header-catalogueItem_properties_3-size: 250; --col-catalogueItem_properties_3-size: 250; --header-catalogueItem_properties_4-size: 250; --col-catalogueItem_properties_4-size: 250; --header-catalogueItem_properties_5-size: 250; --col-catalogueItem_properties_5-size: 250; --header-catalogueItem_properties_6-size: 250; --col-catalogueItem_properties_6-size: 250; --header-catalogueItem_cost_gbp-size: 250; --col-catalogueItem_cost_gbp-size: 250; --header-catalogueItem_cost_to_rework_gbp-size: 250; --col-catalogueItem_cost_to_rework_gbp-size: 250; --header-catalogueItem_days_to_replace-size: 275; --col-catalogueItem_days_to_replace-size: 275; --header-catalogueItem_days_to_rework-size: 250; --col-catalogueItem_days_to_rework-size: 250; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-catalogueItem_drawing_number-size: 250; --col-catalogueItem_drawing_number-size: 250; --header-catalogueItem_drawing_link-size: 250; --col-catalogueItem_drawing_link-size: 250; --header-catalogueItem_item_model_number-size: 250; --col-catalogueItem_item_model_number-size: 250; --header-manufacturer_name-size: 350; --col-manufacturer_name-size: 350; --header-manufacturer_url-size: 250; --col-manufacturer_url-size: 250; --header-manufacturer_address-size: 300; --col-manufacturer_address-size: 300; --header-manufacturer_telephone-size: 300; --col-manufacturer_telephone-size: 300; --header-catalogueItem_notes-size: 250; --col-catalogueItem_notes-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
+            style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-catalogueItem_name-size: 250; --col-catalogueItem_name-size: 250; --header-catalogueItem_modified_time-size: 350; --col-catalogueItem_modified_time-size: 350; --header-View_Items-size: 200; --col-View_Items-size: 200; --header-catalogueItem_description-size: 250; --col-catalogueItem_description-size: 250; --header-catalogueItem_is_obsolete-size: 200; --col-catalogueItem_is_obsolete-size: 200; --header-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --col-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --header-catalogueItem_obsolete_reason-size: 225; --col-catalogueItem_obsolete_reason-size: 225; --header-catalogueItem_properties_1-size: 250; --col-catalogueItem_properties_1-size: 250; --header-catalogueItem_properties_2-size: 250; --col-catalogueItem_properties_2-size: 250; --header-catalogueItem_properties_3-size: 250; --col-catalogueItem_properties_3-size: 250; --header-catalogueItem_properties_4-size: 250; --col-catalogueItem_properties_4-size: 250; --header-catalogueItem_properties_5-size: 250; --col-catalogueItem_properties_5-size: 250; --header-catalogueItem_properties_6-size: 250; --col-catalogueItem_properties_6-size: 250; --header-catalogueItem_cost_gbp-size: 250; --col-catalogueItem_cost_gbp-size: 250; --header-catalogueItem_cost_to_rework_gbp-size: 250; --col-catalogueItem_cost_to_rework_gbp-size: 250; --header-catalogueItem_days_to_replace-size: 275; --col-catalogueItem_days_to_replace-size: 275; --header-catalogueItem_days_to_rework-size: 250; --col-catalogueItem_days_to_rework-size: 250; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-catalogueItem_drawing_number-size: 250; --col-catalogueItem_drawing_number-size: 250; --header-catalogueItem_drawing_link-size: 250; --col-catalogueItem_drawing_link-size: 250; --header-catalogueItem_item_model_number-size: 250; --col-catalogueItem_item_model_number-size: 250; --header-manufacturer_name-size: 350; --col-manufacturer_name-size: 350; --header-manufacturer_url-size: 250; --col-manufacturer_url-size: 250; --header-manufacturer_address-size: 300; --col-manufacturer_address-size: 300; --header-manufacturer_telephone-size: 300; --col-manufacturer_telephone-size: 300; --header-catalogueItem_notes-size: 250; --col-catalogueItem_notes-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
           >
             <thead
               class="MuiTableHead-root css-7psuou-MuiTableHead-root"