(fix) O3-3627: Hide filetype extension for image attachment (#2071)

* Hide filetype extension for image attachment * FIx e2e test * Added flag to prevent users from putting dot or comma * Mape the supported message under the transilation function * Cleaning code * Cleaning code * Back to next * Remove the dot and comma restriction * Sanitize the filename input by user just incase they input duplicate extensions * Removed the persistent dot after removing duplicate extension * adding optional chaining for allowedExtension * Useful tweaks --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Oct 29, 2024 · 9be78cc · 9be78cc
1 parent cf1e746
commit 9be78cc
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 183 deletions.
diff --git a/e2e/specs/attachments.spec.ts b/e2e/specs/attachments.spec.ts
@@ -57,7 +57,7 @@ test('Add and remove an attachment', async ({ page }) => {
   });
 
   await test.step('Then I should see the file I uploaded displayed in the attachments table', async () => {
-    await expect(page.getByRole('button', { name: /brainScan.jpeg/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: /brainScan/i })).toBeVisible();
   });
 
   await test.step('When I click on the `Table view` tab', async () => {
@@ -78,7 +78,7 @@ test('Add and remove an attachment', async ({ page }) => {
   });
 
   await test.step('And I should not see the deleted attachment in the list', async () => {
-    await expect(page.getByRole('button', { name: /brainScan.jpeg/i })).not.toBeVisible();
+    await expect(page.getByRole('button', { name: /brainScan/i })).not.toBeVisible();
   });
 
   await test.step('And the attachments table should be empty', async () => {

diff --git a/...esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx b/...esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx
@@ -2,16 +2,15 @@ import React, { useState, useCallback, useMemo, useEffect, useRef, useContext }
 import { useTranslation } from 'react-i18next';
 import { Tabs, Tab, TabList, TabPanels, TabPanel, ModalHeader, ModalBody, InlineNotification } from '@carbon/react';
 import { type FetchResponse, type UploadedFile } from '@openmrs/esm-framework';
+import { useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 import CameraComponent from './camera.component';
 import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
 import FileReviewContainer from './file-review.component';
 import MediaUploaderComponent from './media-uploader.component';
 import UploadStatusComponent from './upload-status.component';
 import styles from './camera-media-uploader.scss';
-import { useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 
 interface CameraMediaUploaderModalProps {
-  allowedExtensions: Array<string> | null;
   cameraOnly?: boolean;
   closeModal: () => void;
   collectDescription?: boolean;
@@ -26,7 +25,6 @@ interface CameraMediaUploadTabsProps {
 }
 
 const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
-  allowedExtensions,
   cameraOnly,
   closeModal,
   collectDescription,

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx
@@ -1,5 +1,8 @@
 import React, { type SyntheticEvent, useCallback, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
 import { Button, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextArea, TextInput } from '@carbon/react';
 import { DocumentPdf, DocumentUnknown } from '@carbon/react/icons';
 import { type UploadedFile, UserHasAccess } from '@openmrs/esm-framework';
@@ -17,6 +20,7 @@ interface FilePreviewProps {
   moveToNextFile: () => void;
   onSaveFile: (dataUri: UploadedFile) => void;
   title?: string;
+  // TODO: Constrain the file type to a more specific type that only allows image and pdf
   uploadedFile: UploadedFile;
 }
 
@@ -70,58 +74,63 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   clearData,
 }) => {
   const { t } = useTranslation();
-  const [fileName, setFileName] = useState(uploadedFile.fileName);
-  const [fileDescription, setFileDescription] = useState(uploadedFile.fileDescription);
-  const [emptyName, setEmptyName] = useState(false);
-
-  const saveImageOrPdf = useCallback(
-    (event: SyntheticEvent) => {
-      event.preventDefault();
-      onSaveFile?.({
-        ...uploadedFile,
-        fileName,
-        fileDescription,
-      });
+  const { allowedExtensions } = useContext(CameraMediaUploaderContext);
+  const fileNameWithoutExtension = uploadedFile.fileName.trim().replace(/\.[^\\/.]+$/, '');
+
+  const schema = z.object({
+    fileName: z.string({
+      required_error: t('nameIsRequired', 'Name is required'),
+    }),
+    fileDescription: z.string().optional(),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      fileName: fileNameWithoutExtension,
     },
-    [onSaveFile, fileName, fileDescription, uploadedFile],
-  );
+  });
 
-  const cancelCapture = useCallback(
-    (event: SyntheticEvent) => {
-      event.preventDefault();
-      clearData?.();
-    },
-    [clearData],
-  );
+  const onSubmit: SubmitHandler<z.infer<typeof schema>> = (data) => {
+    const { fileName, fileDescription } = data;
 
-  const updateFileName = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      event.preventDefault();
+    const sanitizedFileName =
+      allowedExtensions?.reduce((name, extension) => {
+        const regex = new RegExp(`\\.(${extension})+$`, 'i');
+        return name.replace(regex, '');
+      }, fileName) || fileName;
 
-      if (event.target.value === '') {
-        setEmptyName(true);
-      } else if (emptyName) {
-        setEmptyName(false);
-      }
+    onSaveFile?.({
+      ...uploadedFile,
+      fileName: `${sanitizedFileName}${fileExtension}`,
+      fileDescription,
+    });
+  };
 
-      setFileName(event.target.value);
-    },
-    [setEmptyName, setFileName, emptyName],
-  );
+  const getFileExtension = useCallback((filename: string): string => {
+    const validExtension = filename.match(/\.[0-9a-z]+$/i);
+    return validExtension ? validExtension[0].toLowerCase() : '';
+  }, []);
 
-  const updateDescription = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const fileExtension = getFileExtension(uploadedFile.fileName);
+
+  const handleCancelUpload = useCallback(
+    (event: SyntheticEvent) => {
       event.preventDefault();
-      setFileDescription(event.target.value);
+      clearData?.();
     },
-    [setFileDescription],
+    [clearData],
   );
 
   return (
-    <Form onSubmit={saveImageOrPdf}>
+    <Form onSubmit={handleSubmit(onSubmit)}>
       <ModalBody className={styles.overview}>
         {uploadedFile.fileType === 'image' ? (
-          <img src={uploadedFile.base64Content} alt="placeholder" />
+          <img src={uploadedFile.base64Content} alt={t('imagePlaceholder', 'Image placeholder')} />
         ) : uploadedFile.fileType === 'pdf' ? (
           <div className={styles.filePlaceholder}>
             <DocumentPdf size={16} />
@@ -134,41 +143,50 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         <div className={styles.imageDetails}>
           <Stack gap={5}>
             <div className={styles.captionFrame}>
-              <TextInput
-                autoComplete="off"
-                autoFocus
-                id="caption"
-                invalid={emptyName}
-                invalidText={emptyName && t('fieldRequired', 'This field is required')}
-                labelText={`${uploadedFile.fileType === 'image' ? t('image', 'Image') : t('file', 'File')} ${t(
-                  'name',
-                  'name',
-                )}`}
-                onChange={updateFileName}
-                placeholder={t('attachmentCaptionInstruction', 'Enter caption')}
-                required
-                value={fileName}
+              <Controller
+                control={control}
+                name="fileName"
+                render={({ field: { onChange, value } }) => (
+                  <TextInput
+                    autoFocus
+                    id="caption"
+                    invalid={!!errors.fileName}
+                    invalidText={errors.fileName?.message}
+                    labelText={`${uploadedFile.fileType === 'image' ? t('image', 'Image') : t('file', 'File')} ${t(
+                      'name',
+                      'name',
+                    )}`}
+                    onChange={onChange}
+                    placeholder={t('enterAttachmentName', 'Enter attachment name')}
+                    value={value}
+                  />
+                )}
               />
             </div>
             {collectDescription && (
-              <TextArea
-                autoComplete="off"
-                id="description"
-                labelText={t('imageDescription', 'Image description')}
-                onChange={updateDescription}
-                placeholder={t('attachmentCaptionInstruction', 'Enter caption')}
-                value={fileDescription}
+              <Controller
+                control={control}
+                name="fileDescription"
+                render={({ field: { onChange, value } }) => (
+                  <TextArea
+                    id="description"
+                    labelText={t('imageDescription', 'Image description')}
+                    onChange={onChange}
+                    placeholder={t('enterAttachmentDescription', 'Enter attachment description')}
+                    value={value}
+                  />
+                )}
               />
             )}
           </Stack>
         </div>
       </ModalBody>
       <ModalFooter>
         <UserHasAccess privilege="Create Attachment">
-          <Button kind="secondary" size="lg" onClick={cancelCapture}>
+          <Button kind="secondary" onClick={handleCancelUpload} size="lg">
             {t('cancel', 'Cancel')}
           </Button>
-          <Button type="submit" size="lg" onClick={saveImageOrPdf} disabled={emptyName}>
+          <Button type="submit" size="lg">
             {title || t('addAttachment', 'Add attachment')}
           </Button>
         </UserHasAccess>

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.component.tsx
@@ -91,6 +91,10 @@ const MediaUploaderComponent = () => {
         {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', {
           fileSize: maxFileSize,
         })}
+        .{' '}
+        {t('supportedFiletypes', 'Supported files are {{supportedFiles}}', {
+          supportedFiles: allowedExtensions?.join(', '),
+        })}
         .
       </p>
       <div className={styles.uploadFile}>

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/upload-status.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/upload-status.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, FileUploaderItem, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
@@ -27,7 +27,7 @@ const UploadStatusComponent: React.FC<UploadStatusComponentProps> = ({ title })
 
   useEffect(() => {
     Promise.all(
-      filesToUpload.map((file, indx) =>
+      filesToUpload.map((file, index) =>
         saveFile(file)
           .then(() => {
             showSnackbar({
@@ -37,8 +37,8 @@ const UploadStatusComponent: React.FC<UploadStatusComponentProps> = ({ title })
               isLowContrast: true,
             });
             setFilesUploading((prevfilesToUpload) =>
-              prevfilesToUpload.map((file, ind) =>
-                ind === indx
+              prevfilesToUpload.map((file, prevFileIndex) =>
+                prevFileIndex === index
                   ? {
                       ...file,
                       status: 'complete',
@@ -47,16 +47,15 @@ const UploadStatusComponent: React.FC<UploadStatusComponentProps> = ({ title })
               ),
             );
           })
-          .catch((err) => {
+          .catch((error) => {
             showSnackbar({
               kind: 'error',
-              subtitle: err,
+              subtitle: error?.message,
               title: `${t('uploading', 'Uploading')} ${file.fileName} ${t('failed', 'failed')}`,
             });
           }),
       ),
     ).then(() => {
-      true;
       onCompletion?.();
     });
   }, [onCompletion, saveFile, filesToUpload, t, setFilesUploading]);

diff --git a/packages/esm-patient-attachments-app/src/routes.json b/packages/esm-patient-attachments-app/src/routes.json
@@ -23,7 +23,9 @@
       "name": "capture-photo-widget",
       "component": "capturePhotoWidget",
       "slot": "capture-patient-photo-slot"
-    },
+    }
+  ],
+  "modals": [
     {
       "name": "capture-photo-modal",
       "component": "capturePhotoModal"

diff --git a/packages/esm-patient-attachments-app/src/utils.ts b/packages/esm-patient-attachments-app/src/utils.ts
@@ -28,7 +28,7 @@ export function createGalleryEntry(data: AttachmentResponse): Attachment {
   return {
     id: data.uuid,
     src: `${window.openmrsBase}${attachmentUrl}/${data.uuid}/bytes`,
-    filename: data.filename,
+    filename: data.filename.replace(/\.[^\\/.]+$/, ''),
     description: data.comment,
     dateTime: formatDate(new Date(data.dateTime), {
       mode: 'wide',

diff --git a/packages/esm-patient-attachments-app/translations/en.json b/packages/esm-patient-attachments-app/translations/en.json
@@ -4,7 +4,6 @@
   "addAttachment": "Add Attachment",
   "addAttachment_title": "Add Attachment",
   "addMoreAttachments": "Add more attachments",
-  "attachmentCaptionInstruction": "Enter caption",
   "attachments": "Attachments",
   "Attachments": "Attachments",
   "attachmentsInLowerCase": "attachments",
@@ -21,10 +20,11 @@
   "deleteImage": "Delete image",
   "deletePdf": "Delete PDF",
   "edit": "Edit",
+  "enterAttachmentDescription": "Enter attachment description",
+  "enterAttachmentName": "Enter attachment name",
   "error": "Error",
   "failed": "failed",
   "failedDeleting": "couldn't be deleted",
-  "fieldRequired": "This field is required",
   "file": "File",
   "fileDeleted": "File deleted",
   "fileName": "File name",
@@ -35,11 +35,14 @@
   "gridView": "Grid view",
   "image": "Image",
   "imageDescription": "Image description",
+  "imagePlaceholder": "Image placeholder",
   "imagePreview": "Image preview",
   "name": "name",
+  "nameIsRequired": "Name is required",
   "noImageToDisplay": "No image to display",
   "options": "Options",
   "successfullyDeleted": "successfully deleted",
+  "supportedFiletypes": "Supported files are {{supportedFiles}}",
   "tableView": "Table view",
   "type": "Type",
   "unsupportedFileType": "Unsupported file type",