@openmrs/esm-patient-programs-app 3.2.1-pre.97 → 4.0.1-pre.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-programs-app",
-  "version": "3.2.1-pre.97",
+  "version": "4.0.1-pre.221",
   "license": "MPL-2.0",
   "description": "Patient programs microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-programs-app.js",
@@ -12,7 +12,7 @@
     "debug": "npm run serve",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env analyze=true",
-    "lint": "eslint src --ext tsx,ts",
+    "lint": "eslint src --ext tsx,ts --fix --max-warnings=0",
     "typescript": "tsc",
     "extract-translations": "i18next 'src/**/*.component.tsx' --config ../../tools/i18next-parser.config.js"
   },
@@ -34,23 +34,19 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
   "dependencies": {
-    "@carbon/charts-react": "^0.49.4",
-    "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-patient-common-lib": "^3.2.1-pre.97",
-    "carbon-components-react": "^7.25.0",
+    "@carbon/react": "^1.8.0",
+    "@openmrs/esm-patient-common-lib": "^4.0.1-pre.221",
     "d3": "^7.0.3",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "3.x",
     "@openmrs/esm-patient-common-lib": "3.x",
-    "carbon-components": "10.x",
-    "carbon-icons": "7.x",
     "dayjs": "1.x",
-    "react": "16.x",
+    "react": "^18.2.0",
     "react-i18next": "11.x",
-    "react-router-dom": "5.x",
+    "react-router-dom": "6.x",
     "rxjs": "6.x"
   },
-  "gitHead": "d0a4c9a83cc55d8f19fb5febb204b80d69e40f7a"
+  "gitHead": "4823a7e6eec21a1a4491a545f1e54ea34b64c2c9"
 }

package/src/config-schema.ts

@@ -0,0 +1,12 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  customUrl: {
+    _type: Type.String,
+    _default: '',
+  },
+};
+
+export interface ConfigObject {
+  customUrl: string;
+}

package/src/dashboard.meta.tsx

@@ -1,5 +1,5 @@
 export const dashboardMeta = {
   slot: 'patient-chart-programs-dashboard-slot',
-  config: { columns: 1 },
+  columns: 1,
   title: 'Programs',
 };

package/src/index.ts

@@ -1,5 +1,6 @@
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { configSchema } from './config-schema';
 import { dashboardMeta } from './dashboard.meta';
 
 const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
@@ -16,7 +17,7 @@ function setupOpenMRS() {
     moduleName,
   };
 
-  defineConfigSchema(moduleName, {});
+  defineConfigSchema(moduleName, configSchema);
 
   return {
     extensions: [
@@ -48,7 +49,7 @@ function setupOpenMRS() {
         name: 'programs-form-workspace',
         load: getAsyncLifecycle(() => import('./programs/programs-form.component'), options),
         meta: {
-          title: 'Record Program enrollment',
+          title: 'Record program enrollment',
         },
       },
     ],

package/src/programs/program-action-button/program-action-button.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { TaskAdd } from '@carbon/react/icons';
+import { formEntrySub, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { ConfigurableProgram } from '../../types';
+
+interface ProgramActionButton {
+  enrollment: ConfigurableProgram;
+}
+
+const ProgramActionButton: React.FC<ProgramActionButton> = ({ enrollment }) => {
+  const { t } = useTranslation();
+  const formUuid =
+    enrollment.enrollmentStatus === 'eligible' ? enrollment.enrollmentFormUuid : enrollment.discontinuationFormUuid;
+  const launchEnrollmentForm = (enrollmentStatus: string) => {
+    formEntrySub.next({ formUuid, encounterUuid: '' });
+    launchPatientWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: `${enrollment?.display} ${enrollmentStatus} Form`,
+    });
+  };
+
+  if (enrollment.enrollmentStatus === 'eligible') {
+    return (
+      <Button
+        onClick={() => launchEnrollmentForm(t('enrollment', 'Enrollment'))}
+        renderIcon={(props) => <TaskAdd size={20} {...props} />}
+        kind="tertiary"
+        size="small"
+      >
+        {t('enroll', 'Enroll')}
+      </Button>
+    );
+  }
+  return (
+    <Button
+      onClick={() => launchEnrollmentForm(t('discontinue', 'Discontinue'))}
+      renderIcon={(props) => <TaskAdd size={20} {...props} />}
+      kind="danger--ghost"
+      size="small"
+    >
+      {t('discontinue', 'Discontinue')}
+    </Button>
+  );
+};
+
+export default ProgramActionButton;

package/src/programs/programs-detailed-summary.component.tsx

@@ -1,29 +1,29 @@
 import React from 'react';
-import Add16 from '@carbon/icons-react/es/add/16';
-import filter from 'lodash-es/filter';
-import includes from 'lodash-es/includes';
-import map from 'lodash-es/map';
-import styles from './programs-detailed-summary.scss';
-import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { useAvailablePrograms, useEnrollments } from './programs.resource';
+import capitalize from 'lodash-es/capitalize';
 import {
   Button,
   DataTable,
+  DataTableHeader,
+  DataTableRow,
   DataTableSkeleton,
   InlineLoading,
+  InlineNotification,
   Table,
+  TableBody,
   TableCell,
   TableContainer,
-  TableBody,
   TableHead,
   TableHeader,
   TableRow,
-  DataTableHeader,
-  DataTableRow,
-  InlineNotification,
-} from 'carbon-components-react';
-import { formatDate, formatDatetime } from '@openmrs/esm-framework';
+} from '@carbon/react';
+import { Add, Edit } from '@carbon/react/icons';
+import { formatDate, formatDatetime, useConfig, usePagination, ConfigObject } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { useAvailablePrograms, useEnrollments, usePrograms } from './programs.resource';
+import { ConfigurableProgram } from '../types';
+import ProgramActionButton from './program-action-button/program-action-button.component';
+import styles from './programs-detailed-summary.scss';
 
 interface ProgramsDetailedSummaryProps {
   patientUuid: string;
@@ -33,13 +33,18 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
   const { t } = useTranslation();
   const displayText = t('programEnrollments', 'Program enrollments');
   const headerTitle = t('carePrograms', 'Care Programs');
+  const config = useConfig() as ConfigObject;
+  const programsCount = 5;
+  const isConfigurable = config.customUrl ? true : false;
 
-  const { data: enrollments, isError, isLoading, isValidating } = useEnrollments(patientUuid);
-  const { data: availablePrograms } = useAvailablePrograms();
-  const eligiblePrograms = filter(
-    availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
-  );
+  const { enrollments, isLoading, isError, isValidating, availablePrograms, eligiblePrograms, configurablePrograms } =
+    usePrograms(patientUuid);
+
+  const {
+    results: paginatedEnrollments,
+    goTo,
+    currentPage,
+  } = usePagination(isConfigurable ? configurablePrograms : enrollments ?? [], programsCount);
 
   const tableHeaders: Array<DataTableHeader> = React.useMemo(
     () => [
@@ -59,11 +64,15 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
         key: 'status',
         header: t('status', 'Status'),
       },
+      {
+        key: 'actions',
+        header: t('actions', 'Actions'),
+      },
     ],
     [t],
   );
 
-  const tableRows: Array<DataTableRow> = React.useMemo(() => {
+  const tableRows = React.useMemo(() => {
     return enrollments?.map((program) => {
       return {
         id: program.uuid,
@@ -73,6 +82,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
         status: program.dateCompleted
           ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(program.dateCompleted))}`
           : t('active', 'Active'),
+        actions: <ProgramEditButton programEnrollmentId={program.uuid} />,
       };
     });
   }, [enrollments, t]);
@@ -88,7 +98,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button
             kind="ghost"
-            renderIcon={Add16}
+            renderIcon={(props) => <Add size={16} {...props} />}
             iconDescription="Add programs"
             onClick={launchProgramsForm}
             disabled={availablePrograms?.length && eligiblePrograms?.length === 0}
@@ -96,19 +106,19 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
             {t('add', 'Add')}
           </Button>
         </CardHeader>
-        <TableContainer>
-          {availablePrograms?.length && eligiblePrograms?.length === 0 && (
-            <InlineNotification
-              style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
-              kind={'info'}
-              lowContrast
-              subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
-              title={t('fullyEnrolled', 'Enrolled in all programs')}
-            />
-          )}
-          <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="short">
-            {({ rows, headers, getHeaderProps, getTableProps }) => (
-              <Table {...getTableProps()} useZebraStyles>
+        {availablePrograms?.length && eligiblePrograms?.length === 0 ? (
+          <InlineNotification
+            style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
+            kind={'info'}
+            lowContrast
+            subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
+            title={t('fullyEnrolled', 'Enrolled in all programs')}
+          />
+        ) : null}
+        <DataTable rows={tableRows} headers={tableHeaders} isSortable size="xs" useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
@@ -134,13 +144,34 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
                   ))}
                 </TableBody>
               </Table>
-            )}
-          </DataTable>
-        </TableContainer>
+            </TableContainer>
+          )}
+        </DataTable>
       </div>
     );
   }
   return <EmptyState displayText={displayText} headerTitle={headerTitle} launchForm={launchProgramsForm} />;
 };
 
+interface ProgramEditButtonProps {
+  programEnrollmentId: string;
+}
+
+function ProgramEditButton({ programEnrollmentId }: ProgramEditButtonProps) {
+  const launchEditProgramsForm = React.useCallback(
+    () => launchPatientWorkspace('programs-form-workspace', { programEnrollmentId }),
+    [programEnrollmentId],
+  );
+
+  return (
+    <Button
+      kind="ghost"
+      renderIcon={(props) => <Edit size={16} {...props} />}
+      iconDescription="Edit Program"
+      onClick={launchEditProgramsForm}
+      hasIconOnly
+    />
+  );
+}
+
 export default ProgramsDetailedSummary;

package/src/programs/programs-detailed-summary.scss

@@ -1,7 +1,4 @@
-
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;

package/src/programs/programs-detailed-summary.test.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { openmrsFetch, usePagination } from '@openmrs/esm-framework';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { mockPatient } from '../../../../__mocks__/patient.mock';
 import { mockEnrolledProgramsResponse } from '../../../../__mocks__/programs.mock';
 import { renderWithSwr, waitForLoadingToFinish } from '../../../../tools/test-helpers';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import ProgramsDetailedSummary from './programs-detailed-summary.component';
 
+jest.setTimeout(20000);
+
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockUsePagination = usePagination as jest.Mock;
 
@@ -70,6 +73,8 @@ describe('ProgramsDetailedSummary ', () => {
   });
 
   it("renders a detailed tabular summary of the patient's program enrollments", async () => {
+    const user = userEvent.setup();
+
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
     mockUsePagination.mockImplementation(() => ({
       currentPage: 1,
@@ -89,16 +94,30 @@ describe('ProgramsDetailedSummary ', () => {
 
     const addButton = screen.getByRole('button', { name: /Add/ });
     expect(addButton).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /hiv care and treatment/i })).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /16-Jan-2020/i })).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /active$/i })).toBeInTheDocument();
+    const row = screen.getByRole('row', { name: /hiv care and treatment/i });
+    expect(row).toBeInTheDocument();
+    expect(within(row).getByRole('cell', { name: /16-Jan-2020/i })).toBeInTheDocument();
+    expect(within(row).getByRole('cell', { name: /active$/i })).toBeInTheDocument();
+    const editButton = within(row).getByRole('button', { name: /Edit Program$/i });
+    expect(editButton).toBeInTheDocument();
 
     // Clicking "Add" launches the programs form in a workspace
-    userEvent.click(addButton);
+    await waitFor(() => user.click(addButton));
+
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace');
+
+    // Clicking the edit button launches the edit form in a workspace
+    await waitFor(() => user.click(editButton));
+
+    expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', {
+      programEnrollmentId: mockEnrolledProgramsResponse[0].uuid,
+    });
   });
 });
 
 function renderProgramsOverview() {
-  renderWithSwr(<ProgramsDetailedSummary />);
+  const testProps = {
+    patientUuid: mockPatient.id,
+  };
+  renderWithSwr(<ProgramsDetailedSummary {...testProps} />);
 }

package/src/programs/programs-form.component.tsx

@@ -1,10 +1,10 @@
 import React, { SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import filter from 'lodash-es/filter';
 import includes from 'lodash-es/includes';
 import map from 'lodash-es/map';
 import { useSWRConfig } from 'swr';
-import { useTranslation } from 'react-i18next';
 import {
   createErrorHandler,
   showNotification,
@@ -12,27 +12,34 @@ import {
   useSession,
   useLocations,
   useLayoutType,
+  parseDate,
 } from '@openmrs/esm-framework';
 import {
   Button,
+  ButtonSet,
   DatePicker,
   DatePickerInput,
-  Select,
-  SelectItem,
   Form,
   FormGroup,
-  ButtonSet,
-} from 'carbon-components-react';
+  Select,
+  SelectItem,
+  Stack,
+} from '@carbon/react';
 import {
   createProgramEnrollment,
   useAvailablePrograms,
   useEnrollments,
   customRepresentation,
+  updateProgramEnrollment,
 } from './programs.resource';
 import { DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import styles from './programs-form.scss';
 
-const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
+interface ProgramsFormProps extends DefaultWorkspaceProps {
+  programEnrollmentId?: string;
+}
+
+const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid, programEnrollmentId }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
@@ -41,16 +48,25 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
 
   const { data: availablePrograms } = useAvailablePrograms();
   const { data: enrollments } = useEnrollments(patientUuid);
+  const currentEnrollment = programEnrollmentId && enrollments.filter((e) => e.uuid == programEnrollmentId)[0];
+  const currentProgram = currentEnrollment
+    ? {
+        display: currentEnrollment.program.name,
+        ...currentEnrollment.program,
+      }
+    : null;
 
-  const eligiblePrograms = filter(
-    availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
+  const eligiblePrograms = currentProgram
+    ? [currentProgram]
+    : filter(availablePrograms, (program) => !includes(map(enrollments, 'program.uuid'), program.uuid));
+  const [completionDate, setCompletionDate] = React.useState<Date>(
+    currentEnrollment?.dateCompleted ? parseDate(currentEnrollment.dateCompleted) : null,
   );
-
-  const [completionDate, setCompletionDate] = React.useState(null);
-  const [enrollmentDate, setEnrollmentDate] = React.useState(new Date());
-  const [selectedProgram, setSelectedProgram] = React.useState<string>('');
-  const [userLocation, setUserLocation] = React.useState('');
+  const [enrollmentDate, setEnrollmentDate] = React.useState<Date>(
+    currentEnrollment?.dateEnrolled ? parseDate(currentEnrollment.dateEnrolled) : new Date(),
+  );
+  const [selectedProgram, setSelectedProgram] = React.useState<string>(currentEnrollment?.program.uuid ?? '');
+  const [userLocation, setUserLocation] = React.useState<string>(currentEnrollment?.location.uuid ?? '');
 
   if (!userLocation && session?.sessionLocation?.uuid) {
     setUserLocation(session?.sessionLocation?.uuid);
@@ -71,43 +87,83 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
       };
 
       const abortController = new AbortController();
-      const sub = createProgramEnrollment(payload, abortController).subscribe(
-        (response) => {
-          if (response.status === 201) {
-            closeWorkspace();
-
-            showToast({
-              critical: true,
-              kind: 'success',
-              description: t('enrollmentNowVisible', 'It is now visible on the Programs page'),
-              title: t('enrollmentSaved', 'Program enrollment saved'),
-            });
-
-            mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
-          }
-        },
-        (err) => {
-          createErrorHandler();
-
-          showNotification({
-            title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
-            kind: 'error',
-            critical: true,
-            description: err?.message,
-          });
-        },
-      );
+      const sub = currentEnrollment
+        ? updateProgramEnrollment(currentEnrollment.uuid, payload, abortController).subscribe(
+            (response) => {
+              if (response.status === 200) {
+                closeWorkspace();
+
+                showToast({
+                  critical: true,
+                  kind: 'success',
+                  description: t(
+                    'enrollmentUpdatesNowVisible',
+                    'Changes to the program are now visible in the Programs table',
+                  ),
+                  title: t('enrollmentUpdated', 'Program enrollment updated'),
+                });
+
+                mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+              }
+            },
+            (err) => {
+              createErrorHandler();
+
+              showNotification({
+                title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+                kind: 'error',
+                critical: true,
+                description: err?.message,
+              });
+            },
+          )
+        : createProgramEnrollment(payload, abortController).subscribe(
+            (response) => {
+              if (response.status === 201) {
+                closeWorkspace();
+
+                showToast({
+                  critical: true,
+                  kind: 'success',
+                  description: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
+                  title: t('enrollmentSaved', 'Program enrollment saved'),
+                });
+
+                mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+              }
+            },
+            (err) => {
+              createErrorHandler();
+
+              showNotification({
+                title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+                kind: 'error',
+                critical: true,
+                description: err?.message,
+              });
+            },
+          );
       return () => {
         sub.unsubscribe();
       };
     },
-    [closeWorkspace, completionDate, enrollmentDate, mutate, patientUuid, selectedProgram, t, userLocation],
+    [
+      closeWorkspace,
+      completionDate,
+      enrollmentDate,
+      mutate,
+      patientUuid,
+      selectedProgram,
+      t,
+      userLocation,
+      currentEnrollment,
+    ],
   );
 
   return (
     <Form className={styles.form} onSubmit={handleSubmit}>
-      <div className={styles.formContainer}>
-        <FormGroup style={{ width: '50%' }} legendText={t('program', 'Program')}>
+      <Stack className={styles.formContainer} gap={7}>
+        <FormGroup style={{ maxWidth: '50%' }} legendText={t('programName', 'Program name')}>
           <div className={styles.selectContainer}>
             <Select
               id="program"
@@ -126,7 +182,7 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
             </Select>
           </div>
         </FormGroup>
-        <FormGroup legendText={t('dateEnrolled', 'Date enrolled')}>
+        <FormGroup style={{ maxWidth: '50%' }} legendText={t('dateEnrolled', 'Date enrolled')}>
           <DatePicker
             id="enrollmentDate"
             datePickerType="single"
@@ -140,7 +196,7 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
             <DatePickerInput id="enrollmentDateInput" labelText="" />
           </DatePicker>
         </FormGroup>
-        <FormGroup legendText={t('dateCompleted', 'Date completed')}>
+        <FormGroup style={{ width: '50%' }} legendText={t('dateCompleted', 'Date completed')}>
           <DatePicker
             id="completionDate"
             datePickerType="single"
@@ -173,7 +229,7 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
               ))}
           </Select>
         </FormGroup>
-      </div>
+      </Stack>
       <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
         <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('cancel', 'Cancel')}

package/src/programs/programs-form.scss

@@ -1,11 +1,4 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
-
-.selectContainer {
-  display: flex;
-  align-items: center;
-}
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .loading {
   margin-left: 1rem;
@@ -13,7 +6,6 @@
   min-height: 2.5rem;
 }
 
-
 .button {
   height: 4rem;
   display: flex;