RSDEV-427 Analytics events for the new gallery

src/main/webapp/ui/src/eln/gallery/__tests__/useGalleryActions.test.js

@@ -42,7 +42,6 @@ describe("useGalleryActions", () => {
                   version: 1,
                   size: 1024,
                   path: [],
-                  setPath: () => {},
                   thumbnailId: null,
                   gallerySection: "Images",
                   token: "",
@@ -131,7 +130,6 @@ describe("useGalleryActions", () => {
                   version: 1,
                   size: 1024,
                   path: [],
-                  setPath: () => {},
                   thumbnailId: null,
                   gallerySection: "Images",
                   token: "",
@@ -222,7 +220,6 @@ describe("useGalleryActions", () => {
                   version: 1,
                   size: 1024,
                   path: [],
-                  setPath: () => {},
                   thumbnailId: null,
                   gallerySection: "Images",
                   token: "",

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

@@ -56,6 +56,7 @@ import AlertContext, { mkAlert } from "../../../stores/contexts/Alert";
 import CardMedia from "@mui/material/CardMedia";
 import { useFolderOpen } from "./OpenFolderProvider";
 import { type URL } from "../../../util/types";
+import AnalyticsContext from "../../../stores/contexts/Analytics";
 
 /**
  * When tapped, the user is presented with their operating system's file
@@ -88,6 +89,7 @@ const UploadNewVersionMenuItem = ({
   folderId: FetchingData.Fetched<Id>,
 |}) => {
   const { uploadNewVersion } = useGalleryActions();
+  const { trackEvent } = React.useContext(AnalyticsContext);
   const selection = useGallerySelection();
   const newVersionInputRef = React.useRef<HTMLInputElement | null>(null);
 
@@ -175,7 +177,12 @@ const UploadNewVersionMenuItem = ({
                 .elseThrow();
 
               void uploadNewVersion(idOfFolderThatFileIsIn, file, newFile)
-                .then(onSuccess)
+                .then(() => {
+                  onSuccess();
+                  trackEvent("user:uploads_new_version:file:gallery", {
+                    version: file.version + 1,
+                  });
+                })
                 .catch(onError);
             }}
             type="file"
@@ -196,6 +203,7 @@ const RenameDialog = ({
   file: GalleryFile,
 |}) => {
   const [newName, setNewName] = React.useState("");
+  const { trackEvent } = React.useContext(AnalyticsContext);
   const { rename } = useGalleryActions();
   return (
     <Dialog
@@ -238,6 +246,7 @@ const RenameDialog = ({
             onClick={() => {
               void rename(file, newName).then(() => {
                 onClose();
+                trackEvent("user:renames:file:gallery");
               });
             }}
             validationResult={
@@ -282,6 +291,7 @@ function ActionsMenu({
   const selection = useGallerySelection();
   const theme = useTheme();
   const { addAlert } = React.useContext(AlertContext);
+  const { trackEvent } = React.useContext(AnalyticsContext);
   const canPreviewAsImage = useImagePreviewOfGalleryFile();
   const canEditWithCollabora = useCollaboraEdit();
   const canEditWithOfficeOnline = useOfficeOnlineEdit();
@@ -313,26 +323,27 @@ function ActionsMenu({
       .only.toResult(() => new Error("Too many items selected."))
       .flatMap<
         | {| key: "image", downloadHref: () => Promise<URL> |}
-        | {| key: "document", url: string |}
+        | {| key: "collabora", url: string |}
+        | {| key: "officeonline", url: string |}
       >((file) => {
         if (file.isImage && typeof file.downloadHref !== "undefined")
           return Result.Ok({ key: "image", downloadHref: file.downloadHref });
         return canEditWithCollabora(file)
-          .orElseTry(() => canEditWithOfficeOnline(file))
-          .map<
-            Result<
+          .map((url) => ({
+            key: "collabora",
+            url,
+          }))
+          .orElseTry(() =>
+            canEditWithOfficeOnline(file).map<
               | {| key: "image", downloadHref: () => Promise<URL> |}
-              | {| key: "document", url: string |}
-            >
-          >((url) =>
-            Result.Ok({
-              key: "document",
+              | {| key: "collabora", url: string |}
+              | {| key: "officeonline", url: string |}
+            >((url) => ({
+              key: "officeonline",
               url,
-            })
+            }))
           )
-          .orElseGet(() =>
-            Result.Error<_>([new Error("Cannot edit this item.")])
-          );
+          .mapError(() => new Error("Cannot edit this item."));
       })
   );
 
@@ -527,7 +538,14 @@ function ActionsMenu({
           onClick={() => {
             editingAllowed.get().do(
               doNotAwait(async (action) => {
-                if (action.key === "document") window.open(action.url);
+                if (action.key === "officeonline") {
+                  window.open(action.url);
+                  trackEvent("user:opens:document:officeonline");
+                }
+                if (action.key === "collabora") {
+                  window.open(action.url);
+                  trackEvent("user:opens:document:collabora");
+                }
                 if (action.key === "image") {
                   try {
                     const downloadHref = await action.downloadHref();
@@ -565,6 +583,7 @@ function ActionsMenu({
             void duplicateFiles(selection.asSet()).then(() => {
               void refreshListing();
               setActionsMenuAnchorEl(null);
+              trackEvent("user:duplicates:file:gallery");
             });
           }}
           compact
@@ -648,6 +667,7 @@ function ActionsMenu({
           onClick={() => {
             void download(selection.asSet()).then(() => {
               setActionsMenuAnchorEl(null);
+              trackEvent("user:downloads:file:gallery");
             });
           }}
           compact
@@ -664,6 +684,9 @@ function ActionsMenu({
           avatar={<FileDownloadIcon />}
           onClick={() => {
             setExportOpen(true);
+            trackEvent("user:opens:export_dialog:gallery", {
+              count: selection.size,
+            });
           }}
           compact
           disabled={exportAllowed.get().isError}
@@ -770,6 +793,7 @@ function ActionsMenu({
               .elseThrow();
             await uploadFiles(idOfFolderThatFileIsIn, [newFile]);
             void refreshListing();
+            trackEvent("user:edit:image:gallery");
           } catch (e) {
             addAlert(
               mkAlert({

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

@@ -12,6 +12,8 @@ import AccessibilityTips from "../../../components/AccessibilityTips";
 import HelpDocs from "../../../components/Help/HelpDocs";
 import HelpIcon from "@mui/icons-material/Help";
 import { observer } from "mobx-react-lite";
+import AnalyticsContext from "../../../stores/contexts/Analytics";
+import useViewportDimensions from "../../../util/useViewportDimensions";
 
 type GalleryAppBarArgs = {|
   setDrawerOpen: (boolean) => void,
@@ -24,6 +26,8 @@ function GalleryAppBar({
   drawerOpen,
   sidebarId,
 }: GalleryAppBarArgs): Node {
+  const { trackEvent } = React.useContext(AnalyticsContext);
+  const { isViewportSmall } = useViewportDimensions();
   return (
     <AppBar position="relative" open={true} aria-label="page header">
       <Toolbar variant="dense">
@@ -33,6 +37,10 @@ function GalleryAppBar({
           aria-expanded={drawerOpen ? "true" : "false"}
           onClick={() => {
             setDrawerOpen(!drawerOpen);
+            if (!isViewportSmall)
+              trackEvent(`user:toggle:sidebar:gallery`, {
+                open: !drawerOpen,
+              });
           }}
         >
           <MenuIcon />

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

@@ -33,6 +33,7 @@ import { usePdfPreview } from "./CallablePdfPreview";
 import { useAsposePreview } from "./CallableAsposePreview";
 import { Optional } from "../../../util/optional";
 import { useFolderOpen } from "./OpenFolderProvider";
+import AnalyticsContext from "../../../stores/contexts/Analytics";
 
 /**
  * The height, in pixels, of the region that responds to touch/pointer events
@@ -179,14 +180,17 @@ const Puller: ComponentType<{|
 const NameFieldForLargeViewports = styled(
   observer(
     ({ file, className }: {| file: GalleryFile, className: string |}) => {
+      const { trackEvent } = React.useContext(AnalyticsContext);
       const { rename } = useGalleryActions();
       const [name, setName] = React.useState(file.name);
       const textField = React.useRef(null);
 
       function handleSubmit() {
-        void rename(file, name);
-        textField.current?.blur();
-        setName(file.transformFilename(() => name));
+        void rename(file, name).then(() => {
+          textField.current?.blur();
+          setName(file.transformFilename(() => name));
+          trackEvent("user:renames:file:gallery");
+        });
       }
 
       return (
@@ -678,6 +682,7 @@ export const InfoPanelForLargeViewports: ComponentType<{||}> = () => {
   const { openPdfPreview } = usePdfPreview();
   const primaryAction = usePrimaryAction();
   const { openFolder } = useFolderOpen();
+  const { trackEvent } = React.useContext(AnalyticsContext);
 
   return (
     <>
@@ -771,6 +776,7 @@ export const InfoPanelForLargeViewports: ComponentType<{||}> = () => {
                       <ActionButton
                         onClick={() => {
                           window.open(action.url);
+                          trackEvent("user:opens:document:collabora");
                         }}
                         label="Edit"
                         sx={{
@@ -787,6 +793,7 @@ export const InfoPanelForLargeViewports: ComponentType<{||}> = () => {
                       <ActionButton
                         onClick={() => {
                           window.open(action.url);
+                          trackEvent("user:opens:document:officeonline");
                         }}
                         label="Edit"
                         sx={{
@@ -880,6 +887,7 @@ export const InfoPanelForSmallViewports: ComponentType<{|
   const selection = useGallerySelection();
   const mobileInfoPanelId = React.useId();
   const { openFolder } = useFolderOpen();
+  const { trackEvent } = React.useContext(AnalyticsContext);
 
   return (
     <CustomSwipeableDrawer
@@ -900,6 +908,7 @@ export const InfoPanelForSmallViewports: ComponentType<{|
       }}
       onOpen={() => {
         setMobileInfoPanelOpen(true);
+        trackEvent("user:opens:mobileInfoPanel:gallery");
       }}
       swipeAreaWidth={CLOSED_MOBILE_INFO_PANEL_HEIGHT}
       disableSwipeToOpen={false}

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

@@ -8,6 +8,7 @@ import useLinkedDocuments, { type Document } from "../useLinkedDocuments";
 import { DataGrid, useGridApiRef } from "@mui/x-data-grid";
 import { DataGridColumn } from "../../../util/table";
 import GlobalId from "../../../components/GlobalId";
+import AnalyticsContext from "../../../stores/contexts/Analytics";
 
 /**
  * This table lists all of the ELN documents that reference the passed
@@ -25,6 +26,7 @@ export const LinkedDocumentsPanel: ComponentType<{| file: GalleryFile |}> = ({
 }): Node => {
   const apiRef = useGridApiRef();
   const linkedDocuments = useLinkedDocuments(file);
+  const { trackEvent } = React.useContext(AnalyticsContext);
 
   React.useEffect(() => {
     setTimeout(() => {
@@ -60,7 +62,14 @@ export const LinkedDocumentsPanel: ComponentType<{| file: GalleryFile |}> = ({
             flex: 0,
             resizable: true,
             sortable: false,
-            renderCell: ({ row }) => <GlobalId record={row.linkableRecord} />,
+            renderCell: ({ row }) => (
+              <GlobalId
+                record={row.linkableRecord}
+                onClick={() => {
+                  trackEvent("user:click:globalId:galleryLinkedDocuments");
+                }}
+              />
+            ),
           }),
         ]}
         rows={linkedDocuments.documents}