Feature/users and groups UI updated as per new design

datahub-web-react/src/app/entity/user/UserAssets.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import { EmbeddedListSearch } from '../shared/components/styled/search/EmbeddedListSearch';
+import { useEntityData } from '../shared/EntityContext';
+
+const UserAssetsWrapper = styled.div`
+    height: calc(100vh - 114px);
+    overflow: auto;
+`;
+export const UserAssets = () => {
+    const { urn } = useEntityData();
+
+    return (
+        <UserAssetsWrapper>
+            <EmbeddedListSearch
+                fixedFilter={{ field: 'owners', value: urn }}
+                emptySearchQuery="*"
+                placeholderText="Filter domain entities..."
+            />
+        </UserAssetsWrapper>
+    );
+};

datahub-web-react/src/app/entity/user/UserEditProfileModal.tsx

@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import { message, Button, Input, Modal, Typography, Form } from 'antd';
+import { useUpdateCorpUserPropertiesMutation } from '../../../graphql/user.generated';
+
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    onSave: () => void;
+    data: {
+        name: string | undefined;
+        title: string | undefined;
+        image: string | undefined;
+        team: string | undefined;
+        email: string | undefined;
+        slack: string | undefined;
+        phone: string | undefined;
+        urn: string | undefined;
+    };
+};
+/** Regex Validations */
+export const validUserName = new RegExp('^[a-zA-Z ]*$');
+
+export default function UserEditProfileModal({ visible, onClose, onSave, data }: Props) {
+    const [updateCorpUserPropertiesMutation] = useUpdateCorpUserPropertiesMutation();
+    const [form] = Form.useForm();
+
+    const [userName, setUserName] = useState<string | undefined>(data.name);
+    const [userTitle, setUserTitle] = useState<string | undefined>(data.title);
+    const [userImageURL, setImageURL] = useState<string | undefined>(data.image);
+    const [userTeam, setUserTeam] = useState<string | undefined>(data.team);
+    const [userEmail, setUserEmail] = useState<string | undefined>(data.email);
+    const [userSlack, setUserSlack] = useState<string | undefined>(data.slack);
+    const [userPhoneNumber, setUserPhoneNumber] = useState<string | undefined>(data.phone);
+    const [buttonDisabled, setButtonDisabled] = useState(true);
+
+    // save changes function
+    const onCreateGroup = () => {
+        updateCorpUserPropertiesMutation({
+            variables: {
+                urn: data?.urn || '',
+                input: {
+                    displayName: userName,
+                    title: userTitle,
+                    pictureLink: userImageURL,
+                    teams: userTeam?.split(','),
+                    email: userEmail,
+                    slack: userSlack,
+                    phone: userPhoneNumber,
+                },
+            },
+        })
+            .catch((e) => {
+                message.destroy();
+                message.error({ content: `Failed to Save changes!: \n ${e.message || ''}`, duration: 3 });
+            })
+            .finally(() => {
+                message.success({
+                    content: `Changes saved.`,
+                    duration: 3,
+                });
+                onSave(); // call the refetch function once save
+                // clear the values from edit profile form
+                setUserName('');
+                setUserTitle('');
+                setImageURL('');
+                setUserTeam('');
+                setUserEmail('');
+                setUserSlack('');
+                setUserPhoneNumber('');
+            });
+        onClose();
+        onSave();
+    };
+
+    // userFieldValidation before submitting the changes.
+    const userFieldValidations = () => {
+        if (buttonDisabled) return true;
+        return false;
+    };
+
+    return (
+        <Modal
+            title="Edit Profile"
+            visible={visible}
+            onCancel={onClose}
+            footer={
+                <>
+                    <Button onClick={onClose} type="text">
+                        Cancel
+                    </Button>
+                    <Button onClick={onCreateGroup} disabled={userFieldValidations()}>
+                        Save Changes
+                    </Button>
+                </>
+            }
+        >
+            <Form
+                form={form}
+                initialValues={{ ...data }}
+                autoComplete="off"
+                layout="vertical"
+                onFieldsChange={() => setButtonDisabled(form.getFieldsError().some((field) => field.errors.length > 0))}
+            >
+                <Form.Item
+                    name="name"
+                    label={<Typography.Text strong>Name</Typography.Text>}
+                    rules={[
+                        {
+                            required: true,
+                            message: 'Please enter the User name.',
+                        },
+                        { whitespace: true },
+                        { min: 2, max: 50 },
+                        {
+                            pattern: new RegExp('^[a-zA-Z ]*$'),
+                            message: '',
+                        },
+                    ]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="add name"
+                        value={userName}
+                        onChange={(event) => setUserName(event.target.value)}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="title"
+                    label={<Typography.Text strong>Title/Role</Typography.Text>}
+                    rules={[{ whitespace: true }, { min: 2, max: 50 }]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="add title/role"
+                        value={userTitle}
+                        onChange={(event) => setUserTitle(event.target.value)}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="image"
+                    label={<Typography.Text strong>Image URL</Typography.Text>}
+                    rules={[{ whitespace: true }, { type: 'url', message: 'not valid url' }]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="add image URL"
+                        value={userImageURL}
+                        onChange={(event) => setImageURL(event.target.value)}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="team"
+                    label={<Typography.Text strong>Team</Typography.Text>}
+                    rules={[{ whitespace: true }, { min: 2, max: 50 }]}
+                >
+                    <Input
+                        placeholder="add team name"
+                        value={userTeam}
+                        onChange={(event) => setUserTeam(event.target.value)}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="email"
+                    label={<Typography.Text strong>Email</Typography.Text>}
+                    rules={[
+                        {
+                            required: true,
+                            message: 'Please enter your email',
+                        },
+                        {
+                            type: 'email',
+                            message: 'Please enter valid email',
+                        },
+                        { whitespace: true },
+                        { min: 2, max: 50 },
+                    ]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="add email"
+                        value={userEmail}
+                        onChange={(event) => setUserEmail(event.target.value)}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="slack"
+                    label={<Typography.Text strong>Slack</Typography.Text>}
+                    rules={[{ whitespace: true }, { min: 2, max: 50 }]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="add slack id"
+                        value={userSlack}
+                        onChange={(event) => setUserSlack(event.target.value)}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="phone"
+                    label={<Typography.Text strong>Phone</Typography.Text>}
+                    rules={[
+                        {
+                            pattern: new RegExp('^(?=.*[0-9])[- +()0-9]+$'),
+                            message: 'not valid phone number',
+                        },
+                        {
+                            min: 5,
+                            max: 15,
+                        },
+                    ]}
+                    hasFeedback
+                >
+                    <Input
+                        placeholder="add phone number"
+                        value={userPhoneNumber}
+                        onChange={(event) => setUserPhoneNumber(event.target.value)}
+                    />
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+}

datahub-web-react/src/app/entity/user/UserGroups.tsx

@@ -1,41 +1,73 @@
-import { List, Pagination, Row, Space, Typography } from 'antd';
+import { Col, Pagination, Row, Tooltip } from 'antd';
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useGetUserGroupsLazyQuery } from '../../../graphql/user.generated';
 import { CorpGroup, EntityRelationshipsResult, EntityType } from '../../../types.generated';
 import { useEntityRegistry } from '../../useEntityRegistry';
-import { PreviewType } from '../Entity';
 
 type Props = {
     urn: string;
     initialRelationships?: EntityRelationshipsResult | null;
     pageSize: number;
 };
 
-const GroupList = styled(List)`
-    &&& {
+const GroupsViewWrapper = styled.div`
+    height: calc(100vh - 173px);
+    overflow-y: auto;
+
+    .user-group-pagination {
+        justify-content: center;
+        bottom: 24px;
+        position: absolute;
         width: 100%;
-        border-color: ${(props) => props.theme.styles['border-color-base']};
-        margin-top: 12px;
-        margin-bottom: 28px;
-        padding: 24px 32px;
-        box-shadow: ${(props) => props.theme.styles['box-shadow']};
+        left: 50%;
+        -webkit-transform: translateX(-50%);
+        -moz-transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        transform: translateX(-50%);
     }
-    & li {
-        padding-top: 28px;
-        padding-bottom: 28px;
+`;
+const GroupItemColumn = styled(Col)`
+    padding: 10px;
+`;
+const GroupItem = styled.div`
+    border: 1px solid #d9d9d9;
+    padding: 10px;
+    min-height: 107px;
+    max-height: 107px;
+
+    .title-row {
+        padding: 9px 11px 9px 11px;
     }
-    & li:not(:last-child) {
-        border-bottom: 1.5px solid #ededed;
+    .description-row {
+        padding: 2px 13px;
     }
 `;
-
-const GroupsView = styled(Space)`
-    width: 100%;
-    margin-bottom: 32px;
-    padding-top: 28px;
+const GroupTitle = styled.span`
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: bold;
+    color: #262626;
+`;
+const GroupMember = styled.span`
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 23px;
+    color: #8c8c8c;
+    padding-left: 7px;
+`;
+const GroupDescription = styled.span`
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+    color: #262626;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    height: 43px;
 `;
-
 export default function UserGroups({ urn, initialRelationships, pageSize }: Props) {
     const [page, setPage] = useState(1);
     const entityRegistry = useEntityRegistry();
@@ -53,19 +85,35 @@ export default function UserGroups({ urn, initialRelationships, pageSize }: Prop
     const userGroups = relationships?.relationships?.map((rel) => rel.entity as CorpGroup) || [];
 
     return (
-        <GroupsView direction="vertical" size="middle">
-            <Typography.Title level={3}>Group Membership</Typography.Title>
-            <Row justify="center">
-                <GroupList
-                    dataSource={userGroups}
-                    split={false}
-                    renderItem={(item, _) => (
-                        <List.Item>
-                            {entityRegistry.renderPreview(EntityType.CorpGroup, PreviewType.PREVIEW, item)}
-                        </List.Item>
-                    )}
-                    bordered
-                />
+        <GroupsViewWrapper>
+            <Row justify="space-between">
+                {userGroups &&
+                    userGroups.map((item) => {
+                        return (
+                            <GroupItemColumn xl={8} lg={8} md={12} sm={12} xs={24} key={item.urn}>
+                                <Link to={entityRegistry.getEntityUrl(EntityType.CorpGroup, item.urn)}>
+                                    <GroupItem>
+                                        <Row className="title-row">
+                                            <GroupTitle>{item.info?.displayName || 'NA'}</GroupTitle>
+                                            <GroupMember>
+                                                {item.relationships?.total}
+                                                {item.relationships?.total === 1 ? ' member' : ' members'}
+                                            </GroupMember>
+                                        </Row>
+                                        <Row className="description-row">
+                                            <GroupDescription>
+                                                <Tooltip title={item.info?.description}>
+                                                    {item.info?.description}
+                                                </Tooltip>
+                                            </GroupDescription>
+                                        </Row>
+                                    </GroupItem>
+                                </Link>
+                            </GroupItemColumn>
+                        );
+                    })}
+            </Row>
+            <Row className="user-group-pagination">
                 <Pagination
                     current={page}
                     pageSize={pageSize}
@@ -75,6 +123,6 @@ export default function UserGroups({ urn, initialRelationships, pageSize }: Prop
                     showSizeChanger={false}
                 />
             </Row>
-        </GroupsView>
+        </GroupsViewWrapper>
     );
 }