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

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

@@ -0,0 +1,82 @@
+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 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) {
+  renderWithSwr(<ImportOverview selectedImportObject={importObject} />);
+}
+
+function waitForLoadingToFinish() {
+  return waitFor(() => {
+    expect(screen.getByText('Started on')).toBeVisible(), { timeout: 2000 };
+  });
+}

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

@@ -0,0 +1,136 @@
+import React, { Fragment, useState } from 'react';
+import {
+  Column,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  PaginationSkeleton,
+  Grid,
+  SkeletonText,
+  Table,
+  TableBody,
+  TableCell,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDatetime, showNotification, usePagination } from '@openmrs/esm-framework';
+import { usePreviousImports } from './previous-imports.resource';
+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();
+  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 type { 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.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;
+}

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

@@ -0,0 +1,76 @@
+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 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) => {
+      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.tsx

@@ -1,22 +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}>
@@ -25,7 +26,9 @@ const Root: React.FC = () => {
             <TabPanel className={styles.tabPanel}>
               <Import />
             </TabPanel>
-            <TabPanel className={styles.tabPanel} />
+            <TabPanel className={styles.tabPanel}>
+              <PreviousImports />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </main>

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"
+    }
+  ]
+}

package/src/subscription/subscription.component.tsx

@@ -1,4 +1,5 @@
-import { showNotification } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSWRConfig } from 'swr';
 import {
   Button,
   ButtonSkeleton,
@@ -13,11 +14,11 @@ import {
   TextInput,
   TextInputSkeleton,
 } from '@carbon/react';
-import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { showNotification } from '@openmrs/esm-framework';
 import { deleteSubscription, updateSubscription, useSubscription } from './subscription.resource';
-import styles from './subscription.component.scss';
-import { useSWRConfig } from 'swr';
+import { isVersionDefinedInUrl } from '../utils';
+import styles from './subscription.scss';
 
 const Subscription: React.FC = () => {
   const { t } = useTranslation();
@@ -26,6 +27,7 @@ const Subscription: React.FC = () => {
   const [token, setToken] = useState('');
   const [isSubscribedToSnapshot, setIsSubscribedToSnapshot] = useState(false);
   const [validationType, setValidationType] = useState<'NONE' | 'FULL'>('FULL');
+  const [isSnapshotOptionDisabled, setIsSnapshotOptionDisabled] = useState(false);
 
   const { data: subscription, isLoading, isError } = useSubscription();
 
@@ -35,22 +37,29 @@ const Subscription: React.FC = () => {
       setToken(subscription?.token || '');
       setIsSubscribedToSnapshot(subscription?.subscribedToSnapshot || false);
       setValidationType(subscription?.validationType || 'FULL');
+      setIsSnapshotOptionDisabled(subscription ? isVersionDefinedInUrl(subscription.url) : false);
     }
   }, [isLoading, isError, subscription]);
 
   const handleChangeSubscriptionUrl = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setSubscriptionUrl(event.target.value);
+    if (isVersionDefinedInUrl(event.target.value)) {
+      setIsSnapshotOptionDisabled(true);
+      setIsSubscribedToSnapshot(false);
+    } else {
+      setIsSnapshotOptionDisabled(false);
+    }
   }, []);
 
   const handleChangeToken = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setToken(event.target.value);
   }, []);
 
-  const handleChangeValidationType = useCallback((checked: boolean) => {
+  const handleChangeValidationType = useCallback((event, { checked, id }) => {
     setValidationType(checked ? 'NONE' : 'FULL');
   }, []);
 
-  const handleChangeSubscriptionType = useCallback((checked: boolean) => {
+  const handleChangeSubscriptionType = useCallback((event, { checked, id }) => {
     setIsSubscribedToSnapshot(checked);
   }, []);
 
@@ -59,6 +68,17 @@ const Subscription: React.FC = () => {
       evt.preventDefault();
       evt.stopPropagation();
 
+      if (isSnapshotOptionDisabled && isSubscribedToSnapshot) {
+        showNotification({
+          kind: 'error',
+          description: t(
+            'snapshotDisabledError',
+            "You cannot subscribe to a SNAPSHOT if you've provided the collection version",
+          ),
+        });
+        return;
+      }
+
       const abortController = new AbortController();
 
       const updatedSubscription = {
@@ -76,11 +96,14 @@ const Subscription: React.FC = () => {
       if (response.ok) {
         showNotification({
           kind: 'success',
-          description: t(response.status === 201 ? 'subscriptionCreated' : 'subscriptionUpdated'),
+          description: t(
+            response.status === 201 ? 'subscriptionCreated' : 'subscriptionUpdated',
+            response.status === 201 ? 'Subscription created successfully' : 'Subscription updated successfully',
+          ),
         });
       } else {
         showNotification({
-          title: t('errorSavingSubscription'),
+          title: t('errorSavingSubscription', 'Error occured while saving the subscription'),
           kind: 'error',
           critical: true,
           description: JSON.stringify(response.data),
@@ -89,7 +112,7 @@ const Subscription: React.FC = () => {
 
       return () => abortController.abort();
     },
-    [subscriptionUrl, token, validationType, isSubscribedToSnapshot, t, subscription, mutate],
+    [subscriptionUrl, token, validationType, isSubscribedToSnapshot, isSnapshotOptionDisabled, subscription, t, mutate],
   );
 
   const handleCancel = useCallback(() => {
@@ -97,10 +120,11 @@ const Subscription: React.FC = () => {
     setToken(subscription?.token || '');
     setIsSubscribedToSnapshot(subscription?.subscribedToSnapshot || false);
     setValidationType(subscription?.validationType || 'FULL');
+    setIsSnapshotOptionDisabled(subscription ? isVersionDefinedInUrl(subscription.url) : false);
 
     showNotification({
       kind: 'info',
-      description: t('cancelledChanges'),
+      description: t('cancelledChanges', 'Cancelled changes successfully'),
     });
   }, [subscription, t]);
 
@@ -118,13 +142,14 @@ const Subscription: React.FC = () => {
         setToken('');
         setIsSubscribedToSnapshot(false);
         setValidationType('FULL');
+        setIsSnapshotOptionDisabled(false);
         showNotification({
           kind: 'success',
-          description: t('subscriptionDeleted'),
+          description: t('subscriptionDeleted', 'Successfully unsubscribed'),
         });
       } else {
         showNotification({
-          title: t('errorDeletingSubscription'),
+          title: t('errorDeletingSubscription', 'Error occured while deleting the subscription'),
           kind: 'error',
           critical: true,
           description: JSON.stringify(response.data),
@@ -166,7 +191,7 @@ const Subscription: React.FC = () => {
   if (isError) {
     showNotification({
       kind: 'error',
-      description: t('subscriptionError'),
+      description: t('subscriptionError', 'Error occured while fetching the subscription'),
     });
   }
 
@@ -174,12 +199,12 @@ const Subscription: React.FC = () => {
     <Grid className={styles.grid}>
       <Column sm={4} md={8} lg={10}>
         <Form onSubmit={handleSubmit}>
-          <h3 className={styles.productiveHeading03}>{t('setupSubscription')}</h3>
+          <h3 className={styles.productiveHeading03}>{t('setupSubscription', 'Setup Subscription')}</h3>
           <Stack gap={5}>
             <TextInput
               id="subscriptionUrl"
               type="url"
-              labelText={t('subscriptionUrl')}
+              labelText={t('subscriptionUrl', 'Subscription URL')}
               placeholder="https://api.openconceptlab.org/orgs/organization-name/collections/dictionary-name"
               value={subscriptionUrl}
               onChange={handleChangeSubscriptionUrl}
@@ -190,39 +215,48 @@ const Subscription: React.FC = () => {
               id="apiToken"
               type="password"
               placeholder="••••••••••••••••••••••••••••••••••••••••••••••••"
-              labelText={t('apiToken')}
+              labelText={t('apiToken', 'Token')}
               value={token}
               onChange={handleChangeToken}
               light={true}
               required
             />
-            <FormGroup legendText={t('advancedOptions')} className={styles.formGroup}>
+            <FormGroup legendText={t('advancedOptions', 'Advanced Options')} className={styles.formGroup}>
               <Checkbox
                 checked={isSubscribedToSnapshot}
                 onChange={handleChangeSubscriptionType}
-                labelText={t('subscribeToSnapshotText')}
+                labelText={t('subscribeToSnapshotText', 'Subscribe to SNAPSHOT versions (not recommended)')}
                 id="isSubscribedToSnapshot"
+                disabled={isSnapshotOptionDisabled}
               />
               <Checkbox
                 checked={validationType === 'NONE'}
                 onChange={handleChangeValidationType}
-                labelText={t('disableValidationText')}
+                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')}
+            {t('cancelButton', 'Cancel changes')}
           </Button>
           <Button kind="primary" type="submit">
-            {t('subscribeButton')}
+            {t('subscribeButton', 'Save changes')}
           </Button>
         </Form>
         <Form onSubmit={handleUnsubscribe} className={styles.unsubscribeForm}>
-          <h3 className={styles.productiveHeading03}>{t('unsubscribe')}</h3>
-          <p className={styles.unsubscribeText}>{t('unsubscribeInfo')}</p>
+          <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')}
+            {t('unsubscribeButton', 'Unsubscribe')}
           </Button>
         </Form>
       </Column>

package/src/subscription/subscription.resource.ts

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