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

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

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

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

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

package/src/root.component.scss

@@ -0,0 +1,23 @@
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.main {
+  background-color: $ui-02;
+}
+
+.moduleHeader {
+  @include type.type-style('productive-heading-03');
+  padding-left: spacing.$spacing-05;
+  padding-top: spacing.$spacing-05;
+  padding-bottom: spacing.$spacing-05;
+}
+
+.tabList {
+  padding: 0 spacing.$spacing-05;
+}
+
+.tabPanel {
+  height: 100%;
+  background-color: $ui-01;
+}

package/src/root.component.tsx

@@ -0,0 +1,39 @@
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import React from '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';
+
+const Root: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <SWRConfig>
+      <main className={`omrs-main-content ${styles.main}`}>
+        <h3 className={styles.moduleHeader}>{t('moduleTitle', 'OCL Subscription Module')}</h3>
+        <Tabs>
+          <TabList 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}>
+              <Subscription />
+            </TabPanel>
+            <TabPanel className={styles.tabPanel}>
+              <Import />
+            </TabPanel>
+            <TabPanel className={styles.tabPanel}>
+              <PreviousImports />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </main>
+    </SWRConfig>
+  );
+};
+
+export default Root;

package/src/root.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, cleanup, screen } from '@testing-library/react';
+import Root from './root.component';
+
+describe(`Root component`, () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    renderOclSubscriptionModule();
+  });
+
+  it(`renders the title and tab containers`, () => {
+    renderOclSubscriptionModule();
+    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();
+  });
+});
+
+function renderOclSubscriptionModule() {
+  render(<Root />);
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/subscription/subscription.component.scss

@@ -0,0 +1,27 @@
+@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;
+}
+
+.formGroup {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.unsubscribeText {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.unsubscribeForm {
+  margin-top: spacing.$spacing-05;
+}

package/src/subscription/subscription.component.tsx

@@ -0,0 +1,244 @@
+import { showNotification } from '@openmrs/esm-framework';
+import {
+  Button,
+  ButtonSkeleton,
+  Checkbox,
+  CheckboxSkeleton,
+  Column,
+  Form,
+  FormGroup,
+  Grid,
+  Stack,
+  SkeletonText,
+  TextInput,
+  TextInputSkeleton,
+} from '@carbon/react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { deleteSubscription, updateSubscription, useSubscription } from './subscription.resource';
+import styles from './subscription.component.scss';
+import { useSWRConfig } from 'swr';
+
+const Subscription: React.FC = () => {
+  const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
+  const [subscriptionUrl, setSubscriptionUrl] = useState('');
+  const [token, setToken] = useState('');
+  const [isSubscribedToSnapshot, setIsSubscribedToSnapshot] = useState(false);
+  const [validationType, setValidationType] = useState<'NONE' | 'FULL'>('FULL');
+
+  const { data: subscription, isLoading, isError } = useSubscription();
+
+  useEffect(() => {
+    if (!isLoading && !isError) {
+      setSubscriptionUrl(subscription?.url || '');
+      setToken(subscription?.token || '');
+      setIsSubscribedToSnapshot(subscription?.subscribedToSnapshot || false);
+      setValidationType(subscription?.validationType || 'FULL');
+    }
+  }, [isLoading, isError, subscription]);
+
+  const handleChangeSubscriptionUrl = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setSubscriptionUrl(event.target.value);
+  }, []);
+
+  const handleChangeToken = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setToken(event.target.value);
+  }, []);
+
+  const handleChangeValidationType = useCallback((checked: boolean) => {
+    setValidationType(checked ? 'NONE' : 'FULL');
+  }, []);
+
+  const handleChangeSubscriptionType = useCallback((checked: boolean) => {
+    setIsSubscribedToSnapshot(checked);
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (evt: React.FormEvent<HTMLFormElement>) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+
+      const abortController = new AbortController();
+
+      const updatedSubscription = {
+        ...subscription,
+        url: subscriptionUrl,
+        token: token,
+        validationType: validationType,
+        subscribedToSnapshot: isSubscribedToSnapshot,
+      };
+      mutate('/ws/rest/v1/openconceptlab/subscription?v=full', updatedSubscription, false);
+
+      const response = await updateSubscription(updatedSubscription, abortController);
+      mutate('/ws/rest/v1/openconceptlab/subscription?v=full');
+
+      if (response.ok) {
+        showNotification({
+          kind: 'success',
+          description: t(
+            response.status === 201 ? 'subscriptionCreated' : 'subscriptionUpdated',
+            response.status === 201 ? 'Subscription created successfully' : 'Subscription updated successfully',
+          ),
+        });
+      } else {
+        showNotification({
+          title: t('errorSavingSubscription', 'Error occured while saving the subscription'),
+          kind: 'error',
+          critical: true,
+          description: JSON.stringify(response.data),
+        });
+      }
+
+      return () => abortController.abort();
+    },
+    [subscriptionUrl, token, validationType, isSubscribedToSnapshot, t, subscription, mutate],
+  );
+
+  const handleCancel = useCallback(() => {
+    setSubscriptionUrl(subscription?.url || '');
+    setToken(subscription?.token || '');
+    setIsSubscribedToSnapshot(subscription?.subscribedToSnapshot || false);
+    setValidationType(subscription?.validationType || 'FULL');
+
+    showNotification({
+      kind: 'info',
+      description: t('cancelledChanges', 'Cancelled changes successfully'),
+    });
+  }, [subscription, t]);
+
+  const handleUnsubscribe = useCallback(
+    async (evt: React.FormEvent<HTMLFormElement>) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      const abortController = new AbortController();
+
+      const response = await deleteSubscription(subscription, abortController);
+      mutate('/ws/rest/v1/openconceptlab/subscription?v=full');
+
+      if (response.status === 204) {
+        setSubscriptionUrl('');
+        setToken('');
+        setIsSubscribedToSnapshot(false);
+        setValidationType('FULL');
+        showNotification({
+          kind: 'success',
+          description: t('subscriptionDeleted', 'Successfully unsubscribed'),
+        });
+      } else {
+        showNotification({
+          title: t('errorDeletingSubscription', 'Error occured while deleting the subscription'),
+          kind: 'error',
+          critical: true,
+          description: JSON.stringify(response.data),
+        });
+      }
+
+      return () => abortController.abort();
+    },
+    [subscription, t, mutate],
+  );
+
+  if (isLoading) {
+    return (
+      <Grid className={styles.grid}>
+        <Column sm={4} md={8} lg={10}>
+          <Form>
+            <SkeletonText className={styles.productiveHeading03} />
+            <Stack gap={5}>
+              <TextInputSkeleton />
+              <TextInputSkeleton />
+              <FormGroup legendText={<SkeletonText width="75px" />} className={styles.formGroup}>
+                <CheckboxSkeleton />
+                <CheckboxSkeleton />
+              </FormGroup>
+            </Stack>
+            <ButtonSkeleton />
+            <ButtonSkeleton />
+          </Form>
+          <Form className={styles.unsubscribeForm}>
+            <SkeletonText className={styles.productiveHeading03} />
+            <SkeletonText className={styles.unsubscribeText} />
+            <ButtonSkeleton />
+          </Form>
+        </Column>
+      </Grid>
+    );
+  }
+
+  if (isError) {
+    showNotification({
+      kind: 'error',
+      description: t('subscriptionError', 'Error occured while fetching the subscription'),
+    });
+  }
+
+  return (
+    <Grid className={styles.grid}>
+      <Column sm={4} md={8} lg={10}>
+        <Form onSubmit={handleSubmit}>
+          <h3 className={styles.productiveHeading03}>{t('setupSubscription', 'Setup Subscription')}</h3>
+          <Stack gap={5}>
+            <TextInput
+              id="subscriptionUrl"
+              type="url"
+              labelText={t('subscriptionUrl', 'Subscription URL')}
+              placeholder="https://api.openconceptlab.org/orgs/organization-name/collections/dictionary-name"
+              value={subscriptionUrl}
+              onChange={handleChangeSubscriptionUrl}
+              light={true}
+              required
+            />
+            <TextInput
+              id="apiToken"
+              type="password"
+              placeholder="••••••••••••••••••••••••••••••••••••••••••••••••"
+              labelText={t('apiToken', 'Token')}
+              value={token}
+              onChange={handleChangeToken}
+              light={true}
+              required
+            />
+            <FormGroup legendText={t('advancedOptions', 'Advanced Options')} className={styles.formGroup}>
+              <Checkbox
+                checked={isSubscribedToSnapshot}
+                onChange={handleChangeSubscriptionType}
+                labelText={t('subscribeToSnapshotText', 'Subscribe to SNAPSHOT versions (not recommended)')}
+                id="isSubscribedToSnapshot"
+              />
+              <Checkbox
+                checked={validationType === 'NONE'}
+                onChange={handleChangeValidationType}
+                labelText={t(
+                  'disableValidationText',
+                  'Disable validation (should be used with care for well curated collections or sources)',
+                )}
+                id="isValidationDisabled"
+              />
+            </FormGroup>
+          </Stack>
+          <Button kind="secondary" onClick={handleCancel}>
+            {t('cancelButton', 'Cancel changes')}
+          </Button>
+          <Button kind="primary" type="submit">
+            {t('subscribeButton', 'Save changes')}
+          </Button>
+        </Form>
+        <Form onSubmit={handleUnsubscribe} className={styles.unsubscribeForm}>
+          <h3 className={styles.productiveHeading03}>{t('unsubscribe', 'Unsubscribe')}</h3>
+          <p className={styles.unsubscribeText}>
+            {t(
+              'unsubscribeInfo',
+              'If you unsubscribe, no concepts will be deleted nor changed. All information about subscription will be deleted from your system.',
+            )}
+          </p>
+          <Button kind="danger" type="submit" disabled={!subscription}>
+            {t('unsubscribeButton', 'Unsubscribe')}
+          </Button>
+        </Form>
+      </Column>
+    </Grid>
+  );
+};
+
+export default Subscription;

package/src/subscription/subscription.resource.ts

@@ -0,0 +1,40 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { Subscription } from '../types';
+import isNil from 'lodash-es/isNil';
+
+export function useSubscription() {
+  const { data, error, isValidating } = useSWR<{ data: { results: Subscription[] } }, Error>(
+    '/ws/rest/v1/openconceptlab/subscription?v=full',
+    openmrsFetch,
+  );
+
+  return {
+    data: data?.data?.results[0],
+    isLoading: !data && !error,
+    isError: error,
+    isValidating,
+  };
+}
+
+export async function updateSubscription(subscription: Subscription, abortController?: AbortController) {
+  const url = isNil(subscription.uuid)
+    ? '/ws/rest/v1/openconceptlab/subscription'
+    : `/ws/rest/v1/openconceptlab/subscription/${subscription.uuid}`;
+  return openmrsFetch<Subscription>(url, {
+    method: 'POST',
+    body: subscription,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+  });
+}
+
+export async function deleteSubscription(subscription: Subscription, abortController?: AbortController) {
+  const url = `/ws/rest/v1/openconceptlab/subscription/${subscription.uuid}`;
+  return openmrsFetch<Subscription>(url, {
+    method: 'DELETE',
+    signal: abortController?.signal,
+  });
+}