@kenyaemr/esm-admin-app 5.4.4-pre.297 → 5.4.4-pre.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-admin-app",
-  "version": "5.4.4-pre.297",
+  "version": "5.4.4-pre.3",
   "description": "Facilitates the management of ETL tables",
   "keywords": [
     "openmrs"

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

@@ -1,24 +1,13 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useTranslation } from 'react-i18next';
+import { vi, describe, it, expect } from 'vitest';
 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 closeMock = vi.fn();
+    const confirmMock = vi.fn();
     const operationName = 'refresh';
     const operationType = 'refreshed';
 
@@ -32,14 +21,14 @@ describe('OperationConfirmation', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Confirmation' })).toBeInTheDocument();
-    expect(screen.getByText('Do you want to refreshed?')).toBeInTheDocument();
+    expect(screen.getByText('Do you want to {{operationTypeOrName}}?')).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();
+    const closeMock = vi.fn();
+    const confirmMock = vi.fn();
 
     render(
       <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,
@@ -53,8 +42,8 @@ describe('OperationConfirmation', () => {
   });
 
   it('calls confirm when the Yes button is clicked', () => {
-    const closeMock = jest.fn();
-    const confirmMock = jest.fn();
+    const closeMock = vi.fn();
+    const confirmMock = vi.fn();
 
     render(
       <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,

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

@@ -12,6 +12,7 @@ import {
 } from '../logs-table/operation-log-resource';
 import LogTable from '../logs-table/operation-log-table.component';
 import { showModal, showSnackbar } from '@openmrs/esm-framework';
+import { extractErrorMessagesFromResponse } from '../locations/helpers';
 
 const Dashboard: React.FC = () => {
   const { t } = useTranslation();
@@ -59,7 +60,9 @@ const Dashboard: React.FC = () => {
         } catch (error) {
           showSnackbar({
             title: t('operationError', '{{operationName}} failed', { operationName }),
-            subtitle: t('operationErrorSubtitle', 'An error occurred during the operation.'),
+            subtitle: t('operationErrorSubtitle', 'An error occurred during the operation. {{error}}', {
+              error: extractErrorMessagesFromResponse(error),
+            }),
             kind: 'error',
             isLowContrast: true,
           });

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

@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { vi, describe, it, expect } from 'vitest';
 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>),
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: vi.fn(() => <div>Mocked EmptyDataIllustration</div>),
 }));
 
 describe('EmptyState', () => {

package/src/components/global-property/dashboard/global-property-dashboard.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PageHeader, FacilityPictogram } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+import GlobalPropertyTable from '../table/global-property-table.component';
+import styles from './global-property-dashboard.scss';
+
+const GlobalPropertyDashboard: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <PageHeader
+        className={styles.pageHeader}
+        title={t('globalProperty', 'Global Property')}
+        illustration={<FacilityPictogram />}
+      />
+      <GlobalPropertyTable />
+    </div>
+  );
+};
+
+export default GlobalPropertyDashboard;

package/src/components/global-property/dashboard/global-property-dashboard.scss

@@ -0,0 +1,6 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.pageHeader {
+  border-bottom: 1px solid colors.$gray-10;
+}

package/src/components/global-property/hooks/useGlobalProperty.ts

@@ -0,0 +1,64 @@
+import { openmrsFetch, restBaseUrl, useOpenmrsPagination } from '@openmrs/esm-framework';
+
+import { type SystemSettings } from '../../../types';
+
+export type GlobalPropertyPayload = {
+  property: string;
+  value: string;
+  description?: string | null;
+  datatypeClassname?: string | null;
+  datatypeConfig?: string | null;
+  preferredHandlerClassname?: string | null;
+  handlerConfig?: string | null;
+};
+
+export async function saveOrUpdateGlobalProperty(payload: GlobalPropertyPayload, uuid?: string): Promise<void> {
+  const url = uuid ? `${restBaseUrl}/systemsetting/${uuid}` : `${restBaseUrl}/systemsetting`;
+  const body: Record<string, unknown> = {
+    property: payload.property,
+    value: payload.value,
+  };
+  if (payload.description) {
+    body.description = payload.description;
+  }
+  if (payload.datatypeClassname) {
+    body.datatypeClassname = payload.datatypeClassname;
+  }
+  if (payload.datatypeConfig) {
+    body.datatypeConfig = payload.datatypeConfig;
+  }
+  if (payload.preferredHandlerClassname) {
+    body.preferredHandlerClassname = payload.preferredHandlerClassname;
+  }
+  if (payload.handlerConfig != null) {
+    body.handlerConfig = payload.handlerConfig;
+  }
+
+  const response = await openmrsFetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData?.error?.message ?? 'Failed to save global property');
+  }
+}
+
+export async function deleteGlobalProperty(uuid: string): Promise<void> {
+  const response = await openmrsFetch(`${restBaseUrl}/systemsetting/${uuid}?purge=true`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData?.error?.message ?? 'Failed to delete global property');
+  }
+}
+
+export function useGlobalProperties(pageSize: number = 10, searchTerm?: string) {
+  const searchQuery = searchTerm ? `&q=${encodeURIComponent(searchTerm)}` : '';
+  const baseUrl = `${restBaseUrl}/systemsetting?v=default`;
+  const url = searchTerm ? `${baseUrl}${searchQuery}` : baseUrl;
+  return useOpenmrsPagination<SystemSettings>(url, pageSize);
+}

package/src/components/global-property/index.ts

@@ -0,0 +1,14 @@
+import { getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { createLeftPanelLink } from '../../left-pannel-link.component';
+import { moduleName } from '../../constants';
+
+// t('globalProperty','Global property')
+export const globalPropertyLink = getSyncLifecycle(
+  createLeftPanelLink({ title: 'globalProperty', name: 'global-property' }),
+  { moduleName, featureName: 'global-property' },
+);
+
+export const globalPropertyDashboard = getAsyncLifecycle(
+  () => import('./dashboard/global-property-dashboard.component'),
+  { moduleName, featureName: 'global-property' },
+);

package/src/components/global-property/modal/delete-global-property-modal.component.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+import { deleteGlobalProperty } from '../hooks/useGlobalProperty';
+
+interface DeleteGlobalPropertyModalProps {
+  close: () => void;
+  property: string;
+  uuid: string;
+  onDeleted: () => void;
+}
+
+const DeleteGlobalPropertyModal: React.FC<DeleteGlobalPropertyModalProps> = ({ close, property, uuid, onDeleted }) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await deleteGlobalProperty(uuid);
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        title: t('gpDeleted', 'Global property deleted'),
+        subtitle: t('gpDeletedSubtitle', '{{property}} was deleted successfully.', { property }),
+      });
+      onDeleted();
+      close();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('gpDeleteError', 'Error deleting global property'),
+        subtitle: error?.message,
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('deleteGlobalProperty', 'Delete global property')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'deleteGlobalPropertyConfirmation',
+            'Are you sure you want to delete the global property "{{property}}"?',
+            {
+              property,
+            },
+          )}
+        </p>
+        <p>{t('deleteGlobalPropertyWarning', 'This action cannot be undone.')}</p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close} disabled={isDeleting}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? <InlineLoading description={t('deleting', 'Deleting...')} /> : t('delete', 'Delete')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default DeleteGlobalPropertyModal;

package/src/components/global-property/modal/delete-global-property-modal.test.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import DeleteGlobalPropertyModal from './delete-global-property-modal.component';
+
+const mockShowSnackbar = vi.fn();
+const mockDeleteGlobalProperty = vi.fn();
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (_key: string, fallback: string, opts?: Record<string, unknown>) => fallback }),
+}));
+
+vi.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: (...args: unknown[]) => mockShowSnackbar(...args),
+}));
+
+vi.mock('../hooks/useGlobalProperty', () => ({
+  deleteGlobalProperty: (...args: unknown[]) => mockDeleteGlobalProperty(...args),
+}));
+
+describe('DeleteGlobalPropertyModal', () => {
+  const defaultProps = {
+    close: vi.fn(),
+    property: 'setting.example',
+    uuid: 'uuid-abc',
+    onDeleted: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('displays the modal heading', () => {
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    expect(screen.getByText('Delete global property')).toBeInTheDocument();
+  });
+
+  it('shows the property name in the confirmation message', () => {
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    expect(screen.getByText('Are you sure you want to delete the global property "{{property}}"?')).toBeInTheDocument();
+  });
+
+  it('shows a warning that the action cannot be undone', () => {
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
+  });
+
+  it('calls close when the Cancel button is clicked', () => {
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(defaultProps.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onDeleted when Cancel is clicked', () => {
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(defaultProps.onDeleted).not.toHaveBeenCalled();
+  });
+
+  it('calls deleteGlobalProperty with the correct uuid when Delete is clicked', async () => {
+    mockDeleteGlobalProperty.mockResolvedValue(undefined);
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Delete'));
+    await waitFor(() => {
+      expect(mockDeleteGlobalProperty).toHaveBeenCalledWith('uuid-abc');
+    });
+  });
+
+  it('shows a success snackbar and closes the modal after successful deletion', async () => {
+    mockDeleteGlobalProperty.mockResolvedValue(undefined);
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Delete'));
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
+      expect(defaultProps.onDeleted).toHaveBeenCalledTimes(1);
+      expect(defaultProps.close).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('shows an error snackbar when deletion fails', async () => {
+    mockDeleteGlobalProperty.mockRejectedValue(new Error('Server error'));
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Delete'));
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error' }));
+      expect(defaultProps.close).not.toHaveBeenCalled();
+      expect(defaultProps.onDeleted).not.toHaveBeenCalled();
+    });
+  });
+
+  it('disables both buttons while deletion is in progress', async () => {
+    let resolveDelete: () => void;
+    mockDeleteGlobalProperty.mockReturnValue(
+      new Promise<void>((res) => {
+        resolveDelete = res;
+      }),
+    );
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Delete'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Cancel')).toBeDisabled();
+    });
+
+    await act(async () => {
+      resolveDelete!();
+    });
+  });
+
+  it('shows a loading indicator while deletion is in progress', async () => {
+    let resolveDelete: () => void;
+    mockDeleteGlobalProperty.mockReturnValue(
+      new Promise<void>((res) => {
+        resolveDelete = res;
+      }),
+    );
+    render(<DeleteGlobalPropertyModal {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Delete'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Deleting...')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      resolveDelete!();
+    });
+  });
+});

package/src/components/global-property/table/global-property-table.component.tsx

@@ -0,0 +1,249 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  type DataTableHeader,
+} from '@carbon/react';
+import { Add, Edit, TrashCan } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import {
+  ErrorCard,
+  isDesktop,
+  launchWorkspace2,
+  showModal,
+  useDebounce,
+  useLayoutType,
+  usePaginationInfo,
+} from '@openmrs/esm-framework';
+
+import { useGlobalProperties } from '../hooks/useGlobalProperty';
+import styles from './global-property-table.scss';
+
+const DEFAULT_PAGE_SIZE = 10;
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+type GlobalPropertyRow = {
+  id: string;
+  property: string;
+  value: string;
+};
+
+const GlobalPropertyTable: React.FC = () => {
+  const { t } = useTranslation();
+  const layoutType = useLayoutType();
+  const desktop = isDesktop(layoutType);
+
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const {
+    isLoading,
+    data: globalProperties = [],
+    error,
+    goTo,
+    currentPage,
+    totalCount,
+    mutate,
+  } = useGlobalProperties(pageSize, debouncedSearchTerm);
+
+  const { pageSizes } = usePaginationInfo(DEFAULT_PAGE_SIZE, totalCount, currentPage, globalProperties.length);
+
+  const headers: Array<DataTableHeader> = useMemo(
+    () => [
+      { key: 'property', header: t('property', 'Property') },
+      { key: 'value', header: t('value', 'Value') },
+    ],
+    [t],
+  );
+
+  const rows: Array<GlobalPropertyRow> = useMemo(
+    () =>
+      globalProperties.map((gp, idx) => ({
+        id: gp?.uuid ?? `gp-${idx}`,
+        property: gp?.property ?? '',
+        value: gp?.value ?? '',
+      })),
+    [globalProperties],
+  );
+
+  const handleSearchChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchTerm(event.target.value);
+      if (currentPage !== 1) {
+        goTo(1);
+      }
+    },
+    [currentPage, goTo],
+  );
+
+  const handlePaginationChange = useCallback(
+    ({ page, pageSize: newSize }: { page: number; pageSize: number }) => {
+      if (newSize !== pageSize) {
+        setPageSize(newSize);
+      }
+      goTo(page);
+    },
+    [pageSize, goTo],
+  );
+
+  const openWorkspace = useCallback(
+    (systemSetting?: (typeof globalProperties)[number]) => {
+      launchWorkspace2('global-property-workspace', {
+        systemSetting,
+        mutateGlobalProperty: mutate,
+      });
+    },
+    [globalProperties, mutate],
+  );
+
+  const handleEdit = useCallback(
+    (row: GlobalPropertyRow) => {
+      const systemSetting = globalProperties.find((gp) => gp.uuid === row.id);
+      openWorkspace(systemSetting);
+    },
+    [globalProperties, openWorkspace],
+  );
+
+  const handleDelete = useCallback(
+    (row: GlobalPropertyRow) => {
+      const dispose = showModal('delete-global-property-modal', {
+        close: () => dispose(),
+        property: row.property,
+        uuid: row.id,
+        onDeleted: () => mutate(),
+      });
+    },
+    [mutate],
+  );
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <DataTableSkeleton
+          aria-label={t('globalProperties', 'Global properties')}
+          headers={headers}
+          showHeader
+          showToolbar
+        />
+      );
+    }
+
+    if (rows.length === 0) {
+      return (
+        <p className={styles.emptyState}>
+          {debouncedSearchTerm
+            ? t('noMatchingGlobalProperties', 'No global properties match your search')
+            : t('noGlobalProperties', 'No global properties to display')}
+        </p>
+      );
+    }
+
+    return (
+      <>
+        <DataTable useZebraStyles size={desktop ? 'sm' : 'md'} rows={rows} headers={headers}>
+          {({ rows: renderRows, headers: renderHeaders, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {renderHeaders.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                  <TableHeader>
+                    <span className={styles.visuallyHidden}>{t('actions', 'Actions')}</span>
+                  </TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {renderRows.map((row) => {
+                  const sourceRow = rows.find((r) => r.id === row.id)!;
+                  return (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
+                      ))}
+                      <TableCell className={styles.actionsCell}>
+                        <Button
+                          kind="ghost"
+                          size="sm"
+                          renderIcon={Edit}
+                          iconDescription={t('edit', 'Edit')}
+                          hasIconOnly
+                          onClick={() => handleEdit(sourceRow)}
+                        />
+                        <Button
+                          kind="danger--ghost"
+                          size="sm"
+                          renderIcon={TrashCan}
+                          iconDescription={t('delete', 'Delete')}
+                          hasIconOnly
+                          onClick={() => handleDelete(sourceRow)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </DataTable>
+
+        <Pagination
+          itemsPerPageText={t('itemsPerPage', 'Items per page:')}
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          itemRangeText={(min, max, total) =>
+            t('minMaxItems', '{{min}}-{{max}} of {{total}} items', { min, max, total })
+          }
+          pageRangeText={(_current, total) => t('pageRangeText', 'of {{count}} pages', { count: total })}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes?.length > 0 ? pageSizes : PAGE_SIZE_OPTIONS}
+          totalItems={totalCount ?? 0}
+          onChange={handlePaginationChange}
+        />
+      </>
+    );
+  };
+
+  if (error) {
+    return (
+      <div className={styles.dataTableContainer}>
+        <ErrorCard error={error} headerTitle={t('globalPropertyError', 'Global property')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.dataTableContainer}>
+      <div className={styles.tableHeaderSection}>
+        <Search
+          id="global-property-search"
+          labelText=""
+          placeholder={t('searchGlobalPropertiesByName', 'Search global property by name')}
+          closeButtonLabelText={t('clearSearchButton', 'Clear search button')}
+          size={desktop ? 'md' : 'lg'}
+          value={searchTerm}
+          onChange={handleSearchChange}
+          type="search"
+        />
+        <Button size={desktop ? 'md' : 'lg'} kind="ghost" renderIcon={Add} onClick={() => openWorkspace()}>
+          {t('addGlobalProperty', 'Add new global property')}
+        </Button>
+      </div>
+
+      {renderContent()}
+    </div>
+  );
+};
+
+export default GlobalPropertyTable;