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

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 { 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';
+import ImportDialogPopup from './stock-items-bulk-import.component';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { UploadStockItems } from './stock-items-bulk-import.resource';
 
-const mockShowSnackbar = jest.mocked(showSnackbar);
-const mockUploadStockItems = jest.mocked(uploadStockItems);
+jest.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: jest.fn(),
+}));
 
 jest.mock('./stock-items-bulk-import.resource', () => ({
-  uploadStockItems: jest.fn(),
+  UploadStockItems: jest.fn(),
 }));
 
-describe('ImportBulkStockItemsModal', () => {
+describe('ImportDialogPopup', () => {
   const mockCloseModal = jest.fn();
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders with initial state and UI elements', () => {
-    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
+    render(<ImportDialogPopup closeModal={mockCloseModal} />);
 
-    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();
+    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();
   });
 
   it('allows only CSV files', async () => {
-    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
+    render(<ImportDialogPopup closeModal={mockCloseModal} />);
 
-    const fileInput = screen.getByLabelText(/select file/i) as HTMLInputElement;
+    const fileInput = screen.getByLabelText('Select file') as HTMLInputElement;
     expect(fileInput.accept).toBe('.csv');
   });
 
   it('closes modal when cancel button is clicked', async () => {
-    const user = userEvent.setup();
-    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
+    render(<ImportDialogPopup closeModal={mockCloseModal} />);
+
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    await userEvent.click(cancelButton);
 
-    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 () => {
-    const user = userEvent.setup();
-    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
+    render(<ImportDialogPopup closeModal={mockCloseModal} />);
 
-    const uploadButton = screen.getByRole('button', { name: /upload stock items/i });
-    await user.click(uploadButton);
+    const uploadButton = screen.getByRole('button', { name: 'Upload StockItems' });
+    await userEvent.click(uploadButton);
 
-    expect(uploadStockItems).not.toHaveBeenCalled();
-    expect(mockShowSnackbar).not.toHaveBeenCalled();
+    expect(UploadStockItems).not.toHaveBeenCalled();
+    expect(showSnackbar).not.toHaveBeenCalled();
     expect(mockCloseModal).not.toHaveBeenCalled();
   });
 
   it('uploads file successfully and shows success snackbar', async () => {
-    const user = userEvent.setup();
-
-    mockUploadStockItems.mockResolvedValue({
-      data: {},
-      status: 200,
-      ok: true,
-    } as FetchResponse<unknown>);
-    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
+    (UploadStockItems as jest.Mock).mockResolvedValue({});
+    render(<ImportDialogPopup 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 stock items/i });
-    await user.click(uploadButton);
-
-    expect(uploadStockItems).toHaveBeenCalled();
-    expect(mockShowSnackbar).toHaveBeenCalledWith(
-      expect.objectContaining({
-        kind: 'success',
-        title: 'Stock items uploaded successfully',
-      }),
+    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',
+        }),
+      ),
     );
-    expect(mockCloseModal).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(mockCloseModal).toHaveBeenCalledTimes(1));
   });
 
   it('shows error snackbar on upload failure', async () => {
-    const user = userEvent.setup();
-
-    mockUploadStockItems.mockRejectedValue(new Error('Upload failed'));
-    render(<ImportBulkStockItemsModal closeModal={mockCloseModal} />);
+    (UploadStockItems as jest.Mock).mockRejectedValue(new Error('Upload failed'));
+    render(<ImportDialogPopup closeModal={mockCloseModal} />);
 
     const validFile = new File(['test content'], 'valid.csv', { type: 'text/csv' });
-    const fileInput = screen.getByLabelText(/select file/i) as HTMLInputElement;
+    const fileInput = screen.getByLabelText('Select file') as HTMLInputElement;
     await userEvent.upload(fileInput, validFile);
 
-    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',
-      }),
+    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',
+        }),
+      ),
     );
-    expect(mockCloseModal).not.toHaveBeenCalled();
+    await waitFor(() => 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 { Button } from '@carbon/react';
-import { launchAddOrEditStockItemWorkspace } from '../stock-item.utils';
+import { launchAddOrStockItemWorkspace } from '../stock-item.utils';
 
 const AddStockItemActionButton: React.FC = () => {
   const { t } = useTranslation();
 
-  const handleAddOrLaunchStockItemWorkspace = useCallback(() => {
-    launchAddOrEditStockItemWorkspace(t);
+  const handleClick = useCallback(() => {
+    launchAddOrStockItemWorkspace(t);
   }, [t]);
 
   return (
-    <Button onClick={handleAddOrLaunchStockItemWorkspace} size="md" kind="primary">
-      {t('addStockItem', 'Add stock item')}
+    <Button onClick={handleClick} size="md" kind="primary">
+      {t('addNewStock', 'Add New')}
     </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 StockItemDetails from './stock-item-details/stock-item-details.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 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 Transactions from './transactions/transactions.component';
 
 interface AddStockItemProps extends Partial<DefaultWorkspaceProps> {
@@ -20,11 +20,9 @@ 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,7 +11,6 @@
 }
 
 .button {
-  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -23,7 +22,3 @@
   justify-content: space-between;
   width: 100%;
 }
-
-.stack {
-  margin: layout.$spacing-05;
-}

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

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

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
 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,4 +1,3 @@
-import React, { useEffect, useMemo, useState } from 'react';
 import {
   Button,
   DataTable,
@@ -13,17 +12,19 @@ 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 DeleteModalButton from './packaging-units-delete-modal-button.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 styles from './packaging-units.scss';
 
 interface PackagingUnitsProps {
@@ -235,7 +236,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
       />
       <div className={styles.packageUnitsBtn}>
         <Button kind="secondary" onClick={handleCancelPackagingUnits}>
-          {getCoreTranslation('cancel')}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button
           name="save"
@@ -245,7 +246,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
           kind="primary"
           renderIcon={Save}
         >
-          {getCoreTranslation('save')}
+          {t('save', 'Save')}
         </Button>
       </div>
     </FormProvider>

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

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

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

@@ -1,27 +1,26 @@
-import React, { forwardRef, useMemo } from 'react';
-import classNames from 'classnames';
-import { Button, ButtonSet, FormGroup, InlineLoading, Stack } from '@carbon/react';
+import { Button, ButtonSet, FormGroup, InlineLoading } 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 styles from '../../add-stock-item/add-stock-item.scss';
+import { expirationOptions, radioOptions, StockItemType } from './stock-item-details.resource';
 
 interface StockItemDetailsProps {
   stockItem?: StockItemDTO;
@@ -32,8 +31,6 @@ 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',
@@ -60,7 +57,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             // launch edit dialog
             const item = response.data;
             item.isDrug = !!item.drugUuid;
-            launchAddOrEditStockItemWorkspace(t, item);
+            launchAddOrStockItemWorkspace(t, item);
           }
         }
 
@@ -87,7 +84,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
 
     return (
       <form className={styles.formContainer}>
-        <Stack className={styles.stack} gap={5}>
+        <div>
           {!stockItem && (
             <FormGroup
               className="clear-margin-bottom"
@@ -230,25 +227,20 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           {observableIsDrug && stockItem && (
             <StockItemUnitsEdit control={control} formState={formState} stockItemUuid={stockItem?.uuid} />
           )}
-        </Stack>
-        <ButtonSet
-          className={classNames(styles.buttonSet, {
-            [styles.tablet]: isTablet,
-            [styles.desktop]: !isTablet,
-          })}
-        >
+        </div>
+        <ButtonSet className={styles.buttonSet}>
           <Button kind="secondary" onClick={onCloseWorkspace} className={styles.button}>
-            {getCoreTranslation('cancel')}
+            {t('cancel', 'Cancel')}
           </Button>
           <Button
-            className={styles.button}
-            kind="primary"
             name="save"
+            type="button"
+            className={styles.button}
             onClick={handleSubmit(handleSave)}
+            kind="primary"
             renderIcon={Save}
-            type="button"
           >
-            {formState.isSubmitting ? <InlineLoading /> : getCoreTranslation('save')}
+            {formState.isSubmitting ? <InlineLoading /> : t('save', 'Save')}
           </Button>
         </ButtonSet>
       </form>

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

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

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

@@ -1,6 +1,3 @@
-import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import {
   Button,
   ButtonSet,
@@ -12,13 +9,15 @@ import {
   SelectItem,
   TextInput,
 } from '@carbon/react';
-import { type DefaultWorkspaceProps, getCoreTranslation, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
-import { createOrUpdateStockRule } from './stock-rules.resource';
+import { type DefaultWorkspaceProps, showSnackbar } from '@openmrs/esm-framework';
+import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 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;
@@ -27,7 +26,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,
@@ -316,17 +315,12 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
           notification will only be sent once per specified notification frequency.
         </div>
       </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')}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button type="submit" className={styles.button}>
-          {getCoreTranslation('save')}
+          {t('save', 'Save')}
         </Button>
       </ButtonSet>
     </Form>

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

@@ -12,7 +12,6 @@
 }
 
 .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,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 '../../../root.scss';
 
 interface DeleteConfirmationProps {
@@ -31,7 +30,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')}