[pull] main from KelvinTegelaar:main

cspell.json

@@ -26,6 +26,7 @@
         "Rewst",
         "Sherweb",
         "Syncro",
+        "TERRL",
         "Yubikey"
     ],
     "ignoreWords": [

package.json

@@ -95,6 +95,7 @@
     "react-redux": "9.2.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-time-ago": "^7.3.3",
+    "react-virtuoso": "^4.12.8",
     "react-window": "^1.8.10",
     "redux": "5.0.1",
     "redux-devtools-extension": "2.13.9",

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.0.1"
-}
+  "version": "8.0.2"
+}

src/components/CippCards/CippBannerListCard.jsx

@@ -39,8 +39,8 @@ export const CippBannerListCard = (props) => {
                 </Box>
               </Stack>
               <Stack alignItems="center" direction="row" spacing={2}>
-                <Skeleton variant="circular" width={24} height={24} />
                 <Skeleton variant="text" width={60} />
+                <Skeleton variant="circular" width={24} height={24} />
               </Stack>
             </Stack>
           </Card>
@@ -74,7 +74,16 @@ export const CippBannerListCard = (props) => {
                     direction="row"
                     flexWrap="wrap"
                     justifyContent="space-between"
-                    sx={{ p: 3 }}
+                    sx={{
+                      p: 3,
+                      ...(isCollapsible && {
+                        cursor: "pointer",
+                        "&:hover": {
+                          bgcolor: "action.hover",
+                        },
+                      }),
+                    }}
+                    onClick={isCollapsible ? () => handleExpand(item.id) : undefined}
                   >
                     {/* Left Side: cardLabelBox */}
                     <Stack direction="row" spacing={2} alignItems="center">
@@ -127,8 +136,16 @@ export const CippBannerListCard = (props) => {
                           <Typography variant="body2">{item.statusText}</Typography>
                         </Stack>
                       )}
+                      {item?.cardLabelBoxActions && (
+                        <Box onClick={(e) => e.stopPropagation()}>{item.cardLabelBoxActions}</Box>
+                      )}
                       {isCollapsible && (
-                        <IconButton onClick={() => handleExpand(item.id)}>
+                        <IconButton
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleExpand(item.id);
+                          }}
+                        >
                           <SvgIcon
                             fontSize="small"
                             sx={{
@@ -190,6 +207,7 @@ CippBannerListCard.propTypes = {
       actionButton: PropTypes.element,
       isFetching: PropTypes.bool,
       children: PropTypes.node,
+      cardLabelBoxActions: PropTypes.element,
     })
   ).isRequired,
   isCollapsible: PropTypes.bool,

src/components/CippComponents/CippAliasDialog.jsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from "react";
+import { Typography, Box, Button, TextField, Chip, Stack } from "@mui/material";
+import { Add } from "@mui/icons-material";
+import { useWatch } from "react-hook-form";
+
+const CippAliasDialog = ({ formHook }) => {
+  const [newAlias, setNewAlias] = useState("");
+
+  // Initialize the form field if it doesn't exist
+  useEffect(() => {
+    // Set default empty array if AddedAliases doesn't exist in the form
+    if (!formHook.getValues("AddedAliases")) {
+      formHook.setValue("AddedAliases", []);
+    }
+  }, [formHook]);
+
+  // Use useWatch to subscribe to form field changes
+  const aliasList = useWatch({
+    control: formHook.control,
+    name: "AddedAliases",
+    defaultValue: [],
+  });
+
+  const isPending = formHook.formState.isSubmitting;
+
+  const handleAddAlias = () => {
+    if (newAlias.trim()) {
+      const currentAliases = formHook.getValues("AddedAliases") || [];
+      const newList = [...currentAliases, newAlias.trim()];
+      formHook.setValue("AddedAliases", newList, { shouldValidate: true });
+      setNewAlias("");
+    }
+  };
+
+  const handleDeleteAlias = (aliasToDelete) => {
+    const currentAliases = formHook.getValues("AddedAliases") || [];
+    const updatedList = currentAliases.filter((alias) => alias !== aliasToDelete);
+    formHook.setValue("AddedAliases", updatedList, { shouldValidate: true });
+  };
+
+  const handleKeyPress = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleAddAlias();
+    }
+  };
+
+  return (
+    <>
+      <Stack spacing={3} sx={{ mt: 1 }}>
+        <Typography variant="body2" color="text.secondary">
+          Add proxy addresses (aliases) for this user. Enter each alias and click Add or press
+          Enter.
+        </Typography>
+        <Box sx={{ display: "flex", gap: 1 }}>
+          <TextField
+            fullWidth
+            value={newAlias}
+            onChange={(e) => setNewAlias(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="Enter an alias"
+            variant="outlined"
+            disabled={isPending}
+            size="small"
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                fontFamily: "monospace",
+                "& .MuiOutlinedInput-input": {
+                  px: 2,
+                },
+              },
+            }}
+          />
+          <Button
+            onClick={handleAddAlias}
+            variant="contained"
+            disabled={!newAlias.trim() || isPending}
+            startIcon={<Add />}
+            size="small"
+          >
+            Add
+          </Button>
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 1,
+            minHeight: "40px",
+            p: 1,
+            border: "1px dashed",
+            borderColor: "divider",
+            borderRadius: 1,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {aliasList.length === 0 ? (
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{
+                px: 2,
+                py: 1,
+                textAlign: "center",
+                width: "100%",
+              }}
+            >
+              No aliases added yet
+            </Typography>
+          ) : (
+            aliasList.map((alias) => (
+              <Chip
+                key={alias}
+                label={alias}
+                onDelete={() => handleDeleteAlias(alias)}
+                color="primary"
+                variant="outlined"
+              />
+            ))
+          )}
+        </Box>
+      </Stack>
+    </>
+  );
+};
+
+export default CippAliasDialog;