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

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

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

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

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

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

@@ -1,46 +1,34 @@
-import React from 'react';
+import styles from './stock-sources-filter.scss';
 import { Dropdown, DropdownSkeleton } from '@carbon/react';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
-import { type ConfigObject } from '../../config-schema';
+import React from 'react';
 import { useConcept } from '../../stock-lookups/stock-lookups.resource';
-import styles from './stock-sources-filter.scss';
+import { type ConfigObject } from '../../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
 
 const StockSourcesFilter: React.FC<{
   onFilterChange: (selectedSourceType: string) => void;
 }> = ({ onFilterChange }) => {
   const { stockSourceTypeUUID } = useConfig<ConfigObject>();
-
+  // get stock sources
   const { items, isLoading, error } = useConcept(stockSourceTypeUUID);
-
-  if (isLoading) {
-    return <DropdownSkeleton size="sm" />;
-  }
-
-  if (error) {
-    showSnackbar({
-      title: 'Error fetching stock sources',
-      kind: 'error',
-      isLowContrast: true,
-    });
+  if (isLoading || error) {
+    return <DropdownSkeleton />;
   }
-
-  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,
-  TableToolbarMenu,
-  TableToolbarSearch,
-  TabPanel,
   Tile,
+  DataTableSkeleton,
+  TableToolbarSearch,
+  TableToolbarMenu,
+  TableToolbarAction,
 } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
 import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import { handleMutate } from '../utils';
-import { ResourceRepresentation } from '../core/api/api';
 import useStockSourcesPage from './stock-sources-items-table.resource';
+import { ResourceRepresentation } from '../core/api/api';
 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,12 +81,15 @@ 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
-        useZebraStyles
+        isSortable={true}
+        useZebraStyles={true}
         render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
@@ -107,9 +110,7 @@ const StockSourcesItems: React.FC = () => {
                   <StockSourcesFilter onFilterChange={handleFilterChange} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
-                    {t('refresh', 'Refresh')}
-                  </TableToolbarAction>
+                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
                 </TableToolbarMenu>
 
                 <AddStockSourceActionButton />

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

@@ -1,11 +1,9 @@
+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];
@@ -16,26 +14,26 @@ export default function useStockSourcesPage(filter: StockOperationFilter) {
     () => [
       {
         id: 1,
-        header: t('name', 'Name'),
+        header: 'Name',
         key: 'name',
       },
       {
         id: 2,
-        header: t('acronym', 'Acronym'),
+        header: 'Acronym',
         key: 'acronym',
       },
       {
         id: 3,
-        header: t('sourceType', 'Source Type'),
+        header: 'Source Type',
         key: 'sourceType',
       },
       {
         id: 4,
-        header: t('actions', 'Actions'),
+        header: 'actions',
         key: 'actions',
       },
     ],
-    [t],
+    [],
   );
 
   return {