RSDEV-120 Migrate DMPTool dialog to accented theme (#79)

This means the DMPTool dialog for importing DMPs into the Gallery has
consistent styling with the new Gallery, utilising an accented theme to
mimic the DMPTool branding. Moreover, it supports the high contrast mode
that comes with the theme. The dialog also now uses MUI's DataGrid,
allowing the user to choose additional columns of data. This change
applies to both the existing and new gallery.

This change also includes keyboard controls for selecting a row of the
table in the Argos dialog as that was not included in its recent change.

Author: rlamacraft

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<
@@ -117,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({|

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();
+                }
+              }}
             />
           </Grid>
         </Grid>