Merge branch 'release-145' into gig/5726-geolocation-input

graphql.schema.json

@@ -10485,6 +10485,12 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "file",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "float",
             "description": null,
@@ -10624,6 +10630,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "valueFile",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "OBJECT",
+              "name": "File",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "valueFloat",
             "description": null,
@@ -13340,22 +13358,6 @@
         "description": "Represents direct upload credentials",
         "isOneOf": null,
         "fields": [
-          {
-            "name": "blobId",
-            "description": "Created blob record ID",
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "ID",
-                "ofType": null
-              }
-            },
-            "isDeprecated": true,
-            "deprecationReason": "Deprecated in favor of signed_blob_id"
-          },
           {
             "name": "filename",
             "description": null,
@@ -20658,18 +20660,6 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
-          {
-            "name": "fileBlobId",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "SCALAR",
-              "name": "ID",
-              "ofType": null
-            },
-            "isDeprecated": true,
-            "deprecationReason": "Removing unused blob ID"
-          },
           {
             "name": "id",
             "description": null,
@@ -21235,6 +21225,22 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "supportsSaveInProgress",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "system",
             "description": null,

src/api/operations/customDataElement.fragments.graphql

@@ -7,6 +7,9 @@ fragment CustomDataElementValueFields on CustomDataElementValue {
   valueJson
   valueString
   valueText
+  valueFile {
+    ...FileFields
+  }
   user {
     ...UserFields
   }

src/api/operations/form.fragments.graphql

@@ -133,6 +133,7 @@ fragment FormDefinitionMetadata on FormDefinition {
     name
   }
   dateUpdated
+  supportsSaveInProgress
 }
 
 # FormDefinition to use for rendering a dynamic form

src/components/elements/CommonMenuButton.tsx

@@ -14,31 +14,30 @@ import { To } from 'react-router-dom';
 import RouterLink from './RouterLink';
 import { MoreMenuIcon } from './SemanticIcons';
 
-export type NavMenuItem = {
+export type CommonMenuItem = {
   key: string;
   to?: To;
   onClick?: VoidFunction;
   title?: ReactNode;
   divider?: boolean;
   disabled?: boolean;
+  ariaLabel?: string;
 };
 
 interface Props {
   title: ReactNode;
-  items: NavMenuItem[];
-  variant?: ButtonProps['variant'];
-  disabled?: ButtonProps['disabled'];
+  items: CommonMenuItem[];
   iconButton?: boolean; // use an icon button instead of a text button
-  sx?: ButtonProps['sx'];
   MenuProps?: Omit<MenuProps, 'open'>;
+  ButtonProps?: ButtonProps;
 }
 
 const CommonMenuButton = ({
   title,
   items,
   iconButton,
   MenuProps,
-  ...buttonProps
+  ButtonProps,
 }: Props) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -62,7 +61,7 @@ const CommonMenuButton = ({
           aria-haspopup='true'
           aria-expanded={open ? 'true' : undefined}
           onClick={handleClick}
-          {...buttonProps}
+          {...ButtonProps}
         >
           <MoreMenuIcon fontSize='inherit' />
         </IconButton>
@@ -74,7 +73,7 @@ const CommonMenuButton = ({
           aria-expanded={open ? 'true' : undefined}
           onClick={handleClick}
           endIcon={<ArrowDropDownIcon />}
-          {...buttonProps}
+          {...ButtonProps}
         >
           {title}
         </Button>
@@ -98,28 +97,35 @@ const CommonMenuButton = ({
         }}
         {...MenuProps}
       >
-        {items.map(({ key, to, title, divider, onClick, disabled }) =>
-          divider ? (
-            <Divider key={key} />
-          ) : to ? (
-            <MenuItem key={key} component={RouterLink} to={to}>
-              {title}
-            </MenuItem>
-          ) : (
-            <MenuItem
-              key={key}
-              onClick={() => {
-                if (onClick) {
-                  // close menu before triggering onClick
-                  setAnchorEl(null);
-                  onClick();
-                }
-              }}
-              disabled={disabled}
-            >
-              {title}
-            </MenuItem>
-          )
+        {items.map(
+          ({ key, to, title, divider, onClick, disabled, ariaLabel }) =>
+            divider ? (
+              <Divider key={key} />
+            ) : to ? (
+              <MenuItem
+                key={key}
+                component={RouterLink}
+                to={to}
+                aria-label={ariaLabel}
+              >
+                {title}
+              </MenuItem>
+            ) : (
+              <MenuItem
+                key={key}
+                onClick={() => {
+                  if (onClick) {
+                    // close menu before triggering onClick
+                    setAnchorEl(null);
+                    onClick();
+                  }
+                }}
+                disabled={disabled}
+                aria-label={ariaLabel}
+              >
+                {title}
+              </MenuItem>
+            )
         )}
       </Menu>
     </>

src/components/elements/input/ClientImageUploadDialog.tsx

@@ -15,7 +15,7 @@ import React, { useCallback, useState } from 'react';
 
 import CommonDialog from '../CommonDialog';
 import LoadingButton from '../LoadingButton';
-import Uploader from '../upload/UploaderBase';
+import Uploader from '../upload/Uploader';
 
 import ClientCardImageElement from '@/modules/client/components/ClientCardImageElement';
 import ApolloErrorAlert from '@/modules/errors/components/ApolloErrorAlert';
@@ -27,6 +27,7 @@ import {
   partitionValidations,
 } from '@/modules/errors/util';
 import {
+  DirectUpload,
   useDeleteClientImageMutation,
   useGetClientImageQuery,
   useUpdateClientImageMutation,
@@ -163,14 +164,10 @@ const ClientImageUploadDialog: React.FC<ClientImageUploadDialogProps> = ({
               <Grid item xs={12}>
                 <Uploader
                   id='clientImageUploader'
-                  onUpload={(upload, file) => {
-                    setNewBlobId(upload.signedBlobId);
-                    setNewPhotoSrc(URL.createObjectURL(file));
-                    setErrors(emptyErrorState);
-                  }}
-                  onClear={() => {
-                    setNewBlobId(undefined);
-                    setNewPhotoSrc(undefined);
+                  multiple={false}
+                  onUpload={(upload?: DirectUpload, file?: File) => {
+                    setNewBlobId(upload ? upload.signedBlobId : upload);
+                    setNewPhotoSrc(file ? URL.createObjectURL(file) : file);
                     setErrors(emptyErrorState);
                   }}
                 />

src/components/elements/upload/FileThumbnailIcon.tsx

@@ -0,0 +1,23 @@
+import { alpha, Box, SvgIconProps } from '@mui/material';
+import React from 'react';
+
+const FileThumbnailIcon: React.FC<{
+  IconComponent: React.ComponentType<SvgIconProps>;
+}> = ({ IconComponent }) => (
+  <Box
+    sx={{
+      backgroundColor: (theme) => alpha(theme.palette.primary.light, 0.12),
+      lineHeight: 0,
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      p: 1,
+      borderRadius: 100,
+      mb: 0.5,
+    }}
+  >
+    <IconComponent color='primary' />
+  </Box>
+);
+
+export default FileThumbnailIcon;

src/components/elements/upload/Uploader.stories.tsx

@@ -3,7 +3,7 @@ import { Box } from '@mui/system';
 import { Meta, StoryObj } from '@storybook/react';
 
 import MOCK_IMAGE from './MOCK_IMAGE';
-import Uploader from './UploaderBase';
+import Uploader from './Uploader';
 
 import { createDirectUploadMock, getFileMock } from '@/test/__mocks__/requests';
 
@@ -18,7 +18,7 @@ export default {
     <>
       <Uploader
         {...args}
-        onUpload={async (upload, file) => {
+        onUpload={(upload, file) => {
           const targetElem = document.getElementById('result');
           if (targetElem)
             targetElem.innerHTML = JSON.stringify({ upload, file }, null, 2);