Fix #7630 Roles are not updating in User tab after creation (#7660)

openmetadata-ui/src/main/resources/ui/src/AppState.ts

@@ -19,7 +19,6 @@ import { EntityData } from './components/common/PopOverCard/EntityPopOverCard';
 import { LOCALSTORAGE_USER_PROFILES } from './constants/constants';
 import { CurrentTourPageType } from './enums/tour.enum';
 import { ResourcePermission } from './generated/entity/policies/accessControl/resourcePermission';
-import { Role } from './generated/entity/teams/role';
 import {
   EntityReference as UserTeams,
   User,
@@ -42,7 +41,6 @@ class AppState {
   userDataProfiles: Record<string, User> = {};
   entityData: Record<string, EntityData> = {};
   userTeams: Array<UserTeams> = [];
-  userRoles: Array<Role> = [];
   userPermissions: ResourcePermission[] = [];
   userProfilePics: Array<{
     id: string;
@@ -68,14 +66,12 @@ class AppState {
       updateNewUser: action,
       updateAuthProvide: action,
       updateAuthState: action,
-      updateUserRole: action,
       updateUsers: action,
       updateUserPermissions: action,
       updateExplorePageTab: action,
       getCurrentUserDetails: action,
       getAllUsers: action,
       getAllTeams: action,
-      getAllRoles: action,
       getAllPermissions: action,
       getUserProfilePic: action,
       updateUserProfilePic: action,
@@ -107,9 +103,6 @@ class AppState {
   updateUserTeam(data: Array<UserTeams>) {
     this.userTeams = data;
   }
-  updateUserRole(data: Array<Role>) {
-    this.userRoles = data;
-  }
   updateUserDetails(data: User) {
     this.userDetails = data;
     this.nonSecureUserDetails = data;
@@ -277,10 +270,6 @@ class AppState {
     return this.userTeams;
   }
 
-  getAllRoles() {
-    return this.userRoles;
-  }
-
   getAllPermissions() {
     return this.userPermissions;
   }

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -26,9 +26,13 @@ import React, {
 } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import Select from 'react-select';
-import AppState from '../../AppState';
+import { getRoles } from '../../axiosAPIs/rolesAPIV1';
 import { getTeams } from '../../axiosAPIs/teamsAPI';
-import { getUserPath, TERM_ADMIN } from '../../constants/constants';
+import {
+  getUserPath,
+  PAGE_SIZE_LARGE,
+  TERM_ADMIN,
+} from '../../constants/constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import {
   getUserCurrentTab,
@@ -767,16 +771,32 @@ const Users = ({
     }
   };
 
+  const fetchRoles = async () => {
+    try {
+      const response = await getRoles(
+        '',
+        undefined,
+        undefined,
+        false,
+        PAGE_SIZE_LARGE
+      );
+      setRoles(response.data);
+    } catch (err) {
+      setRoles([]);
+      showErrorToast(
+        err as AxiosError,
+        jsonData['api-error-messages']['fetch-roles-error']
+      );
+    }
+  };
+
   useEffect(() => {
     fetchMoreFeed(isInView as boolean, paging, isFeedLoading);
   }, [isInView, paging, isFeedLoading]);
 
-  useEffect(() => {
-    setRoles(AppState.userRoles);
-  }, [AppState.userRoles]);
-
   useEffect(() => {
     fetchTeams();
+    fetchRoles();
   }, []);
 
   useEffect(() => {

openmetadata-ui/src/main/resources/ui/src/pages/CreateUserPage/CreateUserPage.component.tsx

@@ -16,11 +16,12 @@ import { observer } from 'mobx-react';
 import { LoadingState } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import AppState from '../../AppState';
 import { createBot } from '../../axiosAPIs/botsAPI';
+import { getRoles } from '../../axiosAPIs/rolesAPIV1';
 import { createUser } from '../../axiosAPIs/userAPI';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
 import CreateUserComponent from '../../components/CreateUser/CreateUser.component';
+import { PAGE_SIZE_LARGE } from '../../constants/constants';
 import {
   GlobalSettingOptions,
   GlobalSettingsMenuCategory,
@@ -116,9 +117,28 @@ const CreateUserPage = () => {
       });
   };
 
+  const fetchRoles = async () => {
+    try {
+      const response = await getRoles(
+        '',
+        undefined,
+        undefined,
+        false,
+        PAGE_SIZE_LARGE
+      );
+      setRoles(response.data);
+    } catch (err) {
+      setRoles([]);
+      showErrorToast(
+        err as AxiosError,
+        jsonData['api-error-messages']['fetch-roles-error']
+      );
+    }
+  };
+
   useEffect(() => {
-    setRoles(AppState.userRoles);
-  }, [AppState.userRoles]);
+    fetchRoles();
+  }, []);
 
   return (
     <PageContainerV1>

openmetadata-ui/src/main/resources/ui/src/utils/UserDataUtils.ts

@@ -22,7 +22,6 @@ import {
   getSuggestedTeams,
   getSuggestedUsers,
 } from '../axiosAPIs/miscAPI';
-import { getRoles } from '../axiosAPIs/rolesAPIV1';
 import { getUserById, getUserByName, getUsers } from '../axiosAPIs/userAPI';
 import { WILD_CARD_CHAR } from '../constants/char.constants';
 import { SettledStatus } from '../enums/axios.enum';
@@ -41,20 +40,9 @@ export const getAllUsersList = (arrQueryFields = ''): void => {
     });
 };
 
-const getAllRoles = (): void => {
-  getRoles('', undefined, undefined, false, 100)
-    .then((res) => {
-      AppState.updateUserRole(res.data);
-    })
-    .catch(() => {
-      AppState.updateUserRole([]);
-    });
-};
-
 export const fetchAllUsers = () => {
   AppState.loadUserProfilePics();
   getAllUsersList('profile,teams,roles');
-  getAllRoles();
 };
 
 export const getUserDataFromOidc = (