@kenyaemr/esm-admin-app 5.4.4-pre.428 → 5.4.4-pre.429

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"name":"global-property-link","component":"globalPropertyLink","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1},{"component":"globalPropertyDashboard","name":"global-property-dashboard"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"},{"component":"deleteGlobalPropertyModal","name":"delete-global-property-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"},{"name":"global-property-workspace","component":"globalPropertyWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"wider"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.4-pre.428"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"name":"global-property-link","component":"globalPropertyLink","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1},{"component":"globalPropertyDashboard","name":"global-property-dashboard"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"},{"component":"deleteGlobalPropertyModal","name":"delete-global-property-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"},{"name":"global-property-workspace","component":"globalPropertyWorkspace","window":"esm-admin-workspace-window"},{"name":"upload-logo-workspace","component":"uploadLogoWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"wider"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.4-pre.429"}

package/package.json

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

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

@@ -0,0 +1,28 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export const ALLOWED_LOGO_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
+export const MAX_LOGO_SIZE_BYTES = 2 * 1024 * 1024; // 2 MB
+
+export type LogoTarget = 'prescription' | 'receipt';
+
+export type UploadLogoResponse = {
+  savedPath: string;
+  message: string;
+};
+
+export async function uploadLogo(file: File, target: LogoTarget = 'prescription'): Promise<UploadLogoResponse> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const response = await openmrsFetch(`${restBaseUrl}/palladiumemr/logo?target=${target}`, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData?.error ?? errorData?.error?.message ?? 'Failed to upload image');
+  }
+
+  return response.json();
+}

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

@@ -2,28 +2,25 @@ import React, { useCallback, useMemo, useState } from 'react';
 import {
   Button,
   DataTable,
-  DataTableSkeleton,
+  OverflowMenu,
+  OverflowMenuItem,
   Pagination,
-  Search,
   Table,
   TableBody,
   TableCell,
+  TableContainer,
   TableHead,
   TableHeader,
   TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
   type DataTableHeader,
 } from '@carbon/react';
-import { Add, Edit, TrashCan } from '@carbon/react/icons';
+import { Add, Upload } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import {
-  ErrorCard,
-  isDesktop,
-  launchWorkspace2,
-  showModal,
-  useDebounce,
-  useLayoutType,
-  usePaginationInfo,
-} from '@openmrs/esm-framework';
+import { ErrorCard, launchWorkspace2, showModal, useDebounce, usePaginationInfo } from '@openmrs/esm-framework';
 
 import { useGlobalProperties } from '../hooks/useGlobalProperty';
 import styles from './global-property-table.scss';
@@ -39,15 +36,12 @@ type GlobalPropertyRow = {
 
 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,
@@ -66,7 +60,7 @@ const GlobalPropertyTable: React.FC = () => {
     [t],
   );
 
-  const rows: Array<GlobalPropertyRow> = useMemo(
+  const tableRows: Array<GlobalPropertyRow> = useMemo(
     () =>
       globalProperties.map((gp, idx) => ({
         id: gp?.uuid ?? `gp-${idx}`,
@@ -77,8 +71,9 @@ const GlobalPropertyTable: React.FC = () => {
   );
 
   const handleSearchChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchTerm(event.target.value);
+    (event: React.ChangeEvent<HTMLInputElement> | '', value?: string) => {
+      const searchValue = typeof event === 'string' ? value ?? '' : event.target.value;
+      setSearchTerm(searchValue);
       if (currentPage !== 1) {
         goTo(1);
       }
@@ -106,6 +101,12 @@ const GlobalPropertyTable: React.FC = () => {
     [globalProperties, mutate],
   );
 
+  const openUploadImageWorkspace = useCallback(() => {
+    launchWorkspace2('upload-logo-workspace', {
+      mutateGlobalProperty: mutate,
+    });
+  }, [mutate]);
+
   const handleEdit = useCallback(
     (row: GlobalPropertyRow) => {
       const systemSetting = globalProperties.find((gp) => gp.uuid === row.id);
@@ -126,95 +127,6 @@ const GlobalPropertyTable: React.FC = () => {
     [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}>
@@ -224,24 +136,104 @@ const GlobalPropertyTable: React.FC = () => {
   }
 
   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 className={styles.container}>
+      <DataTable size="sm" rows={tableRows} headers={headers} isSortable useZebraStyles>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getBatchActionProps,
+          getToolbarProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => {
+          const batchActionProps = getBatchActionProps();
+
+          return (
+            <TableContainer
+              title={t('globalProperty', 'Global Property')}
+              description={t(
+                'globalPropertyDescription',
+                'A list of all global properties for the system. Filter by search term to find specific properties.',
+              )}
+              {...getTableContainerProps()}>
+              <TableToolbar {...getToolbarProps()}>
+                <TableToolbarContent aria-hidden={batchActionProps.shouldShowBatchActions}>
+                  <TableToolbarSearch
+                    persistent
+                    onChange={handleSearchChange}
+                    placeholder={t('searchForGlobalProperties', 'Search for global properties')}
+                  />
+                  <Button renderIcon={Add} onClick={() => openWorkspace()} size="sm" kind="primary">
+                    {t('addGlobalProperty', 'Add global property')}
+                  </Button>
+                  <Button renderIcon={Upload} onClick={openUploadImageWorkspace} size="sm" kind="tertiary">
+                    {t('uploadImage', 'Upload image')}
+                  </Button>
+                </TableToolbarContent>
+              </TableToolbar>
+
+              <Table {...getTableProps()} aria-label="Global properties">
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                    <TableHeader aria-label={t('rowActions', 'Row actions')} />
+                  </TableRow>
+                </TableHead>
+
+                <TableBody>
+                  {rows.map((row, index) => {
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => {
+                            if (cell.info.header === 'status') {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <Tag size="sm">{cell.value}</Tag>
+                                </TableCell>
+                              );
+                            }
+                            return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                          })}
+                          <TableCell className="cds--table-column-menu">
+                            <OverflowMenu flipped aria-label="overflow-menu">
+                              <OverflowMenuItem
+                                onClick={() => handleEdit(tableRows[index])}
+                                itemText={t('edit', 'Edit')}
+                              />
+                              <OverflowMenuItem
+                                isDelete
+                                onClick={() => handleDelete(tableRows[index])}
+                                itemText={t('delete', 'Delete')}
+                              />
+                            </OverflowMenu>
+                          </TableCell>
+                        </TableRow>
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          );
+        }}
+      </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}
+      />
     </div>
   );
 };

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

@@ -1,4 +1,5 @@
 @use '@carbon/layout';
+@use '@carbon/colors';
 
 .dataTableContainer {
   height: 100%;
@@ -32,3 +33,12 @@
   text-align: center;
   color: var(--cds-text-secondary);
 }
+
+.container {
+  margin: layout.$layout-01;
+  border: 1px solid colors.$gray-20;
+
+  :global(.cds--table-toolbar) {
+    position: relative !important;
+  }
+}

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

@@ -52,6 +52,9 @@ vi.mock('@carbon/react', async (importOriginal) => {
           getHeaderProps: ({ header }: any) => ({ key: header.key }),
           getRowProps: ({ row }: any) => ({ key: row.id }),
           getCellProps: ({ cell }: any) => ({ key: cell.id }),
+          getToolbarProps: () => ({}),
+          getTableContainerProps: () => ({}),
+          getBatchActionProps: () => ({ shouldShowBatchActions: false }),
         });
       }
       return children;
@@ -65,6 +68,8 @@ vi.mock('@carbon/react', async (importOriginal) => {
         {hasIconOnly ? null : children}
       </button>
     ),
+    OverflowMenu: ({ children }: any) => <div>{children}</div>,
+    OverflowMenuItem: ({ itemText, onClick }: any) => <button onClick={onClick}>{itemText}</button>,
   };
 });
 
@@ -97,18 +102,6 @@ describe('GlobalPropertyTable', () => {
     vi.clearAllMocks();
   });
 
-  it('shows a loading skeleton while data is loading', () => {
-    setupMock({ isLoading: true, data: [] });
-    render(<GlobalPropertyTable />);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-  });
-
-  it('shows empty state message when no properties exist', () => {
-    setupMock({ data: [] });
-    render(<GlobalPropertyTable />);
-    expect(screen.getByText('No global properties to display')).toBeInTheDocument();
-  });
-
   it('renders the table with property and value columns', () => {
     setupMock();
     render(<GlobalPropertyTable />);
@@ -125,10 +118,17 @@ describe('GlobalPropertyTable', () => {
     expect(screen.getByText('value2')).toBeInTheDocument();
   });
 
-  it('opens the add workspace when "Add new global property" button is clicked', () => {
+  it('renders the table without data rows when no properties exist', () => {
+    setupMock({ data: [], totalCount: 0 });
+    render(<GlobalPropertyTable />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.queryByText('setting.one')).not.toBeInTheDocument();
+  });
+
+  it('opens the add workspace when "Add global property" button is clicked', () => {
     setupMock();
     render(<GlobalPropertyTable />);
-    fireEvent.click(screen.getByText('Add new global property'));
+    fireEvent.click(screen.getByText('Add global property'));
     expect(mockLaunchWorkspace2).toHaveBeenCalledWith(
       'global-property-workspace',
       expect.objectContaining({
@@ -138,6 +138,18 @@ describe('GlobalPropertyTable', () => {
     );
   });
 
+  it('opens the upload image workspace when "Upload image" button is clicked', () => {
+    setupMock();
+    render(<GlobalPropertyTable />);
+    fireEvent.click(screen.getByText('Upload image'));
+    expect(mockLaunchWorkspace2).toHaveBeenCalledWith(
+      'upload-logo-workspace',
+      expect.objectContaining({
+        mutateGlobalProperty: mockMutate,
+      }),
+    );
+  });
+
   it('opens the edit workspace with the correct property when edit is clicked', () => {
     setupMock();
     render(<GlobalPropertyTable />);
@@ -168,19 +180,17 @@ describe('GlobalPropertyTable', () => {
   it('filters results and resets to page 1 when user types in the search box', async () => {
     setupMock({ currentPage: 2 });
     render(<GlobalPropertyTable />);
-    const searchInput = screen.getByPlaceholderText('Search global property by name');
+    const searchInput = screen.getByPlaceholderText('Search for global properties');
     fireEvent.change(searchInput, { target: { value: 'setting' } });
     await waitFor(() => {
       expect(mockGoTo).toHaveBeenCalledWith(1);
     });
   });
 
-  it('shows "no matching" message when search yields no results', () => {
-    setupMock({ data: [] });
+  it('renders a search input for filtering properties', () => {
+    setupMock();
     render(<GlobalPropertyTable />);
-    const searchInput = screen.getByPlaceholderText('Search global property by name');
-    fireEvent.change(searchInput, { target: { value: 'nonexistent' } });
-    expect(screen.getByText('No global properties match your search')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search for global properties')).toBeInTheDocument();
   });
 
   it('renders an error card when the hook returns an error', () => {
@@ -189,10 +199,4 @@ describe('GlobalPropertyTable', () => {
     expect(screen.getByTestId('error-card')).toBeInTheDocument();
     expect(screen.getByText('Global property')).toBeInTheDocument();
   });
-
-  it('renders a search input for filtering properties', () => {
-    setupMock();
-    render(<GlobalPropertyTable />);
-    expect(screen.getByPlaceholderText('Search global property by name')).toBeInTheDocument();
-  });
 });

package/src/components/global-property/workspace/upload-logo.workspace.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  overflow-y: auto;
+}
+
+.previewContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.previewLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.preview {
+  max-width: 100%;
+  max-height: 240px;
+  object-fit: contain;
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-03;
+  background-color: colors.$white;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+
+  & button {
+    max-width: 50% !important;
+  }
+}
+
+.buttonContainer {
+  max-width: 50%;
+}
+
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}