Skip to content

Commit

Permalink
PR commets resolved
Browse files Browse the repository at this point in the history
  • Loading branch information
ShubhamThakre committed Feb 17, 2022
1 parent a9f10ed commit 08e6527
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 69 deletions.
124 changes: 57 additions & 67 deletions datahub-web-react/src/app/entity/user/UserInfoSideBar.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,39 @@
import { Divider, message, Space, Button, Tag, Typography, Alert } from 'antd';
import { Divider, message, Space, Button, Tag, Typography } from 'antd';
import React, { useState } from 'react';
import styled from 'styled-components';
import { EditOutlined, MailOutlined, PhoneOutlined, SlackOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import useUserParams from '../../shared/entitySearch/routingUtils/useUserParams';
import { useGetUserQuery, useUpdateCorpUserPropertiesMutation } from '../../../graphql/user.generated';
import { useUpdateCorpUserPropertiesMutation } from '../../../graphql/user.generated';
import { EntityType } from '../../../types.generated';
import { Message } from '../../shared/Message';

import UserEditProfileModal from './UserEditProfileModal';
import { ExtendedEntityRelationshipsResult } from './type';
import CustomAvatar from '../../shared/avatar/CustomAvatar';
import { useEntityRegistry } from '../../useEntityRegistry';
import { decodeUrn } from '../shared/utils';
import { useGetAuthenticatedUser } from '../../useGetAuthenticatedUser';

const { Paragraph } = Typography;

export interface Props {
onTabChange: (selectedTab: string) => void;
}
type SideBarData = {
photoUrl: string | undefined;
avatarName: string | undefined;
name: string | undefined;
role: string | undefined;
team: string | undefined;
email: string | undefined;
slack: string | undefined;
phone: string | undefined;
aboutText: string | undefined;
groupsDetails: ExtendedEntityRelationshipsResult;
urn: string | undefined;
};

type Props = {
sideBarData: SideBarData;
refetch: () => void;
};

const MESSAGE_STYLE = { marginTop: '10%' };
const GROUP_PAGE_SIZE = 20;
const AVATAR_STYLE = { marginTop: '14px' };

/**
* Styled Components
Expand Down Expand Up @@ -54,6 +66,9 @@ export const SideBarSubSection = styled.div`
height: calc(100vh - 135px);
overflow: auto;
padding-right: 18px;
&.fullView {
height: calc(100vh - 70px);
}
&::-webkit-scrollbar {
height: 12px;
width: 1px;
Expand Down Expand Up @@ -155,7 +170,6 @@ export const GroupsSection = styled.div`
export const TagsSection = styled.div`
height: calc(75vh - 460px);
padding: 5px;
// overflow: auto;
`;

export const NoDataFound = styled.span`
Expand All @@ -179,45 +193,36 @@ export const GroupsSeeMoreText = styled.span`
/**
* Responsible for reading & writing users.
*/
export default function UserInfoSideBar() {
const { urn: encodedUrn } = useUserParams();
const urn = decodeUrn(encodedUrn);
export default function UserInfoSideBar({ sideBarData, refetch }: Props) {
const { name, aboutText, avatarName, email, groupsDetails, phone, photoUrl, role, slack, team, urn } = sideBarData;

const [updateCorpUserPropertiesMutation] = useUpdateCorpUserPropertiesMutation();
const { loading, error, data, refetch } = useGetUserQuery({ variables: { urn, groupsCount: GROUP_PAGE_SIZE } });
const entityRegistry = useEntityRegistry();

const [groupSectionExpanded, setGroupSectionExpanded] = useState(false);
const [editProfileModal, showEditProfileModal] = useState(false);
/* eslint-disable @typescript-eslint/no-unused-vars */
const [editableAboutMeText, setEditableAboutMeText] = useState<string | undefined>('');
const me = useGetAuthenticatedUser();
const showEditProfileButton = me?.corpUser?.urn === urn;

const groupsDetails = data?.corpUser?.relationships as ExtendedEntityRelationshipsResult;
const photoUrl = data?.corpUser?.editableProperties?.pictureLink || undefined;

if (error || (!loading && !error && !data)) {
return <Alert type="error" message={error?.message || 'Profile data failed to load'} />;
}

// EditProfile modal Constants
const getEditModalData = () => {
return {
urn: data?.corpUser?.urn || undefined,
name: data?.corpUser?.editableProperties?.displayName || data?.corpUser?.info?.fullName || undefined,
title: data?.corpUser?.editableProperties?.title || data?.corpUser?.info?.title || undefined,
team: data?.corpUser?.editableProperties?.teams?.join(',') || undefined,
email: data?.corpUser?.editableProperties?.email || data?.corpUser?.info?.email || undefined,
image: photoUrl,
slack: data?.corpUser?.editableProperties?.slack || undefined,
phone: data?.corpUser?.editableProperties?.phone || undefined,
};
const getEditModalData = {
urn,
name,
title: role,
team,
email,
image: photoUrl,
slack,
phone,
};

// About Text save
const onSaveAboutMe = (inputString) => {
setEditableAboutMeText(inputString);
updateCorpUserPropertiesMutation({
variables: {
urn: data?.corpUser?.urn || '',
urn: urn || '',
input: {
aboutMe: inputString,
},
Expand All @@ -237,46 +242,29 @@ export default function UserInfoSideBar() {
};
return (
<>
{loading && <Message type="loading" content="Loading..." style={MESSAGE_STYLE} />}
<SideBar>
<SideBarSubSection>
<CustomAvatar
size={160}
photoUrl={photoUrl}
name={
data?.corpUser?.editableProperties?.displayName ||
data?.corpUser?.info?.displayName ||
data?.corpUser?.info?.fullName ||
data?.corpUser?.urn
}
style={{ marginTop: '14px' }}
/>
<Name>
{data?.corpUser?.editableProperties?.displayName || data?.corpUser?.info?.fullName || (
<EmptyValue />
)}
</Name>
<Role>
{data?.corpUser?.editableProperties?.title || data?.corpUser?.info?.title || <EmptyValue />}
</Role>
<Team>{data?.corpUser?.editableProperties?.teams?.join(',') || <EmptyValue />}</Team>
<SideBarSubSection className={showEditProfileButton ? '' : 'fullView'}>
<CustomAvatar size={160} photoUrl={photoUrl} name={avatarName} style={AVATAR_STYLE} />
<Name>{name || <EmptyValue />}</Name>
<Role>{role || <EmptyValue />}</Role>
<Team>{team || <EmptyValue />}</Team>
<Divider className="divider-infoSection" />
<SocialDetails>
<Space>
<MailOutlined />
{data?.corpUser?.editableProperties?.email || data?.corpUser?.info?.email || <EmptyValue />}
{email || <EmptyValue />}
</Space>
</SocialDetails>
<SocialDetails>
<Space>
<SlackOutlined />
{data?.corpUser?.editableProperties?.slack || <EmptyValue />}
{slack || <EmptyValue />}
</Space>
</SocialDetails>
<SocialDetails>
<Space>
<PhoneOutlined />
{data?.corpUser?.editableProperties?.phone || <EmptyValue />}
{phone || <EmptyValue />}
</Space>
</SocialDetails>
<Divider className="divider-aboutSection" />
Expand All @@ -287,7 +275,7 @@ export default function UserInfoSideBar() {
editable={{ onChange: onSaveAboutMe }}
ellipsis={{ rows: 2, expandable: true, symbol: 'Read more' }}
>
{data?.corpUser?.editableProperties?.aboutMe || <EmptyValue />}
{aboutText || <EmptyValue />}
</Paragraph>
</AboutSectionText>
</AboutSection>
Expand Down Expand Up @@ -327,11 +315,13 @@ export default function UserInfoSideBar() {
</TagsSection>
</GroupsSection>
</SideBarSubSection>
<EditProfileButton>
<Button icon={<EditOutlined />} onClick={() => showEditProfileModal(true)}>
Edit Profile
</Button>
</EditProfileButton>
{showEditProfileButton && (
<EditProfileButton>
<Button icon={<EditOutlined />} onClick={() => showEditProfileModal(true)}>
Edit Profile
</Button>
</EditProfileButton>
)}
</SideBar>
{/* Modal */}
<UserEditProfileModal
Expand All @@ -340,7 +330,7 @@ export default function UserInfoSideBar() {
onSave={() => {
refetch();
}}
editModalData={getEditModalData()}
editModalData={getEditModalData}
/>
</>
);
Expand Down
31 changes: 29 additions & 2 deletions datahub-web-react/src/app/entity/user/UserProfile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,23 @@ const Content = styled.div`
}
`;

export const EmptyValue = styled.div`
&:after {
content: 'None';
color: #b7b7b7;
font-style: italic;
font-weight: 100;
}
`;

/**
* Responsible for reading & writing users.
*/
export default function UserProfile() {
const { urn: encodedUrn } = useUserParams();
const urn = decodeUrn(encodedUrn);

const { loading, error, data } = useGetUserQuery({ variables: { urn, groupsCount: GROUP_PAGE_SIZE } });
const { loading, error, data, refetch } = useGetUserQuery({ variables: { urn, groupsCount: GROUP_PAGE_SIZE } });

const username = data?.corpUser?.username;
const ownershipResult = useGetAllEntitySearchResults({
Expand Down Expand Up @@ -96,13 +105,31 @@ export default function UserProfile() {
const defaultTabPath = getTabs() && getTabs()?.length > 0 ? getTabs()[0].path : '';
const onTabChange = () => null;

// Side bar data
const sideBarData = {
photoUrl: data?.corpUser?.editableProperties?.pictureLink || undefined,
avatarName:
data?.corpUser?.editableProperties?.displayName ||
data?.corpUser?.info?.displayName ||
data?.corpUser?.info?.fullName ||
data?.corpUser?.urn,
name: data?.corpUser?.editableProperties?.displayName || data?.corpUser?.info?.fullName || undefined,
role: data?.corpUser?.editableProperties?.title || data?.corpUser?.info?.title || undefined,
team: data?.corpUser?.editableProperties?.teams?.join(',') || undefined,
email: data?.corpUser?.editableProperties?.email || data?.corpUser?.info?.email || undefined,
slack: data?.corpUser?.editableProperties?.slack || undefined,
phone: data?.corpUser?.editableProperties?.phone || undefined,
aboutText: data?.corpUser?.editableProperties?.aboutMe || undefined,
groupsDetails: data?.corpUser?.relationships as ExtendedEntityRelationshipsResult,
urn,
};
return (
<>
{contentLoading && <Message type="loading" content="Loading..." style={MESSAGE_STYLE} />}
<UserProfileWrapper>
<Row>
<Col xl={5} lg={5} md={5} sm={24} xs={24}>
<UserInfoSideBar />
<UserInfoSideBar sideBarData={sideBarData} refetch={refetch} />
</Col>
<Col xl={19} lg={19} md={19} sm={24} xs={24} style={{ borderLeft: '1px solid #E9E9E9' }}>
<Content>
Expand Down

0 comments on commit 08e6527

Please sign in to comment.