@openmrs/esm-metadataexport-app 4.4.1-pre.684

package/src/components/new-package/new-package.workspace.scss

@@ -0,0 +1,58 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+}
+
+.grid {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: layout.$spacing-05;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.selectAll {
+  font-weight: 600;
+  border-bottom: 1px solid $ui-03;
+  padding-bottom: layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
+}
+
+.domainList {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.desktopButtonSet {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.tabletButtonSet {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row-reverse;
+}
+
+.desktopButtonSet > .button,
+.tabletButtonSet > .button {
+  flex: 1;
+  max-inline-size: none;
+  height: layout.$spacing-10;
+}

package/src/components/new-package/new-package.workspace.test.tsx

@@ -0,0 +1,206 @@
+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 { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { useDomains } from '../../domain-lookups/domain-lookups.resource';
+import { createPackage } from '../../packages/packages.resource';
+import NewPackageWorkspace from './new-package.workspace';
+
+vi.mock('../../domain-lookups/domain-lookups.resource', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  useDomains: vi.fn(),
+}));
+
+vi.mock('../../packages/packages.resource', () => ({
+  createPackage: vi.fn(),
+}));
+
+const mockUseDomains = useDomains as Mock;
+const mockCreatePackage = createPackage as Mock;
+const mockShowSnackbar = showSnackbar as Mock;
+const mockCloseWorkspace = vi.fn();
+const mockCloseWorkspaceWithSavedChanges = vi.fn();
+const mockPromptBeforeClosing = vi.fn();
+
+const domains = ['ATTRIBUTE_TYPES', 'CONCEPTS', 'ENCOUNTER_TYPES'];
+
+// Builds an OpenmrsFetchError carrying a REST-style response body so we can
+// exercise the component's server-error extraction (fieldErrors / error).
+const fetchError = (responseBody: unknown) =>
+  new OpenmrsFetchError(
+    '/ws/rest/v1/metadataexport/packages',
+    new Response(null, { status: 400, statusText: 'Bad Request' }),
+    responseBody as never,
+    new Error(),
+  );
+
+function renderWorkspace() {
+  render(
+    <NewPackageWorkspace
+      closeWorkspace={mockCloseWorkspace}
+      closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
+      promptBeforeClosing={mockPromptBeforeClosing}
+      setTitle={vi.fn()}
+      // @ts-expect-error - the workspace only uses closeWorkspace and promptBeforeClosing from the default props
+      additionalProps={{}}
+    />,
+  );
+}
+
+describe('NewPackageWorkspace', () => {
+  beforeEach(() => {
+    mockUseDomains.mockReturnValue({ domains, isLoading: false, error: undefined });
+    mockCreatePackage.mockResolvedValue({ data: {} });
+  });
+
+  it('renders a checkbox for each domain with a human-readable label', () => {
+    renderWorkspace();
+
+    expect(screen.getByRole('checkbox', { name: 'Attribute types' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Concepts' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Encounter types' })).toBeInTheDocument();
+  });
+
+  it('shows a loading skeleton while domains are loading', () => {
+    mockUseDomains.mockReturnValue({ domains: [], isLoading: true, error: undefined });
+    renderWorkspace();
+
+    expect(screen.queryByRole('checkbox', { name: 'Select all' })).not.toBeInTheDocument();
+  });
+
+  it('shows an error notification when the domains request fails', () => {
+    mockUseDomains.mockReturnValue({ domains: [], isLoading: false, error: new Error('Boom') });
+    renderWorkspace();
+
+    expect(screen.getByText('Error loading domains')).toBeInTheDocument();
+    expect(screen.getByText('Boom')).toBeInTheDocument();
+  });
+
+  it('disables the submit button until a name and at least one domain are provided', async () => {
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    const submitButton = screen.getByRole('button', { name: 'Create package' });
+    expect(submitButton).toBeDisabled();
+
+    await user.type(screen.getByRole('textbox', { name: 'Package name' }), 'Core reference data');
+    expect(submitButton).toBeDisabled();
+
+    await user.click(screen.getByRole('checkbox', { name: 'Concepts' }));
+    expect(submitButton).toBeEnabled();
+  });
+
+  it('selects and clears every domain via "Select all"', async () => {
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    const selectAll = screen.getByRole('checkbox', { name: 'Select all' });
+    await user.click(selectAll);
+
+    for (const label of ['Attribute types', 'Concepts', 'Encounter types']) {
+      expect(screen.getByRole('checkbox', { name: label })).toBeChecked();
+    }
+
+    await user.click(selectAll);
+    for (const label of ['Attribute types', 'Concepts', 'Encounter types']) {
+      expect(screen.getByRole('checkbox', { name: label })).not.toBeChecked();
+    }
+  });
+
+  it('POSTs the selected domains as entries, shows a snackbar, and closes the workspace', async () => {
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    await user.type(screen.getByRole('textbox', { name: 'Package name' }), 'Core reference data');
+    await user.type(screen.getByRole('textbox', { name: 'Description' }), 'Some notes');
+    await user.click(screen.getByRole('checkbox', { name: 'Concepts' }));
+    await user.click(screen.getByRole('checkbox', { name: 'Encounter types' }));
+    await user.click(screen.getByRole('button', { name: 'Create package' }));
+
+    expect(mockCreatePackage).toHaveBeenCalledWith({
+      name: 'Core reference data',
+      description: 'Some notes',
+      entries: [{ domain: 'CONCEPTS' }, { domain: 'ENCOUNTER_TYPES' }],
+    });
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'Package created', kind: 'success' }),
+    );
+    // Closes without triggering the "unsaved changes" prompt.
+    expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
+    expect(mockCloseWorkspace).not.toHaveBeenCalled();
+  });
+
+  it('sends an empty entries array when every domain is selected', async () => {
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    await user.type(screen.getByRole('textbox', { name: 'Package name' }), 'Everything');
+    await user.click(screen.getByRole('checkbox', { name: 'Select all' }));
+    await user.click(screen.getByRole('button', { name: 'Create package' }));
+
+    expect(mockCreatePackage).toHaveBeenCalledWith(expect.objectContaining({ name: 'Everything', entries: [] }));
+  });
+
+  async function submitValidPackage(user: ReturnType<typeof userEvent.setup>) {
+    await user.type(screen.getByRole('textbox', { name: 'Package name' }), 'Core reference data');
+    await user.click(screen.getByRole('checkbox', { name: 'Concepts' }));
+    await user.click(screen.getByRole('button', { name: 'Create package' }));
+  }
+
+  it('shows a generic error snackbar and keeps the workspace open for an unexpected error', async () => {
+    mockCreatePackage.mockRejectedValue(new Error('Server exploded'));
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    await submitValidPackage(user);
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Failed to create package',
+        subtitle: 'An unexpected error occurred',
+        kind: 'error',
+      }),
+    );
+    expect(mockCloseWorkspace).not.toHaveBeenCalled();
+  });
+
+  it('surfaces the server error message from an OpenmrsFetchError', async () => {
+    mockCreatePackage.mockRejectedValue(fetchError({ error: 'A package with that name already exists' }));
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    await submitValidPackage(user);
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Failed to create package',
+        subtitle: 'A package with that name already exists',
+        kind: 'error',
+      }),
+    );
+    expect(mockCloseWorkspace).not.toHaveBeenCalled();
+  });
+
+  it('surfaces the first field error from an OpenmrsFetchError', async () => {
+    mockCreatePackage.mockRejectedValue(fetchError({ fieldErrors: { name: 'Name must be unique' } }));
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    await submitValidPackage(user);
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'Failed to create package', subtitle: 'Name must be unique', kind: 'error' }),
+    );
+    expect(mockCloseWorkspace).not.toHaveBeenCalled();
+  });
+
+  it('closes the workspace when Cancel is clicked', async () => {
+    const user = userEvent.setup();
+    renderWorkspace();
+
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(mockCloseWorkspace).toHaveBeenCalled();
+  });
+});

package/src/components/new-package/new-package.workspace.tsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  Checkbox,
+  CheckboxSkeleton,
+  Form,
+  InlineLoading,
+  InlineNotification,
+  Stack,
+  TextArea,
+  TextInput,
+} from '@carbon/react';
+import { useSWRConfig } from 'swr';
+import {
+  type DefaultWorkspaceProps,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+  OpenmrsFetchError,
+} from '@openmrs/esm-framework';
+import { formatDomainLabel, useDomains } from '../../domain-lookups/domain-lookups.resource';
+import { createPackage } from '../../packages/packages.resource';
+import styles from './new-package.workspace.scss';
+
+const packagesUrl = `${restBaseUrl}/metadataexport/packages`;
+const isPackagesCacheKey = (key: unknown) => typeof key === 'string' && key.startsWith(packagesUrl);
+
+const NewPackageWorkspace: React.FC<DefaultWorkspaceProps> = ({
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
+  const isTablet = useLayoutType() === 'tablet';
+  const { domains, isLoading, error } = useDomains();
+
+  const [packageName, setPackageName] = useState('');
+  const [description, setDescription] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedDomains, setSelectedDomains] = useState<Set<string>>(new Set());
+
+  const allSelected = domains.length > 0 && selectedDomains.size === domains.length;
+  const someSelected = selectedDomains.size > 0 && !allSelected;
+
+  const toggleSelectAll = useCallback(
+    (checked: boolean) => {
+      setSelectedDomains(checked ? new Set(domains) : new Set());
+    },
+    [domains],
+  );
+
+  const toggleDomain = useCallback((domain: string, checked: boolean) => {
+    setSelectedDomains((previous) => {
+      const next = new Set(previous);
+      if (checked) {
+        next.add(domain);
+      } else {
+        next.delete(domain);
+      }
+      return next;
+    });
+  }, []);
+
+  const hasUnsavedChanges = packageName.trim().length > 0 || description.trim().length > 0 || selectedDomains.size > 0;
+
+  useEffect(() => {
+    promptBeforeClosing(() => hasUnsavedChanges);
+  }, [hasUnsavedChanges, promptBeforeClosing]);
+
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setIsSubmitting(true);
+
+      // An explicit empty array tells the server to include every registered domain.
+      const entries = allSelected ? [] : Array.from(selectedDomains, (domain) => ({ domain }));
+
+      try {
+        await createPackage({ name: packageName.trim(), description: description.trim(), entries });
+        // Revalidate the packages list so the table shows the new package without a refresh.
+        await mutate(isPackagesCacheKey);
+        showSnackbar({
+          title: t('packageCreated', 'Package created'),
+          subtitle: t('packageCreatedSubtitle', '{{name}} was created successfully', { name: packageName.trim() }),
+          kind: 'success',
+          isLowContrast: true,
+        });
+        // Bypass the "unsaved changes" prompt now that the package is persisted.
+        closeWorkspaceWithSavedChanges();
+      } catch (submitError) {
+        const responseBody = submitError instanceof OpenmrsFetchError ? submitError.responseBody : null;
+        const reason =
+          typeof responseBody === 'object' && responseBody !== null
+            ? (Object.values(responseBody.fieldErrors ?? {})[0] ?? responseBody.error)
+            : null;
+        showSnackbar({
+          title: t('packageCreationFailed', 'Failed to create package'),
+          subtitle: reason ?? t('unexpectedError', 'An unexpected error occurred'),
+          kind: 'error',
+          isLowContrast: false,
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [allSelected, closeWorkspaceWithSavedChanges, description, mutate, packageName, selectedDomains, t],
+  );
+
+  const isSubmitDisabled = packageName.trim().length === 0 || selectedDomains.size === 0 || isSubmitting;
+
+  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>
+
+          <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>
+
+            {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)}
+                />
+                <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={t('creating', 'Creating') + '…'} />
+          ) : (
+            t('createPackage', 'Create package')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default NewPackageWorkspace;

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

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import {
+  CardHeader,
+  EmptyCard,
+  ErrorState,
+  isDesktop,
+  useLayoutType,
+  useSession,
+  userHasAccess,
+} from '@openmrs/esm-framework';
+import { formatDomainLabel } from '../../domain-lookups/domain-lookups.resource';
+import { useAllPackages } from '../../packages/packages.resource';
+import { launchAddNewPackageWorkspace } from '../new-package/new-package-utils';
+import styles from './packages-table.scss';
+
+const PackagesTable: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const session = useSession();
+  const { packages, isLoading, error } = useAllPackages();
+
+  const canManage = session.user ? userHasAccess('Manage Metadata Export Packages', session.user) : false;
+
+  const headerTitle = t('packages', 'Packages');
+
+  const headers = useMemo(
+    () => [
+      { key: 'name', header: t('packageName', 'Package name') },
+      { key: 'domains', header: t('domains', 'Domains') },
+      { key: 'description', header: t('description', 'Description') },
+    ],
+    [t],
+  );
+
+  const rows = useMemo(
+    () =>
+      packages.map((exportPackage) => ({
+        id: exportPackage.uuid,
+        name: exportPackage.name,
+        // An empty entries list means the package includes every registered domain.
+        domains: exportPackage.entries.length
+          ? exportPackage.entries.map((entry) => formatDomainLabel(entry.domain)).join(', ')
+          : t('allDomains', 'All domains'),
+        description: exportPackage.description,
+      })),
+    [packages, t],
+  );
+
+  if (isLoading) {
+    return (
+      <div className={styles.container}>
+        <DataTableSkeleton role="progressbar" columnCount={headers.length} zebra />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.container}>
+        <ErrorState error={error} headerTitle={headerTitle} />
+      </div>
+    );
+  }
+
+  if (!packages.length) {
+    return (
+      <div className={styles.container}>
+        <EmptyCard
+          displayText={t('packages__lower', 'packages')}
+          headerTitle={headerTitle}
+          launchForm={canManage ? () => launchAddNewPackageWorkspace(t) : undefined}
+        />
+      </div>
+    );
+  }
+
+  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) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default PackagesTable;

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

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.container {
+  margin: layout.$spacing-05;
+}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+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 { useAllPackages } from '../../packages/packages.resource';
+import { launchAddNewPackageWorkspace } from '../new-package/new-package-utils';
+import PackagesTable from './packages-table.component';
+
+vi.mock('../../packages/packages.resource', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  useAllPackages: vi.fn(),
+}));
+
+vi.mock('../new-package/new-package-utils', () => ({
+  launchAddNewPackageWorkspace: vi.fn(),
+}));
+
+const mockUseAllPackages = vi.mocked(useAllPackages);
+const mockUseSession = vi.mocked(useSession);
+const mockUserHasAccess = vi.mocked(userHasAccess);
+const mockLaunchAddNewPackageWorkspace = vi.mocked(launchAddNewPackageWorkspace);
+
+const sessionWithUser = () => ({ user: { uuid: 'cc8507b8-7c9a-486b-85dc-b8f25ad1e4cc' } }) as unknown as Session;
+
+describe('PackagesTable', () => {
+  beforeEach(() => {
+    mockUseAllPackages.mockReturnValue({
+      packages: [],
+      isLoading: false,
+      isValidating: false,
+      error: undefined,
+      mutate: vi.fn(),
+    });
+    mockUseSession.mockReturnValue(sessionWithUser());
+    mockUserHasAccess.mockReturnValue(true);
+  });
+
+  it('allows privileged users to launch the new package workspace from the empty state', async () => {
+    const user = userEvent.setup();
+    render(<PackagesTable />);
+
+    await user.click(screen.getByRole('button', { name: 'Record packages' }));
+
+    expect(mockUserHasAccess).toHaveBeenCalledWith('Manage Metadata Export Packages', expect.anything());
+    expect(mockLaunchAddNewPackageWorkspace).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not offer the empty-state action to users without the manage privilege', () => {
+    mockUserHasAccess.mockReturnValue(false);
+    render(<PackagesTable />);
+
+    expect(screen.queryByRole('button', { name: 'Record packages' })).not.toBeInTheDocument();
+    expect(mockLaunchAddNewPackageWorkspace).not.toHaveBeenCalled();
+  });
+});

package/src/config-schema.ts

@@ -0,0 +1,3 @@
+export const configSchema = {};
+
+export type ConfigSchema = Record<string, never>;

package/src/constants.ts

@@ -0,0 +1 @@
+export const moduleName = '@openmrs/esm-metadataexport-app';

package/src/declarations.d.ts

@@ -0,0 +1,23 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare interface RequireContext {
+  keys(): string[];
+  (id: string): unknown;
+  <T>(id: string): T;
+  resolve(id: string): string;
+  id: string;
+}
+
+declare namespace NodeJS {
+  interface Require {
+    context(directory: string, useSubdirectories?: boolean, regExp?: RegExp, mode?: string): RequireContext;
+  }
+}