From d9c005a57d02ac375f5a610c09f207d85146cb7a Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 09:52:48 +0100 Subject: [PATCH 01/15] RSDEV-120 Tweak Argos dialog for mobile-sized viewports --- .../eln-dmp-integration/Argos/DMPDialog.js | 64 +++++++------------ 1 file changed, 24 insertions(+), 40 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js index a48a7e76c..752e89795 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js @@ -14,7 +14,6 @@ import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import Grid from "@mui/material/Grid"; import { withStyles } from "Styles"; -import { makeStyles } from "tss-react/mui"; import { observer } from "mobx-react-lite"; import SubmitSpinnerButton from "../../components/SubmitSpinnerButton"; import Typography from "@mui/material/Typography"; @@ -49,6 +48,7 @@ import createAccentedTheme from "../../accentedTheme"; import { ThemeProvider } from "@mui/material/styles"; import { DataGrid } from "@mui/x-data-grid"; import Radio from "@mui/material/Radio"; +import Stack from "@mui/material/Stack"; const COLOR = { main: { @@ -443,7 +443,7 @@ const CustomDialog = withStyles< >((theme, { fullScreen }) => ({ paper: { overflow: "hidden", - margin: theme.spacing(2.625), + margin: fullScreen ? 0 : theme.spacing(2.625), maxHeight: "unset", minHeight: "unset", @@ -453,23 +453,9 @@ const CustomDialog = withStyles< }, }))(Dialog); -const useStyles = makeStyles()(() => ({ - contentWrapper: { - overscrollBehavior: "contain", - WebkitOverflowScrolling: "unset", - }, - barWrapper: { - display: "flex", - alignSelf: "center", - width: "100%", - flexDirection: "column", - alignItems: "center", - }, - fullWidth: { width: "100%" }, -})); - function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { const { addAlert } = useContext(AlertContext); + const { isViewportSmall } = useViewportDimensions(); const [DMPs, setDMPs]: UseState> = useState([]); const [totalCount, setTotalCount]: UseState = useState(0); @@ -502,7 +488,7 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { * close the dialog. */ setSelectedPlan(null); - } catch (e:mixed) { + } catch (e) { console.error(e); addAlert( mkAlert({ @@ -516,8 +502,6 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { } }; - const { classes } = useStyles(); - return ( <> @@ -534,7 +518,7 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { - + void }): Node { initialState={{ columns: { columnVisibilityModel: { + id: !isViewportSmall, grant: false, createdAt: false, modifiedAt: false, @@ -658,7 +643,7 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { - + void }): Node { }} /> - - - - - - { - void handleImport(); - }} - validationResult={ - !selectedPlan ? IsInvalid("No DMP selected.") : IsValid() - } - loading={importing} - > - Import - + + + + { + void handleImport(); + }} + validationResult={ + !selectedPlan ? IsInvalid("No DMP selected.") : IsValid() + } + loading={importing} + > + Import + + From d71ef04d26f8ef2f45c582c37b6b6b8e86ef667a Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 09:06:25 +0100 Subject: [PATCH 02/15] theme --- .../eln-dmp-integration/DMPTool/DMPDialog.js | 62 ++++++++++++++----- 1 file changed, 47 insertions(+), 15 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index d7e439fa8..486468d9c 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -29,11 +29,41 @@ import { Optional } from "../../util/optional"; import useViewportDimensions from "../../util/useViewportDimensions"; import AlertContext, { mkAlert } from "../../stores/contexts/Alert"; import Portal from "@mui/material/Portal"; +import createAccentedTheme from "../../accentedTheme"; +import { ThemeProvider } from "@mui/material/styles"; import ValidatingSubmitButton, { IsInvalid, IsValid, } from "../../components/ValidatingSubmitButton"; +const COLOR = { + main: { + hue: 208, + saturation: 46, + lightness: 70, + }, + darker: { + hue: 208, + saturation: 93, + lightness: 33, + }, + contrastText: { + hue: 208, + saturation: 35, + lightness: 26, + }, + background: { + hue: 208, + saturation: 25, + lightness: 71, + }, + backgroundContrastText: { + hue: 208, + saturation: 11, + lightness: 24, + }, +}; + const CustomDialog = withStyles< {| fullScreen: boolean, ...ElementProps |}, {| paper?: string |} @@ -295,21 +325,23 @@ function DMPDialog({ open, setOpen }: DMPDialogArgs): Node { */ return ( - - - { - setOpen(false); - }} - open={open} - maxWidth="lg" - fullWidth - fullScreen={isViewportSmall} - > - - - - + + + + { + setOpen(false); + }} + open={open} + maxWidth="lg" + fullWidth + fullScreen={isViewportSmall} + > + + + + + ); } From dbd8ba16f217ff7aedf59f03f8ff7b5078475ac5 Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 09:25:51 +0100 Subject: [PATCH 03/15] appbar --- .../eln-dmp-integration/DMPTool/DMPDialog.js | 59 +++++++++++++++---- 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 486468d9c..2f1b2c4fa 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -13,7 +13,6 @@ import Button from "@mui/material/Button"; import { Dialog, DialogBoundary } from "../../components/DialogBoundary"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; -import DialogTitle from "@mui/material/DialogTitle"; import Grid from "@mui/material/Grid"; import DMPTable from "./DMPTable"; import { withStyles } from "Styles"; @@ -35,6 +34,13 @@ import ValidatingSubmitButton, { IsInvalid, IsValid, } from "../../components/ValidatingSubmitButton"; +import Link from "@mui/material/Link"; +import Toolbar from "@mui/material/Toolbar"; +import AppBar from "@mui/material/AppBar"; +import docLinks from "../../assets/DocLinks"; +import Box from "@mui/material/Box"; +import HelpLinkIcon from "../../components/HelpLinkIcon"; +import AccessibilityTips from "../../components/AccessibilityTips"; const COLOR = { main: { @@ -70,12 +76,13 @@ const CustomDialog = withStyles< >((theme, { fullScreen }) => ({ paper: { overflow: "hidden", + margin: fullScreen ? 0 : theme.spacing(2.625), + maxHeight: "unset", + minHeight: "unset", - // this is to avoid intercom help button - maxHeight: fullScreen ? "unset" : "86vh", - - // this is to ensure the picker has enough height even when list is empty - minHeight: "86vh", + // this is so that the hights of the dialog's content of constrained and scrollbars appear + // 24px margin above and below, 3px border above and below + height: fullScreen ? "100%" : "calc(100% - 48px)", }, }))(Dialog); @@ -243,11 +250,43 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { return ( <> - - Data Management Plans (DMPs) from DMPTool - + + + + DMPTool + + + + + + + + + + - + + + Import a DMP into the Gallery + + + + Importing a DMP will make it available to view and reference + within RSpace. + + + See dmptool.org and our{" "} + DMPTool integration docs for + more. + + Date: Wed, 7 Aug 2024 10:16:57 +0100 Subject: [PATCH 04/15] Fix actions buttons --- .../eln-dmp-integration/DMPTool/DMPDialog.js | 61 ++++++++----------- 1 file changed, 26 insertions(+), 35 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 2f1b2c4fa..b6ae88da6 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -39,6 +39,7 @@ import Toolbar from "@mui/material/Toolbar"; import AppBar from "@mui/material/AppBar"; import docLinks from "../../assets/DocLinks"; import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; import HelpLinkIcon from "../../components/HelpLinkIcon"; import AccessibilityTips from "../../components/AccessibilityTips"; @@ -91,20 +92,8 @@ const useStyles = makeStyles()((theme) => ({ overscrollBehavior: "contain", WebkitOverflowScrolling: "unset", }, - barWrapper: { - display: "flex", - alignSelf: "center", - width: "95%", - flexDirection: "column", - alignItems: "center", - }, fullWidth: { width: "100%" }, sideSpaced: { marginRight: theme.spacing(1), marginLeft: theme.spacing(1) }, - flexEndRow: { - display: "flex", - flexDirection: "row", - justifyContent: "flex-end", - }, warningRow: { display: "flex", flexDirection: "row", @@ -311,29 +300,31 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { {showWarning && } - -
-
- - { - void handleImport(); - }} - validationResult={ - !selectedPlan?.id ? IsInvalid("No DMP selected.") : IsValid() - } - loading={importing} - > - Import - -
-
+ + + + + + { + void handleImport(); + }} + validationResult={ + !selectedPlan?.id ? IsInvalid("No DMP selected.") : IsValid() + } + loading={importing} + > + Import + + + + ); From 90e041a75fd636318c454638b0118979e4836207 Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 10:39:42 +0100 Subject: [PATCH 05/15] Fix tests --- .../src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js | 1 + .../DMPTool/__tests__/DMPToolMenuItem.test.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js index bbbe06d2f..1f95be866 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js @@ -3,6 +3,7 @@ */ //@flow /* eslint-env jest */ +import "../../../../__mocks__/matchMedia.js"; import React from "react"; import { render, diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPToolMenuItem.test.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPToolMenuItem.test.js index 74a846c5b..9bd6c9e4d 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPToolMenuItem.test.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPToolMenuItem.test.js @@ -3,6 +3,7 @@ */ //@flow /* eslint-env jest */ +import "../../../../__mocks__/matchMedia.js"; import React from "react"; import { render, cleanup, screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; From 52cc654dd6c3ad62ab632bbcf373e989bb0ad9df Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 11:02:14 +0100 Subject: [PATCH 06/15] Consistent typography --- .../webapp/ui/src/eln-dmp-integration/DMPTool/ScopeField.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/ScopeField.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/ScopeField.js index 309bf887d..716601df6 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/ScopeField.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/ScopeField.js @@ -5,6 +5,7 @@ import Grid from "@mui/material/Grid"; import RadioField, { type RadioOption, } from "../../components/Inputs/RadioField"; +import Typography from "@mui/material/Typography"; export type Scope = "MINE" | "PUBLIC" | "BOTH"; @@ -48,11 +49,11 @@ export default function ScopeField({ getDMPs }: ScopeFieldArgs): Node { -

+ Select a scope to get the latest plans.
Select a plan and click "Import" to add it to the Gallery. -

+ ); From 7a73129916c48e71ccc737be4b933d025f0c402b Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 11:45:43 +0100 Subject: [PATCH 07/15] DataGrid --- src/main/webapp/ui/flow-typed/mui.js | 1 + .../eln-dmp-integration/DMPTool/DMPDialog.js | 112 +++++++++++++++++- src/main/webapp/ui/src/util/table.js | 1 + 3 files changed, 109 insertions(+), 5 deletions(-) diff --git a/src/main/webapp/ui/flow-typed/mui.js b/src/main/webapp/ui/flow-typed/mui.js index 82f0d4dfc..dc87f0b95 100644 --- a/src/main/webapp/ui/flow-typed/mui.js +++ b/src/main/webapp/ui/flow-typed/mui.js @@ -62,6 +62,7 @@ declare module "@mui/x-data-grid" { sortable?: boolean, headerClassName?: string, disableExport?: boolean, + display?: "text" | "flex", |}; declare export function DataGrid< diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index b6ae88da6..0a33b0739 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -14,7 +14,6 @@ import { Dialog, DialogBoundary } from "../../components/DialogBoundary"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import Grid from "@mui/material/Grid"; -import DMPTable from "./DMPTable"; import { withStyles } from "Styles"; import { makeStyles } from "tss-react/mui"; import { observer } from "mobx-react-lite"; @@ -42,6 +41,10 @@ import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; import HelpLinkIcon from "../../components/HelpLinkIcon"; import AccessibilityTips from "../../components/AccessibilityTips"; +import { DataGrid } from "@mui/x-data-grid"; +import { DataGridColumn } from "../../util/table"; +import Radio from "@mui/material/Radio"; +import DOMPurify from "dompurify"; const COLOR = { main: { @@ -113,6 +116,8 @@ export type Plan = { id: number, title: string, description: string, + modified: string, + created: string, }; const WarningBar = observer(() => { @@ -133,6 +138,7 @@ const WarningBar = observer(() => { function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { const { addAlert } = useContext(AlertContext); + const { isViewportSmall } = useViewportDimensions(); const [DMPs, setDMPs] = useState(([]: Array)); const [selectedPlan, setSelectedPlan]: UseState = useState(); @@ -278,10 +284,106 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { - ( + + ), + hideable: false, + width: 60, + flex: 0, + disableColumnMenu: true, + sortable: false, + }, + DataGridColumn.newColumnWithFieldName("title", { + headerName: "Title", + flex: 1, + sortable: false, + }), + DataGridColumn.newColumnWithFieldName("id", { + headerName: "Id", + flex: 1, + sortable: false, + }), + DataGridColumn.newColumnWithFieldName("description", { + renderCell: (params: { row: Plan, ... }) => { + const sanitized = DOMPurify.sanitize( + params.row.description + ); + return ( + 200 ? "..." : "" + }`, + }} + > + ); + }, + headerName: "Description", + display: "flex", + flex: 1, + sortable: false, + }), + DataGridColumn.newColumnWithValueGetter( + "created", + (params: { row: Plan, ... }) => + new Date(params.row.created).toLocaleString(), + { + headerName: "Created At", + flex: 1, + sortable: false, + } + ), + DataGridColumn.newColumnWithValueGetter( + "modified", + (params: { row: Plan, ... }) => + new Date(params.row.modified).toLocaleString(), + { + headerName: "Modified At", + flex: 1, + sortable: false, + } + ), + ]} + rows={fetching ? [] : DMPs} + initialState={{ + columns: { + columnVisibilityModel: { + id: !isViewportSmall, + description: false, + created: false, + modified: false, + }, + }, + }} + density="compact" + disableColumnFilter + hideFooter + slots={{ + pagination: null, + }} + localeText={{ + noRowsLabel: "No DMPs", + }} + loading={fetching} + getRowId={(row) => row.id} + onRowSelectionModelChange={( + newSelection: $ReadOnlyArray + ) => { + if (newSelection[0]) { + setSelectedPlan(DMPs.find((d) => d.id === newSelection[0])); + } + }} + getRowHeight={() => "auto"} /> {statusText() .map((sText) => ( diff --git a/src/main/webapp/ui/src/util/table.js b/src/main/webapp/ui/src/util/table.js index c7a09bb5f..0598f7a48 100644 --- a/src/main/webapp/ui/src/util/table.js +++ b/src/main/webapp/ui/src/util/table.js @@ -119,6 +119,7 @@ type ColumnProps = {| sortable?: boolean, headerClassName?: string, disableExport?: boolean, + display?: "text" | "flex", |}; const DataGridColumn = { From 49ecdb1b11e3c8dd3577522bac3a5527eb7f3718 Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 11:50:01 +0100 Subject: [PATCH 08/15] Remove custom styles --- .../src/eln-dmp-integration/DMPTool/DMPDialog.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 0a33b0739..345c5ed83 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -91,12 +91,7 @@ const CustomDialog = withStyles< }))(Dialog); const useStyles = makeStyles()((theme) => ({ - contentWrapper: { - overscrollBehavior: "contain", - WebkitOverflowScrolling: "unset", - }, fullWidth: { width: "100%" }, - sideSpaced: { marginRight: theme.spacing(1), marginLeft: theme.spacing(1) }, warningRow: { display: "flex", flexDirection: "row", @@ -107,9 +102,6 @@ const useStyles = makeStyles()((theme) => ({ }, warningMessage: { marginRight: "3vw" }, warningRed: { color: theme.palette.warningRed }, - dialogTitle: { - paddingBottom: theme.spacing(0.5), - }, })); export type Plan = { @@ -259,7 +251,7 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { - + void }): Node { - Date: Wed, 7 Aug 2024 11:52:45 +0100 Subject: [PATCH 09/15] Remove unused code --- .../eln-dmp-integration/DMPTool/DMPDialog.js | 38 ------------------- 1 file changed, 38 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 345c5ed83..a97263419 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -15,10 +15,7 @@ import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import Grid from "@mui/material/Grid"; import { withStyles } from "Styles"; -import { makeStyles } from "tss-react/mui"; import { observer } from "mobx-react-lite"; -import clsx from "clsx"; -import WarningIcon from "@mui/icons-material/Warning"; import Typography from "@mui/material/Typography"; import axios from "axios"; import { type UseState } from "../../util/types"; @@ -90,20 +87,6 @@ const CustomDialog = withStyles< }, }))(Dialog); -const useStyles = makeStyles()((theme) => ({ - fullWidth: { width: "100%" }, - warningRow: { - display: "flex", - flexDirection: "row", - justifyContent: "flex-end", - alignItems: "center", - fontSize: "13px", - marginTop: theme.spacing(0.5), - }, - warningMessage: { marginRight: "3vw" }, - warningRed: { color: theme.palette.warningRed }, -})); - export type Plan = { id: number, title: string, @@ -112,22 +95,6 @@ export type Plan = { created: string, }; -const WarningBar = observer(() => { - const { classes } = useStyles(); - return ( -
- - Warning text -
- ); -}); - function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { const { addAlert } = useContext(AlertContext); const { isViewportSmall } = useViewportDimensions(); @@ -224,10 +191,6 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { } }; - const { classes } = useStyles(); - - const showWarning = false; // intentionally left, may be used later - function statusText() { if (errorFetching) return Optional.present(errorFetching); if (fetching) return Optional.present("Fetching DMPs..."); @@ -393,7 +356,6 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { - {showWarning && } From 1242963e57e81f1944cab125621102322c8f81f8 Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 11:55:05 +0100 Subject: [PATCH 10/15] Fix pointless scrollbar --- src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index a97263419..6e001b35e 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -237,7 +237,7 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { more. - + Date: Wed, 7 Aug 2024 11:57:32 +0100 Subject: [PATCH 11/15] Remove needless status text --- .../eln-dmp-integration/DMPTool/DMPDialog.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 6e001b35e..d6128fd1e 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -191,13 +191,6 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { } }; - function statusText() { - if (errorFetching) return Optional.present(errorFetching); - if (fetching) return Optional.present("Fetching DMPs..."); - if (DMPs.length === 0) return Optional.present("No items to display"); - return Optional.empty(); - } - return ( <> @@ -340,19 +333,6 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { }} getRowHeight={() => "auto"} /> - {statusText() - .map((sText) => ( - - {sText} - - )) - .orElse(null)} From 58326818ee1784746932e98d84f6be2f0f3d650e Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 12:16:22 +0100 Subject: [PATCH 12/15] Scroll content of table --- src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js | 2 ++ .../webapp/ui/src/eln-dmp-integration/DMPTool/ScopeField.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index d6128fd1e..2aee5f7ac 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -232,6 +232,8 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { + + + Date: Wed, 7 Aug 2024 13:12:01 +0100 Subject: [PATCH 13/15] Fix tests --- .../eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js index 1f95be866..1a80d9031 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/__tests__/DMPDialog.test.js @@ -41,7 +41,7 @@ describe("DMPDialog", () => { ); await waitFor(() => { - expect(screen.getByText("No items to display")).toBeVisible(); + expect(screen.getByText("No DMPs")).toBeVisible(); }); }); @@ -89,7 +89,7 @@ describe("DMPDialog", () => { await sleep(2000); await waitFor(() => { - expect(screen.getByText("very mine")).toBeVisible(); + expect(screen.getByText("mine")).toBeVisible(); }); }); }); From 2ea1a8b2b7ca3f45b0346698dae14d610d284e69 Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 13:54:03 +0100 Subject: [PATCH 14/15] Keyboard selection for DMPTool and Argos --- src/main/webapp/ui/flow-typed/mui.js | 1 + .../webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js | 6 ++++++ .../webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js | 6 ++++++ 3 files changed, 13 insertions(+) diff --git a/src/main/webapp/ui/flow-typed/mui.js b/src/main/webapp/ui/flow-typed/mui.js index dc87f0b95..913c3b9ac 100644 --- a/src/main/webapp/ui/flow-typed/mui.js +++ b/src/main/webapp/ui/flow-typed/mui.js @@ -118,6 +118,7 @@ declare module "@mui/x-data-grid" { // https://github.com/mui/mui-x/blob/v7.12.0/packages/x-data-grid/src/constants/localeTextConstants.ts noRowsLabel?: string, |}, + onCellKeyDown?: (Row, KeyboardEvent) => void, |}): Node; declare export function GridToolbarContainer({| diff --git a/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js index 752e89795..65946bc80 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/Argos/DMPDialog.js @@ -639,6 +639,12 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { } }} getRowHeight={() => "auto"} + onCellKeyDown={({ id }, e) => { + if (e.key === " " || e.key === "Enter") { + setSelectedPlan(DMPs.find((d) => d.id === id)); + e.stopPropagation(); + } + }} /> diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 2aee5f7ac..252a0c65b 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -334,6 +334,12 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { } }} getRowHeight={() => "auto"} + onCellKeyDown={({ id }, e) => { + if (e.key === " " || e.key === "Enter") { + setSelectedPlan(DMPs.find((d) => d.id === id)); + e.stopPropagation(); + } + }} /> From e08a18c8751f5965685d4c6d7b666c5f3773a27b Mon Sep 17 00:00:00 2001 From: Robert Lamacraft Date: Wed, 7 Aug 2024 15:13:46 +0100 Subject: [PATCH 15/15] Don't auto-dismiss error alerts --- src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js index 252a0c65b..254c3edec 100644 --- a/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js +++ b/src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPDialog.js @@ -128,7 +128,6 @@ function DMPDialogContent({ setOpen }: { setOpen: (boolean) => void }): Node { title: "Fetch failed.", message: r.data.error?.errorMessages[0] ?? "Could not get DMPs", variant: "error", - isInfinite: false, }) ); }