UI face lift in user management view details sections (#1473)

* Face lift user management view details page * Update test regressions
onaio · Sep 27, 2024 · a9d1f47 · a9d1f47
1 parent 8b0f865
commit a9d1f47
Show file tree

Hide file tree

Showing 13 changed files with 499 additions and 169 deletions.
diff --git a/app/src/App/fhir-apps.tsx b/app/src/App/fhir-apps.tsx
@@ -363,15 +363,6 @@ const FHIRApps = () => {
         permissions={['iam_user.update']}
         component={UserCredentials}
       />
-      <PrivateComponent
-        redirectPath={APP_CALLBACK_URL}
-        disableLoginProtection={DISABLE_LOGIN_PROTECTION}
-        exact
-        path={`${URL_USER}/:id`}
-        {...usersListProps}
-        permissions={['iam_group.update']}
-        component={FhirUserList}
-      />
       <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}

diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx
@@ -6,6 +6,8 @@ import {
   TableLayout,
   BrokenPage,
   searchQuery,
+  useSearchParams,
+  viewDetailsQuery,
 } from '@opensrp/react-utils';
 import { PlusOutlined } from '@ant-design/icons';
 import { URL_USER_CREATE, KEYCLOAK_URL_USERS } from '@opensrp/user-management';
@@ -20,6 +22,7 @@ import { KeycloakUser } from '@opensrp/user-management';
 import { useSelector } from 'react-redux';
 import { useTranslation } from '@opensrp/i18n';
 import { RbacCheck, useUserRole } from '@opensrp/rbac';
+import { UserDetailsOverview } from '../ViewdetailsOverview';
 
 interface OrganizationListProps {
   fhirBaseURL: string;
@@ -39,6 +42,8 @@ export const UserList = (props: OrganizationListProps) => {
   const extraData = useSelector(getExtraData);
   const { t } = useTranslation();
   const userRole = useUserRole();
+  const { sParams } = useSearchParams();
+  const resourceId = sParams.get(viewDetailsQuery) ?? undefined;
 
   const { isLoading, data, error, isFetching } = useQuery([KEYCLOAK_URL_USERS], () =>
     loadKeycloakResources(keycloakBaseURL, KEYCLOAK_URL_USERS)
@@ -120,7 +125,16 @@ export const UserList = (props: OrganizationListProps) => {
               </Button>
             </RbacCheck>
           </div>
-          <TableLayout {...tableProps} />
+          <div className="dataGridWithOverview">
+            <div className="dataGridWithOverview-table">
+              <TableLayout {...tableProps} />
+            </div>
+            {resourceId ? (
+              <div className="view-details-content dataGridWithOverview-overview">
+                <UserDetailsOverview keycloakBaseURL={keycloakBaseURL} resourceId={resourceId} />
+              </div>
+            ) : null}
+          </div>
         </Col>
       </Row>
     </BodyLayout>

diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tableColumns.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tableColumns.tsx
@@ -3,14 +3,18 @@ import { Divider, Dropdown, Button } from 'antd';
 import type { MenuProps } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
-import { KeycloakUser, URL_USER_EDIT, URL_USER_CREDENTIALS } from '@opensrp/user-management';
+import {
+  KeycloakUser,
+  URL_USER_EDIT,
+  URL_USER_CREDENTIALS,
+  URL_USER,
+} from '@opensrp/user-management';
 import { Dictionary } from '@onaio/utils';
-import { Column } from '@opensrp/react-utils';
+import { Column, viewDetailsQuery } from '@opensrp/react-utils';
 import type { TFunction } from '@opensrp/i18n';
 import { RbacCheck, UserRole } from '@opensrp/rbac';
 import { History } from 'history';
 import { UserDeleteBtn } from '../../UserDeleteBtn';
-import { USER_DETAILS_URL } from '../../../constants';
 
 /**
  * Get table columns for user list
@@ -51,12 +55,18 @@ export const getTableColumns = (
   });
 
   const getItems = (record: KeycloakUser): MenuProps['items'] => {
+    const viewDetailsOverviewSParams = new URLSearchParams({
+      [viewDetailsQuery]: record.id,
+    });
     const items = [
       {
         key: '1',
         permissions: ['iam_user.read'],
         label: (
-          <Button onClick={() => history.push(`${USER_DETAILS_URL}/${record.id}`)} type="link">
+          <Button
+            onClick={() => history.push(`${URL_USER}?${viewDetailsOverviewSParams.toString()}`)}
+            type="link"
+          >
             {t('View Details')}
           </Button>
         ),
@@ -101,6 +111,7 @@ export const getTableColumns = (
 
   dataElements.push({
     title: t('Actions'),
+    width: '120px',
     // eslint-disable-next-line react/display-name
     render: (_, record) => {
       const items = getItems(record);

diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/index.test.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/index.test.tsx
@@ -13,11 +13,7 @@ import userEvents from '@testing-library/user-event';
 import { URL_USER, URL_USER_CREDENTIALS, UserCredentials } from '@opensrp/user-management';
 import { practitioner, userFixtures, group } from './fixtures';
 import fetch from 'jest-fetch-mock';
-import {
-  USER_DETAILS_URL,
-  practitionerResourceType,
-  practitionerRoleResourceType,
-} from '../../../../constants';
+import { practitionerResourceType, practitionerRoleResourceType } from '../../../../constants';
 import flushPromises from 'flush-promises';
 import { practitionerRoleBundle } from '../../../CreateEditUser/tests/fixtures';
 import { RoleContext } from '@opensrp/rbac';
@@ -114,6 +110,10 @@ afterEach(() => {
   cleanup();
 });
 
+beforeEach(() => {
+  fetch.mockClear();
+});
+
 afterAll(() => {
   nock.enableNetConnect();
 });
@@ -336,7 +336,6 @@ test('View details navigates correctly', async () => {
     </span>
   `);
   fireEvent.click(viewDetailsLink);
-  expect(history.location.pathname).toEqual(
-    `${USER_DETAILS_URL}/081724e8-5fc1-47dd-8d0c-fa0c6ae6ddf0`
-  );
+  expect(history.location.pathname).toEqual('/admin/users');
+  expect(history.location.search).toEqual('?viewDetails=081724e8-5fc1-47dd-8d0c-fa0c6ae6ddf0');
 });
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/Viewdetails/index.css b/packages/fhir-keycloak-user-management/src/components/UserList/Viewdetails/index.css
@@ -21,4 +21,5 @@
 .details-full-view .details-tab {
   background: #fff;
   padding-top: 16px;
+  width: 100%;
 }