Merge branch 'develop' into rc

2025-12-29 00:16:39 +01:00 · 2021-11-12 22:53:39 +11:00
parent 346809e321 aa98f0781e
commit da82b56e7d
4 changed files with 162 additions and 19 deletions
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -24,6 +24,7 @@ import ScrollableDialogContent, {
 export interface IModalProps extends Partial<Omit<DialogProps, "title">> {
  onClose: () => void;
  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;

  title: ReactNode;
  header?: ReactNode;
@@ -45,6 +46,7 @@ export interface IModalProps extends Partial<Omit<DialogProps, "title">> {
 export default function Modal({
  onClose,
  disableBackdropClick,
+  disableEscapeKeyDown,
  title,
  header,
  footer,
@@ -60,13 +62,22 @@ export default function Modal({
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  const [open, setOpen] = useState(true);
-  const handleClose = (_, reason?: string) => {
-    if (disableBackdropClick && reason === "backdropClick") return;
+  const handleClose: NonNullable<DialogProps["onClose"]> = (_, reason) => {
+    if (
+      (disableBackdropClick && reason === "backdropClick") ||
+      (disableEscapeKeyDown && reason === "escapeKeyDown")
+    ) {
+      setEmphasizeCloseButton(true);
+      return;
+    }

    setOpen(false);
+    setEmphasizeCloseButton(false);
    setTimeout(() => onClose(), 300);
  };

+  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
+
  return (
    <Dialog
      open={open}
@@ -99,11 +110,17 @@ export default function Modal({

        {!hideCloseButton && (
          <IconButton
-            onClick={handleClose}
+            onClick={handleClose as any}
            aria-label="Close"
            sx={{
              m: { xs: 1, sm: 1.5 },
              ml: { xs: -1, sm: -1 },
+
+              bgcolor: emphasizeCloseButton ? "error.main" : undefined,
+              color: emphasizeCloseButton ? "error.contrastText" : undefined,
+              "&:hover": emphasizeCloseButton
+                ? { bgcolor: "error.dark" }
+                : undefined,
            }}
            className="dialog-close"
          >
--- a/src/components/fields/Action/ActionFab.tsx
+++ b/src/components/fields/Action/ActionFab.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
-import _get from "lodash/get";
 import { useSnackbar } from "notistack";
+import _get from "lodash/get";

 import { Fab, FabProps } from "@mui/material";
-import PlayIcon from "@mui/icons-material/PlayArrow";
-import RefreshIcon from "@mui/icons-material/Refresh";
+import RunIcon from "@mui/icons-material/PlayArrow";
+import RedoIcon from "@mui/icons-material/Refresh";
 import UndoIcon from "@mui/icons-material/Undo";
 import CircularProgressOptical from "@src/components/CircularProgressOptical";

@@ -20,14 +20,14 @@ const replacer = (data: any) => (m: string, key: string) => {
  return _get(data, objKey, defaultValue);
 };

-const getStateIcon = (actionState) => {
+const getStateIcon = (actionState, config) => {
  switch (actionState) {
    case "undo":
-      return <UndoIcon />;
+      return _get(config, "customIcons.undo") || <UndoIcon />;
    case "redo":
-      return <RefreshIcon />;
+      return _get(config, "customIcons.redo") || <RedoIcon />;
    default:
-      return <PlayIcon />;
+      return _get(config, "customIcons.run") || <RunIcon />;
  }
 };

@@ -161,12 +161,13 @@ export default function ActionFab({
              : theme.palette.background.default,
        },
      }}
+      aria-label={actionState}
      {...props}
    >
      {isRunning ? (
        <CircularProgressOptical color="secondary" size={16} />
      ) : (
-        getStateIcon(actionState)
+        getStateIcon(actionState, config)
      )}
    </Fab>
  );
--- a/src/components/fields/Action/Settings.tsx
+++ b/src/components/fields/Action/Settings.tsx
@@ -10,7 +10,6 @@ import {
  Stack,
  Grid,
  TextField,
-  Divider,
  FormControl,
  FormLabel,
  FormControlLabel,
@@ -21,8 +20,12 @@ import {
  Link,
  Checkbox,
  FormHelperText,
+  Fab,
 } from "@mui/material";
 import ExpandIcon from "@mui/icons-material/KeyboardArrowDown";
+import RunIcon from "@mui/icons-material/PlayArrow";
+import RedoIcon from "@mui/icons-material/Refresh";
+import UndoIcon from "@mui/icons-material/Undo";

 import MultiSelect from "@rowy/multiselect";
 import FieldSkeleton from "@src/components/SideDrawer/Form/FieldSkeleton";
@@ -41,7 +44,13 @@ const CodeEditor = lazy(
 const Settings = ({ config, onChange }) => {
  const { tableState, roles } = useProjectContext();

-  const [activeStep, setActiveStep] = useState(0);
+  const [activeStep, setActiveStep] = useState<
+    "requirements" | "friction" | "action" | "undo" | "customization"
+  >("requirements");
+  const steps =
+    config.isActionScript && _get(config, "undo.enabled")
+      ? ["requirements", "friction", "action", "undo", "customization"]
+      : ["requirements", "friction", "action", "customization"];

  const columnOptions = Object.values(tableState?.columns ?? {}).map((c) => ({
    label: c.name,
@@ -94,7 +103,7 @@ const Settings = ({ config, onChange }) => {
  return (
    <Stepper
      nonLinear
-      activeStep={activeStep}
+      activeStep={steps.indexOf(activeStep)}
      orientation="vertical"
      sx={{
        mt: 0,
@@ -118,7 +127,7 @@ const Settings = ({ config, onChange }) => {
      }}
    >
      <Step>
-        <StepButton onClick={() => setActiveStep(0)}>
+        <StepButton onClick={() => setActiveStep("requirements")}>
          Requirements
          <ExpandIcon />
        </StepButton>
@@ -156,7 +165,7 @@ const Settings = ({ config, onChange }) => {
      </Step>

      <Step>
-        <StepButton onClick={() => setActiveStep(1)}>
+        <StepButton onClick={() => setActiveStep("friction")}>
          Confirmation
          <ExpandIcon />
        </StepButton>
@@ -265,7 +274,7 @@ const Settings = ({ config, onChange }) => {
      </Step>

      <Step>
-        <StepButton onClick={() => setActiveStep(2)}>
+        <StepButton onClick={() => setActiveStep("action")}>
          Action
          <ExpandIcon />
        </StepButton>
@@ -444,7 +453,7 @@ const Settings = ({ config, onChange }) => {

      {config.isActionScript && _get(config, "undo.enabled") && (
        <Step>
-          <StepButton onClick={() => setActiveStep(3)}>
+          <StepButton onClick={() => setActiveStep("undo")}>
            Undo action
            <ExpandIcon />
          </StepButton>
@@ -492,6 +501,118 @@ const Settings = ({ config, onChange }) => {
          </StepContent>
        </Step>
      )}
+
+      <Step>
+        <StepButton onClick={() => setActiveStep("customization")}>
+          Customization
+          <ExpandIcon />
+        </StepButton>
+
+        <StepContent>
+          {/* <Stack spacing={3}> */}
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={config.customIcons?.enabled}
+                onChange={(e) =>
+                  onChange("customIcons.enabled")(e.target.checked)
+                }
+                name="customIcons.enabled"
+              />
+            }
+            label="Customize button icons with emoji"
+            style={{ marginLeft: -11 }}
+          />
+
+          {config.customIcons?.enabled && (
+            <Grid container spacing={2} sx={{ mt: { xs: 0, sm: -1 } }}>
+              <Grid item xs={12} sm={true}>
+                <Stack direction="row" spacing={1}>
+                  <TextField
+                    id="customIcons.run"
+                    value={_get(config, "customIcons.run")}
+                    onChange={(e) =>
+                      onChange("customIcons.run")(e.target.value)
+                    }
+                    label="Run:"
+                    className="labelHorizontal"
+                    inputProps={{ style: { width: "3ch" } }}
+                  />
+                  <Fab size="small" aria-label="Preview of run button">
+                    {_get(config, "customIcons.run") || <RunIcon />}
+                  </Fab>
+                </Stack>
+              </Grid>
+
+              <Grid item xs={12} sm={true}>
+                <Stack direction="row" spacing={1}>
+                  <TextField
+                    id="customIcons.redo"
+                    value={_get(config, "customIcons.redo")}
+                    onChange={(e) =>
+                      onChange("customIcons.redo")(e.target.value)
+                    }
+                    label="Redo:"
+                    className="labelHorizontal"
+                    inputProps={{ style: { width: "3ch" } }}
+                  />
+                  <Fab size="small" aria-label="Preview of redo button">
+                    {_get(config, "customIcons.redo") || <RedoIcon />}
+                  </Fab>
+                </Stack>
+              </Grid>
+
+              <Grid item xs={12} sm={true}>
+                <Stack direction="row" spacing={1}>
+                  <TextField
+                    id="customIcons.undo"
+                    value={_get(config, "customIcons.undo")}
+                    onChange={(e) =>
+                      onChange("customIcons.undo")(e.target.value)
+                    }
+                    label="Undo:"
+                    className="labelHorizontal"
+                    inputProps={{ style: { width: "3ch" } }}
+                  />
+                  <Fab size="small" aria-label="Preview of undo button">
+                    {_get(config, "customIcons.undo") || <UndoIcon />}
+                  </Fab>
+                </Stack>
+              </Grid>
+            </Grid>
+          )}
+          {/* </Stack> */}
+
+          {/* <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MultiSelect
+                label="Required roles"
+                options={roles ?? []}
+                value={config.requiredRoles ?? []}
+                onChange={onChange("requiredRoles")}
+                TextFieldProps={{
+                  id: "requiredRoles",
+                  helperText:
+                    "The user must have at least one of these roles to run the script",
+                }}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <MultiSelect
+                label="Required fields"
+                options={columnOptions}
+                value={config.requiredFields ?? []}
+                onChange={onChange("requiredFields")}
+                TextFieldProps={{
+                  id: "requiredFields",
+                  helperText:
+                    "All the selected fields must have a value for the script to run",
+                }}
+              />
+            </Grid>
+          </Grid> */}
+        </StepContent>
+      </Step>
    </Stepper>
  );
 };
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -251,7 +251,11 @@ export const components = (theme: Theme): ThemeOptions => {
            "&.labelHorizontal": {
              flexDirection: "row",
              alignItems: "center",
-              "& .MuiInputLabel-root": { paddingRight: theme.spacing(1) },
+
+              "& .MuiInputLabel-root": {
+                padding: 0,
+                paddingRight: theme.spacing(1),
+              },
            },
          },
        },