RSDEV-277 Improve breadcrumbs on new Gallery page (#61)

This change alters how the breadcrumbs and other buttons and menus at
the top of the new gallery page are rendered.

The breadcrumbs, a series of links allowing the users to navigate back
up the folder hierarchy, is now rendered within a horizontally scrolling
box. When tapped, it transforms into a read-only text field that allows
users to select and copy the path, which would not otherwise be
possible. Keyboard controls are fully supported, with a roving tab index
employed for moving the focus between the links and tab correctly
triggering the read-only text field. Being able to drag-and-drop onto
the breadcrumbs is retained, with the animated added whilst dragging to
make it clear which UI elements are dropzones. 

The remaining buttons and menus -- actions, sorting, and views -- have
been re-arranged to be consistent with the other newly designed pages
(e.g. sysadmin users page) where the primary action in placed in the top
left whilst the other buttons and menus are placed in the top right
corner. Also similar to the sysadmin users page, a label describing what
is selected is also added by this change.

Finally, react-router is used to synchronise the URL search parameter of
`mediaType` with the selected gallery section. This means that the new
gallery remains backwards compatible with links to the various gallery
sections of the old gallery and when `/newGallery` becomes `/gallery`
all those existing links will continue to work. I attempted to extended
this further by capturing the entire breadcrumb in the URL so that users
could use the browser back and forwards buttons to navigate around in
addition to the breadcrumb links but this would require some backend
changes as the current API endpoints require a folder id to get the
listing of a folder's contents; the folder's path is not sufficient
given that two folders distinct may have the same name, and thus same
path.

Author: rlamacraft

src/main/webapp/WEB-INF/decorators.xml

@@ -29,6 +29,8 @@
         <pattern>*/public/inventory/**</pattern>
         <pattern>/apps</pattern>
         <pattern>/newGallery</pattern>
+        <pattern>/newGallery*</pattern>
+        <pattern>/newGallery/**</pattern>
     </excludes>
     <decorator name="public" page="externalPages.jsp">
         <pattern>*/signup*</pattern>

src/main/webapp/WEB-INF/urlrewrite.xml

@@ -140,6 +140,10 @@
       <from>/newGallery</from>
       <to>/eln/gallery.html</to>
     </rule>
+    <rule>
+      <from>/newGallery/**</from>
+      <to>/eln/gallery.html</to>
+    </rule>
 
     <!-- Backward compatibility: nextcloud/owncloud were not using /apps prefix until RSDEV-105 -->
     <rule>

src/main/webapp/ui/flow-typed/mui.js

@@ -24,6 +24,14 @@ declare module "@mui/system" {
    */
   declare export function darken(color: string, coefficient: number): string;
 
+  /**
+   * Lightens a color.
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+   * @param {number} coefficient - multiplier in the range 0 - 1
+   * @returns {string} A CSS color string. Hex input values are returned as rgb
+   */
+  declare export function lighten(color: string, coefficient: number): string;
+
   /**
    * Applies a transparency to a color.
    * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()

src/main/webapp/ui/src/accentedTheme.js

@@ -3,7 +3,7 @@
 import { createTheme } from "@mui/material";
 import baseTheme from "./theme";
 import { mergeThemes } from "./util/styles";
-import { darken, alpha } from "@mui/system";
+import { darken, alpha, lighten } from "@mui/system";
 import { toolbarClasses } from "@mui/material/Toolbar";
 import { typographyClasses } from "@mui/material/Typography";
 import { svgIconClasses } from "@mui/material/SvgIcon";
@@ -94,11 +94,17 @@ export default function createAccentedTheme(accent: AccentColor): { ... } {
   const mainAccentColor = prefersMoreContrast
     ? "rgb(0,0,0)"
     : `hsl(${accent.main.hue}deg, ${accent.main.saturation}%, ${accent.main.lightness}%)`;
-  const disabledColor = `hsl(${accent.main.hue}deg, 10%, 86%)`;
+  const disabledColor = lighten(
+    `hsl(${accent.main.hue}deg, 10%, ${accent.main.lightness}%)`,
+    0.5
+  );
 
   const linkButtonText = prefersMoreContrast
     ? "rgb(0,0,0)"
-    : `hsl(${accent.main.hue}deg, ${accent.main.saturation}%, 40%)`;
+    : darken(
+        `hsl(${accent.main.hue}deg, ${accent.main.saturation}%, ${accent.main.lightness}%)`,
+        0.5
+      );
 
   /**
    * A background colour that can be used behind headers, toolbars, and other
@@ -211,14 +217,18 @@ export default function createAccentedTheme(accent: AccentColor): { ... } {
                   [`&:has(.${inputAdornmentClasses.positionStart})`]: {
                     paddingLeft: 0,
                   },
-                  [`& .${svgIconClasses.root}`]: {
-                    fill: prefersMoreContrast
-                      ? "rgb(0,0,0)"
-                      : contrastTextColor,
+                  [`& .${inputAdornmentClasses.root}`]: {
+                    paddingLeft: baseTheme.spacing(1),
+                    paddingRight: baseTheme.spacing(1),
+                    [`& .${svgIconClasses.root}`]: {
+                      fill: prefersMoreContrast
+                        ? "rgb(0,0,0)"
+                        : contrastTextColor,
+                    },
                   },
                   "& input": {
                     padding: baseTheme.spacing(0.5),
-                    paddingLeft: 0,
+                    paddingLeft: baseTheme.spacing(1),
                     color: prefersMoreContrast
                       ? "rgb(0,0,0)"
                       : contrastTextColor,
@@ -452,19 +462,20 @@ export default function createAccentedTheme(accent: AccentColor): { ... } {
                 [`& .${outlinedInputClasses.input}`]: {
                   paddingTop: "5px",
                   paddingBottom: "5px",
+                  paddingLeft: baseTheme.spacing(1.5),
                 },
               },
               [`& .${inputAdornmentClasses.root}`]: {
                 height: "100%",
-                paddingLeft: baseTheme.spacing(1),
-                paddingRight: baseTheme.spacing(1),
+                paddingLeft: baseTheme.spacing(1.5),
+                paddingRight: baseTheme.spacing(1.5),
                 borderRight: accentedBorder,
-                backgroundColor: lighterInteractiveColor,
+                marginRight: 0,
                 [`& .${typographyClasses.root}`]: {
                   textTransform: "uppercase",
                   fontWeight: 700,
-                  fontSize: "0.9rem",
-                  lineHeight: "31px",
+                  fontSize: "0.8125rem",
+                  lineHeight: "20px",
                 },
               },
             },

src/main/webapp/ui/src/components/useVerticalRovingTabIndex.js src/main/webapp/ui/src/components/useOneDimensionalRovingTabIndex.js

@@ -12,10 +12,11 @@ import { modulo } from "../util/Util";
  * than tabbing through them all.
  *
  * This custom hook provides an abstraction over implementing a roving tab
- * index for a vertical list of elements, so that the up and down arrow keys
- * provide navigation between the elements in the list. Tab and shift-tab move
- * the user's focus out of the list, and when they return the focus resumes on
- * the last element in the list that had focus.
+ * index for a one-dimensional list of elements, so that either the up and down
+ * arrow keys provide navigation between the elements in the list, or the left
+ * and right arrow keys dow. Tab and shift-tab move the user's focus out of the
+ * list, and when they return the focus resumes on the last element in the list
+ * that had focus.
  *
  * There are two parts to how this custom hook is to be used:
  *
@@ -31,14 +32,22 @@ import { modulo } from "../util/Util";
  *  - https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/
  *  - https://www.youtube.com/watch?v=uCIC2LNt0bk
  */
-export default function useVerticalRovingTabIndex<RefComponent: HTMLElement>({
+export default function useOneDimensionalRovingTabIndex<
+  RefComponent: HTMLElement
+>({
   max,
+  direction = "column",
 }: {|
   /**
    * The index of the last element of the vertical list, where the indexing is
    * 0-based.
    */
   max: number,
+
+  /**
+   * The dimension in which the elements of the list are laid out. Defaults to "column"
+   */
+  direction?: "row" | "column",
 |}): {|
   /**
    * The set of the event handlers that must be attached to the container
@@ -92,9 +101,13 @@ export default function useVerticalRovingTabIndex<RefComponent: HTMLElement>({
      * By using modulo rather than min and max the user's focus wraps around
      * when reaching the end.
      */
-    if (e.key === "ArrowUp") {
+    if (e.key === "ArrowUp" && direction === "column") {
+      setRovingTabIndex(modulo(rovingTabIndex - 1, max + 1));
+    } else if (e.key === "ArrowDown" && direction === "column") {
+      setRovingTabIndex(modulo(rovingTabIndex + 1, max + 1));
+    } else if (e.key === "ArrowLeft" && direction === "row") {
       setRovingTabIndex(modulo(rovingTabIndex - 1, max + 1));
-    } else if (e.key === "ArrowDown") {
+    } else if (e.key === "ArrowRight" && direction === "row") {
       setRovingTabIndex(modulo(rovingTabIndex + 1, max + 1));
     }
   }

src/main/webapp/ui/src/eln/gallery/common.js

@@ -1,8 +1,10 @@
 //@flow
 
 import { COLORS as baseThemeColors } from "../../theme";
+import Result from "../../util/result";
+import * as Parsers from "../../util/parsers";
 
-export type GallerySection = 
+export type GallerySection =
   | "Images"
   | "Audios"
   | "Videos"
@@ -12,7 +14,41 @@ export type GallerySection =
   | "NetworkFiles"
   | "Snippets"
   | "Miscellaneous"
-  | "PdfDocuments"
+  | "PdfDocuments";
+
+export const GALLERY_SECTION = {
+  IMAGES: "Images",
+  AUDIOS: "Audios",
+  VIDEOS: "Videos",
+  DOCUMENTS: "Documents",
+  CHEMISTRY: "Chemistry",
+  DMPS: "DMPs",
+  NETWORKFILES: "NetworkFiles",
+  SNIPPETS: "Snippets",
+  MISCELLANEOUS: "Miscellaneous",
+  PDFDOCUMENTS: "PdfDocuments",
+};
+
+export const parseGallerySectionFromUrlSearchParams = (
+  searchParams: URLSearchParams
+): Result<GallerySection> =>
+  Result.fromNullable(
+    searchParams.get("mediaType"),
+    new Error("No search parameter with name 'mediaType'")
+  ).flatMap((mediaType) =>
+    Result.first(
+      Parsers.parseString(GALLERY_SECTION.IMAGES, mediaType),
+      Parsers.parseString(GALLERY_SECTION.AUDIOS, mediaType),
+      Parsers.parseString(GALLERY_SECTION.VIDEOS, mediaType),
+      Parsers.parseString(GALLERY_SECTION.DOCUMENTS, mediaType),
+      Parsers.parseString(GALLERY_SECTION.CHEMISTRY, mediaType),
+      Parsers.parseString(GALLERY_SECTION.DMPS, mediaType),
+      Parsers.parseString(GALLERY_SECTION.NETWORKFILES, mediaType),
+      Parsers.parseString(GALLERY_SECTION.SNIPPETS, mediaType),
+      Parsers.parseString(GALLERY_SECTION.MISCELLANEOUS, mediaType),
+      Parsers.parseString(GALLERY_SECTION.PDFDOCUMENTS, mediaType)
+    )
+  );
 
 export const gallerySectionLabel = {
   Images: "Images",

src/main/webapp/ui/src/eln/gallery/components/ActionsMenu.js

@@ -30,6 +30,7 @@ import Result from "../../../util/result";
 import MoveToIrods, { COLOR as IRODS_COLOR } from "./MoveToIrods";
 import IrodsLogo from "./IrodsLogo.svg";
 import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
 import MoveDialog from "./MoveDialog";
 
 const RenameDialog = ({
@@ -209,8 +210,10 @@ function ActionsMenu({ refreshListing, section }: ActionsMenuArgs): Node {
   return (
     <>
       <Button
-        variant="outlined"
+        variant="contained"
+        color="primary"
         size="small"
+        disabled={selection.isEmpty}
         aria-haspopup="menu"
         startIcon={<ChecklistIcon />}
         onClick={(e) => {
@@ -417,6 +420,22 @@ function ActionsMenu({ refreshListing, section }: ActionsMenuArgs): Node {
           disabled={deleteAllowed().isError}
         />
       </StyledMenu>
+      <Typography
+        variant="body2"
+        sx={{
+          p: 0,
+          pl: 1,
+          fontWeight: 500,
+          display: { xs: "none", sm: "initial" },
+          ...(selection.isEmpty
+            ? {
+                color: "grey",
+              }
+            : {}),
+        }}
+      >
+        {selection.label}
+      </Typography>
     </>
   );
 }