From 84cc03347e65f6192214f7aa168bfb180c33abff Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia
Date: Thu, 4 Jan 2024 17:07:12 +0000
Subject: [PATCH 001/222] logic for menu actions #172
---
.../category/catalogueCard.component.tsx | 60 +++++++++++++++----
1 file changed, 48 insertions(+), 12 deletions(-)
diff --git a/src/catalogue/category/catalogueCard.component.tsx b/src/catalogue/category/catalogueCard.component.tsx
index 1881e54be..1ec0f6a9b 100644
--- a/src/catalogue/category/catalogueCard.component.tsx
+++ b/src/catalogue/category/catalogueCard.component.tsx
@@ -7,12 +7,15 @@ import {
CardActions,
IconButton,
Checkbox,
+ MenuItem,
+ ListItemIcon,
+ Menu,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import { CatalogueCategory } from '../../app.types';
import { Link } from 'react-router-dom';
-
export interface CatalogueCardProps extends CatalogueCategory {
onChangeOpenDeleteDialog: (catalogueCategory: CatalogueCategory) => void;
onChangeOpenEditDialog: (catalogueCategory: CatalogueCategory) => void;
@@ -33,10 +36,13 @@ function CatalogueCard(props: CatalogueCardProps) {
onToggleSelect(catalogueCategory);
};
+ const [menuOpen, setMenuOpen] = React.useState(false);
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
return (
From 29c6360c6193b23b18988ea3e7765de6e2adc710 Mon Sep 17 00:00:00 2001
From: Joel Davies
Date: Fri, 5 Jan 2024 10:42:58 +0000
Subject: [PATCH 002/222] Add menu button #137
---
src/systems/systemDialog.component.tsx | 6 +-
src/systems/systems.component.tsx | 310 ++++++++++++++++---------
2 files changed, 205 insertions(+), 111 deletions(-)
diff --git a/src/systems/systemDialog.component.tsx b/src/systems/systemDialog.component.tsx
index d7473973c..3536829e9 100644
--- a/src/systems/systemDialog.component.tsx
+++ b/src/systems/systemDialog.component.tsx
@@ -29,10 +29,12 @@ import {
SystemImportanceType,
} from '../app.types';
+export type SystemDialogType = 'add' | 'edit';
+
export interface SystemDialogProps {
open: boolean;
onClose: () => void;
- type: 'add' | 'edit';
+ type: SystemDialogType;
// Only required for add
parentId?: string | null;
// Only required for prepopulating fields for an edit dialog
@@ -211,7 +213,7 @@ const SystemDialog = React.memo((props: SystemDialogProps) => {
const systemText = parentId ? 'Subsystem' : 'System';
return (
-
- Manufacturer Address Line
+ Address
-
-
-
- Manufacturer Town
-
-
- None
-
-
-
-
- Manufacturer County
-
- None
-
-
-
-
- Manufacturer Country
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
-
-
- Manufacturer Post/Zip code
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
@@ -888,67 +848,27 @@ exports[`Catalogue Items details panel renders details panel correctly 1`] = `
- Manufacturer Address Line
+ Address
-
-
-
- Manufacturer Town
-
-
- None
-
-
-
-
- Manufacturer County
-
- None
-
-
-
-
- Manufacturer Country
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
-
-
- Manufacturer Post/Zip code
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
@@ -1378,67 +1298,27 @@ exports[`Catalogue Items details panel renders manufacturer panel correctly 1`]
- Manufacturer Address Line
+ Address
-
-
-
- Manufacturer Town
-
-
- None
-
-
-
-
- Manufacturer County
-
- None
-
-
-
-
- Manufacturer Country
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
-
-
- Manufacturer Post/Zip code
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
@@ -1868,67 +1748,27 @@ exports[`Catalogue Items details panel renders properties panel correctly 1`] =
- Manufacturer Address Line
+ Address
-
-
-
- Manufacturer Town
-
-
- None
-
-
-
-
- Manufacturer County
-
- None
-
-
-
-
- Manufacturer Country
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
-
-
- Manufacturer Post/Zip code
-
+ class="MuiTypography-root MuiTypography-body1 MuiTypography-alignLeft css-1adeo1o-MuiTypography-root"
+ />
From 21210691e68891f5f22fb5c6d98eabfa786ee136 Mon Sep 17 00:00:00 2001
From: Joel Davies
Date: Wed, 10 Jan 2024 11:09:11 +0000
Subject: [PATCH 050/222] Fix other table views #125
---
src/catalogue/items/catalogueItemsTable.component.tsx | 6 +++---
src/manufacturer/manufacturer.component.tsx | 7 ++++---
src/systems/systems.component.tsx | 4 ++--
src/utils.tsx | 6 ++++--
src/view/viewTabs.component.tsx | 3 ++-
5 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index dfe60d113..578f3ba53 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -37,7 +37,7 @@ import {
CatalogueItemPropertyResponse,
Manufacturer,
} from '../../app.types';
-import { generateUniqueName } from '../../utils';
+import { generateUniqueName, getPageHeightCalc } from '../../utils';
import CatalogueItemsDetailsPanel from './CatalogueItemsDetailsPanel.component';
import CatalogueItemDirectoryDialog from './catalogueItemDirectoryDialog.component';
import CatalogueItemsDialog from './catalogueItemsDialog.component';
@@ -75,8 +75,8 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
selectedRowState,
isItemSelectable,
} = props;
- // SG header + SG footer + tabs #add breadcrumbs + Mui table V2
- const tableHeight = `calc(100vh - (64px + 36px + 50px + 125px))`;
+ // Breadcrumbs + Mui table V2 + extra
+ const tableHeight = getPageHeightCalc('50px + 110px + 32px');
const { data, isLoading } = useCatalogueItems(parentInfo.id);
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index 5eb60e9a4..46d42a580 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -25,6 +25,7 @@ import { useManufacturers } from '../api/manufacturer';
import { Manufacturer } from '../app.types';
import DeleteManufacturerDialog from './deleteManufacturerDialog.component';
import ManufacturerDialog from './manufacturerDialog.component';
+import { getPageHeightCalc } from '../utils';
function ManufacturerComponent() {
const { data: ManufacturerData, isLoading: ManufacturerDataLoading } =
@@ -37,7 +38,7 @@ function ManufacturerComponent() {
Manufacturer | undefined
>(undefined);
- const tableHeight = `calc(100vh - (64px + 36px + 111px))`;
+ const tableHeight = getPageHeightCalc('110px');
const columns = React.useMemo[]>(() => {
return [
@@ -135,6 +136,7 @@ function ManufacturerComponent() {
muiTableBodyRowProps: ({ row }) => {
return { component: TableRow, 'aria-label': `${row.original.name} row` };
},
+ muiTablePaperProps: { sx: { maxHeight: '100%' } },
muiTableContainerProps: { sx: { height: tableHeight } },
paginationDisplayMode: 'pages',
positionToolbarAlertBanner: 'bottom',
@@ -228,9 +230,8 @@ function ManufacturerComponent() {
});
return (
-
+
-
setDeleteManufacturerDialog(false)}
diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
index fcb4ad4d7..9400b4a1c 100644
--- a/src/systems/systems.component.tsx
+++ b/src/systems/systems.component.tsx
@@ -360,8 +360,8 @@ function Systems() {
marginTop: 1,
marginBottom: 'auto',
flexWrap: 'no-wrap',
- // Breadcrumbs and header - pagination component
- maxHeight: getPageHeightCalc('130px'),
+ // Breadcrumbs and rest
+ maxHeight: getPageHeightCalc('56px + 74px'),
}}
>
{
// Page height - unknown - app bar height - footer height - additional
- return `calc(100vh - 8px - 64px - 24px - ${additionalSubtraction || ''})`;
+ return `calc(100vh - 8px - 64px - 24px${
+ additionalSubtraction !== undefined ? ` - (${additionalSubtraction})` : ''
+ })`;
};
/* Returns a calc function giving the page height excluding the optional view tabs component
@@ -38,7 +40,7 @@ export const getPageHeightCalc = (additionalSubtraction?: string): string => {
if (isRunningInDevelopment()) newAdditional = '48px';
if (additionalSubtraction !== undefined) {
if (newAdditional === undefined) newAdditional = additionalSubtraction;
- else newAdditional += ' - ' + additionalSubtraction;
+ else newAdditional += ' + ' + additionalSubtraction;
}
return getSciGatewayPageHeightCalc(newAdditional);
diff --git a/src/view/viewTabs.component.tsx b/src/view/viewTabs.component.tsx
index 4d8b3abc5..0c5064a0e 100644
--- a/src/view/viewTabs.component.tsx
+++ b/src/view/viewTabs.component.tsx
@@ -36,9 +36,10 @@ function TabPanel(props: TabPanelProps) {
hidden={value !== label}
id={`${label}-tabpanel`}
aria-labelledby={`${label}-tab`}
+ style={{ height: '100%' }}
{...other}
>
- {value === label && {children}}
+ {value === label && {children}}
);
}
From 2df8c3b3f14bf833398f90222b72796057329599 Mon Sep 17 00:00:00 2001
From: Joel Davies
Date: Wed, 10 Jan 2024 12:04:37 +0000
Subject: [PATCH 051/222] Fix existing unit tests #125
---
...atalogueItemsTable.component.test.tsx.snap | 4 +--
.../manufacturer.component.test.tsx.snap | 6 ++---
.../systemDirectoryDialog.component.test.tsx | 8 +++---
src/systems/systems.component.test.tsx | 27 +++++++++----------
4 files changed, 21 insertions(+), 24 deletions(-)
diff --git a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
index 1bd50d8ca..cb47e40a8 100644
--- a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
+++ b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`Catalogue Items Table renders the dense table correctly 1`] = `
aria-label="Filter by Name"
autocomplete="new-password"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
- id=":r1i7:"
+ id=":r1h1:"
placeholder="Filter by Name"
title="Filter by Name"
type="text"
@@ -739,7 +739,7 @@ exports[`Catalogue Items Table renders the dense table correctly 1`] = `
class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
>