Refactor user management form fields and corresponding props config (#…

…1500) * Refactor user management form fields and corresponding props config * Update tests
onaio · Nov 18, 2024 · 4fee51b · 4fee51b
1 parent 95d4fe7
commit 4fee51b
Show file tree

Hide file tree

Showing 16 changed files with 398 additions and 421 deletions.
diff --git a/packages/fhir-keycloak-user-management/src/components/CreateEditUser/index.tsx b/packages/fhir-keycloak-user-management/src/components/CreateEditUser/index.tsx
@@ -5,6 +5,9 @@ import {
   FormFields,
   PRACTITIONER_USER_TYPE_CODE,
   SUPERVISOR_USER_TYPE_CODE,
+  commonFhirFields,
+  userTypeField,
+  FormFieldsKey,
 } from '@opensrp/user-management';
 import {
   practitionerResourceType,
@@ -356,13 +359,20 @@ export const practitionerUpdater =
  * @param props - component props
  */
 export function CreateEditUser(props: CreateEditPropTypes) {
-  const extraFormFields = getConfig('projectCode') === 'giz' ? renderExtraFields : [];
+  let renderFormFields: FormFieldsKey[] = [...commonFhirFields];
+  const projectCode = getConfig('projectCode');
+  if (projectCode === 'giz') {
+    renderFormFields = [...commonFhirFields, ...renderExtraFields] as FormFieldsKey[];
+  } else if (projectCode === 'eusm') {
+    renderFormFields = renderFormFields.filter((field) => field !== userTypeField);
+  }
+
   const baseCompProps = {
     ...props,
     getPractitionerFun: getPractitioner,
     getPractitionerRoleFun: getPractitionerRole,
     postPutPractitionerFactory: practitionerUpdater,
-    extraFormFields: extraFormFields,
+    userFormRenderFields: renderFormFields,
   };
 
   return <BaseCreateEditUser {...baseCompProps} />;

diff --git a/...r-keycloak-user-management/src/components/CreateEditUser/tests/extra-fields-user.test.tsx b/...r-keycloak-user-management/src/components/CreateEditUser/tests/extra-fields-user.test.tsx
@@ -14,7 +14,7 @@ import { Provider } from 'react-redux';
 import { store } from '@opensrp/store';
 import nock from 'nock';
 import { cleanup, fireEvent, render } from '@testing-library/react';
-import { waitFor } from '@testing-library/dom';
+import { waitFor, within } from '@testing-library/dom';
 import { createMemoryHistory } from 'history';
 import { authenticateUser } from '@onaio/session-reducer';
 import fetch from 'jest-fetch-mock';
@@ -35,6 +35,9 @@ import { practitionerResourceType, practitionerRoleResourceType } from '../../..
 import { fetchKeycloakUsers } from '@opensrp/user-management';
 import { history } from '@onaio/connected-reducer-registry';
 import { opensrpI18nInstance } from '@opensrp/i18n';
+import { setConfig } from '@opensrp/pkg-config';
+
+setConfig('projectCode', 'giz');
 
 jest.mock('fhirclient', () => {
   return jest.requireActual('fhirclient/lib/entry/browser');
@@ -245,11 +248,11 @@ test('renders correctly for edit user', async () => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   userEvent.type(usernameInput!, 'flopo');
 
-  // change mark as practitioner to tue
-  const yesMarkPractitioner = document.querySelectorAll('input[name="active"]')[0];
+  const enabledFieldGroup = document.querySelector('#active') as HTMLElement;
+  const yesMarkPractitioner = within(enabledFieldGroup).getByRole('radio', { name: /yes/i });
   userEvent.click(yesMarkPractitioner);
 
-  const markSupervisor = document.querySelectorAll('input[name="userType"]')[1];
+  const markSupervisor = document.querySelector('input[value="supervisor"]') as HTMLElement;
   userEvent.click(markSupervisor);
 
   const submitButton = document.querySelector('button[type="submit"]');

diff --git a/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/fixtures.ts b/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/fixtures.ts
@@ -69,6 +69,7 @@ export const newPractitioner = {
   name: [{ use: 'official', family: 'plotus', given: ['flotus', ''] }],
   telecom: [{ system: 'email', value: '[email protected]' }],
 };
+
 export const newPractitionerRole = {
   resourceType: 'PractitionerRole',
   id: 'acb9d47e-7247-448f-be93-7a193a5312da',
@@ -88,7 +89,11 @@ export const newPractitionerRole = {
   code: [
     {
       coding: [
-        { system: 'http://snomed.info/sct', code: '236321002', display: 'Supervisor (occupation)' },
+        {
+          system: 'http://snomed.info/sct',
+          code: '405623001',
+          display: 'Assigned practitioner',
+        },
       ],
     },
   ],

diff --git a/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/index.test.tsx b/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/index.test.tsx
@@ -230,7 +230,7 @@ test('renders correctly for edit user', async () => {
   const yesMarkPractitioner = document.querySelectorAll('input[name="active"]')[0];
   userEvent.click(yesMarkPractitioner);
 
-  const markSupervisor = document.querySelectorAll('input[name="userType"]')[1];
+  const markSupervisor = document.querySelector('input[value="supervisor"]') as HTMLElement;
   userEvent.click(markSupervisor);
 
   const submitButton = document.querySelector('button[type="submit"]');

diff --git a/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/new-user.test.tsx b/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/new-user.test.tsx
@@ -234,9 +234,6 @@ test('renders correctly for new user', async () => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   userEvent.type(usernameInput!, 'flopo');
 
-  const markSupervisor = document.querySelectorAll('input[name="userType"]')[1];
-  userEvent.click(markSupervisor);
-
   const submitButton = document.querySelector('button[type="submit"]');
 
   // find antd Select with id 'fhirCoreAppId' in the 'Form' component

diff --git a/packages/keycloak-user-management/src/components/CreateEditUser/index.tsx b/packages/keycloak-user-management/src/components/CreateEditUser/index.tsx
@@ -51,7 +51,6 @@ export interface CreateEditUserProps {
   getPractitionerFun: (baseUrl: string, userId: string) => Promise<Practitioner | IPractitioner>;
   getPractitionerRoleFun?: (baseUrl: string, userId: string) => Promise<IPractitionerRole>;
   postPutPractitionerFactory: UserFormProps['practitionerUpdaterFactory'];
-  extraFormFields: string[];
 }
 
 const getOpenSrpPractitioner = (baseUrl: string, userId: string) => {
@@ -95,7 +94,6 @@ const CreateEditUser: React.FC<CreateEditPropTypes> = (props: CreateEditPropType
     getPractitionerFun,
     postPutPractitionerFactory,
     getPractitionerRoleFun,
-    extraFormFields,
   } = props;
 
   const userId = props.match.params[ROUTE_PARAM_USER_ID];
@@ -215,8 +213,6 @@ const CreateEditUser: React.FC<CreateEditPropTypes> = (props: CreateEditPropType
           hiddenFields={userFormHiddenFields}
           renderFields={userFormRenderFields}
           practitionerUpdaterFactory={postPutPractitionerFactory}
-          isFHIRInstance={!!getPractitionerRoleFun}
-          extraFormFields={extraFormFields}
         />
       </Col>
     </Row>

diff --git a/...oak-user-management/src/components/CreateEditUser/tests/__snapshots__/index.test.tsx.snap b/...oak-user-management/src/components/CreateEditUser/tests/__snapshots__/index.test.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/CreateEditUser loads edit user page without breaking if user is not a practitioner 1`] = `"Edit User | opensrpFirst NameLast NameEmailUsernameUser TypePractitionerSupervisorEnable userYesNoMark as PractitionerYesNoKeycloak User GroupAdminAdmin 2New Group Application IDSaveCancel"`;
+
 exports[`components/CreateEditUser renders correctly 1`] = `
 Object {
   "children": <Col
     span={24}
   >
     <UserForm
       extraData={Object {}}
-      extraFormFields={Array []}
       initialValues={
         Object {
           "active": true,
-          "contact": undefined,
           "enabled": true,
           "fhirCoreAppId": undefined,
           "firstName": "",
@@ -25,9 +25,21 @@ Object {
           "username": "",
         }
       }
-      isFHIRInstance={false}
       keycloakBaseURL="https://keycloak-stage.smartregister.org/auth/admin/realms/opensrp-web-stage"
       practitionerUpdaterFactory={[Function]}
+      renderFields={
+        Array [
+          "firstName",
+          "lastName",
+          "email",
+          "username",
+          "userType",
+          "enabled",
+          "active",
+          "userGroups",
+          "fhirCoreAppId",
+        ]
+      }
       userGroups={
         Array [
           Object {

diff --git a/packages/keycloak-user-management/src/components/CreateEditUser/tests/index.test.tsx b/packages/keycloak-user-management/src/components/CreateEditUser/tests/index.test.tsx
@@ -21,6 +21,7 @@ import {
   removeKeycloakUsers,
 } from '../../../ducks/user';
 import { authenticateUser } from '@onaio/session-reducer';
+import { QueryClientProvider, QueryClient } from 'react-query';
 
 import {
   keycloakUser,
@@ -32,6 +33,12 @@ import { defaultUserFormInitialValues } from '../../forms/UserForm';
 import { getFormValues } from '../../forms/UserForm/utils';
 import { Dictionary } from '@onaio/utils/dist/types/types';
 
+const queryClient = new QueryClient();
+
+const QueryWrapper = ({ children }: { children: JSX.Element }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
 jest.mock('@opensrp/store', () => {
   const actualStore = jest.requireActual('@opensrp/store');
   return {
@@ -119,11 +126,13 @@ describe('components/CreateEditUser', () => {
     fetch.mockResponseOnce(JSON.stringify(requiredActions));
 
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <CreateEditUser {...propsCreate} />
-        </Router>
-      </Provider>
+      <QueryWrapper>
+        <Provider store={store}>
+          <Router history={history}>
+            <CreateEditUser {...propsCreate} />
+          </Router>
+        </Provider>
+      </QueryWrapper>
     );
 
     await act(async () => {
@@ -159,11 +168,13 @@ describe('components/CreateEditUser', () => {
       .once(JSON.stringify(practitioner1));
 
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <ConnectedCreateEditUser {...props} />
-        </Router>
-      </Provider>
+      <QueryWrapper>
+        <Provider store={store}>
+          <Router history={history}>
+            <ConnectedCreateEditUser {...props} />
+          </Router>
+        </Provider>
+      </QueryWrapper>
     );
 
     await act(async () => {
@@ -193,9 +204,11 @@ describe('components/CreateEditUser', () => {
     fetch.mockResponseOnce(JSON.stringify(keycloakUser));
 
     const wrapper = mount(
-      <Router history={history}>
-        <CreateEditUser {...propsCreate} />
-      </Router>
+      <QueryWrapper>
+        <Router history={history}>
+          <CreateEditUser {...propsCreate} />
+        </Router>
+      </QueryWrapper>
     );
 
     expect(wrapper.exists('.ant-spin')).toBeTruthy();
@@ -239,11 +252,13 @@ describe('components/CreateEditUser', () => {
     };
 
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <ConnectedCreateEditUser {...propsPageRefreshed} />
-        </Router>
-      </Provider>
+      <QueryWrapper>
+        <Provider store={store}>
+          <Router history={history}>
+            <ConnectedCreateEditUser {...propsPageRefreshed} />
+          </Router>
+        </Provider>
+      </QueryWrapper>
     );
 
     // Loader should be displayed
@@ -330,9 +345,11 @@ describe('components/CreateEditUser', () => {
 
     const wrapper = mount(
       <Provider store={store}>
-        <Router history={history}>
-          <ConnectedCreateEditUser {...userProps} />
-        </Router>
+        <QueryWrapper>
+          <Router history={history}>
+            <ConnectedCreateEditUser {...userProps} />
+          </Router>
+        </QueryWrapper>
       </Provider>
     );
 
@@ -345,8 +362,7 @@ describe('components/CreateEditUser', () => {
     });
     expect(toJson(wrapper.find('.ant-spin'))).toBeFalsy();
     // eslint-disable-next-line no-irregular-whitespace
-    const newLocal = `"Edit User | opensrpFirst NameLast NameEmailUsernameEnable userYesNoMark as PractitionerYesNoKeycloak User GroupAdminAdmin 2New Group SaveCancel"`;
-    expect(wrapper.text()).toMatchInlineSnapshot(newLocal);
+    expect(wrapper.text()).toMatchSnapshot();
     wrapper.unmount();
   });
 
@@ -376,11 +392,13 @@ describe('components/CreateEditUser', () => {
     };
 
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <ConnectedCreateEditUser {...propsPageRefreshed} />
-        </Router>
-      </Provider>
+      <QueryWrapper>
+        <Provider store={store}>
+          <Router history={history}>
+            <ConnectedCreateEditUser {...propsPageRefreshed} />
+          </Router>
+        </Provider>
+      </QueryWrapper>
     );
 
     await act(async () => {
@@ -408,11 +426,13 @@ describe('components/CreateEditUser', () => {
     );
 
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <ConnectedCreateEditUser {...props} />
-        </Router>
-      </Provider>
+      <QueryWrapper>
+        <Provider store={store}>
+          <Router history={history}>
+            <ConnectedCreateEditUser {...props} />
+          </Router>
+        </Provider>
+      </QueryWrapper>
     );
 
     await act(async () => {
@@ -438,11 +458,13 @@ describe('components/CreateEditUser', () => {
       .once(JSON.stringify(requiredActions));
 
     const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <ConnectedCreateEditUser {...props} />
-        </Router>
-      </Provider>
+      <QueryWrapper>
+        <Provider store={store}>
+          <Router history={history}>
+            <ConnectedCreateEditUser {...props} />
+          </Router>
+        </Provider>
+      </QueryWrapper>
     );
 
     expect(wrapper.exists('.ant-spin')).toBeTruthy();