@kenyaemr/esm-admin-app 5.4.3 → 5.4.4-pre.100

package/src/components/locations/tables/locations-table.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -18,7 +18,7 @@ import {
   Tag,
 } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
-import { WorkspaceContainer, isDesktop as desktopLayout, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import { launchWorkspace2, useLayoutType } from '@openmrs/esm-framework';
 import styles from './locations-table.scss';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
 import { useFacilitiesTagged } from './locations-table.resource';
@@ -28,23 +28,26 @@ const LocationsTable: React.FC = () => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
-  const isDesktop = desktopLayout(layout);
   const [pageSize, setPageSize] = useState(10);
   const [searchTerm, setSearchTerm] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
 
-  const { locationTagList, isLoading: tagsLoading, error: tagsError } = useLocationTags();
+  const { locationTagList, isLoading: tagsLoading } = useLocationTags();
   const { facilityList, isLoading: taggedLoading } = useFacilitiesTagged({ results: locationTagList });
 
   const handleAddLocationWorkspace = () => {
-    launchWorkspace('add-location-workspace', {
-      workspaceTitle: t('addLocation', 'Add Location'),
+    launchWorkspace2('add-location-workspace', {
+      workspaceProps: {
+        workspaceTitle: t('addLocation', 'Add Location'),
+      },
     });
   };
 
   const handleSearchLocationWorkspace = () => {
-    launchWorkspace('search-location-workspace', {
-      workspaceTitle: t('tagLocation', 'Tag Location'),
+    launchWorkspace2('search-location-workspace', {
+      workspaceProps: {
+        workspaceTitle: t('tagLocation', 'Tag Location'),
+      },
     });
   };
 
@@ -117,126 +120,119 @@ const LocationsTable: React.FC = () => {
 
   if (tagsLoading || (taggedLoading && !facilityList.length)) {
     return (
-      <>
-        <div className={styles.widgetCard}>
-          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
-        </div>
-      </>
+      <div className={styles.widgetCard}>
+        <DataTableSkeleton role="progressbar" zebra />
+      </div>
     );
   }
 
   return (
-    <>
-      <div className={styles.widgetCard}>
-        <CardHeader title={t('locations', 'Locations')}>
-          <span className={styles.backgroundDataFetchingIndicator}>
-            <span>{tagsLoading ? <InlineLoading /> : null}</span>
-          </span>
-          <div className={styles.headerActions}>
-            <>
-              <div className={styles.filterContainer}>
-                <Search
-                  onChange={(e) => {
-                    setSearchTerm(e.target.value);
-                    setCurrentPage(1);
-                  }}
-                  placeholder={t('search', 'Search location')}
-                  value={searchTerm}
-                  labelText={t('search', 'Search location')}
-                />
-              </div>
-              <Button
-                kind="ghost"
-                renderIcon={(props) => <Add size={16} {...props} />}
-                onClick={handleAddLocationWorkspace}>
-                {t('addLocation', 'Add Location')}
-              </Button>
-              <Button
-                kind="ghost"
-                renderIcon={(props) => <Add size={16} {...props} />}
-                onClick={handleSearchLocationWorkspace}>
-                {t('tagLocation', 'Tag Location')}
-              </Button>
-            </>
+    <div className={styles.widgetCard}>
+      <CardHeader title={t('locations', 'Locations')}>
+        <span className={styles.backgroundDataFetchingIndicator}>
+          <span>{tagsLoading ? <InlineLoading /> : null}</span>
+        </span>
+        <div className={styles.headerActions}>
+          <div className={styles.filterContainer}>
+            <Search
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1);
+              }}
+              placeholder={t('search', 'Search location')}
+              value={searchTerm}
+              labelText={t('search', 'Search location')}
+            />
           </div>
-        </CardHeader>
-
-        <DataTable rows={paginatedRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
-          {({ rows, headers, getTableProps }) => {
-            return (
-              <TableContainer>
-                <Table {...getTableProps()}>
-                  <TableHead>
-                    <TableRow>
-                      {headers.map((header) => (
-                        <TableHeader key={header.key}>{header.header}</TableHeader>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <Add size={16} {...props} />}
+            onClick={handleAddLocationWorkspace}>
+            {t('addLocation', 'Add Location')}
+          </Button>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <Add size={16} {...props} />}
+            onClick={handleSearchLocationWorkspace}>
+            {t('tagLocation', 'Tag Location')}
+          </Button>
+        </div>
+      </CardHeader>
+
+      <DataTable rows={paginatedRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+        {({ rows, headers, getTableProps }) => {
+          return (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader key={header.key}>{header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.id.includes('tags') && cell.value !== 'No tags' ? (
+                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+                              {cell.value.split(', ').map((tag, index) => (
+                                <Tag key={index} type="blue" size="sm">
+                                  {tag}
+                                </Tag>
+                              ))}
+                            </div>
+                          ) : (
+                            cell.value
+                          )}
+                        </TableCell>
                       ))}
                     </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <TableRow key={row.id}>
-                        {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>
-                            {cell.id.includes('tags') && cell.value !== 'No tags' ? (
-                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-                                {cell.value.split(', ').map((tag, index) => (
-                                  <Tag key={index} type="blue" size="sm">
-                                    {tag}
-                                  </Tag>
-                                ))}
-                              </div>
-                            ) : (
-                              cell.value
-                            )}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-                {rows.length === 0 ? (
-                  <div className={styles.tileContainer}>
-                    <Tile className={styles.tile}>
-                      <div className={styles.tileContent}>
-                        <p className={styles.content}>
-                          {searchTerm
-                            ? t('noSearchResults', `No results found for "${searchTerm}"`)
-                            : t('noData', 'No data to display')}
-                        </p>
-                        <p className={styles.helper}>
-                          {searchTerm
-                            ? t('tryDifferentSearch', 'Try a different search term')
-                            : t('checkFilters', 'Check the filters above')}
-                        </p>
-                      </div>
-                    </Tile>
-                  </div>
-                ) : null}
-                <Pagination
-                  backwardText="Previous page"
-                  forwardText="Next page"
-                  page={currentPage}
-                  pageSize={pageSize}
-                  pageSizes={[10, 20, 30, 40, 50]}
-                  totalItems={filteredRows.length}
-                  onChange={({ pageSize: newPageSize, page }) => {
-                    if (newPageSize !== pageSize) {
-                      setPageSize(newPageSize);
-                      setCurrentPage(1);
-                    }
-                    if (page !== currentPage) {
-                      setCurrentPage(page);
-                    }
-                  }}
-                />
-              </TableContainer>
-            );
-          }}
-        </DataTable>
-      </div>
-      <WorkspaceContainer contextKey="locations" />
-    </>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {searchTerm
+                          ? t('noSearchResults', `No results found for "${searchTerm}"`)
+                          : t('noData', 'No data to display')}
+                      </p>
+                      <p className={styles.helper}>
+                        {searchTerm
+                          ? t('tryDifferentSearch', 'Try a different search term')
+                          : t('checkFilters', 'Check the filters above')}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                backwardText="Previous page"
+                forwardText="Next page"
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={filteredRows.length}
+                onChange={({ pageSize: newPageSize, page }) => {
+                  if (newPageSize !== pageSize) {
+                    setPageSize(newPageSize);
+                    setCurrentPage(1);
+                  }
+                  if (page !== currentPage) {
+                    setCurrentPage(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          );
+        }}
+      </DataTable>
+    </div>
   );
 };
 

package/src/components/users/manage-users/manage-user-role-scope/user-role-scope-workspace/user-role-scope.workspace.tsx

@@ -6,6 +6,8 @@ import {
   restBaseUrl,
   showSnackbar,
   useLayoutType,
+  Workspace2,
+  Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import styles from '../../../manage-users/user-management.workspace.scss';
@@ -29,24 +31,22 @@ import { useSystemUserRoleConfigSetting } from '../../../../hook/useSystemRoleSe
 import UserRoleScopeFormFields from './user-role-scope-fields.component';
 import StockUserRoleScopesList from '../user-role-scope-list/user-role-scope-list.component';
 
-type UserRoleScopeWorkspaceProps = DefaultWorkspaceProps & {
+type UserRoleScopeWorkspaceProps = {
   user?: User;
 };
 
-const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
+const UserRoleScopeWorkspace: React.FC<Workspace2DefinitionProps<UserRoleScopeWorkspaceProps, {}, {}>> = ({
   closeWorkspace,
-  promptBeforeClosing,
-  closeWorkspaceWithSavedChanges,
-  user = {} as User,
+  workspaceProps: { user = {} as User },
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { userRoleScopeFormSchema } = UserRoleScopeFormSchema();
   const { stockOperations, loadingStock } = useStockOperationTypes();
-  const { stockLocations } = useStockTagLocations();
+  const { stockLocations, isLoading: loadinglocation } = useStockTagLocations();
   const { rolesConfig, error } = useSystemUserRoleConfigSetting();
   const { items, loadingRoleScope } = useUserRoleScopes();
-
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [userRoleScopeInitialValues, setUserRoleScopeInitialValues] = useState<UserRoleScope | null>(null);
   const handleEditUserRoleScope = useCallback((userRoleScope: UserRoleScope) => {
     setUserRoleScopeInitialValues(userRoleScope);
@@ -93,9 +93,9 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
   const { errors, isSubmitting, isDirty } = roleScopeformMethods.formState;
   useEffect(() => {
     if (isDirty) {
-      promptBeforeClosing(() => isDirty);
+      setHasUnsavedChanges(true);
     }
-  }, [isDirty, promptBeforeClosing]);
+  }, [isDirty, setHasUnsavedChanges]);
 
   useEffect(() => {
     if (userRoleScopeInitialValues && !loadingStock) {
@@ -154,7 +154,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
           const response = await createOrUpdateUserRoleScope(userRoleScopeUrl, roleScope, user?.uuid ?? '');
           if (response.ok) {
             showNotification('userRoleScopeSaved', 'User role scope saved successfully', 'success');
-            closeWorkspaceWithSavedChanges();
+            closeWorkspace({ discardUnsavedChanges: true });
           }
         }),
       );
@@ -184,9 +184,9 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
 
   useEffect(() => {
     if (isDirty) {
-      promptBeforeClosing(() => isDirty);
+      setHasUnsavedChanges(true);
     }
-  }, [isDirty, promptBeforeClosing]);
+  }, [isDirty, setHasUnsavedChanges]);
 
   function extractInventoryRoleNames(rolesConfig) {
     return rolesConfig.find((category) => category.category === ROLE_CATEGORIES.CORE_INVENTORY)?.roles || [];
@@ -225,7 +225,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
   );
 
   return (
-    <>
+    <Workspace2 title={t('userRoleScopeWorkspace', 'User Role Scope Workspace')} hasUnsavedChanges={hasUnsavedChanges}>
       <div>
         <StockUserRoleScopesList onEditUserRoleScope={handleEditUserRoleScope} user={user} />
       </div>
@@ -266,7 +266,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
                     hasInventoryRole={hasInventoryRole}
                     stockOperations={stockOperations}
                     stockLocations={stockLocations}
-                    loadingStock={loadingStock}
+                    loadingStock={loadingStock || loadinglocation}
                     roleScopeformMethods={roleScopeformMethods}
                     userRoleScopeInitialValues={userRoleScopeInitialValues}
                   />
@@ -309,7 +309,7 @@ const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
           </form>
         </FormProvider>
       )}
-    </>
+    </Workspace2>
   );
 };
 

package/src/components/users/manage-users/user-list/user-list.component.tsx

@@ -29,6 +29,7 @@ import {
   isDesktop,
   usePagination,
   showModal,
+  launchWorkspace2,
 } from '@openmrs/esm-framework';
 import { CardHeader, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import capitalize from 'lodash-es/capitalize';
@@ -261,10 +262,15 @@ const UserList: React.FC = () => {
             onClick={() => {
               const selectedUser = users.find((u) => u.uuid === user.uuid);
               if (selectedUser) {
-                launchWorkspace('manage-user-workspace', {
-                  workspaceTitle: t('editUser', 'Edit User'),
-                  initialUserValue: user,
-                });
+                launchWorkspace2(
+                  'manage-user-workspace',
+                  {
+                    workspaceTitle: t('editUser', 'Edit User'),
+                    initialUserValue: user,
+                  },
+                  {},
+                  {},
+                );
               } else {
                 console.error('User not found:', user.uuid);
               }
@@ -280,10 +286,15 @@ const UserList: React.FC = () => {
             hasDivider
             disabled={!userHasInventoryRole}
             onClick={() => {
-              launchWorkspace('user-role-scope-workspace', {
-                workspaceTitle: t('manageUserRoleScope', 'Manage user role scope'),
-                user: user,
-              });
+              launchWorkspace2(
+                'user-role-scope-workspace',
+                {
+                  workspaceTitle: t('manageUserRoleScope', 'Manage user role scope'),
+                  user: user,
+                },
+                {},
+                {},
+              );
             }}
             itemText={t('manageUserRoleScope', 'Manage user role scope')}
           />
@@ -317,7 +328,9 @@ const UserList: React.FC = () => {
               size={isDesktop(layout) ? 'lg' : 'sm'}
             />
             <Button
-              onClick={() => launchWorkspace('manage-user-workspace', { workspaceTitle: t('addUser', 'Add user') })}
+              onClick={() =>
+                launchWorkspace2('manage-user-workspace', { workspaceTitle: t('addUser', 'Add user') }, {}, {})
+              }
               className={styles.userManagementModeButton}
               renderIcon={UserFollow}
               size={isDesktop(layout) ? 'lg' : 'sm'}