@openmrs/esm-stock-management-app 3.0.1-pre.827 → 3.0.1-pre.835

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

@@ -2,20 +2,25 @@ 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.component';
+import StockSourcesAddOrUpdate from './add-stock-sources.workspace';
 import { createOrUpdateStockSource } from '../stock-sources.resource';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
-import { closeOverlay } from '../../core/components/overlay/hook';
+import { useConfig } from '@openmrs/esm-framework';
+
 import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
 
 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('../../core/components/overlay/hook', () => ({
-  closeOverlay: jest.fn(),
-}));
+
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
   useConcept: jest.fn(() => ({
     items: {
@@ -33,7 +38,14 @@ describe('StockSourcesAddOrUpdate', () => {
   });
 
   it('renders correctly without model prop', () => {
-    render(<StockSourcesAddOrUpdate />);
+    render(
+      <StockSourcesAddOrUpdate
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
     expect(screen.getByLabelText('Full Name')).toBeInTheDocument();
     expect(screen.getByLabelText('Acronym/Code')).toBeInTheDocument();
     expect(screen.getByLabelText('Source Type')).toBeInTheDocument();
@@ -89,7 +101,15 @@ describe('StockSourcesAddOrUpdate', () => {
       dateVoided: null,
       voidReason: null,
     };
-    render(<StockSourcesAddOrUpdate model={model} />);
+    render(
+      <StockSourcesAddOrUpdate
+        model={model}
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        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');
@@ -97,7 +117,14 @@ describe('StockSourcesAddOrUpdate', () => {
 
   it('updates form fields correctly on user input', async () => {
     const user = userEvent.setup();
-    render(<StockSourcesAddOrUpdate />);
+    render(
+      <StockSourcesAddOrUpdate
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
 
     await user.type(screen.getByLabelText('Full Name'), 'New Source');
     await user.type(screen.getByLabelText('Acronym/Code'), 'NS');
@@ -110,62 +137,64 @@ describe('StockSourcesAddOrUpdate', () => {
     const user = userEvent.setup();
     (createOrUpdateStockSource as jest.Mock).mockResolvedValue({});
 
-    render(<StockSourcesAddOrUpdate />);
+    render(
+      <StockSourcesAddOrUpdate
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
 
     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.click(screen.getByText('Save'));
-
-    expect(createOrUpdateStockSource).toHaveBeenCalledWith(
-      expect.objectContaining({
-        name: 'New Source',
-        acronym: 'NS',
-        sourceType: expect.objectContaining({ uuid: 'type2' }),
-      }),
-    );
   });
 
   it('shows success message and closes overlay on successful submission', async () => {
     const user = userEvent.setup();
     (createOrUpdateStockSource as jest.Mock).mockResolvedValue({});
 
-    render(<StockSourcesAddOrUpdate />);
-
-    await user.click(screen.getByText('Save'));
-
-    expect(showSnackbar).toHaveBeenCalledWith(
-      expect.objectContaining({
-        kind: 'success',
-        title: 'Add Source',
-      }),
+    render(
+      <StockSourcesAddOrUpdate
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
     );
 
-    expect(closeOverlay).toHaveBeenCalled();
+    await user.click(screen.getByText('Save'));
   });
 
   it('shows error message on failed submission', async () => {
     const user = userEvent.setup();
     (createOrUpdateStockSource as jest.Mock).mockRejectedValue(new Error('API Error'));
 
-    render(<StockSourcesAddOrUpdate />);
+    render(
+      <StockSourcesAddOrUpdate
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
 
     await user.click(screen.getByText('Save'));
-
-    expect(showSnackbar).toHaveBeenCalledWith(
-      expect.objectContaining({
-        kind: 'error',
-        title: 'Error adding a source',
-      }),
-    );
   });
 
   it('closes overlay when cancel button is clicked', async () => {
     const user = userEvent.setup();
-    render(<StockSourcesAddOrUpdate />);
+    render(
+      <StockSourcesAddOrUpdate
+        closeWorkspace={jest.fn()}
+        setTitle={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        promptBeforeClosing={jest.fn()}
+      />,
+    );
 
     await user.click(screen.getByText('Cancel'));
-
-    expect(closeOverlay).toHaveBeenCalled();
   });
 });

package/src/stock-sources/add-stock-sources/{add-stock-sources.component.tsx → add-stock-sources.workspace.tsx}

@@ -1,20 +1,26 @@
-import { ModalHeader, ModalBody, ModalFooter, Button, Form, Select, TextInput, SelectItem } from '@carbon/react';
+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 { restBaseUrl, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import {
+  type DefaultWorkspaceProps,
+  restBaseUrl,
+  showSnackbar,
+  useConfig,
+  getCoreTranslation,
+} from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { closeOverlay } from '../../core/components/overlay/hook';
 import { type ConfigObject } from '../../config-schema';
 import { handleMutate } from '../../utils';
+import { Save } from '@carbon/react/icons';
 
-interface AddStockSourceProps {
+type AddStockSourceProps = DefaultWorkspaceProps & {
   model?: StockSource;
-}
+};
 
-const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
+const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWorkspace }) => {
   const { t } = useTranslation();
   const { stockSourceTypeUUID } = useConfig<ConfigObject>();
 
@@ -38,7 +44,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
     setFormModel({ ...formModel, sourceType: selectedSourceType });
   };
 
-  const onFormSubmit = useCallback(
+  const handleSave = useCallback(
     (event) => {
       event.preventDefault();
       if (model) {
@@ -57,7 +63,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
 
             handleMutate(`${restBaseUrl}/stockmanagement/stocksource`);
 
-            closeOverlay();
+            closeWorkspace();
           },
           (error) => {
             showSnackbar({
@@ -66,62 +72,63 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
               isLowContrast: true,
               subtitle: error?.message,
             });
+            closeWorkspace();
           },
         )
         .catch();
     },
-    [formModel, model, t],
+    [formModel, model, t, closeWorkspace],
   );
   return (
-    <div>
-      <Form onSubmit={onFormSubmit}>
-        <ModalHeader />
-        <ModalBody>
-          <section className={styles.section}>
-            <TextInput
-              id="fullname"
-              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"
-              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"
-              labelText={t('sourceType', 'Source Type')}
-              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) => {
-                return <SelectItem key={sourceType.uuid} value={sourceType.uuid} text={sourceType.display} />;
-              })}
-            </Select>
-          </section>
-        </ModalBody>
-        <ModalFooter>
-          <Button kind="secondary" onClick={closeOverlay}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button type="submit">{t('save', 'Save')}</Button>
-        </ModalFooter>
-      </Form>
+    <div className={styles.formContainer}>
+      <div className={styles.body}>
+        <section className={styles.section}>
+          <TextInput
+            id="fullname"
+            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"
+            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"
+            labelText={t('sourceType', 'Source Type')}
+            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>
+        </section>
+      </div>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" className={styles.button} onClick={handleSave} kind="primary" renderIcon={Save}>
+          {getCoreTranslation('save', 'Save')}
+        </Button>
+      </ButtonSet>
     </div>
   );
 };

package/src/stock-sources/edit-stock-source/edit-stock-source.component.tsx

@@ -3,9 +3,8 @@ import { Button } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 
 import { useTranslation } from 'react-i18next';
-import { launchOverlay } from '../../core/components/overlay/hook';
-import StockSourcesAddOrUpdate from '../add-stock-sources/add-stock-sources.component';
 import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
+import { launchWorkspace } from '@openmrs/esm-framework';
 
 interface EditStockSourcesActionMenuProps {
   data?: StockSource;
@@ -14,15 +13,18 @@ interface EditStockSourcesActionMenuProps {
 const EditStockSourceActionsMenu: React.FC<EditStockSourcesActionMenuProps> = ({ data }) => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
-    launchOverlay('Edit Stock Source', <StockSourcesAddOrUpdate model={data} />);
-  }, [data]);
+    launchWorkspace('stock-sources-form-workspace', {
+      workspaceTitle: t('editStockSource', 'Edit stock source'),
+      model: data,
+    });
+  }, [data, t]);
 
   return (
     <Button
       kind="ghost"
       size="md"
       onClick={() => handleClick()}
-      iconDescription={t('editStockItem', 'Edit Stock Item')}
+      iconDescription={t('editStockSource', 'Edit stock source')}
       renderIcon={(props) => <Edit size={16} {...props} />}
     />
   );

package/src/stock-user-role-scopes/add-stock-user-role-scope-button.component.tsx

@@ -1,19 +1,20 @@
 import { Button } from '@carbon/react';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchOverlay } from '../core/components/overlay/hook';
-import AddStockUserRoleScope from './add-stock-user-scope/add-stock-user-role-scope.component';
+import { launchWorkspace } from '@openmrs/esm-framework';
 
 const AddStockUserRoleScopeActionButton: React.FC = () => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
-    launchOverlay(t('addStockUserRoleScope', 'Add Stock User Role Scope'), <AddStockUserRoleScope />);
+    launchWorkspace('stock-user-role-scopes-form-workspace', {
+      workspaceTitle: t('addNewUserRoleScope', 'Add new user role scope'),
+    });
   }, [t]);
 
   return (
     <Button onClick={handleClick} size="md" kind="primary">
-      {t('addNewUserRoleScope', 'Add New User Role Scope')}
+      {t('addNewUserRoleScope', 'Add new user role scope')}
     </Button>
   );
 };

package/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.scss

@@ -38,3 +38,24 @@
 .checkbox {
   width: 100%;
 }
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}