sketching in action buttons (#822)

openziti · Jan 15, 2025 · 9f048c6 · 9f048c6
1 parent 96c556f
commit 9f048c6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/ui100/src/AccountPanel.tsx b/ui100/src/AccountPanel.tsx
@@ -1,9 +1,11 @@
 import {Node} from "@xyflow/react";
-import {Grid2, Typography} from "@mui/material";
+import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import AccountIcon from "@mui/icons-material/Person4";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
 import useStore from "./model/store.ts";
+import PasswordIcon from "@mui/icons-material/Password";
+import TokenIcon from "@mui/icons-material/Key";
 
 interface AccountPanelProps {
     account: Node;
@@ -26,6 +28,14 @@ const AccountPanel = ({ account}: AccountPanelProps) => {
                 <Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
             </Grid2>
+            <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
+                <Tooltip title="Change Password">
+                    <Button variant="contained" color="error"><PasswordIcon /></Button>
+                </Tooltip>
+                <Tooltip title="Regenerate Account Token" sx={{ ml: 1 }}>
+                    <Button variant="contained" color="error"><TokenIcon /></Button>
+                </Tooltip>
+            </Grid2>
             <Grid2 container sx={{ flexGrow: 1 }}>
                 <Grid2 display="flex">
                     <PropertyTable object={user} custom={customProps} labels={label} />

diff --git a/ui100/src/EnvironmentPanel.tsx b/ui100/src/EnvironmentPanel.tsx
@@ -1,11 +1,12 @@
 import {Node} from "@xyflow/react";
-import {Grid2, Typography} from "@mui/material";
+import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
 import {useEffect, useState} from "react";
 import {Configuration, Environment, MetadataApi} from "./api";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
 import useStore from "./model/store.ts";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 interface EnvironmentPanelProps {
     environment: Node;
@@ -50,6 +51,11 @@ const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
                 <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex" component="h3">{String(environment.data.label)}</Grid2>
             </Grid2>
+            <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
+                <Tooltip title="Release Environment">
+                    <Button variant="contained" color="error"><DeleteIcon /></Button>
+                </Tooltip>
+            </Grid2>
             <Grid2 container sx={{ flexGrow: 1 }}>
                 <Grid2 display="flex">
                     <PropertyTable object={detail} custom={customProperties} labels={labels} />

diff --git a/ui100/src/SharePanel.tsx b/ui100/src/SharePanel.tsx
@@ -1,11 +1,12 @@
 import {Node} from "@xyflow/react";
-import {Grid2, Typography} from "@mui/material";
+import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
 import {Configuration, MetadataApi, Share} from "./api";
 import {useEffect, useState} from "react";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
 import useStore from "./model/store.ts";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 interface SharePanelProps {
     share: Node;
@@ -47,6 +48,11 @@ const SharePanel = ({ share }: SharePanelProps) => {
                 <Grid2 display="flex"><ShareIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex" component="h3">{String(share.data.label)}</Grid2>
             </Grid2>
+            <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
+                <Tooltip title="Release Environment">
+                    <Button variant="contained" color="error"><DeleteIcon /></Button>
+                </Tooltip>
+            </Grid2>
             <Grid2 container sx={{ flexGrow: 1 }}>
                 <Grid2 display="flex">
                     <PropertyTable object={detail} custom={customProperties}/>