feat(React): Ownership component of user profile

datahub-frontend/run/frontend.env

@@ -16,4 +16,4 @@ DATAHUB_PIWIK_URL="//piwik.corp.linkedin.com/piwik/"
 
 # GMS configuration
 DATAHUB_GMS_HOST=localhost
-DATAHUB_GMS_PORT=8080
+DATAHUB_GMS_PORT=8080

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, Typography } from 'antd';
+import { List, Typography, Divider } from 'antd';
 import styled from 'styled-components';
 
 import { EntityType } from '../../../types.generated';
@@ -16,6 +16,10 @@ const ListContainer = styled.div`
     flex-grow: default;
 `;
 
+const TitleContainer = styled.div`
+    margin-bottom: 30px;
+`;
+
 export default ({ ownerships, entityPath }: Props) => {
     const entityRegistry = useEntityRegistry();
 
@@ -27,13 +31,12 @@ export default ({ ownerships, entityPath }: Props) => {
 
     return (
         <ListContainer>
+            <TitleContainer>
+                <Typography.Title level={3}>{entityRegistry.getCollectionName(entityType)} they own</Typography.Title>
+                <Divider />
+            </TitleContainer>
             <List
                 dataSource={entitiesToShow}
-                header={
-                    <Typography.Title level={3}>
-                        {entityRegistry.getCollectionName(entityType)} they own
-                    </Typography.Title>
-                }
                 renderItem={(item) => {
                     return entityRegistry.renderPreview(entityType, PreviewType.PREVIEW, item);
                 }}

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

@@ -6,6 +6,7 @@ import UserHeader from './UserHeader';
 import UserDetails from './UserDetails';
 import useUserParams from './routingUtils/useUserParams';
 import { useGetUserQuery } from '../../../graphql/user.generated';
+import { useGetAllEntitySearchResults } from '../../../utils/customGraphQL/useGetAllEntitySearchResults';
 
 const PageContainer = styled.div`
     background-color: white;
@@ -19,14 +20,35 @@ export default function UserProfile() {
     const { urn, subview, item } = useUserParams();
     const { loading, error, data } = useGetUserQuery({ variables: { urn } });
 
-    if (loading) {
+    const username = data?.corpUser?.username;
+
+    const ownershipResult = useGetAllEntitySearchResults({
+        query: `owners:${username}`,
+    });
+
+    const contentLoading =
+        Object.keys(ownershipResult).some((type) => {
+            return ownershipResult[type].loading;
+        }) || loading;
+
+    if (contentLoading) {
         return <Alert type="info" message="Loading" />;
     }
 
     if (error || (!loading && !error && !data)) {
         return <Alert type="error" message={error?.message || 'Entity failed to load'} />;
     }
 
+    Object.keys(ownershipResult).forEach((type) => {
+        const entities = ownershipResult[type].data?.search?.entities;
+
+        if (!entities || entities.length === 0) {
+            delete ownershipResult[type];
+        } else {
+            ownershipResult[type] = ownershipResult[type].data?.search?.entities;
+        }
+    });
+
     return (
         <PageContainer>
             <UserHeader
@@ -38,7 +60,7 @@ export default function UserProfile() {
                 teams={data?.corpUser?.editableInfo?.teams}
             />
             <Divider />
-            <UserDetails urn={urn} subview={subview} item={item} ownerships={{}} />
+            <UserDetails urn={urn} subview={subview} item={item} ownerships={ownershipResult} />
         </PageContainer>
     );
 }

datahub-web-react/src/utils/customGraphQL/useGetAllEntitySearchResults.ts

@@ -0,0 +1,46 @@
+import { EntityType, SearchInput } from '../../types.generated';
+import { useGetSearchResultsQuery } from '../../graphql/search.generated';
+
+type AllEntityInput<T, K> = Pick<T, Exclude<keyof T, keyof K>> & K;
+
+export function useGetAllEntitySearchResults(input: AllEntityInput<SearchInput, { type?: EntityType }>) {
+    const result: any = {};
+
+    result[EntityType.Chart] = useGetSearchResultsQuery({
+        variables: {
+            input: {
+                type: EntityType.Chart,
+                ...input,
+            },
+        },
+    });
+
+    result[EntityType.Dashboard] = useGetSearchResultsQuery({
+        variables: {
+            input: {
+                type: EntityType.Dashboard,
+                ...input,
+            },
+        },
+    });
+
+    result[EntityType.DataPlatform] = useGetSearchResultsQuery({
+        variables: {
+            input: {
+                type: EntityType.DataPlatform,
+                ...input,
+            },
+        },
+    });
+
+    result[EntityType.Dataset] = useGetSearchResultsQuery({
+        variables: {
+            input: {
+                type: EntityType.Dataset,
+                ...input,
+            },
+        },
+    });
+
+    return result;
+}