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

package/src/stock-reports/report-list/stock-reports.component.tsx

@@ -1,32 +1,39 @@
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+  Button,
   DataTable,
   DataTableSkeleton,
-  TabPanel,
+  InlineLoading,
   Pagination,
   Table,
   TableBody,
   TableCell,
   TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
   TableHead,
   TableHeader,
   TableRow,
   TableToolbar,
+  TableToolbarAction,
   TableToolbarContent,
+  TableToolbarMenu,
   TableToolbarSearch,
+  TabPanel,
   Tile,
-  Button,
-  InlineLoading,
-  TableToolbarMenu,
-  TableToolbarAction,
-  TableExpandHeader,
-  TableExpandRow,
-  TableExpandedRow,
 } from '@carbon/react';
+import {
+  CheckmarkOutline,
+  Copy,
+  Download,
+  IncompleteCancel,
+  MisuseOutline,
+  View,
+  WarningAltFilled,
+} from '@carbon/react/icons';
 import { isDesktop, restBaseUrl, useSession } from '@openmrs/esm-framework';
-import NewReportActionButton from './new-report-button.component';
-import styles from './stock-reports.scss';
 import { useGetReports } from '../stock-reports.resource';
 import {
   URL_BATCH_JOB_ARTIFACT,
@@ -41,19 +48,12 @@ import {
   BatchJobStatusFailed,
   BatchJobStatusPending,
 } from '../../core/api/types/BatchJob';
-import {
-  CheckmarkOutline,
-  Copy,
-  Download,
-  IncompleteCancel,
-  MisuseOutline,
-  View,
-  WarningAltFilled,
-} from '@carbon/react/icons';
 import { handleMutate } from '../../utils';
 import { PrivilagedView } from '../../core/components/privilages-component/privilages.component';
+import NewReportActionButton from './new-report-button.component';
 import StockReportStatus from './stock-report-status.component';
 import StockReportParameters from './stock-report-parameters.component';
+import styles from './stock-reports.scss';
 
 const StockReports: React.FC = () => {
   const { t } = useTranslation();
@@ -202,12 +202,9 @@ const StockReports: React.FC = () => {
   }
 
   return (
-    <div className={styles.tableOverride}>
+    <div className={styles.container}>
       <TabPanel>{t('ReportDescription', 'List of reports requested by users')}</TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
+
       <DataTable
         rows={tableRows}
         headers={tableHeaders}
@@ -225,7 +222,9 @@ const StockReports: React.FC = () => {
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch persistent onChange={onInputChange} />
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
                 {canCreateReport && <NewReportActionButton />}
               </TableToolbarContent>

package/src/stock-reports/report-list/stock-reports.scss

@@ -1,7 +1,11 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
 @use '@carbon/layout';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: layout.$spacing-05;
+}
 
 .content {
   @include type.type-style('heading-compact-02');
@@ -78,3 +82,7 @@
     margin-right: 4px;
   }
 }
+
+.toolbarMenuAction {
+  max-width: none;
+}

package/src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -1,10 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
-
-.section {
-  margin: layout.$spacing-03;
-}
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
@@ -15,6 +11,7 @@
 .modalBody {
   padding-bottom: layout.$spacing-05;
 }
+
 .formContainer {
   display: flex;
   flex-direction: column;
@@ -24,6 +21,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -39,3 +37,12 @@
 .body {
   padding: 1rem;
 }
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}

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

@@ -1,24 +1,16 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import StockSourcesAddOrUpdate from './add-stock-sources.workspace';
+import { render, screen } from '@testing-library/react';
+import { type FetchResponse, useConfig } from '@openmrs/esm-framework';
+import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
 import { createOrUpdateStockSource } from '../stock-sources.resource';
-import { useConfig } from '@openmrs/esm-framework';
+import StockSourcesAddOrUpdate from './add-stock-sources.workspace';
 
-import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
+const mockCreateOrUpdateStockSource = jest.mocked(createOrUpdateStockSource);
+const mockUseConfig = jest.mocked(useConfig);
 
-jest.mock('../stock-sources.resource');
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
-  useConfig: jest.fn(),
-  getCoreTranslation: jest.fn((key, defaultValue) => {
-    const translations: Record<string, string> = {
-      cancel: 'Cancel',
-      save: 'Save',
-    };
-    return translations[key] ?? defaultValue;
-  }),
+jest.mock('../stock-sources.resource', () => ({
+  createOrUpdateStockSource: jest.fn(),
 }));
 
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
@@ -34,7 +26,7 @@ jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
 
 describe('StockSourcesAddOrUpdate', () => {
   beforeEach(() => {
-    (useConfig as jest.Mock).mockReturnValue({ stockSourceTypeUUID: 'mock-uuid' });
+    mockUseConfig.mockReturnValue({ stockSourceTypeUUID: 'mock-uuid' });
   });
 
   it('renders correctly without model prop', () => {
@@ -46,9 +38,9 @@ describe('StockSourcesAddOrUpdate', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-    expect(screen.getByLabelText('Full Name')).toBeInTheDocument();
-    expect(screen.getByLabelText('Acronym/Code')).toBeInTheDocument();
-    expect(screen.getByLabelText('Source Type')).toBeInTheDocument();
+    expect(screen.getByLabelText(/full name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/acronym\/code/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/source type/i)).toBeInTheDocument();
   });
 
   it('renders correctly with model prop', () => {
@@ -110,9 +102,9 @@ describe('StockSourcesAddOrUpdate', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-    expect(screen.getByLabelText('Full Name')).toHaveValue('Test Source');
-    expect(screen.getByLabelText('Acronym/Code')).toHaveValue('TS');
-    expect(screen.getByLabelText('Source Type')).toHaveValue('type1');
+    expect(screen.getByLabelText(/full name/i)).toHaveValue('Test Source');
+    expect(screen.getByLabelText(/acronym\/code/i)).toHaveValue('TS');
+    expect(screen.getByLabelText(/source type/i)).toHaveValue('type1');
   });
 
   it('updates form fields correctly on user input', async () => {
@@ -126,16 +118,21 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.type(screen.getByLabelText('Full Name'), 'New Source');
-    await user.type(screen.getByLabelText('Acronym/Code'), 'NS');
+    await user.type(screen.getByLabelText(/full name/i), 'New Source');
+    await user.type(screen.getByLabelText(/acronym\/code/i), 'NS');
 
-    expect(screen.getByLabelText('Full Name')).toHaveValue('New Source');
-    expect(screen.getByLabelText('Acronym/Code')).toHaveValue('NS');
+    expect(screen.getByLabelText(/full name/i)).toHaveValue('New Source');
+    expect(screen.getByLabelText(/acronym\/code/i)).toHaveValue('NS');
   });
 
   it('calls createOrUpdateStockSource with correct data on form submission', async () => {
     const user = userEvent.setup();
-    (createOrUpdateStockSource as jest.Mock).mockResolvedValue({});
+    mockCreateOrUpdateStockSource.mockResolvedValue({
+      data: {},
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+    } as unknown as FetchResponse);
 
     render(
       <StockSourcesAddOrUpdate
@@ -146,15 +143,20 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.type(screen.getByLabelText('Full Name'), 'New Source');
-    await user.type(screen.getByLabelText('Acronym/Code'), 'NS');
-    await user.selectOptions(screen.getByLabelText('Source Type'), 'type2');
+    await user.type(screen.getByLabelText(/full name/i), 'New Source');
+    await user.type(screen.getByLabelText(/acronym\/code/i), 'NS');
+    await user.selectOptions(screen.getByLabelText(/source type/i), 'type2');
     await user.click(screen.getByText('Save'));
   });
 
   it('shows success message and closes overlay on successful submission', async () => {
     const user = userEvent.setup();
-    (createOrUpdateStockSource as jest.Mock).mockResolvedValue({});
+    mockCreateOrUpdateStockSource.mockResolvedValue({
+      data: {},
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+    } as unknown as FetchResponse);
 
     render(
       <StockSourcesAddOrUpdate
@@ -165,12 +167,12 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.click(screen.getByText('Save'));
+    await user.click(screen.getByText(/save/i));
   });
 
   it('shows error message on failed submission', async () => {
     const user = userEvent.setup();
-    (createOrUpdateStockSource as jest.Mock).mockRejectedValue(new Error('API Error'));
+    mockCreateOrUpdateStockSource.mockRejectedValue(new Error('API Error'));
 
     render(
       <StockSourcesAddOrUpdate
@@ -181,7 +183,7 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.click(screen.getByText('Save'));
+    await user.click(screen.getByText(/save/i));
   });
 
   it('closes overlay when cancel button is clicked', async () => {
@@ -195,6 +197,6 @@ describe('StockSourcesAddOrUpdate', () => {
       />,
     );
 
-    await user.click(screen.getByText('Cancel'));
+    await user.click(screen.getByText(/cancel/i));
   });
 });

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/delete-stock-modal.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyText {
   @include type.type-style('body-long-01');

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',
     });