@openmrs/esm-openconceptlab-app 3.0.1-pre.10

package/src/import/import.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Import from './import.component';
+import { openmrsFetch, showNotification } from '@openmrs/esm-framework';
+import { renderWithSwr } from '../../../../tools/test-helpers';
+import { startImportWithSubscription } from './import.resource';
+import { mockSubscription } from '../../../../__mocks__/openconceptlab.mock';
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockStartImportWithSubscription = startImportWithSubscription as jest.Mock;
+const mockShowNotification = showNotification as jest.Mock;
+
+jest.mock('./import.resource', () => {
+  const originalModule = jest.requireActual('./import.resource');
+
+  return {
+    ...originalModule,
+    startImportWithSubscription: jest.fn(),
+    startImportWithFile: jest.fn(),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    showNotification: jest.fn(),
+  };
+});
+
+describe(`Import component`, () => {
+  afterEach(() => {
+    mockShowNotification.mockReset();
+  });
+
+  it(`renders without dying`, () => {
+    renderImportComponent();
+  });
+
+  it(`renders the form elements`, async () => {
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+    renderImportComponent();
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText('Import Concepts')).toBeVisible();
+    expect(screen.getByText('Import from Subscription')).toBeVisible();
+
+    expect(screen.getByText('Import from file (Offline)')).toBeVisible();
+    expect(screen.getByText('Import from file')).toBeEnabled();
+    expect(screen.queryByText('File Added')).not.toBeInTheDocument();
+  });
+
+  it(`renders correctly when there is no subscription`, async () => {
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+    renderImportComponent();
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText('Import from Subscription')).toBeDisabled();
+    expect(screen.getByText('Import from file')).toBeEnabled();
+  });
+
+  it(`renders correctly when when a subscription exists`, async () => {
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [mockSubscription] } });
+    renderImportComponent();
+    await waitForLoadingToFinish();
+
+    await waitFor(() => expect(screen.getByText('Import from Subscription')).toBeEnabled(), { timeout: 2000 });
+    expect(screen.getByText('Import from file')).toBeEnabled();
+  });
+
+  it(`allows starting an import using the subscription`, async () => {
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [mockSubscription] } });
+    renderImportComponent();
+    await waitForLoadingToFinish();
+
+    mockStartImportWithSubscription.mockReturnValueOnce({ status: 201 });
+
+    await waitFor(() => userEvent.click(screen.getByText('Import from Subscription')));
+
+    expect(mockStartImportWithSubscription).toHaveBeenCalledWith(new AbortController());
+    expect(mockStartImportWithSubscription).toHaveBeenCalledTimes(1);
+
+    expect(mockShowNotification).toHaveBeenCalledWith(
+      expect.objectContaining({
+        description: 'Import started successfully',
+        kind: 'success',
+      }),
+    );
+    expect(mockShowNotification).toHaveBeenCalledTimes(1);
+  });
+});
+
+function renderImportComponent() {
+  renderWithSwr(<Import />);
+}
+
+function waitForLoadingToFinish() {
+  return waitFor(() => {
+    expect(screen.getByText('Import Concepts')).toBeVisible, { timeout: 2000 };
+  });
+}

package/src/index.ts

@@ -0,0 +1,61 @@
+/**
+ * This is the entrypoint file of the application. It communicates the
+ * important features of this microfrontend to the app shell. It
+ * connects the app shell to the React application(s) that make up this
+ * microfrontend.
+ */
+
+import { getAsyncLifecycle, defineConfigSchema } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+/**
+ * This tells the app shell how to obtain translation files: that they
+ * are JSON files in the directory `../translations` (which you should
+ * see in the directory structure).
+ */
+const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+/**
+ * This tells the app shell what versions of what OpenMRS backend modules
+ * are expected. Warnings will appear if suitable modules are not
+ * installed. The keys are the part of the module name after
+ * `openmrs-module-`; e.g., `openmrs-module-fhir2` becomes `fhir2`.
+ */
+const backendDependencies = {
+  openconceptlab: '^1.2.0',
+  'webservices.rest': '^2.2.0',
+};
+
+/**
+ * This function performs any setup that should happen at microfrontend
+ * load-time (such as defining the config schema) and then returns an
+ * object which describes how the React application(s) should be
+ * rendered.
+ *
+ * In this example, our return object contains a single page definition.
+ * It tells the app shell that the default export of `greeter.tsx`
+ * should be rendered when the route matches `hello`. The full route
+ * will be `openmrsSpaBase() + 'hello'`, which is usually
+ * `/openmrs/spa/hello`.
+ */
+function setupOpenMRS() {
+  const moduleName = '@openmrs/esm-openconceptlab-app';
+
+  const options = {
+    featureName: 'openconceptlab',
+    moduleName,
+  };
+
+  defineConfigSchema(moduleName, configSchema);
+
+  return {
+    pages: [
+      {
+        load: getAsyncLifecycle(() => import('./root.component'), options),
+        route: 'ocl',
+      },
+    ],
+  };
+}
+
+export { backendDependencies, importTranslation, setupOpenMRS };

package/src/previous-imports/import-overview/import-items.component.scss

@@ -0,0 +1,24 @@
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.pagination {
+  @include type.type-style('body-short-01');
+  background-color: $ui-02;
+  color: $text-02;
+  border: 1px solid $ui-03;
+  display: flex;
+}
+
+.tableBordered {
+  border: 1px solid $ui-03;
+}
+
+.tableDataRow > td {
+  padding-left: 1rem !important;
+  background-color: $ui-02 !important;
+}
+
+.tableHeaderRow > th {
+  background-color: $ui-03 !important;
+}

package/src/previous-imports/import-overview/import-items.component.tsx

@@ -0,0 +1,124 @@
+import { showNotification, usePagination } from '@openmrs/esm-framework';
+import {
+  DataTableSkeleton,
+  Link,
+  Pagination,
+  PaginationSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getImportDetails } from './import-items.resource';
+import styles from './import-items.component.scss';
+import { ImportItem } from '../../types';
+
+interface ImportItemsProps {
+  importUuid: string;
+}
+
+const ImportItems: React.FC<ImportItemsProps> = ({ importUuid }) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState<Boolean>();
+  const [pageSize, setPageSize] = useState(5);
+
+  const [selectedImportItems, setSelectedImportItems] = useState<ImportItem[]>([]);
+  const { results, currentPage, goTo } = usePagination(selectedImportItems, pageSize);
+
+  const handleImportDetails = useCallback(
+    async (uuid: string) => {
+      setIsLoading(true);
+      const abortController = new AbortController();
+
+      const response = await getImportDetails(uuid, abortController);
+
+      if (response.ok) {
+        setSelectedImportItems(response.data.results);
+      } else {
+        showNotification({
+          title: t('importItemsFetchError', 'Error occured while fetching the import items'),
+          kind: 'error',
+          critical: true,
+          description: JSON.stringify(response.data),
+        });
+      }
+      setIsLoading(false);
+      return () => abortController.abort();
+    },
+    [t],
+  );
+
+  useEffect(() => {
+    handleImportDetails(importUuid);
+  }, [handleImportDetails, importUuid]);
+
+  if (isLoading) {
+    return (
+      <div>
+        <DataTableSkeleton showHeader={false} showToolbar={false} columnCount={2} />
+        <PaginationSkeleton />
+      </div>
+    );
+  }
+
+  const headerData = [
+    {
+      header: t('conceptOrMapping', 'Concept/Mapping'),
+      key: 'uuid',
+    },
+    {
+      header: t('message', 'Message'),
+      key: 'errorMessage',
+    },
+  ];
+
+  return (
+    !isLoading && (
+      <div>
+        <Table size="sm" className={styles.tableBordered}>
+          <TableHead>
+            <TableRow className={styles.tableHeaderRow}>
+              {headerData.map((header, i) => (
+                <TableHeader key={i} isSortable={true}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {results?.map((row) => (
+              <Fragment key={row.uuid}>
+                <TableRow className={styles.tableDataRow}>
+                  <TableCell>
+                    <Link href={row.versionUrl}>
+                      {row.type} {row.uuid}
+                    </Link>
+                  </TableCell>
+                  <TableCell>{row.errorMessage}</TableCell>
+                </TableRow>
+              </Fragment>
+            ))}
+          </TableBody>
+        </Table>
+        <Pagination
+          className={styles.pagination}
+          size="sm"
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={[5, 10, 20, 50, 100]}
+          totalItems={selectedImportItems?.length}
+          onChange={({ page, pageSize }) => {
+            goTo(page);
+            setPageSize(pageSize);
+          }}
+        />
+      </div>
+    )
+  );
+};
+
+export default ImportItems;

package/src/previous-imports/import-overview/import-items.resource.ts

@@ -0,0 +1,10 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { ImportItem } from '../../types';
+
+export async function getImportDetails(importUuid: string, abortController?: AbortController) {
+  const url = `/ws/rest/v1/openconceptlab/import/${importUuid}/item?state=ERROR&v=full`;
+  return openmrsFetch<{ results: ImportItem[] }>(url, {
+    method: 'GET',
+    signal: abortController?.signal,
+  });
+}

package/src/previous-imports/import-overview/import-items.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { usePagination } from '@openmrs/esm-framework';
+import { renderWithSwr } from '../../../../../tools/test-helpers';
+import { mockImportItems, mockPreviousImports } from '../../../../../__mocks__/openconceptlab.mock';
+import { ImportItem } from '../../types';
+import ImportItems from './import-items.component';
+import { getImportDetails } from './import-items.resource';
+
+const testProps = {
+  importUuid: mockPreviousImports[1].uuid,
+};
+
+const mockGetImportDetails = getImportDetails as jest.Mock;
+const mockUsePagination = usePagination as jest.Mock;
+
+jest.mock('./import-items.resource', () => {
+  const originalModule = jest.requireActual('./import-items.resource');
+
+  return {
+    ...originalModule,
+    getImportDetails: jest.fn(),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    usePagination: jest.fn(),
+  };
+});
+
+describe(`Import Items component`, () => {
+  afterEach(() => {
+    mockGetImportDetails.mockReset();
+    mockUsePagination.mockReset();
+  });
+
+  it(`renders without dying`, () => {
+    mockGetImportDetails.mockReturnValue({ status: 200, ok: true, data: [] });
+    mockUsePagination.mockReturnValue({
+      currentPage: 1,
+      goTo: () => {},
+      results: [],
+    });
+    renderImportItemsComponent();
+  });
+
+  it(`renders the table`, async () => {
+    mockGetImportDetails.mockReturnValue({ status: 200, ok: true, data: mockImportItems });
+    mockUsePagination.mockReturnValue({
+      currentPage: 1,
+      goTo: () => {},
+      results: mockImportItems,
+    });
+    renderImportItemsComponent();
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText('Concept/Mapping')).toBeVisible();
+    expect(screen.getByText('Message')).toBeVisible();
+  });
+
+  it(`renders the import items correctly`, async () => {
+    mockGetImportDetails.mockReturnValue({ status: 200, ok: true, data: mockImportItems });
+    mockUsePagination.mockReturnValue({
+      currentPage: 1,
+      goTo: () => {},
+      results: mockImportItems,
+    });
+    renderImportItemsComponent();
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText('Concept/Mapping')).toBeVisible();
+    expect(screen.getByText('Message')).toBeVisible();
+
+    mockImportItems.slice(5).forEach((importItem: ImportItem) => {
+      expect(screen.getByText(importItem.type + ' ' + importItem.uuid)).toBeVisible();
+      expect(screen.getByText(importItem.errorMessage)).toBeVisible();
+    });
+  });
+});
+
+function renderImportItemsComponent() {
+  renderWithSwr(<ImportItems {...testProps} />);
+}
+
+function waitForLoadingToFinish() {
+  return waitFor(() => {
+    expect(screen.getByText('Concept/Mapping')).toBeVisible(), { timeout: 2000 };
+  });
+}

package/src/previous-imports/import-overview/import-overview.component.scss

@@ -0,0 +1,11 @@
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.heading01 {
+  @include type.type-style('heading-01');
+}
+
+.indentedContent {
+  margin-left: spacing.$spacing-07;
+}

package/src/previous-imports/import-overview/import-overview.component.tsx

@@ -0,0 +1,65 @@
+import { formatDatetime } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './import-overview.component.scss';
+import { Import } from '../../types';
+import ImportItems from './import-items.component';
+
+interface ImportOverviewProps {
+  selectedImportObject: Import;
+}
+
+const ImportOverview: React.FC<ImportOverviewProps> = ({ selectedImportObject }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <span className={styles.heading01}>{t('startedOn', 'Started on')} </span>
+      <span className="body">{formatDatetime(new Date(selectedImportObject.localDateStarted))}</span>
+      <br />
+
+      <span className={styles.heading01}>{t('completedOn', 'Completed on')} </span>
+      <span className="body">{formatDatetime(new Date(selectedImportObject.localDateStopped))}</span>
+      <br />
+
+      <span className={styles.heading01}>{t('duration', 'Duration')} </span>
+      <span className="body">{selectedImportObject.importTime}</span>
+      <br />
+      <br />
+
+      <span className={styles.heading01}>{t('result', 'Result:')} </span>
+      <br />
+
+      <div className={`body ${styles.indentedContent}`}>
+        <span>
+          {selectedImportObject.upToDateItemsCount} {t('conceptsUpToDate', 'concepts up to date')}
+        </span>
+        <br />
+        <span>
+          {selectedImportObject.addedItemsCount} {t('conceptsAdded', 'concepts added')}
+        </span>
+        <br />
+        <span>
+          {selectedImportObject.updatedItemsCount} {t('conceptsUpdated', 'concepts updated')}
+        </span>
+        <br />
+        <span>
+          {selectedImportObject.retiredItemsCount} {t('conceptsRetired', 'concepts retired')}
+        </span>
+        <br />
+        <span>
+          {selectedImportObject.errorItemsCount} {t('errorsFound', 'errors found')}
+        </span>
+        <br />
+        <span>
+          {selectedImportObject.ignoredErrorsCount} {t('errorsIgnored', 'errors ignored')}
+        </span>
+        <br />
+      </div>
+      <br />
+      {selectedImportObject.errorItemsCount != 0 && <ImportItems importUuid={selectedImportObject.uuid} />}
+    </div>
+  );
+};
+
+export default ImportOverview;

package/src/previous-imports/import-overview/import-overview.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { formatDatetime } from '@openmrs/esm-framework';
+import { renderWithSwr } from '../../../../../tools/test-helpers';
+import { mockPreviousImports } from '../../../../../__mocks__/openconceptlab.mock';
+import { Import } from '../../types';
+import ImportOverview from './import-overview.component';
+
+describe(`Import Overview component`, () => {
+  it(`renders without dying`, () => {
+    renderImportOverviewComponent(mockPreviousImports[0]);
+  });
+
+  it(`renders the fields`, async () => {
+    renderImportOverviewComponent(mockPreviousImports[0]);
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText('Started on')).toBeVisible();
+    expect(screen.getByText('Completed on')).toBeVisible();
+    expect(screen.getByText('Duration')).toBeVisible();
+    expect(screen.getByText('Result:')).toBeVisible();
+  });
+
+  it(`renders the import details when no errored items`, async () => {
+    const selectedImport = mockPreviousImports[0];
+
+    renderImportOverviewComponent(selectedImport);
+    await waitForLoadingToFinish();
+
+    const startedTimeText = formatDatetime(selectedImport.localDateStarted);
+    const stoppedTimeText = formatDatetime(selectedImport.localDateStopped);
+    const upToDateItemsText = selectedImport.upToDateItemsCount + ' concepts up to date';
+    const addedItemsText = selectedImport.addedItemsCount + ' concepts added';
+    const updatedItemsText = selectedImport.updatedItemsCount + ' concepts updated';
+    const retiredItemsText = selectedImport.retiredItemsCount + ' concepts retired';
+    const errorItemsText = selectedImport.errorItemsCount + ' errors found';
+    const ignoredErrorsText = selectedImport.ignoredErrorsCount + ' errors ignored';
+
+    expect(screen.getByText(startedTimeText)).toBeVisible();
+    expect(screen.getByText(stoppedTimeText)).toBeVisible();
+    expect(screen.getByText(upToDateItemsText)).toBeVisible();
+    expect(screen.getByText(addedItemsText)).toBeVisible();
+    expect(screen.getByText(updatedItemsText)).toBeVisible();
+    expect(screen.getByText(retiredItemsText)).toBeVisible();
+    expect(screen.getByText(errorItemsText)).toBeVisible();
+    expect(screen.getByText(ignoredErrorsText)).toBeVisible();
+  });
+
+  it(`renders the import details when there are errored items`, async () => {
+    const selectedImport = mockPreviousImports[1];
+
+    renderImportOverviewComponent(selectedImport);
+    await waitForLoadingToFinish();
+
+    const startedTimeText = formatDatetime(selectedImport.localDateStarted);
+    const stoppedTimeText = formatDatetime(selectedImport.localDateStopped);
+    const upToDateItemsText = selectedImport.upToDateItemsCount + ' concepts up to date';
+    const addedItemsText = selectedImport.addedItemsCount + ' concepts added';
+    const updatedItemsText = selectedImport.updatedItemsCount + ' concepts updated';
+    const retiredItemsText = selectedImport.retiredItemsCount + ' concepts retired';
+    const errorItemsText = selectedImport.errorItemsCount + ' errors found';
+    const ignoredErrorsText = selectedImport.ignoredErrorsCount + ' errors ignored';
+
+    expect(screen.getByText(startedTimeText)).toBeVisible();
+    expect(screen.getByText(stoppedTimeText)).toBeVisible();
+    expect(screen.getByText(upToDateItemsText)).toBeVisible();
+    expect(screen.getByText(addedItemsText)).toBeVisible();
+    expect(screen.getByText(updatedItemsText)).toBeVisible();
+    expect(screen.getByText(retiredItemsText)).toBeVisible();
+    expect(screen.getByText(errorItemsText)).toBeVisible();
+    expect(screen.getByText(ignoredErrorsText)).toBeVisible();
+  });
+});
+
+function renderImportOverviewComponent(importObject: Import) {
+  renderWithSwr(<ImportOverview selectedImportObject={importObject} />);
+}
+
+function waitForLoadingToFinish() {
+  return waitFor(() => {
+    expect(screen.getByText('Started on')).toBeVisible(), { timeout: 2000 };
+  });
+}

package/src/previous-imports/previous-imports.component.scss

@@ -0,0 +1,39 @@
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.grid {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.productiveHeading03 {
+  @include type.type-style('productive-heading-03');
+  margin-bottom: spacing.$spacing-03;
+}
+
+.pagination {
+  @include type.type-style('body-short-01');
+  background-color: $ui-02;
+  color: $text-02;
+  border: 1px solid $ui-03;
+  display: flex;
+}
+
+.tableBordered {
+  border: 1px solid $ui-03;
+}
+
+.tableRow > td {
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03 !important;
+}
+
+.tableExpandedRow > td {
+  padding-left: spacing.$spacing-09 !important;
+  padding-right: spacing.$spacing-09;
+  padding-top: spacing.$spacing-05;
+  padding-bottom: spacing.$spacing-05;
+}