@openmrs/esm-metadataexport-app 4.4.1-pre.809 → 4.4.1-pre.836

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

@@ -5,10 +5,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 16217,
+      "size": 18197,
       "sizes": {
-        "css/mini-extract": 1260,
-        "javascript": 14957
+        "css/mini-extract": 1647,
+        "javascript": 16550
       },
       "names": [],
       "idHints": [],
@@ -23,7 +23,7 @@
         "1118.css.map",
         "1118.js.map"
       ],
-      "hash": "26a442dd7b9cc1b5",
+      "hash": "432a533d06d633cd",
       "childrenByOrder": {}
     },
     {
@@ -116,7 +116,7 @@
       "auxiliaryFiles": [
         "openmrs-esm-metadataexport-app.js.map"
       ],
-      "hash": "c1a40c759f22cc57",
+      "hash": "811132445a46d8f5",
       "childrenByOrder": {}
     },
     {
@@ -213,6 +213,35 @@
       "hash": "56a39d122616e3bb",
       "childrenByOrder": {}
     },
+    {
+      "type": "chunk",
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "reason": "split chunk (cache group: defaultVendors)",
+      "size": 2664143,
+      "sizes": {
+        "css/mini-extract": 76447,
+        "javascript": 2587696
+      },
+      "names": [],
+      "idHints": [
+        "vendors"
+      ],
+      "runtime": [
+        "@openmrs/esm-metadataexport-app"
+      ],
+      "files": [
+        "2109.css",
+        "2109.js"
+      ],
+      "auxiliaryFiles": [
+        "2109.css.map",
+        "2109.js.map"
+      ],
+      "hash": "af52a569e62f98cf",
+      "childrenByOrder": {}
+    },
     {
       "type": "chunk",
       "rendered": true,
@@ -356,10 +385,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 6758,
+      "size": 7102,
       "sizes": {
         "css/mini-extract": 90,
-        "javascript": 6668
+        "javascript": 7012
       },
       "names": [],
       "idHints": [],
@@ -374,7 +403,7 @@
         "3566.css.map",
         "3566.js.map"
       ],
-      "hash": "a670fcd76503c0c0",
+      "hash": "33eb2b6d605068dd",
       "childrenByOrder": {}
     },
     {
@@ -614,35 +643,6 @@
       "hash": "1aeb4abeb5edc0fb",
       "childrenByOrder": {}
     },
-    {
-      "type": "chunk",
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "reason": "split chunk (cache group: defaultVendors)",
-      "size": 2662671,
-      "sizes": {
-        "css/mini-extract": 76447,
-        "javascript": 2586224
-      },
-      "names": [],
-      "idHints": [
-        "vendors"
-      ],
-      "runtime": [
-        "@openmrs/esm-metadataexport-app"
-      ],
-      "files": [
-        "4606.css",
-        "4606.js"
-      ],
-      "auxiliaryFiles": [
-        "4606.css.map",
-        "4606.js.map"
-      ],
-      "hash": "0d4a67cd1a2c4215",
-      "childrenByOrder": {}
-    },
     {
       "type": "chunk",
       "rendered": true,
@@ -742,10 +742,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 16942,
+      "size": 17286,
       "sizes": {
         "css/mini-extract": 1915,
-        "javascript": 15027
+        "javascript": 15371
       },
       "names": [],
       "idHints": [],
@@ -760,7 +760,7 @@
         "5065.css.map",
         "5065.js.map"
       ],
-      "hash": "f7a6feaeea1123ca",
+      "hash": "7c984b3d5f9664c5",
       "childrenByOrder": {}
     },
     {
@@ -768,9 +768,9 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 2009,
+      "size": 2063,
       "sizes": {
-        "javascript": 2009
+        "javascript": 2063
       },
       "names": [],
       "idHints": [],
@@ -783,7 +783,7 @@
       "auxiliaryFiles": [
         "5117.js.map"
       ],
-      "hash": "ba78d6c1024322d4",
+      "hash": "d2addaad0ac571f2",
       "childrenByOrder": {}
     },
     {
@@ -1390,9 +1390,9 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 2553,
+      "size": 2669,
       "sizes": {
-        "javascript": 2553
+        "javascript": 2669
       },
       "names": [],
       "idHints": [],
@@ -1405,7 +1405,7 @@
       "auxiliaryFiles": [
         "8359.js.map"
       ],
-      "hash": "32ed2e68d1a30a4b",
+      "hash": "f8149a32d2324963",
       "childrenByOrder": {}
     },
     {
@@ -1530,10 +1530,10 @@
       "rendered": true,
       "initial": false,
       "entry": false,
-      "size": 18800,
+      "size": 19058,
       "sizes": {
         "css/mini-extract": 4201,
-        "javascript": 14599
+        "javascript": 14857
       },
       "names": [],
       "idHints": [],
@@ -1548,7 +1548,7 @@
         "9503.css.map",
         "9503.js.map"
       ],
-      "hash": "bb461446daf5c0e1",
+      "hash": "fccc11f218529838",
       "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.809"}
+{"$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.836"}

package/package.json

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

package/src/components/metadata-export-header/metadata-export-header.component.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { PageHeader, PageHeaderContent } from '@openmrs/esm-framework';
+import { PageHeader, PageHeaderContent, MetadataExportPictogram } from '@openmrs/esm-framework';
 import styles from './metadata-export-header.scss';
 import AddPackageActionButton from '../metadata-package-form/add-package-action-button/add-package-action-button.component';
 
 export const MetaDataExportHeader: React.FC<{ title: string }> = ({ title }) => {
   return (
     <PageHeader className={styles.header} data-testid="metadata-export-header">
-      <PageHeaderContent illustration={<></>} title={title} />
+      <PageHeaderContent illustration={<MetadataExportPictogram />} title={title} />
 
       <div className={styles['right-justified-items']}>
         <AddPackageActionButton />

package/src/components/metadata-export-header/metadata-export-header.scss

@@ -5,12 +5,10 @@
 
 .header {
   background-color: $ui-02;
-  border: 1px solid $ui-03;
-  border-left: 0;
+  border-block: 1px solid $ui-03;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-left: layout.$spacing-06;
   padding-right: layout.$spacing-03;
 }
 

package/src/components/metadata-export-header/metadata-export-header.test.tsx

@@ -15,4 +15,10 @@ describe('MetaDataExportHeader', () => {
 
     expect(screen.getByTestId('metadata-export-header')).toBeInTheDocument();
   });
+
+  it('renders the metadata export pictogram', () => {
+    render(<MetaDataExportHeader title="Metadata export packages" />);
+
+    expect(screen.getByText('MetadataExportPictogram')).toBeInTheDocument();
+  });
 });

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

@@ -16,6 +16,7 @@ vi.mock('../../packages/packages.resource', () => ({
   createPackage: vi.fn(),
   editPackage: vi.fn(),
   usePackage: vi.fn(),
+  isPackagesCacheKey: vi.fn(),
 }));
 
 const mockUseDomains = useDomains as Mock;

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

@@ -13,20 +13,11 @@ import {
   TextInput,
 } from '@carbon/react';
 import { useSWRConfig } from 'swr';
-import {
-  type DefaultWorkspaceProps,
-  restBaseUrl,
-  showSnackbar,
-  useLayoutType,
-  OpenmrsFetchError,
-} from '@openmrs/esm-framework';
+import { type DefaultWorkspaceProps, showSnackbar, useLayoutType, OpenmrsFetchError } from '@openmrs/esm-framework';
 import { formatDomainLabel, useDomains } from '../../domain-lookups/domain-lookups.resource';
-import { createPackage, editPackage, usePackage } from '../../packages/packages.resource';
+import { createPackage, editPackage, isPackagesCacheKey, usePackage } from '../../packages/packages.resource';
 import styles from './metadata-package-form.workspace.scss';
 
-const packagesUrl = `${restBaseUrl}/metadataexport/packages`;
-const isPackagesCacheKey = (key: unknown) => typeof key === 'string' && key.startsWith(packagesUrl);
-
 interface PackageFormWorkspaceProps extends DefaultWorkspaceProps {
   uuid?: string;
 }

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

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   DataTable,
   DataTableSkeleton,
+  Pagination,
   Table,
   TableBody,
   TableCell,
@@ -21,7 +22,7 @@ import {
   userHasAccess,
 } from '@openmrs/esm-framework';
 import { formatDomainLabel } from '../../domain-lookups/domain-lookups.resource';
-import { useAllPackages } from '../../packages/packages.resource';
+import { usePackages } from '../../packages/packages.resource';
 import { launchPackageFormWorkspace } from '../metadata-package-form/metadata-package-form-utils';
 import ViewPackageActionButton from '../view-metadata-package/view-package-action-button/view-package-action-button.component';
 import styles from './packages-table.scss';
@@ -38,7 +39,8 @@ const PackagesTable: React.FC = () => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const session = useSession();
-  const { packages, isLoading, error } = useAllPackages();
+  const [pageSize, setPageSize] = useState(10);
+  const { packages, totalCount, currentPage, goTo, isLoading, error } = usePackages(pageSize);
 
   const canManage = session.user ? userHasAccess('Manage Metadata Export Packages', session.user) : false;
 
@@ -75,7 +77,9 @@ const PackagesTable: React.FC = () => {
     [packages],
   );
 
-  if (isLoading) {
+  // keepPreviousData holds the current page on screen while the next one loads, so only show the
+  // skeleton on the initial load; otherwise paging swaps the table for the skeleton and drops focus.
+  if (isLoading && !packages.length) {
     return (
       <div className={styles.container}>
         <DataTableSkeleton role="progressbar" columnCount={headers.length} zebra />
@@ -105,39 +109,56 @@ const PackagesTable: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <CardHeader title={headerTitle} />
-      <DataTable rows={rows} headers={headers} size={isDesktop(layout) ? 'sm' : 'lg'} useZebraStyles>
-        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
-          <TableContainer>
-            <Table {...getTableProps()}>
-              <TableHead>
-                <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader {...getHeaderProps({ header })} key={header.key}>
-                      {header.header}
-                    </TableHeader>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => (
-                  <TableRow {...getRowProps({ row })} key={row.id}>
-                    {row.cells.map((cell) =>
-                      cell.info.header === 'actions' ? (
-                        <TableCell key={cell.id}>
-                          <ViewPackageActionButton exportPackage={packagesByUuid.get(row.id)} />
-                        </TableCell>
-                      ) : (
-                        <TableCell key={cell.id}>{cell.value}</TableCell>
-                      ),
-                    )}
+      <div className={styles.widgetCard}>
+        <CardHeader title={headerTitle} />
+        <DataTable rows={rows} headers={headers} size={isDesktop(layout) ? 'sm' : 'lg'} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-      </DataTable>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) =>
+                        cell.info.header === 'actions' ? (
+                          <TableCell key={cell.id}>
+                            <ViewPackageActionButton exportPackage={packagesByUuid.get(row.id)} />
+                          </TableCell>
+                        ) : (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ),
+                      )}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={[10, 20, 50, 100]}
+          totalItems={totalCount}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          onChange={({ page, pageSize: newPageSize }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            goTo(page);
+          }}
+        />
+      </div>
     </div>
   );
 };

package/src/components/packages-table/packages-table.scss

@@ -1,5 +1,9 @@
 @use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: layout.$spacing-05;
 }
+.widgetCard {
+  border: 1px solid $ui-03;
+}

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

@@ -4,14 +4,14 @@ import userEvent from '@testing-library/user-event';
 import { type Session, useSession, userHasAccess } from '@openmrs/esm-framework';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { type ExportPackage } from '../../types/index';
-import { useAllPackages } from '../../packages/packages.resource';
+import { usePackages } from '../../packages/packages.resource';
 import { launchPackageFormWorkspace } from '../metadata-package-form/metadata-package-form-utils';
 import { launchViewMetadataPackageWorkspace } from '../view-metadata-package/view-metadata-package-utils';
 import PackagesTable from './packages-table.component';
 
 vi.mock('../../packages/packages.resource', async (importOriginal) => ({
   ...(await importOriginal<object>()),
-  useAllPackages: vi.fn(),
+  usePackages: vi.fn(),
 }));
 
 vi.mock('../metadata-package-form/metadata-package-form-utils', () => ({
@@ -22,7 +22,7 @@ vi.mock('../view-metadata-package/view-metadata-package-utils', () => ({
   launchViewMetadataPackageWorkspace: vi.fn(),
 }));
 
-const mockUseAllPackages = vi.mocked(useAllPackages);
+const mockUsePackages = vi.mocked(usePackages);
 const mockUseSession = vi.mocked(useSession);
 const mockUserHasAccess = vi.mocked(userHasAccess);
 const mockLaunchPackageFormWorkspace = vi.mocked(launchPackageFormWorkspace);
@@ -63,8 +63,12 @@ const unbuiltPackage: ExportPackage = {
 
 describe('PackagesTable', () => {
   beforeEach(() => {
-    mockUseAllPackages.mockReturnValue({
+    mockUsePackages.mockReturnValue({
       packages: [],
+      totalCount: 0,
+      currentPage: 1,
+      currentPageSize: 10,
+      goTo: vi.fn(),
       isLoading: false,
       isValidating: false,
       error: undefined,
@@ -92,10 +96,50 @@ describe('PackagesTable', () => {
     expect(mockLaunchPackageFormWorkspace).not.toHaveBeenCalled();
   });
 
+  it('shows the loading skeleton on the initial load, before any packages have arrived', () => {
+    mockUsePackages.mockReturnValue({
+      packages: [],
+      totalCount: 0,
+      currentPage: 1,
+      currentPageSize: 10,
+      goTo: vi.fn(),
+      isLoading: true,
+      isValidating: false,
+      error: undefined,
+      mutate: vi.fn(),
+    });
+    render(<PackagesTable />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('keeps the current page on screen while the next page loads instead of swapping in the skeleton', () => {
+    // keepPreviousData means isLoading can be true while the previous page's data is still present.
+    mockUsePackages.mockReturnValue({
+      packages: [builtPackage, unbuiltPackage],
+      totalCount: 25,
+      currentPage: 1,
+      currentPageSize: 10,
+      goTo: vi.fn(),
+      isLoading: true,
+      isValidating: false,
+      error: undefined,
+      mutate: vi.fn(),
+    });
+    render(<PackagesTable />);
+
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    expect(screen.getByRole('row', { name: /Core reference data/ })).toBeInTheDocument();
+  });
+
   it('renders the build status per package and launches the view workspace with the package for the clicked row', async () => {
     const user = userEvent.setup();
-    mockUseAllPackages.mockReturnValue({
+    mockUsePackages.mockReturnValue({
       packages: [builtPackage, unbuiltPackage],
+      totalCount: 2,
+      currentPage: 1,
+      currentPageSize: 10,
+      goTo: vi.fn(),
       isLoading: false,
       isValidating: false,
       error: undefined,
@@ -123,4 +167,56 @@ describe('PackagesTable', () => {
 
     expect(mockLaunchViewPackageWorkspace).toHaveBeenCalledTimes(2);
   });
+
+  // 25 packages across pages of 10 gives three pages, so both Next and the page-size selector are active.
+  const firstPageOfMany = Array.from({ length: 10 }, (_, index) => ({
+    ...unbuiltPackage,
+    uuid: `a1b2c3d4-0000-0000-0000-00000000${(index + 10).toString().padStart(4, '0')}`,
+    name: `Package ${index + 1}`,
+  }));
+
+  it('advances to the next page when the "Next page" control is clicked', async () => {
+    const user = userEvent.setup();
+    const goTo = vi.fn();
+    mockUsePackages.mockReturnValue({
+      packages: firstPageOfMany,
+      totalCount: 25,
+      currentPage: 1,
+      currentPageSize: 10,
+      goTo,
+      isLoading: false,
+      isValidating: false,
+      error: undefined,
+      mutate: vi.fn(),
+    });
+    render(<PackagesTable />);
+
+    await user.click(screen.getByRole('button', { name: 'Next page' }));
+
+    expect(goTo).toHaveBeenCalledWith(2);
+  });
+
+  it('refetches with the new page size and resets to the first page when the page size changes', async () => {
+    const user = userEvent.setup();
+    const goTo = vi.fn();
+    mockUsePackages.mockReturnValue({
+      packages: firstPageOfMany,
+      totalCount: 25,
+      currentPage: 1,
+      currentPageSize: 10,
+      goTo,
+      isLoading: false,
+      isValidating: false,
+      error: undefined,
+      mutate: vi.fn(),
+    });
+    render(<PackagesTable />);
+
+    expect(mockUsePackages).toHaveBeenCalledWith(10);
+
+    await user.selectOptions(screen.getByLabelText(/items per page/i), '20');
+
+    expect(mockUsePackages).toHaveBeenCalledWith(20);
+    expect(goTo).toHaveBeenCalledWith(1);
+  });
 });

package/src/components/view-metadata-package/delete-metadata-package.modal.test.tsx

@@ -9,6 +9,7 @@ import type { ExportPackage } from '../../types';
 
 vi.mock('../../packages/packages.resource', () => ({
   deletePackage: vi.fn(),
+  isPackagesCacheKey: vi.fn(),
 }));
 
 const mockDeletePackage = deletePackage as Mock;

package/src/components/view-metadata-package/delete-metadata-package.modal.tsx

@@ -2,14 +2,11 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader, TextArea } from '@carbon/react';
 import { useSWRConfig } from 'swr';
-import { OpenmrsFetchError, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
-import { deletePackage } from '../../packages/packages.resource';
+import { OpenmrsFetchError, showSnackbar } from '@openmrs/esm-framework';
+import { deletePackage, isPackagesCacheKey } from '../../packages/packages.resource';
 import type { ExportPackage } from '../../types';
 import styles from './delete-metadata-package.modal.scss';
 
-const packagesUrl = `${restBaseUrl}/metadataexport/packages`;
-const isPackagesCacheKey = (key: unknown) => typeof key === 'string' && key.startsWith(packagesUrl);
-
 interface DeletePackageModalProps {
   closeModal: () => void;
   exportPackage: ExportPackage;

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

@@ -20,6 +20,7 @@ vi.mock('@openmrs/esm-framework', async (importOriginal) => {
 vi.mock('../../packages/packages.resource', () => ({
   usePackageBuilds: vi.fn(),
   triggerBuild: vi.fn(),
+  isPackagesCacheKey: vi.fn(),
 }));
 
 const mockTriggerBuild = triggerBuild as Mock;

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

@@ -16,15 +16,11 @@ import {
   userHasAccess,
 } from '@openmrs/esm-framework';
 import { formatDomainLabel } from '../../domain-lookups/domain-lookups.resource';
-import { triggerBuild, usePackageBuilds } from '../../packages/packages.resource';
+import { isPackagesCacheKey, triggerBuild, usePackageBuilds } from '../../packages/packages.resource';
 import type { ExportBuildStatus, ExportPackage } from '../../types';
 import styles from './view-metadata-package.workspace.scss';
 import { launchPackageFormWorkspace } from '../metadata-package-form/metadata-package-form-utils';
 
-const packagesUrl = `${restBaseUrl}/metadataexport/packages`;
-// useOpenmrsPagination keys the cache with absolute URLs, so match on inclusion rather than prefix.
-const isPackagesCacheKey = (key: unknown) => typeof key === 'string' && key.includes(packagesUrl);
-
 interface ViewPackageWorkspaceProps extends DefaultWorkspaceProps {
   exportPackage: ExportPackage;
 }