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

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.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.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.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.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>(