Merge branch 'main' into feat/delete-programs-feature

openmrs · Jan 17, 2025 · 0f78c5b · 0f78c5b
2 parents e7db186 + 36f2706
commit 0f78c5b
Show file tree

Hide file tree

Showing 153 changed files with 1,453 additions and 750 deletions.
diff --git a/e2e/specs/lab-orders.spec.ts b/e2e/specs/lab-orders.spec.ts
@@ -42,7 +42,7 @@ test.describe.serial('Running laboratory order tests sequentially', () => {
     });
 
     await test.step('Then I should see the lab order form launch in the workspace', async () => {
-      await expect(page.getByText(/add lab order/i)).toBeVisible();
+      await expect(page.getByText(/add test order/i)).toBeVisible();
     });
 
     await test.step('When I fill in the fields in the form for the Blood urea nitrogen test and submit the form', async () => {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@openmrs/esm-patient-chart",
   "private": true,
-  "version": "9.0.0",
+  "version": "9.1.0",
   "workspaces": [
     "packages/*"
   ],

diff --git a/packages/esm-form-engine-app/package.json b/packages/esm-form-engine-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Wrapper ESM for the O3 React Form Engine",
   "browser": "dist/openmrs-esm-form-engine-app.js",

diff --git a/packages/esm-form-engine-app/translations/ar.json b/packages/esm-form-engine-app/translations/ar.json
@@ -1,5 +1,5 @@
 {
-  "cancel": "Cancel",
+  "cancel": "يلغي",
   "closeThisPanel": "أغلق هذه اللوحة",
   "collapseAll": "Collapse all",
   "deleteQuestion": "Delete question",

diff --git a/packages/esm-form-entry-app/package.json b/packages/esm-form-entry-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-entry-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Angular form engine for O3",
   "browser": "dist/openmrs-esm-form-entry-app.js",

diff --git a/packages/esm-generic-patient-widgets-app/package.json b/packages/esm-generic-patient-widgets-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-generic-patient-widgets-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Generic widgets for the patient chart",
   "browser": "dist/openmrs-esm-generic-patient-widgets-app.js",

diff --git a/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.component.tsx b/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { DataTableSkeleton, Button, InlineLoading } from '@carbon/react';
+import { Button, DataTableSkeleton, InlineLoading } from '@carbon/react';
 import { ChartLineSmooth, Table } from '@carbon/react/icons';
 import { CardHeader, EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { useConfig } from '@openmrs/esm-framework';
@@ -31,7 +31,7 @@ const ObsSwitchable: React.FC<ObsSwitchableProps> = ({ patientUuid }) => {
         if (obss?.length) {
           return (
             <div className={styles.widgetContainer}>
-              <CardHeader title={config.title}>
+              <CardHeader title={t(config.title)}>
                 <div className={styles.backgroundDataFetchingIndicator}>
                   <span>{isValidating ? <InlineLoading /> : null}</span>
                 </div>

diff --git a/packages/esm-patient-allergies-app/package.json b/packages/esm-patient-allergies-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-allergies-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Patient allergies microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-allergies-app.js",

diff --git a/packages/esm-patient-attachments-app/package.json b/packages/esm-patient-attachments-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-attachments-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Patient attachments microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-attachments-app.js",
@@ -38,7 +38,9 @@
   },
   "dependencies": {
     "@carbon/react": "^1.12.0",
-    "@openmrs/esm-patient-common-lib": "^9.0.0",
+    "@openmrs/esm-patient-common-lib": "^9.1.0",
+    "linkify-react": "^4.2.0",
+    "linkifyjs": "^4.2.0",
     "lodash-es": "^4.17.21",
     "react-grid-gallery": "^0.5.6",
     "react-html5-camera-photo": "^1.5.11"

diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-preview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-preview.component.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { type Attachment, CloseIcon, useLayoutType } from '@openmrs/esm-framework';
 import styles from './attachment-preview.scss';
+import Linkify from 'linkify-react';
 
 interface AttachmentPreviewProps {
   attachmentToPreview: Attachment;
@@ -69,7 +70,9 @@ const AttachmentPreview: React.FC<AttachmentPreviewProps> = ({
       <div className={styles.rightPanel}>
         <h4 className={styles.title}>{attachmentToPreview.filename}</h4>
         {attachmentToPreview?.description ? (
-          <p className={styles.imageDescription}>{attachmentToPreview.description}</p>
+          <p className={styles.imageDescription}>
+            <Linkify options={{ target: '_blank' }}>{attachmentToPreview.description}</Linkify>
+          </p>
         ) : null}
       </div>
     </div>

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx
@@ -55,7 +55,7 @@ const CapturePhoto: React.FC<CapturePhotoProps> = ({ initialState, onCapturePhot
       <div className={styles.editButtonContainer}>
         <Button
           className={styles.editButton}
-          kind="ghost"
+          kind="secondary"
           onClick={showCam}
           renderIcon={(props: ComponentProps<typeof EditIcon>) => <EditIcon {...props} />}
           size={responsiveSize}

diff --git a/packages/esm-patient-banner-app/package.json b/packages/esm-patient-banner-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-banner-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Patient banner microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-banner-app.js",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@carbon/react": "^1.12.0",
-    "@openmrs/esm-patient-common-lib": "^9.0.0",
+    "@openmrs/esm-patient-common-lib": "^9.1.0",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {

diff --git a/packages/esm-patient-chart-app/package.json b/packages/esm-patient-chart-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-chart-app",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "license": "MPL-2.0",
   "description": "Patient dashboard microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-chart-app.js",

diff --git a/packages/esm-patient-chart-app/src/root.component.tsx b/packages/esm-patient-chart-app/src/root.component.tsx
@@ -29,4 +29,7 @@ export default function Root() {
  * t('error', 'Error')
  * t('seeAll', 'See all')
  * t('paginationItemsCount', `{{pageItemsCount}} / {{count}} items`, { count: totalItems, pageItemsCount });
+ * t('Routine')
+ * t('Stat')
+ * t('On scheduled date')
  */
diff --git a/packages/esm-patient-chart-app/src/visit/hooks/useDeleteVisit.hook.tsx b/packages/esm-patient-chart-app/src/visit/hooks/useDeleteVisit.hook.tsx
@@ -1,13 +1,13 @@
-import { type Visit, showActionableNotification, showSnackbar, useVisit } from '@openmrs/esm-framework';
-import { deleteVisit, restoreVisit, useVisits } from '../visits-widget/visit.resource';
-import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Visit, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { deleteVisit, restoreVisit, useVisits } from '../visits-widget/visit.resource';
 
 export function useDeleteVisit(patientUuid: string, visit: Visit, onVisitDelete = () => {}, onVisitRestore = () => {}) {
+  const { t } = useTranslation();
   const { mutateVisits } = useVisits(patientUuid);
   const { mutate: mutateCurrentVisit } = useVisit(patientUuid);
   const [isDeletingVisit, setIsDeletingVisit] = useState(false);
-  const { t } = useTranslation();
 
   const restoreDeletedVisit = () => {
     restoreVisit(visit?.uuid)
@@ -42,9 +42,9 @@ export function useDeleteVisit(patientUuid: string, visit: Visit, onVisitDelete
       .then(() => {
         mutateVisits();
         mutateCurrentVisit();
-        // TODO: Needs to be replaced with Actionable Snackbar when Actionable
+
         if (!isCurrentVisitDeleted) {
-          showActionableNotification({
+          showSnackbar({
             title: t('visitDeleted', '{{visit}} deleted', {
               visit: visit?.visitType?.display ?? t('visit', 'Visit'),
             }),

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.scss b/packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.scss
@@ -16,7 +16,7 @@
 }
 
 .visitTypeOverviewWrapper {
-  margin: layout.$spacing-05 0;
+  margin: layout.$spacing-03 0;
   border: 0.0625rem solid $grey-2;
 
   &:has(.skeleton) {

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
@@ -42,7 +42,7 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
 
   return (
     <section>
-      <div className={styles.sectionTitle}>{visitDatetimeLabel}</div>
+      <h1 className={styles.sectionTitle}>{visitDatetimeLabel}</h1>
       <div className={classNames(styles.dateTimeSection, styles.sectionField)}>
         <Controller
           name={dateFieldName}
@@ -76,35 +76,42 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
             name={timeFieldName}
             control={control}
             render={({ field: { onBlur, onChange, value } }) => (
-              <TimePicker
-                id={timeFieldName}
-                invalid={Boolean(errors[timeFieldName])}
-                invalidText={errors[timeFieldName]?.message}
-                labelText={t('time', 'Time')}
-                onBlur={onBlur}
-                onChange={(event) => onChange(event.target.value as amPm)}
-                pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
-                style={{ marginLeft: '0.125rem', flex: 'none' }}
-                value={value}
-              >
-                <Controller
-                  name={timeFormatFieldName}
-                  control={control}
-                  render={({ field: { onChange, value } }) => (
-                    <TimePickerSelect
-                      aria-label={t('timeFormat ', 'Time Format')}
-                      id={`${timeFormatFieldName}Input`}
-                      invalid={Boolean(errors[timeFormatFieldName])}
-                      invalidText={errors[timeFormatFieldName]?.message}
-                      onChange={(event) => onChange(event.target.value as amPm)}
-                      value={value}
-                    >
-                      <SelectItem value="AM" text="AM" />
-                      <SelectItem value="PM" text="PM" />
-                    </TimePickerSelect>
-                  )}
-                />
-              </TimePicker>
+              <div className={styles.timePickerContainer}>
+                <TimePicker
+                  className={styles.timePicker}
+                  id={timeFieldName}
+                  invalid={Boolean(errors[timeFieldName])}
+                  invalidText={errors[timeFieldName]?.message}
+                  labelText={t('time', 'Time')}
+                  onBlur={onBlur}
+                  onChange={(event) => onChange(event.target.value as amPm)}
+                  pattern="^(0[1-9]|1[0-2]):([0-5][0-9])$"
+                  value={value}
+                >
+                  <Controller
+                    name={timeFormatFieldName}
+                    control={control}
+                    render={({ field: { onChange, value } }) => (
+                      <TimePickerSelect
+                        aria-label={t('timeFormat ', 'Time Format')}
+                        className={classNames({
+                          [styles.timePickerSelectError]: errors[timeFormatFieldName],
+                        })}
+                        id={`${timeFormatFieldName}Input`}
+                        onChange={(event) => onChange(event.target.value as amPm)}
+                        value={value}
+                      >
+                        <SelectItem value="" text="" />
+                        <SelectItem value="AM" text="AM" />
+                        <SelectItem value="PM" text="PM" />
+                      </TimePickerSelect>
+                    )}
+                  />
+                </TimePicker>
+                {errors[timeFormatFieldName] && (
+                  <div className={styles.timerPickerError}>{errors[timeFormatFieldName]?.message}</div>
+                )}
+              </div>
             )}
           />
         </ResponsiveWrapper>

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
@@ -6,7 +6,15 @@
   margin: layout.$spacing-05;
 
   & section {
-    margin: layout.$spacing-05 0;
+    margin: layout.$spacing-05 0 layout.$spacing-03;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -126,3 +134,35 @@
 .datePicker {
   padding-bottom: layout.$spacing-05;
 }
+
+.timePicker {
+  align-items: baseline;
+  flex: none;
+  margin-left: layout.$spacing-01;
+
+  :global(.cds--form-requirement) {
+    max-width: 6rem;
+    max-height: 0 !important;
+  }
+}
+
+.timePickerSelectError {
+  outline: 2px solid colors.$red-50;
+  outline-offset: -2px;
+}
+
+.timerPickerError {
+  color: colors.$red-60;
+  display: flex;
+  align-self: flex-end;
+  max-width: layout.$spacing-11;
+  font-size: layout.$spacing-04;
+  margin: 0;
+  letter-spacing: 0.02rem;
+  line-height: 1.33333;
+}
+
+.timePickerContainer {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.test.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.test.tsx
@@ -271,21 +271,6 @@ describe('Visit form', () => {
     await user.click(screen.getByLabelText(/Outpatient visit/i));
   });
 
-  it('displays an error message when the visit start date is in the future', async () => {
-    const user = userEvent.setup();
-
-    renderVisitForm();
-
-    const dateInput = screen.getByRole('textbox', { name: /date/i });
-    const futureDate = dayjs().add(1, 'month').format('DD/MM/YYYY');
-
-    await user.clear(dateInput);
-    await user.type(dateInput, futureDate);
-    await user.tab();
-
-    expect(screen.getByText(/start date needs to be on or before/i)).toBeInTheDocument();
-  });
-
   // TODO: Figure out why this test is failing
   xit('displays an error message when the visit start time is in the future', async () => {
     const user = userEvent.setup();