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

suubi-joshua · 2024-10-21T21:12:44Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

I am hiding away the filetype extension from being displayed in the UI but is still maintained when the attachment is saved to the server. Also to restrict users from adding duplicate filetype extension I have restricted the user from typing a dot [.] in the filename field.

Screenshots

Before

Screencast.from.22-10-24.00.02.57.webm

After

Screencast.from.21-10-24.23.56.18.webm

Related Issue

https://openmrs.atlassian.net/browse/O3-3627
openmrs/openmrs-esm-core#1183

Other

In this I only was able to hide the filetype extension form user but still one other issue I believe solved by this PR here. The filename input by user is not what is saved and displayed but the default filename. From the attachment videos above you can realize that, the however much I update the filename the default is still maintained which is not desired. This is so because in the filename appended is from the default file object in the uploadedfile type not the filename.

denniskigen · 2024-10-22T12:37:10Z

Could you include a bump for the framework as part of your changes now that openmrs/openmrs-esm-core#1183 got checked in?

suubi-joshua · 2024-10-22T16:29:25Z

Thanks @denniskigen let me work on that

suubi-joshua · 2024-10-22T17:04:29Z

@denniskigen With the changes this is what happens
Screencast from 22-10-24 19:54:53.webm

I blocked out any attempt to of having a dot or comma

package.json

packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx

ibacher · 2024-10-23T13:29:43Z

packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.component.tsx

@@ -88,10 +88,13 @@ const MediaUploaderComponent = () => {
        </div>
      )}
      <p className="cds--label-description">
-        {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', {
+        {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB.', {


Suggested change

{t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB.', {

{t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', {

It's better not to include punctuation in translation strings and it's not clear to me that the period is useful here. (Keep in mind changing the English text of a translation invalidated every existing translation of this string).

In this case, I would just wrap both clauses in a <p> element so they are on separate lines.

ibacher · 2024-10-23T13:31:48Z

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(/\.[^/.]+$/, ''),


Why are we removing the extension here?

createGallary Function passes the AttachmentResponse data of file details to attachment type which is used by the UI components ie the attachments-overview-component, and the grid and table components. These components all use the filename from the Attachment type and filename comes with the extension.
Before

After

Be nice to have a comment explaining things.

suubi-joshua · 2024-10-24T20:57:40Z

@denniskigen from earlier discussions I have reverted the logic to restrict the dot and the comma. Also tested out the add image in the visit not and works well the image is added in the attachment gallary.
Screencast from 24-10-24 23:56:11.webm

suubi-joshua · 2024-10-25T09:43:04Z

@denniskigen and @ibacher In my final iterations I have added a sanitize function which removes any duplicate filetype extensions if typed by user such that the original filetype is maintained as the only one.
Screencast from 25-10-24 12:41:27.webm

suubi-joshua · 2024-10-27T13:17:59Z

@denniskigen not quite sure why this e2e test is failing for the success notification
.

denniskigen · 2024-10-28T10:48:28Z

It's failing because of this error:

Check where you're calling .reduce on the allowedExtensions array. Perhaps consider adding optional chaining so it doesn't fail if allowedExtensions is null or undefined.

suubi-joshua · 2024-10-28T11:31:52Z

It's failing because of this error:

Check where you're calling .reduce on the allowedExtensions array. Perhaps consider adding optional chaining so it doesn't fail if allowedExtensions is null or undefined.

Thanks @denniskigen all good now

…extensions

denniskigen · 2024-10-29T09:17:19Z

Hey @suubi-joshua, I've taken the liberty of pushing a commit to your branch with some useful tweaks, including:

Adding a zod schema for validating the file upload form. With this, we can now centralize the file upload validation and change handling in one place. We don't need to use state to track that anymore.
Improved error handling - previously error messages thrown by the Attachments API were not being displayed to the user. I've fixed that by surfacing the error message returned by the API in the catch block of the saveFile function.
Refactored modal registrations - I've ported over modals in the Attachments app routes registry from the extensions array to the modals array in line with best practices.
Updated translations

Hope that's cool with you!

suubi-joshua · 2024-10-29T10:34:48Z

Hey @suubi-joshua, I've taken the liberty of pushing a commit to your branch with some useful tweaks, including:

* Adding a zod schema for validating the file upload form. With this, we can now centralize the file upload validation and change handling in one place. We don't need to use state to track that anymore.

* Improved error handling - previously error messages thrown by the Attachments API were not being displayed to the user. I've fixed that by surfacing the error message returned by the API in the catch block of the `saveFile` function.

* Refactored modal registrations - I've ported over modals in the Attachments app routes registry from the extensions array to the modals array in line with best practices.

* Updated translations

Hope that's cool with you!

Nice great additions @denniskigen

denniskigen

Cool, thanks, @suubi-joshua. LGTM!

…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 <kigen.work@gmail.com>

denniskigen requested review from dkayiwa, ibacher and denniskigen October 23, 2024 12:16

ibacher reviewed Oct 23, 2024

View reviewed changes

denniskigen changed the title ~~(fix) O3-3627 Hide filetype extension for image attachment~~ (fix) O3-3627: Hide filetype extension for image attachment Oct 23, 2024

suubi-joshua added 11 commits October 28, 2024 22:26

Hide filetype extension for image attachment

84402c4

FIx e2e test

d9123f6

Added flag to prevent users from putting dot or comma

80e5b4c

Mape the supported message under the transilation function

0b7dd34

Cleaning code

4978958

Cleaning code

1970fa6

Back to next

f6b76a3

Remove the dot and comma restriction

095d486

Sanitize the filename input by user just incase they input duplicate …

f28c512

…extensions

Removed the persistent dot after removing duplicate extension

7cc89aa

adding optional chaining for allowedExtension

31efe70

denniskigen force-pushed the O3-3627 branch from 79b4aea to d948b4e Compare October 29, 2024 09:08

Useful tweaks

ceae184

denniskigen force-pushed the O3-3627 branch from d948b4e to ceae184 Compare October 29, 2024 09:28

denniskigen approved these changes Oct 29, 2024

View reviewed changes

denniskigen merged commit 9be78cc into openmrs:main Oct 29, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

suubi-joshua commented Oct 21, 2024 •

edited by denniskigen

Loading

denniskigen commented Oct 22, 2024

suubi-joshua commented Oct 22, 2024

suubi-joshua commented Oct 22, 2024 •

edited

Loading

ibacher Oct 23, 2024

ibacher Oct 23, 2024

ibacher Oct 23, 2024

suubi-joshua Oct 23, 2024 •

edited

Loading

ibacher Oct 23, 2024

suubi-joshua commented Oct 24, 2024

suubi-joshua commented Oct 25, 2024 •

edited

Loading

suubi-joshua commented Oct 27, 2024 •

edited

Loading

denniskigen commented Oct 28, 2024 •

edited

Loading

suubi-joshua commented Oct 28, 2024

denniskigen commented Oct 29, 2024

suubi-joshua commented Oct 29, 2024 •

edited

Loading

denniskigen left a comment

	{t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB.', {
	{t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', {

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

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

Conversation

suubi-joshua commented Oct 21, 2024 • edited by denniskigen Loading

Requirements

Summary

Screenshots

Related Issue

Other

denniskigen commented Oct 22, 2024

suubi-joshua commented Oct 22, 2024

suubi-joshua commented Oct 22, 2024 • edited Loading

ibacher Oct 23, 2024

Choose a reason for hiding this comment

ibacher Oct 23, 2024

Choose a reason for hiding this comment

ibacher Oct 23, 2024

Choose a reason for hiding this comment

suubi-joshua Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

ibacher Oct 23, 2024

Choose a reason for hiding this comment

suubi-joshua commented Oct 24, 2024

suubi-joshua commented Oct 25, 2024 • edited Loading

suubi-joshua commented Oct 27, 2024 • edited Loading

denniskigen commented Oct 28, 2024 • edited Loading

suubi-joshua commented Oct 28, 2024

denniskigen commented Oct 29, 2024

suubi-joshua commented Oct 29, 2024 • edited Loading

denniskigen left a comment

Choose a reason for hiding this comment

suubi-joshua commented Oct 21, 2024 •

edited by denniskigen

Loading

suubi-joshua commented Oct 22, 2024 •

edited

Loading

suubi-joshua Oct 23, 2024 •

edited

Loading

suubi-joshua commented Oct 25, 2024 •

edited

Loading

suubi-joshua commented Oct 27, 2024 •

edited

Loading

denniskigen commented Oct 28, 2024 •

edited

Loading

suubi-joshua commented Oct 29, 2024 •

edited

Loading