@webiny/app-workflows 0.0.0-unstable.61c048f412

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormColor.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Bind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { ColorPicker } from "@webiny/admin-ui";
+export const StepFormColor = () => {
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "color",
+    validators: validation.create("required")
+  }, ({
+    onChange,
+    value
+  }) => {
+    return /*#__PURE__*/React.createElement(ColorPicker, {
+      label: "Color",
+      required: true,
+      value: value,
+      onChangeComplete: onChange
+    });
+  });
+};
+
+//# sourceMappingURL=StepFormColor.js.map

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormColor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Bind","validation","ColorPicker","StepFormColor","createElement","name","validators","create","onChange","value","label","required","onChangeComplete"],"sources":["StepFormColor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nexport const StepFormColor = () => {\n    return (\n        <Bind name={\"color\"} validators={validation.create(\"required\")}>\n            {({ onChange, value }) => {\n                return (\n                    <ColorPicker\n                        label=\"Color\"\n                        required={true}\n                        value={value}\n                        onChangeComplete={onChange}\n                    />\n                );\n            }}\n        </Bind>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,IAAI;IAACK,IAAI,EAAE,OAAQ;IAACC,UAAU,EAAEL,UAAU,CAACM,MAAM,CAAC,UAAU;EAAE,GAC1D,CAAC;IAAEC,QAAQ;IAAEC;EAAM,CAAC,KAAK;IACtB,oBACIV,KAAA,CAAAK,aAAA,CAACF,WAAW;MACRQ,KAAK,EAAC,OAAO;MACbC,QAAQ,EAAE,IAAK;MACfF,KAAK,EAAEA,KAAM;MACbG,gBAAgB,EAAEJ;IAAS,CAC9B,CAAC;EAEV,CACE,CAAC;AAEf,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormDescription.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const StepFormDescription: () => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormDescription.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Bind } from "@webiny/form";
+import { Input } from "@webiny/admin-ui";
+export const StepFormDescription = () => {
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "description"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Give your workflow a description (Optional)",
+    size: "lg"
+  }));
+};
+
+//# sourceMappingURL=StepFormDescription.js.map

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Bind","Input","StepFormDescription","createElement","name","label","size"],"sources":["StepFormDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { Input } from \"@webiny/admin-ui\";\n\nexport const StepFormDescription = () => {\n    return (\n        <Bind name={\"description\"}>\n            <Input label={\"Give your workflow a description (Optional)\"} size={\"lg\"} />\n        </Bind>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,oBACIH,KAAA,CAAAI,aAAA,CAACH,IAAI;IAACI,IAAI,EAAE;EAAc,gBACtBL,KAAA,CAAAI,aAAA,CAACF,KAAK;IAACI,KAAK,EAAE,6CAA8C;IAACC,IAAI,EAAE;EAAK,CAAE,CACxE,CAAC;AAEf,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormNotifications.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { IWorkflowNotificationType } from "../../../../../types.js";
+interface IStepFormNotificationsProps {
+    items: IWorkflowNotificationType[];
+}
+export declare const StepFormNotifications: (props: IStepFormNotificationsProps) => React.JSX.Element;
+export {};

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormNotifications.js

@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import { Bind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { CheckboxGroup } from "@webiny/admin-ui";
+const convertInputValue = value => {
+  if (!value?.length) {
+    return [];
+  }
+  return value.map(v => v.id);
+};
+export const StepFormNotifications = props => {
+  const {
+    items: initialItems
+  } = props;
+  const items = useMemo(() => {
+    return initialItems.map(item => {
+      return {
+        id: item.id,
+        value: item.id,
+        label: item.title
+      };
+    });
+  }, [initialItems]);
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "notifications",
+    validators: validation.create("required")
+  }, ({
+    value,
+    onChange
+  }) => {
+    return /*#__PURE__*/React.createElement(CheckboxGroup, {
+      label: "Notifications",
+      items: items,
+      value: convertInputValue(value),
+      onChange: input => {
+        onChange(input.map(id => ({
+          id
+        })));
+      }
+    });
+  });
+};
+
+//# sourceMappingURL=StepFormNotifications.js.map

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormNotifications.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Bind","validation","CheckboxGroup","convertInputValue","value","length","map","v","id","StepFormNotifications","props","items","initialItems","item","label","title","createElement","name","validators","create","onChange","input"],"sources":["StepFormNotifications.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { CheckboxGroup } from \"@webiny/admin-ui\";\nimport type { IWorkflowNotificationType, IWorkflowStepNotification } from \"~/types.js\";\n\nconst convertInputValue = (value?: IWorkflowStepNotification[]): string[] => {\n    if (!value?.length) {\n        return [];\n    }\n    return value.map(v => v.id);\n};\n\ninterface IStepFormNotificationsProps {\n    items: IWorkflowNotificationType[];\n}\n\nexport const StepFormNotifications = (props: IStepFormNotificationsProps) => {\n    const { items: initialItems } = props;\n\n    const items = useMemo(() => {\n        return initialItems.map(item => {\n            return {\n                id: item.id,\n                value: item.id,\n                label: item.title\n            };\n        });\n    }, [initialItems]);\n    return (\n        <Bind name={\"notifications\"} validators={validation.create(\"required\")}>\n            {({ value, onChange }) => {\n                return (\n                    <CheckboxGroup\n                        label={\"Notifications\"}\n                        items={items}\n                        value={convertInputValue(value)}\n                        onChange={(input: string[]) => {\n                            onChange(input.map(id => ({ id })));\n                        }}\n                    />\n                );\n            }}\n        </Bind>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,aAAa,QAAQ,kBAAkB;AAGhD,MAAMC,iBAAiB,GAAIC,KAAmC,IAAe;EACzE,IAAI,CAACA,KAAK,EAAEC,MAAM,EAAE;IAChB,OAAO,EAAE;EACb;EACA,OAAOD,KAAK,CAACE,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;AAC/B,CAAC;AAMD,OAAO,MAAMC,qBAAqB,GAAIC,KAAkC,IAAK;EACzE,MAAM;IAAEC,KAAK,EAAEC;EAAa,CAAC,GAAGF,KAAK;EAErC,MAAMC,KAAK,GAAGZ,OAAO,CAAC,MAAM;IACxB,OAAOa,YAAY,CAACN,GAAG,CAACO,IAAI,IAAI;MAC5B,OAAO;QACHL,EAAE,EAAEK,IAAI,CAACL,EAAE;QACXJ,KAAK,EAAES,IAAI,CAACL,EAAE;QACdM,KAAK,EAAED,IAAI,CAACE;MAChB,CAAC;IACL,CAAC,CAAC;EACN,CAAC,EAAE,CAACH,YAAY,CAAC,CAAC;EAClB,oBACId,KAAA,CAAAkB,aAAA,CAAChB,IAAI;IAACiB,IAAI,EAAE,eAAgB;IAACC,UAAU,EAAEjB,UAAU,CAACkB,MAAM,CAAC,UAAU;EAAE,GAClE,CAAC;IAAEf,KAAK;IAAEgB;EAAS,CAAC,KAAK;IACtB,oBACItB,KAAA,CAAAkB,aAAA,CAACd,aAAa;MACVY,KAAK,EAAE,eAAgB;MACvBH,KAAK,EAAEA,KAAM;MACbP,KAAK,EAAED,iBAAiB,CAACC,KAAK,CAAE;MAChCgB,QAAQ,EAAGC,KAAe,IAAK;QAC3BD,QAAQ,CAACC,KAAK,CAACf,GAAG,CAACE,EAAE,KAAK;UAAEA;QAAG,CAAC,CAAC,CAAC,CAAC;MACvC;IAAE,CACL,CAAC;EAEV,CACE,CAAC;AAEf,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormTeams.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const StepFormTeams: () => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormTeams.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { Bind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { TeamsMultiAutocomplete } from "@webiny/app-admin";
+const mapInput = input => {
+  if (!input?.length) {
+    return [];
+  }
+  return input.filter(item => {
+    return !!item.id;
+  }).map(item => {
+    return {
+      id: item.id
+    };
+  });
+};
+const Autocomplete = ({
+  bind
+}) => {
+  const onChange = useCallback(input => {
+    return bind.onChange(mapInput(input));
+  }, [bind.onChange]);
+  return /*#__PURE__*/React.createElement(TeamsMultiAutocomplete, Object.assign({}, bind, {
+    label: "Select which teams need to review and approve this workflow",
+    onChange: onChange
+  }));
+};
+export const StepFormTeams = () => {
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "teams",
+    validators: validation.create("required,minLength:1")
+  }, bind => {
+    return /*#__PURE__*/React.createElement(Autocomplete, {
+      bind: bind
+    });
+  });
+};
+
+//# sourceMappingURL=StepFormTeams.js.map

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormTeams.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Bind","validation","TeamsMultiAutocomplete","mapInput","input","length","filter","item","id","map","Autocomplete","bind","onChange","createElement","Object","assign","label","StepFormTeams","name","validators","create"],"sources":["StepFormTeams.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport { Bind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { TeamsMultiAutocomplete } from \"@webiny/app-admin\";\n\ninterface IInput {\n    id?: string;\n}\n\nconst mapInput = (input?: IInput[]): Required<IInput>[] => {\n    if (!input?.length) {\n        return [];\n    }\n    return input\n        .filter((item): item is Required<IInput> => {\n            return !!item.id;\n        })\n        .map(item => {\n            return {\n                id: item.id\n            };\n        });\n};\n\ninterface IAutocompleteProps {\n    bind: BindComponentRenderProp;\n}\nconst Autocomplete = ({ bind }: IAutocompleteProps) => {\n    const onChange = useCallback(\n        (input?: IInput[]) => {\n            return bind.onChange(mapInput(input));\n        },\n        [bind.onChange]\n    );\n\n    return (\n        <TeamsMultiAutocomplete\n            {...bind}\n            label={\"Select which teams need to review and approve this workflow\"}\n            onChange={onChange}\n        />\n    );\n};\n\nexport const StepFormTeams = () => {\n    return (\n        <Bind name={\"teams\"} validators={validation.create(\"required,minLength:1\")}>\n            {bind => {\n                return <Autocomplete bind={bind} />;\n            }}\n        </Bind>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,sBAAsB,QAAQ,mBAAmB;AAM1D,MAAMC,QAAQ,GAAIC,KAAgB,IAAyB;EACvD,IAAI,CAACA,KAAK,EAAEC,MAAM,EAAE;IAChB,OAAO,EAAE;EACb;EACA,OAAOD,KAAK,CACPE,MAAM,CAAEC,IAAI,IAA+B;IACxC,OAAO,CAAC,CAACA,IAAI,CAACC,EAAE;EACpB,CAAC,CAAC,CACDC,GAAG,CAACF,IAAI,IAAI;IACT,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC;IACb,CAAC;EACL,CAAC,CAAC;AACV,CAAC;AAKD,MAAME,YAAY,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EACnD,MAAMC,QAAQ,GAAGb,WAAW,CACvBK,KAAgB,IAAK;IAClB,OAAOO,IAAI,CAACC,QAAQ,CAACT,QAAQ,CAACC,KAAK,CAAC,CAAC;EACzC,CAAC,EACD,CAACO,IAAI,CAACC,QAAQ,CAClB,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACX,sBAAsB,EAAAY,MAAA,CAAAC,MAAA,KACfJ,IAAI;IACRK,KAAK,EAAE,6DAA8D;IACrEJ,QAAQ,EAAEA;EAAS,EACtB,CAAC;AAEV,CAAC;AAED,OAAO,MAAMK,aAAa,GAAGA,CAAA,KAAM;EAC/B,oBACInB,KAAA,CAAAe,aAAA,CAACb,IAAI;IAACkB,IAAI,EAAE,OAAQ;IAACC,UAAU,EAAElB,UAAU,CAACmB,MAAM,CAAC,sBAAsB;EAAE,GACtET,IAAI,IAAI;IACL,oBAAOb,KAAA,CAAAe,aAAA,CAACH,YAAY;MAACC,IAAI,EAAEA;IAAK,CAAE,CAAC;EACvC,CACE,CAAC;AAEf,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormTitle.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const StepFormTitle: () => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormTitle.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Bind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { Input } from "@webiny/admin-ui";
+export const StepFormTitle = () => {
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "title",
+    validators: validation.create("required")
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Title",
+    size: "lg"
+  }));
+};
+
+//# sourceMappingURL=StepFormTitle.js.map

package/Components/WorkflowsEditor/Editor/Step/Form/StepFormTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Bind","validation","Input","StepFormTitle","createElement","name","validators","create","label","size"],"sources":["StepFormTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { Input } from \"@webiny/admin-ui\";\n\nexport const StepFormTitle = () => {\n    return (\n        <Bind name={\"title\"} validators={validation.create(\"required\")}>\n            <Input label={\"Title\"} size={\"lg\"} />\n        </Bind>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,IAAI;IAACK,IAAI,EAAE,OAAQ;IAACC,UAAU,EAAEL,UAAU,CAACM,MAAM,CAAC,UAAU;EAAE,gBAC3DR,KAAA,CAAAK,aAAA,CAACF,KAAK;IAACM,KAAK,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,CAAE,CAClC,CAAC;AAEf,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/InactiveStep.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IWorkflowStep } from "../../../../types.js";
+export type IInactiveStep = Required<Omit<IWorkflowStep, "teams" | "notifications">>;
+export interface IInactiveStepProps {
+    step: IInactiveStep;
+}
+export declare const InactiveStep: (props: IInactiveStepProps) => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/Step/InactiveStep.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+export const InactiveStep = props => {
+  const {
+    step
+  } = props;
+  return /*#__PURE__*/React.createElement(Accordion, {
+    variant: "container",
+    background: "light"
+  }, /*#__PURE__*/React.createElement(Accordion.Item, {
+    locked: true,
+    key: `step-${step.id}`,
+    title: step.title,
+    subtitle: step.description,
+    colorMark: step.color
+  }, /*#__PURE__*/React.createElement(React.Fragment, null)));
+};
+
+//# sourceMappingURL=InactiveStep.js.map

package/Components/WorkflowsEditor/Editor/Step/InactiveStep.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Accordion","InactiveStep","props","step","createElement","variant","background","Item","locked","key","id","title","subtitle","description","colorMark","color","Fragment"],"sources":["InactiveStep.tsx"],"sourcesContent":["import React from \"react\";\nimport { IWorkflowStep } from \"~/types.js\";\nimport { Accordion } from \"@webiny/admin-ui\";\n\nexport type IInactiveStep = Required<Omit<IWorkflowStep, \"teams\" | \"notifications\">>;\n\nexport interface IInactiveStepProps {\n    step: IInactiveStep;\n}\n\nexport const InactiveStep = (props: IInactiveStepProps) => {\n    const { step } = props;\n\n    return (\n        <Accordion variant={\"container\"} background={\"light\"}>\n            <Accordion.Item\n                locked={true}\n                key={`step-${step.id}`}\n                title={step.title}\n                subtitle={step.description}\n                colorMark={step.color}\n            >\n                <></>\n            </Accordion.Item>\n        </Accordion>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,kBAAkB;AAQ5C,OAAO,MAAMC,YAAY,GAAIC,KAAyB,IAAK;EACvD,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EAEtB,oBACIH,KAAA,CAAAK,aAAA,CAACJ,SAAS;IAACK,OAAO,EAAE,WAAY;IAACC,UAAU,EAAE;EAAQ,gBACjDP,KAAA,CAAAK,aAAA,CAACJ,SAAS,CAACO,IAAI;IACXC,MAAM,EAAE,IAAK;IACbC,GAAG,EAAE,QAAQN,IAAI,CAACO,EAAE,EAAG;IACvBC,KAAK,EAAER,IAAI,CAACQ,KAAM;IAClBC,QAAQ,EAAET,IAAI,CAACU,WAAY;IAC3BC,SAAS,EAAEX,IAAI,CAACY;EAAM,gBAEtBhB,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAiB,QAAA,MAAI,CACQ,CACT,CAAC;AAEpB,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/NewStep.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { IWorkflowNotificationType, IWorkflowStep } from "../../../../types.js";
+export interface IAddNewStepProps {
+    onAdd: (step: IWorkflowStep) => void;
+    notifications: IWorkflowNotificationType[];
+}
+export declare const NewStep: (props: IAddNewStepProps) => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/Step/NewStep.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useState } from "react";
+import { ReactComponent as Add } from "@webiny/icons/add.svg";
+import { Step } from "./Step.js";
+import { generateAlphaNumericId } from "@webiny/utils/generateId.js";
+import { Button, Grid, Icon } from "@webiny/admin-ui";
+const createWorkflowStep = () => {
+  return {
+    id: generateAlphaNumericId(),
+    title: "",
+    notifications: [],
+    description: "",
+    color: "#E28743",
+    teams: []
+  };
+};
+export const NewStep = props => {
+  const {
+    onAdd,
+    notifications
+  } = props;
+  const [step, setStep] = useState(null);
+  const onClick = useCallback(() => {
+    setStep(createWorkflowStep());
+  }, [setStep]);
+  const onSave = useCallback(step => {
+    onAdd(step);
+    setStep(null);
+  }, [onAdd, setStep]);
+  const onCancel = useCallback(() => {
+    setStep(null);
+  }, [setStep]);
+  if (step) {
+    return /*#__PURE__*/React.createElement(Step, {
+      title: "New Workflow Step",
+      onCancel: onCancel,
+      onSave: onSave,
+      step: step,
+      open: true,
+      notifications: notifications
+    });
+  }
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12,
+    className: "text-center p-sm-extra border-sm border-dashed border-neutral-muted rounded-lg"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: onClick,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Add",
+      size: "sm",
+      icon: /*#__PURE__*/React.createElement(Add, null)
+    })
+  }, "Add new custom step")));
+};
+
+//# sourceMappingURL=NewStep.js.map

package/Components/WorkflowsEditor/Editor/Step/NewStep.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","ReactComponent","Add","Step","generateAlphaNumericId","Button","Grid","Icon","createWorkflowStep","id","title","notifications","description","color","teams","NewStep","props","onAdd","step","setStep","onClick","onSave","onCancel","createElement","open","className","Column","span","variant","icon","label","size"],"sources":["NewStep.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { ReactComponent as Add } from \"@webiny/icons/add.svg\";\nimport { Step } from \"./Step.js\";\nimport { generateAlphaNumericId } from \"@webiny/utils/generateId.js\";\nimport type { IWorkflowNotificationType, IWorkflowStep, IWorkflowStepTeam } from \"~/types.js\";\nimport { Button, Grid, Icon } from \"@webiny/admin-ui\";\nimport { NonEmptyArray } from \"@webiny/app/types.js\";\n\nexport interface IAddNewStepProps {\n    onAdd: (step: IWorkflowStep) => void;\n    notifications: IWorkflowNotificationType[];\n}\n\nconst createWorkflowStep = (): IWorkflowStep => {\n    return {\n        id: generateAlphaNumericId(),\n        title: \"\",\n        notifications: [],\n        description: \"\",\n        color: \"#E28743\",\n        teams: [] as unknown as NonEmptyArray<IWorkflowStepTeam>\n    };\n};\n\nexport const NewStep = (props: IAddNewStepProps) => {\n    const { onAdd, notifications } = props;\n    const [step, setStep] = useState<IWorkflowStep | null>(null);\n\n    const onClick = useCallback(() => {\n        setStep(createWorkflowStep());\n    }, [setStep]);\n\n    const onSave = useCallback(\n        (step: IWorkflowStep) => {\n            onAdd(step);\n            setStep(null);\n        },\n        [onAdd, setStep]\n    );\n\n    const onCancel = useCallback(() => {\n        setStep(null);\n    }, [setStep]);\n\n    if (step) {\n        return (\n            <Step\n                title={\"New Workflow Step\"}\n                onCancel={onCancel}\n                onSave={onSave}\n                step={step}\n                open={true}\n                notifications={notifications}\n            />\n        );\n    }\n\n    return (\n        <Grid className={\"w-full\"}>\n            <Grid.Column\n                span={12}\n                className={\n                    \"text-center p-sm-extra border-sm border-dashed border-neutral-muted rounded-lg\"\n                }\n            >\n                <Button\n                    variant={\"ghost\"}\n                    onClick={onClick}\n                    icon={<Icon label={\"Add\"} size={\"sm\"} icon={<Add />} />}\n                >\n                    Add new custom step\n                </Button>\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,cAAc,IAAIC,GAAG,QAAQ,uBAAuB;AAC7D,SAASC,IAAI;AACb,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpE,SAASC,MAAM,EAAEC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAQrD,MAAMC,kBAAkB,GAAGA,CAAA,KAAqB;EAC5C,OAAO;IACHC,EAAE,EAAEL,sBAAsB,CAAC,CAAC;IAC5BM,KAAK,EAAE,EAAE;IACTC,aAAa,EAAE,EAAE;IACjBC,WAAW,EAAE,EAAE;IACfC,KAAK,EAAE,SAAS;IAChBC,KAAK,EAAE;EACX,CAAC;AACL,CAAC;AAED,OAAO,MAAMC,OAAO,GAAIC,KAAuB,IAAK;EAChD,MAAM;IAAEC,KAAK;IAAEN;EAAc,CAAC,GAAGK,KAAK;EACtC,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGnB,QAAQ,CAAuB,IAAI,CAAC;EAE5D,MAAMoB,OAAO,GAAGrB,WAAW,CAAC,MAAM;IAC9BoB,OAAO,CAACX,kBAAkB,CAAC,CAAC,CAAC;EACjC,CAAC,EAAE,CAACW,OAAO,CAAC,CAAC;EAEb,MAAME,MAAM,GAAGtB,WAAW,CACrBmB,IAAmB,IAAK;IACrBD,KAAK,CAACC,IAAI,CAAC;IACXC,OAAO,CAAC,IAAI,CAAC;EACjB,CAAC,EACD,CAACF,KAAK,EAAEE,OAAO,CACnB,CAAC;EAED,MAAMG,QAAQ,GAAGvB,WAAW,CAAC,MAAM;IAC/BoB,OAAO,CAAC,IAAI,CAAC;EACjB,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAID,IAAI,EAAE;IACN,oBACIpB,KAAA,CAAAyB,aAAA,CAACpB,IAAI;MACDO,KAAK,EAAE,mBAAoB;MAC3BY,QAAQ,EAAEA,QAAS;MACnBD,MAAM,EAAEA,MAAO;MACfH,IAAI,EAAEA,IAAK;MACXM,IAAI,EAAE,IAAK;MACXb,aAAa,EAAEA;IAAc,CAChC,CAAC;EAEV;EAEA,oBACIb,KAAA,CAAAyB,aAAA,CAACjB,IAAI;IAACmB,SAAS,EAAE;EAAS,gBACtB3B,KAAA,CAAAyB,aAAA,CAACjB,IAAI,CAACoB,MAAM;IACRC,IAAI,EAAE,EAAG;IACTF,SAAS,EACL;EACH,gBAED3B,KAAA,CAAAyB,aAAA,CAAClB,MAAM;IACHuB,OAAO,EAAE,OAAQ;IACjBR,OAAO,EAAEA,OAAQ;IACjBS,IAAI,eAAE/B,KAAA,CAAAyB,aAAA,CAAChB,IAAI;MAACuB,KAAK,EAAE,KAAM;MAACC,IAAI,EAAE,IAAK;MAACF,IAAI,eAAE/B,KAAA,CAAAyB,aAAA,CAACrB,GAAG,MAAE;IAAE,CAAE;EAAE,GAC3D,qBAEO,CACC,CACX,CAAC;AAEf,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/Step/RemoveStep.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IWorkflowStep } from "../../../../../types.js";
+export interface IRemoveStepProps {
+    onRemove: () => void;
+    step: IWorkflowStep;
+}
+export declare const RemoveStep: (props: IRemoveStepProps) => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/Step/Step/RemoveStep.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Accordion, Dialog, Icon } from "@webiny/admin-ui";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { useToggler } from "@webiny/app-admin";
+export const RemoveStep = props => {
+  const {
+    onRemove,
+    step
+  } = props;
+  const {
+    on,
+    toggle,
+    toggleOn
+  } = useToggler();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    onClick: toggleOn,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      size: "sm",
+      label: "Remove Step",
+      icon: /*#__PURE__*/React.createElement(TrashIcon, null)
+    })
+  }), /*#__PURE__*/React.createElement(Dialog, {
+    open: on,
+    onOpenChange: toggle,
+    title: `Remove workflow step "${step.title}"?`,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, {
+      onClick: close
+    }), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
+      onClick: onRemove
+    })),
+    showCloseButton: false,
+    dismissible: true
+  }, "You will remove the step from the workflow. This action can be undone if you do not save the workflow."));
+};
+
+//# sourceMappingURL=RemoveStep.js.map

package/Components/WorkflowsEditor/Editor/Step/Step/RemoveStep.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Accordion","Dialog","Icon","ReactComponent","TrashIcon","useToggler","RemoveStep","props","onRemove","step","on","toggle","toggleOn","createElement","Fragment","Item","Action","onClick","icon","size","label","open","onOpenChange","title","actions","CancelAction","close","ConfirmAction","showCloseButton","dismissible"],"sources":["RemoveStep.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Dialog, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IWorkflowStep } from \"~/types.js\";\nimport { useToggler } from \"@webiny/app-admin\";\n\nexport interface IRemoveStepProps {\n    onRemove: () => void;\n    step: IWorkflowStep;\n}\n\nexport const RemoveStep = (props: IRemoveStepProps) => {\n    const { onRemove, step } = props;\n    const { on, toggle, toggleOn } = useToggler();\n\n    return (\n        <>\n            <Accordion.Item.Action\n                onClick={toggleOn}\n                icon={<Icon size={\"sm\"} label={\"Remove Step\"} icon={<TrashIcon />} />}\n            />\n            <Dialog\n                open={on}\n                onOpenChange={toggle}\n                title={`Remove workflow step \"${step.title}\"?`}\n                actions={\n                    <>\n                        <Dialog.CancelAction onClick={close} />\n                        <Dialog.ConfirmAction onClick={onRemove} />\n                    </>\n                }\n                showCloseButton={false}\n                dismissible={true}\n            >\n                You will remove the step from the workflow. This action can be undone if you do not\n                save the workflow.\n            </Dialog>\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,MAAM,EAAEC,IAAI,QAAQ,kBAAkB;AAC1D,SAASC,cAAc,IAAIC,SAAS,QAAQ,0BAA0B;AAEtE,SAASC,UAAU,QAAQ,mBAAmB;AAO9C,OAAO,MAAMC,UAAU,GAAIC,KAAuB,IAAK;EACnD,MAAM;IAAEC,QAAQ;IAAEC;EAAK,CAAC,GAAGF,KAAK;EAChC,MAAM;IAAEG,EAAE;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGP,UAAU,CAAC,CAAC;EAE7C,oBACIN,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAc,aAAA,CAACb,SAAS,CAACe,IAAI,CAACC,MAAM;IAClBC,OAAO,EAAEL,QAAS;IAClBM,IAAI,eAAEnB,KAAA,CAAAc,aAAA,CAACX,IAAI;MAACiB,IAAI,EAAE,IAAK;MAACC,KAAK,EAAE,aAAc;MAACF,IAAI,eAAEnB,KAAA,CAAAc,aAAA,CAACT,SAAS,MAAE;IAAE,CAAE;EAAE,CACzE,CAAC,eACFL,KAAA,CAAAc,aAAA,CAACZ,MAAM;IACHoB,IAAI,EAAEX,EAAG;IACTY,YAAY,EAAEX,MAAO;IACrBY,KAAK,EAAE,yBAAyBd,IAAI,CAACc,KAAK,IAAK;IAC/CC,OAAO,eACHzB,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAc,aAAA,CAACZ,MAAM,CAACwB,YAAY;MAACR,OAAO,EAAES;IAAM,CAAE,CAAC,eACvC3B,KAAA,CAAAc,aAAA,CAACZ,MAAM,CAAC0B,aAAa;MAACV,OAAO,EAAET;IAAS,CAAE,CAC5C,CACL;IACDoB,eAAe,EAAE,KAAM;IACvBC,WAAW,EAAE;EAAK,GACrB,wGAGO,CACV,CAAC;AAEX,CAAC","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/Step/Step.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { IWorkflowNotificationType, IWorkflowStep } from "../../../../types.js";
+export interface IStepProps {
+    step: IWorkflowStep;
+    title?: string;
+    onCancel?: () => void;
+    onSave: (input: IWorkflowStep) => void;
+    onRemove?: (step: Pick<IWorkflowStep, "id">) => void;
+    onMoveUp?: (step: Pick<IWorkflowStep, "id">) => void;
+    canMoveUp?: (step: Pick<IWorkflowStep, "id">) => boolean;
+    onMoveDown?: (step: Pick<IWorkflowStep, "id">) => void;
+    canMoveDown?: (step: Pick<IWorkflowStep, "id">) => boolean;
+    open?: boolean;
+    notifications: IWorkflowNotificationType[];
+}
+export declare const Step: (({ step, title, onCancel: initialOnCancel, onSave: initialOnSave, onRemove: initialOnRemove, onMoveUp, canMoveUp, onMoveDown, canMoveDown, open, notifications }: IStepProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/Components/WorkflowsEditor/Editor/Step/Step.js

@@ -0,0 +1,150 @@
+import React, { useCallback, useState } from "react";
+import { Accordion, Card, Grid, Icon } from "@webiny/admin-ui";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
+import { observer } from "mobx-react-lite";
+import { Form } from "@webiny/form";
+import { StepFormTitle } from "./Form/StepFormTitle.js";
+import { StepFormColor } from "./Form/StepFormColor.js";
+import { StepFormDescription } from "./Form/StepFormDescription.js";
+import { StepFormTeams } from "./Form/StepFormTeams.js";
+import { StepFormNotifications } from "./Form/StepFormNotifications.js";
+import { RemoveStep } from "./Step/RemoveStep.js";
+const useEditing = (defaultValue = false) => {
+  const [editing, setEditing] = useState(defaultValue);
+  const startEditing = useCallback(() => {
+    setEditing(true);
+  }, []);
+  const stopEditing = useCallback(() => {
+    setEditing(false);
+  }, []);
+  return {
+    editing,
+    startEditing,
+    stopEditing
+  };
+};
+export const Step = observer(({
+  step,
+  title,
+  onCancel: initialOnCancel,
+  onSave: initialOnSave,
+  onRemove: initialOnRemove,
+  onMoveUp,
+  canMoveUp,
+  onMoveDown,
+  canMoveDown,
+  open,
+  notifications
+}) => {
+  const {
+    editing,
+    stopEditing,
+    startEditing
+  } = useEditing(open);
+  const onCancel = useCallback(() => {
+    stopEditing();
+    if (!initialOnCancel) {
+      return;
+    }
+    initialOnCancel();
+  }, [initialOnCancel]);
+  const onRemove = useCallback(() => {
+    if (!initialOnRemove) {
+      return;
+    }
+    initialOnRemove(step);
+  }, [step]);
+  const moveUp = useCallback(() => {
+    if (!canMoveUp || !onMoveUp || !canMoveUp(step)) {
+      return;
+    }
+    onMoveUp(step);
+  }, [onMoveUp, step]);
+  const moveDown = useCallback(() => {
+    if (!canMoveDown || !onMoveDown || !canMoveDown(step)) {
+      return;
+    }
+    onMoveDown(step);
+  }, [onMoveDown, step]);
+  const onOpenChange = useCallback(() => {
+    if (editing) {
+      stopEditing();
+      return;
+    }
+    startEditing();
+  }, [step, editing]);
+  const onSubmit = useCallback(input => {
+    initialOnSave(input);
+    stopEditing();
+  }, [initialOnSave, step]);
+  return /*#__PURE__*/React.createElement(Form, {
+    data: step,
+    onSubmit: onSubmit
+  }, ({
+    submit: onFormSubmit
+  }) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center justify-space-between gap-sm-plus"
+    }, editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
+      className: "w-full",
+      padding: "md",
+      title: step.title || title,
+      actionsPosition: "header",
+      variant: "accent",
+      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card.CancelAction, {
+        onClick: onCancel,
+        text: "Cancel"
+      }), /*#__PURE__*/React.createElement(Card.ConfirmAction, {
+        onClick: onFormSubmit,
+        text: "Save"
+      }))
+    }, /*#__PURE__*/React.createElement(Grid, {
+      gap: "comfortable"
+    }, /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 10
+    }, /*#__PURE__*/React.createElement(StepFormTitle, null)), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 2
+    }, /*#__PURE__*/React.createElement(StepFormColor, null)), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(StepFormDescription, null)), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(StepFormTeams, null)), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(StepFormNotifications, {
+      items: notifications
+    }))))) : /*#__PURE__*/React.createElement(Accordion, {
+      variant: "container",
+      background: "base",
+      border: "accent"
+    }, /*#__PURE__*/React.createElement(Accordion.Item, {
+      key: `step-${step.id}`,
+      title: step.title || title,
+      description: step.description,
+      colorMark: step.color,
+      onOpenChange: onOpenChange,
+      actions: /*#__PURE__*/React.createElement(React.Fragment, null, canMoveUp && /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+        onClick: moveUp,
+        disabled: !canMoveUp(step),
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          label: "Move step up",
+          size: "md",
+          icon: /*#__PURE__*/React.createElement(ArrowUp, null)
+        })
+      }), canMoveDown && /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+        onClick: moveDown,
+        disabled: !canMoveDown(step),
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          label: "Move step down",
+          size: "md",
+          icon: /*#__PURE__*/React.createElement(ArrowDown, null)
+        })
+      }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(RemoveStep, {
+        step: step,
+        onRemove: onRemove
+      }))
+    }, null)));
+  });
+});
+
+//# sourceMappingURL=Step.js.map

package/Components/WorkflowsEditor/Editor/Step/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","Accordion","Card","Grid","Icon","ReactComponent","ArrowUp","ArrowDown","observer","Form","StepFormTitle","StepFormColor","StepFormDescription","StepFormTeams","StepFormNotifications","RemoveStep","useEditing","defaultValue","editing","setEditing","startEditing","stopEditing","Step","step","title","onCancel","initialOnCancel","onSave","initialOnSave","onRemove","initialOnRemove","onMoveUp","canMoveUp","onMoveDown","canMoveDown","open","notifications","moveUp","moveDown","onOpenChange","onSubmit","input","createElement","data","submit","onFormSubmit","className","Fragment","padding","actionsPosition","variant","actions","CancelAction","onClick","text","ConfirmAction","gap","Column","span","items","background","border","Item","key","id","description","colorMark","color","Action","disabled","icon","label","size","Separator"],"sources":["Step.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Accordion, Card, Grid, Icon } from \"@webiny/admin-ui\";\nimport type { IWorkflowNotificationType, IWorkflowStep } from \"~/types.js\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { observer } from \"mobx-react-lite\";\nimport { Form } from \"@webiny/form\";\nimport { StepFormTitle } from \"./Form/StepFormTitle.js\";\nimport { StepFormColor } from \"./Form/StepFormColor.js\";\nimport { StepFormDescription } from \"./Form/StepFormDescription.js\";\nimport { StepFormTeams } from \"./Form/StepFormTeams.js\";\nimport { StepFormNotifications } from \"./Form/StepFormNotifications.js\";\nimport { RemoveStep } from \"./Step/RemoveStep.js\";\n\nexport interface IStepProps {\n    step: IWorkflowStep;\n    title?: string;\n    onCancel?: () => void;\n    onSave: (input: IWorkflowStep) => void;\n    onRemove?: (step: Pick<IWorkflowStep, \"id\">) => void;\n    onMoveUp?: (step: Pick<IWorkflowStep, \"id\">) => void;\n    canMoveUp?: (step: Pick<IWorkflowStep, \"id\">) => boolean;\n    onMoveDown?: (step: Pick<IWorkflowStep, \"id\">) => void;\n    canMoveDown?: (step: Pick<IWorkflowStep, \"id\">) => boolean;\n    open?: boolean;\n    notifications: IWorkflowNotificationType[];\n}\n\nconst useEditing = (defaultValue = false) => {\n    const [editing, setEditing] = useState(defaultValue);\n\n    const startEditing = useCallback(() => {\n        setEditing(true);\n    }, []);\n    const stopEditing = useCallback(() => {\n        setEditing(false);\n    }, []);\n    return {\n        editing,\n        startEditing,\n        stopEditing\n    };\n};\n\nexport const Step = observer(\n    ({\n        step,\n        title,\n        onCancel: initialOnCancel,\n        onSave: initialOnSave,\n        onRemove: initialOnRemove,\n        onMoveUp,\n        canMoveUp,\n        onMoveDown,\n        canMoveDown,\n        open,\n        notifications\n    }: IStepProps) => {\n        const { editing, stopEditing, startEditing } = useEditing(open);\n\n        const onCancel = useCallback(() => {\n            stopEditing();\n            if (!initialOnCancel) {\n                return;\n            }\n            initialOnCancel();\n        }, [initialOnCancel]);\n\n        const onRemove = useCallback(() => {\n            if (!initialOnRemove) {\n                return;\n            }\n            initialOnRemove(step);\n        }, [step]);\n\n        const moveUp = useCallback(() => {\n            if (!canMoveUp || !onMoveUp || !canMoveUp(step)) {\n                return;\n            }\n            onMoveUp(step);\n        }, [onMoveUp, step]);\n\n        const moveDown = useCallback(() => {\n            if (!canMoveDown || !onMoveDown || !canMoveDown(step)) {\n                return;\n            }\n            onMoveDown(step);\n        }, [onMoveDown, step]);\n\n        const onOpenChange = useCallback(() => {\n            if (editing) {\n                stopEditing();\n                return;\n            }\n            startEditing();\n        }, [step, editing]);\n\n        const onSubmit = useCallback(\n            (input: IWorkflowStep) => {\n                initialOnSave(input);\n                stopEditing();\n            },\n            [initialOnSave, step]\n        );\n\n        return (\n            <Form<IWorkflowStep> data={step} onSubmit={onSubmit}>\n                {({ submit: onFormSubmit }) => {\n                    return (\n                        <div className={\"flex items-center justify-space-between gap-sm-plus\"}>\n                            {editing ? (\n                                <>\n                                    <Card\n                                        className={\"w-full\"}\n                                        padding=\"md\"\n                                        title={step.title || title}\n                                        actionsPosition={\"header\"}\n                                        variant=\"accent\"\n                                        actions={\n                                            <>\n                                                <Card.CancelAction\n                                                    onClick={onCancel}\n                                                    text={\"Cancel\"}\n                                                />\n                                                <Card.ConfirmAction\n                                                    onClick={onFormSubmit}\n                                                    text={\"Save\"}\n                                                />\n                                            </>\n                                        }\n                                    >\n                                        <Grid gap={\"comfortable\"}>\n                                            <Grid.Column span={10}>\n                                                <StepFormTitle />\n                                            </Grid.Column>\n                                            <Grid.Column span={2}>\n                                                <StepFormColor />\n                                            </Grid.Column>\n                                            <Grid.Column span={12}>\n                                                <StepFormDescription />\n                                            </Grid.Column>\n                                            <Grid.Column span={12}>\n                                                <StepFormTeams />\n                                            </Grid.Column>\n                                            <Grid.Column span={12}>\n                                                <StepFormNotifications items={notifications} />\n                                            </Grid.Column>\n                                        </Grid>\n                                    </Card>\n                                </>\n                            ) : (\n                                <Accordion\n                                    variant={\"container\"}\n                                    background={\"base\"}\n                                    border={\"accent\"}\n                                >\n                                    <Accordion.Item\n                                        key={`step-${step.id}`}\n                                        title={step.title || title}\n                                        description={step.description}\n                                        colorMark={step.color}\n                                        onOpenChange={onOpenChange}\n                                        actions={\n                                            <>\n                                                {canMoveUp && (\n                                                    <Accordion.Item.Action\n                                                        onClick={moveUp}\n                                                        disabled={!canMoveUp(step)}\n                                                        icon={\n                                                            <Icon\n                                                                label={\"Move step up\"}\n                                                                size={\"md\"}\n                                                                icon={<ArrowUp />}\n                                                            />\n                                                        }\n                                                    />\n                                                )}\n                                                {canMoveDown && (\n                                                    <Accordion.Item.Action\n                                                        onClick={moveDown}\n                                                        disabled={!canMoveDown(step)}\n                                                        icon={\n                                                            <Icon\n                                                                label={\"Move step down\"}\n                                                                size={\"md\"}\n                                                                icon={<ArrowDown />}\n                                                            />\n                                                        }\n                                                    />\n                                                )}\n                                                <Accordion.Item.Action.Separator />\n                                                <RemoveStep step={step} onRemove={onRemove} />\n                                            </>\n                                        }\n                                    >\n                                        {null}\n                                    </Accordion.Item>\n                                </Accordion>\n                            )}\n                        </div>\n                    );\n                }}\n            </Form>\n        );\n    }\n);\n"],"mappings":"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","ignoreList":[]}

package/Components/WorkflowsEditor/Editor/WorkflowEditor.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { IWorkflowApplication } from "../../../types.js";
+export interface IWorkflowPresenterProps {
+    app: IWorkflowApplication;
+}
+export declare const WorkflowEditor: (props: IWorkflowPresenterProps) => React.JSX.Element;

package/Components/WorkflowsEditor/Editor/WorkflowEditor.js

@@ -0,0 +1,49 @@
+import React, { useMemo } from "react";
+import { WorkflowNotificationTypesRepository, WorkflowsRepository } from "../../../Repositories/index.js";
+import { WorkflowsPresenter } from "../../../Presenters/index.js";
+import { WorkflowNotificationTypesGateway, WorkflowsGateway } from "../../../Gateways/index.js";
+import { mdbid } from "@webiny/utils/mdbid.js";
+import { useApolloClient } from "@apollo/react-hooks";
+import { WorkflowEditorView } from "./WorkflowEditorView.js";
+const createDefaultWorkflow = options => {
+  return {
+    id: mdbid(),
+    name: "Default Workflow",
+    steps: [],
+    ...options
+  };
+};
+export const WorkflowEditor = props => {
+  const {
+    app
+  } = props;
+  const client = useApolloClient();
+  const presenter = useMemo(() => {
+    const defaultWorkflow = createDefaultWorkflow({
+      app: app.id
+    });
+    const workflowsGateway = new WorkflowsGateway({
+      client
+    });
+    const workflowsRepository = new WorkflowsRepository({
+      gateway: workflowsGateway
+    });
+    const notificationTypesGateway = new WorkflowNotificationTypesGateway({
+      client
+    });
+    const notificationsRepository = new WorkflowNotificationTypesRepository({
+      gateway: notificationTypesGateway
+    });
+    return new WorkflowsPresenter({
+      app,
+      workflowsRepository,
+      notificationTypesRepository: notificationsRepository,
+      defaultWorkflow
+    });
+  }, [app]);
+  return /*#__PURE__*/React.createElement(WorkflowEditorView, {
+    presenter: presenter
+  });
+};
+
+//# sourceMappingURL=WorkflowEditor.js.map