From bd9b4d52ceaea15ef0759b57e72d0194b8e6116d Mon Sep 17 00:00:00 2001
From: Shubham Thakre <shhubhamthackeray@gmail.com>
Date: Thu, 28 Apr 2022 00:11:18 +0200
Subject: [PATCH] fix(ui): Users and Groups UI bug fixes (#4746)

---
 .../src/app/entity/group/GroupInfoSideBar.tsx | 29 +++++++++++--------
 .../group/GroupMembersSideBarSection.tsx      |  8 +++--
 .../sidebar/Ownership/AddOwnerModal.tsx       | 14 +++++++--
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx
index ffcd9b9e8345cd..59209a51a66888 100644
--- a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx
+++ b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx
@@ -1,4 +1,4 @@
-import { Divider, message, Space, Button, Typography } from 'antd';
+import { Divider, message, Space, Button, Typography, Row, Col } from 'antd';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { EditOutlined, MailOutlined, SlackOutlined } from '@ant-design/icons';
@@ -48,20 +48,21 @@ const TITLES = {
     editGroup: 'Edit Group',
 };
 
-const GroupNameHeader = styled.div`
+const GroupNameHeader = styled(Row)`
     font-size: 20px;
     line-height: 28px;
     color: #262626;
     margin: 16px 16px 8px 8px;
     display: flex;
     align-items: center;
-    justify-content: left;
+    justify-content: center;
     min-height: 100px;
 `;
 
 const GroupName = styled.div`
-    margin-left: 12px;
     max-width: 260px;
+    word-wrap: break-word;
+    width: 140px;
 `;
 
 /**
@@ -120,14 +121,18 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
             <SideBar>
                 <SideBarSubSection className={canEditGroup ? '' : 'fullView'}>
                     <GroupNameHeader>
-                        <CustomAvatar
-                            useDefaultAvatar={false}
-                            size={64}
-                            photoUrl={photoUrl}
-                            name={avatarName}
-                            style={AVATAR_STYLE}
-                        />
-                        <GroupName>{name}</GroupName>
+                        <Col>
+                            <CustomAvatar
+                                useDefaultAvatar={false}
+                                size={64}
+                                photoUrl={photoUrl}
+                                name={avatarName}
+                                style={AVATAR_STYLE}
+                            />
+                        </Col>
+                        <Col>
+                            <GroupName>{name}</GroupName>
+                        </Col>
                     </GroupNameHeader>
                     <Divider className="divider-infoSection" />
                     <SocialDetails>
diff --git a/datahub-web-react/src/app/entity/group/GroupMembersSideBarSection.tsx b/datahub-web-react/src/app/entity/group/GroupMembersSideBarSection.tsx
index df9f1defa42033..173f191042bf64 100644
--- a/datahub-web-react/src/app/entity/group/GroupMembersSideBarSection.tsx
+++ b/datahub-web-react/src/app/entity/group/GroupMembersSideBarSection.tsx
@@ -1,4 +1,4 @@
-import { Tag } from 'antd';
+import { Tag, Tooltip } from 'antd';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
@@ -53,7 +53,11 @@ export default function GroupMembersSideBarSection({ total, relationships, onSee
                                         photoUrl={user.editableProperties?.pictureLink || undefined}
                                         useDefaultAvatar={false}
                                     />
-                                    {name}
+                                    {name.length > 15 ? (
+                                        <Tooltip title={name}>{`${name.substring(0, 15)}..`}</Tooltip>
+                                    ) : (
+                                        <span>{name}</span>
+                                    )}
                                 </Link>
                             </MemberTag>
                         );
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/AddOwnerModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/AddOwnerModal.tsx
index cf01b976751090..df3aff2563c4ea 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/AddOwnerModal.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/AddOwnerModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Form, message, Modal, Select, Tag, Typography } from 'antd';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { useAddOwnerMutation } from '../../../../../../../graphql/mutations.generated';
@@ -189,6 +189,12 @@ export const AddOwnerModal = ({ urn, type, visible, hideOwnerType, defaultOwnerT
     const selectValue = (selectedActor && [selectedActor.displayName]) || [];
     const ownershipTypes = OWNERSHIP_DISPLAY_TYPES;
 
+    useEffect(() => {
+        if (ownershipTypes) {
+            setSelectedOwnerType(ownershipTypes[0].type);
+        }
+    }, [ownershipTypes]);
+
     // Handle the Enter press
     // TODO: Allow user to be selected prior to executed the save.
     // useEnterKeyListener({
@@ -240,7 +246,11 @@ export const AddOwnerModal = ({ urn, type, visible, hideOwnerType, defaultOwnerT
                     <Form.Item label={<Typography.Text strong>Type</Typography.Text>}>
                         <Typography.Paragraph>Choose an owner type</Typography.Paragraph>
                         <Form.Item name="type">
-                            <Select value={selectedOwnerType} onChange={onSelectOwnerType}>
+                            <Select
+                                defaultValue={selectedOwnerType}
+                                value={selectedOwnerType}
+                                onChange={onSelectOwnerType}
+                            >
                                 {ownershipTypes.map((ownerType) => (
                                     <Select.Option key={ownerType.type} value={ownerType.type}>
                                         <Typography.Text>{ownerType.name}</Typography.Text>