account panel (#724)

ui100/src/AccountPanel.tsx

@@ -1,20 +1,29 @@
 import {Node} from "@xyflow/react";
-import {Grid2, Typography} from "@mui/material";
+import {Grid2, Paper, TableBody, TableContainer, Typography} from "@mui/material";
 import AccountIcon from "@mui/icons-material/Person4";
+import {User} from "./model/user.ts";
+import PropertyTable from "./PropertyTable.tsx";
+import SecretToggle from "./SecretToggle.tsx";
 
 interface AccountPanelProps {
     account: Node;
+    user: User;
 }
 
-const AccountPanel = ({ account }: AccountPanelProps) => {
+const AccountPanel = ({ account, user }: AccountPanelProps) => {
+    const customProps = {
+        token: row => <SecretToggle secret={row.value} />
+    }
+
     return (
         <Typography component="div">
-            <Grid2 container spacing={2}>
+            <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                <Grid2 >
+                <Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
-                    <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                <Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
-                        <Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
+            </Grid2>
-                        <Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
+            <Grid2 container sx={{ flexGrow: 1 }}>
-                    </Grid2>
+                <Grid2 display="flex">
+                    <PropertyTable object={user} custom={customProps} />
                 </Grid2>
             </Grid2>
         </Typography>

ui100/src/ApiConsole.tsx

@@ -90,7 +90,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
         if(selectedNode) {
             switch(selectedNode.type) {
                 case "account":
-                    setSidePanel(<AccountPanel account={selectedNode} />);
+                    setSidePanel(<AccountPanel account={selectedNode} user={user} />);
                     break;
 
                 case "environment":

ui100/src/PropertyTable.tsx

@@ -0,0 +1,48 @@
+import React, {useEffect, useState} from "react";
+import {camelToWords, objectToRows} from "./model/util.ts";
+import {Paper, Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
+
+type PropertyTableProps = {
+    object: any;
+    custom: any;
+}
+
+const PropertyTable = ({ object, custom }: PropertyTableProps) => {
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        setData(objectToRows(object));
+    }, [object]);
+
+    const value = (row) => {
+        if(custom) {
+            if(row.property in custom) {
+                return custom[row.property](row);
+            }
+        }
+        return row.value;
+    }
+
+    return (
+        <Paper>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Property</TableCell>
+                        <TableCell>Value</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {data.map((row) => (
+                        <TableRow key={row.id}>
+                            <TableCell>{camelToWords(row.property)}</TableCell>
+                            <TableCell sx={{ width: 1000 }}>{value(row)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </Paper>
+    );
+}
+
+export default PropertyTable;

ui100/src/SecretToggle.tsx

@@ -0,0 +1,40 @@
+import {useState} from "react";
+import ShowIcon from "@mui/icons-material/Visibility";
+import HideIcon from "@mui/icons-material/VisibilityOff";
+import {Grid2} from "@mui/material";
+
+interface SecretToggleProps {
+    secret: string;
+}
+
+const SecretToggle = ({ secret }: SecretToggleProps) => {
+    const [showSecret, setShowSecret] = useState(false);
+
+    const toggle = () => setShowSecret(!showSecret);
+
+    if(showSecret) {
+        return (
+            <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
+                <Grid2 display="flex" justifyContent="left">
+                    <span>{secret}</span>
+                </Grid2>
+                <Grid2 display="flex" justifyContent="right">
+                    <HideIcon onClick={toggle} sx={{ ml: 1 }}/>
+                </Grid2>
+            </Grid2>
+        );
+    } else {
+        return (
+            <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
+                <Grid2 display="flex" justifyContent="left">
+                    <span>XXXXXXXX</span>
+                </Grid2>
+                <Grid2 display="flex" justifyContent="right">
+                    <ShowIcon onClick={toggle} sx={{ ml: 1 }} />
+                </Grid2>
+            </Grid2>
+        );
+    }
+}
+
+export default SecretToggle;

ui100/src/model/util.ts

@@ -0,0 +1,21 @@
+export const objectToRows = (obj) => {
+    let rows = [];
+    let count = 0;
+    for(const key in obj) {
+        rows.push({
+            id: count++,
+            property: key,
+            value: obj[key]
+        });
+    }
+    return rows;
+};
+
+export const camelToWords = (s) => s.replace(/([A-Z])/g, ' $1').replace(/^./, function(str){ return str.toUpperCase(); });
+
+export const rowToValue = (row) => {
+    if(row.property.endsWith("At")) {
+        return new Date(row.value).toLocaleString();
+    }
+    return row.value.toString();
+};