From 990517a89ef864afb41444350d8f114542a9cd77 Mon Sep 17 00:00:00 2001
From: Caleb Doxsey <cdoxsey@pomerium.com>
Date: Wed, 5 Jun 2024 14:57:55 -0600
Subject: [PATCH] core/ui: user info dashboard improvements (#5128)

---
 ui/src/components/ClaimRow.tsx       | 27 +++++++++++++----------
 ui/src/components/ClaimValue.tsx     | 14 ++++++++++++
 ui/src/components/SessionDetails.tsx | 32 +++++++++++++++-------------
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/ClaimRow.tsx b/ui/src/components/ClaimRow.tsx
index 8f4d0504a..9d96972c8 100644
--- a/ui/src/components/ClaimRow.tsx
+++ b/ui/src/components/ClaimRow.tsx
@@ -1,5 +1,5 @@
 import { TableCell, TableRow } from "@mui/material";
-import isArray from "lodash/isArray";
+import isPlainObject from "lodash/isPlainObject";
 import startCase from "lodash/startCase";
 import React, { FC } from "react";
 
@@ -10,20 +10,25 @@ export type ClaimRowProps = {
   claimValue: unknown;
 };
 export const ClaimRow: FC<ClaimRowProps> = ({ claimKey, claimValue }) => {
+  if (isPlainObject(claimValue)) {
+    return (
+      <>
+        {Object.entries(claimValue).map(([k, v]) => (
+          <ClaimRow
+            key={`${claimKey}/${k}`}
+            claimKey={`${claimKey} ${k}`}
+            claimValue={v}
+          />
+        ))}
+      </>
+    );
+  }
+
   return (
     <TableRow>
       <TableCell variant="head">{startCase(claimKey)}</TableCell>
       <TableCell align="left">
-        {isArray(claimValue) ? (
-          claimValue?.map((v, i) => (
-            <React.Fragment key={`${v}`}>
-              {i > 0 ? <br /> : <></>}
-              <ClaimValue claimKey={claimKey} claimValue={v} />
-            </React.Fragment>
-          ))
-        ) : (
-          <ClaimValue claimKey={claimKey} claimValue={claimValue} />
-        )}
+        <ClaimValue claimKey={claimKey} claimValue={claimValue} />
       </TableCell>
     </TableRow>
   );
diff --git a/ui/src/components/ClaimValue.tsx b/ui/src/components/ClaimValue.tsx
index ea7cb839b..03d0815de 100644
--- a/ui/src/components/ClaimValue.tsx
+++ b/ui/src/components/ClaimValue.tsx
@@ -1,3 +1,4 @@
+import isArray from "lodash/isArray";
 import React, { FC } from "react";
 
 import IDField from "./IDField";
@@ -11,6 +12,19 @@ type ClaimValueProps = {
   claimValue: unknown;
 };
 const ClaimValue: FC<ClaimValueProps> = ({ claimKey, claimValue }) => {
+  if (isArray(claimValue)) {
+    return (
+      <>
+        {claimValue?.map((v, i) => (
+          <React.Fragment key={`${v}`}>
+            {i > 0 ? <br /> : <></>}
+            <ClaimValue claimKey={claimKey} claimValue={v} />
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
   if (unixSecondTimestampFields.has(claimKey)) {
     return <>{new Date((claimValue as number) * 1000).toISOString()}</>;
   }
diff --git a/ui/src/components/SessionDetails.tsx b/ui/src/components/SessionDetails.tsx
index 40252d22f..9a5845d0a 100644
--- a/ui/src/components/SessionDetails.tsx
+++ b/ui/src/components/SessionDetails.tsx
@@ -25,20 +25,22 @@ export const SessionDetails: FC<SessionDetailsProps> = ({
 }) => {
   return (
     <>
-      {session?.id ? (
+      {session?.id || profile?.claims ? (
         <Section title="User Details">
           <Stack spacing={3}>
             <TableContainer>
               <Table size="small">
                 <TableBody>
-                  <TableRow>
-                    <TableCell width={"18%"} variant="head">
-                      Session ID
-                    </TableCell>
-                    <TableCell align="left">
-                      <IDField value={session?.id} />
-                    </TableCell>
-                  </TableRow>
+                  {session?.id && (
+                    <TableRow>
+                      <TableCell width={"18%"} variant="head">
+                        Session ID
+                      </TableCell>
+                      <TableCell align="left">
+                        <IDField value={session?.id} />
+                      </TableCell>
+                    </TableRow>
+                  )}
                   <TableRow>
                     <TableCell variant="head">User ID</TableCell>
                     <TableCell align="left">
@@ -49,12 +51,12 @@ export const SessionDetails: FC<SessionDetailsProps> = ({
                       />
                     </TableCell>
                   </TableRow>
-                  <TableRow>
-                    <TableCell variant="head">Expires At</TableCell>
-                    <TableCell align="left">
-                      {session?.expiresAt || ""}
-                    </TableCell>
-                  </TableRow>
+                  {session?.expiresAt && (
+                    <TableRow>
+                      <TableCell variant="head">Expires At</TableCell>
+                      <TableCell align="left">{session?.expiresAt}</TableCell>
+                    </TableRow>
+                  )}
                   {Object.entries(session?.claims || {}).map(
                     ([key, values]) => (
                       <ClaimRow