frontend: react+mui (#3004)

* mui v5 wip

* wip

* wip

* wip

* use compressor for all controlplane endpoints

* wip

* wip

* add deps

* fix authenticate URL

* fix test

* fix test

* fix build

* maybe fix build

* fix integration test

* remove image asset test

* add yarn.lock

ui/src/components/SessionDetails.tsx

@@ -0,0 +1,47 @@
+import { Session } from "../types";
+import ClaimsTable from "./ClaimsTable";
+import IDField from "./IDField";
+import Section from "./Section";
+import Stack from "@mui/material/Stack";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
+import React, { FC } from "react";
+
+export type SessionDetailsProps = {
+  session: Session;
+};
+export const SessionDetails: FC<SessionDetailsProps> = ({ session }) => {
+  return (
+    <Section title="Session Details">
+      <Stack spacing={3}>
+        <TableContainer>
+          <Table size="small">
+            <TableBody>
+              <TableRow>
+                <TableCell>ID</TableCell>
+                <TableCell>
+                  <IDField value={session?.id} />
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>User ID</TableCell>
+                <TableCell>
+                  <IDField value={session?.userId} />
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Expires At</TableCell>
+                <TableCell>{session?.expiresAt || ""}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <ClaimsTable claims={session?.claims} />
+      </Stack>
+    </Section>
+  );
+};
+export default SessionDetails;