@openmrs/esm-openconceptlab-app 3.0.1-pre.5 → 3.0.1-pre.55

package/src/import/import.component.tsx

@@ -1,4 +1,4 @@
-import { showNotification } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Button,
   ButtonSkeleton,
@@ -8,17 +8,20 @@ import {
   FileUploaderSkeleton,
   Form,
   Grid,
+  InlineLoading,
+  Stack,
   SkeletonText,
 } from '@carbon/react';
-import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import styles from './import.component.scss';
+import { showNotification } from '@openmrs/esm-framework';
 import { startImportWithFile, startImportWithSubscription, useSubscription } from './import.resource';
+import styles from './import.scss';
 
 const Import: React.FC = () => {
   const { t } = useTranslation();
   const [isSubscriptionAvailable, setIsSubscriptionAvailable] = useState(false);
   const [file, setFile] = useState<File>();
+  const [isFileUploading, setIsFileUploading] = useState(false);
 
   const { data: subscription, isLoading, isError } = useSubscription();
 
@@ -34,7 +37,7 @@ const Import: React.FC = () => {
       if (fileToUpload.type !== 'application/zip') {
         showNotification({
           kind: 'error',
-          description: t('fileFormatError'),
+          description: t('fileFormatError', 'Only .zip files are allowed'),
         });
       } else {
         setFile(fileToUpload);
@@ -55,7 +58,7 @@ const Import: React.FC = () => {
       if (!isSubscriptionAvailable) {
         showNotification({
           kind: 'error',
-          description: t('noSubscriptionError'),
+          description: t('noSubscriptionError', 'No saved subscription'),
         });
         return;
       }
@@ -66,12 +69,12 @@ const Import: React.FC = () => {
       if (response.status === 201) {
         showNotification({
           kind: 'success',
-          description: t('importSuccess'),
+          description: t('importSuccess', 'Import started successfully'),
         });
       } else {
         showNotification({
           kind: 'error',
-          description: t('importFailed'),
+          description: t('importFailed', 'Import failed'),
         });
       }
     },
@@ -80,13 +83,15 @@ const Import: React.FC = () => {
 
   const handleImportWithFile = useCallback(
     async (evt: React.FormEvent<HTMLFormElement>) => {
+      setIsFileUploading(true);
       evt.preventDefault();
       evt.stopPropagation();
 
       if (!file) {
+        setIsFileUploading(false);
         showNotification({
           kind: 'error',
-          description: t('noFileSelected'),
+          description: t('noFileSelected', 'No file selected'),
         });
         return;
       }
@@ -96,14 +101,16 @@ const Import: React.FC = () => {
 
       if (response.status === 201) {
         setFile(null);
+        setIsFileUploading(false);
         showNotification({
           kind: 'success',
-          description: t('importSuccess'),
+          description: t('importSuccess', 'Import started successfully'),
         });
       } else {
+        setIsFileUploading(false);
         showNotification({
           kind: 'error',
-          description: t('importFailed'),
+          description: t('importFailed', 'Import failed'),
         });
       }
     },
@@ -134,7 +141,7 @@ const Import: React.FC = () => {
   if (isError) {
     showNotification({
       kind: 'error',
-      description: t('subscriptionError'),
+      description: t('subscriptionError', 'Error occured while fetching the subscription'),
     });
   }
 
@@ -142,23 +149,30 @@ const Import: React.FC = () => {
     <Grid className={styles.grid}>
       <Column sm={4} md={8} lg={10}>
         <Form onSubmit={handleImportWithSubscription}>
-          <h3 className={styles.productiveHeading03}>{t('importConcepts')}</h3>
-          <p className={styles.formText}>{t('importInstructions')}</p>
+          <h3 className={styles.productiveHeading03}>{t('importConcepts', 'Import Concepts')}</h3>
+          <p className={styles.formText}>
+            {t(
+              'importInstructions',
+              'Avoid importing during data entry hours, because the operation may significantly slow down the system. You can either use the subscription or a zip file to import concepts.',
+            )}
+          </p>
           <Button kind="primary" type="submit" disabled={!isSubscriptionAvailable}>
-            {t('importFromSubscription')}
+            {t('importFromSubscription', 'Import from Subscription')}
           </Button>
         </Form>
 
         <Form className={styles.form} onSubmit={handleImportWithFile}>
-          <h3 className={styles.productiveHeading03}>{t('importFromFileHeading')}</h3>
-          <p className={styles.formText}>{t('importFromFileInfo')}</p>
+          <h3 className={styles.productiveHeading03}>{t('importFromFileHeading', 'Import from file (Offline)')}</h3>
+          <p className={styles.formText}>
+            {t('importFromFileInfo', 'You can import data without setting up a subscription by using this option.')}
+          </p>
           {file ? (
             <FileUploaderItem
               key={file.name}
               name={file.name}
               size="default"
               status="edit"
-              iconDescription={t('fileAdded')}
+              iconDescription={t('fileAdded', 'File Added')}
               onDelete={handleFileUploaderItemClick}
               style={{ backgroundColor: '#e0e0e0' }}
             />
@@ -166,14 +180,17 @@ const Import: React.FC = () => {
             <FileUploaderDropContainer
               accept={['application/zip']}
               multiple
-              labelText={t('importFromFileDragInfo')}
+              labelText={t('importFromFileDragInfo', 'Drag and drop file here or click to upload')}
               onAddFiles={onAddFiles}
               style={{ marginBottom: '1.5rem' }}
             />
           )}
-          <Button kind="primary" type="submit">
-            {t('importFromFile')}
-          </Button>
+          <Stack gap={6} orientation="horizontal">
+            <Button kind="primary" type="submit">
+              {t('importFromFile', 'Import from file')}
+            </Button>
+            {isFileUploading && <InlineLoading description={t('uploading', 'Uploading...')} />}
+          </Stack>
         </Form>
       </Column>
     </Grid>

package/src/import/import.resource.ts

@@ -1,6 +1,6 @@
 import { openmrsFetch } from '@openmrs/esm-framework';
 import useSWR from 'swr';
-import { Import, Subscription } from '../types';
+import type { Import, Subscription } from '../types';
 
 export function useSubscription() {
   const { data, error, isValidating } = useSWR<{ data: { results: Subscription[] } }, Error>(

package/src/import/import.test.tsx

@@ -44,14 +44,12 @@ describe(`Import component`, () => {
     renderImportComponent();
     await waitForLoadingToFinish();
 
-    expect(screen.getByText('importConcepts')).toBeVisible();
-    expect(screen.getByText('importInstructions')).toBeVisible();
-    expect(screen.getByText('importFromSubscription')).toBeVisible();
-
-    expect(screen.getByText('importFromFileHeading')).toBeVisible();
-    expect(screen.getByText('importFromFileInfo')).toBeVisible();
-    expect(screen.getByText('importFromFile')).toBeEnabled();
-    expect(screen.queryByText('fileAdded')).not.toBeInTheDocument();
+    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 () => {
@@ -59,8 +57,8 @@ describe(`Import component`, () => {
     renderImportComponent();
     await waitForLoadingToFinish();
 
-    expect(screen.getByText('importFromSubscription')).toBeDisabled();
-    expect(screen.getByText('importFromFile')).toBeEnabled();
+    expect(screen.getByText('Import from Subscription')).toBeDisabled();
+    expect(screen.getByText('Import from file')).toBeEnabled();
   });
 
   it(`renders correctly when when a subscription exists`, async () => {
@@ -68,8 +66,8 @@ describe(`Import component`, () => {
     renderImportComponent();
     await waitForLoadingToFinish();
 
-    expect(screen.getByText('importFromSubscription')).toBeEnabled();
-    expect(screen.getByText('importFromFile')).toBeEnabled();
+    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 () => {
@@ -79,14 +77,14 @@ describe(`Import component`, () => {
 
     mockStartImportWithSubscription.mockReturnValueOnce({ status: 201 });
 
-    await waitFor(() => userEvent.click(screen.getByText('importFromSubscription')));
+    await waitFor(() => userEvent.click(screen.getByText('Import from Subscription')));
 
     expect(mockStartImportWithSubscription).toHaveBeenCalledWith(new AbortController());
     expect(mockStartImportWithSubscription).toHaveBeenCalledTimes(1);
 
     expect(mockShowNotification).toHaveBeenCalledWith(
       expect.objectContaining({
-        description: 'importSuccess',
+        description: 'Import started successfully',
         kind: 'success',
       }),
     );
@@ -100,6 +98,6 @@ function renderImportComponent() {
 
 function waitForLoadingToFinish() {
   return waitFor(() => {
-    expect(screen.getByText('importConcepts')).toBeVisible, { timeout: 2000 };
+    expect(screen.getByText('Import Concepts')).toBeVisible, { timeout: 2000 };
   });
 }

package/src/index.ts

@@ -1,61 +1,19 @@
-/**
- * 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');
+const moduleName = '@openmrs/esm-openconceptlab-app';
 
-/**
- * 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',
+const options = {
+  featureName: 'openconceptlab',
+  moduleName,
 };
 
-/**
- * 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,
-  };
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
+export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
-
-  return {
-    pages: [
-      {
-        load: getAsyncLifecycle(() => import('./root.component'), options),
-        route: 'ocl',
-      },
-    ],
-  };
 }
 
-export { backendDependencies, importTranslation, setupOpenMRS };
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export const adminOclCardLink = getAsyncLifecycle(() => import('./admin-ocl-card-link.component'), options);

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 type { ImportItem } from '../../types';
+import styles from './import-items.scss';
+
+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 type { 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.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.test.tsx

@@ -0,0 +1,82 @@
+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 { getImportDetails } from './import-items.resource';
+import ImportItems from './import-items.component';
+
+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 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) => {
+      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.tsx

@@ -0,0 +1,65 @@
+import { formatDatetime } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Import } from '../../types';
+import ImportItems from './import-items.component';
+import styles from './import-overview.scss';
+
+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.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;
+}