feat(React): powering user page via graphql

Author: gabe-lyons

datahub-web-react/src/components/entity/user/UserHeader.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import { Space, Badge, Typography, Avatar } from 'antd';
 
 type Props = {
-    profileSrc?: string;
-    name: string;
-    title: string;
-    skills: string[];
-    teams: string[];
-    email: string;
+    profileSrc?: string | null;
+    name?: string | null;
+    title?: string | null;
+    skills?: string[] | null;
+    teams?: string[] | null;
+    email?: string | null;
 };
 
 const Row = styled.div`
@@ -48,15 +48,15 @@ export default function UserHeader({ profileSrc, name, title, skills, teams, ema
                         <Skills>
                             <Typography.Title level={5}>Ask me about</Typography.Title>
                             <Space>
-                                {skills.map((skill) => (
+                                {skills?.map((skill) => (
                                     <Badge style={{ backgroundColor: '#108ee9' }} count={skill} key={skill} />
                                 ))}
                             </Space>
                         </Skills>
                         <div>
                             <Typography.Title level={5}>Teams</Typography.Title>
                             <Space>
-                                {teams.map((team) => (
+                                {teams?.map((team) => (
                                     <Badge style={{ backgroundColor: '#87d068' }} count={team} key={team} />
                                 ))}
                             </Space>

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

@@ -1,11 +1,11 @@
-import { Divider } from 'antd';
+import { Divider, Alert } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
-import { EntityType, PlatformNativeType } from '../../../types.generated';
 import UserHeader from './UserHeader';
 import UserDetails from './UserDetails';
 import useUserParams from './routingUtils/useUserParams';
+import { useGetUserQuery } from '../../../graphql/user.generated';
 
 const PageContainer = styled.div`
     background-color: white;
@@ -17,38 +17,28 @@ const PageContainer = styled.div`
  */
 export default function UserProfile() {
     const { urn, subview, item } = useUserParams();
+    const { loading, error, data } = useGetUserQuery({ variables: { urn } });
+
+    if (loading) {
+        return <Alert type="info" message="Loading" />;
+    }
+
+    if (error || (!loading && !error && !data)) {
+        return <Alert type="error" message={error?.message || 'Entity failed to load'} />;
+    }
 
     return (
         <PageContainer>
             <UserHeader
-                name="Jane Doe"
-                title="Software Engineer"
-                skills={['Pandas', 'Multivariate Calculus', 'Juggling']}
-                teams={['Product', 'Data Science']}
-                email="[email protected]"
+                profileSrc={data?.corpUser?.editableInfo?.pictureLink}
+                name={data?.corpUser?.info?.displayName}
+                title={data?.corpUser?.info?.title}
+                email={data?.corpUser?.info?.email}
+                skills={data?.corpUser?.editableInfo?.skills}
+                teams={data?.corpUser?.editableInfo?.teams}
             />
             <Divider />
-            <UserDetails
-                urn={urn}
-                subview={subview}
-                item={item}
-                ownerships={{
-                    [EntityType.Dataset]: [
-                        {
-                            name: 'HiveDataset',
-                            origin: 'PROD',
-                            description: 'this is a dataset',
-                            platformNativeType: PlatformNativeType.Table,
-                        },
-                        {
-                            name: 'KafkaDataset',
-                            origin: 'PROD',
-                            description: 'this is also a dataset',
-                            platformNativeType: PlatformNativeType.Table,
-                        },
-                    ],
-                }}
-            />
+            <UserDetails urn={urn} subview={subview} item={item} ownerships={{}} />
         </PageContainer>
     );
 }

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

@@ -9,9 +9,12 @@ query getUser($urn: String!) {
             firstName
             lastName
             fullName
+            email
         }
         editableInfo {
             pictureLink
+            teams
+            skills
         }
     }
 }