feat(auth): rudamentary viewer context and profile page

Arize-ai · Sep 3, 2024 · 1befa5e · 1befa5e
1 parent de69a70
commit 1befa5e
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 10 deletions.
diff --git a/app/src/contexts/ViewerContext.tsx b/app/src/contexts/ViewerContext.tsx
@@ -30,11 +30,15 @@ export function ViewerProvider({
 }>) {
   const [data] = useRefetchableFragment(
     graphql`
-      fragment ViewerContext_viewer on Query {
+      fragment ViewerContext_viewer on Query
+      @refetchable(queryName: "ViewerContextRefetchQuery") {
         viewer {
           id
           username
           email
+          role {
+            name
+          }
         }
       }
     `,

diff --git a/app/src/contexts/__generated__/ViewerContextRefetchQuery.graphql.ts b/app/src/contexts/__generated__/ViewerContextRefetchQuery.graphql.ts
diff --git a/app/src/contexts/__generated__/ViewerContext_viewer.graphql.ts b/app/src/contexts/__generated__/ViewerContext_viewer.graphql.ts
diff --git a/app/src/pages/__generated__/authenticatedRootLoaderQuery.graphql.ts b/app/src/pages/__generated__/authenticatedRootLoaderQuery.graphql.ts
diff --git a/app/src/pages/profile/ProfilePage.tsx b/app/src/pages/profile/ProfilePage.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Card } from "@arizeai/components";
+import { Card, Form, TextField } from "@arizeai/components";
+
+import { useViewer } from "@phoenix/contexts/ViewerContext";
 
 import { LogoutButton } from "./LogoutButton";
 
@@ -20,11 +22,23 @@ const profilePageInnerCSS = css`
 `;
 
 export function ProfilePage() {
+  const { viewer } = useViewer();
+  if (!viewer) {
+    return null;
+  }
   return (
     <main css={profilePageCSS}>
       <div css={profilePageInnerCSS}>
         <Card title="Profile" extra={<LogoutButton />} variant="compact">
-          Profile goes here
+          <Form>
+            <TextField label="email" value={viewer.email} isReadOnly />
+            <TextField
+              label="username"
+              value={viewer.username || ""}
+              isReadOnly
+            />
+            <TextField label="role" value={viewer.role.name || ""} isReadOnly />
+          </Form>
         </Card>
       </div>
     </main>