fix(ui): Users and Groups UI bug fixes

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>

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>
                         );

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';
@@ -50,6 +50,7 @@ type SelectedActor = {
 };
 
 export const AddOwnerModal = ({ urn, type, visible, hideOwnerType, defaultOwnerType, onClose, refetch }: Props) => {
+    console.log('defaultOwnerType', defaultOwnerType);
     const entityRegistry = useEntityRegistry();
     const [selectedActor, setSelectedActor] = useState<SelectedActor | undefined>(undefined);
     const [selectedOwnerType, setSelectedOwnerType] = useState<OwnershipType>(defaultOwnerType || OwnershipType.None);
@@ -189,6 +190,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 +247,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>