CEC-4499: add bulk update configs support (#357)

* add taskRunner util * add bulk update config flow
2023-06-14 13:53:32 -04:00
parent a68c00b4ad
commit de1a5dcd2d
11 changed files with 621 additions and 7 deletions
--- a/src/components/Controls/DropDownButton/index.jsx
+++ b/src/components/Controls/DropDownButton/index.jsx
@@ -0,0 +1,109 @@
+import { useRef, useState } from "react";
+import {
+  Button,
+  ButtonGroup,
+  ClickAwayListener,
+  Grow,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+} from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+
+const DropDownButton = ({ actions = [], payload = [] }) => {
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const anchorRef = useRef(null);
+
+  const handleClick = () => {
+    actions[selectedIndex].trigger(...payload);
+  };
+
+  const handleMenuItemClick = (event, index) => {
+    setSelectedIndex(index);
+    setOpen(false);
+  }
+
+  const handleToggle = () => {
+    setOpen(open => !open);
+  };
+
+  const handleClose = (event) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current.contains(event.target)
+    ) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <ButtonGroup
+        color="primary"
+        variant="contained"
+        ref={anchorRef}
+        aria-label="choose action"
+      >
+        <Button
+          onClick={handleClick}
+          disabled={actions[selectedIndex].disabled}
+        >
+          {actions[selectedIndex].name}
+        </Button>
+        <Button
+          size="small"
+          aria-controls={open ? 'split-button-menu' : undefined}
+          aria-expanded={open ? 'true' : undefined}
+          aria-label="select action"
+          aria-haspopup="menu"
+          onClick={handleToggle}
+        >
+          <ArrowDropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Popper
+        sx={{
+          zIndex: 100,
+        }}
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === 'bottom' ? 'center top' : 'center bottom',
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList id="split-button-menu" autoFocusItem>
+                  {actions.map((action, index) => (
+                    <MenuItem
+                      key={action.name}
+                      disabled={actions[index].disabled}
+                      selected={index === selectedIndex}
+                      onClick={(event) => handleMenuItemClick(event, index)}
+                    >
+                      {action.name}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  )
+}
+
+export default DropDownButton;