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

package/src/stock-items/add-bulk-stock-item/stock-items-bulk-import.test.tsx

@@ -1,105 +1,105 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import ImportDialogPopup from './stock-items-bulk-import.component';
-import { showSnackbar } from '@openmrs/esm-framework';
-import { UploadStockItems } from './stock-items-bulk-import.resource';
+import { render, screen } from '@testing-library/react';
+import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
+import { uploadStockItems } from './stock-items-bulk-import.resource';
+import ImportBulkStockItemsModal from './stock-items-bulk-import.modal';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
-}));
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUploadStockItems = jest.mocked(uploadStockItems);
 
 jest.mock('./stock-items-bulk-import.resource', () => ({
-  UploadStockItems: jest.fn(),
+  uploadStockItems: jest.fn(),
 }));
 
-describe('ImportDialogPopup', () => {
+describe('ImportBulkStockItemsModal', () => {
   const mockCloseModal = jest.fn();
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('renders with initial state and UI elements', () => {
-    render(<ImportDialogPopup closeModal={mockCloseModal} />);
+    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
 
-    expect(screen.getByText('Import Stock Items')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Select file' })).toBeInTheDocument();
-    expect(screen.getByText('Only .csv files at 2mb or less')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Upload StockItems' })).toBeInTheDocument();
+    expect(screen.getByText(/import stock items/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /select file/i })).toBeInTheDocument();
+    expect(screen.getByText(/only .csv files at 2mb or less/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /upload stock items/i })).toBeInTheDocument();
   });
 
   it('allows only CSV files', async () => {
-    render(<ImportDialogPopup closeModal={mockCloseModal} />);
+    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
 
-    const fileInput = screen.getByLabelText('Select file') as HTMLInputElement;
+    const fileInput = screen.getByLabelText(/select file/i) as HTMLInputElement;
     expect(fileInput.accept).toBe('.csv');
   });
 
   it('closes modal when cancel button is clicked', async () => {
-    render(<ImportDialogPopup closeModal={mockCloseModal} />);
-
-    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
-    await userEvent.click(cancelButton);
+    const user = userEvent.setup();
+    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
 
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
     expect(mockCloseModal).toHaveBeenCalledTimes(1);
   });
 
   it('does nothing when upload is clicked without a file', async () => {
-    render(<ImportDialogPopup closeModal={mockCloseModal} />);
+    const user = userEvent.setup();
+    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
 
-    const uploadButton = screen.getByRole('button', { name: 'Upload StockItems' });
-    await userEvent.click(uploadButton);
+    const uploadButton = screen.getByRole('button', { name: /upload stock items/i });
+    await user.click(uploadButton);
 
-    expect(UploadStockItems).not.toHaveBeenCalled();
-    expect(showSnackbar).not.toHaveBeenCalled();
+    expect(uploadStockItems).not.toHaveBeenCalled();
+    expect(mockShowSnackbar).not.toHaveBeenCalled();
     expect(mockCloseModal).not.toHaveBeenCalled();
   });
 
   it('uploads file successfully and shows success snackbar', async () => {
-    (UploadStockItems as jest.Mock).mockResolvedValue({});
-    render(<ImportDialogPopup closeModal={mockCloseModal} />);
+    const user = userEvent.setup();
+
+    mockUploadStockItems.mockResolvedValue({
+      data: {},
+      status: 200,
+      ok: true,
+    } as FetchResponse<unknown>);
+    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
 
     const validFile = new File(['test content'], 'valid.csv', { type: 'text/csv' });
     const fileInput = screen.getByLabelText('Select file') as HTMLInputElement;
     await userEvent.upload(fileInput, validFile);
 
-    const uploadButton = screen.getByRole('button', { name: 'Upload StockItems' });
-    await userEvent.click(uploadButton);
-
-    await waitFor(() => expect(UploadStockItems).toHaveBeenCalled());
-    await waitFor(() =>
-      expect(showSnackbar).toHaveBeenCalledWith(
-        expect.objectContaining({
-          kind: 'success',
-          title: 'Uploaded Order',
-        }),
-      ),
+    const uploadButton = screen.getByRole('button', { name: /upload stock items/i });
+    await user.click(uploadButton);
+
+    expect(uploadStockItems).toHaveBeenCalled();
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'success',
+        title: 'Stock items uploaded successfully',
+      }),
     );
-    await waitFor(() => expect(mockCloseModal).toHaveBeenCalledTimes(1));
+    expect(mockCloseModal).toHaveBeenCalledTimes(1);
   });
 
   it('shows error snackbar on upload failure', async () => {
-    (UploadStockItems as jest.Mock).mockRejectedValue(new Error('Upload failed'));
-    render(<ImportDialogPopup closeModal={mockCloseModal} />);
+    const user = userEvent.setup();
+
+    mockUploadStockItems.mockRejectedValue(new Error('Upload failed'));
+    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
 
     const validFile = new File(['test content'], 'valid.csv', { type: 'text/csv' });
-    const fileInput = screen.getByLabelText('Select file') as HTMLInputElement;
+    const fileInput = screen.getByLabelText(/select file/i) as HTMLInputElement;
     await userEvent.upload(fileInput, validFile);
 
-    const uploadButton = screen.getByRole('button', { name: 'Upload StockItems' });
-    await userEvent.click(uploadButton);
-
-    await waitFor(() => expect(UploadStockItems).toHaveBeenCalled());
-    await waitFor(() =>
-      expect(showSnackbar).toHaveBeenCalledWith(
-        expect.objectContaining({
-          kind: 'error',
-          title: 'An error occurred uploading stock items',
-        }),
-      ),
+    const uploadButton = screen.getByRole('button', { name: /upload stock items/i });
+    await user.click(uploadButton);
+
+    expect(uploadStockItems).toHaveBeenCalled();
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'error',
+        title: 'An error occurred uploading stock items',
+      }),
     );
-    await waitFor(() => expect(mockCloseModal).not.toHaveBeenCalled());
+    expect(mockCloseModal).not.toHaveBeenCalled();
   });
 });

package/src/stock-items/add-stock-item/add-stock-action-button.component.tsx

@@ -1,18 +1,18 @@
-import { Button } from '@carbon/react';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchAddOrStockItemWorkspace } from '../stock-item.utils';
+import { Button } from '@carbon/react';
+import { launchAddOrEditStockItemWorkspace } from '../stock-item.utils';
 
 const AddStockItemActionButton: React.FC = () => {
   const { t } = useTranslation();
 
-  const handleClick = useCallback(() => {
-    launchAddOrStockItemWorkspace(t);
+  const handleAddOrLaunchStockItemWorkspace = useCallback(() => {
+    launchAddOrEditStockItemWorkspace(t);
   }, [t]);
 
   return (
-    <Button onClick={handleClick} size="md" kind="primary">
-      {t('addNewStock', 'Add New')}
+    <Button onClick={handleAddOrLaunchStockItemWorkspace} size="md" kind="primary">
+      {t('addStockItem', 'Add stock item')}
     </Button>
   );
 };

package/src/stock-items/add-stock-item/add-stock-item.component.tsx

@@ -1,15 +1,15 @@
-import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
 import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
 import { type TabItem } from '../../core/components/tabs/types';
-import StockOperationStepper from '../../stock-operations/stock-operations-forms/stock-operation-stepper/stock-operation-stepper.component';
 import BatchInformation from './batch-information/batch-information.component';
 import PackagingUnits from './packaging-units/packaging-units.component';
-import StockQuantities from './quantities/quantities.component';
 import StockItemDetails from './stock-item-details/stock-item-details.component';
-import StockReferences from './stock-item-references/stock-item-references.component';
 import StockItemRules from './stock-item-rules/stock-item-rules.component';
+import StockOperationStepper from '../../stock-operations/stock-operations-forms/stock-operation-stepper/stock-operation-stepper.component';
+import StockQuantities from './quantities/quantities.component';
+import StockReferences from './stock-item-references/stock-item-references.component';
 import Transactions from './transactions/transactions.component';
 
 interface AddStockItemProps extends Partial<DefaultWorkspaceProps> {
@@ -20,9 +20,11 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({ stockItem, closeWorkspa
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState(0);
   const isEditing = Boolean(stockItem);
+
   const handleTabChange = (index: number) => {
     setSelectedTab(index);
   };
+
   const tabs: TabItem[] = [
     {
       name: t('stockItemDetails', 'Stock Item Details'),

package/src/stock-items/add-stock-item/add-stock-item.scss

@@ -11,6 +11,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -22,3 +23,7 @@
   justify-content: space-between;
   width: 100%;
 }
+
+.stack {
+  margin: layout.$spacing-05;
+}

package/src/stock-items/add-stock-item/add-stock-item.test.tsx

@@ -1,22 +1,8 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import AddEditStockItem from './add-stock-item.component';
+import { render, screen } from '@testing-library/react';
 import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-
-// Mock components
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key) => key,
-  }),
-}));
-jest.mock('@carbon/react', () => {
-  const originalModule = jest.requireActual('@carbon/react');
-  return {
-    ...originalModule,
-    useMatchMedia: jest.fn().mockReturnValue(false),
-  };
-});
+import AddEditStockItem from './add-stock-item.component';
 
 jest.mock('@carbon/react/icons', () => ({
   Save: () => <div>Save Icon</div>,
@@ -129,11 +115,11 @@ describe('AddEditStockItem', () => {
     const user = userEvent.setup();
     render(<AddEditStockItem stockItem={mockModel} />);
 
-    await user.click(screen.getByText('packagingUnits'));
+    await user.click(screen.getByText(/packaging units/i));
     expect(screen.getByTestId('packaging-units')).toBeInTheDocument();
     expect(screen.getByText('Packaging Units: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('transactions'));
+    await user.click(screen.getByText(/transactions/i));
     expect(screen.getByTestId('transactions')).toBeInTheDocument();
     expect(screen.getByText('Transactions: test-uuid-123')).toBeInTheDocument();
   });
@@ -142,12 +128,12 @@ describe('AddEditStockItem', () => {
     render(<AddEditStockItem />);
 
     const disabledTabs = [
-      'packagingUnits',
-      'transactions',
-      'batchInformation',
-      'quantities',
-      'stockRules',
-      'references',
+      /batch information/i,
+      /packaging units/i,
+      /quantities/i,
+      /references/i,
+      /rules/i,
+      /transactions/i,
     ];
     disabledTabs.forEach((tabName) => {
       const tab = screen.getByRole('button', { name: tabName });
@@ -159,12 +145,12 @@ describe('AddEditStockItem', () => {
     render(<AddEditStockItem stockItem={mockModel} />);
 
     const enabledTabs = [
-      'packagingUnits',
-      'transactions',
-      'batchInformation',
-      'quantities',
-      'stockRules',
-      'references',
+      /batch information/i,
+      /packaging units/i,
+      /quantities/i,
+      /references/i,
+      /rules/i,
+      /transactions/i,
     ];
     enabledTabs.forEach((tabName) => {
       const tab = screen.getByRole('button', { name: tabName });
@@ -178,22 +164,22 @@ describe('AddEditStockItem', () => {
 
     expect(screen.getByText('Stock Item Details: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('packagingUnits'));
+    await user.click(screen.getByText(/packaging units/i));
     expect(screen.getByText('Packaging Units: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('transactions'));
+    await user.click(screen.getByText(/transactions/i));
     expect(screen.getByText('Transactions: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('batchInformation'));
+    await user.click(screen.getByText(/batch information/i));
     expect(screen.getByText('Batch Information: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('quantities'));
+    await user.click(screen.getByText(/quantities/i));
     expect(screen.getByText('Quantities: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('stockRules'));
+    await user.click(screen.getByText(/rules/i));
     expect(screen.getByText('Rules: test-uuid-123')).toBeInTheDocument();
 
-    await user.click(screen.getByText('references'));
+    await user.click(screen.getByText(/references/i));
     expect(screen.getByText('References: test-uuid-123')).toBeInTheDocument();
   });
 
@@ -201,13 +187,12 @@ describe('AddEditStockItem', () => {
     render(<AddEditStockItem stockItem={mockModel} />);
 
     const tabNames = [
-      'stockItemDetails',
-      'packagingUnits',
-      'transactions',
-      'batchInformation',
-      'quantities',
-      'stockRules',
-      'references',
+      /batch information/i,
+      /packaging units/i,
+      /quantities/i,
+      /references/i,
+      /rules/i,
+      /transactions/i,
     ];
     tabNames.forEach((tabName) => {
       expect(screen.getByText(tabName)).toBeInTheDocument();

package/src/stock-items/add-stock-item/packaging-units/packaging-units-delete-modal.component.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
 import { Button, ModalHeader, ModalBody, ModalFooter, TextArea } from '@carbon/react';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
 import { deleteStockItemPackagingUnit } from '../../stock-items.resource';
 import { useStockItemPackageUnitsHook } from './packaging-units.resource';
-import { useTranslation } from 'react-i18next';
-import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
-
 import styles from '../packaging-units/packaging-units.scss';
 
 interface DeletePackagingUnitProps {

package/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx

@@ -1,3 +1,4 @@
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Button,
   DataTable,
@@ -12,19 +13,17 @@ import {
 } from '@carbon/react';
 import { Save } from '@carbon/react/icons';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
-import React, { useEffect, useMemo, useState } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { createStockItemPackagingUnit, updateStockItemPackagingUnit } from '../../stock-items.resource';
+import { handleMutate } from '../../../utils';
+import { type PackageUnitFormData, packageUnitSchema } from './validationSchema';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
+import { useStockItemPackageUnitsHook } from './packaging-units.resource';
 import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
-import { handleMutate } from '../../../utils';
-import { createStockItemPackagingUnit, updateStockItemPackagingUnit } from '../../stock-items.resource';
-import PackagingUnitsConceptSelector from '../packaging-units-concept-selector/packaging-units-concept-selector.component';
 import DeleteModalButton from './packaging-units-delete-modal-button.component';
-import { useStockItemPackageUnitsHook } from './packaging-units.resource';
-import { type PackageUnitFormData, packageUnitSchema } from './validationSchema';
-
+import PackagingUnitsConceptSelector from '../packaging-units-concept-selector/packaging-units-concept-selector.component';
 import styles from './packaging-units.scss';
 
 interface PackagingUnitsProps {
@@ -236,7 +235,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
       />
       <div className={styles.packageUnitsBtn}>
         <Button kind="secondary" onClick={handleCancelPackagingUnits}>
-          {t('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button
           name="save"
@@ -246,7 +245,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
           kind="primary"
           renderIcon={Save}
         >
-          {t('save', 'Save')}
+          {getCoreTranslation('save')}
         </Button>
       </div>
     </FormProvider>

package/src/stock-items/add-stock-item/packaging-units/packaging-units.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .packingTable {
   min-height: 15rem;
@@ -13,7 +13,7 @@
 }
 
 .packagingTableBody {
-  min-height: spacing.$spacing-13;
+  min-height: layout.$spacing-13;
 }
 
 .packagingTableContainer {

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx

@@ -1,26 +1,27 @@
-import { Button, ButtonSet, FormGroup, InlineLoading } from '@carbon/react';
+import React, { forwardRef, useMemo } from 'react';
+import classNames from 'classnames';
+import { Button, ButtonSet, FormGroup, InlineLoading, Stack } from '@carbon/react';
 import { Save } from '@carbon/react/icons';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
-import React, { forwardRef, useMemo } from 'react';
 import { type SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, restBaseUrl, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { createStockItem, updateStockItem } from '../../stock-items.resource';
+import { expirationOptions, radioOptions, StockItemType } from './stock-item-details.resource';
+import { handleMutate } from '../../../utils';
+import { launchAddOrEditStockItemWorkspace } from '../../stock-item.utils';
+import { stockItemDetailsSchema, type StockItemFormData } from '../../validationSchema';
 import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
+import ConceptsSelector from '../concepts-selector/concepts-selector.component';
 import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input/controlled-number-input.component';
 import ControlledRadioButtonGroup from '../../../core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component';
 import ControlledTextInput from '../../../core/components/carbon/controlled-text-input/controlled-text-input.component';
-import { handleMutate } from '../../../utils';
-import styles from '../../add-stock-item/add-stock-item.scss';
-import { launchAddOrStockItemWorkspace } from '../../stock-item.utils';
-import { createStockItem, updateStockItem } from '../../stock-items.resource';
-import { stockItemDetailsSchema, type StockItemFormData } from '../../validationSchema';
-import ConceptsSelector from '../concepts-selector/concepts-selector.component';
 import DispensingUnitSelector from '../dispensing-unit-selector/dispensing-unit-selector.component';
 import DrugSelector from '../drug-selector/drug-selector.component';
 import PreferredVendorSelector from '../preferred-vendor-selector/preferred-vendor-selector.component';
 import StockItemCategorySelector from '../stock-item-category-selector/stock-item-category-selector.component';
 import StockItemUnitsEdit from '../stock-item-units-edit/stock-item-units-edit.component';
-import { expirationOptions, radioOptions, StockItemType } from './stock-item-details.resource';
+import styles from '../../add-stock-item/add-stock-item.scss';
 
 interface StockItemDetailsProps {
   stockItem?: StockItemDTO;
@@ -31,6 +32,8 @@ interface StockItemDetailsProps {
 const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
   ({ stockItem, handleTabChange, onCloseWorkspace }) => {
     const { t } = useTranslation();
+    const isTablet = useLayoutType() === 'tablet';
+
     const { handleSubmit, control, formState, watch } = useForm<StockItemFormData>({
       defaultValues: stockItem ?? {},
       mode: 'all',
@@ -57,7 +60,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             // launch edit dialog
             const item = response.data;
             item.isDrug = !!item.drugUuid;
-            launchAddOrStockItemWorkspace(t, item);
+            launchAddOrEditStockItemWorkspace(t, item);
           }
         }
 
@@ -84,7 +87,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
 
     return (
       <form className={styles.formContainer}>
-        <div>
+        <Stack className={styles.stack} gap={5}>
           {!stockItem && (
             <FormGroup
               className="clear-margin-bottom"
@@ -227,20 +230,25 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           {observableIsDrug && stockItem && (
             <StockItemUnitsEdit control={control} formState={formState} stockItemUuid={stockItem?.uuid} />
           )}
-        </div>
-        <ButtonSet className={styles.buttonSet}>
+        </Stack>
+        <ButtonSet
+          className={classNames(styles.buttonSet, {
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}
+        >
           <Button kind="secondary" onClick={onCloseWorkspace} className={styles.button}>
-            {t('cancel', 'Cancel')}
+            {getCoreTranslation('cancel')}
           </Button>
           <Button
-            name="save"
-            type="button"
             className={styles.button}
-            onClick={handleSubmit(handleSave)}
             kind="primary"
+            name="save"
+            onClick={handleSubmit(handleSave)}
             renderIcon={Save}
+            type="button"
           >
-            {formState.isSubmitting ? <InlineLoading /> : t('save', 'Save')}
+            {formState.isSubmitting ? <InlineLoading /> : getCoreTranslation('save')}
           </Button>
         </ButtonSet>
       </form>

package/src/stock-items/add-stock-item/stock-item-references/stock-item-references.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .referencesTable {
   min-height: 15rem;
@@ -13,7 +13,7 @@
 }
 
 .referencesTableBody {
-  min-height: spacing.$spacing-13;
+  min-height: layout.$spacing-13;
 }
 
 .referencesTableContainer {

package/src/stock-items/add-stock-item/stock-item-rules/add-stock-rules.component.tsx

@@ -1,3 +1,6 @@
+import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   ButtonSet,
@@ -9,15 +12,13 @@ import {
   SelectItem,
   TextInput,
 } from '@carbon/react';
-import { type DefaultWorkspaceProps, showSnackbar } from '@openmrs/esm-framework';
-import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { type DefaultWorkspaceProps, getCoreTranslation, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { createOrUpdateStockRule } from './stock-rules.resource';
 import { ResourceRepresentation } from '../../../core/api/api';
+import { type StockItemInventoryFilter, useStockItemPackagingUOMs } from '../../stock-items.resource';
 import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
 import { useRoles, useStockTagLocations } from '../../../stock-lookups/stock-lookups.resource';
-import { type StockItemInventoryFilter, useStockItemPackagingUOMs } from '../../stock-items.resource';
 import styles from './add-stock-rules.scss';
-import { createOrUpdateStockRule } from './stock-rules.resource';
 
 interface AddStockRuleProps extends Partial<DefaultWorkspaceProps> {
   model?: StockRule;
@@ -26,7 +27,7 @@ interface AddStockRuleProps extends Partial<DefaultWorkspaceProps> {
 
 const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUuid, closeWorkspace }) => {
   const { t } = useTranslation();
-
+  const isTablet = useLayoutType() === 'tablet';
   const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>({
     startIndex: 0,
     v: ResourceRepresentation.Default,
@@ -315,12 +316,17 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
           notification will only be sent once per specified notification frequency.
         </div>
       </div>
-      <ButtonSet className={styles.buttonSet}>
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}
+      >
         <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
-          {t('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button type="submit" className={styles.button}>
-          {t('save', 'Save')}
+          {getCoreTranslation('save')}
         </Button>
       </ButtonSet>
     </Form>

package/src/stock-items/add-stock-item/stock-item-rules/add-stock-rules.scss

@@ -12,6 +12,7 @@
 }
 
 .button {
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

package/src/stock-items/add-stock-item/stock-item-rules/delete-stock-rule-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 '../../../root.scss';
 
 interface DeleteConfirmationProps {
@@ -30,7 +31,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')}