3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-07-18 00:58:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

core/ui: user info dashboard improvements (#5128)

Browse source
This commit is contained in:
Caleb Doxsey 2024-06-05 14:57:55 -06:00 • committed by GitHub
parent 4eda7479ce
commit 990517a89e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 47 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

27
ui/src/components/ClaimRow.tsx
View file

@ -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>
);

14
ui/src/components/ClaimValue.tsx
View file

@ -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()}</>;
}

32
ui/src/components/SessionDetails.tsx
View file

@ -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