Merged in r2-2807-user-cannot-delete-100th-attachment (pull request #6726)

R2-2807 Users cannot delete 100th attachment

Approved-by: Pavel Nabutovsky
Approved-by: Joshua Toliver

Author: aespinoza-quoin

app/javascript/components/application/selectors.js

@@ -170,6 +170,9 @@ export const getMaximumUsers = state => state.getIn([NAMESPACE, "systemOptions",
 
 export const getMaximumUsersWarning = state => state.getIn([NAMESPACE, "systemOptions", "maximum_users_warning"]);
 
+export const getMaximumAttachmentsPerRecord = state =>
+  state.getIn([NAMESPACE, "systemOptions", "maximum_attachments_per_record"]);
+
 export const getTheme = state => state.getIn([NAMESPACE, "theme"], fromJS({}));
 
 export const getShowPoweredByPrimero = state => state.getIn([NAMESPACE, "theme", "showPoweredByPrimero"], false);
@@ -193,6 +196,7 @@ export const getAppData = memoize(state => {
   const useContainedNavStyle = getUseContainedNavStyle(state);
   const showPoweredByPrimero = getShowPoweredByPrimero(state);
   const hasLoginLogo = getLoginBackground(state);
+  const maximumttachmentsPerRecord = getMaximumAttachmentsPerRecord(state);
 
   return {
     modules,
@@ -206,7 +210,8 @@ export const getAppData = memoize(state => {
     maximumUsersWarning,
     useContainedNavStyle,
     showPoweredByPrimero,
-    hasLoginLogo
+    hasLoginLogo,
+    maximumttachmentsPerRecord
   };
 });
 

app/javascript/components/application/selectors.unit.test.js

@@ -129,7 +129,8 @@ const stateWithRecords = fromJS({
     disabledApplication: true,
     systemOptions: {
       maximum_users: 50,
-      maximum_users_warning: 45
+      maximum_users_warning: 45,
+      maximum_attachments_per_record: 55
     }
   }
 });
@@ -611,4 +612,12 @@ describe("Application - Selectors", () => {
       expect(result).to.be.true;
     });
   });
+
+  describe("getMaximumAttachmentsPerRecord", () => {
+    it("should return maximum users warning", () => {
+      const result = selectors.getMaximumAttachmentsPerRecord(stateWithRecords);
+
+      expect(result).to.be.equal(55);
+    });
+  });
 });

app/javascript/components/record-form/form/components/validation-errors.jsx

@@ -45,7 +45,9 @@ const ValidationErrors = ({ formErrors, forms, submitCount }) => {
               .get("fields")
               .filter(field => fieldNames.includes(field.get("name")))
               .map(field => ({
-                [field.get("name")]: formErrors[field.get("name")]
+                [field.get("name")]: Array.isArray(formErrors[field.get("name")])
+                  ? formErrors[field.get("name")].join("")
+                  : formErrors[field.get("name")]
               }))
               .reduce((acc, subCurrent) => ({ ...acc, ...subCurrent }), {})
           }

app/javascript/components/record-form/form/field-types/attachments/attachment-label.jsx

@@ -8,22 +8,25 @@ import css from "../../styles.css";
 import ActionButton from "../../../../action-button";
 import { ACTION_BUTTON_TYPES } from "../../../../action-button/constants";
 
-const AttachmentLabel = ({ label, helpText, disabled, mode, arrayHelpers, handleAttachmentAddition }) => {
+const AttachmentLabel = ({ label, helpText, disabled, mode, arrayHelpers, handleAttachmentAddition, error }) => {
   const isDisabled = !disabled && !mode.isShow;
   const onClick = () => handleAttachmentAddition(arrayHelpers);
 
   return (
     <div className={css.attachmentHeading}>
       <div className={css.attachmentLabel}>
-        <h4>{label}</h4>
-        <FormHelperText>{helpText}</FormHelperText>
+        <h4 data-testid="attachment-label">{label}</h4>
+        <FormHelperText data-testid="attachment-label-helptext" error={Boolean(error)}>
+          {error || helpText}
+        </FormHelperText>
       </div>
       {isDisabled && (
         <div>
           <ActionButton
             icon={<AddIcon />}
             text="Add"
             type={ACTION_BUTTON_TYPES.icon}
+            data-testid="attachment-label-action-button"
             rest={{
               onClick
             }}
@@ -39,6 +42,7 @@ AttachmentLabel.displayName = "AttachmentLabel";
 AttachmentLabel.propTypes = {
   arrayHelpers: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
+  error: PropTypes.string,
   handleAttachmentAddition: PropTypes.func.isRequired,
   helpText: PropTypes.string,
   label: PropTypes.string.isRequired,

app/javascript/components/record-form/form/field-types/attachments/attachment-label.spec.js

@@ -0,0 +1,32 @@
+// Copyright (c) 2014 - 2024 UNICEF. All rights reserved.
+
+import { mountedComponent, screen } from "test-utils";
+
+import AttachmentLabel from "./attachment-label";
+
+describe("<AttachmentLabel />", () => {
+  const props = {
+    label: "Some label",
+    helpText: "Some Help Text",
+    mode: { isShow: false },
+    handleAttachmentAddition: () => {},
+    arrayHelpers: {},
+    disabled: false
+  };
+
+  beforeEach(() => {
+    mountedComponent(<AttachmentLabel {...props} />);
+  });
+
+  it("renders the AttachmentLabel", () => {
+    expect(screen.getAllByTestId("attachment-label")).toHaveLength(1);
+  });
+
+  it("renders the FormHelperText", () => {
+    expect(screen.getAllByTestId("attachment-label-helptext")).toHaveLength(1);
+  });
+
+  it("renders a <ActionButton /> component", () => {
+    expect(screen.getAllByTestId("attachment-label-action-button")).toHaveLength(1);
+  });
+});

app/javascript/components/record-form/form/field-types/attachments/component.jsx

@@ -23,14 +23,15 @@ import PhotoArray from "./photo-array";
 import { buildBase64URL } from "./utils";
 
 // TODO: No link to display / download upload
-const Component = ({ name, field, label, disabled, formik, mode, recordType }) => {
+const Component = ({ name, field, label, disabled, formik, mode, recordType, helperText }) => {
   const i18n = useI18n();
 
   const loading = useMemoizedSelector(state => getLoadingRecordState(state, recordType));
   const processing = useMemoizedSelector(state => getIsProcessingAttachments(state, recordType, name));
   const recordAttachments = useMemoizedSelector(state => getRecordAttachments(state, recordType));
 
   const values = get(formik.values, name, []);
+  const error = get(formik.errors, name, "");
   const attachment = FIELD_ATTACHMENT_TYPES[field.type];
 
   const [openLastDialog, setOpenLastDialog] = useState(false);
@@ -109,7 +110,7 @@ const Component = ({ name, field, label, disabled, formik, mode, recordType }) =
     if (field.type === PHOTO_FIELD && mode.isShow) {
       const images = values?.map(value => value.attachment_url || buildBase64URL(value.content_type, value.attachment));
 
-      return <PhotoArray images={images} />;
+      return <PhotoArray images={images} data-testid="photo-array" />;
     }
 
     if (field.type === AUDIO_FIELD && mode.isShow) {
@@ -122,11 +123,12 @@ const Component = ({ name, field, label, disabled, formik, mode, recordType }) =
   return (
     <FieldArray name={name} validateOnChange={false}>
       {arrayHelpers => (
-        <div>
+        <div data-testid="field-array">
           <AttachmentLabel
             label={label}
             mode={mode}
-            helpText={field.help_text[i18n.locale]}
+            helpText={helperText}
+            error={error}
             handleAttachmentAddition={handleAttachmentAddition}
             arrayHelpers={arrayHelpers}
             disabled={disabled}
@@ -149,6 +151,7 @@ Component.propTypes = {
   disabled: PropTypes.bool,
   field: PropTypes.object,
   formik: PropTypes.object,
+  helperText: PropTypes.string,
   label: PropTypes.string,
   mode: PropTypes.object,
   name: PropTypes.string,

app/javascript/components/record-form/form/field-types/attachments/component.spec.js

@@ -0,0 +1,48 @@
+// Copyright (c) 2014 - 2024 UNICEF. All rights reserved.
+
+import { mountedComponent, screen } from "test-utils";
+
+import AttachmentField from "./component";
+import { FIELD_ATTACHMENT_TYPES } from "./constants";
+
+describe("<AttachmentField />", () => {
+  const props = {
+    label: "Some label",
+    helpText: "Some Help Text",
+    mode: { isShow: true },
+    disabled: false,
+    recordType: "cases",
+    name: "photos",
+    field: {
+      type: FIELD_ATTACHMENT_TYPES.photos
+    }
+  };
+
+  const initialState = {
+    records: {
+      cases: {
+        loading: false,
+        recordAttachments: {
+          photos: {
+            processing: false
+          }
+        }
+      }
+    }
+  };
+
+  beforeEach(() => {
+    mountedComponent(<AttachmentField {...props} />, initialState, {}, [], {
+      values: { photos: [{ attachment_url: "random-string" }] }
+    });
+  });
+
+  it("render the <AttachmentField />", () => {
+    expect(screen.getAllByTestId("attachment-label")).toHaveLength(1);
+    expect(screen.getAllByTestId("field-array")).toHaveLength(1);
+  });
+
+  it("render a AttachmentLabel", () => {
+    expect(screen.getAllByTestId("attachment-label-helptext")).toHaveLength(1);
+  });
+});

app/javascript/components/record-form/form/record-form.jsx

@@ -2,7 +2,7 @@
 
 import { memo, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { object } from "yup";
+import { object, ValidationError } from "yup";
 import { Formik } from "formik";
 import isEmpty from "lodash/isEmpty";
 import { batch, useDispatch } from "react-redux";
@@ -14,6 +14,7 @@ import { constructInitialValues, sortSubformValues } from "../utils";
 import { useMemoizedSelector } from "../../../libs";
 import { INCIDENT_FROM_CASE, RECORD_TYPES } from "../../../config";
 import { getDataProtectionInitialValues } from "../selectors";
+import { AUDIO_FIELD, DOCUMENT_FIELD, PHOTO_FIELD } from "../constants";
 import { LEGITIMATE_BASIS } from "../../record-creation-flow/components/consent-prompt/constants";
 import renderFormSections from "../components/render-form-sections";
 import { useApp } from "../../application";
@@ -43,7 +44,7 @@ const RecordForm = ({
 }) => {
   const i18n = useI18n();
   const dispatch = useDispatch();
-  const { online } = useApp();
+  const { online, maximumttachmentsPerRecord } = useApp();
 
   const [initialValues, setInitialValues] = useState(mode.isNew ? constructInitialValues(forms.values()) : {});
   const [formTouched, setFormTouched] = useState({});
@@ -71,7 +72,46 @@ const RecordForm = ({
       );
     }, {});
 
-    return object().shape(schema);
+    const attachmentsFieldNames = [
+      ...formSections
+        .flatMap(obj =>
+          obj.fields.filter(field => [AUDIO_FIELD, DOCUMENT_FIELD, PHOTO_FIELD].includes(field.type) && !field.disabled)
+        )
+        .map(field => field.name)
+    ];
+
+    return object()
+      .shape(schema)
+      .test({
+        name: "maxAttach",
+        // eslint-disable-next-line object-shorthand, func-names
+        test: function (values) {
+          const attachmentsKeys = Object.keys(values).filter(key => attachmentsFieldNames.includes(key));
+          const totalAttachments = attachmentsKeys.reduce(
+            (acc, arr) =>
+              acc +
+              values[arr].filter(
+                value => !(Object.prototype.hasOwnProperty.call(value, "_destroy") || value.field_name === undefined)
+              ).length,
+            0
+          );
+
+          if (totalAttachments <= maximumttachmentsPerRecord) return true;
+
+          const errors = attachmentsKeys.map(key => {
+            return new ValidationError(
+              i18n.t("fields.attachments.maximum_attached", { maximumttachmentsPerRecord }),
+              true,
+              key
+            );
+          });
+
+          // eslint-disable-next-line react/no-this-in-sfc
+          return this.createError({
+            message: () => errors
+          });
+        }
+      });
   };
 
   useEffect(() => {

app/javascript/libs/queue/index.js

@@ -12,7 +12,13 @@ import transformOfflineRequest from "../transform-offline-request";
 import EventManager from "../messenger";
 import { queueIndexedDB } from "../../db";
 
-import { deleteFromQueue, messageQueueFailed, messageQueueSkip, messageQueueSuccess } from "./utils";
+import {
+  deleteFromQueue,
+  messageQueueFailed,
+  messageQueueSkip,
+  messageQueueSuccess,
+  sortQueueByDeleteFirst
+} from "./utils";
 import {
   QUEUE_PENDING,
   QUEUE_READY,
@@ -141,7 +147,7 @@ class Queue {
     if (this.ready) {
       this.working = true;
 
-      const item = head(this.queue);
+      const item = head(sortQueueByDeleteFirst(this.queue));
 
       if (item && !item?.processed && ((item.tries || 0) < QUEUE_ALLOWED_RETRIES || this.force)) {
         this.onAttachmentProcess(item);

app/javascript/libs/queue/utils.js

@@ -2,6 +2,7 @@
 
 import { queueIndexedDB } from "../../db";
 import EventManager from "../messenger";
+import { METHODS } from "../../config/constants";
 
 import { QUEUE_FAILED, QUEUE_SKIP, QUEUE_SUCCESS } from "./constants";
 
@@ -28,3 +29,18 @@ export const messageQueueSuccess = action => {
     EventManager.publish(QUEUE_SUCCESS, action);
   }
 };
+
+export const sortQueueByDeleteFirst = queue =>
+  queue.sort((elem1, elem2) => {
+    if (elem1.api.method === elem2.api.method) {
+      return 0;
+    }
+    if (elem1.api.method === METHODS.DELETE) {
+      return -1;
+    }
+    if (elem2.api.method === METHODS.DELETE) {
+      return 1;
+    }
+
+    return 0;
+  });

app/javascript/middleware/utils/fetch-single-payload.js

@@ -7,6 +7,7 @@ import { DEFAULT_FETCH_OPTIONS } from "../constants";
 import { disableNavigation } from "../../components/application/action-creators";
 import { applyingConfigMessage } from "../../components/pages/admin/configurations-form/action-creators";
 import userActions from "../../components/user/actions";
+import { SET_ATTACHMENT_STATUS } from "../../components/records/actions";
 
 import fetchStatus from "./fetch-status";
 import getToken from "./get-token";
@@ -111,12 +112,16 @@ const fetchSinglePayload = async (action, store, options) => {
         } else if (failureCallback) {
           messageQueueFailed(fromQueue);
           handleRestCallback(store, failureCallback, response, json, fromQueue);
+        } else if (action.type.includes("SAVE_ATTACHMENT") && status === 422) {
+          throw new FetchError(response, json);
         } else {
           messageQueueFailed(fromQueue);
           throw new FetchError(response, json);
         }
 
-        throw new Error(window.I18n.t("error_message.error_something_went_wrong"));
+        if (!action.type.includes("SAVE_ATTACHMENT") && status !== 422) {
+          throw new Error(window.I18n.t("error_message.error_something_went_wrong"));
+        }
       }
       await handleSuccess(store, {
         type,
@@ -151,7 +156,17 @@ const fetchSinglePayload = async (action, store, options) => {
     } catch (error) {
       const errorDataObject = { json: error?.json, recordType, fromQueue, id, error };
 
-      messageQueueFailed(fromQueue);
+      if (fromAttachment && error?.response?.status === 422) {
+        deleteFromQueue(fromQueue);
+        messageQueueSkip();
+        store.dispatch({
+          type: `${fromAttachment.record_type}/${SET_ATTACHMENT_STATUS}`,
+          payload: { processing: false, error: false, pending: false, fieldName: fromAttachment.field_name }
+        });
+        errorDataObject.fromQueue = false;
+      } else {
+        messageQueueFailed(fromQueue);
+      }
 
       fetchStatus({ store, type }, "FAILURE", false);