From 1b7941f67c4ebc1fda053f23d8b33f4720f7d068 Mon Sep 17 00:00:00 2001
From: benjamin <bniyonshuti@pih.org>
Date: Wed, 29 Jun 2022 09:37:10 +0200
Subject: [PATCH 1/6] Progress work: Adding edit button on programs widget

---
 .../attachment-thumbnail.component.tsx        |  7 +++++-
 .../attachments-overview.component.tsx        |  6 ++---
 .../src/attachments/attachments.resource.tsx  |  4 +--
 .../chart-review/dashboard-view.component.tsx |  2 +-
 .../programs-detailed-summary.component.tsx   | 25 ++++++++++++++++++-
 .../src/programs/programs-form.component.tsx  | 19 ++++++++------
 6 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
index cd9ded79cd..91ef6e09a7 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
@@ -3,9 +3,14 @@ import styles from './attachment-thumbnail.scss';
 import regularFile from '../assets/file-regular.svg';
 
 export default function AttachmentThumbnail(props: AttachmentThumbnailProps) {
+
+  console.log("==================" , props)
   return (
     <div className={styles.thumbnail}>
-      <Thumbnail {...props} />
+      {/* <Thumbnail {...props} /> */}
+      {
+        props.imageProps.title
+      }
     </div>
   );
 }
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
index 45a28dcf9e..81ade65d5e 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
@@ -76,11 +76,11 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid })
   const pushAttachments = useCallback(async (items: Array<any>, abortController: AbortController) => {
     const newAttachments = await Promise.all(
       items.map(async (item) => {
-        if (!item.bytesContentFamily) {
+       // if (!item.bytesContentFamily) {
           const { data } = await getAttachmentByUuid(item.uuid, abortController);
           item.bytesContentFamily = data.bytesContentFamily;
-        }
-
+        //}
+        
         return {
           ...createGalleryEntry(item),
           customOverlay: item.comment && (
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
index 072ab1ef3c..dd5bb46636 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
@@ -9,8 +9,8 @@ export function getAttachmentByUuid(attachmentUuid: string, abortController: Abo
 }
 
 export function getAttachments(patientUuid: string, includeEncounterless: boolean, abortController: AbortController) {
-  return openmrsFetch(`${attachmentUrl}?patient=${patientUuid}&includeEncounterless=${includeEncounterless}`, {
-    signal: abortController.signal,
+  return openmrsFetch(`${attachmentUrl}?patient=${patientUuid}&includeEncounterless=${includeEncounterless}&v=full`, {
+    signal: abortController.signal, 
   });
 }
 
diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
index 0543c4ca10..600fc69c31 100644
--- a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
+++ b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
@@ -47,7 +47,7 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
 
   const wrapItem = React.useCallback(
     (slot: React.ReactNode, extension: ExtensionData) => {
-      const { columnSpan = 1 } = dashboardMeta[getExtensionNameFromId(extension.extensionId)];
+      const { columnSpan = 2 } = dashboardMeta[getExtensionNameFromId(extension.extensionId)];
       return <div style={{ gridColumn: `span ${columnSpan}` }}>{slot}</div>;
     },
     [dashboardMeta],
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
index 19fb174ad1..b4e87654ae 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Add16 from '@carbon/icons-react/es/add/16';
+import Edit16 from '@carbon/icons-react/es/edit/16';
 import filter from 'lodash-es/filter';
 import includes from 'lodash-es/includes';
 import map from 'lodash-es/map';
@@ -59,6 +60,10 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
         key: 'status',
         header: t('status', 'Status'),
       },
+      {
+        key: 'actions',
+        header: t('actions', 'Actions'),
+      },
     ],
     [t],
   );
@@ -73,6 +78,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
         status: program.dateCompleted
           ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(program.dateCompleted))}`
           : t('active', 'Active'),
+        actions: <ProgramEditButton programEnrollmentId={program.uuid} />
       };
     });
   }, [enrollments, t]);
@@ -143,4 +149,21 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
   return <EmptyState displayText={displayText} headerTitle={headerTitle} launchForm={launchProgramsForm} />;
 };
 
-export default ProgramsDetailedSummary;
+interface ProgramEditButtonProps {
+  programEnrollmentId: string
+}
+
+function ProgramEditButton ({programEnrollmentId}: ProgramEditButtonProps){
+
+  const launchEditProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace', {programEnrollmentId}), []);
+
+  return <Button 
+  kind="ghost"
+  renderIcon={Edit16}
+  iconDescription="Edit Program"
+  onClick={launchEditProgramsForm}
+  />
+}
+
+
+export default ProgramsDetailedSummary;
\ No newline at end of file
diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
index c8e1a4d527..9204195c5e 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
@@ -32,7 +32,11 @@ import {
 import { DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import styles from './programs-form.scss';
 
-const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
+interface ProgramsFormProps extends DefaultWorkspaceProps {
+  programEnrollmentId?: string
+}
+
+const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid, programEnrollmentId }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
@@ -41,16 +45,17 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
 
   const { data: availablePrograms } = useAvailablePrograms();
   const { data: enrollments } = useEnrollments(patientUuid);
+  const  currentEnrollment = programEnrollmentId && enrollments.filter((e) => e.uuid == programEnrollmentId  ) [0];
 
-  const eligiblePrograms = filter(
+  const eligiblePrograms = currentEnrollment ? [currentEnrollment.program] : filter(
     availablePrograms,
     (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
   );
-
-  const [completionDate, setCompletionDate] = React.useState(null);
-  const [enrollmentDate, setEnrollmentDate] = React.useState(new Date());
-  const [selectedProgram, setSelectedProgram] = React.useState<string>('');
-  const [userLocation, setUserLocation] = React.useState('');
+    console.log("ppppp" , currentEnrollment,  eligiblePrograms)
+  const [completionDate, setCompletionDate] = React.useState(currentEnrollment?.dateCompleted);
+  const [enrollmentDate, setEnrollmentDate] = React.useState(currentEnrollment?.dateEnrolled ?? new Date());
+  const [selectedProgram, setSelectedProgram] = React.useState(currentEnrollment?.program.uuid ?? '');
+  const [userLocation, setUserLocation] = React.useState(currentEnrollment?.location.uuid ?? '');
 
   if (!userLocation && session?.sessionLocation?.uuid) {
     setUserLocation(session?.sessionLocation?.uuid);

From 8538cc1f78af6e488bf1aebae547d23e98482b45 Mon Sep 17 00:00:00 2001
From: benjamin <bniyonshuti@pih.org>
Date: Wed, 29 Jun 2022 09:37:32 +0200
Subject: [PATCH 2/6] Translation

---
 packages/esm-patient-programs-app/translations/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/esm-patient-programs-app/translations/en.json b/packages/esm-patient-programs-app/translations/en.json
index 851b3c262d..897f8e7f9f 100644
--- a/packages/esm-patient-programs-app/translations/en.json
+++ b/packages/esm-patient-programs-app/translations/en.json
@@ -1,4 +1,5 @@
 {
+  "actions": "Actions",
   "active": "Active",
   "activePrograms": "Active programs",
   "add": "Add",

From 17e3c4136c5abbb928f45f355fd133da3e56622e Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Wed, 29 Jun 2022 11:20:08 +0200
Subject: [PATCH 3/6] (feat) Should be able to edit program enrollments

---
 .../src/programs/programs-form.component.tsx  | 48 +++++++++++++++----
 .../src/programs/programs.resource.tsx        |  4 +-
 .../src/types/index.ts                        |  8 +++-
 .../translations/en.json                      |  4 +-
 4 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
index 9204195c5e..daa295f2d9 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
@@ -12,6 +12,7 @@ import {
   useSession,
   useLocations,
   useLayoutType,
+  parseDate,
 } from '@openmrs/esm-framework';
 import {
   Button,
@@ -28,6 +29,7 @@ import {
   useAvailablePrograms,
   useEnrollments,
   customRepresentation,
+  updateProgramEnrollment,
 } from './programs.resource';
 import { DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import styles from './programs-form.scss';
@@ -46,16 +48,19 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
   const { data: availablePrograms } = useAvailablePrograms();
   const { data: enrollments } = useEnrollments(patientUuid);
   const  currentEnrollment = programEnrollmentId && enrollments.filter((e) => e.uuid == programEnrollmentId  ) [0];
+  const currentProgram = currentEnrollment ? {
+    display: currentEnrollment.program.name,
+    ...currentEnrollment.program
+  } : null;
 
-  const eligiblePrograms = currentEnrollment ? [currentEnrollment.program] : filter(
+  const eligiblePrograms = currentProgram ? [currentProgram] : filter(
     availablePrograms,
     (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
   );
-    console.log("ppppp" , currentEnrollment,  eligiblePrograms)
-  const [completionDate, setCompletionDate] = React.useState(currentEnrollment?.dateCompleted);
-  const [enrollmentDate, setEnrollmentDate] = React.useState(currentEnrollment?.dateEnrolled ?? new Date());
-  const [selectedProgram, setSelectedProgram] = React.useState(currentEnrollment?.program.uuid ?? '');
-  const [userLocation, setUserLocation] = React.useState(currentEnrollment?.location.uuid ?? '');
+  const [completionDate, setCompletionDate] = React.useState<Date>(currentEnrollment?.dateCompleted ? parseDate(currentEnrollment.dateCompleted) : null);
+  const [enrollmentDate, setEnrollmentDate] = React.useState<Date>(currentEnrollment?.dateEnrolled ? parseDate(currentEnrollment.dateEnrolled) : new Date());
+  const [selectedProgram, setSelectedProgram] = React.useState<string>(currentEnrollment?.program.uuid ?? '');
+  const [userLocation, setUserLocation] = React.useState<string>(currentEnrollment?.location.uuid ?? '');
 
   if (!userLocation && session?.sessionLocation?.uuid) {
     setUserLocation(session?.sessionLocation?.uuid);
@@ -76,7 +81,34 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
       };
 
       const abortController = new AbortController();
-      const sub = createProgramEnrollment(payload, abortController).subscribe(
+      const sub = currentEnrollment ?
+       updateProgramEnrollment(currentEnrollment.uuid, payload, abortController).subscribe(
+        (response) => {
+          if (response.status === 200) {
+            closeWorkspace();
+
+            showToast({
+              critical: true,
+              kind: 'success',
+              description: t('enrollmentUpdatesNowVisible', 'Changes to the program are now visible in the Programs table'),
+              title: t('enrollmentUpdated', 'Program enrollment updated'),
+            });
+
+            mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+          }
+        },
+        (err) => {
+          createErrorHandler();
+
+          showNotification({
+            title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+            kind: 'error',
+            critical: true,
+            description: err?.message,
+          });
+        },
+      )
+      : createProgramEnrollment(payload, abortController).subscribe(
         (response) => {
           if (response.status === 201) {
             closeWorkspace();
@@ -84,7 +116,7 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
             showToast({
               critical: true,
               kind: 'success',
-              description: t('enrollmentNowVisible', 'It is now visible on the Programs page'),
+              description: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
               title: t('enrollmentSaved', 'Program enrollment saved'),
             });
 
diff --git a/packages/esm-patient-programs-app/src/programs/programs.resource.tsx b/packages/esm-patient-programs-app/src/programs/programs.resource.tsx
index f53c11d72a..ce585ebd4a 100644
--- a/packages/esm-patient-programs-app/src/programs/programs.resource.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs.resource.tsx
@@ -59,12 +59,12 @@ export function createProgramEnrollment(payload, abortController) {
   });
 }
 
-export function updateProgramEnrollment(payload, abortController) {
+export function updateProgramEnrollment(programEnrollmentUuid: string, payload, abortController) {
   if (!payload && !payload.program) {
     return null;
   }
   const { program, dateEnrolled, dateCompleted, location } = payload;
-  return openmrsObservableFetch(`/ws/rest/v1/programenrollment/${program}`, {
+  return openmrsObservableFetch(`/ws/rest/v1/programenrollment/${programEnrollmentUuid}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
diff --git a/packages/esm-patient-programs-app/src/types/index.ts b/packages/esm-patient-programs-app/src/types/index.ts
index 616ed48739..b4ce719401 100644
--- a/packages/esm-patient-programs-app/src/types/index.ts
+++ b/packages/esm-patient-programs-app/src/types/index.ts
@@ -15,11 +15,15 @@ export interface PatientProgram {
       states: Array<{}>;
       links?: Links;
     }>;
+    concept: {
+      display: string;
+      uuid: string;
+    };
     links: Links;
   };
   display: string;
-  dateEnrolled: Date;
-  dateCompleted: Date | null;
+  dateEnrolled: string;
+  dateCompleted: string | null;
   location?: {
     uuid: string;
     display: string;
diff --git a/packages/esm-patient-programs-app/translations/en.json b/packages/esm-patient-programs-app/translations/en.json
index 897f8e7f9f..ecab48f42f 100644
--- a/packages/esm-patient-programs-app/translations/en.json
+++ b/packages/esm-patient-programs-app/translations/en.json
@@ -11,8 +11,10 @@
   "dateCompleted": "Date completed",
   "dateEnrolled": "Date enrolled",
   "enrollmentLocation": "Enrollment location",
-  "enrollmentNowVisible": "It is now visible on the Programs page",
+  "enrollmentNowVisible": "It is now visible in the Programs table",
   "enrollmentSaved": "Program enrollment saved",
+  "enrollmentUpdated": "Program enrollment updated",
+  "enrollmentUpdatesNowVisible": "Changes to the program are now visible in the Programs table",
   "fullyEnrolled": "Enrolled in all programs",
   "location": "Location",
   "noEligibleEnrollments": "There are no more programs left to enroll this patient in",

From 1e720fa70444171453abe8ae5626de7bee09b238 Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Wed, 29 Jun 2022 13:42:16 +0200
Subject: [PATCH 4/6] Update tests

---
 __mocks__/programs.mock.ts                    |   5 +-
 .../programs-detailed-summary.component.tsx   |  11 +-
 .../programs-detailed-summary.test.tsx        |  15 +-
 .../src/programs/programs-form.test.tsx       | 137 ++++++++++++++----
 4 files changed, 133 insertions(+), 35 deletions(-)

diff --git a/__mocks__/programs.mock.ts b/__mocks__/programs.mock.ts
index 696804fe1d..06654e236b 100644
--- a/__mocks__/programs.mock.ts
+++ b/__mocks__/programs.mock.ts
@@ -52,7 +52,10 @@ export const mockEnrolledProgramsResponse = [
       allWorkflows: [],
     },
     display: 'HIV Care and Treatment',
-    location: { display: 'Location Test' },
+    location: {
+      uuid: 'aff27d58-a15c-49a6-9beb-d30dcfc0c66e',
+      display: 'Amani Hospital'
+    },
     dateEnrolled: '2020-01-16T00:00:00.000+0000',
     dateCompleted: null,
   },
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
index b4e87654ae..54c4c13b6c 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
@@ -158,11 +158,12 @@ function ProgramEditButton ({programEnrollmentId}: ProgramEditButtonProps){
   const launchEditProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace', {programEnrollmentId}), []);
 
   return <Button 
-  kind="ghost"
-  renderIcon={Edit16}
-  iconDescription="Edit Program"
-  onClick={launchEditProgramsForm}
-  />
+    kind="ghost"
+    renderIcon={Edit16}
+    iconDescription="Edit Program"
+    onClick={launchEditProgramsForm}
+    hasIconOnly
+    />
 }
 
 
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx
index c81be770be..7f62b31e0c 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { openmrsFetch, usePagination } from '@openmrs/esm-framework';
 import { mockEnrolledProgramsResponse } from '../../../../__mocks__/programs.mock';
@@ -89,13 +89,20 @@ describe('ProgramsDetailedSummary ', () => {
 
     const addButton = screen.getByRole('button', { name: /Add/ });
     expect(addButton).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /hiv care and treatment/i })).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /16-Jan-2020/i })).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /active$/i })).toBeInTheDocument();
+    const row = screen.getByRole('row', { name: /hiv care and treatment/i });
+    expect(row).toBeInTheDocument();
+    expect(within(row).getByRole('cell', { name: /16-Jan-2020/i })).toBeInTheDocument();
+    expect(within(row).getByRole('cell', { name: /active$/i })).toBeInTheDocument();
+    const editButton = within(row).getByRole('button', { name: /Edit Program$/i });
+    expect(editButton).toBeInTheDocument();
 
     // Clicking "Add" launches the programs form in a workspace
     userEvent.click(addButton);
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace');
+
+    // Clicking the edit button launches the edit form in a workspace
+    userEvent.click(editButton);
+    expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', { programEnrollmentId: mockEnrolledProgramsResponse[0].uuid })
   });
 });
 
diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
index b31e698d57..a3f5079134 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import { throwError } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createErrorHandler, openmrsFetch, showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
+import { createErrorHandler, formatDate, openmrsFetch, parseDate, showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
 import { mockPatient } from '../../../../__mocks__/patient.mock';
 import {
   mockCareProgramsResponse,
   mockEnrolledProgramsResponse,
   mockLocationsResponse,
+  mockProgramResponse,
 } from '../../../../__mocks__/programs.mock';
-import { createProgramEnrollment } from './programs.resource';
+import { createProgramEnrollment, updateProgramEnrollment } from './programs.resource';
 import ProgramsForm from './programs-form.component';
 
 const testProps = {
@@ -21,6 +22,7 @@ const testProps = {
 
 const mockCreateErrorHandler = createErrorHandler as jest.Mock;
 const mockCreateProgramEnrollment = createProgramEnrollment as jest.Mock;
+const mockUpdateProgramEnrollment = updateProgramEnrollment as jest.Mock;
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockShowNotification = showNotification as jest.Mock;
 const mockShowToast = showToast as jest.Mock;
@@ -44,15 +46,21 @@ jest.mock('./programs.resource', () => {
   return {
     ...originalModule,
     createProgramEnrollment: jest.fn(),
+    updateProgramEnrollment: jest.fn(),
   };
 });
 
-describe('ProgramsForm: ', () => {
-  beforeEach(() => {
-    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockCareProgramsResponse } });
-    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
-  });
+mockOpenmrsFetch.mockImplementation((url) => {
+  if (/programenrollment/.test(url)) {
+    return { data: { results: mockEnrolledProgramsResponse } }
+  } else if (/program/.test(url)) {
+    return { data: { results: mockCareProgramsResponse } }
+  } else {
+    return null;
+  }});
 
+describe('ProgramsForm: ', () => {
+  
   it('renders the programs form with all the relevant fields and values', async () => {
     renderProgramsForm();
 
@@ -75,6 +83,36 @@ describe('ProgramsForm: ', () => {
     expect(enrollButton).toBeDisabled();
   });
 
+  it('renders the edit program form with existing data', async () => {
+    renderProgramsForm(mockEnrolledProgramsResponse[0].uuid);
+
+    const programSelect = await screen.findByRole('group', { name: /Program/i });
+    expect(within(programSelect).getByRole('option', { name: /HIV Care and Treatment/ })).toBeInTheDocument();
+    expect(within(programSelect).getAllByRole('option').length).toBe(1);
+
+    const dateEnrolledGroup = screen.getByRole('group', { name: /Date enrolled/i });
+    expect(dateEnrolledGroup).toBeInTheDocument();
+    const dateEnrolledInput = within(dateEnrolledGroup).getByRole('textbox');
+    expect(dateEnrolledInput).toHaveValue('16/01/2020');
+
+    expect(screen.getByRole('group', { name: /Date completed/i })).toBeInTheDocument();
+
+    const enrollmentLocation = screen.getByRole('group', { name: /Enrollment location/i });
+    const locationSelect = within(enrollmentLocation).getByRole('combobox');
+    const amani = screen.getByRole('option', { name: /Amani Hospital/i });
+    expect(amani).toBeInTheDocument();
+    expect(locationSelect).toHaveValue(mockLocationsResponse[0].uuid);
+    expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Isolation Ward/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Laboratory/i })).toBeInTheDocument();
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    expect(cancelButton).toBeInTheDocument();
+    expect(enrollButton).toBeInTheDocument();
+    expect(enrollButton).not.toBeDisabled();
+  });
+
   it('closes the form and the workspace when the cancel button is clicked', () => {
     renderProgramsForm();
 
@@ -96,28 +134,27 @@ describe('ProgramsForm: ', () => {
   describe('Form submission: ', () => {
     const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
     const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
-    let cancelButton: HTMLElement;
-    let enrollButton: HTMLElement;
-    let enrollmentDateInput: HTMLElement;
-    let selectLocationInput: HTMLElement;
-    let selectProgramInput: HTMLElement;
+    
+  beforeEach(() => {
+    mockShowToast.mockReset();
+  })
 
-    beforeEach(() => {
+    it('creates a program enrollment', async () => {
       renderProgramsForm();
 
-      cancelButton = screen.getByRole('button', { name: /cancel/i });
-      enrollButton = screen.getByRole('button', { name: /save and close/i });
-      enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
-      selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
-      selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
-    });
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      const enrollButton = screen.getByRole('button', { name: /save and close/i });
+      const enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+      const selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+      const selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
 
-    it('renders a success toast notification upon successfully recording a program enrollment', async () => {
       mockCreateProgramEnrollment.mockReturnValueOnce(of({ status: 201, statusText: 'Created' }));
 
       userEvent.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]);
       userEvent.selectOptions(selectLocationInput, [inpatientWardUuid]);
-      userEvent.type(enrollmentDateInput, '2020-05-05');
+      userEvent.clear(enrollmentDateInput);
+      userEvent.type(enrollmentDateInput, '05/05/2020');
+      fireEvent.blur(enrollmentDateInput);
 
       expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
       expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
@@ -128,6 +165,7 @@ describe('ProgramsForm: ', () => {
       expect(mockCreateProgramEnrollment).toHaveBeenCalledTimes(1);
       expect(mockCreateProgramEnrollment).toHaveBeenCalledWith(
         expect.objectContaining({
+          dateEnrolled: '2020-05-05T00:00:00+00:00',
           dateCompleted: null,
           location: inpatientWardUuid,
           patient: mockPatient.id,
@@ -140,14 +178,63 @@ describe('ProgramsForm: ', () => {
       expect(mockShowToast).toHaveBeenCalledWith(
         expect.objectContaining({
           critical: true,
-          description: 'It is now visible on the Programs page',
+          description: 'It is now visible in the Programs table',
           kind: 'success',
           title: 'Program enrollment saved',
         }),
       );
     });
 
+    it('updates a program enrollment', async () => {
+      renderProgramsForm(mockEnrolledProgramsResponse[0].uuid);
+
+      const enrollButton = screen.getByRole('button', { name: /save and close/i });
+      const dateCompletedGroup = screen.getByRole('group', { name: /Date completed/i });
+      const dateCompletedInput = within(dateCompletedGroup).getByRole('textbox');
+
+      mockUpdateProgramEnrollment.mockReturnValueOnce(of({ status: 200, statusText: 'OK' }));
+
+      userEvent.type(dateCompletedInput, '05/05/2020');
+      expect(dateCompletedInput).toHaveValue('05/05/2020');
+      fireEvent.blur(dateCompletedInput);
+
+      expect(enrollButton).not.toBeDisabled();
+
+      await waitFor(() => userEvent.click(enrollButton));
+
+      expect(mockUpdateProgramEnrollment).toHaveBeenCalledTimes(1);
+      expect(mockUpdateProgramEnrollment).toHaveBeenCalledWith(
+        mockEnrolledProgramsResponse[0].uuid,
+        expect.objectContaining({
+          dateEnrolled: '2020-01-16T00:00:00+00:00',
+          dateCompleted: '2020-05-05T00:00:00+00:00',
+          location: mockEnrolledProgramsResponse[0].location.uuid,
+          patient: mockPatient.id,
+          program: mockEnrolledProgramsResponse[0].program.uuid,
+        }),
+        new AbortController(),
+      );
+
+      expect(mockShowToast).toHaveBeenCalledTimes(1);
+      expect(mockShowToast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          critical: true,
+          description: 'Changes to the program are now visible in the Programs table',
+          kind: 'success',
+          title: 'Program enrollment updated',
+        }),
+      );
+    });
+
     xit('renders an error notification if there was a problem recording a program enrollment', async () => {
+      renderProgramsForm();
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      const enrollButton = screen.getByRole('button', { name: /save and close/i });
+      const enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+      const selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+      const selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
+
       const error = {
         message: 'Internal Server Error',
         response: {
@@ -180,6 +267,6 @@ describe('ProgramsForm: ', () => {
   });
 });
 
-function renderProgramsForm() {
-  render(<ProgramsForm {...testProps} />);
+function renderProgramsForm(programEnrollmentUuidToEdit?: string) {
+  render(<ProgramsForm {...testProps} programEnrollmentId={programEnrollmentUuidToEdit} />);
 }

From d4e4856a726760a508237e6f1c20ba4749006e77 Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Wed, 29 Jun 2022 13:44:11 +0200
Subject: [PATCH 5/6] Prettier

---
 .../attachment-thumbnail.component.tsx        |   6 +-
 .../attachments-overview.component.tsx        |   8 +-
 .../src/attachments/attachments.resource.tsx  |   2 +-
 .../programs-detailed-summary.component.tsx   |  29 ++--
 .../programs-detailed-summary.test.tsx        |   4 +-
 .../src/programs/programs-form.component.tsx  | 138 +++++++++---------
 .../src/programs/programs-form.test.tsx       |  26 ++--
 7 files changed, 115 insertions(+), 98 deletions(-)

diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
index 91ef6e09a7..77a569b69d 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
@@ -3,14 +3,10 @@ import styles from './attachment-thumbnail.scss';
 import regularFile from '../assets/file-regular.svg';
 
 export default function AttachmentThumbnail(props: AttachmentThumbnailProps) {
-
-  console.log("==================" , props)
   return (
     <div className={styles.thumbnail}>
       {/* <Thumbnail {...props} /> */}
-      {
-        props.imageProps.title
-      }
+      {props.imageProps.title}
     </div>
   );
 }
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
index 81ade65d5e..4c600dbe1c 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
@@ -76,11 +76,11 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid })
   const pushAttachments = useCallback(async (items: Array<any>, abortController: AbortController) => {
     const newAttachments = await Promise.all(
       items.map(async (item) => {
-       // if (!item.bytesContentFamily) {
-          const { data } = await getAttachmentByUuid(item.uuid, abortController);
-          item.bytesContentFamily = data.bytesContentFamily;
+        // if (!item.bytesContentFamily) {
+        const { data } = await getAttachmentByUuid(item.uuid, abortController);
+        item.bytesContentFamily = data.bytesContentFamily;
         //}
-        
+
         return {
           ...createGalleryEntry(item),
           customOverlay: item.comment && (
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
index dd5bb46636..91bd90b3a0 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
@@ -10,7 +10,7 @@ export function getAttachmentByUuid(attachmentUuid: string, abortController: Abo
 
 export function getAttachments(patientUuid: string, includeEncounterless: boolean, abortController: AbortController) {
   return openmrsFetch(`${attachmentUrl}?patient=${patientUuid}&includeEncounterless=${includeEncounterless}&v=full`, {
-    signal: abortController.signal, 
+    signal: abortController.signal,
   });
 }
 
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
index 54c4c13b6c..a5cb1af5e7 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
@@ -78,7 +78,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
         status: program.dateCompleted
           ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(program.dateCompleted))}`
           : t('active', 'Active'),
-        actions: <ProgramEditButton programEnrollmentId={program.uuid} />
+        actions: <ProgramEditButton programEnrollmentId={program.uuid} />,
       };
     });
   }, [enrollments, t]);
@@ -150,21 +150,24 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
 };
 
 interface ProgramEditButtonProps {
-  programEnrollmentId: string
+  programEnrollmentId: string;
 }
 
-function ProgramEditButton ({programEnrollmentId}: ProgramEditButtonProps){
-
-  const launchEditProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace', {programEnrollmentId}), []);
+function ProgramEditButton({ programEnrollmentId }: ProgramEditButtonProps) {
+  const launchEditProgramsForm = React.useCallback(
+    () => launchPatientWorkspace('programs-form-workspace', { programEnrollmentId }),
+    [],
+  );
 
-  return <Button 
-    kind="ghost"
-    renderIcon={Edit16}
-    iconDescription="Edit Program"
-    onClick={launchEditProgramsForm}
-    hasIconOnly
+  return (
+    <Button
+      kind="ghost"
+      renderIcon={Edit16}
+      iconDescription="Edit Program"
+      onClick={launchEditProgramsForm}
+      hasIconOnly
     />
+  );
 }
 
-
-export default ProgramsDetailedSummary;
\ No newline at end of file
+export default ProgramsDetailedSummary;
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx
index 7f62b31e0c..a41de0f678 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.test.tsx
@@ -102,7 +102,9 @@ describe('ProgramsDetailedSummary ', () => {
 
     // Clicking the edit button launches the edit form in a workspace
     userEvent.click(editButton);
-    expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', { programEnrollmentId: mockEnrolledProgramsResponse[0].uuid })
+    expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', {
+      programEnrollmentId: mockEnrolledProgramsResponse[0].uuid,
+    });
   });
 });
 
diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
index daa295f2d9..df2a5bef34 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
@@ -35,7 +35,7 @@ import { DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import styles from './programs-form.scss';
 
 interface ProgramsFormProps extends DefaultWorkspaceProps {
-  programEnrollmentId?: string
+  programEnrollmentId?: string;
 }
 
 const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid, programEnrollmentId }) => {
@@ -47,18 +47,23 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
 
   const { data: availablePrograms } = useAvailablePrograms();
   const { data: enrollments } = useEnrollments(patientUuid);
-  const  currentEnrollment = programEnrollmentId && enrollments.filter((e) => e.uuid == programEnrollmentId  ) [0];
-  const currentProgram = currentEnrollment ? {
-    display: currentEnrollment.program.name,
-    ...currentEnrollment.program
-  } : null;
-
-  const eligiblePrograms = currentProgram ? [currentProgram] : filter(
-    availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
+  const currentEnrollment = programEnrollmentId && enrollments.filter((e) => e.uuid == programEnrollmentId)[0];
+  const currentProgram = currentEnrollment
+    ? {
+        display: currentEnrollment.program.name,
+        ...currentEnrollment.program,
+      }
+    : null;
+
+  const eligiblePrograms = currentProgram
+    ? [currentProgram]
+    : filter(availablePrograms, (program) => !includes(map(enrollments, 'program.uuid'), program.uuid));
+  const [completionDate, setCompletionDate] = React.useState<Date>(
+    currentEnrollment?.dateCompleted ? parseDate(currentEnrollment.dateCompleted) : null,
+  );
+  const [enrollmentDate, setEnrollmentDate] = React.useState<Date>(
+    currentEnrollment?.dateEnrolled ? parseDate(currentEnrollment.dateEnrolled) : new Date(),
   );
-  const [completionDate, setCompletionDate] = React.useState<Date>(currentEnrollment?.dateCompleted ? parseDate(currentEnrollment.dateCompleted) : null);
-  const [enrollmentDate, setEnrollmentDate] = React.useState<Date>(currentEnrollment?.dateEnrolled ? parseDate(currentEnrollment.dateEnrolled) : new Date());
   const [selectedProgram, setSelectedProgram] = React.useState<string>(currentEnrollment?.program.uuid ?? '');
   const [userLocation, setUserLocation] = React.useState<string>(currentEnrollment?.location.uuid ?? '');
 
@@ -81,59 +86,62 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
       };
 
       const abortController = new AbortController();
-      const sub = currentEnrollment ?
-       updateProgramEnrollment(currentEnrollment.uuid, payload, abortController).subscribe(
-        (response) => {
-          if (response.status === 200) {
-            closeWorkspace();
-
-            showToast({
-              critical: true,
-              kind: 'success',
-              description: t('enrollmentUpdatesNowVisible', 'Changes to the program are now visible in the Programs table'),
-              title: t('enrollmentUpdated', 'Program enrollment updated'),
-            });
-
-            mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
-          }
-        },
-        (err) => {
-          createErrorHandler();
-
-          showNotification({
-            title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
-            kind: 'error',
-            critical: true,
-            description: err?.message,
-          });
-        },
-      )
-      : createProgramEnrollment(payload, abortController).subscribe(
-        (response) => {
-          if (response.status === 201) {
-            closeWorkspace();
-
-            showToast({
-              critical: true,
-              kind: 'success',
-              description: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
-              title: t('enrollmentSaved', 'Program enrollment saved'),
-            });
-
-            mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
-          }
-        },
-        (err) => {
-          createErrorHandler();
-
-          showNotification({
-            title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
-            kind: 'error',
-            critical: true,
-            description: err?.message,
-          });
-        },
-      );
+      const sub = currentEnrollment
+        ? updateProgramEnrollment(currentEnrollment.uuid, payload, abortController).subscribe(
+            (response) => {
+              if (response.status === 200) {
+                closeWorkspace();
+
+                showToast({
+                  critical: true,
+                  kind: 'success',
+                  description: t(
+                    'enrollmentUpdatesNowVisible',
+                    'Changes to the program are now visible in the Programs table',
+                  ),
+                  title: t('enrollmentUpdated', 'Program enrollment updated'),
+                });
+
+                mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+              }
+            },
+            (err) => {
+              createErrorHandler();
+
+              showNotification({
+                title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+                kind: 'error',
+                critical: true,
+                description: err?.message,
+              });
+            },
+          )
+        : createProgramEnrollment(payload, abortController).subscribe(
+            (response) => {
+              if (response.status === 201) {
+                closeWorkspace();
+
+                showToast({
+                  critical: true,
+                  kind: 'success',
+                  description: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
+                  title: t('enrollmentSaved', 'Program enrollment saved'),
+                });
+
+                mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+              }
+            },
+            (err) => {
+              createErrorHandler();
+
+              showNotification({
+                title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+                kind: 'error',
+                critical: true,
+                description: err?.message,
+              });
+            },
+          );
       return () => {
         sub.unsubscribe();
       };
diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
index a3f5079134..420a85960b 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
@@ -3,7 +3,15 @@ import { throwError } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createErrorHandler, formatDate, openmrsFetch, parseDate, showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
+import {
+  createErrorHandler,
+  formatDate,
+  openmrsFetch,
+  parseDate,
+  showNotification,
+  showToast,
+  useLayoutType,
+} from '@openmrs/esm-framework';
 import { mockPatient } from '../../../../__mocks__/patient.mock';
 import {
   mockCareProgramsResponse,
@@ -52,15 +60,15 @@ jest.mock('./programs.resource', () => {
 
 mockOpenmrsFetch.mockImplementation((url) => {
   if (/programenrollment/.test(url)) {
-    return { data: { results: mockEnrolledProgramsResponse } }
+    return { data: { results: mockEnrolledProgramsResponse } };
   } else if (/program/.test(url)) {
-    return { data: { results: mockCareProgramsResponse } }
+    return { data: { results: mockCareProgramsResponse } };
   } else {
     return null;
-  }});
+  }
+});
 
 describe('ProgramsForm: ', () => {
-  
   it('renders the programs form with all the relevant fields and values', async () => {
     renderProgramsForm();
 
@@ -134,10 +142,10 @@ describe('ProgramsForm: ', () => {
   describe('Form submission: ', () => {
     const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
     const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
-    
-  beforeEach(() => {
-    mockShowToast.mockReset();
-  })
+
+    beforeEach(() => {
+      mockShowToast.mockReset();
+    });
 
     it('creates a program enrollment', async () => {
       renderProgramsForm();

From afd97aacf4204a7ef5cf2f472f47c15c1708d484 Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Wed, 29 Jun 2022 13:49:38 +0200
Subject: [PATCH 6/6] Undo changes to attachments app and dashboard-view

---
 .../src/attachments/attachment-thumbnail.component.tsx    | 3 +--
 .../src/attachments/attachments-overview.component.tsx    | 8 ++++----
 .../src/attachments/attachments.resource.tsx              | 2 +-
 .../chart-review/dashboard-view.component.tsx             | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
index 77a569b69d..cd9ded79cd 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx
@@ -5,8 +5,7 @@ import regularFile from '../assets/file-regular.svg';
 export default function AttachmentThumbnail(props: AttachmentThumbnailProps) {
   return (
     <div className={styles.thumbnail}>
-      {/* <Thumbnail {...props} /> */}
-      {props.imageProps.title}
+      <Thumbnail {...props} />
     </div>
   );
 }
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
index 4c600dbe1c..45a28dcf9e 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx
@@ -76,10 +76,10 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid })
   const pushAttachments = useCallback(async (items: Array<any>, abortController: AbortController) => {
     const newAttachments = await Promise.all(
       items.map(async (item) => {
-        // if (!item.bytesContentFamily) {
-        const { data } = await getAttachmentByUuid(item.uuid, abortController);
-        item.bytesContentFamily = data.bytesContentFamily;
-        //}
+        if (!item.bytesContentFamily) {
+          const { data } = await getAttachmentByUuid(item.uuid, abortController);
+          item.bytesContentFamily = data.bytesContentFamily;
+        }
 
         return {
           ...createGalleryEntry(item),
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
index 91bd90b3a0..072ab1ef3c 100644
--- a/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
+++ b/packages/esm-patient-attachments-app/src/attachments/attachments.resource.tsx
@@ -9,7 +9,7 @@ export function getAttachmentByUuid(attachmentUuid: string, abortController: Abo
 }
 
 export function getAttachments(patientUuid: string, includeEncounterless: boolean, abortController: AbortController) {
-  return openmrsFetch(`${attachmentUrl}?patient=${patientUuid}&includeEncounterless=${includeEncounterless}&v=full`, {
+  return openmrsFetch(`${attachmentUrl}?patient=${patientUuid}&includeEncounterless=${includeEncounterless}`, {
     signal: abortController.signal,
   });
 }
diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
index 600fc69c31..0543c4ca10 100644
--- a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
+++ b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
@@ -47,7 +47,7 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
 
   const wrapItem = React.useCallback(
     (slot: React.ReactNode, extension: ExtensionData) => {
-      const { columnSpan = 2 } = dashboardMeta[getExtensionNameFromId(extension.extensionId)];
+      const { columnSpan = 1 } = dashboardMeta[getExtensionNameFromId(extension.extensionId)];
       return <div style={{ gridColumn: `span ${columnSpan}` }}>{slot}</div>;
     },
     [dashboardMeta],