From 1d0c6360bfb5dec582bf0a00063c5cc8a946f070 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com>
Date: Wed, 14 Sep 2022 18:00:20 +0530
Subject: [PATCH] Fix(UI) #7441: Fixed issue with profile picture. (#7451)

* Fixed issue with profile picture showing fallback image in navbar even with profile image is present in user details

* Added additional check for displaying profile picture in user details page

* Worked on comments
---
 .../ui/src/components/Users/Users.component.tsx   |  6 ++++++
 .../ui/src/components/nav-bar/NavBar.tsx          | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index cd796035843..2e668411333 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -784,6 +784,12 @@ const Users = ({
     prepareSelectedTeams();
   }, [userData]);
 
+  useEffect(() => {
+    if (image) {
+      SetIsImgUrlValid(true);
+    }
+  }, [image]);
+
   const getEntityData = useCallback(
     (entityData: EntityReference[], tabNumber: number) => {
       const updatedEntityData = filterEntityAssets(entityData || []);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
index 09f497e93a2..a5c3e3477db 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@@ -64,6 +64,11 @@ const NavBar = ({
   handleKeyDown,
   handleOnClick,
 }: NavBarProps) => {
+  // get current user details
+  const currentUser = useMemo(
+    () => AppState.getCurrentUserDetails(),
+    [AppState.userDetails, AppState.nonSecureUserDetails]
+  );
   const history = useHistory();
   const [searchIcon, setSearchIcon] = useState<string>('icon-searchv1');
   const [suggestionSearch, setSuggestionSearch] = useState<string>('');
@@ -75,8 +80,8 @@ const NavBar = ({
   const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(true);
 
   const profilePicture = useMemo(
-    () => AppState?.userDetails?.profile?.images?.image512,
-    [AppState]
+    () => currentUser?.profile?.images?.image512,
+    [currentUser]
   );
 
   const { socket } = useWebSocketConnector();
@@ -212,6 +217,12 @@ const NavBar = ({
     };
   }, [socket]);
 
+  useEffect(() => {
+    if (profilePicture) {
+      SetIsImgUrlValid(true);
+    }
+  }, [profilePicture]);
+
   return (
     <>
       <div className="tw-h-16 tw-py-3 tw-border-b-2 tw-border-separator">