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

package/src/components/global-property/workspace/global-property.workspace.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useState } from 'react';
+import {
+  ResponsiveWrapper,
+  Workspace2,
+  showSnackbar,
+  useLayoutType,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { Button, ButtonSet, ComboBox, Form, FormGroup, InlineLoading, Stack, TextArea, TextInput } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+
+import styles from './global-property.workspace.scss';
+import { type SystemSettings } from '../../../types';
+import { saveOrUpdateGlobalProperty } from '../hooks/useGlobalProperty';
+import {
+  createGlobalPropertyFormSchema,
+  openmrsCustomDatatypes,
+  type GlobalPropertyFormType,
+} from './global-property-form-schema';
+
+type GlobalPropertyWorkspaceProps = {
+  systemSetting?: SystemSettings | null;
+  mutateGlobalProperty: () => void;
+};
+
+const GlobalPropertyWorkspace: React.FC<Workspace2DefinitionProps<GlobalPropertyWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps: { systemSetting, mutateGlobalProperty },
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const isEditMode = Boolean(systemSetting?.uuid);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<GlobalPropertyFormType>({
+    resolver: zodResolver(createGlobalPropertyFormSchema(t)),
+    defaultValues: {
+      property: systemSetting?.property ?? '',
+      description: systemSetting?.description ?? '',
+      datatypeClassname: systemSetting?.datatypeClassname ?? '',
+      datatypeConfig: systemSetting?.datatypeConfig ?? '',
+      preferredHandlerClassname: systemSetting?.preferredHandlerClassname ?? '',
+      handlerConfig: systemSetting?.handlerConfig ?? '',
+      value: systemSetting?.value ?? '',
+    },
+  });
+
+  useEffect(() => {
+    setHasUnsavedChanges(isDirty);
+  }, [isDirty]);
+
+  const onSubmit = async (data: GlobalPropertyFormType) => {
+    const payload = {
+      property: data.property,
+      value: data.value,
+      description: data.description,
+      datatypeClassname: data.datatypeClassname,
+      datatypeConfig: data.datatypeConfig,
+      preferredHandlerClassname: data.preferredHandlerClassname,
+      handlerConfig: data.handlerConfig,
+    };
+    try {
+      await saveOrUpdateGlobalProperty(payload, systemSetting?.uuid);
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: isEditMode
+          ? t('gpUpdated', 'Global property {{property}} was updated successfully.', { property: data.property })
+          : t('gpCreated', 'Global property {{property}} was created successfully.', { property: data.property }),
+      });
+      mutateGlobalProperty();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error: any) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: error?.message ?? t('gpSaveError', 'Error saving global property'),
+      });
+    }
+  };
+
+  const title = isEditMode
+    ? t('editGlobalProperty', 'Edit global property')
+    : t('addGlobalProperty', 'Add global property');
+
+  return (
+    <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={4}>
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="property"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpProperty"
+                      labelText={t('property', 'Property (required)')}
+                      placeholder={t('gpPropertyPlaceholder', 'e.g. setting.name')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.property}
+                      invalidText={errors.property?.message}
+                      disabled={isEditMode}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="value"
+                  render={({ field }) => (
+                    <TextArea
+                      id="gpValue"
+                      labelText={t('value', 'Value (required)')}
+                      placeholder={t('gpValuePlaceholder', 'Enter value')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.value}
+                      invalidText={errors.value?.message}
+                      rows={3}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field }) => (
+                    <TextArea
+                      id="gpDescription"
+                      labelText={t('description', 'Description')}
+                      placeholder={t('gpDescriptionPlaceholder', 'Optional description')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                      rows={2}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="datatypeClassname"
+                  render={({ field }) => (
+                    <ComboBox
+                      id="datatypeClassname"
+                      invalidText={errors.datatypeClassname?.message}
+                      items={openmrsCustomDatatypes}
+                      onChange={function Zye() {}}
+                      titleText={t('datatypeClassname', 'Datatype classname')}
+                      typeahead
+                      placeholder={t('selectDatatypeClassname', 'Select datatype classname')}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="datatypeConfig"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpDatatypeConfig"
+                      labelText={t('datatypeConfig', 'Datatype config')}
+                      placeholder={t('gpDatatypeConfigPlaceholder', 'Optional datatype configuration')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="preferredHandlerClassname"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpPreferredHandlerClassname"
+                      labelText={t('preferredHandlerClassname', 'Preferred handler classname')}
+                      placeholder={t('gpPreferredHandlerPlaceholder', 'Optional preferred handler classname')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="handlerConfig"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpHandlerConfig"
+                      labelText={t('handlerConfig', 'Handler config')}
+                      placeholder={t('gpHandlerConfigPlaceholder', 'Optional handler configuration')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('submitting', 'Submitting...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default GlobalPropertyWorkspace;

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

@@ -12,7 +12,6 @@ import {
   TableRow,
   Tag,
   DataTableSkeleton,
-  InlineLoading,
 } from '@carbon/react';
 import { CardHeader, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { useLayoutType, usePagination, formatDate } from '@openmrs/esm-framework';
@@ -21,13 +20,14 @@ import { ETLResponse } from '../../types';
 import EmptyState from '../empty-state/empty-state-log.components';
 
 interface LogTableProps {
-  logData: ETLResponse[];
+  logData: Array<ETLResponse>;
   isLoading: boolean;
 }
 
+const PAGE_SIZE = 10;
+
 const LogTable: React.FC<LogTableProps> = ({ logData, isLoading }) => {
   const { t } = useTranslation();
-  const pageSize = 10;
   const isTablet = useLayoutType() === 'tablet';
 
   const headers = [
@@ -37,82 +37,94 @@ const LogTable: React.FC<LogTableProps> = ({ logData, isLoading }) => {
     { header: t('completionStatus', 'Completion status'), key: 'status' },
   ];
 
-  const rows = logData?.map((item, index) => ({
-    id: index.toString(),
-    script_name: item.script_name,
-    start_time: item?.start_time ? formatDate(new Date(item?.start_time)) : '--',
-    stop_time: item?.stop_time ? formatDate(new Date(item?.stop_time)) : '--',
-    status: item.status,
-  }));
+  const rows =
+    logData?.map((item, index) => ({
+      id: index.toString(),
+      script_name: item.script_name,
+      start_time: item?.start_time ? formatDate(new Date(item.start_time)) : '--',
+      stop_time: item?.stop_time ? formatDate(new Date(item.stop_time)) : '--',
+      status: item.status,
+    })) ?? [];
+
+  const { results: paginatedData, currentPage, goTo } = usePagination(rows, PAGE_SIZE);
+
+  const renderTable = ({ rows, headers, getHeaderProps, getTableProps }: any) => (
+    <TableContainer className={styles.tableContainer}>
+      <Table {...getTableProps()}>
+        <TableHead>
+          <TableRow>
+            {headers.map((header: any) => (
+              <TableHeader
+                className={classNames(styles.productiveHeading01, styles.text02)}
+                {...getHeaderProps({ header })}>
+                {header.header}
+              </TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row: any) => (
+            <TableRow key={row.id}>
+              {row.cells.map((cell: any) => (
+                <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>
+  );
+
+  const renderContent = () => {
+    if (isLoading && logData.length === 0) {
+      return (
+        <DataTableSkeleton
+          headers={headers}
+          aria-label="etl table"
+          showToolbar={false}
+          showHeader={false}
+          rowCount={4}
+          zebra
+          columnCount={3}
+          className={styles.dataTableSkeleton}
+        />
+      );
+    }
+
+    if (logData.length === 0) {
+      return <EmptyState subTitle={t('noRecordsFound', 'No ETL Operation logs found')} />;
+    }
 
-  const { results: paginatedData, currentPage, goTo } = usePagination(rows, pageSize);
+    return (
+      <>
+        <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+          {renderTable}
+        </DataTable>
+        <PatientChartPagination
+          currentItems={paginatedData.length}
+          totalItems={rows.length}
+          onPageNumberChange={({ page }: { page: number }) => goTo(page)}
+          pageNumber={currentPage}
+          pageSize={PAGE_SIZE}
+        />
+      </>
+    );
+  };
 
   return (
     <div className={styles.table}>
-      <CardHeader title={t('facilityInfo', 'Facility Info')} 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>
+      <CardHeader title={t('facilityInfo', 'Facility Info')}>
+        <></>
+      </CardHeader>
+      <div className={styles.logTable}>{renderContent()}</div>
     </div>
   );
 };

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

@@ -1,47 +1,153 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
 import LogTable from './operation-log-table.component';
 import { ETLResponse } from '../../types';
 
-describe('LogTable Component', () => {
-  const mockLogData: ETLResponse[] = [
-    {
-      script_name: 'Initial Population of Tables',
-      start_time: '2024-11-28T09:30:12',
-      stop_time: '2024-11-28T09:33:15',
-      status: 'Success',
-    },
-    {
-      script_name: 'Initial Creation of Tables',
-      start_time: '2024-11-28T09:30:12',
-      stop_time: '2024-11-28T09:33:15',
-      status: 'Failed',
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string, fallback: string) => fallback }),
+}));
+
+vi.mock('@openmrs/esm-framework', () => ({
+  useLayoutType: vi.fn(() => 'desktop'),
+  usePagination: vi.fn((data) => ({
+    results: data,
+    currentPage: 1,
+    goTo: vi.fn(),
+  })),
+  formatDate: vi.fn((date: Date) => date.toISOString()),
+}));
+
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  CardHeader: ({ title }: { title: string }) => <div>{title}</div>,
+  PatientChartPagination: ({ currentItems, totalItems }: { currentItems: number; totalItems: number }) => (
+    <div data-testid="pagination">
+      {currentItems}/{totalItems}
+    </div>
+  ),
+}));
+
+vi.mock('../empty-state/empty-state-log.components', () => ({
+  default: ({ subTitle }: { subTitle: string }) => <div data-testid="empty-state">{subTitle}</div>,
+}));
+
+vi.mock('@carbon/react', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@carbon/react')>();
+  return {
+    ...original,
+    DataTable: ({
+      children,
+      rows,
+      headers,
+    }: {
+      children: (props: any) => React.ReactNode;
+      rows: any[];
+      headers: any[];
+    }) => {
+      if (typeof children === 'function') {
+        const renderRows = rows.map((row) => ({
+          ...row,
+          cells: headers.map((h) => ({
+            id: `${row.id}:${h.key}`,
+            value: row[h.key],
+            info: { header: h.key },
+          })),
+        }));
+        return children({
+          rows: renderRows,
+          headers,
+          getTableProps: () => ({}),
+          getHeaderProps: ({ header }: any) => ({ key: header.key }),
+          getRowProps: () => ({}),
+        });
+      }
+      return children;
     },
-  ];
+  };
+});
 
-  it('renders the table with correct headers and rows', () => {
-    render(<LogTable logData={mockLogData} isLoading={false} />);
+vi.mock('classnames', () => ({ default: (...args: string[]) => args.filter(Boolean).join(' ') }));
 
-    const headers = ['Procedure', 'Start time', 'End time', 'Completion status'];
-    headers.forEach((header) => {
-      expect(screen.getByText(header)).toBeInTheDocument();
-    });
+vi.mock('./operation-log.scss', () => ({ default: {} }));
 
-    const rows = screen.getAllByRole('row');
-    expect(rows.length).toBe(3);
+const mockLogData: ETLResponse[] = [
+  {
+    script_name: 'Script A',
+    start_time: '2024-01-01T08:00:00Z',
+    stop_time: '2024-01-01T09:00:00Z',
+    status: 'Success',
+  },
+  {
+    script_name: 'Script B',
+    start_time: '2024-01-02T10:00:00Z',
+    stop_time: '2024-01-02T11:00:00Z',
+    status: 'Failed',
+  },
+];
+
+describe('LogTable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
   });
 
-  it('displays "No ETL Operation logs found" when logData is empty', () => {
-    render(<LogTable logData={[]} isLoading={false} />);
+  it('renders the card header', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByText('Facility Info')).toBeInTheDocument();
+  });
+
+  it('shows skeleton while loading with no data', () => {
+    render(<LogTable logData={[]} isLoading={true} />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
 
+  it('shows empty state when not loading and no data', () => {
+    render(<LogTable logData={[]} isLoading={false} />);
+    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
     expect(screen.getByText('No ETL Operation logs found')).toBeInTheDocument();
   });
 
-  it('shows skeleton loading state when isLoading is true', () => {
-    render(<LogTable logData={[]} isLoading={true} />);
+  it('renders table headers when data is present', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByText('Procedure')).toBeInTheDocument();
+    expect(screen.getByText('Start time')).toBeInTheDocument();
+    expect(screen.getByText('End time')).toBeInTheDocument();
+    expect(screen.getByText('Completion status')).toBeInTheDocument();
+  });
+
+  it('renders script names in the table', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByText('Script A')).toBeInTheDocument();
+    expect(screen.getByText('Script B')).toBeInTheDocument();
+  });
+
+  it('renders Success status as a green tag', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    const successTag = screen.getByText('Success');
+    expect(successTag).toBeInTheDocument();
+  });
+
+  it('renders Failed status as a red tag', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    const failedTag = screen.getByText('Failed');
+    expect(failedTag).toBeInTheDocument();
+  });
+
+  it('renders pagination when data is present', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.getByTestId('pagination')).toBeInTheDocument();
+  });
+
+  it('renders -- for missing start_time', () => {
+    const dataWithMissingTime: ETLResponse[] = [
+      { script_name: 'Script C', start_time: '', stop_time: '', status: 'Success' },
+    ];
+    render(<LogTable logData={dataWithMissingTime} isLoading={false} />);
+    expect(screen.getAllByText('--').length).toBeGreaterThanOrEqual(2);
+  });
 
-    const skeleton = screen.getByLabelText('etl table');
-    expect(skeleton).toBeInTheDocument();
+  it('does not show empty state when data is present', () => {
+    render(<LogTable logData={mockLogData} isLoading={false} />);
+    expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
   });
 });

package/src/index.ts

@@ -9,7 +9,7 @@ const options = {
 };
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
-
+export * from './components/global-property/index';
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
 export function startupApp() {
@@ -76,6 +76,14 @@ export const searchLocationWorkspace = getAsyncLifecycle(
   () => import('./components/locations/forms/search-location/search-location.workspace'),
   options,
 );
+export const globalPropertyWorkspace = getAsyncLifecycle(
+  () => import('./components/global-property/workspace/global-property.workspace'),
+  options,
+);
+export const deleteGlobalPropertyModal = getAsyncLifecycle(
+  () => import('./components/global-property/modal/delete-global-property-modal.component'),
+  options,
+);
 
 // t('providerBanner', 'Provider banner')
 export const providerBanner = getAsyncLifecycle(

package/src/root.component.tsx

@@ -9,6 +9,7 @@ import FacilitySetup from './components/facility-setup/facility-setup.component'
 import HomeComponent from './components/locations/home/home-locations.component';
 
 import styles from './root.scss';
+import GlobalPropertyDashboard from './components/global-property/dashboard/global-property-dashboard.component';
 
 const Root: React.FC = () => {
   const spaBasePath = globalThis.spaBase;
@@ -28,6 +29,7 @@ const Root: React.FC = () => {
           <Route path="/etl-administration" element={<EtlAdminDashboard />} />
           <Route path="/facility-setup" element={<FacilitySetup />} />
           <Route path="/locations" element={<HomeComponent />} />
+          <Route path="/global-property" element={<GlobalPropertyDashboard />} />
         </Routes>
       </main>
     </BrowserRouter>