From 5acb443d4a91a2bdccb200c00ad3f34142acbc95 Mon Sep 17 00:00:00 2001
From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com>
Date: Tue, 17 May 2022 11:20:49 +0530
Subject: [PATCH] UI: Add support for User's profile image everywhere (#4856)

---
 .../src/main/resources/ui/src/AppState.ts     | 147 +++++++++++++++++-
 .../resources/ui/src/axiosAPIs/userAPI.ts     |  13 +-
 .../FeedCardFooter/FeedCardFooter.test.tsx    |   6 +-
 .../FeedCardFooter/FeedCardFooter.tsx         |   6 +-
 .../FeedCardHeader/FeedCardHeader.test.tsx    |   4 +-
 .../FeedCardHeader/FeedCardHeader.tsx         |   6 +-
 .../DashboardDetails.component.tsx            |   6 +-
 .../DashboardVersion.component.tsx            |   3 +
 .../DatasetDetails.component.tsx              |   2 +
 .../DatasetVersion.component.tsx              |   3 +
 .../GlossaryDetails.component.tsx             |   8 +-
 .../GlossaryDetails/GlossaryDetails.test.tsx  |   4 +
 .../RelatedTermsModal/RelatedTermsModal.tsx   |   3 +-
 .../ReviewerModal/ReviewerModal.component.tsx |   4 +-
 .../PipelineDetails.component.tsx             |   6 +-
 .../PipelineVersion.component.tsx             |   3 +
 .../components/TeamDetails/TeamDetails.tsx    |   4 +
 .../TopicDetails/TopicDetails.component.tsx   |   6 +-
 .../TopicVersion/TopicVersion.component.tsx   |   3 +
 .../UserDataCard/UserDataCard.test.tsx        |  10 +-
 .../components/UserDataCard/UserDataCard.tsx  |  20 ++-
 .../components/UserDetails/UserDetails.tsx    |   2 +-
 .../ui/src/components/UserList/UserList.tsx   |   2 +-
 .../components/Users/Users.component.test.tsx |   4 +-
 .../src/components/Users/Users.component.tsx  |   9 +-
 .../ProfilePicture/ProfilePicture.test.tsx    |  78 ++++++++++
 .../common/ProfilePicture/ProfilePicture.tsx  | 101 ++++++++++++
 .../src/components/common/avatar/Avatar.tsx   |   3 +-
 .../entityPageInfo/EntityPageInfo.test.tsx    |   4 +-
 .../common/entityPageInfo/EntityPageInfo.tsx  |   8 +-
 .../common/table-data-card/TableDataCard.tsx  |  14 +-
 .../ui/src/components/nav-bar/NavBar.tsx      |   3 +-
 .../components/searched-data/SearchedData.tsx |   2 +-
 .../tags-container/tags-container.test.tsx    |  10 ++
 .../resources/ui/src/constants/constants.ts   |   1 +
 .../resources/ui/src/interface/types.d.ts     |   3 +
 .../DatabaseSchemaPage.component.tsx          |   5 +
 .../ui/src/pages/database-details/index.tsx   |   5 +
 .../resources/ui/src/pages/service/index.tsx  |   5 +
 .../ui/src/pages/teams/CheckboxUserCard.tsx   |  18 ++-
 .../ui/src/pages/teams/UserCard.test.tsx      |   8 +-
 .../resources/ui/src/pages/teams/UserCard.tsx |   8 +-
 .../resources/ui/src/pages/teams/index.tsx    |   5 +
 .../src/main/resources/ui/src/styles/temp.css |  11 +-
 .../resources/ui/src/utils/CommonUtils.tsx    |   2 +-
 .../resources/ui/src/utils/EntityUtils.tsx    |   9 +-
 .../resources/ui/src/utils/UserDataUtils.ts   |  56 ++++++-
 47 files changed, 565 insertions(+), 78 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/AppState.ts b/openmetadata-ui/src/main/resources/ui/src/AppState.ts
index 733bd4eafc4..bbf6fc1a5e3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/AppState.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/AppState.ts
@@ -11,15 +11,18 @@
  *  limitations under the License.
  */
 
-import { isEmpty, isNil } from 'lodash';
+import { isEmpty, isNil, isUndefined } from 'lodash';
 import { action, makeAutoObservable } from 'mobx';
 import { ClientAuth, NewUser, UserPermissions } from 'Models';
+import { reactLocalStorage } from 'reactjs-localstorage';
+import { LOCALSTORAGE_USER_PROFILES } from './constants/constants';
 import { CurrentTourPageType } from './enums/tour.enum';
 import { Role } from './generated/entity/teams/role';
 import {
   EntityReference as UserTeams,
   User,
 } from './generated/entity/teams/user';
+import { ImageList } from './generated/type/profile';
 
 class AppState {
   users: Array<User> = [];
@@ -36,6 +39,15 @@ class AppState {
   userTeams: Array<UserTeams> = [];
   userRoles: Array<Role> = [];
   userPermissions: UserPermissions = {} as UserPermissions;
+  userProfilePics: Array<{
+    id: string;
+    name: string;
+    profile: ImageList['image512'];
+  }> = [];
+  userProfilePicsLoading: Array<{
+    id: string;
+    name: string;
+  }> = [];
 
   inPageSearchText = '';
   explorePageTab = 'tables';
@@ -60,6 +72,13 @@ class AppState {
       getAllTeams: action,
       getAllRoles: action,
       getAllPermissions: action,
+      getUserProfilePic: action,
+      updateUserProfilePic: action,
+      loadUserProfilePics: action,
+      getProfilePicsLoading: action,
+      updateProfilePicsLoading: action,
+      isProfilePicLoading: action,
+      removeProfilePicsLoading: action,
     });
   }
 
@@ -96,6 +115,98 @@ class AppState {
     this.explorePageTab = tab;
   }
 
+  updateUserProfilePic(
+    id?: string,
+    username?: string,
+    profile?: ImageList['image512']
+  ) {
+    if (!id && !username) {
+      return;
+    }
+
+    const filteredList = this.userProfilePics.filter((item) => {
+      // compare id only if present
+      if (item.id && id) {
+        return item.id !== id;
+      } else {
+        return item.name !== username;
+      }
+    });
+    this.userProfilePics = [
+      ...filteredList,
+      {
+        id: id || '',
+        name: username || '',
+        profile,
+      },
+    ];
+
+    reactLocalStorage.setObject(LOCALSTORAGE_USER_PROFILES, {
+      data: this.userProfilePics,
+    });
+
+    return profile;
+  }
+
+  updateProfilePicsLoading(id?: string, username?: string) {
+    if (!id && !username) {
+      return;
+    }
+
+    const alreadyLoading = !isUndefined(
+      this.userProfilePicsLoading.find((loadingItem) => {
+        // compare id only if present
+        if (loadingItem.id && id) {
+          return loadingItem.id === id;
+        } else {
+          return loadingItem.name === username;
+        }
+      })
+    );
+
+    if (!alreadyLoading) {
+      this.userProfilePicsLoading = [
+        ...this.userProfilePicsLoading,
+        {
+          id: id || '',
+          name: username || '',
+        },
+      ];
+    }
+  }
+
+  removeProfilePicsLoading(id?: string, username?: string) {
+    if (!id && !username) {
+      return;
+    }
+
+    const filteredList = this.userProfilePicsLoading.filter((loadingItem) => {
+      // compare id only if present
+      if (loadingItem.id && id) {
+        return loadingItem.id !== id;
+      } else {
+        return loadingItem.name !== username;
+      }
+    });
+
+    this.userProfilePicsLoading = filteredList;
+  }
+
+  loadUserProfilePics() {
+    const { data } = reactLocalStorage.getObject(
+      LOCALSTORAGE_USER_PROFILES
+    ) as {
+      data: Array<{
+        id: string;
+        name: string;
+        profile: ImageList['image512'];
+      }>;
+    };
+    if (data) {
+      this.userProfilePics = data;
+    }
+  }
+
   getCurrentUserDetails() {
     if (!isEmpty(this.userDetails) && !isNil(this.userDetails)) {
       return this.userDetails;
@@ -109,6 +220,40 @@ class AppState {
     }
   }
 
+  getUserProfilePic(id?: string, username?: string) {
+    const data = this.userProfilePics.find((item) => {
+      // compare id only if present
+      if (item.id && id) {
+        return item.id === id;
+      } else {
+        return item.name === username;
+      }
+    });
+
+    return data?.profile;
+  }
+
+  getAllUserProfilePics() {
+    return this.userProfilePics;
+  }
+
+  getProfilePicsLoading() {
+    return this.userProfilePicsLoading;
+  }
+
+  isProfilePicLoading(id?: string, username?: string) {
+    const data = this.userProfilePicsLoading.find((loadingPic) => {
+      // compare id only if present
+      if (loadingPic.id && id) {
+        return loadingPic.id === id;
+      } else {
+        return loadingPic.name === username;
+      }
+    });
+
+    return Boolean(data);
+  }
+
   getAllUsers() {
     return this.users;
   }
diff --git a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts
index 61d5b2e1dce..6d84d8a0411 100644
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts
@@ -64,6 +64,15 @@ export const getUserByName = (
   return APIClient.get(url);
 };
 
+export const getUserById = (
+  id: string,
+  arrQueryFields?: string
+): Promise<AxiosResponse> => {
+  const url = getURLWithQueryFields(`/users/${id}`, arrQueryFields);
+
+  return APIClient.get(url);
+};
+
 export const getLoggedInUser = (arrQueryFields?: string) => {
   const url = getURLWithQueryFields('/users/loggedInUser', arrQueryFields);
 
@@ -98,10 +107,6 @@ export const updateUserTeam: Function = (
   return APIClient.post(`/users/${id}/teams`, options);
 };
 
-export const getUserById: Function = (id: string): Promise<AxiosResponse> => {
-  return APIClient.get(`/users/${id}`);
-};
-
 export const createUser = (
   userDetails: Record<string, string | Array<string> | UserProfile> | CreateUser
 ): Promise<AxiosResponse> => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx
index 838d99a4fff..34324788858 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.test.tsx
@@ -30,8 +30,10 @@ jest.mock('../../../utils/TimeUtils', () => ({
   getDayTimeByTimeStamp: jest.fn(),
 }));
 
-jest.mock('../../common/avatar/Avatar', () => {
-  return jest.fn().mockReturnValue(<p data-testid="replied-user">Avatar</p>);
+jest.mock('../../common/ProfilePicture/ProfilePicture', () => {
+  return jest
+    .fn()
+    .mockReturnValue(<p data-testid="replied-user">ProfilePicture</p>);
 });
 
 const mockFeedCardFooterPorps = {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx
index 3d6c8d85e05..bcda58216a4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardFooter/FeedCardFooter.tsx
@@ -15,7 +15,7 @@ import { isUndefined, toLower } from 'lodash';
 import React, { FC } from 'react';
 import { getReplyText } from '../../../utils/FeedUtils';
 import { getDayTimeByTimeStamp } from '../../../utils/TimeUtils';
-import Avatar from '../../common/avatar/Avatar';
+import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
 import { FeedFooterProp } from '../ActivityFeedCard/ActivityFeedCard.interface';
 
 const FeedCardFooter: FC<FeedFooterProp> = ({
@@ -36,12 +36,12 @@ const FeedCardFooter: FC<FeedFooterProp> = ({
       isFooterVisible ? (
         <div className="tw-flex tw-group">
           {repliedUsers?.map((u, i) => (
-            <Avatar
+            <ProfilePicture
               className="tw-mt-0.5 tw-mx-0.5"
               data-testid="replied-user"
+              id=""
               key={i}
               name={u}
-              type="square"
               width="22"
             />
           ))}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.test.tsx
index 06f8e67e08f..b7fa4e2a5cd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.test.tsx
@@ -39,8 +39,8 @@ jest.mock('../../../utils/TimeUtils', () => ({
   getDayTimeByTimeStamp: jest.fn(),
 }));
 
-jest.mock('../../common/avatar/Avatar', () => {
-  return jest.fn().mockReturnValue(<p>Avatar</p>);
+jest.mock('../../common/ProfilePicture/ProfilePicture', () => {
+  return jest.fn().mockReturnValue(<p>ProfilePicture</p>);
 });
 
 const mockFeedHeaderProps = {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx
index 9130a3524fc..6b7ac630e4c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedCardHeader/FeedCardHeader.tsx
@@ -38,8 +38,8 @@ import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { getEntityLink } from '../../../utils/TableUtils';
 import { getDayTimeByTimeStamp } from '../../../utils/TimeUtils';
 import { Button } from '../../buttons/Button/Button';
-import Avatar from '../../common/avatar/Avatar';
 import PopOver from '../../common/popover/PopOver';
+import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
 import Loader from '../../Loader/Loader';
 import { FeedHeaderProp } from '../ActivityFeedCard/ActivityFeedCard.interface';
 import './FeedCardHeader.style.css';
@@ -92,7 +92,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
               <div>
                 <div className="tw-flex">
                   <div className="tw-mr-2">
-                    <Avatar name={createdBy} type="square" width="30" />
+                    <ProfilePicture id="" name={createdBy} width="30" />
                   </div>
                   <div className="tw-self-center">
                     <Button
@@ -256,7 +256,7 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
           className="tw-cursor-pointer"
           data-testid="authorAvatar"
           onClick={onClickHandler}>
-          <Avatar name={createdBy} type="square" width="30" />
+          <ProfilePicture id="" name={createdBy} width="30" />
         </span>
       </PopOver>
       <h6 className="tw-flex tw-items-center tw-m-0 tw-heading tw-pl-2">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
index 8bb7784bea1..10814c94a25 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@@ -13,7 +13,7 @@
 
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
-import { EntityTags, TagOption } from 'Models';
+import { EntityTags, ExtraInfo, TagOption } from 'Models';
 import React, { RefObject, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
@@ -21,6 +21,7 @@ import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamAndUserDetailsPath } from '../../constants/constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { EntityType } from '../../enums/entity.enum';
+import { OwnerType } from '../../enums/user.enum';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -197,7 +198,7 @@ const DashboardDetails = ({
     },
   ];
 
-  const extraInfo = [
+  const extraInfo: Array<ExtraInfo> = [
     {
       key: 'Owner',
       value:
@@ -210,6 +211,7 @@ const DashboardDetails = ({
       ),
       isLink: owner?.type === 'team',
       openInNewTab: false,
+      profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
       key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx
index c62183f6f20..0bc75cd2933 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx
@@ -17,6 +17,7 @@ import { ExtraInfo } from 'Models';
 import React, { FC, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
+import { OwnerType } from '../../enums/user.enum';
 import { ChangeDescription } from '../../generated/entity/data/dashboard';
 import { TagLabel } from '../../generated/type/tagLabel';
 import { isEven } from '../../utils/CommonUtils';
@@ -141,6 +142,8 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
             : ownerPlaceHolder
             ? getDiffValue(ownerPlaceHolder, ownerPlaceHolder)
             : '',
+        profileName:
+          newOwner?.type === OwnerType.USER ? newOwner?.name : undefined,
       },
       {
         key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
index 1ffb7fb6741..f33f0afa0e4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
@@ -21,6 +21,7 @@ import { getTeamAndUserDetailsPath, ROUTES } from '../../constants/constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { CSMode } from '../../enums/codemirror.enum';
 import { EntityType, FqnPart } from '../../enums/entity.enum';
+import { OwnerType } from '../../enums/user.enum';
 import {
   JoinedWith,
   Table,
@@ -371,6 +372,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       ),
       isLink: owner?.type === 'team',
       openInNewTab: false,
+      profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
       key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx
index 2c58285465a..163220176fe 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx
@@ -17,6 +17,7 @@ import { ExtraInfo } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { FqnPart } from '../../enums/entity.enum';
+import { OwnerType } from '../../enums/user.enum';
 import {
   ChangeDescription,
   Column,
@@ -120,6 +121,8 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
             : ownerPlaceHolder
             ? getDiffValue(ownerPlaceHolder, ownerPlaceHolder)
             : '',
+        profileName:
+          newOwner?.type === OwnerType.USER ? newOwner?.name : undefined,
       },
       {
         key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
index 60ad6b8c949..876d136806d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
@@ -35,9 +35,9 @@ import {
 } from '../../utils/TagsUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import { Button } from '../buttons/Button/Button';
-import Avatar from '../common/avatar/Avatar';
 import Description from '../common/description/Description';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
+import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 import TabsPane from '../common/TabsPane/TabsPane';
 import ManageTabComponent from '../ManageTab/ManageTab.component';
 import ReviewerModal from '../Modals/ReviewerModal/ReviewerModal.component';
@@ -277,8 +277,10 @@ const GlossaryDetails = ({
       <div className="tw-mb-3 tw-flex tw-items-center">
         {glossary.owner && getEntityName(glossary.owner) && (
           <div className="tw-inline-block tw-mr-2">
-            <Avatar
-              name={getEntityName(glossary.owner)}
+            <ProfilePicture
+              displayName={getEntityName(glossary.owner)}
+              id={glossary.owner?.id || ''}
+              name={glossary.owner?.name || ''}
               textClass="tw-text-xs"
               width="20"
             />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx
index 81326e3f16e..f80254e1e74 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx
@@ -55,6 +55,10 @@ jest.mock('../common/rich-text-editor/RichTextEditorPreviewer', () => {
   return jest.fn().mockReturnValue(<p>RichTextEditorPreviewer</p>);
 });
 
+jest.mock('../common/ProfilePicture/ProfilePicture', () => {
+  return jest.fn().mockReturnValue(<p>ProfilePicture</p>);
+});
+
 const mockProps = {
   glossary: mockedGlossaries[0],
   isHasAccess: true,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx
index a0eac03661d..98fa9a90e69 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx
@@ -98,9 +98,10 @@ const RelatedTermsModal = ({
         isCheckBoxes
         item={{
           name: '',
-          description: d.displayName || d.name,
+          displayName: d.displayName || d.name,
           id: d.id,
           isChecked: isIncludeInOptions(d.id),
+          type: d.type,
         }}
         key={d.id}
         onSelect={selectionHandler}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx
index 81e9a2d2cce..5c82484eb6e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx
@@ -116,9 +116,11 @@ const ReviewerModal = ({
         isIconVisible
         item={{
           name: d.name,
-          description: d.displayName,
+          displayName: d.displayName || d.name,
+          email: d.email,
           id: d.id,
           isChecked: isIncludeInOptions(d.id),
+          type: d.type,
         }}
         key={d.id}
         onSelect={selectionHandler}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
index 7dc3ecba288..aee398e6a22 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -14,7 +14,7 @@
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
 import { isNil } from 'lodash';
-import { EntityFieldThreads, EntityTags } from 'Models';
+import { EntityFieldThreads, EntityTags, ExtraInfo } from 'Models';
 import React, { Fragment, RefObject, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
@@ -22,6 +22,7 @@ import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamAndUserDetailsPath } from '../../constants/constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { EntityType } from '../../enums/entity.enum';
+import { OwnerType } from '../../enums/user.enum';
 import { Pipeline, Task } from '../../generated/entity/data/pipeline';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -202,7 +203,7 @@ const PipelineDetails = ({
     },
   ];
 
-  const extraInfo = [
+  const extraInfo: Array<ExtraInfo> = [
     {
       key: 'Owner',
       value:
@@ -215,6 +216,7 @@ const PipelineDetails = ({
       ),
       isLink: owner?.type === 'team',
       openInNewTab: false,
+      profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
       key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx
index da3cc1cdf65..fe19c00a186 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx
@@ -17,6 +17,7 @@ import { ExtraInfo } from 'Models';
 import React, { FC, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
+import { OwnerType } from '../../enums/user.enum';
 import { ChangeDescription } from '../../generated/entity/data/pipeline';
 import { TagLabel } from '../../generated/type/tagLabel';
 import { isEven } from '../../utils/CommonUtils';
@@ -141,6 +142,8 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
             : ownerPlaceHolder
             ? getDiffValue(ownerPlaceHolder, ownerPlaceHolder)
             : '',
+        profileName:
+          newOwner?.type === OwnerType.USER ? newOwner?.name : undefined,
       },
       {
         key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
index f064bf5389b..50ec4fbc49d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
@@ -151,6 +151,10 @@ const TeamDetails = ({
       currentTeam?.owner?.displayName || currentTeam?.owner?.name || '',
     isLink: currentTeam?.owner?.type === 'team',
     openInNewTab: false,
+    profileName:
+      currentTeam?.owner?.type === OwnerType.USER
+        ? currentTeam?.owner?.name
+        : undefined,
   };
 
   const isActionAllowed = (operation = false) => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
index 60fb2be9422..4ffebf476e3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
@@ -11,13 +11,14 @@
  *  limitations under the License.
  */
 
-import { EntityTags } from 'Models';
+import { EntityTags, ExtraInfo } from 'Models';
 import React, { Fragment, RefObject, useEffect, useState } from 'react';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamAndUserDetailsPath } from '../../constants/constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { EntityType } from '../../enums/entity.enum';
+import { OwnerType } from '../../enums/user.enum';
 import { Topic } from '../../generated/entity/data/topic';
 import { EntityReference } from '../../generated/type/entityReference';
 import { Paging } from '../../generated/type/paging';
@@ -207,7 +208,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
       position: 5,
     },
   ];
-  const extraInfo = [
+  const extraInfo: Array<ExtraInfo> = [
     {
       key: 'Owner',
       value:
@@ -220,6 +221,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
       ),
       isLink: owner?.type === 'team',
       openInNewTab: false,
+      profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
       key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
index 1b1b8c58cda..bfec37503dd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
@@ -16,6 +16,7 @@ import { isUndefined } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { FC, useEffect, useState } from 'react';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
+import { OwnerType } from '../../enums/user.enum';
 import { ChangeDescription } from '../../generated/entity/data/topic';
 import { TagLabel } from '../../generated/type/tagLabel';
 import {
@@ -172,6 +173,8 @@ const TopicVersion: FC<TopicVersionProp> = ({
             : ownerPlaceHolder
             ? getDiffValue(ownerPlaceHolder, ownerPlaceHolder)
             : '',
+        profileName:
+          newOwner?.type === OwnerType.USER ? newOwner?.name : undefined,
       },
       {
         key: 'Tier',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.test.tsx
index c19056a558e..64a33f8dd3d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.test.tsx
@@ -17,7 +17,7 @@ import { MemoryRouter } from 'react-router-dom';
 import UserDataCard from './UserDataCard';
 
 const mockItem = {
-  description: 'description1',
+  displayName: 'description1',
   name: 'name1',
   id: 'id1',
   email: 'string@email.com',
@@ -41,8 +41,10 @@ jest.mock('../../authentication/auth-provider/AuthProvider', () => {
   };
 });
 
-jest.mock('../../components/common/avatar/Avatar', () => {
-  return jest.fn().mockReturnValue(<p data-testid="avatar">Avatar</p>);
+jest.mock('../../components/common/ProfilePicture/ProfilePicture', () => {
+  return jest
+    .fn()
+    .mockReturnValue(<p data-testid="profile-picture">ProfilePicture</p>);
 });
 
 jest.mock('../../utils/SvgUtils', () => {
@@ -69,7 +71,7 @@ describe('Test UserDataCard component', () => {
     );
 
     const cardContainer = await findByTestId(container, 'user-card-container');
-    const avatar = await findByTestId(container, 'avatar');
+    const avatar = await findByTestId(container, 'profile-picture');
 
     expect(avatar).toBeInTheDocument();
     expect(cardContainer).toBeInTheDocument();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx
index f245c76c1fb..47ce78d155d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserDataCard/UserDataCard.tsx
@@ -15,11 +15,11 @@ import classNames from 'classnames';
 import { isNil } from 'lodash';
 import React from 'react';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
-import Avatar from '../common/avatar/Avatar';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
+import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 
 type Item = {
-  description: string;
+  displayName: string;
   name: string;
   id?: string;
   email: string;
@@ -41,13 +41,11 @@ const UserDataCard = ({ item, onClick, onDelete, showTeams = true }: Props) => {
       className="tw-card tw-flex tw-justify-between tw-py-2 tw-px-3 tw-group"
       data-testid="user-card-container">
       <div className="tw-flex tw-gap-1">
-        {item.profilePhoto ? (
-          <div className="tw-h-9 tw-w-9">
-            <img alt="profile" className="tw-w-full" src={item.profilePhoto} />
-          </div>
-        ) : (
-          <Avatar name={item.description} />
-        )}
+        <ProfilePicture
+          displayName={item?.displayName}
+          id={item?.id || ''}
+          name={item?.name || ''}
+        />
 
         <div
           className="tw-flex tw-flex-col tw-flex-1 tw-pl-2"
@@ -60,7 +58,7 @@ const UserDataCard = ({ item, onClick, onDelete, showTeams = true }: Props) => {
               onClick={() => {
                 onClick?.(item.name);
               }}>
-              {item.description}
+              {item.displayName}
             </p>
             {!item?.isActiveUser && (
               <span className="tw-text-xs tw-bg-badge tw-border tw-px-2 tw-py-0.5 tw-rounded">
@@ -83,7 +81,7 @@ const UserDataCard = ({ item, onClick, onDelete, showTeams = true }: Props) => {
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                onDelete(item.id as string, item.description);
+                onDelete(item.id as string, item.displayName);
               }}>
               <SVGIcons
                 alt="delete"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx
index 57f88ebb9b2..e9f68c96ce6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserDetails/UserDetails.tsx
@@ -107,7 +107,7 @@ const UserDetails = ({
             data-testid="user-card-container">
             {selectedUserList.map((user, index) => {
               const User = {
-                description: getEntityName(user as unknown as EntityReference),
+                displayName: getEntityName(user as unknown as EntityReference),
                 name: user.name || '',
                 id: user.id,
                 email: user.email || '',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
index e7ed64b164f..f38d5082fa6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
@@ -347,7 +347,7 @@ const UserList: FunctionComponent<Props> = ({
           data-testid="user-card-container">
           {listUserData.map((user, index) => {
             const User = {
-              description: getEntityName(user as unknown as EntityReference),
+              displayName: getEntityName(user as unknown as EntityReference),
               name: user.name || '',
               id: user.id,
               email: user.email || '',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx
index 286e14c3741..f20cdec430d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx
@@ -109,8 +109,8 @@ const mockUserData = {
   ],
 };
 
-jest.mock('../common/avatar/Avatar', () => {
-  return jest.fn().mockReturnValue(<p>Avatar</p>);
+jest.mock('../common/ProfilePicture/ProfilePicture', () => {
+  return jest.fn().mockReturnValue(<p>ProfilePicture</p>);
 });
 
 jest.mock('../../pages/teams/UserCard', () => {
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 b9d400566d2..6cbda07a51d 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
@@ -45,8 +45,8 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import ActivityFeedList from '../ActivityFeed/ActivityFeedList/ActivityFeedList';
 import { Button } from '../buttons/Button/Button';
-import Avatar from '../common/avatar/Avatar';
 import Description from '../common/description/Description';
+import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 import TabsPane from '../common/TabsPane/TabsPane';
 import PageLayout from '../containers/PageLayout';
@@ -525,12 +525,15 @@ const Users = ({
               <img
                 alt="profile"
                 className="tw-w-full"
+                referrerPolicy="no-referrer"
                 src={userData.profile?.images?.image}
               />
             </div>
           ) : (
-            <Avatar
-              name={userData?.displayName || userData.name}
+            <ProfilePicture
+              displayName={userData?.displayName || userData.name}
+              id={userData?.id || ''}
+              name={userData?.name || ''}
               textClass="tw-text-5xl"
               width="112"
             />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.test.tsx
new file mode 100644
index 00000000000..f0fa4147ea0
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.test.tsx
@@ -0,0 +1,78 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { findByTestId, findByText, render } from '@testing-library/react';
+import React from 'react';
+import AppState from '../../../AppState';
+import { getUserProfilePic } from '../../../utils/UserDataUtils';
+import ProfilePicture from './ProfilePicture';
+
+jest.mock('../avatar/Avatar', () => {
+  return jest.fn().mockImplementation(() => <div>Avatar</div>);
+});
+
+jest.mock('../../../utils/UserDataUtils', () => {
+  return {
+    fetchAllUsers: jest.fn(),
+    fetchUserProfilePic: jest.fn(),
+    getUserDataFromOidc: jest.fn(),
+    getUserProfilePic: jest.fn(),
+    matchUserDetails: jest.fn(),
+  };
+});
+
+const mockData = {
+  id: 'test-1',
+  name: 'test-name',
+};
+
+const mockGetUserProfilePic = jest.fn(() => 'mockedProfilePic');
+
+beforeAll(() => {
+  jest.spyOn(AppState, 'isProfilePicLoading').mockImplementation(() => false);
+});
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+
+describe('Test ProfilePicture component', () => {
+  it('ProfilePicture component should render with Avatar', async () => {
+    const { container } = render(<ProfilePicture {...mockData} />);
+
+    const avatar = await findByText(container, 'Avatar');
+
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('Profile image should load', async () => {
+    (getUserProfilePic as jest.Mock).mockImplementationOnce(
+      mockGetUserProfilePic
+    );
+    const { container } = render(<ProfilePicture {...mockData} />);
+
+    const image = await findByTestId(container, 'profile-image');
+
+    expect(image).toBeInTheDocument();
+  });
+
+  it('Profile Avatar should be loading', async () => {
+    jest.spyOn(AppState, 'isProfilePicLoading').mockImplementation(() => true);
+
+    const { container } = render(<ProfilePicture {...mockData} />);
+
+    const loader = await findByTestId(container, 'loader-cntnr');
+
+    expect(loader).toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.tsx
new file mode 100644
index 00000000000..a9bb941da1e
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.tsx
@@ -0,0 +1,101 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { ImageShape } from 'Models';
+import React, { useMemo } from 'react';
+import AppState from '../../../AppState';
+import { EntityReference, User } from '../../../generated/entity/teams/user';
+import { getEntityName } from '../../../utils/CommonUtils';
+import { getUserProfilePic } from '../../../utils/UserDataUtils';
+import Loader from '../../Loader/Loader';
+import Avatar from '../avatar/Avatar';
+
+type UserData = Pick<User, 'id' | 'name' | 'displayName'>;
+
+interface Props extends UserData {
+  width?: string;
+  type?: ImageShape;
+  textClass?: string;
+  className?: string;
+}
+
+const ProfilePicture = ({
+  id,
+  name,
+  displayName,
+  className = '',
+  textClass = '',
+  type = 'square',
+  width = '36',
+}: Props) => {
+  const profilePic = useMemo(() => {
+    return getUserProfilePic(id, name);
+  }, [id, name, AppState.userProfilePics]);
+
+  const isPicLoading = useMemo(() => {
+    return AppState.isProfilePicLoading(id, name);
+  }, [id, name, AppState.userProfilePicsLoading]);
+
+  const getAvatarByName = () => {
+    return (
+      <Avatar
+        className={className}
+        name={getEntityName({ name, displayName } as EntityReference)}
+        textClass={textClass}
+        type={type}
+        width={width}
+      />
+    );
+  };
+
+  const getAvatarElement = () => {
+    return isPicLoading ? (
+      <div
+        className="tw-inline-block tw-relative"
+        style={{ height: `${width}px`, width: `${width}px` }}>
+        {getAvatarByName()}
+        <div
+          className="tw-absolute tw-inset-0 tw-opacity-60 tw-bg-grey-backdrop tw-rounded"
+          data-testid="loader-cntnr">
+          <Loader
+            className="tw-absolute tw-inset-0"
+            size="small"
+            style={{ height: `${+width - 2}px`, width: `${+width - 2}px` }}
+            type="white"
+          />
+        </div>
+      </div>
+    ) : (
+      getAvatarByName()
+    );
+  };
+
+  return profilePic ? (
+    <div
+      className={classNames('profile-image', type)}
+      style={{ height: `${width}px`, width: `${width}px` }}>
+      <img
+        alt="user"
+        data-testid="profile-image"
+        referrerPolicy="no-referrer"
+        src={profilePic}
+      />
+    </div>
+  ) : (
+    getAvatarElement()
+  );
+};
+
+export default observer(ProfilePicture);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
index 499a2a3b4ac..d0ca217542c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
@@ -12,6 +12,7 @@
  */
 
 import classNames from 'classnames';
+import { ImageShape } from 'Models';
 import React from 'react';
 import { getRandomColor } from '../../../utils/CommonUtils';
 
@@ -26,7 +27,7 @@ const Avatar = ({
   width?: string;
   textClass?: string;
   className?: string;
-  type?: 'circle' | 'square';
+  type?: ImageShape;
 }) => {
   const { color, character } = getRandomColor(name);
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.test.tsx
index a0864cb99e3..d6776f278ef 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.test.tsx
@@ -153,8 +153,8 @@ jest.mock('../../tags/tags', () => {
   return jest.fn().mockReturnValue(<p data-testid="tier-tag">Tag</p>);
 });
 
-jest.mock('../avatar/Avatar', () => {
-  return jest.fn().mockReturnValue(<p>Avatar</p>);
+jest.mock('../ProfilePicture/ProfilePicture', () => {
+  return jest.fn().mockReturnValue(<p>ProfilePicture</p>);
 });
 
 jest.mock('./FollowersModal', () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
index 4bfac2f541a..cf7edd2d485 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@@ -34,9 +34,9 @@ import { getTagCategories, getTaglist } from '../../../utils/TagsUtils';
 import TagsContainer from '../../tags-container/tags-container';
 import TagsViewer from '../../tags-viewer/tags-viewer';
 import Tags from '../../tags/tags';
-import Avatar from '../avatar/Avatar';
 import NonAdminAction from '../non-admin-action/NonAdminAction';
 import PopOver from '../popover/PopOver';
+import ProfilePicture from '../ProfilePicture/ProfilePicture';
 import TitleBreadcrumb from '../title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../title-breadcrumb/title-breadcrumb.interface';
 import FollowersModal from './FollowersModal';
@@ -157,8 +157,10 @@ const EntityPageInfo = ({
             })}>
             {list.slice(0, FOLLOWERS_VIEW_CAP).map((follower, index) => (
               <div className="tw-flex" key={index}>
-                <Avatar
-                  name={(follower?.displayName || follower?.name) as string}
+                <ProfilePicture
+                  displayName={follower?.displayName || follower?.name}
+                  id={follower?.id || ''}
+                  name={follower?.name || ''}
                   width="20"
                 />
                 <span className="tw-self-center tw-ml-2">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
index 2527086f08b..d0e80300bdd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
@@ -22,8 +22,11 @@ import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { ROUTES } from '../../../constants/constants';
 import { SearchIndex } from '../../../enums/search.enum';
 import { CurrentTourPageType } from '../../../enums/tour.enum';
+import { OwnerType } from '../../../enums/user.enum';
 import { TableType } from '../../../generated/entity/data/table';
+import { EntityReference } from '../../../generated/type/entityReference';
 import { TagLabel } from '../../../generated/type/tagLabel';
+import { getEntityName } from '../../../utils/CommonUtils';
 import { serviceTypeLogo } from '../../../utils/ServiceUtils';
 import { stringToHTML } from '../../../utils/StringsUtils';
 import { getEntityLink, getUsagePercentile } from '../../../utils/TableUtils';
@@ -32,7 +35,7 @@ import TableDataCardBody from './TableDataCardBody';
 
 type Props = {
   name: string;
-  owner?: string;
+  owner?: EntityReference;
   description?: string;
   tableType?: TableType;
   id?: string;
@@ -53,7 +56,7 @@ type Props = {
 };
 
 const TableDataCard: FunctionComponent<Props> = ({
-  owner = '',
+  owner,
   description,
   id,
   tier = '',
@@ -80,7 +83,12 @@ const TableDataCard: FunctionComponent<Props> = ({
   };
 
   const OtherDetails: Array<ExtraInfo> = [
-    { key: 'Owner', value: owner, avatarWidth: '16' },
+    {
+      key: 'Owner',
+      value: getEntityName(owner),
+      avatarWidth: '16',
+      profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
+    },
     { key: 'Tier', value: getTier() },
   ];
   if (indexType !== SearchIndex.DASHBOARD && usage !== undefined) {
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 18756229eb2..c213afa93fd 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
@@ -177,9 +177,10 @@ const NavBar = ({
                     title="Profile"
                     trigger="mouseenter">
                     {AppState?.userDetails?.profile?.images?.image512 ? (
-                      <div className="profile-image tw--mr-2">
+                      <div className="profile-image square tw--mr-2">
                         <img
                           alt="user"
+                          referrerPolicy="no-referrer"
                           src={AppState.userDetails.profile.images.image512}
                         />
                       </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
index 1aea1941921..ea78d52b04b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
@@ -112,7 +112,7 @@ const SearchedData: React.FC<SearchedDataProp> = ({
             indexType={table.index}
             matches={matches}
             name={name}
-            owner={table.owner?.displayName || table.owner?.name}
+            owner={table.owner}
             service={table.service}
             serviceType={table.serviceType || '--'}
             tableType={table.tableType as TableType}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.test.tsx
index 61ad6582928..a382faf8d9b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.test.tsx
@@ -36,6 +36,16 @@ const tagListWithTier = [
 const onCancel = jest.fn();
 const onSelectionChange = jest.fn();
 
+jest.mock('../../utils/UserDataUtils', () => {
+  return {
+    fetchAllUsers: jest.fn(),
+    fetchUserProfilePic: jest.fn(),
+    getUserDataFromOidc: jest.fn(),
+    getUserProfilePic: jest.fn(),
+    matchUserDetails: jest.fn(),
+  };
+});
+
 jest.mock('../tags/tags', () => {
   return jest.fn().mockReturnValue(<p>tags</p>);
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
index 9543fa48b16..299223c6f72 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@@ -31,6 +31,7 @@ export const INGESTION_PROGRESS_END_VAL = 80;
 export const DEPLOYED_PROGRESS_VAL = 100;
 export const LOCALSTORAGE_RECENTLY_VIEWED = `recentlyViewedData_${COOKIE_VERSION}`;
 export const LOCALSTORAGE_RECENTLY_SEARCHED = `recentlySearchedData_${COOKIE_VERSION}`;
+export const LOCALSTORAGE_USER_PROFILES = 'userProfiles';
 export const oidcTokenKey = 'oidcIdToken';
 export const TERM_ADMIN = 'Admin';
 export const TERM_USER = 'User';
diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts
index 97875d914be..379c39b44c8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts
@@ -495,6 +495,7 @@ declare module 'Models' {
     openInNewTab?: boolean;
     showLabel?: boolean;
     avatarWidth?: string;
+    profileName?: string;
   };
 
   export type TourSteps = {
@@ -603,4 +604,6 @@ declare module 'Models' {
     count: number;
     entityField: string;
   }
+
+  export type ImageShape = 'circle' | 'square';
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
index 1b35ea34cea..5c6da3c0069 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
@@ -64,6 +64,7 @@ import {
 import { observerOptions } from '../../constants/Mydata.constants';
 import { EntityType, FqnPart, TabSpecificField } from '../../enums/entity.enum';
 import { ServiceCategory } from '../../enums/service.enum';
+import { OwnerType } from '../../enums/user.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
 import { Table } from '../../generated/entity/data/table';
@@ -189,6 +190,10 @@ const DatabaseSchemaPage: FunctionComponent = () => {
         databaseSchema?.owner?.displayName || databaseSchema?.owner?.name || '',
       isLink: databaseSchema?.owner?.type === 'team',
       openInNewTab: false,
+      profileName:
+        databaseSchema?.owner?.type === OwnerType.USER
+          ? databaseSchema?.owner?.name
+          : undefined,
     },
   ];
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
index 98998eb527c..0ce0df7536e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
@@ -64,6 +64,7 @@ import {
 import { observerOptions } from '../../constants/Mydata.constants';
 import { EntityType, TabSpecificField } from '../../enums/entity.enum';
 import { ServiceCategory } from '../../enums/service.enum';
+import { OwnerType } from '../../enums/user.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
 import { Database } from '../../generated/entity/data/database';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
@@ -194,6 +195,10 @@ const DatabaseDetails: FunctionComponent = () => {
         database?.owner?.displayName || database?.owner?.name || '',
       isLink: database?.owner?.type === 'team',
       openInNewTab: false,
+      profileName:
+        database?.owner?.type === OwnerType.USER
+          ? database?.owner?.name
+          : undefined,
     },
   ];
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index 192fdc5e2a4..7738744bf89 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@@ -53,6 +53,7 @@ import {
 } from '../../constants/constants';
 import { SearchIndex } from '../../enums/search.enum';
 import { ServiceCategory } from '../../enums/service.enum';
+import { OwnerType } from '../../enums/user.enum';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { Database } from '../../generated/entity/data/database';
 import { Pipeline } from '../../generated/entity/data/pipeline';
@@ -193,6 +194,10 @@ const ServicePage: FunctionComponent = () => {
       placeholderText: serviceDetails?.owner?.displayName || '',
       isLink: serviceDetails?.owner?.type === 'team',
       openInNewTab: false,
+      profileName:
+        serviceDetails?.owner?.type === OwnerType.USER
+          ? serviceDetails?.owner?.name
+          : undefined,
     },
   ];
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
index 0b49a5dce12..c85cf62dccd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
@@ -13,12 +13,16 @@
 
 import classNames from 'classnames';
 import { capitalize } from 'lodash';
+import { FormattedUsersData } from 'Models';
 import React, { useState } from 'react';
-import Avatar from '../../components/common/avatar/Avatar';
+import ProfilePicture from '../../components/common/ProfilePicture/ProfilePicture';
 import SVGIcons from '../../utils/SvgUtils';
 
 type Props = {
-  item: { description: string; name: string; id: string; isChecked: boolean };
+  item: Pick<FormattedUsersData, 'displayName' | 'id' | 'name' | 'type'> & {
+    email?: string;
+    isChecked: boolean;
+  };
   isActionVisible?: boolean;
   isIconVisible?: boolean;
   isCheckBoxes?: boolean;
@@ -44,7 +48,11 @@ const CheckboxUserCard = ({
       data-testid="user-card-container">
       {isIconVisible && (
         <div className="tw-flex tw-mr-2">
-          <Avatar name={item.description || item.name} />
+          <ProfilePicture
+            displayName={item.displayName || item.name}
+            id={item.id || ''}
+            name={item.name || ''}
+          />
         </div>
       )}
       <div
@@ -56,8 +64,8 @@ const CheckboxUserCard = ({
               'tw-font-normal',
               isActionVisible ? 'tw-truncate tw-w-32' : null
             )}
-            title={item.description}>
-            {item.description}
+            title={item.displayName}>
+            {item.displayName}
           </p>
           {item.name && (
             <p
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.test.tsx
index 0122c6c424d..023c6a881f0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.test.tsx
@@ -37,8 +37,10 @@ jest.mock('../../authentication/auth-provider/AuthProvider', () => {
   };
 });
 
-jest.mock('../../components/common/avatar/Avatar', () => {
-  return jest.fn().mockReturnValue(<p data-testid="avatar">Avatar</p>);
+jest.mock('../../components/common/ProfilePicture/ProfilePicture', () => {
+  return jest
+    .fn()
+    .mockReturnValue(<p data-testid="profile-picture">ProfilePicture</p>);
 });
 
 jest.mock('../../utils/SvgUtils', () => {
@@ -60,7 +62,7 @@ describe('Test userCard component', () => {
     });
 
     const cardContainer = await findByTestId(container, 'user-card-container');
-    const avatar = await findByTestId(container, 'avatar');
+    const avatar = await findByTestId(container, 'profile-picture');
 
     expect(avatar).toBeInTheDocument();
     expect(cardContainer).toBeInTheDocument();
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
index 99f0135e15a..5d10f96f2d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
@@ -17,8 +17,8 @@ import { capitalize } from 'lodash';
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
-import Avatar from '../../components/common/avatar/Avatar';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
+import ProfilePicture from '../../components/common/ProfilePicture/ProfilePicture';
 import { AssetsType, FqnPart } from '../../enums/entity.enum';
 import { SearchIndex } from '../../enums/search.enum';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
@@ -157,7 +157,11 @@ const UserCard = ({
       data-testid="user-card-container">
       <div className={`tw-flex ${isCheckBoxes ? 'tw-mr-2' : 'tw-gap-1'}`}>
         {isIconVisible && !isDataset ? (
-          <Avatar name={item.displayName} />
+          <ProfilePicture
+            displayName={item.displayName || item.name}
+            id={item.id || ''}
+            name={item.name || ''}
+          />
         ) : (
           <Fragment>{getDatasetIcon(item.type)}</Fragment>
         )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
index 996b1fa9e93..85cf489cbc0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
@@ -43,6 +43,7 @@ import {
   getTeamAndUserDetailsPath,
   TITLE_FOR_NON_ADMIN_ACTION,
 } from '../../constants/constants';
+import { OwnerType } from '../../enums/user.enum';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { Team } from '../../generated/entity/teams/team';
 import {
@@ -103,6 +104,10 @@ const TeamsPage = () => {
         currentTeam?.owner?.displayName || currentTeam?.owner?.name || '',
       isLink: currentTeam?.owner?.type === 'team',
       openInNewTab: false,
+      profileName:
+        currentTeam?.owner?.type === OwnerType.USER
+          ? currentTeam?.owner?.name
+          : undefined,
     },
   ];
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
index ef44658730a..5f5fb9e97ed 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
@@ -24,10 +24,19 @@
 
 .profile-image svg,
 .profile-image img {
-  border-radius: 50%;
   display: inline-block;
 }
 
+.profile-image.circle svg,
+.profile-image.circle img {
+  border-radius: 50%;
+}
+
+.profile-image.square svg,
+.profile-image.square img {
+  border-radius: 4px;
+}
+
 .teams-dropdown {
   height: 36px;
   background-color: transparent !important;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
index c49c474d69f..004b9186bc3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@@ -622,7 +622,7 @@ export const getEntityPlaceHolder = (value: string, isDeleted?: boolean) => {
  * @param entity - entity reference
  * @returns - entity name
  */
-export const getEntityName = (entity: EntityReference) => {
+export const getEntityName = (entity?: EntityReference) => {
   return entity?.displayName || entity?.name || '';
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
index 2d007c7bca5..7c7d637395f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@@ -15,7 +15,7 @@ import classNames from 'classnames';
 import { isEmpty, isNil, isString, isUndefined, startCase } from 'lodash';
 import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models';
 import React from 'react';
-import Avatar from '../components/common/avatar/Avatar';
+import ProfilePicture from '../components/common/ProfilePicture/ProfilePicture';
 import TableProfilerGraph from '../components/TableProfiler/TableProfilerGraph.component';
 import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import {
@@ -382,9 +382,10 @@ export const getInfoElements = (data: ExtraInfo) => {
           displayVal && displayVal !== '--' ? (
             isString(displayVal) ? (
               <div className="tw-inline-block tw-mr-2">
-                <Avatar
-                  name={displayVal}
-                  textClass="tw-text-xs"
+                <ProfilePicture
+                  displayName={displayVal}
+                  id=""
+                  name={data.profileName || ''}
                   width={data.avatarWidth || '20'}
                 />
               </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/UserDataUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/UserDataUtils.ts
index d184edac67d..0657a6217b1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/UserDataUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/UserDataUtils.ts
@@ -11,13 +11,13 @@
  *  limitations under the License.
  */
 
-import { AxiosResponse } from 'axios';
-import { isEmpty, isEqual } from 'lodash';
+import { AxiosError, AxiosResponse } from 'axios';
+import { isEmpty, isEqual, isUndefined } from 'lodash';
 import AppState from '../AppState';
 import { OidcUser } from '../authentication/auth-provider/AuthProvider.interface';
 import { getRoles } from '../axiosAPIs/rolesAPI';
 import { getTeams } from '../axiosAPIs/teamsAPI';
-import { getUsers } from '../axiosAPIs/userAPI';
+import { getUserById, getUserByName, getUsers } from '../axiosAPIs/userAPI';
 import { API_RES_MAX_SIZE } from '../constants/constants';
 import { User } from '../generated/entity/teams/user';
 import { getImages } from './CommonUtils';
@@ -54,6 +54,7 @@ const getAllRoles = (): void => {
 };
 
 export const fetchAllUsers = () => {
+  AppState.loadUserProfilePics();
   getAllUsersList('profile,teams,roles');
   getAllTeams();
   getAllRoles();
@@ -90,3 +91,52 @@ export const matchUserDetails = (
 
   return isMatch;
 };
+
+export const fetchUserProfilePic = (userId?: string, username?: string) => {
+  let promise;
+
+  if (userId) {
+    promise = getUserById(userId, 'profile');
+  } else if (username) {
+    promise = getUserByName(username, 'profile');
+  } else {
+    return;
+  }
+
+  AppState.updateProfilePicsLoading(userId, username);
+
+  promise
+    .then((res) => {
+      const userData = res.data as User;
+      const profile = userData.profile?.images?.image512 || '';
+
+      AppState.updateUserProfilePic(userData.id, userData.name, profile);
+    })
+    .catch((err: AxiosError) => {
+      // ignore exception
+      AppState.updateUserProfilePic(
+        userId,
+        username,
+        err.response?.status === 404 ? '' : undefined
+      );
+    })
+    .finally(() => {
+      AppState.removeProfilePicsLoading(userId, username);
+    });
+};
+
+export const getUserProfilePic = (userId?: string, username?: string) => {
+  let profile;
+  if (userId || username) {
+    profile = AppState.getUserProfilePic(userId, username);
+
+    if (
+      isUndefined(profile) &&
+      !AppState.isProfilePicLoading(userId, username)
+    ) {
+      fetchUserProfilePic(userId, username);
+    }
+  }
+
+  return profile;
+};