Add username to the credentials screen

onaio · Sep 1, 2023 · a8bef39 · a8bef39
1 parent 8beec0d
commit a8bef39
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 55 deletions.
diff --git a/app/src/App/fhir-apps.tsx b/app/src/App/fhir-apps.tsx
@@ -36,12 +36,13 @@ import { providers } from '../configs/settings';
 import CustomConnectedAPICallBack from '../components/page/CustomCallback';
 import { PatientsList, PatientDetails, LIST_PATIENTS_URL } from '@opensrp/fhir-client';
 import {
-  ConnectedUserCredentials,
+  UserCredentials,
   UserGroupsList,
   UserRolesList,
   URL_USER,
   URL_USER_EDIT,
   ROUTE_PARAM_USER_ID,
+  ROUTE_PARAM_USERNAME,
   ROUTE_PARAM_USER_GROUP_ID,
   URL_USER_GROUP_EDIT,
   URL_USER_GROUP_CREATE,
@@ -286,8 +287,8 @@ const FHIRApps = () => {
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}
         activeRoles={activeRoles.USERS && activeRoles.USERS.split(',')}
         exact
-        path={`${URL_USER_CREDENTIALS}/:${ROUTE_PARAM_USER_ID}`}
-        component={ConnectedUserCredentials}
+        path={`${URL_USER_CREDENTIALS}/:${ROUTE_PARAM_USER_ID}/:${ROUTE_PARAM_USERNAME}`}
+        component={UserCredentials}
       />
       <PrivateComponent
         redirectPath={APP_CALLBACK_URL}

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
@@ -99,7 +99,9 @@ export const getTableColumns = (
         <Button
           type="link"
           data-testid="credentials"
-          onClick={() => history.push(`${URL_USER_CREDENTIALS}/${record.id}`)}
+          onClick={() => {
+            history.push(`${URL_USER_CREDENTIALS}/${record.id}/${record.username}`);
+          }}
         >
           {t('Credentials')}
         </Button>

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
@@ -75,7 +75,7 @@ const AppWrapper = (props: any) => {
           <Route exact path={`${URL_USER}/:id`}>
             {(routeProps) => <UserList {...{ ...props, ...routeProps }} />}
           </Route>
-          <Route exact path={`${URL_USER_CREDENTIALS}/:id`}>
+          <Route exact path={`${URL_USER_CREDENTIALS}/:id/:username`}>
             {(routeProps) => <UserCredentials {...{ ...props, ...routeProps }} />}
           </Route>
         </Switch>

diff --git a/packages/keycloak-user-management/README.md b/packages/keycloak-user-management/README.md
@@ -22,6 +22,7 @@ import {
   URL_USER,
   URL_USER_EDIT,
   ROUTE_PARAM_USER_ID,
+  ROUTE_PARAM_USERNAME,
   URL_USER_CREATE,
   URL_USER_CREDENTIALS,
 } from '@opensrp/user-management';
@@ -62,9 +63,9 @@ const App = () => {
               redirectPath={APP_CALLBACK_URL}
               disableLoginProtection={DISABLE_LOGIN_PROTECTION}
               exact
-              path={`${URL_USER_CREDENTIALS}/:${ROUTE_PARAM_USER_ID}`}
+              path={`${URL_USER_CREDENTIALS}/:${ROUTE_PARAM_USER_ID}/:${ROUTE_PARAM_USERNAME}`}
               component={(props: any) => (
-                <ConnectedUserCredentials {...props} keycloakBaseURL={KEYCLOAK_API_BASE_URL} />
+                <UserCredentials {...props} keycloakBaseURL={KEYCLOAK_API_BASE_URL} />
               )}
             />
         </Switch>

diff --git a/packages/keycloak-user-management/src/components/Credentials/index.tsx b/packages/keycloak-user-management/src/components/Credentials/index.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { Button, Form, Col, Row, Input } from 'antd';
 import { PageHeader } from '@opensrp/react-utils';
 import { RouteComponentProps, useHistory } from 'react-router';
-import { Store } from 'redux';
-import { connect } from 'react-redux';
 import reducerRegistry from '@onaio/redux-reducer-registry';
 import { KeycloakService, HTTPError } from '@opensrp/keycloak-service';
 import { history } from '@onaio/connected-reducer-registry';
@@ -13,13 +11,13 @@ import {
   KEYCLOAK_URL_RESET_PASSWORD,
   ROUTE_PARAM_USER_ID,
   URL_USER,
+  ROUTE_PARAM_USERNAME,
 } from '../../constants';
 import { useTranslation } from '../../mls';
 import {
   reducer as keycloakUsersReducer,
   reducerName as keycloakUsersReducerName,
   fetchKeycloakUsers,
-  makeKeycloakUsersSelector,
   KeycloakUser,
 } from '../../ducks/user';
 import { Dictionary } from '@onaio/utils';
@@ -32,6 +30,7 @@ reducerRegistry.register(keycloakUsersReducerName, keycloakUsersReducer);
 
 export interface CredentialsRouteParams {
   userId: string;
+  username: string;
 }
 
 /** props for editing a user view */
@@ -106,8 +105,10 @@ export const submitForm = (
 };
 
 const UserCredentials: React.FC<CredentialsPropsTypes> = (props: CredentialsPropsTypes) => {
-  const { serviceClass, match, keycloakBaseURL, keycloakUser } = props;
+  const { serviceClass, match, keycloakBaseURL } = props;
   const userId = match.params[ROUTE_PARAM_USER_ID];
+  const username = match.params[ROUTE_PARAM_USERNAME];
+
   const { t } = useTranslation();
   const layout = {
     labelCol: {
@@ -127,7 +128,8 @@ const UserCredentials: React.FC<CredentialsPropsTypes> = (props: CredentialsProp
     },
   };
   const history = useHistory();
-  const heading = `${t('User Credentials')} | ${keycloakUser ? keycloakUser.username : ''}`;
+  const heading = `${t('User Credentials')} | ${username}`;
+
   return (
     <Row className="content-section">
       <PageHeader title={heading} />
@@ -193,30 +195,3 @@ const UserCredentials: React.FC<CredentialsPropsTypes> = (props: CredentialsProp
 UserCredentials.defaultProps = defaultCredentialsProps;
 
 export { UserCredentials };
-
-/** Interface for connected state to props */
-interface DispatchedProps {
-  keycloakUser: KeycloakUser | null;
-}
-
-// connect to store
-const mapStateToProps = (
-  state: Partial<Store>,
-  ownProps: CredentialsPropsTypes
-): DispatchedProps => {
-  const userId = ownProps.match.params[ROUTE_PARAM_USER_ID];
-  const keycloakUsersSelector = makeKeycloakUsersSelector();
-  const keycloakUsers = keycloakUsersSelector(state, { id: [userId] });
-  const keycloakUser = keycloakUsers.length >= 1 ? keycloakUsers[0] : null;
-  return { keycloakUser };
-};
-
-/** map props to action creators */
-const mapDispatchToProps = {
-  fetchKeycloakUsersCreator: fetchKeycloakUsers,
-};
-
-export const ConnectedUserCredentials = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(UserCredentials);
diff --git a/packages/keycloak-user-management/src/components/Credentials/tests/index.test.tsx b/packages/keycloak-user-management/src/components/Credentials/tests/index.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, createMemoryHistory } from 'history';
 import reducerRegistry from '@onaio/redux-reducer-registry';
 import { authenticateUser } from '@onaio/session-reducer';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router';
+import { Route, Router, Switch } from 'react-router';
 import fetch from 'jest-fetch-mock';
-import { cancelUserHandler, ConnectedUserCredentials, UserCredentials, submitForm } from '..';
+import { cancelUserHandler, UserCredentials, submitForm } from '..';
 import { KeycloakService, HTTPError } from '@opensrp/keycloak-service';
 import * as fixtures from '../../forms/UserForm/tests/fixtures';
 import { store } from '@opensrp/store';
@@ -22,6 +22,7 @@ import {
 import { URL_USER } from '../../../constants';
 
 import { history as registryHistory } from '@onaio/connected-reducer-registry';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 reducerRegistry.register(keycloakUsersReducerName, keycloakUsersReducer);
 
@@ -32,6 +33,29 @@ jest.mock('@opensrp/notifications', () => ({
 
 const history = createBrowserHistory();
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      cacheTime: 0,
+    },
+  },
+});
+
+const AppWrapper = () => {
+  return (
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <Switch>
+          <Route exact path="/user/:userId/:username">
+            {(props) => <UserCredentials {...props} />}
+          </Route>
+        </Switch>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
+
 describe('components/Credentials', () => {
   beforeAll(() => {
     store.dispatch(
@@ -65,17 +89,18 @@ describe('components/Credentials', () => {
     history,
     location: {
       hash: '',
-      pathname: `/user/credentials/${fixtures.keycloakUser.id}`,
+      pathname: `/user/credentials/${fixtures.keycloakUser.id}/${fixtures.keycloakUser.username}`,
       search: '',
       state: undefined,
     },
     match: {
       isExact: true,
       params: {
         userId: fixtures.keycloakUser.id,
+        username: fixtures.keycloakUser.username,
       },
-      path: '/user/credentials/:userId',
-      url: `/user/credentials/${fixtures.keycloakUser.id}`,
+      path: '/user/credentials/:userId/:username',
+      url: `/user/credentials/${fixtures.keycloakUser.id}/${fixtures.keycloakUser.username}`,
     },
     keycloakBaseURL: 'https://keycloak-stage.smartregister.org/auth/admin/realms/opensrp-web-stage',
     fetchKeycloakUsersCreator: fetchKeycloakUsers,
@@ -86,12 +111,13 @@ describe('components/Credentials', () => {
   });
 
   it('renders correctly', () => {
+    const history = createMemoryHistory();
+    history.push(`/user/${fixtures.keycloakUser.id}/${fixtures.keycloakUser.username}`);
+
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <ConnectedUserCredentials {...props} />
-        </Router>
-      </Provider>
+      <Router history={history}>
+        <AppWrapper {...props} />
+      </Router>
     );
     expect(wrapper.find('Row').at(0).props()).toMatchSnapshot('row props');
     wrapper.unmount();
@@ -104,7 +130,7 @@ describe('components/Credentials', () => {
     const wrapper = mount(
       <Provider store={store}>
         <Router history={history}>
-          <ConnectedUserCredentials {...props} />
+          <UserCredentials {...props} />
         </Router>
       </Provider>
     );
@@ -150,7 +176,7 @@ describe('components/Credentials', () => {
     const wrapper = mount(
       <Provider store={store}>
         <Router history={history}>
-          <ConnectedUserCredentials {...props} />
+          <UserCredentials {...props} />
         </Router>
       </Provider>
     );
@@ -190,7 +216,7 @@ describe('components/Credentials', () => {
     const wrapper = mount(
       <Provider store={store}>
         <Router history={history}>
-          <ConnectedUserCredentials {...props} />
+          <UserCredentials {...props} />
         </Router>
       </Provider>
     );
@@ -261,7 +287,7 @@ describe('components/Credentials', () => {
     const wrapper = mount(
       <Provider store={store}>
         <Router history={history}>
-          <ConnectedUserCredentials {...props} />
+          <UserCredentials {...props} />
         </Router>
       </Provider>
     );
@@ -291,7 +317,7 @@ describe('components/Credentials', () => {
     const wrapper = mount(
       <Provider store={store}>
         <Router history={history}>
-          <ConnectedUserCredentials {...props2} />
+          <UserCredentials {...props2} />
         </Router>
       </Provider>
     );

diff --git a/packages/keycloak-user-management/src/constants.ts b/packages/keycloak-user-management/src/constants.ts
@@ -12,6 +12,7 @@ export const ORGANIZATION_BY_PRACTITIONER = 'organization/by-practitioner';
 
 // Route params
 export const ROUTE_PARAM_USER_ID = 'userId';
+export const ROUTE_PARAM_USERNAME = 'username';
 export const ROUTE_PARAM_USER_GROUP_ID = 'userGroupId';
 
 // Keycloak API URLs