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

* add taskRunner util

* add bulk update config flow

src/components/TransformModal/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TransformModal Render 1`] = `
+<div
+  aria-hidden="true"
+/>
+`;

src/components/TransformModal/index.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogTitle,
+  DialogContentText,
+  DialogActions,
+  DialogContent,
+  FormGroup,
+  FormControlLabel,
+} from '@material-ui/core';
+
+const TransformModal = ({
+  open,
+  close,
+  title,
+  body,
+  data,
+  setData,
+  submit
+}) => {
+  const handleClick = () => {
+    close();
+    submit();
+  };
+
+  const handleChange = (key) => {
+    setData((data) => {
+      const {[key]: toChange, ...rest} = data;
+      toChange.value = !toChange.value;
+      return {
+        [key]: toChange,
+        ...rest
+      };
+    });
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={close}
+    >
+      <DialogTitle id="alert-dialog-title">
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        {body && <DialogContentText>
+          {body}
+        </DialogContentText>}
+        <FormGroup>
+          {Object.entries(data).map((([key, value]) => {
+            switch (value.type) {
+              case "boolean":
+                return (
+                  <FormControlLabel
+                    key={key}
+                    label={value.label}
+                    control={
+                      <Checkbox
+                        checked={data[key].value}
+                        onChange={() => handleChange(key)}
+                      />
+                    }
+                  />
+                )
+              default:
+                return <></>;
+            }
+          }))}
+        </FormGroup>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={close}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={handleClick}
+          autoFocus
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default TransformModal;

src/components/TransformModal/index.test.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import TransformModal from ".";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+const data = {
+  test: {
+    label: "Test field",
+    value: false,
+    type: "boolean",
+  },
+}
+
+describe("TransformModal", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+
+    const { container } = render(
+      <TransformModal
+        open={true}
+        close={() => {}}
+        title="Title"
+        body="Body"
+        data={data}
+        setData={() => {}}
+        submit={() => {}}
+      />
+    );
+    await waitFor(() => {
+      /* render */
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("properly renders a checkbox for a boolean", async () => {
+    const { getByText } = render(
+      <TransformModal
+        open={true}
+        close={() => {}}
+        title="Title"
+        body="Body"
+        data={data}
+        setData={() => {}}
+        submit={() => {}}
+      />
+    );
+    await waitFor(() => {
+      /* render */
+    });
+    expect(getByText("Test field")).toBeTruthy();
+  });
+});