(fix) O3-2658: Show attachment descriptions when available

packages/esm-patient-attachments-app/src/attachments-config-schema.ts

@@ -1,8 +1,9 @@
 import { Type } from '@openmrs/esm-framework';
+
 export const attachmentsConfigSchema = {
-  fileSize: {
+  maxFileSize: {
     _type: Type.Number,
-    _description: 'Max file size limit to upload (in MB)',
+    _description: 'Maximum allowed upload file size (in MB)',
     _default: 1,
   },
 };

packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx → packages/esm-patient-attachments-app/src/attachments/attachment-preview.component.tsx

@@ -4,26 +4,29 @@ import { useTranslation } from 'react-i18next';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { Close } from '@carbon/react/icons';
 import { type Attachment, useLayoutType } from '@openmrs/esm-framework';
-import styles from './image-preview.scss';
+import styles from './attachment-preview.scss';
 
 interface AttachmentPreviewProps {
-  closePreview: any;
   attachmentToPreview: Attachment;
-  deleteAttachment: (attachment: Attachment) => void;
+  onClosePreview: () => void;
+  onDeleteAttachment: (attachment: Attachment) => void;
 }
 
 const AttachmentPreview: React.FC<AttachmentPreviewProps> = ({
-  closePreview,
   attachmentToPreview,
-  deleteAttachment,
+  onClosePreview,
+  onDeleteAttachment,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
+  const isPdf = attachmentToPreview.bytesContentFamily === 'PDF';
+  const isImage = attachmentToPreview.bytesContentFamily === 'IMAGE';
+  const responsiveSize = isTablet ? 'lg' : 'md';
 
   useEffect(() => {
-    const closePreviewOnEscape = (evt) => {
-      if (evt.key == 'Escape') {
-        closePreview();
+    const closePreviewOnEscape = (event) => {
+      if (event.key == 'Escape') {
+        onClosePreview();
       }
     };
 
@@ -32,42 +35,41 @@ const AttachmentPreview: React.FC<AttachmentPreviewProps> = ({
     return () => {
       window.removeEventListener('keydown', closePreviewOnEscape);
     };
-  }, [closePreview]);
+  }, [onClosePreview]);
 
   return (
-    <div className={styles.attachmentPreview}>
+    <div className={styles.previewContainer}>
       <div className={styles.leftPanel}>
         <Button
-          iconDescription={t('closePreview', 'Close preview')}
-          label={t('closePreview', 'Close preview')}
-          kind="ghost"
-          size="md"
           className={styles.closePreviewButton}
           hasIconOnly
+          iconDescription={t('closePreview', 'Close preview')}
+          kind="ghost"
+          label={t('closePreview', 'Close preview')}
+          onClick={onClosePreview}
           renderIcon={Close}
-          onClick={closePreview}
+          size={responsiveSize}
         />
-        <div className={styles.attachmentImage}>
-          {attachmentToPreview.bytesContentFamily === 'IMAGE' ? (
-            <img src={attachmentToPreview.src} alt={attachmentToPreview.title} />
-          ) : attachmentToPreview.bytesContentFamily === 'PDF' ? (
-            <iframe title="PDFViewer" className={styles.pdfViewer} src={attachmentToPreview.src} />
+        <div className={styles.attachmentPreview}>
+          {isImage ? (
+            <img src={attachmentToPreview.src} alt={attachmentToPreview.filename} />
+          ) : isPdf ? (
+            <iframe className={styles.pdfViewer} src={attachmentToPreview.src} title="PDFViewer" />
           ) : null}
         </div>
-        <div className={styles.overflowMenu}>
-          <OverflowMenu className={styles.overflowMenu} flipped size={isTablet ? 'lg' : 'md'}>
-            <OverflowMenuItem
-              className={styles.menuItem}
-              hasDivider
-              isDelete
-              itemText={t('deleteImage', 'Delete image')}
-              onClick={() => deleteAttachment(attachmentToPreview)}
-            />
-          </OverflowMenu>
-        </div>
+        <OverflowMenu className={styles.overflowMenu} flipped size={responsiveSize}>
+          <OverflowMenuItem
+            aria-label={t('options', 'Options')}
+            className={styles.menuItem}
+            hasDivider
+            isDelete
+            itemText={isPdf ? t('deletePdf', 'Delete PDF') : t('deleteImage', 'Delete image')}
+            onClick={() => onDeleteAttachment(attachmentToPreview)}
+          />
+        </OverflowMenu>
       </div>
       <div className={styles.rightPanel}>
-        <h4 className={styles.productiveHeading02}>{attachmentToPreview.title}</h4>
+        <h4 className={styles.title}>{attachmentToPreview.filename}</h4>
         {attachmentToPreview?.description ? (
           <p className={classNames(styles.bodyLong01, styles.imageDescription)}>{attachmentToPreview.description}</p>
         ) : null}

packages/esm-patient-attachments-app/src/attachments/image-preview.scss → packages/esm-patient-attachments-app/src/attachments/attachment-preview.scss

@@ -2,7 +2,7 @@
 @use '~@carbon/styles/scss/colors';
 @import "../root.scss";
 
-.attachmentPreview {
+.previewContainer {
   display: grid;
   grid-template-columns: 1fr 16rem;
   position: fixed;
@@ -26,15 +26,13 @@
   color: $ui-01;
 }
 
-.closePreviewButton > svg > path {
-  fill: $ui-01 !important;
-}
-
-.closePreviewButton:hover > svg > path {
-  fill: $ui-05 !important;
+.closePreviewButton {
+  > svg {
+    fill: white !important;
+  }
 }
 
-.attachmentImage {
+.attachmentPreview {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,13 +49,14 @@
   }
 }
 
-.overflowMenu button svg circle{
-  fill: $ui-01;
-}
+.overflowMenu {
+  &:hover {
+    background-color: hsla(0,0%,55%,.12) !important;
+  }
 
-.overflowMenu:hover button svg circle,
-.overflowMenu:focus button svg circle {
-  fill: $ui-05;
+  svg {
+    fill: white;
+  }
 }
 
 .imageDescription {
@@ -67,3 +66,10 @@
 .menuItem {
   max-width: none;
 }
+
+.title {
+  @extend .productiveHeading02;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx

@@ -1,6 +1,25 @@
 import React from 'react';
-import styles from './attachment-thumbnail.scss';
 import { DocumentPdf, DocumentUnknown } from '@carbon/react/icons';
+import styles from './attachment-thumbnail.scss';
+
+type AttachmentThumbnailProps = {
+  imageProps: ImageProps;
+  item: ItemProps;
+};
+
+type ImageProps = {
+  src: string;
+  title: string;
+  style: Object;
+  onClick?: () => void;
+};
+
+type ItemProps = {
+  id: string;
+  dateTime: string;
+  bytesMimeType: string;
+  bytesContentFamily: string;
+};
 
 export default function AttachmentThumbnail(props: AttachmentThumbnailProps) {
   return (
@@ -52,22 +71,3 @@ function Thumbnail(props: AttachmentThumbnailProps) {
     return <OtherThumbnail {...imageProps} />;
   }
 }
-
-type AttachmentThumbnailProps = {
-  imageProps: ImageProps;
-  item: ItemProps;
-};
-
-type ImageProps = {
-  src: string;
-  title: string;
-  style: Object;
-  onClick?: () => void;
-};
-
-type ItemProps = {
-  id: string;
-  dateTime: string;
-  bytesMimeType: string;
-  bytesContentFamily: string;
-};

packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import classNames from 'classnames';
 import { SkeletonPlaceholder } from '@carbon/react';
 import { type Attachment } from '@openmrs/esm-framework';
 import AttachmentThumbnail from './attachment-thumbnail.component';
@@ -8,14 +7,13 @@ import styles from './attachments-grid-overview.scss';
 interface AttachmentsGridOverviewProps {
   isLoading: boolean;
   attachments: Array<Attachment>;
-  deleteAttachment: (attachment: Attachment) => void;
-  openAttachment: (attachment: Attachment) => void;
+  onOpenAttachment: (attachment: Attachment) => void;
 }
 
 const AttachmentsGridOverview: React.FC<AttachmentsGridOverviewProps> = ({
   attachments,
   isLoading,
-  openAttachment,
+  onOpenAttachment: openAttachment,
 }) => {
   if (isLoading) {
     return (
@@ -30,26 +28,22 @@ const AttachmentsGridOverview: React.FC<AttachmentsGridOverviewProps> = ({
 
   return (
     <div className={styles.galleryContainer}>
-      {attachments.map((attachment, indx) => {
+      {attachments.map((attachment, i) => {
         const imageProps = {
           src: attachment.src,
-          title: attachment.title,
+          title: attachment.filename,
           style: {},
-          onClick: () => {
-            openAttachment(attachment);
-          },
-        };
-        const item = {
-          id: attachment.id,
-          dateTime: attachment.dateTime,
-          bytesMimeType: attachment.bytesMimeType,
-          bytesContentFamily: attachment.bytesContentFamily,
+          onClick: () => openAttachment(attachment),
         };
+
+        const { id, dateTime, bytesMimeType, bytesContentFamily } = attachment;
+        const item = { id, dateTime, bytesMimeType, bytesContentFamily };
+
         return (
-          <div key={indx}>
+          <div key={i}>
             <AttachmentThumbnail imageProps={imageProps} item={item} />
-            <p className={styles.bodyLong01}>{attachment.title}</p>
-            <p className={classNames(styles.bodyLong01, styles.muted)}>{attachment.dateTime}</p>
+            <p className={styles.title}>{attachment.filename}</p>
+            <p className={styles.muted}>{attachment.dateTime}</p>
           </div>
         );
       })}

packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss

@@ -1,13 +1,13 @@
 @use '@carbon/styles/scss/spacing';
 @use '~@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
 @import '../root.scss';
 
 .galleryContainer {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  align-items: center;
+  grid-template-columns: repeat(3, 1fr);
   grid-gap: spacing.$spacing-05;
-  padding: 0 spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05;
+  padding: spacing.$spacing-05;
 }
 
 .attachmentThumbnailSkeleton {
@@ -18,3 +18,14 @@
   object-fit: cover;
 }
 
+.muted {
+  color: $color-gray-70;
+  @include type.type-style("label-01");
+  margin: 0.25rem;
+}
+
+.title {
+  @extend .bodyLong01;
+  color: colors.$gray-100;
+  margin: 0.25rem;
+}