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

Style update for User Info Endpoint (#3055)

Browse source 
* style changes from mui 5

* fix spacing issue on small screen

* remove unneeded import

* add default exports

* make linter happy

* more style changes

* use startCase from lodash

Co-authored-by: Caleb Doxsey <cdoxsey@pomerium.com>
This commit is contained in:
Nathan Hayfield 2022-02-18 18:39:44 +01:00 • committed by GitHub
parent f0843d6f44
commit fd8ec0099e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 400 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import { Session } from "../types";
import ClaimsTable from "./ClaimsTable";
import IDField from "./IDField";
import Section from "./Section";
import Stack from "@mui/material/Stack";
@ -9,37 +8,52 @@ import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import React, { FC } from "react";
import ClaimValue from "./ClaimValue";
import {startCase} from "lodash";
export type SessionDetailsProps = {
session: Session;
};
export const SessionDetails: FC<SessionDetailsProps> = ({ session }) => {
return (
<Section title="Session Details">
<Section title="User Details">
<Stack spacing={3}>
<TableContainer>
<Table size="small">
<TableBody>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>
<TableCell width={'18%'} variant="head">Session ID</TableCell>
<TableCell align="left">
<IDField value={session?.id} />
</TableCell>
</TableRow>
<TableRow>
<TableCell>User ID</TableCell>
<TableCell>
<TableCell variant="head">User ID</TableCell>
<TableCell align="left">
<IDField value={session?.userId} />
</TableCell>
</TableRow>
<TableRow>
<TableCell>Expires At</TableCell>
<TableCell>{session?.expiresAt || ""}</TableCell>
<TableCell variant="head">Expires At</TableCell>
<TableCell align="left">{session?.expiresAt || ""}</TableCell>
</TableRow>
{Object.entries(session?.claims || {}).map(
([key, values]) => (
<TableRow key={key}>
<TableCell variant="head">{startCase(key)}</TableCell>
<TableCell align="left">
{values?.map((v, i) => (
<React.Fragment key={`${v}`}>
{i > 0 ? <br /> : <></>}
<ClaimValue claimKey={key} claimValue={v} />
</React.Fragment>
))}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<ClaimsTable claims={session?.claims} />
</Stack>
</Section>
);