Merge pull request #1759 from ral-facilities/unify-styling-across-all-dialog-components-#1484

Unify styling across all dialog components #1484

Author: joshdimanteto

src/catalogue/category/catalogueCategoryDialog.component.tsx

@@ -39,10 +39,15 @@ import {
   AddCatalogueCategoryWithPlacementIds,
   AllowedValues as AllowedValuesPlaceholder,
 } from '../../app.types';
+import {
+  FLEX_CONTAINER_PROPS,
+  FORM_DIALOG_PROPS,
+  TABLE_DIALOG_PROPS,
+} from '../../common/consts';
 import { CatalogueCategorySchema, RequestType } from '../../form.schemas';
 import handleIMS_APIError from '../../handleIMS_APIError';
-import CatalogueItemsPropertiesTable from './property/catalogueItemPropertiesTable.component';
 import handleTransferState from '../../handleTransferState';
+import CatalogueItemsPropertiesTable from './property/catalogueItemPropertiesTable.component';
 
 // Function to convert a list of strings to a list of numbers
 export const convertListToNumbers = (values: string[]): number[] => {
@@ -304,17 +309,22 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
   };
 
   return (
-    <Dialog open={open} maxWidth="lg" fullWidth>
+    <Dialog
+      open={open}
+      {...(isLeaf === 'true' ? TABLE_DIALOG_PROPS : FORM_DIALOG_PROPS)}
+    >
       <DialogTitle>
         {requestType === 'patch'
           ? 'Edit Catalogue Category'
           : 'Add Catalogue Category'}
       </DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{ height: '100%' }}>
         <Stack
           spacing={1}
           sx={{
             width: '100%',
+            height: 'inherit',
+            overflow: 'auto',
           }}
         >
           <Grid
@@ -326,7 +336,7 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
                 id="catalogue-category-name-input"
                 label="Name"
                 required
-                sx={{ marginLeft: '4px', marginTop: '8px' }}
+                sx={{ marginTop: 1, paddingRight: 1 }}
                 {...register('name')}
                 error={!!errors.name}
                 helperText={errors.name?.message}
@@ -407,11 +417,18 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
           {isLeaf === 'true' && (
             <>
               <Divider sx={{ minWidth: '700px' }} />
-              <Box sx={{ paddingLeft: 1 }}>
+              <Box
+                sx={{
+                  paddingLeft: 1,
+                  ...FLEX_CONTAINER_PROPS,
+                  minHeight: '500px',
+                }}
+              >
                 <Typography variant="h6">Catalogue Item Properties</Typography>
                 <Box
                   sx={{
                     mt: 1,
+                    ...FLEX_CONTAINER_PROPS,
                   }}
                 >
                   <FormProvider {...formMethods}>

src/catalogue/category/catalogueCategoryDirectoryDialog.component.tsx

@@ -18,6 +18,7 @@ import {
   useGetCatalogueCategory,
   useMoveToCatalogueCategory,
 } from '../../api/catalogueCategories';
+import { FLEX_CONTAINER_PROPS, TABLE_DIALOG_PROPS } from '../../common/consts';
 import handleTransferState from '../../handleTransferState';
 import Breadcrumbs from '../../view/breadcrumbs.component';
 import CatalogueCategoryTableView from './catalogueCategoryTableView.component';
@@ -133,13 +134,8 @@ const CatalogueCategoryDirectoryDialog = (
     useGetCatalogueBreadcrumbs(parentCategoryId);
 
   return (
-    <Dialog
-      open={open}
-      maxWidth="lg"
-      slotProps={{ paper: { sx: { height: 'xl' } } }}
-      fullWidth
-    >
-      <DialogTitle sx={{ marginLeft: 2 }}>
+    <Dialog open={open} {...TABLE_DIALOG_PROPS}>
+      <DialogTitle sx={{ marginLeft: 2, paddingBottom: 0 }}>
         <Grid container spacing={2}>
           <Grid>
             <Box
@@ -183,7 +179,7 @@ const CatalogueCategoryDirectoryDialog = (
           </Grid>
         </Grid>
       </DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{ ...FLEX_CONTAINER_PROPS, minHeight: '500px' }}>
         <CatalogueCategoryTableView
           selectedCategories={selectedCategories}
           catalogueCategoryParentId={parentCategoryId ?? undefined}

src/catalogue/category/catalogueCategoryTableView.component.tsx

@@ -20,6 +20,8 @@ import { CatalogueCategory } from '../../api/api.types';
 import { APISettingsContext } from '../../apiConfigProvider.component';
 import {
   DEFAULT_ROWS_PER_PAGE_VALUE,
+  FLEX_CONTAINER_PROPS,
+  FLEX_TABLE_CONTAINER_PROP,
   ROWS_PER_PAGE_OPTIONS,
 } from '../../common/consts';
 import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
@@ -31,6 +33,7 @@ import {
   COLUMN_FILTER_MODE_OPTIONS,
   COLUMN_FILTER_VARIANTS,
   criticalityRowStyle,
+  displayTableRowCountText,
   formatDateTimeStrings,
   generateUniqueName,
   mrtTheme,
@@ -99,7 +102,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
               id: 'is_flagged',
               filterVariant: COLUMN_FILTER_VARIANTS.boolean,
               enableColumnFilterModes: false,
-              size: 180,
+              size: 200,
               filterSelectOptions: COLUMN_FILTER_BOOLEAN_OPTIONS,
               Cell: ({ row }: { row: MRT_Row<CatalogueCategory> }) => {
                 const showFlagged = row.original.is_flagged;
@@ -120,7 +123,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
         filterVariant: COLUMN_FILTER_VARIANTS.string,
         filterFn: COLUMN_FILTER_FUNCTIONS.string,
         columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
-        size: 567.5,
+        size: isCriticalMode ? 680 : 780,
       },
       {
         header: 'Last modified',
@@ -129,13 +132,13 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
         filterVariant: COLUMN_FILTER_VARIANTS.datetime,
         filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
         columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
-        size: 400,
+        size: isCriticalMode ? 570 : 670,
         enableGrouping: false,
         Cell: ({ row }) =>
           formatDateTimeStrings(row.original.modified_time, true),
       },
     ];
-  }, [isSparesDefinitionDefined]);
+  }, [isCriticalMode, isSparesDefinitionDefined]);
 
   const table = useMaterialReactTable({
     // Data
@@ -226,7 +229,8 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
               );
             },
           },
-    muiTableContainerProps: { sx: { height: '360.4px' } },
+    muiTablePaperProps: { sx: FLEX_CONTAINER_PROPS },
+    muiTableContainerProps: { sx: FLEX_TABLE_CONTAINER_PROP },
     muiSearchTextFieldProps: {
       size: 'small',
       variant: 'outlined',
@@ -278,6 +282,15 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
         </Button>
       </Box>
     ),
+    renderBottomToolbarCustomActions: ({ table }) =>
+      displayTableRowCountText(
+        table,
+        catalogueCategoryData,
+        'Catalogue Categories',
+        {
+          paddingLeft: '8px',
+        }
+      ),
   });
 
   React.useEffect(() => {
@@ -292,7 +305,11 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
     });
   }, [isCriticalMode, table]);
 
-  return <MaterialReactTable table={table} />;
+  return (
+    <Box sx={{ p: 1, ...FLEX_CONTAINER_PROPS }}>
+      <MaterialReactTable table={table} />
+    </Box>
+  );
 };
 
 export default CatalogueCategoryTableView;

src/catalogue/category/property/__snapshots__/catalogueItemPropertiesTable.component.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`CatalogueItemPropertiesTable > renders table correctly (not editing properties) 1`] = `
 <DocumentFragment>
   <div
-    style="width: 100%;"
+    class="MuiBox-root css-1wyqftk"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-1hoqul-MuiPaper-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-th9pv0-MuiPaper-root"
       style="--Paper-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);"
     >
       <div
@@ -209,12 +209,12 @@ exports[`CatalogueItemPropertiesTable > renders table correctly (not editing pro
         </div>
       </div>
       <div
-        class="MuiTableContainer-root css-1jqhb4h-MuiTableContainer-root"
+        class="MuiTableContainer-root css-1qjrzjp-MuiTableContainer-root"
         data-testid="properties-table-container"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-1gcyac0-MuiTable-root"
-          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-name-size: 220; --col-name-size: 220; --header-type-size: 250; --col-type-size: 250; --header-allowed_values-size: 300; --col-allowed_values-size: 300; --header-unit-size: 250; --col-unit-size: 250; --header-property_mandatory-size: 200; --col-property_mandatory-size: 200; --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-name-size: 345; --col-name-size: 345; --header-type-size: 250; --col-type-size: 250; --header-allowed_values-size: 345; --col-allowed_values-size: 345; --header-unit-size: 250; --col-unit-size: 250; --header-property_mandatory-size: 200; --col-property_mandatory-size: 200; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
         >
           <thead
             class="MuiTableHead-root css-7psuou-MuiTableHead-root"

src/catalogue/category/property/catalogueItemPropertiesTable.component.tsx

@@ -40,6 +40,11 @@ import {
   mrtTheme,
 } from '../../../utils';
 
+import {
+  FLEX_CONTAINER_PROPS,
+  FLEX_TABLE_CONTAINER_PROP,
+} from '../../../common/consts';
+
 import AddIcon from '@mui/icons-material/Add';
 import ClearIcon from '@mui/icons-material/Clear';
 import EditIcon from '@mui/icons-material/Edit';
@@ -50,10 +55,10 @@ import {
   ROWS_PER_PAGE_OPTIONS,
 } from '../../../common/consts';
 import { RequestType } from '../../../form.schemas';
-import PropertyDialog from './propertyDialog.component';
-import DeletePropertyDialog from './deletePropertyDialog.component';
 import { useAppSelector } from '../../../state/hook';
 import { selectAuthorisation } from '../../../state/slices/authorisationSlice';
+import DeletePropertyDialog from './deletePropertyDialog.component';
+import PropertyDialog from './propertyDialog.component';
 
 export interface PropertiesTableProps {
   requestType: RequestType;
@@ -106,7 +111,7 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
         Header: TableHeaderOverflowTip,
         accessorFn: (row) => row.name,
         id: 'name',
-        size: 220,
+        size: 345,
         filterVariant: COLUMN_FILTER_VARIANTS.string,
         filterFn: COLUMN_FILTER_FUNCTIONS.string,
         columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
@@ -151,7 +156,7 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
             .map((value) => value['value'])
             .join(', '),
         id: 'allowed_values',
-        size: 300,
+        size: 345,
         filterVariant: 'multi-select',
         filterFn: 'arrIncludesSome',
         columnFilterModeOptions: [
@@ -291,8 +296,9 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
     //MRT
     mrtTheme,
     // MUI
+    muiTablePaperProps: { sx: FLEX_CONTAINER_PROPS },
     muiTableContainerProps: {
-      sx: { height: '350px', width: '1152px' },
+      sx: FLEX_TABLE_CONTAINER_PROP,
       // @ts-expect-error: MRT Table Container props does not have data-testid
       'data-testid': 'properties-table-container',
     },
@@ -483,7 +489,7 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
       }),
   });
   return (
-    <div style={{ width: '100%' }}>
+    <Box sx={{ width: '100%', p: 1, ...FLEX_CONTAINER_PROPS }}>
       <MaterialReactTable table={table} />
       <DeletePropertyDialog
         open={deletePropertyDialogOpen}
@@ -497,7 +503,7 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
         selectedProperty={selectedProperty}
         catalogueCategory={catalogueCategory}
       />
-    </div>
+    </Box>
   );
 }
 

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

@@ -29,7 +29,7 @@ exports[`Catalogue Items Dialog > renders details step correctly 1`] = `
       <div
         aria-labelledby=":r0:"
         aria-modal="true"
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthLg MuiDialog-paperFullWidth css-1k6wpiw-MuiPaper-root-MuiDialog-paper"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiDialog-paperFullWidth css-v3yqi3-MuiPaper-root-MuiDialog-paper"
         role="dialog"
         style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
       >
@@ -731,7 +731,7 @@ exports[`Catalogue Items Dialog > renders properties step correctly 1`] = `
       <div
         aria-labelledby=":rj:"
         aria-modal="true"
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthLg MuiDialog-paperFullWidth css-1k6wpiw-MuiPaper-root-MuiDialog-paper"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiDialog-paperFullWidth css-v3yqi3-MuiPaper-root-MuiDialog-paper"
         role="dialog"
         style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
       >

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

@@ -3,13 +3,13 @@
 exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
 <DocumentFragment>
   <div
-    style="width: 100%;"
+    class="MuiBox-root css-123hto"
   >
     <div
-      class="MuiStack-root css-17doft4-MuiStack-root"
+      class="MuiStack-root css-7u13gi-MuiStack-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-1hoqul-MuiPaper-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-th9pv0-MuiPaper-root"
         style="--Paper-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);"
       >
         <div
@@ -212,7 +212,7 @@ exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
           </div>
         </div>
         <div
-          class="MuiTableContainer-root css-1h4z99x-MuiTableContainer-root"
+          class="MuiTableContainer-root css-1qjrzjp-MuiTableContainer-root"
           data-testid="catalogue-items-table-container"
         >
           <table