va-file-input/va-file-input-multiple: Add support for backwards compatibility of password change/submission

packages/storybook/stories/va-file-input-multiple-uswds.stories.tsx

@@ -36,6 +36,7 @@ const defaultArgs = {
   'value': null,
   'read-only': false,
   'slotFieldIndexes': null,
+  'disablePasswordSubmitButtonPattern': false,
 };
 
 const Template = ({
@@ -53,6 +54,7 @@ const Template = ({
   readOnly,
   children,
   slotFieldIndexes,
+  disablePasswordSubmitButton,
 }) => {
   return (
     <VaFileInputMultiple
@@ -70,6 +72,7 @@ const Template = ({
       read-only={readOnly}
       children={children}
       slot-field-indexes={slotFieldIndexes}
+      disablePasswordSubmitButtonPattern={disablePasswordSubmitButton}
     />
   );
 };
@@ -453,9 +456,11 @@ CustomValidation.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-const EncryptedTemplate = ({ label, name }) => {
+const EncryptedTemplate = ( {label, name, disablePasswordSubmitButtonPattern }) => {
   const [trackedFiles, setTrackedFiles] = useState([]);
   const [encryptedList, setEncryptedList] = useState([]);
+  const [passwordSubmissionSuccessList, setPasswordSubmissionSuccessList] = useState<boolean[]>([]);
+  const [derivedPasswordErrorList, setDerivedPasswordErrorList] = useState<string[]>([]);
 
   /**
    * Callback passed to onVaMultipleChange to track the file objects for each
@@ -473,10 +478,18 @@ const EncryptedTemplate = ({ label, name }) => {
     const { detail } = event;
 
     const trackedFilesToSet = [...trackedFiles];
+    const trackedPasswordSubmissionSuccessList = [
+      ...passwordSubmissionSuccessList
+    ];
+    const currentDerivedPasswordErrorList = [...derivedPasswordErrorList];
 
     // Add new file to trackedFiles if action is FILE_ADDED
     if (detail.action === 'FILE_ADDED') {
       trackedFilesToSet.push(detail.file);
+
+      if (detail.file.type === 'application/pdf') {
+        trackedPasswordSubmissionSuccessList.push(null);
+      }
     } else if (detail.action === 'FILE_UPDATED' && detail.file) {
       // If an existing file is updated successfully, replace the corresponding
       // error object in trackedFiles with the file
@@ -485,6 +498,7 @@ const EncryptedTemplate = ({ label, name }) => {
       );
       if (indexToUpdate !== -1) {
         trackedFilesToSet[indexToUpdate] = detail.file;
+        trackedPasswordSubmissionSuccessList[indexToUpdate] = null;
       }
     } else if (detail.action === 'FILE_REMOVED' && detail.file) {
       // Remove file from trackedFiles if action is FILE_REMOVED when a valid
@@ -494,6 +508,10 @@ const EncryptedTemplate = ({ label, name }) => {
       );
       if (indexToRemove !== -1) {
         trackedFilesToSet.splice(indexToRemove, 1);
+        // Remove index from success submission list and derived error list to
+        // ensure password submission/error state is cleared for deleted file
+        trackedPasswordSubmissionSuccessList.splice(indexToRemove, 1);
+        currentDerivedPasswordErrorList.splice(indexToRemove, 1);
       }
     } else if (detail.action === 'FILE_REMOVED' && !detail.file) {
       // If an error file was deleted, remove the corresponding file from
@@ -503,13 +521,29 @@ const EncryptedTemplate = ({ label, name }) => {
       );
       if (indexToRemove !== -1) {
         trackedFilesToSet.splice(indexToRemove, 1);
+        // Remove index from success submission list and derived error list to
+        // ensure password submission/error state is cleared for deleted file
+        trackedPasswordSubmissionSuccessList.splice(indexToRemove, 1);
+        currentDerivedPasswordErrorList.splice(indexToRemove, 1);
+      }
+    } else if (detail.action === 'PASSWORD_UPDATE') {
+      // Update value at index of file that password was updated to null to
+      // enable validation to take place again at va-file-input level.
+      const indexToUpdate = trackedFilesToSet.findIndex(
+        file => file.name === detail.file.name,
+      );
+
+      if (indexToUpdate !== -1) {
+        trackedPasswordSubmissionSuccessList[indexToUpdate] = null;
       }
     }
 
     const pdfFiles = trackedFilesToSet.map((file) => {
       return file.type === 'application/pdf'
     });
 
+    setPasswordSubmissionSuccessList(trackedPasswordSubmissionSuccessList);
+    setDerivedPasswordErrorList(currentDerivedPasswordErrorList);
     setEncryptedList(pdfFiles);
     setTrackedFiles(trackedFilesToSet);
   }
@@ -543,6 +577,19 @@ const EncryptedTemplate = ({ label, name }) => {
     setTrackedFiles(trackedFilesToSet);
   }
 
+  const handlePasswordSubmissionSuccessClick = (index: number, isSuccess: boolean = false) => {
+    const currentState = [...passwordSubmissionSuccessList];
+    currentState[index] = isSuccess;
+
+    if (!isSuccess) {
+      const currentDerivedPasswordErrorList = [...derivedPasswordErrorList];
+      currentDerivedPasswordErrorList[index] = 'Incorrect password. Try again or delete file.';
+      setDerivedPasswordErrorList(currentDerivedPasswordErrorList);
+    }
+
+    setPasswordSubmissionSuccessList(currentState);
+  }
+
   return (
     <>
       To learn how to check for an encrypted PDF <va-link
@@ -554,10 +601,55 @@ const EncryptedTemplate = ({ label, name }) => {
         name={name}
         hint={"This example shows a password field when a .pdf file is uploaded."}
         encrypted={encryptedList}
+        passwordSubmissionSuccessList={passwordSubmissionSuccessList}
+        passwordErrors={derivedPasswordErrorList}
         onVaMultipleChange={handleChange}
         onVaMultipleError={handleError}
+        disablePasswordSubmitButtonPattern={disablePasswordSubmitButtonPattern}
       />
       <hr />
+
+      <p>Password submission list: {JSON.stringify(passwordSubmissionSuccessList)}</p>
+
+      { !disablePasswordSubmitButtonPattern &&
+        (<div
+          className="vads-u-display--flex vads-u-flex-direction--column vads-u-margin--2 vads-u-border--1px vads-u-border-color--gray-light vads-u-padding--2"
+          style={{ width: 'fit-content' }}
+        >
+          <p className="vads-u-margin-y--0">
+            Simulate checking of submitted password for uploaded <strong>encrypted (PDF)</strong> files. Simulation is done
+            by updating the <code>passwordSubmissionSuccessList</code> prop based on button clicks below.
+          </p>
+          <em>Each pair of buttons controls the password submission status for the corresponding encrypted file in the file list.</em>
+          {
+            encryptedList?.length ? (
+              <ul>
+                {encryptedList.map((isEncrypted, index) => {
+                  if (isEncrypted) {
+                    return (
+                      <li key={index}>
+                        <div className="vads-u-display--flex vads-u-align-items--center vads-u-gap--2 vads-u-margin-bottom--1">
+                          <p className="vads-u-margin-y--0 vads-u-margin-right--2">File {index + 1}</p>
+                          <va-button
+                              class="vads-u-margin-y--1"
+                              text="Set success"
+                              onClick={() => handlePasswordSubmissionSuccessClick(index, true)}
+                            />
+                          <va-button
+                            text="Set error"
+                            onClick={() => handlePasswordSubmissionSuccessClick(index, false)}
+                          />
+                        </div>
+                      </li>
+                    );
+                  }
+                })}
+              </ul>
+            ) : null
+          }
+        </div>)
+      }
+
       <div>
         <p>
           Parent components are responsible for managing if a password
@@ -614,6 +706,17 @@ AcceptsFilePassword.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
+export const AcceptsFilePasswordWithoutSubmitButton = EncryptedTemplate.bind(null);
+AcceptsFilePasswordWithoutSubmitButton.args = {
+  ...defaultArgs,
+  disablePasswordSubmitButtonPattern: true,
+};
+// Snapshots disabled because visual difference is only apparent after interaction.
+// TODO: Enable snapshots after integrating Storybook play function
+AcceptsFilePasswordWithoutSubmitButton.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 const FilesUploadedTemplate = args => {
   const [mockFiles, setMockFiles] = useState(null);