improve visibility for other flagged states #1659

Author: joshdimanteto

cypress/e2e/with_mock_data/catalogueCategories.cy.ts

@@ -57,26 +57,28 @@ describe('Catalogue Category', () => {
     cy.findByText('Actuators').should('not.exist');
   });
 
-  it('shows critical catalogue categories and filter button', () => {
+  it('shows all criticality states of catalogue categories and the filter button', () => {
     cy.visit('/catalogue');
     cy.setMode({ critical: true });
 
-    cy.findByRole('button', { name: 'Show Critical Items' }).should('exist');
-    cy.findByTestId('WarningIcon').should('exist');
-    cy.findByTestId('WarningIcon').trigger('mouseover');
-    cy.findByText(
-      'A catalogue category is considered critical if any of its nested child categories or catalogue items are flagged as critical.'
+    cy.findByRole('button', { name: 'Show Critical Categories' }).should(
+      'exist'
     );
-    cy.findByText('Beam Characterization').click();
+    cy.findByTestId('ErrorIcon').should('exist');
+    cy.findByTestId('ErrorIcon').trigger('mouseover');
+    cy.findByText('This catalogue category is critical.');
 
     cy.findByTestId('WarningIcon').should('exist');
     cy.findByTestId('WarningIcon').trigger('mouseover');
     cy.findByText(
-      'A catalogue category is considered critical if any of its nested child categories or catalogue items are flagged as critical.'
+      'Unable to determine if this catalogue category is critical. Please contact support.'
     );
+
+    cy.findAllByTestId('CheckCircleIcon').first().trigger('mouseover');
+    cy.findByText('This catalogue category is not critical.');
   });
 
-  it('shows critical catalogue categories in the move and copy to catalogue category table', () => {
+  it('shows all criticality states of catalogue categories in the move and copy to catalogue category table', () => {
     cy.visit('/catalogue');
     cy.setMode({ critical: true });
 
@@ -95,11 +97,27 @@ describe('Catalogue Category', () => {
     cy.findByRole('dialog')
       .should('be.visible')
       .within(() => {
-        cy.findByTestId('WarningIcon').should('exist');
-        cy.findByTestId('WarningIcon').trigger('mouseover');
+        cy.findByTestId('ErrorIcon').should('exist');
+        cy.findByTestId('ErrorIcon').trigger('mouseover');
+      });
+    cy.findByText('This catalogue category is critical.');
+
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.findAllByTestId('CheckCircleIcon').first().trigger('mouseover');
+      });
+    cy.findByText('This catalogue category is not critical.');
+
+    cy.findByRole('button', { name: 'Go to page 2' }).click();
+
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.findAllByTestId('WarningIcon').first().trigger('mouseover');
       });
     cy.findByText(
-      'A catalogue category is considered critical if any of its nested child categories or catalogue items are flagged as critical.'
+      'Unable to determine if this catalogue category is critical. Please contact support.'
     );
   });
 

src/catalogue/category/catalogueCard.component.tsx

@@ -1,5 +1,4 @@
 import {
-  alpha,
   Button,
   Card,
   CardActions,
@@ -18,13 +17,28 @@ import { CatalogueCategory } from '../../api/api.types';
 import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
 import { useAppSelector } from '../../state/hook';
 import { selectCriticality } from '../../state/slices/criticalitySlice';
-import { formatDateTimeStrings, OverflowTip } from '../../utils';
-import { CriticalTooltipText } from './catalogueCardView.component';
+import {
+  formatDateTimeStrings,
+  getCriticalityColor,
+  OverflowTip,
+} from '../../utils';
 export interface CatalogueCardProps {
   table: MRT_TableInstance<CatalogueCategory>;
   card: MRT_Cell<CatalogueCategory>;
 }
 
+export const getCriticalityLabel = (isCritical: boolean | null) => {
+  if (isCritical === true) {
+    return 'This catalogue category is critical.';
+  }
+
+  if (isCritical === false) {
+    return 'This catalogue category is not critical.';
+  }
+
+  return 'Unable to determine if this catalogue category is critical. Please contact support.';
+};
+
 function CatalogueCard(props: CatalogueCardProps) {
   const { table, card } = props;
   const selectedCategories = table
@@ -37,7 +51,7 @@ function CatalogueCard(props: CatalogueCardProps) {
 
   const { isCriticalMode } = useAppSelector(selectCriticality);
 
-  const showFlagged = isCriticalMode && card.row.original.is_flagged;
+  const showFlagged = card.row.original.is_flagged;
   return (
     <Button
       component={Link}
@@ -52,23 +66,24 @@ function CatalogueCard(props: CatalogueCardProps) {
       }}
     >
       <Card
-        sx={(theme) => ({
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          height: '100px',
-          backgroundColor: isSelected
-            ? table.options.mrtTheme.selectedRowBackgroundColor
-            : undefined,
+        sx={(theme) => {
+          const color = isCriticalMode
+            ? getCriticalityColor({ theme, showFlagged })
+            : undefined;
+          return {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            height: '100px',
+            backgroundColor: isSelected
+              ? table.options.mrtTheme.selectedRowBackgroundColor
+              : undefined,
 
-          border: showFlagged
-            ? `2px solid ${theme.palette.error.main}`
-            : undefined,
+            border: isCriticalMode ? `2px solid ${color}` : undefined,
 
-          boxShadow: showFlagged
-            ? `0 0 10px 3px ${alpha(theme.palette.error.main, 0.53)}` //  ~53% opacity for fuzzy glow
-            : undefined,
-        })}
+            boxShadow: isCriticalMode ? `0 0 10px 3px ${color}` : undefined, //  ~53% opacity for fuzzy glow
+          };
+        }}
       >
         <CardActions>
           <MRT_SelectCheckbox
@@ -81,8 +96,11 @@ function CatalogueCard(props: CatalogueCardProps) {
           />
         </CardActions>
         <CardContent sx={{ display: 'flex', alignItems: 'center', padding: 0 }}>
-          {showFlagged && (
-            <CriticalityTooltipIcon label={CriticalTooltipText} />
+          {isCriticalMode && (
+            <CriticalityTooltipIcon
+              showFlagged={showFlagged}
+              label={getCriticalityLabel(showFlagged)}
+            />
           )}
         </CardContent>
         <CardContent

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

@@ -316,7 +316,7 @@ describe('CardView', () => {
     });
   });
 
-  it('shows critical catalogue categories and filter button', async () => {
+  it('shows all criticality states for catalogue categories and the filter button', async () => {
     createView('/catalogue', undefined, {
       criticality: { isCriticalMode: true },
     });
@@ -326,7 +326,21 @@ describe('CardView', () => {
     });
 
     expect(
-      screen.getByRole('button', { name: 'Show Critical Items' })
+      screen.getByRole('button', { name: 'Show Critical Categories' })
+    ).toBeInTheDocument();
+
+    expect(screen.getByTestId('ErrorIcon')).toBeInTheDocument();
+
+    await user.hover(screen.getByTestId('ErrorIcon'));
+
+    expect(
+      await screen.findByText('This catalogue category is critical.')
+    ).toBeInTheDocument();
+
+    await user.hover(screen.getAllByTestId('CheckCircleIcon')[0]);
+
+    expect(
+      await screen.findByText('This catalogue category is not critical.')
     ).toBeInTheDocument();
 
     expect(screen.getByTestId('WarningIcon')).toBeInTheDocument();
@@ -335,12 +349,12 @@ describe('CardView', () => {
 
     expect(
       await screen.findByText(
-        'A catalogue category is considered critical if any of its nested child categories or catalogue items are flagged as critical.'
+        'Unable to determine if this catalogue category is critical. Please contact support.'
       )
     ).toBeInTheDocument();
   });
 
-  it('clicks on shows critical Items filter button', async () => {
+  it('clicks on shows critical Categories filter button', async () => {
     createView('/catalogue', undefined, {
       criticality: { isCriticalMode: true },
     });
@@ -350,7 +364,7 @@ describe('CardView', () => {
     });
 
     await user.click(
-      screen.getByRole('button', { name: 'Show Critical Items' })
+      screen.getByRole('button', { name: 'Show Critical Categories' })
     );
 
     await waitFor(() => {
@@ -359,14 +373,12 @@ describe('CardView', () => {
 
     expect(screen.getByText('Critical Filter Applied')).toBeInTheDocument();
 
-    expect(screen.getByTestId('WarningIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('ErrorIcon')).toBeInTheDocument();
 
-    await user.hover(screen.getByTestId('WarningIcon'));
+    await user.hover(screen.getByTestId('ErrorIcon'));
 
     expect(
-      await screen.findByText(
-        'A catalogue category is considered critical if any of its nested child categories or catalogue items are flagged as critical.'
-      )
+      await screen.findByText('This catalogue category is critical.')
     ).toBeInTheDocument();
   });
   describe('pagination', () => {

src/catalogue/category/catalogueCardView.component.tsx

@@ -460,6 +460,11 @@ function CatalogueCardView() {
         {isCriticalMode && (
           <Button
             sx={{ mx: 0.5 }}
+            startIcon={
+              <Tooltip title={CriticalTooltipText}>
+                <InfoOutlined />
+              </Tooltip>
+            }
             variant="outlined"
             disabled={isCriticalFilterApplied}
             onClick={() => {
@@ -468,7 +473,7 @@ function CatalogueCardView() {
               ]);
             }}
           >
-            Show Critical Items
+            Show Critical Categories
           </Button>
         )}
         <Button

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

@@ -142,7 +142,7 @@ describe('CatalogueCategoryTableView', () => {
           name: 'Energy Meters',
           parent_id: '1',
           code: 'energy-meters',
-          is_flagged: false,
+          is_flagged: null,
           is_leaf: true,
           properties: [
             {
@@ -397,14 +397,25 @@ describe('CatalogueCategoryTableView', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByTestId('WarningIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('ErrorIcon')).toBeInTheDocument();
     });
 
+    await user.hover(screen.getByTestId('ErrorIcon'));
+
+    expect(
+      await screen.findByText('This catalogue category is critical.')
+    ).toBeInTheDocument();
+    await user.hover(screen.getAllByTestId('CheckCircleIcon')[0]);
+
+    expect(
+      await screen.findByText('This catalogue category is not critical.')
+    ).toBeInTheDocument();
+
     await user.hover(screen.getByTestId('WarningIcon'));
 
     expect(
       await screen.findByText(
-        'A catalogue category is considered critical if any of its nested child categories or catalogue items are flagged as critical.'
+        'Unable to determine if this catalogue category is critical. Please contact support.'
       )
     ).toBeInTheDocument();
   });