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

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

@@ -1,24 +0,0 @@
-@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

@@ -1,124 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,11 +0,0 @@
-@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

@@ -1,65 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,39 +0,0 @@
-@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;
-}

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

@@ -1,136 +0,0 @@
-import { formatDatetime, showNotification, usePagination } from '@openmrs/esm-framework';
-import {
-  Column,
-  DataTable,
-  DataTableSkeleton,
-  Pagination,
-  PaginationSkeleton,
-  Grid,
-  SkeletonText,
-  Table,
-  TableBody,
-  TableCell,
-  TableExpandedRow,
-  TableExpandHeader,
-  TableExpandRow,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@carbon/react';
-import React, { Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePreviousImports } from './previous-imports.resource';
-import styles from './previous-imports.component.scss';
-import { Import } from '../types';
-import ImportOverview from './import-overview/import-overview.component';
-
-const PreviousImports: React.FC = () => {
-  const { t } = useTranslation();
-  const [pageSize, setPageSize] = useState(10);
-
-  const { data: prevImports, isLoading, isError } = usePreviousImports();
-  const { results, currentPage, goTo } = usePagination(prevImports, pageSize);
-
-  if (isLoading) {
-    return (
-      <Grid className={styles.grid}>
-        <Column sm={4} md={8} lg={10}>
-          <SkeletonText className={styles.productiveHeading03} />
-          <DataTableSkeleton showHeader={false} showToolbar={false} rowCount={10} columnCount={3} />
-          <PaginationSkeleton />
-        </Column>
-      </Grid>
-    );
-  }
-
-  if (isError) {
-    showNotification({
-      kind: 'error',
-      description: t('previousImportsFetchError', 'Error occured while fetching the imports'),
-    });
-  }
-
-  const headerData = [
-    {
-      header: t('dateAndTime', 'Date and Time'),
-      key: 'localDateStarted',
-    },
-    {
-      header: t('duration', 'Duration'),
-      key: 'importTime',
-    },
-    {
-      header: t('status', 'Status'),
-      key: 'status',
-    },
-  ];
-
-  const rowData = results?.map((prevImport) => {
-    return {
-      id: prevImport.uuid,
-      localDateStarted: formatDatetime(new Date(prevImport.localDateStarted)),
-      importTime: prevImport.importTime,
-      status: prevImport.status,
-    };
-  });
-
-  return (
-    !isLoading &&
-    !isError && (
-      <Grid className={styles.grid}>
-        <Column sm={4} md={8} lg={10}>
-          <h3 className={styles.productiveHeading03}>{t('previousImports', 'Previous Imports')}</h3>
-
-          <DataTable rows={rowData} headers={headerData} size="sm">
-            {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
-              <Table {...getTableProps()} className={styles.tableBordered}>
-                <TableHead>
-                  <TableRow>
-                    <TableExpandHeader />
-                    {headers.map((header, i) => (
-                      <TableHeader key={i} {...getHeaderProps({ header })}>
-                        {header.header}
-                      </TableHeader>
-                    ))}
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {rows.map((row) => (
-                    <Fragment key={row.id}>
-                      <TableExpandRow {...getRowProps({ row })} className={styles.tableRow}>
-                        {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
-                        ))}
-                      </TableExpandRow>
-                      {row.isExpanded && (
-                        <TableExpandedRow colSpan={headers.length + 1} className={styles.tableExpandedRow}>
-                          <ImportOverview
-                            selectedImportObject={prevImports.find((importItem: Import) => importItem.uuid === row.id)}
-                          />
-                        </TableExpandedRow>
-                      )}
-                    </Fragment>
-                  ))}
-                </TableBody>
-              </Table>
-            )}
-          </DataTable>
-          <Pagination
-            className={styles.pagination}
-            size="sm"
-            page={currentPage}
-            pageSize={pageSize}
-            pageSizes={[10, 20, 50, 100]}
-            totalItems={prevImports.length}
-            onChange={({ page, pageSize }) => {
-              goTo(page);
-              setPageSize(pageSize);
-            }}
-          />
-        </Column>
-      </Grid>
-    )
-  );
-};
-
-export default PreviousImports;

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

@@ -1,17 +0,0 @@
-import { openmrsFetch } from '@openmrs/esm-framework';
-import useSWR from 'swr';
-import { Import } from '../types';
-
-export function usePreviousImports() {
-  const { data, error, isValidating } = useSWR<{ data: { results: Import[] } }, Error>(
-    '/ws/rest/v1/openconceptlab/import?v=full',
-    openmrsFetch,
-  );
-
-  return {
-    data: data?.data?.results,
-    isLoading: !data && !error,
-    isError: error,
-    isValidating,
-  };
-}

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

@@ -1,77 +0,0 @@
-import React from 'react';
-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;
-const mockUsePagination = usePagination as jest.Mock;
-
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    usePagination: jest.fn(),
-  };
-});
-
-describe(`Previous Imports component`, () => {
-  afterEach(() => {
-    mockUsePagination.mockReset();
-  });
-
-  it(`renders without dying`, () => {
-    mockUsePagination.mockReturnValue({
-      currentPage: 1,
-      goTo: () => {},
-      results: [],
-    });
-    renderPreviousImportsComponent();
-  });
-
-  it(`renders the table`, async () => {
-    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
-    mockUsePagination.mockReturnValue({
-      currentPage: 1,
-      goTo: () => {},
-      results: [],
-    });
-    renderPreviousImportsComponent();
-    await waitForLoadingToFinish();
-
-    expect(screen.getByText('Previous Imports')).toBeVisible();
-    expect(screen.getByText('Date and Time')).toBeVisible();
-    expect(screen.getByText('Duration')).toBeVisible();
-    expect(screen.getByText('Status')).toBeVisible();
-  });
-
-  it(`renders the previous imports correctly`, async () => {
-    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockPreviousImports } });
-    mockUsePagination.mockReturnValue({
-      currentPage: 1,
-      goTo: () => {},
-      results: mockPreviousImports,
-    });
-    renderPreviousImportsComponent();
-    await waitForLoadingToFinish();
-
-    mockPreviousImports.forEach((item: Import) => {
-      expect(screen.getByText(formatDatetime(item.localDateStarted))).toBeVisible();
-      expect(screen.getByText(item.importTime)).toBeVisible();
-      expect(screen.getByText(item.status)).toBeVisible();
-    });
-  });
-});
-
-function renderPreviousImportsComponent() {
-  renderWithSwr(<PreviousImports />);
-}
-
-function waitForLoadingToFinish() {
-  return waitFor(() => {
-    expect(screen.getByText('Previous Imports')).toBeVisible(), { timeout: 2000 };
-  });
-}