@openmrs/esm-stock-management-app 3.0.1-pre.848 → 3.0.1-pre.853

package/src/stock-sources/add-stock-sources/add-stock-sources.workspace.tsx

@@ -1,20 +1,22 @@
-import { Button, Form, Select, TextInput, SelectItem, ButtonSet } from '@carbon/react';
 import React, { type ChangeEvent, useCallback, useState } from 'react';
-import styles from './add-stock-sources.scss';
-import { useConcept } from '../../stock-lookups/stock-lookups.resource';
-import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
-import { createOrUpdateStockSource } from '../stock-sources.resource';
+import classNames from 'classnames';
+import { Button, ButtonSet, Select, SelectItem, Stack, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Save } from '@carbon/react/icons';
 import {
-  type DefaultWorkspaceProps,
+  getCoreTranslation,
   restBaseUrl,
   showSnackbar,
+  type DefaultWorkspaceProps,
   useConfig,
-  getCoreTranslation,
+  useLayoutType,
 } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
+import { useConcept } from '../../stock-lookups/stock-lookups.resource';
+import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
+import { createOrUpdateStockSource } from '../stock-sources.resource';
 import { type ConfigObject } from '../../config-schema';
 import { handleMutate } from '../../utils';
-import { Save } from '@carbon/react/icons';
+import styles from './add-stock-sources.scss';
 
 type AddStockSourceProps = DefaultWorkspaceProps & {
   model?: StockSource;
@@ -22,6 +24,7 @@ type AddStockSourceProps = DefaultWorkspaceProps & {
 
 const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWorkspace }) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
   const { stockSourceTypeUUID } = useConfig<ConfigObject>();
 
   // get stock sources
@@ -47,9 +50,11 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
   const handleSave = useCallback(
     (event) => {
       event.preventDefault();
+
       if (model) {
         formModel.uuid = model.uuid;
       }
+
       createOrUpdateStockSource(formModel)
         .then(
           () => {
@@ -82,51 +87,51 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
   return (
     <div className={styles.formContainer}>
       <div className={styles.body}>
-        <section className={styles.section}>
+        <Stack gap={5}>
           <TextInput
             id="fullname"
-            type="text"
-            labelText={t('fullName', 'Full Name')}
-            size="md"
+            labelText={t('fullName', 'Full name')}
             onChange={onNameChanged}
-            value={model?.name}
             placeholder="e.g National Medical Stores"
+            size="md"
+            type="text"
+            value={model?.name}
           />
-        </section>
-        <section className={styles.section}>
           <TextInput
             id="acronym"
-            type="text"
-            size="md"
-            placeholder="e.g NMS"
+            labelText={t('acronymOrCode', 'Acronym/Code')}
             onChange={onAcronymChanged}
+            placeholder="e.g NMS"
+            size="md"
+            type="text"
             value={model?.acronym}
-            labelText={t('acronym', 'Acronym/Code')}
           />
-        </section>
-        <section className={styles.section}>
           <Select
-            name="sourceType"
             className="select-field"
-            labelText={t('sourceType', 'Source Type')}
             id="sourceType"
-            value={formModel?.sourceType ? formModel.sourceType.uuid : ''}
+            labelText={t('sourceType', 'Source Type')}
+            name="sourceType"
             onChange={onSourceTypeChange}
+            value={formModel?.sourceType ? formModel.sourceType.uuid : ''}
           >
             <SelectItem disabled hidden value="" text={t('chooseSourceType', 'Choose a source type')} />
             {items?.answers?.map((sourceType) => (
               <SelectItem key={sourceType.uuid} value={sourceType.uuid} text={sourceType.display} />
             ))}
           </Select>
-        </section>
+        </Stack>
       </div>
-
-      <ButtonSet className={styles.buttonSet}>
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}
+      >
         <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
-          {getCoreTranslation('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button type="submit" className={styles.button} onClick={handleSave} kind="primary" renderIcon={Save}>
-          {getCoreTranslation('save', 'Save')}
+          {getCoreTranslation('save')}
         </Button>
       </ButtonSet>
     </div>

package/src/stock-sources/delete-stock-modal.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-framework';
 import styles from './delete-stock-modal.scss';
 
 interface DeleteConfirmationProps {
@@ -28,7 +29,7 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({ close, onConfir
       </ModalBody>
       <ModalFooter>
         <Button size="lg" kind="secondary" onClick={handleCancel}>
-          {t('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button autoFocus kind="danger" onClick={handleDelete} size="lg">
           {t('delete', 'Delete')}

package/src/stock-sources/stock-sources-delete/stock-sources-delete.test.tsx

@@ -1,24 +1,16 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { showModal, showSnackbar } from '@openmrs/esm-framework';
+import { type FetchResponse, showModal, showSnackbar } from '@openmrs/esm-framework';
 import { deleteStockSource } from '../stock-sources.resource';
-import StockSourcesDeleteActionMenu from './stock-sources-delete.component';
-import DeleteConfirmation from '../../stock-user-role-scopes/delete-stock-user-scope-modal.component';
 import { handleMutate } from '../../utils';
+import DeleteConfirmation from '../../stock-user-role-scopes/delete-stock-user-scope-modal.component';
+import StockSourcesDeleteActionMenu from './stock-sources-delete.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key) => key,
-  }),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  showModal: jest.fn(),
-  showSnackbar: jest.fn(),
-  restBaseUrl: 'http://localhost:8080',
-}));
+const mockDeleteStockSource = jest.mocked(deleteStockSource);
+const mockHandleMutate = jest.mocked(handleMutate);
+const mockShowModal = jest.mocked(showModal);
+const mockShowSnackbar = jest.mocked(showSnackbar);
 
 jest.mock('../stock-sources.resource', () => ({
   deleteStockSource: jest.fn(),
@@ -34,7 +26,8 @@ describe('StockSourcesDeleteActionMenu', () => {
 
   it('renders the delete button correctly', () => {
     render(<StockSourcesDeleteActionMenu uuid={uuid} />);
-    const button = screen.getByRole('button', { name: 'deleteSource' });
+
+    const button = screen.getByRole('button', { name: /delete source/i });
     expect(button).toBeInTheDocument();
   });
 
@@ -42,9 +35,10 @@ describe('StockSourcesDeleteActionMenu', () => {
     const user = userEvent.setup();
     render(<StockSourcesDeleteActionMenu uuid={uuid} />);
 
-    const button = screen.getByRole('button', { name: 'deleteSource' });
+    const button = screen.getByRole('button', { name: /delete source/i });
     await user.click(button);
-    expect(showModal).toHaveBeenCalledWith(
+
+    expect(mockShowModal).toHaveBeenCalledWith(
       'delete-stock-modal',
       expect.objectContaining({
         close: expect.any(Function),
@@ -61,9 +55,9 @@ describe('StockSourcesDeleteActionMenu', () => {
 
     render(<DeleteConfirmation close={mockClose} onConfirmation={mockOnConfirmation} />);
 
-    expect(screen.getByText(/deleteStockUserScope/i)).toBeInTheDocument();
+    expect(screen.getByText(/delete stock user scope/i)).toBeInTheDocument();
 
-    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    const deleteButton = screen.getByRole('button', { name: /danger delete/i });
     await user.click(deleteButton);
 
     expect(mockOnConfirmation).toHaveBeenCalledTimes(1);
@@ -85,7 +79,7 @@ describe('StockSourcesDeleteActionMenu', () => {
       />,
     );
 
-    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    const deleteButton = screen.getByRole('button', { name: /danger delete/i });
     await user.click(deleteButton);
 
     expect(mockOnConfirmation).toHaveBeenCalledTimes(1);
@@ -94,7 +88,7 @@ describe('StockSourcesDeleteActionMenu', () => {
 
   it('calls handleMutate with the correct URL on successful deletion', async () => {
     const user = userEvent.setup();
-    (deleteStockSource as jest.Mock).mockResolvedValueOnce({});
+    mockDeleteStockSource.mockResolvedValueOnce({} as FetchResponse<any>);
 
     const mockOnConfirmation = jest.fn();
     const mockClose = jest.fn();
@@ -109,18 +103,17 @@ describe('StockSourcesDeleteActionMenu', () => {
       />,
     );
 
-    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    const deleteButton = screen.getByRole('button', { name: /danger delete/i });
     await user.click(deleteButton);
 
-    expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
-    expect(handleMutate).toHaveBeenCalledWith('/openmrs/ws/rest/v1/stocksource');
+    expect(mockDeleteStockSource).toHaveBeenCalledWith([uuid]);
+    expect(mockHandleMutate).toHaveBeenCalledWith('/openmrs/ws/rest/v1/stocksource');
   });
 
   it('calls showSnackbar with the correct parameters on deletion error', async () => {
     const user = userEvent.setup();
-    (deleteStockSource as jest.Mock).mockRejectedValueOnce(new Error('Deletion failed'));
+    mockDeleteStockSource.mockRejectedValueOnce(new Error('Deletion failed'));
 
-    const mockOnConfirmation = jest.fn();
     const mockClose = jest.fn();
 
     render(
@@ -139,11 +132,11 @@ describe('StockSourcesDeleteActionMenu', () => {
       />,
     );
 
-    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    const deleteButton = screen.getByRole('button', { name: /danger delete/i });
     await user.click(deleteButton);
 
-    expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
-    expect(showSnackbar).toHaveBeenCalledWith({
+    expect(mockDeleteStockSource).toHaveBeenCalledWith([uuid]);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
       title: 'stockSourceDeleteError',
       kind: 'error',
     });
@@ -151,9 +144,8 @@ describe('StockSourcesDeleteActionMenu', () => {
 
   it('handles the error state correctly when the delete action fails', async () => {
     const user = userEvent.setup();
-    (deleteStockSource as jest.Mock).mockRejectedValueOnce(new Error('Deletion failed'));
+    mockDeleteStockSource.mockRejectedValueOnce(new Error('Deletion failed'));
 
-    const mockOnConfirmation = jest.fn();
     const mockClose = jest.fn();
 
     render(
@@ -172,12 +164,11 @@ describe('StockSourcesDeleteActionMenu', () => {
       />,
     );
 
-    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    const deleteButton = screen.getByRole('button', { name: /danger delete/i });
     await user.click(deleteButton);
 
-    expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
-
-    expect(showSnackbar).toHaveBeenCalledWith({
+    expect(mockDeleteStockSource).toHaveBeenCalledWith([uuid]);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
       title: 'stockSourceDeleteError',
       kind: 'error',
     });

package/src/stock-sources/stock-sources-filter/stock-sources-filter.component.tsx

@@ -1,34 +1,46 @@
-import styles from './stock-sources-filter.scss';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
 import React from 'react';
-import { useConcept } from '../../stock-lookups/stock-lookups.resource';
+import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../config-schema';
-import { useConfig } from '@openmrs/esm-framework';
+import { useConcept } from '../../stock-lookups/stock-lookups.resource';
+import styles from './stock-sources-filter.scss';
 
 const StockSourcesFilter: React.FC<{
   onFilterChange: (selectedSourceType: string) => void;
 }> = ({ onFilterChange }) => {
   const { stockSourceTypeUUID } = useConfig<ConfigObject>();
-  // get stock sources
+
   const { items, isLoading, error } = useConcept(stockSourceTypeUUID);
-  if (isLoading || error) {
-    return <DropdownSkeleton />;
+
+  if (isLoading) {
+    return <DropdownSkeleton size="sm" />;
+  }
+
+  if (error) {
+    showSnackbar({
+      title: 'Error fetching stock sources',
+      kind: 'error',
+      isLowContrast: true,
+    });
   }
+
+  if (!items) {
+    return null;
+  }
+
   return (
-    <>
-      <div className={styles.filterContainer}>
-        <Dropdown
-          id="stockSourcesFiter"
-          items={[...items.answers]}
-          initialSelectedItem={items.answers[0]}
-          itemToString={(item) => (item ? item.display : 'Not Set')}
-          titleText="Filter: "
-          type="inline"
-          size="sm"
-          onChange={({ selectedItem }) => onFilterChange(selectedItem?.display)}
-        />
-      </div>
-    </>
+    <div className={styles.filterContainer}>
+      <Dropdown
+        id="stockSourcesFiter"
+        items={[...items.answers]}
+        initialSelectedItem={items.answers[0]}
+        itemToString={(item) => (item ? item.display : 'Not Set')}
+        titleText="Filter: "
+        type="inline"
+        size="sm"
+        onChange={({ selectedItem }) => onFilterChange(selectedItem?.display)}
+      />
+    </div>
   );
 };
 

package/src/stock-sources/stock-sources-items-table.component.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import {
-  TabPanel,
   DataTable,
+  DataTableSkeleton,
   Pagination,
   Table,
   TableBody,
@@ -11,23 +11,23 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
+  TableToolbarAction,
   TableToolbarContent,
-  Tile,
-  DataTableSkeleton,
-  TableToolbarSearch,
   TableToolbarMenu,
-  TableToolbarAction,
+  TableToolbarSearch,
+  TabPanel,
+  Tile,
 } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import useStockSourcesPage from './stock-sources-items-table.resource';
+import { handleMutate } from '../utils';
 import { ResourceRepresentation } from '../core/api/api';
+import useStockSourcesPage from './stock-sources-items-table.resource';
 import AddStockSourceActionButton from './add-stock-source-button.component';
+import EditStockSourceActionsMenu from './edit-stock-source/edit-stock-source.component';
+import StockSourcesDeleteActionMenu from './stock-sources-delete/stock-sources-delete.component';
 import StockSourcesFilter from './stock-sources-filter/stock-sources-filter.component';
 import styles from './stock-sources.scss';
-import { useTranslation } from 'react-i18next';
-import StockSourcesDeleteActionMenu from './stock-sources-delete/stock-sources-delete.component';
-import EditStockSourceActionsMenu from './edit-stock-source/edit-stock-source.component';
-import { handleMutate } from '../utils';
 
 const StockSourcesItems: React.FC = () => {
   const { t } = useTranslation();
@@ -81,15 +81,12 @@ const StockSourcesItems: React.FC = () => {
   return (
     <div className={styles.tableOverride}>
       <TabPanel>{t('panelDescription', 'List of partners who provide stock to the facility.')}</TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
+
       <DataTable
         rows={filteredTableRows}
         headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
+        isSortable
+        useZebraStyles
         render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
@@ -110,7 +107,9 @@ const StockSourcesItems: React.FC = () => {
                   <StockSourcesFilter onFilterChange={handleFilterChange} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
 
                 <AddStockSourceActionButton />

package/src/stock-sources/stock-sources-items-table.resource.ts

@@ -1,9 +1,11 @@
-import { useStockSources } from './stock-sources.resource';
 import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { usePagination } from '@openmrs/esm-framework';
+import { useStockSources } from './stock-sources.resource';
 import { type StockOperationFilter } from '../stock-operations/stock-operations.resource';
 
 export default function useStockSourcesPage(filter: StockOperationFilter) {
+  const { t } = useTranslation();
   const { items, isLoading, error } = useStockSources(filter);
 
   const pageSizes = [10, 20, 30, 40, 50];
@@ -14,26 +16,26 @@ export default function useStockSourcesPage(filter: StockOperationFilter) {
     () => [
       {
         id: 1,
-        header: 'Name',
+        header: t('name', 'Name'),
         key: 'name',
       },
       {
         id: 2,
-        header: 'Acronym',
+        header: t('acronym', 'Acronym'),
         key: 'acronym',
       },
       {
         id: 3,
-        header: 'Source Type',
+        header: t('sourceType', 'Source Type'),
         key: 'sourceType',
       },
       {
         id: 4,
-        header: 'actions',
+        header: t('actions', 'Actions'),
         key: 'actions',
       },
     ],
-    [],
+    [t],
   );
 
   return {