yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-09 23:40:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Fixed the issue with profile picture not showing properly (#7329)

Browse Source 
* Fixed the issue with profile picture not showing properly

* minor bug fix

* removed preview for Images
This commit is contained in:
Aniket Katkar 2022-09-08 18:36:46 +05:30 committed by GitHub
parent 2fbee6bb87
commit 008a7ef06f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts
View File

@ -185,9 +185,3 @@ export const getGroupTypeTeams = async () => {
return response.data; return response.data;
}; };
export const checkValidImage = async (url: string) => {
const response = await APIClient(url);
return response.status;
};

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

@ -12,7 +12,7 @@
*/ */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Card, Space, Switch } from 'antd'; import { Card, Image, Space, Switch } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { capitalize, isEmpty, isEqual, isNil, toLower } from 'lodash'; import { capitalize, isEmpty, isEqual, isNil, toLower } from 'lodash';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
@ -28,7 +28,6 @@ import { useHistory, useLocation } from 'react-router-dom';
import Select from 'react-select'; import Select from 'react-select';
import AppState from '../../AppState'; import AppState from '../../AppState';
import { getTeams } from '../../axiosAPIs/teamsAPI'; import { getTeams } from '../../axiosAPIs/teamsAPI';
import { checkValidImage } from '../../axiosAPIs/userAPI';
import { getUserPath, TERM_ADMIN } from '../../constants/constants'; import { getUserPath, TERM_ADMIN } from '../../constants/constants';
import { observerOptions } from '../../constants/Mydata.constants'; import { observerOptions } from '../../constants/Mydata.constants';
import { import {
@ -102,7 +101,7 @@ const Users = ({
const [roles, setRoles] = useState<Array<Role>>([]); const [roles, setRoles] = useState<Array<Role>>([]);
const history = useHistory(); const history = useHistory();
const [showFilterList, setShowFilterList] = useState(false); const [showFilterList, setShowFilterList] = useState(false);
const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(false); const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(true);
const location = useLocation(); const location = useLocation();
@ -635,15 +634,16 @@ const Users = ({
}}> }}>
<div className="tw-flex tw-flex-col"> <div className="tw-flex tw-flex-col">
{isImgUrlValid ? ( {isImgUrlValid ? (
<div> <Image
<img alt="profile"
alt="profile" className="tw-w-full"
className="tw-w-full" preview={false}
height="150px" referrerPolicy="no-referrer"
referrerPolicy="no-referrer" src={image || ''}
src={image} onError={() => {
/> SetIsImgUrlValid(false);
</div> }}
/>
) : ( ) : (
<div style={{ width: 'inherit' }}> <div style={{ width: 'inherit' }}>
<ProfilePicture <ProfilePicture
@ -767,16 +767,6 @@ const Users = ({
} }
}; };
const validateImgUrl = useCallback(async (url: string) => {
const response = await checkValidImage(url);
SetIsImgUrlValid(response === 200);
}, []);
useEffect(() => {
image && validateImgUrl(image);
}, [image]);
useEffect(() => { useEffect(() => {
fetchMoreFeed(isInView as boolean, paging, isFeedLoading); fetchMoreFeed(isInView as boolean, paging, isFeedLoading);
}, [isInView, paging, isFeedLoading]); }, [isInView, paging, isFeedLoading]);

53
openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
View File

@ -11,13 +11,12 @@
* limitations under the License. * limitations under the License.
*/ */
import { Badge, Dropdown, Input, Space } from 'antd'; import { Badge, Dropdown, Image, Input, Space } from 'antd';
import { debounce, toString } from 'lodash'; import { debounce, toString } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, NavLink, useHistory } from 'react-router-dom'; import { Link, NavLink, useHistory } from 'react-router-dom';
import AppState from '../../AppState'; import AppState from '../../AppState';
import Logo from '../../assets/svg/logo-monogram.svg'; import Logo from '../../assets/svg/logo-monogram.svg';
import { checkValidImage } from '../../axiosAPIs/userAPI';
import { import {
NOTIFICATION_READ_TIMER, NOTIFICATION_READ_TIMER,
ROUTES, ROUTES,
@ -73,7 +72,7 @@ const NavBar = ({
const [hasMentionNotification, setHasMentionNotification] = const [hasMentionNotification, setHasMentionNotification] =
useState<boolean>(false); useState<boolean>(false);
const [activeTab, setActiveTab] = useState<string>('Task'); const [activeTab, setActiveTab] = useState<string>('Task');
const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(false); const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(true);
const profilePicture = useMemo( const profilePicture = useMemo(
() => AppState?.userDetails?.profile?.images?.image512, () => AppState?.userDetails?.profile?.images?.image512,
@ -172,16 +171,6 @@ const NavBar = ({
}; };
}; };
const validateImgUrl = useCallback(async (url: string) => {
const response = await checkValidImage(url);
SetIsImgUrlValid(response === 200);
}, []);
useEffect(() => {
profilePicture && validateImgUrl(profilePicture);
}, [profilePicture, validateImgUrl]);
useEffect(() => { useEffect(() => {
if (shouldRequestPermission()) { if (shouldRequestPermission()) {
Notification.requestPermission(); Notification.requestPermission();
@ -400,24 +389,26 @@ const NavBar = ({
<DropDown <DropDown
dropDownList={profileDropdown} dropDownList={profileDropdown}
icon={ icon={
<> <PopOver
<PopOver position="bottom"
position="bottom" title="Profile"
title="Profile" trigger="mouseenter">
trigger="mouseenter"> {isImgUrlValid ? (
{isImgUrlValid ? ( <div className="profile-image square tw--mr-2">
<div className="profile-image square tw--mr-2"> <Image
<img alt="user"
alt="user" preview={false}
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
src={profilePicture} src={profilePicture || ''}
/> onError={() => {
</div> SetIsImgUrlValid(false);
) : ( }}
<Avatar name={username} width="30" /> />
)} </div>
</PopOver> ) : (
</> <Avatar name={username} width="30" />
)}
</PopOver>
} }
isDropDownIconVisible={false} isDropDownIconVisible={false}
type="link" type="link"