@openmrs/esm-openconceptlab-app 3.0.1-pre.7 → 3.0.1-pre.72

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

@@ -14,8 +14,8 @@ import {
 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';
+import type { ImportItem } from '../../types';
+import styles from './import-items.scss';
 
 interface ImportItemsProps {
   importUuid: string;
@@ -29,29 +29,32 @@ const ImportItems: React.FC<ImportItemsProps> = ({ importUuid }) => {
   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 handleImportDetails = useCallback(
+    async (uuid: string) => {
+      setIsLoading(true);
+      const abortController = new AbortController();
 
-    const response = await getImportDetails(uuid, 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();
-  }, []);
+      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 (

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

@@ -1,5 +1,5 @@
 import { openmrsFetch } from '@openmrs/esm-framework';
-import { ImportItem } from '../../types';
+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`;

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

@@ -0,0 +1,23 @@
+@use "@carbon/colors";
+@use "@carbon/type";
+
+.pagination {
+  @include type.type-style('body-short-01');
+  background-color: colors.$white-0;
+  color: colors.$gray-70;
+  border: 1px solid colors.$gray-20;
+  display: flex;
+}
+
+.tableBordered {
+  border: 1px solid colors.$gray-20;
+}
+
+.tableDataRow > td {
+  padding-left: 1rem !important;
+  background-color: colors.$white-0 !important;
+}
+
+.tableHeaderRow > th {
+  background-color: colors.$gray-20 !important;
+}

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

@@ -3,9 +3,12 @@ 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';
+import ImportItems from './import-items.component';
+
+const testProps = {
+  importUuid: mockPreviousImports[1].uuid,
+};
 
 const mockGetImportDetails = getImportDetails as jest.Mock;
 const mockUsePagination = usePagination as jest.Mock;
@@ -34,16 +37,6 @@ describe(`Import Items component`, () => {
     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({
@@ -71,7 +64,7 @@ describe(`Import Items component`, () => {
     expect(screen.getByText('Concept/Mapping')).toBeVisible();
     expect(screen.getByText('Message')).toBeVisible();
 
-    mockImportItems.slice(5).forEach((importItem: ImportItem) => {
+    mockImportItems.slice(5).forEach((importItem) => {
       expect(screen.getByText(importItem.type + ' ' + importItem.uuid)).toBeVisible();
       expect(screen.getByText(importItem.errorMessage)).toBeVisible();
     });
@@ -79,7 +72,7 @@ describe(`Import Items component`, () => {
 });
 
 function renderImportItemsComponent() {
-  renderWithSwr(<ImportItems importUuid={mockPreviousImports[1].uuid} />);
+  renderWithSwr(<ImportItems {...testProps} />);
 }
 
 function waitForLoadingToFinish() {

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

@@ -1,9 +1,9 @@
 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 type { Import } from '../../types';
 import ImportItems from './import-items.component';
+import styles from './import-overview.scss';
 
 interface ImportOverviewProps {
   selectedImportObject: Import;

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

@@ -0,0 +1,10 @@
+@use "@carbon/layout";
+@use "@carbon/type";
+
+.heading01 {
+  @include type.type-style('heading-01');
+}
+
+.indentedContent {
+  margin-left: layout.$spacing-07;
+}

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

@@ -3,7 +3,6 @@ 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`, () => {
@@ -72,7 +71,7 @@ describe(`Import Overview component`, () => {
   });
 });
 
-function renderImportOverviewComponent(importObject: Import) {
+function renderImportOverviewComponent(importObject) {
   renderWithSwr(<ImportOverview selectedImportObject={importObject} />);
 }
 

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

@@ -1,4 +1,4 @@
-import { formatDatetime, showNotification, usePagination } from '@openmrs/esm-framework';
+import React, { Fragment, useState } from 'react';
 import {
   Column,
   DataTable,
@@ -17,12 +17,12 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import React, { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { formatDatetime, showNotification, usePagination } from '@openmrs/esm-framework';
 import { usePreviousImports } from './previous-imports.resource';
-import styles from './previous-imports.component.scss';
-import { Import } from '../types';
+import type { Import } from '../types';
 import ImportOverview from './import-overview/import-overview.component';
+import styles from './previous-imports.scss';
 
 const PreviousImports: React.FC = () => {
   const { t } = useTranslation();

package/src/previous-imports/previous-imports.resource.ts

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

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

@@ -0,0 +1,39 @@
+@use "@carbon/colors";
+@use "@carbon/layout";
+@use "@carbon/type";
+
+.grid {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+  margin-bottom: layout.$spacing-03;
+}
+
+.pagination {
+  @include type.type-style('body-compact-01');
+  background-color: colors.$white-0;
+  color: colors.$gray-70;
+  border: 1px solid colors.$gray-20;
+  display: flex;
+}
+
+.tableBordered {
+  border: 1px solid colors.$gray-20;
+}
+
+.tableRow > td {
+  background-color: colors.$white-0;
+  border-bottom: 1px solid colors.$gray-20 !important;
+}
+
+.tableExpandedRow > td {
+  padding-left: layout.$spacing-09 !important;
+  padding-right: layout.$spacing-09;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+}

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

@@ -3,7 +3,6 @@ import { screen, waitFor } from '@testing-library/react';
 import { formatDatetime, openmrsFetch, usePagination } from '@openmrs/esm-framework';
 import { renderWithSwr } from '../../../../tools/test-helpers';
 import { mockPreviousImports } from '../../../../__mocks__/openconceptlab.mock';
-import { Import } from '../types';
 import PreviousImports from './previous-imports.component';
 
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
@@ -58,7 +57,7 @@ describe(`Previous Imports component`, () => {
     renderPreviousImportsComponent();
     await waitForLoadingToFinish();
 
-    mockPreviousImports.forEach((item: Import) => {
+    mockPreviousImports.forEach((item) => {
       expect(screen.getByText(formatDatetime(item.localDateStarted))).toBeVisible();
       expect(screen.getByText(item.importTime)).toBeVisible();
       expect(screen.getByText(item.status)).toBeVisible();

package/src/root.component.tsx

@@ -1,23 +1,23 @@
-import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
 import React from 'react';
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { SWRConfig } from 'swr';
-import Subscription from './subscription/subscription.component';
-import styles from './root.component.scss';
 import Import from './import/import.component';
 import PreviousImports from './previous-imports/previous-imports.component';
+import Subscription from './subscription/subscription.component';
+import styles from './root.scss';
 
 const Root: React.FC = () => {
   const { t } = useTranslation();
   return (
     <SWRConfig>
       <main className={`omrs-main-content ${styles.main}`}>
-        <h3 className={styles.moduleHeader}>{t('moduleTitle')}</h3>
+        <h3 className={styles.moduleHeader}>{t('moduleTitle', 'OCL Subscription Module')}</h3>
         <Tabs>
-          <TabList className={styles.tabList} contained={true}>
-            <Tab>{t('subscription')} </Tab>
-            <Tab>{t('import')} </Tab>
-            <Tab>{t('previousImports')} </Tab>
+          <TabList aria-label="OCL tabs" className={styles.tabList} contained={true}>
+            <Tab>{t('subscription', 'Subscription')} </Tab>
+            <Tab>{t('import', 'Import')} </Tab>
+            <Tab>{t('previousImports', 'Previous Imports')} </Tab>
           </TabList>
           <TabPanels>
             <TabPanel className={styles.tabPanel}>

package/src/root.scss

@@ -0,0 +1,23 @@
+@use "@carbon/colors";
+@use "@carbon/layout";
+@use "@carbon/type";
+
+.main {
+  background-color: colors.$white-0;
+}
+
+.moduleHeader {
+  @include type.type-style('heading-03');
+  padding-left: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+}
+
+.tabList {
+  padding: 0 layout.$spacing-05;
+}
+
+.tabPanel {
+  height: 100%;
+  background-color: colors.$gray-10;
+}

package/src/root.test.tsx

@@ -10,10 +10,10 @@ describe(`Root component`, () => {
 
   it(`renders the title and tab containers`, () => {
     renderOclSubscriptionModule();
-    expect(screen.getByText('moduleTitle')).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: 'subscription' })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: 'import' })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: 'previousImports' })).toBeInTheDocument();
+    expect(screen.getByText('OCL Subscription Module')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Subscription' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Import' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Previous Imports' })).toBeInTheDocument();
   });
 });
 

package/src/routes.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "openconceptlab": ">=1.2.0",
+    "webservices.rest": "^2.2.0"
+  },
+  "extensions": [
+    {
+      "name": "admin-ocl-card-link",
+      "slot": "system-admin-page-card-link-slot",
+      "component": "adminOclCardLink"
+    }
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "ocl"
+    }
+  ]
+}