chore : migrate workspace v2 (#339)

jabahum · web-flow · commit 86f37aa0cc6a · 2026-01-13T15:17:42.000+03:00
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "devDependencies": {
         "@carbon/react": "^1.83.0",
         "@ohri/openmrs-esm-ohri-commons-lib": "next",
-        "@openmrs/esm-framework": "next",
+        "@openmrs/esm-framework": "^8.0.1-pre.3669",
         "@openmrs/esm-patient-common-lib": "next",
         "@openmrs/esm-styleguide": "next",
         "@swc/cli": "^0.1.57",
@@ -73,7 +73,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "lerna": "^5.6.1",
         "lodash": "^4.17.21",
-        "openmrs": "next",
+        "openmrs": "^8.0.1-pre.3669",
         "prettier": "^3.0.3",
         "pretty-quick": "^3.1.3",
         "react": "^18.3.1",
diff --git a/packages/esm-care-panel-app/src/care-programs/care-programs.component.tsx b/packages/esm-care-panel-app/src/care-programs/care-programs.component.tsx
@@ -16,7 +16,7 @@ import { Close, DocumentAdd } from '@carbon/react/icons';
 import { CardHeader, EmptyState, launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
 import { PatientCarePrograms, useCarePrograms } from '../hooks/useCarePrograms';
-import { ErrorState, formatDate, launchWorkspace, useLayoutType, useVisit } from '@openmrs/esm-framework';
+import { ErrorState, formatDate, launchWorkspace2, useLayoutType, useVisit } from '@openmrs/esm-framework';
 import capitalize from 'lodash/capitalize';
 import { mutate } from 'swr';
 
@@ -41,7 +41,7 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
         : `${careProgram.display} Enrollment form`;
 
       currentVisit
-        ? launchWorkspace('patient-form-entry-workspace', {
+        ? launchWorkspace2('patient-form-entry-workspace', {
             workspaceTitle: workspaceTitle,
             mutateForm: () => {
               mutate((key) => true, undefined, {
diff --git a/packages/esm-care-panel-app/src/regimen-editor/regimen-button.component.tsx b/packages/esm-care-panel-app/src/regimen-editor/regimen-button.component.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
 import { Link } from '@carbon/react';
 import styles from './standard-regimen.scss';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 
 interface RegimenButtonProps {
   patientUuid: string;
@@ -22,7 +22,7 @@ const RegimenButton: React.FC<RegimenButtonProps> = ({ patientUuid }) => {
       <Link
         className={styles.linkName}
         onClick={() =>
-          launchWorkspace('patient-form-entry-workspace', {
+          launchWorkspace2('patient-form-entry-workspace', {
             formInfo: {
               formUuid: '53a3850c-855a-11eb-8dcd-0242ac130003',
               patientUuid,
diff --git a/packages/esm-patient-flags-app/src/declarations.d.ts b/packages/esm-patient-flags-app/src/declarations.d.ts
@@ -1,4 +1,2 @@
 declare module '*.css';
 declare module '*.scss';
-declare module '@carbon/react';
-declare type SideNavProps = object;
diff --git a/packages/esm-patient-flags-app/src/patient-flags/patient-flags.component.tsx b/packages/esm-patient-flags-app/src/patient-flags/patient-flags.component.tsx
@@ -19,7 +19,7 @@ const PatientFlags: React.FC<PatientFlagsProps> = ({ patientUuid }) => {
   return (
     <div className={styles.flagContainer}>
       {patientFlags.map((patientFlag) => (
-        <Tag className={styles.tag} key={patientFlag} type="magenta">
+        <Tag className={styles.tag} key={patientFlag.uuid} type="magenta">
           {patientFlag?.display}
         </Tag>
       ))}
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 
 const MovetoNextServicePointPatientActionButton: React.FC = () => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
-    launchWorkspace('move-to-next-service-point-form-workspace', {
+    launchWorkspace2('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
     });
   }, [t]);
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
@@ -3,8 +3,7 @@ import React, { useCallback } from 'react';
 import { Button, Tooltip } from '@carbon/react';
 import { Send } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace } from '@openmrs/esm-framework';
-import { PatientQueue } from '../types/patient-queues';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 
 type MovetoNextServicePointReassignPatientActionProps = {
   patientUuid: string;
@@ -16,7 +15,7 @@ const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointReass
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
-    launchWorkspace('move-to-next-service-point-form-workspace', {
+    launchWorkspace2('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
       patientUuid: patientUuid,
     });
diff --git a/packages/esm-patient-queues-app/src/active-visits/start-visit-form-button.component.tsx b/packages/esm-patient-queues-app/src/active-visits/start-visit-form-button.component.tsx
@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import StartVisitForm from '../components/visit-form/start-a-visit-form.workspace';
 import { Button } from '@carbon/react';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 
 interface StartVisitFormProps {
   patientUuid: string;
@@ -12,7 +11,7 @@ const StartVisitButton: React.FC<StartVisitFormProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
 
   const handleLaunchWorkspace = () => {
-    launchWorkspace('start-visit-form-workspace', {
+    launchWorkspace2('start-visit-form-workspace', {
       patientUuid,
     });
   };
diff --git a/packages/esm-patient-queues-app/src/components/actions/death/death-notification-actions-button.component.tsx b/packages/esm-patient-queues-app/src/components/actions/death/death-notification-actions-button.component.tsx
@@ -1,4 +1,4 @@
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './death-notification-actions.scss';
@@ -7,7 +7,7 @@ const DeathNotificationActionsButton: React.FC = () => {
   const { t } = useTranslation();
 
   const handleLaunchWorkspace = useCallback(() => {
-    launchWorkspace('patient-form-entry-workspace', {
+    launchWorkspace2('patient-form-entry-workspace', {
       formInfo: {
         formUuid: 'bb282ac8-d8b6-4d76-88b9-86da83efec41',
       },
diff --git a/packages/esm-ugandaemr-app/src/notifications-menu/notifications-menu-button.component.tsx b/packages/esm-ugandaemr-app/src/notifications-menu/notifications-menu-button.component.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useCallback } from "react";
-import { HeaderGlobalAction } from "@carbon/react";
-import { Close, Notification, NotificationNew } from "@carbon/react/icons";
-import styles from "./notifications-menu-button.scss";
-import { useLayoutType } from "@openmrs/esm-framework";
-import { useTranslation } from "react-i18next";
-import NotificationMenuOverlay from "./notifications-menu-overlay.component";
-import { useGetAlerts } from "./notifications-menu.resource";
+import React, { useState, useCallback } from 'react';
+import { HeaderGlobalAction } from '@carbon/react';
+import { Close, Notification, NotificationNew } from '@carbon/react/icons';
+import styles from './notifications-menu-button.scss';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import NotificationMenuOverlay from './notifications-menu-overlay.component';
+import { useGetAlerts } from './notifications-menu.resource';
 
 const NotificationsMenuButton: React.FC = () => {
   const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
@@ -23,13 +23,9 @@ const NotificationsMenuButton: React.FC = () => {
     <div className={styles.noficationButtonContainer}>
       {isNotificationPanelOpen && <NotificationMenuOverlay />}
       <HeaderGlobalAction
-        aria-label={t("notifications", "Notifications")}
+        aria-label={t('notifications', 'Notifications')}
         aria-labelledby="Notifications Icon"
-        className={`${
-          isNotificationPanelOpen
-            ? styles.activeNotificationButton
-            : styles.notificationButton
-        }`}
+        className={`${isNotificationPanelOpen ? styles.activeNotificationButton : styles.notificationButton}`}
         onClick={toggleNotificationPanel}
       >
         {isNotificationPanelOpen ? (
diff --git a/packages/esm-ugandaemr-app/src/notifications-menu/notifications-menu-overlay.component.tsx b/packages/esm-ugandaemr-app/src/notifications-menu/notifications-menu-overlay.component.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import styles from "./notifications-menu-overlay.scss";
-import { useTranslation } from "react-i18next";
-import { InlineLoading, Toggle } from "@carbon/react";
-import { useGetAlerts } from "./notifications-menu.resource";
+import React, { useState } from 'react';
+import styles from './notifications-menu-overlay.scss';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading, Toggle } from '@carbon/react';
+import { useGetAlerts } from './notifications-menu.resource';
 
 const NotificationMenuOverlay: React.FC = () => {
   const { t } = useTranslation();
@@ -12,12 +12,12 @@ const NotificationMenuOverlay: React.FC = () => {
   return (
     <div className={styles.notificationMenuOverlay}>
       <div className={styles.header}>
-        <h2>{t("notifications", "Notifications")}</h2>
+        <h2>{t('notifications', 'Notifications')}</h2>
         <div className={styles.toggleContainer}>
           <Toggle
-            labelText={t("onlyShowUnread", "Only show unread")}
-            labelA={t("off", "Off")}
-            labelB={t("on", "On")}
+            labelText={t('onlyShowUnread', 'Only show unread')}
+            labelA={t('off', 'Off')}
+            labelB={t('on', 'On')}
             size="sm"
             onToggle={(isToggled) => setShowOnlyUnread(isToggled)}
             defaultToggled={showOnlyUnread}
@@ -26,36 +26,24 @@ const NotificationMenuOverlay: React.FC = () => {
         </div>
       </div>
       {isLoading ? (
-        <InlineLoading
-          status="active"
-          iconDescription="Loading"
-          description="Loading notifications..."
-        />
+        <InlineLoading status="active" iconDescription="Loading" description="Loading notifications..." />
       ) : alerts.length === 0 ? (
         <p>No notifications available</p>
       ) : (
         <ul className={styles.notificationList}>
           {alerts
-            .filter((notification) =>
-              showOnlyUnread ? !notification.alertRead : true
-            )
+            .filter((notification) => (showOnlyUnread ? !notification.alertRead : true))
             .map((notification) => (
               <li
                 key={notification.alertId}
-                className={`${styles.notificationItem} ${
-                  !notification.alertRead ? styles.unreadNotificationItem : ""
-                }`}
+                className={`${styles.notificationItem} ${!notification.alertRead ? styles.unreadNotificationItem : ''}`}
               >
                 <div className={styles.notificationIndicatorWrapper}>
-                  {!notification.alertRead && (
-                    <span className={styles.unreadIndicator}></span>
-                  )}
+                  {!notification.alertRead && <span className={styles.unreadIndicator}></span>}
                 </div>
                 <div className={styles.notificationContent}>
                   <p className={styles.description}>{notification.display}</p>
-                  <span className={styles.time}>
-                    {notification.timeDifference}
-                  </span>
+                  <span className={styles.time}>{notification.timeDifference}</span>
                 </div>
               </li>
             ))}
diff --git a/packages/esm-ugandaemr-app/src/notifications-menu/notifications-menu.resource.ts b/packages/esm-ugandaemr-app/src/notifications-menu/notifications-menu.resource.ts
@@ -1,5 +1,5 @@
-import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
-import useSWR from "swr";
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
 
 export interface Notifications {
   uuid: string;
@@ -13,10 +13,7 @@ export interface Notifications {
 
 export function useGetAlerts() {
   const apiURL = `${restBaseUrl}/alert?v=full&limit=200`;
-  const { data, error, isLoading } = useSWR<
-    { data: { results: Array<Notifications> } },
-    Error
-  >(apiURL, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Notifications> } }, Error>(apiURL, openmrsFetch);
 
   const alerts = data?.data?.results.filter((alert) => alert.dateToExpire !== null) || [];
 
@@ -42,12 +39,12 @@ function calculateTimeDifference(date1: Date, date2: Date): string {
   const days = Math.floor(hours / 24);
 
   if (days > 0) {
-    return `${days} day${days > 1 ? "s" : ""} ago`;
+    return `${days} day${days > 1 ? 's' : ''} ago`;
   } else if (hours > 0) {
-    return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+    return `${hours} hour${hours > 1 ? 's' : ''} ago`;
   } else if (minutes > 0) {
-    return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
   } else {
-    return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
+    return `${seconds} second${seconds !== 1 ? 's' : ''} ago`;
   }
 }
diff --git a/yarn.lock b/yarn.lock
