Fix: #1781 Automatically created admins don't get profile and displayName updated when using Google SSO. (#2283)

* Fix: #1781 Automatically created admins don't get profile and displayName updated when using Google SSO.

* adding code to update the state through action.

* Adding methods to observable

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { action, makeAutoObservable, observable } from 'mobx';
+import { action, makeAutoObservable } from 'mobx';
 import { ClientAuth, NewUser } from 'Models';
 import { CurrentTourPageType } from './enums/tour.enum';
 import {
@@ -41,26 +41,29 @@ class AppState {
 
   constructor() {
     makeAutoObservable(this, {
-      users: observable,
-      newUser: observable,
-      authDisabled: observable,
-      authProvider: observable,
-      userDetails: observable,
-      userTeams: observable,
-
-      inPageSearchText: observable,
-      explorePageTab: observable,
-
-      isTourOpen: observable,
-      currentTourPage: observable,
-      activeTabforTourDatasetPage: observable,
+      updateUserDetails: action,
       updateUserTeam: action,
+      updateNewUser: action,
+      updateAuthProvide: action,
+      updateAuthState: action,
     });
   }
 
   updateUserTeam(data: Array<UserTeams>) {
     this.userTeams = data;
   }
+  updateUserDetails(data: User) {
+    this.userDetails = data;
+  }
+  updateNewUser(data: NewUser) {
+    this.newUser = data;
+  }
+  updateAuthProvide(clientAuth: ClientAuth) {
+    this.authProvider = clientAuth;
+  }
+  updateAuthState(state: boolean) {
+    this.authDisabled = state;
+  }
 }
 
 export default new AppState();

openmetadata-ui/src/main/resources/ui/src/auth-provider/AuthProvider.tsx

@@ -33,10 +33,14 @@ import {
 import appState from '../AppState';
 import axiosClient from '../axiosAPIs';
 import { fetchAuthorizerConfig } from '../axiosAPIs/miscAPI';
-import { getLoggedInUser, getUserByName } from '../axiosAPIs/userAPI';
+import {
+  getLoggedInUser,
+  getUserByName,
+  updateUser,
+} from '../axiosAPIs/userAPI';
 import Loader from '../components/Loader/Loader';
 import { COOKIE_VERSION } from '../components/Modals/WhatsNewModal/whatsNewData';
-import { oidcTokenKey, ROUTES } from '../constants/constants';
+import { isAdminUpdated, oidcTokenKey, ROUTES } from '../constants/constants';
 import { ClientErrors } from '../enums/axios.enum';
 import { User } from '../generated/entity/teams/user';
 import { useAuth } from '../hooks/authHooks';
@@ -48,6 +52,7 @@ import {
   getOidcExpiry,
   getUserManagerConfig,
 } from '../utils/AuthProvider.util';
+import { getImages } from '../utils/CommonUtils';
 import { fetchAllUsers } from '../utils/UsedDataUtils';
 import { AuthProviderProps, OidcUser } from './AuthProvider.interface';
 
@@ -99,11 +104,40 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({
     history.push(ROUTES.HOME);
   };
 
+  const getUpdatedUser = (data: User, user: OidcUser) => {
+    const getAdminCookie = cookieStorage.getItem(isAdminUpdated);
+    if (getAdminCookie) {
+      appState.updateUserDetails(data);
+    } else {
+      const updatedData = {
+        isAdmin: data.isAdmin,
+        email: data.email,
+        name: data.name,
+        displayName: user.profile.name,
+        profile: { images: getImages(user.profile.picture ?? '') },
+      };
+      updateUser(updatedData)
+        .then((res: AxiosResponse) => {
+          appState.updateUserDetails(res.data);
+          cookieStorage.setItem(isAdminUpdated, 'true');
+        })
+        .catch(() => {
+          showToast({
+            variant: 'error',
+            body: 'Error while updating admin user profile',
+          });
+        });
+    }
+  };
+
   const fetchUserByEmail = (user: OidcUser) => {
     getUserByName(getNameFromEmail(user.profile.email), userAPIQueryFields)
       .then((res: AxiosResponse) => {
         if (res.data) {
-          appState.userDetails = res.data;
+          if (res.data?.isAdmin) {
+            getUpdatedUser(res.data, user);
+          }
+          appState.updateUserDetails(res.data);
           fetchAllUsers();
           handledVerifiedUser();
         } else {
@@ -112,15 +146,15 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({
       })
       .catch((err) => {
         if (err.response.data.code === 404) {
-          appState.newUser = user.profile;
-          appState.userDetails = {} as User;
+          appState.updateNewUser(user.profile);
+          appState.updateUserDetails({} as User);
           history.push(ROUTES.SIGNUP);
         }
       });
   };
 
   const resetUserDetails = () => {
-    appState.userDetails = {} as User;
+    appState.updateUserDetails({} as User);
     cookieStorage.removeItem(oidcTokenKey);
     cookieStorage.removeItem(
       `oidc.user:${userManagerConfig?.authority}:${userManagerConfig?.client_id}`
@@ -133,7 +167,7 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({
     getLoggedInUser(userAPIQueryFields)
       .then((res: AxiosResponse) => {
         if (res.data) {
-          appState.userDetails = res.data;
+          appState.updateUserDetails(res.data);
         } else {
           resetUserDetails();
         }
@@ -166,11 +200,15 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({
           } else {
             getLoggedInUserDetails();
           }
-          // eslint-disable-next-line @typescript-eslint/camelcase
-          appState.authProvider = { authority, provider, client_id: clientId };
-          appState.authDisabled = false;
+          appState.updateAuthProvide({
+            authority,
+            provider,
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            client_id: clientId,
+          });
+          appState.updateAuthState(false);
         } else {
-          appState.authDisabled = true;
+          appState.updateAuthState(true);
           setLoading(false);
         }
       })

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts

@@ -14,6 +14,7 @@
 import { AxiosResponse } from 'axios';
 import { Operation } from 'fast-json-patch';
 import { UserProfile } from 'Models';
+import { User } from '../generated/entity/teams/user';
 import { getURLWithQueryFields } from '../utils/APIUtils';
 import APIClient from './index';
 
@@ -88,6 +89,12 @@ export const getUserById: Function = (id: string): Promise<AxiosResponse> => {
 
 export const createUser = (userDetails: {
   [name: string]: string | Array<string> | UserProfile;
-}) => {
+}): Promise<AxiosResponse> => {
   return APIClient.post(`/users`, userDetails);
 };
+
+export const updateUser = (
+  data: Pick<User, 'email' | 'name' | 'displayName' | 'profile' | 'isAdmin'>
+): Promise<AxiosResponse> => {
+  return APIClient.put('/users', data);
+};

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

@@ -21,6 +21,7 @@ export const SIDEBAR_WIDTH_EXPANDED = 290;
 export const LOCALSTORAGE_RECENTLY_VIEWED = 'recentlyViewedData';
 export const LOCALSTORAGE_RECENTLY_SEARCHED = 'recentlySearchedData';
 export const oidcTokenKey = 'oidcIdToken';
+export const isAdminUpdated = 'isAdminUpdated';
 export const imageTypes = {
   image: 's96-c',
   image192: 's192-c',

openmetadata-ui/src/main/resources/ui/src/pages/signup/index.tsx

@@ -22,25 +22,15 @@ import { createUser } from '../../axiosAPIs/userAPI';
 import { Button } from '../../components/buttons/Button/Button';
 import PageContainer from '../../components/containers/PageContainer';
 import DropDown from '../../components/dropdown/DropDown';
-import { imageTypes, ROUTES } from '../../constants/constants';
+import { ROUTES } from '../../constants/constants';
 import { getNameFromEmail } from '../../utils/AuthProvider.util';
+import { getImages } from '../../utils/CommonUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { fetchAllUsers } from '../../utils/UsedDataUtils';
 type Team = {
   id: string;
   displayName: string;
 };
-const getImages = (imageUri: string) => {
-  const imagesObj: typeof imageTypes = imageTypes;
-  for (const type in imageTypes) {
-    imagesObj[type as keyof typeof imageTypes] = imageUri.replace(
-      's96-c',
-      imageTypes[type as keyof typeof imageTypes]
-    );
-  }
-
-  return imagesObj;
-};
 
 const Signup = () => {
   const [selectedTeams, setSelectedTeams] = useState<Array<string | undefined>>(
@@ -77,7 +67,7 @@ const Signup = () => {
     createUser(details).then((res) => {
       if (res.data) {
         setLoading(false);
-        appState.userDetails = res.data;
+        appState.updateUserDetails(res.data);
         fetchAllUsers();
         history.push(ROUTES.HOME);
       } else {

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -23,6 +23,7 @@ import React from 'react';
 import { reactLocalStorage } from 'reactjs-localstorage';
 import AppState from '../AppState';
 import {
+  imageTypes,
   LOCALSTORAGE_RECENTLY_SEARCHED,
   LOCALSTORAGE_RECENTLY_VIEWED,
   TITLE_FOR_NON_OWNER_ACTION,
@@ -292,3 +293,15 @@ export const errorMsg = (value: string) => {
     </div>
   );
 };
+
+export const getImages = (imageUri: string) => {
+  const imagesObj: typeof imageTypes = imageTypes;
+  for (const type in imageTypes) {
+    imagesObj[type as keyof typeof imageTypes] = imageUri.replace(
+      's96-c',
+      imageTypes[type as keyof typeof imageTypes]
+    );
+  }
+
+  return imagesObj;
+};