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

[issues-5643] Profile page updated as per new layout. (#5644)

Browse Source 
* [issues-5643] Profile page updated as per new layout.

* Css issue fixed.

* minor issue
This commit is contained in:
yug-shah0106 2022-06-27 14:18:34 +05:30 committed by GitHub
parent 8528c51b9c
commit 74d90c401f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 300 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
View File

@ -657,8 +657,8 @@ const Explore: React.FC<ExploreProps> = ({
const fetchLeftPanel = () => { const fetchLeftPanel = () => {
return ( return (
<div className="tw-h-full">
<Card <Card
className="tw-h-full"
data-testid="data-summary-container" data-testid="data-summary-container"
style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}> style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}>
<Fragment> <Fragment>
@ -688,6 +688,7 @@ const Explore: React.FC<ExploreProps> = ({
)} )}
</Fragment> </Fragment>
</Card> </Card>
</div>
); );
}; };

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

@ -12,6 +12,7 @@
*/ */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Card } from 'antd';
import { AxiosError, AxiosResponse } from 'axios'; import { AxiosError, AxiosResponse } from 'axios';
import { isNil, toLower } from 'lodash'; import { isNil, toLower } from 'lodash';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
@ -50,7 +51,7 @@ import Description from '../common/description/Description';
import ProfilePicture from '../common/ProfilePicture/ProfilePicture'; import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle'; import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
import TabsPane from '../common/TabsPane/TabsPane'; import TabsPane from '../common/TabsPane/TabsPane';
import PageLayout from '../containers/PageLayout'; import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
import Loader from '../Loader/Loader'; import Loader from '../Loader/Loader';
import { Option, Props } from './Users.interface'; import { Option, Props } from './Users.interface';
const tabs = [ const tabs = [
@ -213,9 +214,9 @@ const Users = ({
const getDisplayNameComponent = () => { const getDisplayNameComponent = () => {
if (isAdminUser || isLoggedinUser || isAuthDisabled) { if (isAdminUser || isLoggedinUser || isAuthDisabled) {
return ( return (
<div className="tw-mt-4 tw-w-full"> <div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between tw-px-3">
{isDisplayNameEdit ? ( {isDisplayNameEdit ? (
<div className="tw-flex tw-items-center tw-gap-1"> <div className="tw-flex tw-items-center tw-gap-1 ">
<input <input
className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64" className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
data-testid="displayName" data-testid="displayName"
@ -279,7 +280,7 @@ const Users = ({
const getDescriptionComponent = () => { const getDescriptionComponent = () => {
if (isAdminUser || isLoggedinUser || isAuthDisabled) { if (isAdminUser || isLoggedinUser || isAuthDisabled) {
return ( return (
<div className="tw--ml-5"> <div className="tw--ml-5 tw-flex tw-items-center tw-justify-between tw-px-3">
<Description <Description
description={userData.description || ''} description={userData.description || ''}
entityName={getEntityName(userData as unknown as EntityReference)} entityName={getEntityName(userData as unknown as EntityReference)}
@ -321,18 +322,33 @@ const Users = ({
if (!isAdminUser && !isAuthDisabled) { if (!isAdminUser && !isAuthDisabled) {
return ( return (
<Fragment> <Card
<div className="tw-flex"> className="ant-card-feed tw-relative"
<h6 className="tw-heading tw-mb-3">Teams</h6> key="inherited-roles-card"
style={{
...leftPanelAntCardStyle,
marginTop: '20px',
}}
title={
<div className="tw-flex tw-items-center tw-justify-between">
<h6 className="tw-heading tw-mb-0">Teams</h6>
</div> </div>
<div className="tw-pb-4 tw-mb-4 tw-border-b">{teamsElement}</div> }>
</Fragment> <div>{teamsElement}</div>
</Card>
); );
} else { } else {
return ( return (
<Fragment> <Card
<div className="tw-flex"> className="ant-card-feed tw-relative"
<h6 className="tw-heading tw-mb-3">Teams</h6> key="inherited-roles-card"
style={{
...leftPanelAntCardStyle,
marginTop: '20px',
}}
title={
<div className="tw-flex tw-items-center tw-justify-between">
<h6 className="tw-heading tw-mb-0">Teams</h6>
{!isTeamsEdit && ( {!isTeamsEdit && (
<button <button
className="tw-ml-2 focus:tw-outline-none tw-self-baseline" className="tw-ml-2 focus:tw-outline-none tw-self-baseline"
@ -347,7 +363,9 @@ const Users = ({
</button> </button>
)} )}
</div> </div>
<div className="tw-pb-4 tw-mb-4 tw-border-b"> }>
<Fragment>
<div>
{isTeamsEdit ? ( {isTeamsEdit ? (
<Fragment> <Fragment>
<Select <Select
@ -399,6 +417,7 @@ const Users = ({
)} )}
</div> </div>
</Fragment> </Fragment>
</Card>
); );
} }
}; };
@ -434,18 +453,35 @@ const Users = ({
if (!isAdminUser && !isAuthDisabled) { if (!isAdminUser && !isAuthDisabled) {
return ( return (
<Fragment> <Card
<div className="tw-flex"> className="ant-card-feed tw-relative"
<h6 className="tw-heading tw-mb-3">Roles</h6> key="inherited-roles-card"
style={{
...leftPanelAntCardStyle,
marginTop: '20px',
}}
title={
<div className="tw-flex tw-items-center tw-justify-between">
<h6 className="tw-heading tw-mb-0">Roles</h6>
</div> </div>
<div className="tw-pb-4 tw-mb-4 tw-border-b">{rolesElement}</div> }>
</Fragment> <div className="tw-flex tw-items-center tw-justify-between">
{rolesElement}
</div>
</Card>
); );
} else { } else {
return ( return (
<Fragment> <Card
<div className="tw-flex"> className="ant-card-feed tw-relative"
<h6 className="tw-heading tw-mb-3">Roles</h6> key="inherited-roles-card"
style={{
...leftPanelAntCardStyle,
marginTop: '20px',
}}
title={
<div className="tw-flex tw-items-center tw-justify-between">
<h6 className="tw-heading tw-mb-0">Roles</h6>
{!isRolesEdit && ( {!isRolesEdit && (
<button <button
className="tw-ml-2 focus:tw-outline-none tw-self-baseline" className="tw-ml-2 focus:tw-outline-none tw-self-baseline"
@ -460,7 +496,9 @@ const Users = ({
</button> </button>
)} )}
</div> </div>
<div className="tw-pb-4 tw-mb-4 tw-border-b"> }>
<Fragment>
<div className="tw-flex tw-items-center tw-justify-between">
{isRolesEdit ? ( {isRolesEdit ? (
<Fragment> <Fragment>
<Select <Select
@ -510,6 +548,7 @@ const Users = ({
)} )}
</div> </div>
</Fragment> </Fragment>
</Card>
); );
} }
}; };
@ -517,21 +556,33 @@ const Users = ({
const getInheritedRolesComponent = () => { const getInheritedRolesComponent = () => {
if (userData.inheritedRoles?.length) { if (userData.inheritedRoles?.length) {
return ( return (
<Fragment> <Card
className="ant-card-feed tw-relative"
key="inherited-roles-card"
style={{
...leftPanelAntCardStyle,
marginTop: '20px',
}}
title={
<div className="tw-flex"> <div className="tw-flex">
<h6 className="tw-heading tw-mb-3" data-testid="inherited-roles"> <h6 className="tw-heading tw-mb-0" data-testid="inherited-roles">
Inherited Roles Inherited Roles
</h6> </h6>
</div> </div>
<div className="tw-pb-4 tw-mb-4 tw-border-b"> }>
<Fragment>
<div className="tw-flex tw-justify-between tw-flex-col">
{userData.inheritedRoles?.map((inheritedRole, i) => ( {userData.inheritedRoles?.map((inheritedRole, i) => (
<div className="tw-mb-2 tw-flex tw-items-center tw-gap-2" key={i}> <div
className="tw-mb-2 tw-flex tw-items-center tw-gap-2"
key={i}>
<SVGIcons alt="icon" className="tw-w-4" icon={Icons.USERS} /> <SVGIcons alt="icon" className="tw-w-4" icon={Icons.USERS} />
<span>{getEntityName(inheritedRole)}</span> <span>{getEntityName(inheritedRole)}</span>
</div> </div>
))} ))}
</div> </div>
</Fragment> </Fragment>
</Card>
); );
} else { } else {
return null; return null;
@ -540,30 +591,41 @@ const Users = ({
const fetchLeftPanel = () => { const fetchLeftPanel = () => {
return ( return (
<div className="tw-pt-4" data-testid="left-panel"> <div className="user-profile-antd-card" data-testid="left-panel">
<div className="tw-pb-4 tw-mb-4 tw-border-b tw-flex tw-flex-col"> <Card
className="ant-card-feed tw-relative"
key="inherited-roles-card"
style={{
...leftPanelAntCardStyle,
marginTop: '12px',
}}>
<div className="tw-flex tw-flex-col">
{userData.profile?.images?.image ? ( {userData.profile?.images?.image ? (
<div className="tw-h-28 tw-w-28"> <div>
<img <img
alt="profile" alt="profile"
className="tw-w-full" className="tw-w-full"
height="150px"
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
src={userData.profile?.images?.image} src={userData.profile?.images?.image}
width="300px"
/> />
</div> </div>
) : ( ) : (
<ProfilePicture <ProfilePicture
displayName={userData?.displayName || userData.name} displayName={userData?.displayName || userData.name}
height="150"
id={userData?.id || ''} id={userData?.id || ''}
name={userData?.name || ''} name={userData?.name || ''}
textClass="tw-text-5xl" textClass="tw-text-5xl"
width="112" width="300"
/> />
)} )}
{getDisplayNameComponent()} {getDisplayNameComponent()}
<p className="tw-mt-2">{userData.email}</p> <p className="tw-mt-2 tw-mx-3">{userData.email}</p>
{getDescriptionComponent()} {getDescriptionComponent()}
</div> </div>
</Card>
{getTeamsComponent()} {getTeamsComponent()}
{getRolesComponent()} {getRolesComponent()}
{getInheritedRolesComponent()} {getInheritedRolesComponent()}

2
openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.style.ts
View File

@ -17,7 +17,7 @@ export const cardStyle = {
active: 'tw-border-primary', active: 'tw-border-primary',
selected: 'tw-border-primary', selected: 'tw-border-primary',
header: { header: {
base: 'tw-flex tw-px-5 tw-py-3 tw-cursor-pointer tw-justify-between tw-items-center', base: 'tw-flex tw-px-5 tw-py-3 tw-cursor-pointer tw-justify-between tw-items-center tw-rounded-t-md',
default: '', default: '',
active: 'tw-bg-primary-lite tw-border-b tw-border-primary', active: 'tw-bg-primary-lite tw-border-b tw-border-primary',
selected: 'tw-bg-primary tw-text-white', selected: 'tw-bg-primary tw-text-white',

10
openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.tsx
View File

@ -29,6 +29,7 @@ interface Props extends UserData {
type?: ImageShape; type?: ImageShape;
textClass?: string; textClass?: string;
className?: string; className?: string;
height?: string;
} }
const ProfilePicture = ({ const ProfilePicture = ({
@ -39,6 +40,7 @@ const ProfilePicture = ({
textClass = '', textClass = '',
type = 'square', type = 'square',
width = '36', width = '36',
height,
}: Props) => { }: Props) => {
const profilePic = useMemo(() => { const profilePic = useMemo(() => {
return getUserProfilePic(id, name); return getUserProfilePic(id, name);
@ -52,6 +54,7 @@ const ProfilePicture = ({
return ( return (
<Avatar <Avatar
className={className} className={className}
height={height}
name={getEntityName({ name, displayName } as EntityReference)} name={getEntityName({ name, displayName } as EntityReference)}
textClass={textClass} textClass={textClass}
type={type} type={type}
@ -64,7 +67,10 @@ const ProfilePicture = ({
return isPicLoading ? ( return isPicLoading ? (
<div <div
className="tw-inline-block tw-relative" className="tw-inline-block tw-relative"
style={{ height: `${width}px`, width: `${width}px` }}> style={{
height: `${height || width}px`,
width: `${width}px`,
}}>
{getAvatarByName()} {getAvatarByName()}
<div <div
className="tw-absolute tw-inset-0 tw-opacity-60 tw-bg-grey-backdrop tw-rounded" className="tw-absolute tw-inset-0 tw-opacity-60 tw-bg-grey-backdrop tw-rounded"
@ -85,7 +91,7 @@ const ProfilePicture = ({
return profilePic ? ( return profilePic ? (
<div <div
className={classNames('profile-image', type)} className={classNames('profile-image', type)}
style={{ height: `${width}px`, width: `${width}px` }}> style={{ height: `${height || width}px`, width: `${width}px` }}>
<img <img
alt="user" alt="user"
data-testid="profile-image" data-testid="profile-image"

4
openmetadata-ui/src/main/resources/ui/src/components/common/avatar/Avatar.tsx
View File

@ -22,12 +22,14 @@ const Avatar = ({
textClass = '', textClass = '',
className = '', className = '',
type = 'square', type = 'square',
height,
}: { }: {
name: string; name: string;
width?: string; width?: string;
textClass?: string; textClass?: string;
className?: string; className?: string;
type?: ImageShape; type?: ImageShape;
height?: string;
}) => { }) => {
const { color, character } = getRandomColor(name); const { color, character } = getRandomColor(name);
@ -39,7 +41,7 @@ const Avatar = ({
)} )}
data-testid="avatar" data-testid="avatar"
style={{ style={{
height: `${width}px`, height: `${height || width}px`,
width: `${width}px`, width: `${width}px`,
borderRadius: type === 'circle' ? '50%' : '4px', borderRadius: type === 'circle' ? '50%' : '4px',
background: color, background: color,

5
openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
View File

@ -1298,6 +1298,11 @@ div.ant-typography-ellipsis-custom {
margin-bottom: 0px; margin-bottom: 0px;
} }
.user-profile-antd-card .ant-card-body:first-child {
padding: 0px;
overflow: hidden;
}
.ant-input:hover, .ant-input:hover,
.ant-input:focus { .ant-input:focus {
border-color: #7147e8; border-color: #7147e8;