@openmrs/esm-stock-management-app 3.1.1-pre.1179 → 3.1.1-pre.1186

package/src/stock-reports/generate-report/create-stock-report.workspace.tsx

@@ -8,14 +8,14 @@ import {
   ComboBox,
   DatePicker,
   DatePickerInput,
+  Form,
+  FormGroup,
   InlineLoading,
   NumberInput,
   RadioButton,
   RadioButtonGroup,
   Select,
   SelectItem,
-  Form,
-  FormGroup,
   Stack,
 } from '@carbon/react';
 import {
@@ -112,7 +112,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
   useEffect(() => {
     let hasResetParameters = false;
     if (selectedReportName) {
-      const reportType = (reportTypes as any)?.find((p) => p.name === selectedReportName);
+      const reportType = Array.isArray(reportTypes)
+        ? reportTypes.find((p) => p.name === selectedReportName)
+        : undefined;
       if (reportType) {
         setDisplayDate(reportType.parameters?.some((p) => p === ReportParameter.Date));
         setDisplayStartDate(reportType.parameters?.some((p) => p === ReportParameter.StartDate));
@@ -159,7 +161,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
         display: 'All Categories',
         name: 'All Categories',
         uuid: '',
-      } as any as Concept,
+      } as unknown as Concept,
       ...((items && items?.answers?.length > 0 ? items?.answers : items?.setMembers) ?? []),
     ];
   }, [items]);
@@ -178,9 +180,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
   }
 
   const handleSave = async (report: StockReportSchema) => {
-    const reportSystemName = (reportTypes as any).find(
-      (reportType) => reportType.name === report.reportName,
-    )?.systemName;
+    const reportSystemName = Array.isArray(reportTypes)
+      ? reportTypes.find((reportType) => reportType.name === report.reportName)?.systemName
+      : undefined;
 
     let hideSplash = true;
     try {
@@ -331,14 +333,14 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
           if (response.status === 201) {
             showSnackbar({
               title: t('batchJob', 'Batch Job'),
-              subtitle: t('BatchJobSuccess', 'Batch job created successfully'),
+              subtitle: t('batchJobSuccess', 'Batch job created successfully'),
               kind: 'success',
             });
             handleMutate(`${restBaseUrl}/stockmanagement/batchjob?batchJobType=Report&v=default`);
             closeWorkspace();
           } else {
             showSnackbar({
-              title: t('BatchJobErrorTitle', 'Batch job'),
+              title: t('batchJobErrorTitle', 'Batch job'),
               subtitle: t('batchJobErrorMessage', 'Error creating batch job'),
               kind: 'error',
             });
@@ -347,7 +349,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
         })
         .catch(() => {
           showSnackbar({
-            title: t('BatchJobErrorTitle', 'Batch job'),
+            title: t('batchJobErrorTitle', 'Batch job'),
             subtitle: t('batchJobErrorMessage', 'Error creating batch job'),
             kind: 'error',
           });
@@ -360,6 +362,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
       }
     }
   };
+
   const getReportParameter = (
     name: string,
     value: string,
@@ -381,8 +384,8 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               render={({ field: { onChange } }) => (
                 <ComboBox
                   id="report"
-                  labelText={t('reportName', 'Report name')}
-                  items={reportTypes}
+                  titleText={t('reportName', 'Report name')}
+                  items={Array.isArray(reportTypes) ? reportTypes : [reportTypes]}
                   itemToString={(item) => `${item?.name ?? item?.name ?? ''}`}
                   placeholder={t('filter', 'Filter...')}
                   onChange={({ selectedItem }) => {
@@ -405,7 +408,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
                   <ComboBox
                     id="stockReportItem"
                     size="md"
-                    labelText={t('stockItemCategory', 'Stock Item Category')}
+                    titleText={t('stockItemCategory', 'Stock Item Category')}
                     items={stockItemCategories}
                     onChange={({ selectedItem }) => {
                       onChange(selectedItem.uuid);
@@ -433,11 +436,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               >
                 <DatePickerInput
                   id="startDate"
-                  name="startDate"
                   placeholder={DATE_PICKER_FORMAT}
-                  labelText={t('startDate', 'Start Date')}
-                  defaultValue=""
-                  invalid={errors?.startDate?.message}
+                  labelText={t('startDate', 'Start date')}
+                  invalid={!!errors?.startDate?.message}
                   invalidText={errors?.startDate?.message}
                 />
               </DatePicker>
@@ -459,11 +460,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               >
                 <DatePickerInput
                   id="endDate"
-                  name="endDate"
                   placeholder={DATE_PICKER_FORMAT}
-                  labelText={t('endDate', 'End Date')}
-                  defaultValue=""
-                  invalid={errors?.endDate?.message}
+                  labelText={t('endDate', 'End date')}
+                  invalid={!!errors?.endDate?.message}
                   invalidText={errors?.endDate?.message}
                 />
               </DatePicker>
@@ -474,15 +473,15 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
           <Select
             id="inventoryGroupBy"
             defaultValue={model?.inventoryGroupBy}
-            invalid={errors?.inventoryGroupBy?.message}
+            invalid={!!errors?.inventoryGroupBy?.message}
             invalidText={errors?.inventoryGroupBy?.message}
             labelText={t('inventoryBy', 'Inventory by')}
             onChange={(e) => setValue('inventoryGroupBy', e.target.value)}
           >
-            <SelectItem value="" text={t('SelectOption', 'Select an option')} />
+            <SelectItem value="" text={t('selectOption', 'Select an option')} />
             <SelectItem value="StockItemOnly" text={t('stockItem', 'Stock Item')} />
-            <SelectItem value="LocationStockItem" text={t('locationAndStockItem', 'Location and Stock Item')} />
-            <SelectItem value="LocationStockItemBatchNo" text={t('locationAndBatchno', 'Location and Batch')} />
+            <SelectItem value="LocationStockItem" text={t('locationAndStockItem', 'Location and stock item')} />
+            <SelectItem value="LocationStockItemBatchNo" text={t('locationAndBatchNo', 'Location and batch')} />
           </Select>
         )}
         {displayLocation && (
@@ -497,7 +496,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               setValue('location', selectedLocation?.name || '');
             }}
             defaultValue=""
-            invalid={errors?.location?.message}
+            invalid={!!errors?.location?.message}
             invalidText={errors?.location?.message}
           >
             <SelectItem disabled hidden value="" text={t('chooseALocation', 'Choose a location')} />
@@ -514,7 +513,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               <Checkbox
                 id="childLocations"
                 onChange={onChange}
-                value={value}
+                checked={value}
                 labelText={t('includeChildLocations', 'Include Child Locations')}
               />
             )}
@@ -526,7 +525,7 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
             name="mostLeastMoving"
             render={({ field: { onChange, value } }) => (
               <RadioButtonGroup name="mostLeastMoving" legendText={t('rank', 'Rank')} onChange={onChange} value={value}>
-                <RadioButton value="MostMoving" id="mostLeastMovingMost" labelText={t('mostMoving', 'Most Moving')} />
+                <RadioButton value="MostMoving" id="mostLeastMovingMost" labelText={t('mostMoving', 'Most moving')} />
                 <RadioButton
                   value="LeastMoving"
                   id="mostLeastMovingLeast"
@@ -547,9 +546,8 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
                 disableWheel
                 hideSteppers
                 value={value}
-                onchange={onChange}
+                onChange={onChange}
                 label={t('limit', 'Limit')}
-                defaultValue={20}
               />
             )}
           />
@@ -633,11 +631,9 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
               >
                 <DatePickerInput
                   id="date"
-                  name="date"
                   placeholder={DATE_PICKER_FORMAT}
                   labelText={t('date', 'Date')}
-                  defaultValue=""
-                  invalid={errors?.date?.message}
+                  invalid={!!errors?.date?.message}
                   invalidText={errors?.date?.message}
                 />
               </DatePicker>
@@ -652,10 +648,10 @@ const CreateReport: React.FC<CreateReportProps> = ({ model, closeWorkspace }) =>
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
-        <Button type="submit" className={styles.button} onClick={handleSave}>
+        <Button type="submit" className={styles.button}>
           {getCoreTranslation('save')}
         </Button>
       </ButtonSet>

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

@@ -165,7 +165,7 @@ const StockReports: React.FC = () => {
               type="button"
               size="sm"
               className="submitButton clear-padding-margin"
-              iconDescription={'Edit'}
+              iconDescription={t('edit', 'Edit')}
               kind="ghost"
               renderIcon={View}
               // onClick={(e) => onViewItem(batchJob.uuid, e)}
@@ -194,7 +194,7 @@ const StockReports: React.FC = () => {
         </div>
       ),
     }));
-  }, [reports, onDownloadReportClick]);
+  }, [reports, onDownloadReportClick, t]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
@@ -203,12 +203,8 @@ const StockReports: React.FC = () => {
   return (
     <div className={styles.container}>
       <h2 className={styles.tableHeader}>{t('stockReportsTableHeader', 'List of reports requested by users.')}</h2>
-      <DataTable
-        rows={tableRows}
-        headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+      <DataTable rows={tableRows} headers={tableHeaders} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -288,7 +284,7 @@ const StockReports: React.FC = () => {
             ) : null}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       <Pagination
         page={currentPage}
         pageSize={currentPageSize}

package/src/stock-reports/stock-reports.resource.ts

@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 export function useReportTypes() {
   const apiUrl = `${restBaseUrl}/stockmanagement/report?v=default`;
-  const { data, error, isLoading } = useSWR<{ data: { results: ReportType } }, Error>(apiUrl, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: { results: ReportType[] } }, Error>(apiUrl, openmrsFetch);
   return {
     reportTypes: data?.data?.results ?? [],
     isLoading,

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

@@ -1,15 +1,15 @@
-import { Button, Form, Select, TextInput, SelectItem, ButtonSet, FormGroup, Stack } from '@carbon/react';
 import React, { type ChangeEvent, useCallback, useState } from 'react';
 import classNames from 'classnames';
+import { Button, Form, Select, TextInput, SelectItem, ButtonSet, FormGroup, Stack } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { Save } from '@carbon/react/icons';
 import {
   getCoreTranslation,
   restBaseUrl,
   showSnackbar,
-  type DefaultWorkspaceProps,
   useConfig,
   useLayoutType,
+  type DefaultWorkspaceProps,
 } from '@openmrs/esm-framework';
 import { useConcept } from '../../stock-lookups/stock-lookups.resource';
 import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
@@ -62,8 +62,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
               isLowContrast: true,
               title: t('addedSource', 'Add Source'),
               kind: 'success',
-              subtitle: t('stockSourceAddedSuccessfully', 'Stock Source Added Successfully'),
-              timeoutInMs: 5000,
+              subtitle: t('stockSourceAddedSuccessfully', 'Stock source added successfully'),
             });
 
             handleMutate(`${restBaseUrl}/stockmanagement/stocksource`);
@@ -84,6 +83,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
     },
     [formModel, model, t, closeWorkspace],
   );
+
   return (
     <Form className={styles.container}>
       <Stack className={styles.form} gap={5}>
@@ -112,7 +112,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
         <Select
           name="sourceType"
           className="select-field"
-          labelText={t('sourceType', 'Source Type')}
+          labelText={t('sourceType', 'Source type')}
           id="sourceType"
           value={formModel?.sourceType ? formModel.sourceType.uuid : ''}
           onChange={onSourceTypeChange}
@@ -129,7 +129,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
         <Button type="submit" className={styles.button} onClick={handleSave} kind="primary" renderIcon={Save}>

package/src/stock-sources/stock-sources-items-table.component.tsx

@@ -21,11 +21,12 @@ 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 { type CustomTableHeader } from '../core/components/table/types';
 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 useStockSourcesPage from './stock-sources-items-table.resource';
 import styles from './stock-sources.scss';
 
 const StockSourcesItems: React.FC = () => {
@@ -83,12 +84,8 @@ const StockSourcesItems: React.FC = () => {
       <h2 className={styles.tableHeader}>
         {t('stockSourcesTableHeader', 'List of partners who provide stock to the facility.')}
       </h2>
-      <DataTable
-        rows={filteredTableRows}
-        headers={tableHeaders}
-        isSortable
-        useZebraStyles
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+      <DataTable rows={filteredTableRows} headers={tableHeaders} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -125,12 +122,19 @@ const StockSourcesItems: React.FC = () => {
                         <TableHeader
                           {...getHeaderProps({
                             header,
-                            isSortable: header.isSortable,
+                            isSortable: (header as CustomTableHeader).isSortable,
                           })}
                           className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
                           key={`${header.key}`}
                         >
-                          {header.header?.content ?? header.header}
+                          {(() => {
+                            const customHeader = header as CustomTableHeader;
+                            return typeof customHeader.header === 'object' &&
+                              customHeader.header !== null &&
+                              'content' in customHeader.header
+                              ? (customHeader.header.content as React.ReactNode)
+                              : (customHeader.header as React.ReactNode);
+                          })()}
                         </TableHeader>
                       ),
                   )}
@@ -164,7 +168,7 @@ const StockSourcesItems: React.FC = () => {
             ) : null}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       <Pagination
         page={currentPage}
         pageSize={currentPageSize}

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

@@ -42,7 +42,7 @@ import {
   DATE_PICKER_CONTROL_FORMAT,
   DATE_PICKER_FORMAT,
   formatForDatePicker,
-  INVENTORY_ADMNISTRATOR_ROLE_UUID,
+  INVENTORY_ADMINISTRATOR_ROLE_UUID,
   INVENTORY_CLERK_ROLE_UUID,
   INVENTORY_DISPENSING_ROLE_UUID,
   INVENTORY_MANAGER_ROLE_UUID,
@@ -124,6 +124,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       setFilteredItems(filtered);
     }
   };
+
   useEffect(() => {
     if (model?.userUuid) {
       setSelectedUserUuid(model.userUuid);
@@ -133,6 +134,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
   const handleSearchQueryChange = (query: string) => {
     filterItems(query);
   };
+
   const onStockOperationTypeChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const operationType = formModel?.operationTypes?.find((x) => x.operationTypeUuid === event?.target?.value);
     if (operationType) {
@@ -187,7 +189,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       INVENTORY_MANAGER_ROLE_UUID,
       INVENTORY_DISPENSING_ROLE_UUID,
       INVENTORY_REPORTING_ROLE_UUID,
-      INVENTORY_ADMNISTRATOR_ROLE_UUID,
+      INVENTORY_ADMINISTRATOR_ROLE_UUID,
     ];
 
     const filteredStockRoles = data.selectedItem?.roles
@@ -226,7 +228,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           isLowContrast: true,
           title: t('addUserRole', 'Add User role'),
           kind: 'success',
-          subtitle: t('successfullysaved', 'You have successfully saved user role scope'),
+          subtitle: t('successfullySaved', 'You have successfully saved user role scope'),
         });
         closeWorkspace();
       },
@@ -242,32 +244,36 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       },
     );
   };
+
   if (isLoading || loadingRoles || loadingUsers) {
     return (
       <InlineLoading status="active" iconDescription="Loading" description={t('loadingData', 'Loading data...')} />
     );
   }
+
   return (
     <Form className={styles.container}>
       <Stack className={styles.form} gap={5}>
         <div>
           {users?.results?.length > 0 && (
-            <>
-              <FormGroup legendText={t('user', 'User')}>
-                <ComboBox
-                  id="userName"
-                  initialSelectedItem={usersResults.find((user) => user.uuid === model?.userUuid) ?? null}
-                  items={filteredItems.length ? filteredItems : usersResults}
-                  itemToString={(item) => `${item?.person?.display ?? item?.display ?? ''}`}
-                  labelText={t('user', 'User')}
-                  onChange={onUserChanged}
-                  onInputChange={handleSearchQueryChange}
-                  placeholder="Filter..."
-                  shouldFilterItem={() => true}
-                  size="md"
-                />
-              </FormGroup>
-            </>
+            <FormGroup legendText={t('user', 'User')}>
+              <ComboBox
+                id="userName"
+                initialSelectedItem={usersResults.find((user) => user.uuid === model?.userUuid) ?? null}
+                items={filteredItems.length ? filteredItems : usersResults}
+                itemToString={(item) => {
+                  if (!item || typeof item !== 'object') return '';
+                  const itemWithPerson = item as { person?: { display?: string }; display?: string };
+                  return `${itemWithPerson?.person?.display ?? itemWithPerson?.display ?? ''}`;
+                }}
+                titleText={t('user', 'User')}
+                onChange={onUserChanged}
+                onInputChange={handleSearchQueryChange}
+                placeholder={t('filterUsers', 'Filter users')}
+                shouldFilterItem={() => true}
+                size="md"
+              />
+            </FormGroup>
           )}
         </div>
         <Select
@@ -286,13 +292,13 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             })
           )}
         </Select>
-        <CheckboxGroup className={styles.checkboxGrid}>
+        <CheckboxGroup className={styles.checkboxGrid} legendText="">
           <Checkbox
             checked={formModel?.enabled}
             id="chk-userEnabled"
             labelText={t('enabled', 'Enabled')}
             onChange={onEnabledChanged}
-            value={model?.enabled}
+            value={model?.enabled ? 'true' : 'false'}
           />
           <Checkbox
             checked={formModel?.permanent}
@@ -300,35 +306,29 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             labelText={t('permanent', 'Permanent')}
             name="isPermanent"
             onChange={onPermanentChanged}
-            value={model?.permanent}
+            value={model?.permanent ? 'true' : 'false'}
           />
 
           {!formModel?.permanent && (
-            <>
-              <DatePicker
-                dateFormat={DATE_PICKER_CONTROL_FORMAT}
-                datePickerType="range"
-                light
-                locale="en"
-                minDate={formatForDatePicker(MinDate)}
-                onChange={onActiveDatesChange}
-              >
-                <DatePickerInput
-                  id="date-picker-input-id-start"
-                  labelText={t('activeFrom', 'Active From')}
-                  name="activeFrom"
-                  placeholder={DATE_PICKER_FORMAT}
-                  value={formatForDatePicker(formModel?.activeFrom)}
-                />
-                <DatePickerInput
-                  id="date-picker-input-id-finish"
-                  labelText={t('activeTo', 'Active To')}
-                  name="activeTo"
-                  placeholder={DATE_PICKER_FORMAT}
-                  value={formatForDatePicker(formModel?.activeTo)}
-                />
-              </DatePicker>
-            </>
+            <DatePicker
+              dateFormat={DATE_PICKER_CONTROL_FORMAT}
+              datePickerType="range"
+              light
+              locale="en"
+              minDate={formatForDatePicker(MinDate)}
+              onChange={onActiveDatesChange}
+            >
+              <DatePickerInput
+                id="date-picker-input-id-start"
+                labelText={t('activeFrom', 'Active From')}
+                placeholder={DATE_PICKER_FORMAT}
+              />
+              <DatePickerInput
+                id="date-picker-input-id-finish"
+                labelText={t('activeTo', 'Active To')}
+                placeholder={DATE_PICKER_FORMAT}
+              />
+            </DatePicker>
           )}
         </CheckboxGroup>
         <FormGroup legendText={t('stockOperations', 'Stock operations')}>
@@ -336,7 +336,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             {t('roleDescription', 'The role will be applicable to only selected stock operations.')}
           </span>
         </FormGroup>
-        <CheckboxGroup className={styles.checkboxGrid}>
+        <CheckboxGroup className={styles.checkboxGrid} legendText="">
           {stockOperations?.length > 0 &&
             stockOperations.map((type) => {
               return (
@@ -358,7 +358,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             {t('toggleMessage', 'Use the toggle to apply this scope to the locations under the selected location.')}
           </span>
         </FormGroup>
-        <CheckboxGroup className={styles.checkboxGrid}>
+        <CheckboxGroup className={styles.checkboxGrid} legendText="">
           {stockLocations?.length > 0 &&
             stockLocations.map((type) => {
               const checkedLocation = findCheckedLocation(type);
@@ -386,9 +386,8 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
                       hideLabel
                       id={`tg-loc-child-${type.id}`}
                       key={`tg-loc-child-key-${type.id}`}
-                      onToggleClick={getToggledValue(type.id)}
+                      toggled={getToggledValue(type.id)}
                       size="sm"
-                      value={type.id}
                     />
                   )}
                 </div>
@@ -402,10 +401,10 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
-        <Button type="submit" className={styles.button} onClick={addStockUserRole} renderIcon={Save}>
+        <Button type="submit" className={styles.button} renderIcon={Save}>
           {getCoreTranslation('save')}
         </Button>
       </ButtonSet>

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

@@ -29,7 +29,7 @@ const StockUserScopeDeleteActionMenu: React.FC<StockUserScopDeleteActionMenuProp
               setDeletingUserScope(false);
               showSnackbar({
                 isLowContrast: true,
-                title: t('deletingstockUserScope', 'Delete Stock User Scope'),
+                title: t('deletingStockUserScope', 'Delete Stock User Scope'),
                 kind: 'success',
                 subtitle: t('stockUserScopeDeletedSuccessfully', 'Stock User Scope Deleted Successfully'),
               });

package/src/stock-user-role-scopes/delete-stock-user-scope.modal.tsx

@@ -22,7 +22,10 @@ const DeleteStockUserScopeModal: React.FC<DeleteStockUserScopeModalProps> = ({ c
       </ModalHeader>
       <ModalBody>
         <p className={styles.bodyLong01}>
-          {t('deleteConfirmationText', "Are you sure you want to delete this User Scope? This action can't be undone.")}
+          {t(
+            'deleteUserScopeConfirmation',
+            "Are you sure you want to delete this User Scope? This action can't be undone.",
+          )}
         </p>
       </ModalBody>
       <ModalFooter>