added the key manager card to the team page

src/teams/TeamKeyManager.tsx

@@ -0,0 +1,140 @@
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  Grid2 as Grid,
+  IconButton,
+  Typography
+} from "@mui/material";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import DeleteIcon from "products/AgIcons/Delete";
+import { pond } from "protobuf-ts/pond";
+import { useKeyManagerAPI } from "providers";
+import React, { useState } from "react";
+
+interface Props {
+  teamId: string;
+  permissions: pond.Permission[];
+}
+
+export default function TeamKeyManager(props: Props) {
+  const { permissions, teamId } = props;
+  const [keyList, setKeyList] = useState<string[]>([]);
+  const [openRemove, setOpenRemove] = useState(false);
+  const [removeIndex, setRemoveIndex] = useState(0);
+  const keyManagerAPI = useKeyManagerAPI();
+
+  const listKeys = () => {
+    keyManagerAPI.listKeys(teamId).then(resp => {
+      if (resp.data.keys.length > 0) {
+        let keys = resp.data.keys;
+        setKeyList([...keys]);
+      }
+    });
+  };
+
+  const addKey = () => {
+    keyManagerAPI.addKey(teamId).then(resp => {
+      let keys = keyList;
+      keys.push(resp.data.key);
+      setKeyList([...keys]);
+    });
+  };
+
+  const removeKey = (i: number) => {
+    keyManagerAPI.removeKey(teamId, keyList[i]).then(resp => {
+      let keys = keyList;
+      keys.splice(i, 1);
+      setKeyList([...keys]);
+    });
+  };
+
+  const header = () => {
+    return (
+      <Grid container justifyContent="space-between" alignItems="center">
+        <Grid>
+          <Typography>API Keys</Typography>
+        </Grid>
+        <Grid>
+          <Button
+            disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
+            style={{ marginRight: 5 }}
+            variant="contained"
+            color="primary"
+            onClick={listKeys}>
+            Display Keys
+          </Button>
+          <Button
+            disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
+            variant="contained"
+            color="primary"
+            onClick={addKey}>
+            Add New Key
+          </Button>
+        </Grid>
+      </Grid>
+    );
+  };
+
+  const removalConfirmation = () => {
+    return (
+      <ResponsiveDialog
+        open={openRemove}
+        onClose={() => {
+          setOpenRemove(false);
+        }}>
+        <DialogTitle>Remove API Key</DialogTitle>
+        <DialogContent>
+          Are you sure you want to remove {keyList[removeIndex]} as an api key?
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              setOpenRemove(false);
+            }}>
+            Cancel
+          </Button>
+          <Button
+            variant="contained"
+            style={{ backgroundColor: "red" }}
+            onClick={() => {
+              removeKey(removeIndex);
+              setOpenRemove(false);
+            }}>
+            Delete
+          </Button>
+        </DialogActions>
+      </ResponsiveDialog>
+    );
+  };
+
+  return (
+    <Box padding={2} style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      {removalConfirmation()}
+      {header()}
+      <Divider />
+      <Grid style={{ padding: 10 }} container justifyContent="space-between" alignItems="center">
+        {keyList.map((k, i) => (
+          <React.Fragment key={k}>
+            <Grid size={10}>
+              {k}
+            </Grid>
+            <Grid size={2}>
+              <IconButton
+                disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
+                onClick={() => {
+                  setOpenRemove(true);
+                  setRemoveIndex(i);
+                }}>
+                <DeleteIcon />
+              </IconButton>
+            </Grid>
+          </React.Fragment>
+        ))}
+      </Grid>
+    </Box>
+  );
+}