@openmrs/esm-metadataexport-app 4.4.1-pre.877 → 4.4.1-pre.879

package/src/components/view-metadata-package/view-metadata-package-utils.ts

@@ -1,9 +1,6 @@
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 import { type ExportPackage } from '../../types/index';
 
 export const launchViewMetadataPackageWorkspace = (exportPackage: ExportPackage) => {
-  launchWorkspace('view-metadata-package-workspace', {
-    workspaceTitle: exportPackage.name,
-    exportPackage,
-  });
+  launchWorkspace2('view-metadata-package-workspace', { exportPackage });
 };

package/src/components/view-metadata-package/view-metadata-package.workspace.test.tsx

@@ -34,8 +34,7 @@ const mockUserHasAccess = vi.mocked(esmFramework.userHasAccess);
 const sessionWithUser = () =>
   ({ user: { uuid: 'cc8507b8-7c9a-486b-85dc-b8f25ad1e4cc' } }) as unknown as esmFramework.Session;
 const mockCloseWorkspace = vi.fn();
-const mockCloseWorkspaceWithSavedChanges = vi.fn();
-const mockPromptBeforeClosing = vi.fn();
+const mockLaunchWorkspace2 = vi.mocked(esmFramework.launchWorkspace2);
 
 const build = (overrides: Partial<ExportPackageBuild> = {}): ExportPackageBuild => ({
   uuid: '23dbfd25-eec7-4f4e-b26c-d95324346ce3',
@@ -78,11 +77,15 @@ function mockBuilds(overrides: Partial<ReturnType<typeof usePackageBuilds>> = {}
 function renderWorkspace(pkg: ExportPackage = exportPackage) {
   render(
     <ViewMetadataPackageWorkspace
-      exportPackage={pkg}
+      workspaceProps={{ exportPackage: pkg }}
+      windowProps={null}
+      groupProps={null}
       closeWorkspace={mockCloseWorkspace}
-      closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
-      promptBeforeClosing={mockPromptBeforeClosing}
-      setTitle={vi.fn()}
+      launchChildWorkspace={vi.fn()}
+      workspaceName="view-metadata-package-workspace"
+      windowName="view-metadata-package-window"
+      isRootWorkspace
+      showActionMenu={false}
     />,
   );
 }
@@ -211,6 +214,28 @@ describe('ViewPackageWorkspace', () => {
     );
   });
 
+  it('replaces the workspace with the edit form when Edit is clicked', async () => {
+    const user = userEvent.setup();
+    mockCloseWorkspace.mockResolvedValue(true);
+    renderWorkspace();
+
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+
+    expect(mockCloseWorkspace).toHaveBeenCalled();
+    expect(mockLaunchWorkspace2).toHaveBeenCalledWith('metadata-package-form-workspace', { uuid: exportPackage.uuid });
+  });
+
+  it('does not launch the edit form if the workspace stays open', async () => {
+    const user = userEvent.setup();
+    mockCloseWorkspace.mockResolvedValue(false);
+    renderWorkspace();
+
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+
+    expect(mockCloseWorkspace).toHaveBeenCalled();
+    expect(mockLaunchWorkspace2).not.toHaveBeenCalled();
+  });
+
   it('launches the delete confirmation modal wired to close the workspace on success', async () => {
     const user = userEvent.setup();
     renderWorkspace();

package/src/components/view-metadata-package/view-metadata-package.workspace.tsx

@@ -4,7 +4,6 @@ import { Download } from '@carbon/react/icons';
 import { Button, InlineLoading, Link, Tag } from '@carbon/react';
 import { useSWRConfig } from 'swr';
 import {
-  type DefaultWorkspaceProps,
   ErrorState,
   OpenmrsFetchError,
   formatDurationBetween,
@@ -14,6 +13,8 @@ import {
   showSnackbar,
   useSession,
   userHasAccess,
+  Workspace2,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { formatDomainLabel } from '../../domain-lookups/domain-lookups.resource';
 import { isPackagesCacheKey, triggerBuild, usePackageBuilds } from '../../packages/packages.resource';
@@ -21,7 +22,7 @@ import type { ExportBuildStatus, ExportPackage } from '../../types';
 import styles from './view-metadata-package.workspace.scss';
 import { launchPackageFormWorkspace } from '../metadata-package-form/metadata-package-form-utils';
 
-interface ViewPackageWorkspaceProps extends DefaultWorkspaceProps {
+interface ViewPackageWorkspaceProps {
   exportPackage: ExportPackage;
 }
 
@@ -32,7 +33,11 @@ const statusTagType: Record<ExportBuildStatus, 'gray' | 'blue' | 'green' | 'red'
   FAILED: 'red',
 };
 
-const ViewMetadataPackageWorkspace: React.FC<ViewPackageWorkspaceProps> = ({ exportPackage, closeWorkspace }) => {
+const ViewMetadataPackageWorkspace: React.FC<Workspace2DefinitionProps<ViewPackageWorkspaceProps>> = ({
+  workspaceProps,
+  closeWorkspace,
+}) => {
+  const { exportPackage } = workspaceProps;
   const { t } = useTranslation();
   const session = useSession();
   const { mutate: globalMutate } = useSWRConfig();
@@ -100,108 +105,113 @@ const ViewMetadataPackageWorkspace: React.FC<ViewPackageWorkspaceProps> = ({ exp
     return exportPackage.entries.map((entry) => formatDomainLabel(entry.domain)).join(', ');
   }, [exportPackage.entries, t]);
 
-  const editPackage = useCallback(() => {
-    launchPackageFormWorkspace(t, exportPackage.uuid);
-  }, [exportPackage.uuid, t]);
+  // Replace this workspace with the edit form so it doesn't reappear with stale package details
+  const editPackage = useCallback(async () => {
+    if (await closeWorkspace()) {
+      launchPackageFormWorkspace(exportPackage.uuid);
+    }
+  }, [closeWorkspace, exportPackage.uuid]);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.body}>
-        {canManage && (
-          <section className={styles.actionRow}>
-            <Button
-              className={styles.triggerButton}
-              kind="primary"
-              onClick={handleTriggerBuild}
-              disabled={isTriggeringBuild}
-            >
-              {isTriggeringBuild ? (
-                <InlineLoading description={t('triggeringBuild', 'Triggering build') + '…'} />
-              ) : (
-                t('triggerNewBuild', 'Trigger new build')
-              )}
-            </Button>
-            <div className={styles.secondaryActions}>
-              <Button
-                className={styles.secondaryButton}
-                kind="secondary"
-                onClick={editPackage}
-                disabled={isTriggeringBuild}
-              >
-                {t('edit', 'Edit')}
-              </Button>
+    <Workspace2 title={exportPackage.name}>
+      <div className={styles.container}>
+        <div className={styles.body}>
+          {canManage && (
+            <section className={styles.actionRow}>
               <Button
-                className={styles.secondaryButton}
-                kind="danger--tertiary"
-                onClick={launchDeleteModal}
+                className={styles.triggerButton}
+                kind="primary"
+                onClick={handleTriggerBuild}
                 disabled={isTriggeringBuild}
               >
-                {t('delete', 'Delete')}
+                {isTriggeringBuild ? (
+                  <InlineLoading description={t('triggeringBuild', 'Triggering build') + '…'} />
+                ) : (
+                  t('triggerNewBuild', 'Trigger new build')
+                )}
               </Button>
-            </div>
-          </section>
-        )}
+              <div className={styles.secondaryActions}>
+                <Button
+                  className={styles.secondaryButton}
+                  kind="secondary"
+                  onClick={editPackage}
+                  disabled={isTriggeringBuild}
+                >
+                  {t('edit', 'Edit')}
+                </Button>
+                <Button
+                  className={styles.secondaryButton}
+                  kind="danger--tertiary"
+                  onClick={launchDeleteModal}
+                  disabled={isTriggeringBuild}
+                >
+                  {t('delete', 'Delete')}
+                </Button>
+              </div>
+            </section>
+          )}
 
-        <section className={styles.section}>
-          <span className={styles.sectionLabel}>{t('details', 'Details')}</span>
-          <dl className={styles.detailList}>
-            <dt className={styles.detailKey}>{t('domains', 'Domains')}</dt>
-            <dd className={styles.detailValue}>{domainsLabel}</dd>
-          </dl>
-        </section>
+          <section className={styles.section}>
+            <span className={styles.sectionLabel}>{t('details', 'Details')}</span>
+            <dl className={styles.detailList}>
+              <dt className={styles.detailKey}>{t('domains', 'Domains')}</dt>
+              <dd className={styles.detailValue}>{domainsLabel}</dd>
+            </dl>
+          </section>
 
-        <section className={styles.section}>
-          <span className={styles.sectionLabel}>{t('builds', 'Builds')}</span>
-          {isLoading ? (
-            <InlineLoading description={t('loadingBuilds', 'Loading builds…')} />
-          ) : error ? (
-            <ErrorState error={error} headerTitle={t('builds', 'Builds')} />
-          ) : builds.length === 0 ? (
-            <p className={styles.emptyBuilds}>{t('noBuildsYet', 'No builds yet')}</p>
-          ) : (
-            <ul className={styles.buildList}>
-              {builds.map((build) => (
-                <li key={build.uuid} className={styles.buildItem}>
-                  <div className={styles.buildRow}>
-                    <span className={styles.buildVersion}>
-                      {t('buildVersion', 'Build {{version}}', { version: build.version })}
-                    </span>
-                    <Tag type={statusTagType[build.status]} size="sm">
-                      {t(build.status)}
-                    </Tag>
-                  </div>
-                  <div className={styles.buildRow}>
-                    <span className={styles.buildMeta}>
-                      {build.dateStarted
-                        ? t('startedAgo', 'Started {{time}} ago', { time: formatDurationBetween(build.dateStarted) })
-                        : t('notStarted', 'Not started')}
-                    </span>
-                    {build.dateCompleted && (
+          <section className={styles.section}>
+            <span className={styles.sectionLabel}>{t('builds', 'Builds')}</span>
+            {isLoading ? (
+              <InlineLoading description={t('loadingBuilds', 'Loading builds…')} />
+            ) : error ? (
+              <ErrorState error={error} headerTitle={t('builds', 'Builds')} />
+            ) : builds.length === 0 ? (
+              <p className={styles.emptyBuilds}>{t('noBuildsYet', 'No builds yet')}</p>
+            ) : (
+              <ul className={styles.buildList}>
+                {builds.map((build) => (
+                  <li key={build.uuid} className={styles.buildItem}>
+                    <div className={styles.buildRow}>
+                      <span className={styles.buildVersion}>
+                        {t('buildVersion', 'Build {{version}}', { version: build.version })}
+                      </span>
+                      <Tag type={statusTagType[build.status]} size="sm">
+                        {t(build.status)}
+                      </Tag>
+                    </div>
+                    <div className={styles.buildRow}>
                       <span className={styles.buildMeta}>
-                        {t('completedAgo', 'Completed {{time}} ago', {
-                          time: formatDurationBetween(build.dateCompleted),
-                        })}
+                        {build.dateStarted
+                          ? t('startedAgo', 'Started {{time}} ago', { time: formatDurationBetween(build.dateStarted) })
+                          : t('notStarted', 'Not started')}
                       </span>
+                      {build.dateCompleted && (
+                        <span className={styles.buildMeta}>
+                          {t('completedAgo', 'Completed {{time}} ago', {
+                            time: formatDurationBetween(build.dateCompleted),
+                          })}
+                        </span>
+                      )}
+                    </div>
+                    {build.status === 'FAILED' && build.errorMessage && (
+                      <p className={styles.buildError}>{build.errorMessage}</p>
                     )}
-                  </div>
-                  {build.status === 'FAILED' && build.errorMessage && (
-                    <p className={styles.buildError}>{build.errorMessage}</p>
-                  )}
-                  {canManage && build.downloadUrl && (
-                    <Link
-                      href={makeUrl(`${restBaseUrl}/metadataexport/builds/${build.uuid}/download`)}
-                      renderIcon={() => <Download size={16} />}
-                    >
-                      {t('download', 'Download')}
-                    </Link>
-                  )}
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
+                    {canManage && build.downloadUrl && (
+                      <Link
+                        href={makeUrl(`${restBaseUrl}/metadataexport/builds/${build.uuid}/download`)}
+                        renderIcon={() => <Download size={16} />}
+                      >
+                        {t('download', 'Download')}
+                      </Link>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+        </div>
       </div>
-    </div>
+    </Workspace2>
   );
 };
 

package/src/root.component.tsx

@@ -5,7 +5,7 @@ import Dashboard from './components/dashboard/home-dashboard.component';
 const Root: React.FC = () => (
   <BrowserRouter basename={window.getOpenmrsSpaBase()}>
     <Routes>
-      <Route path="metadataexport" element={<Dashboard />} />
+      <Route path="metadata-export" element={<Dashboard />} />
     </Routes>
   </BrowserRouter>
 );

package/src/routes.json

@@ -5,7 +5,7 @@
   },
   "pages": [
     {
-      "route": "metadataexport",
+      "route": "metadata-export",
       "component": "root",
       "online": true
     }
@@ -24,22 +24,37 @@
       "component": "deleteMetadataPackageModal"
     }
   ],
-  "workspaces": [
+  "workspaceGroups2": [
     {
-      "name": "metadata-package-form-workspace",
-      "component": "metadataPackageFormWorkspace",
-      "title": "New package",
-      "type": "form",
+      "name": "metadata-export-group",
+      "scopePattern": "^/metadata-export",
+      "overlay": true
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "metadata-package-form-window",
+      "group": "metadata-export-group",
       "canMaximize": true,
       "width": "narrow"
     },
     {
-      "name": "view-metadata-package-workspace",
-      "component": "viewMetadataPackageWorkspace",
-      "title": "View package",
-      "type": "form",
+      "name": "view-metadata-package-window",
+      "group": "metadata-export-group",
       "canMaximize": true,
       "width": "narrow"
     }
+  ],
+  "workspaces2": [
+    {
+      "name": "metadata-package-form-workspace",
+      "component": "metadataPackageFormWorkspace",
+      "window": "metadata-package-form-window"
+    },
+    {
+      "name": "view-metadata-package-workspace",
+      "component": "viewMetadataPackageWorkspace",
+      "window": "view-metadata-package-window"
+    }
   ]
 }

package/translations/en.json

@@ -20,6 +20,7 @@
   "domains": "Domains",
   "download": "Download",
   "edit": "Edit",
+  "editPackage": "Edit package",
   "errorLoadingDomains": "Error loading domains",
   "errorLoadingPackage": "Error loading package",
   "FAILED": "Failed",
@@ -27,7 +28,7 @@
   "loadingPackage": "Loading package…",
   "managePackages": "Manage packages",
   "metadataexport": "Metadata Export",
-  "newpackage": "New Package",
+  "newPackage": "New package",
   "nextPage": "Next page",
   "noBuilds": "No builds",
   "noBuildsYet": "No builds yet",