Skip to content

Commit 52f98e0

Browse files
joshdimantetojoshdimanteto
committed
address review comments #1484 
1 parent 9939c19 commit 52f98e0

15 files changed

+111
-105
lines changed

‎src/catalogue/category/catalogueCategoryDialog.component.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@ import {
3939
AddCatalogueCategoryWithPlacementIds,
4040
AllowedValues as AllowedValuesPlaceholder,
4141
} from '../../app.types';
42+
import {
43+
FLEX_CONTAINER_PROPS,
44+
FORM_DIALOG_PROPS,
45+
TABLE_DIALOG_PROPS,
46+
} from '../../common/consts';
4247
import { CatalogueCategorySchema, RequestType } from '../../form.schemas';
4348
import handleIMS_APIError from '../../handleIMS_APIError';
4449
import handleTransferState from '../../handleTransferState';
45-
import {
46-
flexContainerProps,
47-
formDialogProps,
48-
tableDialogProps,
49-
} from '../../utils';
5050
import CatalogueItemsPropertiesTable from './property/catalogueItemPropertiesTable.component';
5151

5252
// Function to convert a list of strings to a list of numbers
@@ -311,7 +311,7 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
311311
return (
312312
<Dialog
313313
open={open}
314-
{...(isLeaf === 'true' ? tableDialogProps : formDialogProps)}
314+
{...(isLeaf === 'true' ? TABLE_DIALOG_PROPS : FORM_DIALOG_PROPS)}
315315
>
316316
<DialogTitle>
317317
{requestType === 'patch'
@@ -336,7 +336,7 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
336336
id="catalogue-category-name-input"
337337
label="Name"
338338
required
339-
sx={{ marginTop: '8px', paddingRight: 1 }}
339+
sx={{ marginTop: 1, paddingRight: 1 }}
340340
{...register('name')}
341341
error={!!errors.name}
342342
helperText={errors.name?.message}
@@ -420,15 +420,15 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
420420
<Box
421421
sx={{
422422
paddingLeft: 1,
423-
...flexContainerProps,
423+
...FLEX_CONTAINER_PROPS,
424424
minHeight: '500px',
425425
}}
426426
>
427427
<Typography variant="h6">Catalogue Item Properties</Typography>
428428
<Box
429429
sx={{
430430
mt: 1,
431-
...flexContainerProps,
431+
...FLEX_CONTAINER_PROPS,
432432
}}
433433
>
434434
<FormProvider {...formMethods}>

‎src/catalogue/category/catalogueCategoryDirectoryDialog.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import {
1818
useGetCatalogueCategory,
1919
useMoveToCatalogueCategory,
2020
} from '../../api/catalogueCategories';
21+
import { FLEX_CONTAINER_PROPS, TABLE_DIALOG_PROPS } from '../../common/consts';
2122
import handleTransferState from '../../handleTransferState';
22-
import { flexContainerProps, tableDialogProps } from '../../utils';
2323
import Breadcrumbs from '../../view/breadcrumbs.component';
2424
import CatalogueCategoryTableView from './catalogueCategoryTableView.component';
2525

@@ -134,7 +134,7 @@ const CatalogueCategoryDirectoryDialog = (
134134
useGetCatalogueBreadcrumbs(parentCategoryId);
135135

136136
return (
137-
<Dialog open={open} {...tableDialogProps}>
137+
<Dialog open={open} {...TABLE_DIALOG_PROPS}>
138138
<DialogTitle sx={{ marginLeft: 2, paddingBottom: 0 }}>
139139
<Grid container spacing={2}>
140140
<Grid>
@@ -179,7 +179,7 @@ const CatalogueCategoryDirectoryDialog = (
179179
</Grid>
180180
</Grid>
181181
</DialogTitle>
182-
<DialogContent sx={{ ...flexContainerProps, minHeight: '500px' }}>
182+
<DialogContent sx={{ ...FLEX_CONTAINER_PROPS, minHeight: '500px' }}>
183183
<CatalogueCategoryTableView
184184
selectedCategories={selectedCategories}
185185
catalogueCategoryParentId={parentCategoryId ?? undefined}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { CatalogueCategory } from '../../api/api.types';
2020
import { APISettingsContext } from '../../apiConfigProvider.component';
2121
import {
2222
DEFAULT_ROWS_PER_PAGE_VALUE,
23+
FLEX_CONTAINER_PROPS,
24+
FLEX_TABLE_CONTAINER_PROP,
2325
ROWS_PER_PAGE_OPTIONS,
2426
} from '../../common/consts';
2527
import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
@@ -32,8 +34,6 @@ import {
3234
COLUMN_FILTER_VARIANTS,
3335
criticalityRowStyle,
3436
displayTableRowCountText,
35-
flexContainerProps,
36-
flexTableContainerProps,
3737
formatDateTimeStrings,
3838
generateUniqueName,
3939
mrtTheme,
@@ -132,7 +132,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
132132
filterVariant: COLUMN_FILTER_VARIANTS.datetime,
133133
filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
134134
columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
135-
size: isCriticalMode ? 590 : 690,
135+
size: isCriticalMode ? 570 : 670,
136136
enableGrouping: false,
137137
Cell: ({ row }) =>
138138
formatDateTimeStrings(row.original.modified_time, true),
@@ -229,8 +229,8 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
229229
);
230230
},
231231
},
232-
muiTablePaperProps: { sx: flexContainerProps },
233-
muiTableContainerProps: { sx: flexTableContainerProps },
232+
muiTablePaperProps: { sx: FLEX_CONTAINER_PROPS },
233+
muiTableContainerProps: { sx: FLEX_TABLE_CONTAINER_PROP },
234234
muiSearchTextFieldProps: {
235235
size: 'small',
236236
variant: 'outlined',
@@ -306,7 +306,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
306306
}, [isCriticalMode, table]);
307307

308308
return (
309-
<Box sx={{ p: 1, ...flexContainerProps }}>
309+
<Box sx={{ p: 1, ...FLEX_CONTAINER_PROPS }}>
310310
<MaterialReactTable table={table} />
311311
</Box>
312312
);

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,15 @@ import {
3636
TableHeaderOverflowTip,
3737
customFilterFunctions,
3838
displayTableRowCountText,
39-
flexContainerProps,
40-
flexTableContainerProps,
4139
getInitialColumnFilterFnState,
4240
mrtTheme,
4341
} from '../../../utils';
4442

43+
import {
44+
FLEX_CONTAINER_PROPS,
45+
FLEX_TABLE_CONTAINER_PROP,
46+
} from '../../../common/consts';
47+
4548
import AddIcon from '@mui/icons-material/Add';
4649
import ClearIcon from '@mui/icons-material/Clear';
4750
import EditIcon from '@mui/icons-material/Edit';
@@ -293,9 +296,9 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
293296
//MRT
294297
mrtTheme,
295298
// MUI
296-
muiTablePaperProps: { sx: flexContainerProps },
299+
muiTablePaperProps: { sx: FLEX_CONTAINER_PROPS },
297300
muiTableContainerProps: {
298-
sx: flexTableContainerProps,
301+
sx: FLEX_TABLE_CONTAINER_PROP,
299302
// @ts-expect-error: MRT Table Container props does not have data-testid
300303
'data-testid': 'properties-table-container',
301304
},
@@ -486,7 +489,7 @@ export function CatalogueItemsPropertiesTable(props: PropertiesTableProps) {
486489
}),
487490
});
488491
return (
489-
<Box sx={{ width: '100%', p: 1, ...flexContainerProps }}>
492+
<Box sx={{ width: '100%', p: 1, ...FLEX_CONTAINER_PROPS }}>
490493
<MaterialReactTable table={table} />
491494
<DeletePropertyDialog
492495
open={deletePropertyDialogOpen}

‎src/catalogue/items/catalogueItemDirectoryDialog.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import {
2222
useCopyToCatalogueItem,
2323
useMoveToCatalogueItem,
2424
} from '../../api/catalogueItems';
25+
import { FLEX_CONTAINER_PROPS, TABLE_DIALOG_PROPS } from '../../common/consts';
2526
import handleTransferState from '../../handleTransferState';
26-
import { flexContainerProps, tableDialogProps } from '../../utils';
2727
import Breadcrumbs from '../../view/breadcrumbs.component';
2828
import CatalogueCategoryTableView from '../category/catalogueCategoryTableView.component';
2929
import CatalogueItemsTable from './catalogueItemsTable.component';
@@ -153,7 +153,7 @@ const CatalogueItemDirectoryDialog = (
153153
useGetCatalogueBreadcrumbs(parentCategoryId);
154154

155155
return (
156-
<Dialog open={open} {...tableDialogProps}>
156+
<Dialog open={open} {...TABLE_DIALOG_PROPS}>
157157
<DialogTitle sx={{ marginLeft: 2, paddingBottom: 0 }}>
158158
<Grid container spacing={2}>
159159
<Grid
@@ -197,7 +197,7 @@ const CatalogueItemDirectoryDialog = (
197197
</Grid>
198198
</Grid>
199199
</DialogTitle>
200-
<DialogContent sx={{ ...flexContainerProps, minHeight: '500px' }}>
200+
<DialogContent sx={{ ...FLEX_CONTAINER_PROPS, minHeight: '500px' }}>
201201
{targetCatalogueCategory?.is_leaf ? (
202202
<CatalogueItemsTable
203203
parentInfo={targetCatalogueCategory}

‎src/catalogue/items/catalogueItemsDialog.component.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,15 @@ import {
4545
PropertiesStep,
4646
PropertyValue,
4747
} from '../../app.types';
48+
import { FORM_WITH_STEPPER_DIALOG_PROPS } from '../../common/consts';
4849
import {
4950
CatalogueItemDetailsStepSchema,
5051
PropertiesStepSchema,
5152
RequestType,
5253
} from '../../form.schemas';
5354
import handleIMS_APIError from '../../handleIMS_APIError';
5455
import ManufacturerDialog from '../../manufacturer/manufacturerDialog.component';
55-
import { formWithStepperDialogProps, sortDataList } from '../../utils';
56+
import { sortDataList } from '../../utils';
5657

5758
const RECENT_MANUFACTURER_CUTOFF_TIME = 10 * 60 * 1000;
5859

@@ -884,7 +885,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
884885
}
885886
};
886887
return (
887-
<Dialog open={open} {...formWithStepperDialogProps}>
888+
<Dialog open={open} {...FORM_WITH_STEPPER_DIALOG_PROPS}>
888889
<DialogTitle>{`${
889890
requestType === 'patch' ? 'Edit' : 'Add'
890891
} Catalogue Item`}</DialogTitle>

‎src/catalogue/items/catalogueItemsTable.component.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ import { useGetInUseDefinition } from '../../api/settings';
4444
import { APISettingsContext } from '../../apiConfigProvider.component';
4545
import {
4646
DEFAULT_ROWS_PER_PAGE_VALUE,
47+
FLEX_CONTAINER_PROPS,
48+
FLEX_TABLE_CONTAINER_PROP,
4749
ROWS_PER_PAGE_OPTIONS,
4850
} from '../../common/consts';
4951
import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
@@ -67,8 +69,6 @@ import {
6769
customFilterFunctions,
6870
deselectRowById,
6971
displayTableRowCountText,
70-
flexContainerProps,
71-
flexTableContainerProps,
7272
formatDateTimeStrings,
7373
generateUniqueName,
7474
getInitialColumnFilterFnState,
@@ -969,10 +969,10 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
969969
}),
970970
};
971971
},
972-
muiTablePaperProps: { sx: flexContainerProps },
972+
muiTablePaperProps: { sx: FLEX_CONTAINER_PROPS },
973973
muiTableContainerProps: () => {
974974
return {
975-
sx: flexTableContainerProps,
975+
sx: FLEX_TABLE_CONTAINER_PROP,
976976

977977
'data-testid': 'catalogue-items-table-container',
978978
};
@@ -1229,22 +1229,20 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
12291229
React.useEffect(() => {
12301230
if (dense)
12311231
table.setColumnSizing((prev) => {
1232-
console.log(prev);
1233-
12341232
const newSizes = {
12351233
'catalogueItem.is_flagged': 180,
12361234
'catalogueItem.name': isCriticalMode ? 670 : 760,
1237-
'catalogueItem.modified_time': isCriticalMode ? 500 : 590,
1235+
'catalogueItem.modified_time': isCriticalMode ? 480 : 570,
12381236
};
12391237
return { ...prev, ...newSizes };
12401238
});
12411239
}, [dense, table, isCriticalMode]);
12421240

12431241
return (
1244-
<Box sx={{ width: '100%', ...flexContainerProps }}>
1242+
<Box sx={{ width: '100%', ...FLEX_CONTAINER_PROPS }}>
12451243
<Stack
12461244
sx={{
1247-
...flexContainerProps,
1245+
...FLEX_CONTAINER_PROPS,
12481246
width: '100%',
12491247
...(!dense ? { height: contentHeight, flex: undefined } : { p: 1 }),
12501248
}}

‎src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ import {
3131
usePatchCatalogueItem,
3232
} from '../../api/catalogueItems';
3333
import { ObsoleteDetails } from '../../app.types';
34-
import handleIMS_APIError from '../../handleIMS_APIError';
3534
import {
36-
flexContainerProps,
37-
formWithStepperDialogProps,
38-
trimStringValues,
39-
} from '../../utils';
35+
FLEX_CONTAINER_PROPS,
36+
FORM_WITH_STEPPER_DIALOG_PROPS,
37+
} from '../../common/consts';
38+
import handleIMS_APIError from '../../handleIMS_APIError';
39+
import { trimStringValues } from '../../utils';
4040
import Breadcrumbs from '../../view/breadcrumbs.component';
4141
import CatalogueCategoryTableView from '../category/catalogueCategoryTableView.component';
4242
import CatalogueItemsTable from './catalogueItemsTable.component';
@@ -301,7 +301,7 @@ const ObsoleteCatalogueItemDialog = (
301301
}
302302
};
303303
return (
304-
<Dialog open={open} {...formWithStepperDialogProps}>
304+
<Dialog open={open} {...FORM_WITH_STEPPER_DIALOG_PROPS}>
305305
<DialogTitle>Obsolete Catalogue Item</DialogTitle>
306306
<DialogContent sx={{ height: 'calc(100% - 56px)' }}>
307307
<Stepper
@@ -323,7 +323,7 @@ const ObsoleteCatalogueItemDialog = (
323323
sx={{
324324
textAlign: 'center',
325325
marginTop: 2,
326-
...flexContainerProps,
326+
...FLEX_CONTAINER_PROPS,
327327
height: 'inherit',
328328
minHeight: '500px',
329329
}}

‎src/common/consts.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,42 @@
1+
import { DialogProps } from '@mui/material/Dialog';
2+
13
export const ROWS_PER_PAGE_OPTIONS = [30, 45, 60];
24
export const DEFAULT_ROWS_PER_PAGE_VALUE = ROWS_PER_PAGE_OPTIONS[0];
5+
6+
export const TABLE_DIALOG_PROPS: Omit<DialogProps, 'open'> = {
7+
maxWidth: 'xl',
8+
slotProps: {
9+
paper: {
10+
sx: {
11+
height: '100%',
12+
},
13+
},
14+
},
15+
fullWidth: true,
16+
};
17+
18+
export const FORM_DIALOG_PROPS: Omit<DialogProps, 'open'> = {
19+
maxWidth: 'xl',
20+
slotProps: {
21+
paper: {
22+
sx: {
23+
maxHeight: '100%',
24+
},
25+
},
26+
},
27+
fullWidth: true,
28+
};
29+
30+
export const FORM_WITH_STEPPER_DIALOG_PROPS = TABLE_DIALOG_PROPS;
31+
32+
export const FLEX_CONTAINER_PROPS: React.CSSProperties = {
33+
flex: 1,
34+
display: 'flex',
35+
flexDirection: 'column',
36+
overflow: 'hidden',
37+
};
38+
39+
export const FLEX_TABLE_CONTAINER_PROP: React.CSSProperties = {
40+
flex: 1,
41+
overflow: 'auto',
42+
};

‎src/items/itemDialog.component.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ import {
5252
convertToPropertyPost,
5353
convertToPropertyValueList,
5454
} from '../catalogue/items/catalogueItemsDialog.component';
55+
import {
56+
FLEX_CONTAINER_PROPS,
57+
FORM_WITH_STEPPER_DIALOG_PROPS,
58+
} from '../common/consts';
5559
import MRTTopTableAlert from '../common/mrtTopTableAlert.component';
5660
import {
5761
DATE_PICKER_MAX_DATE,
@@ -65,7 +69,6 @@ import {
6569
import handleIMS_APIError from '../handleIMS_APIError';
6670
import handleTransferState from '../handleTransferState';
6771
import { SystemsTableView } from '../systems/systemsTableView.component';
68-
import { flexContainerProps, formWithStepperDialogProps } from '../utils';
6972
import Breadcrumbs from '../view/breadcrumbs.component';
7073

7174
function toItemDetailsStep(item: Item | undefined): ItemDetailsStep {
@@ -670,7 +673,7 @@ function ItemDialog(props: ItemDialogProps) {
670673
}}
671674
homeLocation="Systems"
672675
/>
673-
<Box sx={{ p: 1, ...flexContainerProps, minHeight: '500px' }}>
676+
<Box sx={{ p: 1, ...FLEX_CONTAINER_PROPS, minHeight: '500px' }}>
674677
{parentSystemId &&
675678
!isSelectedRulesLoading &&
676679
!systemsDataLoading && (
@@ -1254,7 +1257,7 @@ function ItemDialog(props: ItemDialogProps) {
12541257
};
12551258

12561259
return (
1257-
<Dialog open={open} {...formWithStepperDialogProps}>
1260+
<Dialog open={open} {...FORM_WITH_STEPPER_DIALOG_PROPS}>
12581261
<DialogTitle
12591262
sx={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 0 }}
12601263
>

0 commit comments

Comments
 (0)