@kenyaemr/esm-admin-app 5.3.7

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"}],"pages":[{"component":"root","route":"admin","online":true,"offline":true}],"version":"5.3.7"}

package/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@kenyaemr/esm-admin-app",
+  "version": "5.3.7",
+  "description": "Facilitates the management of ETL tables",
+  "browser": "dist/kenyaemr-esm-admin-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/palladiumkenya/kenyaemr-esm-3.x#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladiumkenya/kenyaemr-esm-3.x#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-3.x/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.72.0",
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  }
+}

package/src/components/confirm-modal/confirmation-operation-modal.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+
+interface OperationConfirmationModalProps {
+  close: () => void;
+  confirm: () => void;
+  operationName: string;
+  operationType: string;
+}
+
+const OperationConfirmation: React.FC<OperationConfirmationModalProps> = ({
+  close,
+  confirm,
+  operationName,
+  operationType,
+}) => {
+  const { t } = useTranslation();
+  const message = t('operationsConfirmationMessages', 'Do you want to {{operationTypeOrName}}?', {
+    operationTypeOrName: operationType || operationName,
+  });
+
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('confirmation', 'Confirmation')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>{message}</p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('noRespond', 'No')}
+        </Button>
+        <Button kind="primary" onClick={confirm}>
+          {t('yesRespond', 'Yes')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default OperationConfirmation;

package/src/components/confirm-modal/confirmation-operation.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useTranslation } from 'react-i18next';
+import OperationConfirmation from './confirmation-operation-modal.component';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn(),
+}));
+
+describe('OperationConfirmation', () => {
+  beforeEach(() => {
+    (useTranslation as jest.Mock).mockReturnValue({
+      t: (key, defaultValue, options) =>
+        options?.operationTypeOrName ? `Do you want to ${options.operationTypeOrName}?` : defaultValue || key,
+    });
+  });
+
+  it('renders the component with provided props', () => {
+    const closeMock = jest.fn();
+    const confirmMock = jest.fn();
+    const operationName = 'refresh';
+    const operationType = 'refreshed';
+
+    render(
+      <OperationConfirmation
+        close={closeMock}
+        confirm={confirmMock}
+        operationName={operationName}
+        operationType={operationType}
+      />,
+    );
+
+    expect(screen.getByRole('heading', { name: 'Confirmation' })).toBeInTheDocument();
+    expect(screen.getByText('Do you want to refreshed?')).toBeInTheDocument();
+    expect(screen.getByText('No')).toBeInTheDocument();
+    expect(screen.getByText('Yes')).toBeInTheDocument();
+  });
+
+  it('calls close when the No button is clicked', () => {
+    const closeMock = jest.fn();
+    const confirmMock = jest.fn();
+
+    render(
+      <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,
+    );
+
+    const noButton = screen.getByText('No');
+    fireEvent.click(noButton);
+
+    expect(closeMock).toHaveBeenCalledTimes(1);
+    expect(confirmMock).not.toHaveBeenCalled();
+  });
+
+  it('calls confirm when the Yes button is clicked', () => {
+    const closeMock = jest.fn();
+    const confirmMock = jest.fn();
+
+    render(
+      <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,
+    );
+
+    const yesButton = screen.getByText('Yes');
+    fireEvent.click(yesButton);
+
+    expect(confirmMock).toHaveBeenCalledTimes(1);
+    expect(closeMock).not.toHaveBeenCalled();
+  });
+});

package/src/components/dashboard/dashboard.component.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import Header from '../header/header.component';
+import { useTranslation } from 'react-i18next';
+import { Layer, ComboButton, MenuItem, InlineLoading } from '@carbon/react';
+import styles from './dashboard.scss';
+import { recreateTables, refreshTables, recreateDatatools, refreshDwapi } from '../logs-table/operation-log-resource';
+import LogTable from '../logs-table/operation-log-table.component';
+import { showModal, showSnackbar } from '@openmrs/esm-framework';
+
+const Dashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentOperation, setCurrentOperation] = useState<string>('');
+  const [logData, setLogData] = useState<Array<any>>([]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const openConfirmationModal = (
+    operation: () => Promise<any>,
+    operationName: string,
+    clearDataOnRecreate: boolean = false,
+  ) => {
+    const dispose = showModal('operation-confirmation-modal', {
+      confirm: async () => {
+        dispose();
+        setIsLoading(true);
+        setCurrentOperation(operationName);
+        if (clearDataOnRecreate) {
+          setLogData([]);
+        }
+
+        try {
+          setIsRefreshing(operationName === 'refreshTables');
+
+          const data = await operation();
+          const isRecreate = operationName.toLowerCase().includes('recreate');
+          const operationType = isRecreate ? t('recreated', 'recreated') : t('refreshed', 'refreshed');
+
+          showSnackbar({
+            title: t('operationSuccess', '{{operationName}} successfully {{operationType}}', {
+              operationName,
+              operationType,
+            }),
+            subtitle: t('operationSuccessSubtitle', 'The operation completed successfully.'),
+            kind: 'success',
+            isLowContrast: true,
+          });
+
+          if (operationName === 'refreshTables') {
+            setLogData((prevData) => [...prevData, ...data]);
+          } else {
+            setLogData(data);
+          }
+        } catch (error) {
+          showSnackbar({
+            title: t('operationError', '{{operationName}} failed', { operationName }),
+            subtitle: t('operationErrorSubtitle', 'An error occurred during the operation.'),
+            kind: 'error',
+            isLowContrast: true,
+          });
+        } finally {
+          setIsLoading(false);
+          setIsRefreshing(false);
+          setCurrentOperation('');
+        }
+      },
+      close: () => {
+        dispose();
+      },
+      operationName,
+      operationType: operationName,
+    });
+  };
+
+  return (
+    <div className="omrs-main-content">
+      <Header title={t('home', 'Home')} />
+      <Layer className={styles.btnLayer}>
+        {isLoading ? (
+          <InlineLoading
+            description={t('etlsOperationsLoading', 'Please wait {{currentOperation}} is in progress...', {
+              currentOperation,
+            })}
+            size="md"
+            className={styles.loading}
+            withOverlay
+          />
+        ) : (
+          <ComboButton tooltipAlignment="left" label={t('etlOperation', 'ETL operations')} size="md">
+            <MenuItem
+              label={t('refreshTables', 'Refresh tables')}
+              onClick={() => openConfirmationModal(refreshTables, t('refreshTables', 'Refresh tables'), false)}
+            />
+            <MenuItem
+              label={t('recreateTables', 'Recreate tables')}
+              onClick={() => openConfirmationModal(recreateTables, t('recreateTables', 'Recreate tables'), true)}
+            />
+            <MenuItem
+              label={t('recreateDatatools', 'Recreate datatools')}
+              onClick={() =>
+                openConfirmationModal(recreateDatatools, t('recreateDatatools', 'Recreate datatools'), true)
+              }
+            />
+            <MenuItem
+              label={t('refreshDwapi', 'Refresh DWAPI tables')}
+              onClick={() => openConfirmationModal(refreshDwapi, t('refreshDwapi', 'Refresh DWAPI tables'), false)}
+            />
+          </ComboButton>
+        )}
+      </Layer>
+      <Layer className={styles.tableLayer}>
+        <LogTable logData={logData} isLoading={isRefreshing} />
+      </Layer>
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/components/dashboard/dashboard.scss

@@ -0,0 +1,38 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.omrs-main-content {
+  background-color: white;
+}
+
+.btnLayer {
+  display: flex;
+  padding-top: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: white;
+  width: 100%;
+}
+
+.tableLayer {
+  padding-left: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  background: white;
+  padding-top: layout.$spacing-01;
+}
+
+.loading {
+  display: flex;
+  padding-top: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: white;
+  width: 100%;
+}

package/src/components/empty-state/empty-state-log.components.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './empty-state-log.scss';
+import { DataEnrichment } from '@carbon/react/icons';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+
+interface EmptyStateProps {
+  subTitle: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ subTitle }) => {
+  return (
+    <div className={styles.emptyStateContainer}>
+      <EmptyDataIllustration />
+      <p className={styles.subTitle}>{subTitle}</p>
+    </div>
+  );
+};
+
+export default EmptyState;

package/src/components/empty-state/empty-state-log.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.emptyStateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  background-color: colors.$gray-10;
+  row-gap: layout.$spacing-02;
+
+  & form {
+    border: none;
+  }
+  .subTitle {
+    @include type.type-style('body-compact-01');
+    color: colors.$cool-gray-70;
+    margin-top: layout.$spacing-04;
+  }
+}
+
+svg.iconOverrides {
+  width: layout.$spacing-11;
+  height: layout.$spacing-11;
+  fill: var(--brand-03);
+}

package/src/components/empty-state/empty-state-log.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import EmptyState from './empty-state-log.components';
+import React from 'react';
+
+// Mock the EmptyDataIllustration component
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: jest.fn(() => <div>Mocked EmptyDataIllustration</div>),
+}));
+
+describe('EmptyState', () => {
+  it('renders the EmptyState component with the given subtitle', () => {
+    const testSubtitle = 'No data available';
+
+    render(<EmptyState subTitle={testSubtitle} />);
+
+    const subtitleElement = screen.getByText(testSubtitle);
+    expect(subtitleElement).toBeInTheDocument();
+
+    const illustrationElement = screen.getByText('Mocked EmptyDataIllustration');
+    expect(illustrationElement).toBeInTheDocument();
+  });
+});

package/src/components/header/header-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './header.scss';
+import { IbmCloudant } from '@carbon/react/icons';
+
+const ETLIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <IbmCloudant className={styles.iconOveriders} />
+    </div>
+  );
+};
+
+export default ETLIllustration;

package/src/components/header/header.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { formatDate, useSession, PageHeader } from '@openmrs/esm-framework';
+import styles from './header.scss';
+import ETLIllustration from './header-illustration.component';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <PageHeader
+        title={t('etlAdministration', 'ETL Administration')}
+        illustration={<ETLIllustration />}
+        className={styles.header}
+      />
+    </div>
+  );
+};
+
+export default Header;

package/src/components/header/header.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+  background: white;
+  border: 1px solid colors.$gray-20;
+}
+.svgContainer svg {
+  width: layout.$spacing-10;
+  height: layout.$spacing-10;
+  margin-right: layout.$spacing-06;
+  fill: var(--brand-03);
+}

package/src/components/logs-table/operation-log-resource.ts

@@ -0,0 +1,34 @@
+import { restBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { ETLResponse } from '../../types';
+
+export const recreateTables = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+
+export const refreshTables = async () => {
+  const url = `${restBaseUrl}/kemrchart/refreshTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+
+export const recreateDatatools = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateDatatoolsTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};
+
+export const refreshDwapi = async () => {
+  const url = `${restBaseUrl}/kemrchart/recreateDwapiTables`;
+  const response = await openmrsFetch<{
+    data: Array<ETLResponse>;
+  }>(url);
+  return response.data.data;
+};

package/src/components/logs-table/operation-log-table.component.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  DataTableSkeleton,
+  InlineLoading,
+} from '@carbon/react';
+import { CardHeader, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useLayoutType, usePagination, formatDate } from '@openmrs/esm-framework';
+import styles from './operation-log.scss';
+import { ETLResponse } from '../../types';
+import EmptyState from '../empty-state/empty-state-log.components';
+
+interface LogTableProps {
+  logData: ETLResponse[];
+  isLoading: boolean;
+}
+
+const LogTable: React.FC<LogTableProps> = ({ logData, isLoading }) => {
+  const { t } = useTranslation();
+  const pageSize = 10;
+  const isTablet = useLayoutType() === 'tablet';
+
+  const headers = [
+    { header: t('procedure', 'Procedure'), key: 'script_name' },
+    { header: t('startTime', 'Start time'), key: 'start_time' },
+    { header: t('endTime', 'End time'), key: 'stop_time' },
+    { header: t('completionStatus', 'Completion status'), key: 'status' },
+  ];
+
+  const rows = logData?.map((item, index) => ({
+    id: index.toString(),
+    script_name: item.script_name,
+    start_time: formatDate(new Date(item.start_time)),
+    stop_time: formatDate(new Date(item.stop_time)),
+    status: item.status,
+  }));
+
+  const { results: paginatedData, currentPage, goTo } = usePagination(rows, pageSize);
+
+  return (
+    <div className={styles.table}>
+      <CardHeader title={t('etlOperationLog', 'ETL Operations Log')} children={''} />
+      <div className={styles.logTable}>
+        {isLoading && logData.length === 0 ? (
+          <DataTableSkeleton
+            headers={headers}
+            aria-label="etl table"
+            showToolbar={false}
+            showHeader={false}
+            rowCount={4}
+            zebra
+            columnCount={3}
+            className={styles.dataTableSkeleton}
+          />
+        ) : logData.length === 0 ? (
+          <EmptyState subTitle={t('noRecordsFound', 'No ETL Operation logs found')} />
+        ) : (
+          <>
+            <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+              {({ rows, headers, getHeaderProps, getTableProps }) => (
+                <TableContainer className={styles.tableContainer}>
+                  <Table {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader
+                            key={header.key}
+                            className={classNames(styles.productiveHeading01, styles.text02)}
+                            {...getHeaderProps({ header })}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.info.header === 'status' ? (
+                                <Tag size="md" type={cell.value === 'Success' ? 'green' : 'red'}>
+                                  {cell.value}
+                                </Tag>
+                              ) : (
+                                cell.value
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+            <PatientChartPagination
+              currentItems={paginatedData.length}
+              totalItems={rows.length}
+              onPageNumberChange={({ page }) => goTo(page)}
+              pageNumber={currentPage}
+              pageSize={pageSize}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LogTable;

package/src/components/logs-table/operation-log.scss

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.logTable {
+  margin: 0 auto;
+}
+.table {
+  border: 1px solid colors.$gray-30;
+}