feat(react): add groups tab to user profile (#3276)

datahub-web-react/src/app/entity/group/GroupProfile.tsx

@@ -22,7 +22,7 @@ const ENABLED_TAB_TYPES = [TabType.Members, TabType.Ownership];
 const MEMBER_PAGE_SIZE = 20;
 
 /**
- * Responsible for reading & writing users.
+ * Responsible for reading & writing groups.
  */
 export default function GroupProfile() {
     const { urn } = useUserParams();

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

@@ -0,0 +1,80 @@
+import { List, Pagination, Row, Space, Typography } from 'antd';
+import React, { useState } from 'react';
+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)`
+    &&& {
+        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']};
+    }
+    & li {
+        padding-top: 28px;
+        padding-bottom: 28px;
+    }
+    & li:not(:last-child) {
+        border-bottom: 1.5px solid #ededed;
+    }
+`;
+
+const GroupsView = styled(Space)`
+    width: 100%;
+    margin-bottom: 32px;
+    padding-top: 28px;
+`;
+
+export default function UserGroups({ urn, initialRelationships, pageSize }: Props) {
+    const [page, setPage] = useState(1);
+    const entityRegistry = useEntityRegistry();
+
+    const [getGroups, { data: groupsData }] = useGetUserGroupsLazyQuery();
+
+    const onChangeGroupsPage = (newPage: number) => {
+        setPage(newPage);
+        const start = (newPage - 1) * pageSize;
+        getGroups({ variables: { urn, start, count: pageSize } });
+    };
+
+    const relationships = groupsData ? groupsData.corpUser?.relationships : initialRelationships;
+    const total = relationships?.total || 0;
+    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
+                />
+                <Pagination
+                    current={page}
+                    pageSize={pageSize}
+                    total={total}
+                    showLessItems
+                    onChange={onChangeGroupsPage}
+                    showSizeChanger={false}
+                />
+            </Row>
+        </GroupsView>
+    );
+}

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

@@ -8,21 +8,25 @@ import { useGetAllEntitySearchResults } from '../../../utils/customGraphQL/useGe
 import { Message } from '../../shared/Message';
 import RelatedEntityResults from '../../shared/entitySearch/RelatedEntityResults';
 import { LegacyEntityProfile } from '../../shared/LegacyEntityProfile';
-import { CorpUser, EntityType, SearchResult } from '../../../types.generated';
+import { CorpUser, EntityType, SearchResult, EntityRelationshipsResult } from '../../../types.generated';
+import UserGroups from './UserGroups';
 
 const messageStyle = { marginTop: '10%' };
 
 export enum TabType {
     Ownership = 'Ownership',
+    Groups = 'Groups',
 }
-const ENABLED_TAB_TYPES = [TabType.Ownership];
+const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Groups];
+
+const GROUP_PAGE_SIZE = 20;
 
 /**
  * Responsible for reading & writing users.
  */
 export default function UserProfile() {
     const { urn } = useUserParams();
-    const { loading, error, data } = useGetUserQuery({ variables: { urn } });
+    const { loading, error, data } = useGetUserQuery({ variables: { urn, groupsCount: GROUP_PAGE_SIZE } });
     const username = data?.corpUser?.username;
 
     const ownershipResult = useGetAllEntitySearchResults({
@@ -53,6 +57,8 @@ export default function UserProfile() {
         return <Alert type="error" message={error?.message || 'Entity failed to load'} />;
     }
 
+    const groupMemberRelationships = data?.corpUser?.relationships as EntityRelationshipsResult;
+
     const getTabs = () => {
         return [
             {
@@ -60,6 +66,13 @@ export default function UserProfile() {
                 path: TabType.Ownership.toLocaleLowerCase(),
                 content: <RelatedEntityResults searchResult={ownershipForDetails} />,
             },
+            {
+                name: TabType.Groups,
+                path: TabType.Groups.toLocaleLowerCase(),
+                content: (
+                    <UserGroups urn={urn} initialRelationships={groupMemberRelationships} pageSize={GROUP_PAGE_SIZE} />
+                ),
+            },
         ].filter((tab) => ENABLED_TAB_TYPES.includes(tab.name));
     };
 

datahub-web-react/src/graphql/user.graphql

@@ -1,4 +1,4 @@
-query getUser($urn: String!) {
+query getUser($urn: String!, $groupsCount: Int!) {
     corpUser(urn: $urn) {
         urn
         username
@@ -19,5 +19,48 @@ query getUser($urn: String!) {
         globalTags {
             ...globalTagsFields
         }
+        relationships(types: ["IsMemberOfGroup"], direction: OUTGOING, start: 0, count: $groupsCount) {
+            start
+            count
+            total
+            relationships {
+                entity {
+                    ... on CorpGroup {
+                        urn
+                        type
+                        name
+                        info {
+                            displayName
+                            description
+                            email
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+query getUserGroups($urn: String!, $start: Int!, $count: Int!) {
+    corpUser(urn: $urn) {
+        relationships(types: ["IsMemberOfGroup"], direction: OUTGOING, start: $start, count: $count) {
+            start
+            count
+            total
+            relationships {
+                entity {
+                    ... on CorpGroup {
+                        urn
+                        type
+                        name
+                        info {
+                            displayName
+                            description
+                            email
+                        }
+                    }
+                }
+            }
+        }
     }
 }