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

package/dist/openmrs-esm-metadataexport-app.js.buildmanifest.json

@@ -71,7 +71,7 @@
       "auxiliaryFiles": [
         "openmrs-esm-metadataexport-app.js.map"
       ],
-      "hash": "65053bd4657da087",
+      "hash": "6234fa494254ef21",
       "childrenByOrder": {}
     },
     {
@@ -225,10 +225,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 28842,
+      "size": 28540,
       "sizes": {
         "css/mini-extract": 1647,
-        "javascript": 27195
+        "javascript": 26893
       },
       "names": [],
       "idHints": [],
@@ -243,7 +243,7 @@
         "2173.css.map",
         "2173.js.map"
       ],
-      "hash": "e0e3b016c62a47f6",
+      "hash": "c226db14bbdbbf59",
       "childrenByOrder": {}
     },
     {
@@ -763,10 +763,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 17286,
+      "size": 17618,
       "sizes": {
         "css/mini-extract": 1915,
-        "javascript": 15371
+        "javascript": 15703
       },
       "names": [],
       "idHints": [],
@@ -781,7 +781,7 @@
         "5065.css.map",
         "5065.js.map"
       ],
-      "hash": "c6856ed1af3aef06",
+      "hash": "c013e3ec5d865d0a",
       "childrenByOrder": {}
     },
     {
@@ -789,9 +789,9 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 2063,
+      "size": 2092,
       "sizes": {
-        "javascript": 2063
+        "javascript": 2092
       },
       "names": [],
       "idHints": [],
@@ -804,7 +804,7 @@
       "auxiliaryFiles": [
         "5117.js.map"
       ],
-      "hash": "d2addaad0ac571f2",
+      "hash": "b94bb6b8ac5d28e2",
       "childrenByOrder": {}
     },
     {
@@ -1323,9 +1323,9 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 1375,
+      "size": 1376,
       "sizes": {
-        "javascript": 1375
+        "javascript": 1376
       },
       "names": [],
       "idHints": [],
@@ -1338,7 +1338,7 @@
       "auxiliaryFiles": [
         "7121.js.map"
       ],
-      "hash": "0c31c11c68a25b81",
+      "hash": "75c22d2c49b9924c",
       "childrenByOrder": {}
     },
     {
@@ -1625,10 +1625,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 19058,
+      "size": 19275,
       "sizes": {
         "css/mini-extract": 4201,
-        "javascript": 14857
+        "javascript": 15074
       },
       "names": [],
       "idHints": [],
@@ -1643,7 +1643,7 @@
         "9503.css.map",
         "9503.js.map"
       ],
-      "hash": "bf22bbb807ea720f",
+      "hash": "10d839d0fb1604b5",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"metadataexport":">=1.0.0-SNAPSHOT"},"pages":[{"route":"metadataexport","component":"root","online":true}],"extensions":[{"name":"metadata-export-card-link","slot":"system-admin-page-card-link-slot","component":"metadataExportCardLink","privileges":["Get Metadata Export Packages"]}],"modals":[{"name":"delete-metadata-package-modal","component":"deleteMetadataPackageModal"}],"workspaces":[{"name":"metadata-package-form-workspace","component":"metadataPackageFormWorkspace","title":"New package","type":"form","canMaximize":true,"width":"narrow"},{"name":"view-metadata-package-workspace","component":"viewMetadataPackageWorkspace","title":"View package","type":"form","canMaximize":true,"width":"narrow"}],"version":"4.4.1-pre.877"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"metadataexport":">=1.0.0-SNAPSHOT"},"pages":[{"route":"metadata-export","component":"root","online":true}],"extensions":[{"name":"metadata-export-card-link","slot":"system-admin-page-card-link-slot","component":"metadataExportCardLink","privileges":["Get Metadata Export Packages"]}],"modals":[{"name":"delete-metadata-package-modal","component":"deleteMetadataPackageModal"}],"workspaceGroups2":[{"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-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"}],"version":"4.4.1-pre.879"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-metadataexport-app",
-  "version": "4.4.1-pre.877",
+  "version": "4.4.1-pre.879",
   "license": "MPL-2.0",
   "description": "Metadata export admin dashboard for O3",
   "browser": "dist/openmrs-esm-metadataexport-app.js",

package/src/admin-card-link.component.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Layer, ClickableTile } from '@carbon/react';
 import { ArrowRightIcon, navigate } from '@openmrs/esm-framework';
 
-const metadataExportUrl = `${window.spaBase}/metadataexport`;
+const metadataExportUrl = `${window.spaBase}/metadata-export`;
 
 // Navigate client-side on a plain left click; modified clicks fall through
 // to the anchor so they open a new tab or window as usual.

package/src/components/dashboard/home-dashboard.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLayoutType, isDesktop, WorkspaceContainer } from '@openmrs/esm-framework';
+import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
 import DashboardView from './dashboard-view.component';
 import styles from './home-dashboard.scss';
 
@@ -11,7 +11,6 @@ export default function Dashboard() {
       <section className={isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet}>
         <DashboardView />
       </section>
-      <WorkspaceContainer overlay contextKey="metadata-export" />
     </div>
   );
 }

package/src/components/metadata-package-form/add-package-action-button/add-package-action-button.component.tsx

@@ -12,8 +12,8 @@ const AddPackageActionButton: React.FC = () => {
   const canManage = session.user ? userHasAccess('Manage Metadata Export Packages', session.user) : false;
 
   const handleLaunchPackageForm = useCallback(() => {
-    launchPackageFormWorkspace(t);
-  }, [t]);
+    launchPackageFormWorkspace();
+  }, []);
 
   if (!canManage) {
     return null;
@@ -26,7 +26,7 @@ const AddPackageActionButton: React.FC = () => {
       kind="primary"
       renderIcon={(props) => <Add size={16} {...props} />}
     >
-      {t('newpackage', 'New Package')}
+      {t('newPackage', 'New package')}
     </Button>
   );
 };

package/src/components/metadata-package-form/add-package-action-button/add-package-action-button.test.tsx

@@ -23,17 +23,17 @@ describe('AddPackageActionButton', () => {
     mockUserHasAccess.mockReturnValue(true);
   });
 
-  it('renders a "New Package" button', () => {
+  it('renders a "New package" button', () => {
     render(<AddPackageActionButton />);
 
-    expect(screen.getByRole('button', { name: 'New Package' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'New package' })).toBeInTheDocument();
   });
 
   it('launches the new package workspace when a privileged user clicks', async () => {
     const user = userEvent.setup();
     render(<AddPackageActionButton />);
 
-    await user.click(screen.getByRole('button', { name: 'New Package' }));
+    await user.click(screen.getByRole('button', { name: 'New package' }));
 
     expect(mockUserHasAccess).toHaveBeenCalledWith('Manage Metadata Export Packages', expect.anything());
     expect(mockLaunchPackageFormWorkspace).toHaveBeenCalledTimes(1);
@@ -43,7 +43,7 @@ describe('AddPackageActionButton', () => {
     mockUserHasAccess.mockReturnValue(false);
     render(<AddPackageActionButton />);
 
-    expect(screen.queryByRole('button', { name: 'New Package' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'New package' })).not.toBeInTheDocument();
     expect(mockLaunchPackageFormWorkspace).not.toHaveBeenCalled();
   });
 
@@ -51,7 +51,7 @@ describe('AddPackageActionButton', () => {
     mockUseSession.mockReturnValue({ authenticated: false } as unknown as Session);
     render(<AddPackageActionButton />);
 
-    expect(screen.queryByRole('button', { name: 'New Package' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'New package' })).not.toBeInTheDocument();
     expect(mockUserHasAccess).not.toHaveBeenCalled();
   });
 });

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

@@ -1,9 +1,5 @@
-import { type TFunction } from 'i18next';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 
-export const launchPackageFormWorkspace = (t: TFunction, uuid?: string) => {
-  launchWorkspace('metadata-package-form-workspace', {
-    workspaceTitle: uuid ? t('editpackage', 'Edit package') : t('newpackage', 'New package'),
-    uuid,
-  });
+export const launchPackageFormWorkspace = (uuid?: string) => {
+  launchWorkspace2('metadata-package-form-workspace', { uuid });
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { OpenmrsFetchError, showSnackbar } from '@openmrs/esm-framework';
+import { OpenmrsFetchError, showSnackbar, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
 import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
 import { useDomains } from '../../domain-lookups/domain-lookups.resource';
 import { createPackage, editPackage, usePackage } from '../../packages/packages.resource';
@@ -25,8 +25,7 @@ const mockEditPackage = editPackage as Mock;
 const mockUsePackage = usePackage as Mock;
 const mockShowSnackbar = showSnackbar as Mock;
 const mockCloseWorkspace = vi.fn();
-const mockCloseWorkspaceWithSavedChanges = vi.fn();
-const mockPromptBeforeClosing = vi.fn();
+const mockWorkspace2 = vi.mocked(Workspace2);
 
 const domains = ['ATTRIBUTE_TYPES', 'CONCEPTS', 'ENCOUNTER_TYPES'];
 
@@ -40,18 +39,22 @@ const fetchError = (responseBody: unknown) =>
     new Error(),
   );
 
+function workspaceProps(uuid?: string): Workspace2DefinitionProps<{ uuid?: string }> {
+  return {
+    workspaceProps: { uuid },
+    windowProps: null,
+    groupProps: null,
+    closeWorkspace: mockCloseWorkspace,
+    launchChildWorkspace: vi.fn(),
+    workspaceName: 'metadata-package-form-workspace',
+    windowName: 'metadata-package-form-window',
+    isRootWorkspace: true,
+    showActionMenu: false,
+  };
+}
+
 function renderWorkspace(uuid?: string) {
-  return render(
-    <MetadataPackageFormWorkspace
-      uuid={uuid}
-      closeWorkspace={mockCloseWorkspace}
-      closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
-      promptBeforeClosing={mockPromptBeforeClosing}
-      setTitle={vi.fn()}
-      // @ts-expect-error - the workspace only uses closeWorkspace and promptBeforeClosing from the default props
-      additionalProps={{}}
-    />,
-  );
+  return render(<MetadataPackageFormWorkspace {...workspaceProps(uuid)} />);
 }
 
 describe('PackageFormWorkspace', () => {
@@ -135,8 +138,7 @@ describe('PackageFormWorkspace', () => {
       expect.objectContaining({ title: 'Package created', kind: 'success' }),
     );
     // Closes without triggering the "unsaved changes" prompt.
-    expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
-    expect(mockCloseWorkspace).not.toHaveBeenCalled();
+    expect(mockCloseWorkspace).toHaveBeenCalledWith({ discardUnsavedChanges: true });
   });
 
   it('sends an empty entries array when every domain is selected', async () => {
@@ -209,7 +211,24 @@ describe('PackageFormWorkspace', () => {
 
     await user.click(screen.getByRole('button', { name: 'Cancel' }));
 
-    expect(mockCloseWorkspace).toHaveBeenCalled();
+    expect(mockCloseWorkspace).toHaveBeenCalledWith();
+  });
+
+  it('marks the workspace as having unsaved changes once the user starts filling the form', async () => {
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    expect(mockWorkspace2).toHaveBeenLastCalledWith(
+      expect.objectContaining({ title: 'New package', hasUnsavedChanges: false }),
+      expect.anything(),
+    );
+
+    await user.type(screen.getByRole('textbox', { name: 'Package name' }), 'Core reference data');
+
+    expect(mockWorkspace2).toHaveBeenLastCalledWith(
+      expect.objectContaining({ hasUnsavedChanges: true }),
+      expect.anything(),
+    );
   });
 
   describe('edit mode', () => {
@@ -231,6 +250,25 @@ describe('PackageFormWorkspace', () => {
       expect(screen.getByText('Not found')).toBeInTheDocument();
     });
 
+    it('still reports unsaved changes when a refetch fails after the user has edited the package', async () => {
+      const exportPackage = { name: 'Original name', description: '', entries: [{ domain: 'CONCEPTS' }] };
+      mockUsePackage.mockReturnValue({ exportPackage, isLoading: false, error: undefined });
+      const user = userEvent.setup();
+      const { rerender } = renderWorkspace(uuid);
+
+      await user.type(screen.getByRole('textbox', { name: 'Package name' }), ' edited');
+
+      // SWR keeps the cached package but reports the error from a failed background revalidation.
+      mockUsePackage.mockReturnValue({ exportPackage, isLoading: false, error: new Error('Network error') });
+      rerender(<MetadataPackageFormWorkspace {...workspaceProps(uuid)} />);
+
+      expect(screen.getByText('Error loading package')).toBeInTheDocument();
+      expect(mockWorkspace2).toHaveBeenLastCalledWith(
+        expect.objectContaining({ hasUnsavedChanges: true }),
+        expect.anything(),
+      );
+    });
+
     it('seeds the form from the fetched package', () => {
       mockUsePackage.mockReturnValue({
         exportPackage: {
@@ -267,17 +305,7 @@ describe('PackageFormWorkspace', () => {
 
       // Simulate a background revalidation returning the original server values again.
       mockUsePackage.mockReturnValue(serverPackage());
-      rerender(
-        <MetadataPackageFormWorkspace
-          uuid={uuid}
-          closeWorkspace={mockCloseWorkspace}
-          closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
-          promptBeforeClosing={mockPromptBeforeClosing}
-          setTitle={vi.fn()}
-          // @ts-expect-error - the workspace only uses closeWorkspace and promptBeforeClosing from the default props
-          additionalProps={{}}
-        />,
-      );
+      rerender(<MetadataPackageFormWorkspace {...workspaceProps(uuid)} />);
 
       expect(screen.getByRole('textbox', { name: 'Package name' })).toHaveValue('My edited name');
     });
@@ -320,7 +348,7 @@ describe('PackageFormWorkspace', () => {
       expect(mockShowSnackbar).toHaveBeenCalledWith(
         expect.objectContaining({ title: 'Package updated', kind: 'success' }),
       );
-      expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
+      expect(mockCloseWorkspace).toHaveBeenCalledWith({ discardUnsavedChanges: true });
     });
 
     it('shows an update-failure snackbar and keeps the workspace open on error', async () => {
@@ -342,7 +370,7 @@ describe('PackageFormWorkspace', () => {
           kind: 'error',
         }),
       );
-      expect(mockCloseWorkspaceWithSavedChanges).not.toHaveBeenCalled();
+      expect(mockCloseWorkspace).not.toHaveBeenCalled();
     });
   });
 });

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

@@ -13,21 +13,26 @@ import {
   TextInput,
 } from '@carbon/react';
 import { useSWRConfig } from 'swr';
-import { type DefaultWorkspaceProps, showSnackbar, useLayoutType, OpenmrsFetchError } from '@openmrs/esm-framework';
+import {
+  showSnackbar,
+  useLayoutType,
+  OpenmrsFetchError,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
 import { formatDomainLabel, useDomains } from '../../domain-lookups/domain-lookups.resource';
 import { createPackage, editPackage, isPackagesCacheKey, usePackage } from '../../packages/packages.resource';
 import styles from './metadata-package-form.workspace.scss';
 
-interface PackageFormWorkspaceProps extends DefaultWorkspaceProps {
+interface PackageFormWorkspaceProps {
   uuid?: string;
 }
 
-const MetadataPackageFormWorkspace: React.FC<PackageFormWorkspaceProps> = ({
-  uuid,
+const MetadataPackageFormWorkspace: React.FC<Workspace2DefinitionProps<PackageFormWorkspaceProps>> = ({
+  workspaceProps,
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
 }) => {
+  const uuid = workspaceProps?.uuid;
   const { t } = useTranslation();
   const { mutate } = useSWRConfig();
   const isTablet = useLayoutType() === 'tablet';
@@ -65,10 +70,6 @@ const MetadataPackageFormWorkspace: React.FC<PackageFormWorkspaceProps> = ({
 
   const hasUnsavedChanges = packageName.trim().length > 0 || description.trim().length > 0 || selectedDomains.size > 0;
 
-  useEffect(() => {
-    promptBeforeClosing(() => hasUnsavedChanges);
-  }, [hasUnsavedChanges, promptBeforeClosing]);
-
   // Seed the form from the fetched package exactly once, so a later SWR revalidation
   // of the package or domain list doesn't clobber the user's in-progress edits.
   // An empty entries list means the package includes every registered domain.
@@ -125,7 +126,7 @@ const MetadataPackageFormWorkspace: React.FC<PackageFormWorkspaceProps> = ({
           });
         }
         // Bypass the "unsaved changes" prompt now that the package is persisted.
-        closeWorkspaceWithSavedChanges();
+        closeWorkspace({ discardUnsavedChanges: true });
       } catch (submitError) {
         const responseBody = submitError instanceof OpenmrsFetchError ? submitError.responseBody : null;
         const reason =
@@ -153,124 +154,121 @@ const MetadataPackageFormWorkspace: React.FC<PackageFormWorkspaceProps> = ({
         setIsSubmitting(false);
       }
     },
-    [
-      allSelected,
-      closeWorkspaceWithSavedChanges,
-      description,
-      isEditMode,
-      mutate,
-      packageName,
-      selectedDomains,
-      t,
-      uuid,
-    ],
+    [allSelected, closeWorkspace, description, isEditMode, mutate, packageName, selectedDomains, t, uuid],
   );
 
   const isSubmitDisabled = packageName.trim().length === 0 || selectedDomains.size === 0 || isSubmitting;
+  const title = isEditMode ? t('editPackage', 'Edit package') : t('newPackage', 'New package');
 
   if (isEditMode && isLoadingPackage) {
     return (
-      <div className={styles.form}>
-        <InlineLoading description={t('loadingPackage', 'Loading package…')} />
-      </div>
+      <Workspace2 title={title}>
+        <div className={styles.form}>
+          <InlineLoading description={t('loadingPackage', 'Loading package…')} />
+        </div>
+      </Workspace2>
     );
   }
 
   if (packageError) {
     return (
-      <div className={styles.form}>
-        <InlineNotification
-          kind="error"
-          lowContrast
-          title={t('errorLoadingPackage', 'Error loading package')}
-          subtitle={packageError.message}
-        />
-      </div>
+      <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+        <div className={styles.form}>
+          <InlineNotification
+            kind="error"
+            lowContrast
+            title={t('errorLoadingPackage', 'Error loading package')}
+            subtitle={packageError.message}
+          />
+        </div>
+      </Workspace2>
     );
   }
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit}>
-      <div className={styles.grid}>
-        <Stack gap={6}>
-          <section className={styles.section}>
-            <TextInput
-              id="packageName"
-              labelText={t('packageName', 'Package name')}
-              placeholder={t('packageNamePlaceholder', 'e.g. Core reference data')}
-              value={packageName}
-              onChange={(event) => setPackageName(event.target.value)}
-            />
-          </section>
+    <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form className={styles.form} onSubmit={handleSubmit}>
+        <div className={styles.grid}>
+          <Stack gap={6}>
+            <section className={styles.section}>
+              <TextInput
+                id="packageName"
+                labelText={t('packageName', 'Package name')}
+                placeholder={t('packageNamePlaceholder', 'e.g. Core reference data')}
+                value={packageName}
+                onChange={(event) => setPackageName(event.target.value)}
+              />
+            </section>
 
-          <section className={styles.section}>
-            <TextArea
-              id="packageDescription"
-              labelText={t('description', 'Description')}
-              placeholder={t('descriptionPlaceholder', 'Briefly describe what this package contains')}
-              value={description}
-              onChange={(event) => setDescription(event.target.value)}
-            />
-          </section>
+            <section className={styles.section}>
+              <TextArea
+                id="packageDescription"
+                labelText={t('description', 'Description')}
+                placeholder={t('descriptionPlaceholder', 'Briefly describe what this package contains')}
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+              />
+            </section>
 
-          <section className={styles.section}>
-            <span className={styles.sectionLabel}>{t('domains', 'Domains')}</span>
+            <section className={styles.section}>
+              <span className={styles.sectionLabel}>{t('domains', 'Domains')}</span>
 
-            {error ? (
-              <InlineNotification
-                kind="error"
-                lowContrast
-                title={t('errorLoadingDomains', 'Error loading domains')}
-                subtitle={error?.message}
-              />
-            ) : isLoading ? (
-              <div className={styles.domainList}>
-                {Array.from({ length: 8 }, (_, index) => (
-                  <CheckboxSkeleton key={index} />
-                ))}
-              </div>
-            ) : (
-              <>
-                <Checkbox
-                  id="select-all-domains"
-                  className={styles.selectAll}
-                  labelText={t('selectAll', 'Select all')}
-                  checked={allSelected}
-                  indeterminate={someSelected}
-                  onChange={(_event, { checked }) => toggleSelectAll(checked)}
+              {error ? (
+                <InlineNotification
+                  kind="error"
+                  lowContrast
+                  title={t('errorLoadingDomains', 'Error loading domains')}
+                  subtitle={error?.message}
                 />
+              ) : isLoading ? (
                 <div className={styles.domainList}>
-                  {domains.map((domain) => (
-                    <Checkbox
-                      key={domain}
-                      id={`domain-${domain}`}
-                      labelText={formatDomainLabel(domain)}
-                      checked={selectedDomains.has(domain)}
-                      onChange={(_event, { checked }) => toggleDomain(domain, checked)}
-                    />
+                  {Array.from({ length: 8 }, (_, index) => (
+                    <CheckboxSkeleton key={index} />
                   ))}
                 </div>
-              </>
-            )}
-          </section>
-        </Stack>
-      </div>
+              ) : (
+                <>
+                  <Checkbox
+                    id="select-all-domains"
+                    className={styles.selectAll}
+                    labelText={t('selectAll', 'Select all')}
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onChange={(_event, { checked }) => toggleSelectAll(checked)}
+                  />
+                  <div className={styles.domainList}>
+                    {domains.map((domain) => (
+                      <Checkbox
+                        key={domain}
+                        id={`domain-${domain}`}
+                        labelText={formatDomainLabel(domain)}
+                        checked={selectedDomains.has(domain)}
+                        onChange={(_event, { checked }) => toggleDomain(domain, checked)}
+                      />
+                    ))}
+                  </div>
+                </>
+              )}
+            </section>
+          </Stack>
+        </div>
 
-      <ButtonSet className={isTablet ? styles.tabletButtonSet : styles.desktopButtonSet}>
-        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.button} kind="primary" type="submit" disabled={isSubmitDisabled}>
-          {isSubmitting ? (
-            <InlineLoading description={(isEditMode ? t('saving', 'Saving') : t('creating', 'Creating')) + '…'} />
-          ) : isEditMode ? (
-            t('saveChanges', 'Save changes')
-          ) : (
-            t('createPackage', 'Create package')
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+        <ButtonSet className={isTablet ? styles.tabletButtonSet : styles.desktopButtonSet}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} kind="primary" type="submit" disabled={isSubmitDisabled}>
+            {isSubmitting ? (
+              <InlineLoading description={(isEditMode ? t('saving', 'Saving') : t('creating', 'Creating')) + '…'} />
+            ) : isEditMode ? (
+              t('saveChanges', 'Save changes')
+            ) : (
+              t('createPackage', 'Create package')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/src/components/packages-table/packages-table.component.tsx

@@ -101,7 +101,7 @@ const PackagesTable: React.FC = () => {
         <EmptyCard
           displayText={t('packages__lower', 'packages')}
           headerTitle={headerTitle}
-          launchForm={canManage ? () => launchPackageFormWorkspace(t) : undefined}
+          launchForm={canManage ? () => launchPackageFormWorkspace() : undefined}
         />
       </div>
     );