Progress Report Media

src/api/schema/typePolicies/lists/page-limit-pagination.ts

@@ -14,6 +14,7 @@ import {
   ValueIteratee,
 } from 'lodash';
 import { isListNotEmpty, Nullable, splice, unwrapSecured } from '~/common';
+import { VariantFragment } from '../../../../common/fragments';
 import {
   InputArg,
   PaginatedListInput,
@@ -126,6 +127,22 @@ const mergeList = (
   const readSecuredField = (field: string) => (ref: Reference) => {
     const secured = readField(field, ref);
     const fieldVal = unwrapSecured(secured);
+
+    // Hack to handle sorting with variants,
+    // whose sort keys do not match a field name that's a primitive.
+    // This logic needs to be exposed to pageLimitPagination
+    // Something like pageLimitPagination({
+    //   getSortValue: {
+    //    variant: (variant) => variant.key,
+    if (
+      fieldVal &&
+      typeof fieldVal === 'object' &&
+      '__typename' in fieldVal &&
+      fieldVal.__typename === 'Variant'
+    ) {
+      return (fieldVal as VariantFragment).key;
+    }
+
     return fieldVal;
   };
 

src/components/form/Dropzone.tsx

@@ -1,5 +1,6 @@
 import { Clear as ClearIcon } from '@mui/icons-material';
 import {
+  Box,
   IconButton,
   List,
   ListItem,
@@ -12,20 +13,17 @@ import { ReactNode } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { makeStyles } from 'tss-react/mui';
 import { Except } from 'type-fest';
+import { extendSx, StyleProps } from '~/common';
 import { fileIcon } from '../files/fileTypes';
 import { FieldConfig, useField } from './useField';
 
-const useStyles = makeStyles()(({ palette, spacing }) => {
+const useStyles = makeStyles()(({ palette, spacing, shape }) => {
   const dropzoneHoverStyle = {
-    backgroundColor: palette.grey[200],
     borderColor: palette.primary.main,
   };
   return {
-    root: {
-      marginBottom: spacing(2),
-    },
     dropzone: {
-      backgroundColor: palette.grey[300],
+      borderRadius: shape.borderRadius,
       border: `2px dashed ${palette.divider}`,
       cursor: 'pointer',
       padding: spacing(3),
@@ -42,17 +40,20 @@ const useStyles = makeStyles()(({ palette, spacing }) => {
   };
 });
 
-export type DropzoneFieldProps = Except<FieldConfig<File, true>, 'multiple'> & {
-  label?: ReactNode;
-  multiple?: boolean;
-  className?: string;
-};
+export type DropzoneFieldProps = Except<FieldConfig<File, true>, 'multiple'> &
+  StyleProps & {
+    label?: ReactNode;
+    multiple?: boolean;
+    disableFileList?: boolean;
+  };
 
 export function DropzoneField({
   multiple = false,
   label = 'Click or drag files here',
   name: nameProp,
   className,
+  sx,
+  disableFileList,
 }: DropzoneFieldProps) {
   const { classes, cx } = useStyles();
 
@@ -91,7 +92,7 @@ export function DropzoneField({
   });
 
   return (
-    <div className={cx(classes.root, className)}>
+    <Box sx={[{ mb: 2 }, ...extendSx(sx)]} className={className}>
       <div
         className={cx(classes.dropzone, {
           [classes.active]: isDragActive,
@@ -103,7 +104,7 @@ export function DropzoneField({
           {label}
         </Typography>
       </div>
-      {currentFiles.length > 0 && (
+      {!disableFileList && currentFiles.length > 0 && (
         <List dense className={classes.files}>
           {currentFiles.map((file, index) => {
             const { name, type } = file;
@@ -129,6 +130,6 @@ export function DropzoneField({
           })}
         </List>
       )}
-    </div>
+    </Box>
   );
 }

src/components/form/SelectField.tsx

@@ -96,7 +96,9 @@ export function SelectField<T, Multiple extends boolean | undefined>({
           </MenuItem>
         ))}
       </Select>
-      <FormHelperText>{getHelperText(meta, helperText)}</FormHelperText>
+      {helperText !== false && (
+        <FormHelperText>{getHelperText(meta, helperText)}</FormHelperText>
+      )}
     </FormControl>
   );
 }

src/components/form/SubmitButton.tsx

@@ -35,55 +35,7 @@ export const SubmitButton = forwardRef<HTMLButtonElement, SubmitButtonProps>(
     { children, spinner = true, action, disabled, ...rest },
     ref
   ) {
-    const form = useForm('SubmitButton');
-    const {
-      hasValidationErrors,
-      submitting,
-      touched,
-      validating,
-      submitErrors,
-      dirtyFieldsSinceLastSubmit,
-      values,
-    } = useFormState({
-      subscription: {
-        submitErrors: true,
-        dirtyFieldsSinceLastSubmit: true,
-        hasValidationErrors: true,
-        submitting: true,
-        touched: true,
-        validating: true,
-        values: true,
-      },
-    });
-    // Ignore FORM_ERROR since it doesn't count as it doesn't go to a field.
-    // We'll assume that the form _can_ be re-submitted with these errors.
-    // It could be a server error, connection error, etc.
-    const fieldSubmitErrors = useMemo(
-      () => omit(submitErrors ?? {}, FORM_ERROR),
-      [submitErrors]
-    );
-
-    const allFieldsTouched = touched
-      ? Object.values(touched).every((field) => field)
-      : false;
-
-    const allFieldsWithSubmitErrorsAreDirty = useMemo(() => {
-      if (!submitErrors || Object.keys(fieldSubmitErrors).length === 0) {
-        return true;
-      }
-      const unchangedSubmitErrors = Object.keys(
-        dirtyFieldsSinceLastSubmit
-      ).reduce(
-        (remaining: Partial<typeof fieldSubmitErrors> | undefined, field) => {
-          return remaining ? setIn(remaining, field, undefined) : undefined;
-        },
-        cloneDeep(fieldSubmitErrors)
-      );
-      return (
-        !unchangedSubmitErrors ||
-        Object.keys(unchangedSubmitErrors).length === 0
-      );
-    }, [submitErrors, fieldSubmitErrors, dirtyFieldsSinceLastSubmit]);
+    const sb = useSubmitButton({ action });
 
     return (
       <ProgressButton
@@ -98,25 +50,84 @@ export const SubmitButton = forwardRef<HTMLButtonElement, SubmitButtonProps>(
             return;
           }
           e.preventDefault();
-          form.change('submitAction', action);
-
-          void form.submit();
+          sb.submit();
         }}
         type="submit"
-        disabled={
-          disabled ||
-          submitting ||
-          validating ||
-          (allFieldsTouched && hasValidationErrors) ||
-          // disable if there are submit/server errors for specific fields
-          // and they have not been changed since last submit
-          !allFieldsWithSubmitErrorsAreDirty
-        }
-        progress={spinner && submitting && values.submitAction === action}
+        disabled={disabled || sb.disabled}
+        progress={spinner && sb.submitting}
         ref={ref}
       >
         {Children.count(children) ? children : 'Submit'}
       </ProgressButton>
     );
   }
 );
+
+export const useSubmitButton = ({ action }: { action?: string }) => {
+  const form = useForm('SubmitButton');
+  const {
+    hasValidationErrors,
+    submitting,
+    touched,
+    validating,
+    submitErrors,
+    dirtyFieldsSinceLastSubmit,
+    values,
+  } = useFormState({
+    subscription: {
+      submitErrors: true,
+      dirtyFieldsSinceLastSubmit: true,
+      hasValidationErrors: true,
+      submitting: true,
+      touched: true,
+      validating: true,
+      values: true,
+    },
+  });
+  // Ignore FORM_ERROR since it doesn't count as it doesn't go to a field.
+  // We'll assume that the form _can_ be re-submitted with these errors.
+  // It could be a server error, connection error, etc.
+  const fieldSubmitErrors = useMemo(
+    () => omit(submitErrors ?? {}, FORM_ERROR),
+    [submitErrors]
+  );
+
+  const allFieldsTouched = touched
+    ? Object.values(touched).every((field) => field)
+    : false;
+
+  const allFieldsWithSubmitErrorsAreDirty = useMemo(() => {
+    if (!submitErrors || Object.keys(fieldSubmitErrors).length === 0) {
+      return true;
+    }
+    const unchangedSubmitErrors = Object.keys(
+      dirtyFieldsSinceLastSubmit
+    ).reduce(
+      (remaining: Partial<typeof fieldSubmitErrors> | undefined, field) => {
+        return remaining ? setIn(remaining, field, undefined) : undefined;
+      },
+      cloneDeep(fieldSubmitErrors)
+    );
+    return (
+      !unchangedSubmitErrors || Object.keys(unchangedSubmitErrors).length === 0
+    );
+  }, [submitErrors, fieldSubmitErrors, dirtyFieldsSinceLastSubmit]);
+
+  const disabled =
+    submitting ||
+    validating ||
+    (allFieldsTouched && hasValidationErrors) ||
+    // disable if there are submit/server errors for specific fields
+    // and they have not been changed since last submit
+    !allFieldsWithSubmitErrorsAreDirty;
+
+  const progress = submitting && values.submitAction === action;
+
+  const submit = () => {
+    form.change('submitAction', action);
+
+    void form.submit();
+  };
+
+  return { disabled, submitting: progress, submit };
+};

src/scenes/ProgressReports/EditForm/ProgressReportEdit.graphql

@@ -22,6 +22,7 @@ fragment ProgressReportEdit on ProgressReport {
   progressForAllVariants {
     ...ProgressReportProgress
   }
+  ...mediaStep
   status {
     ...ProgressReportStatus
   }