MS2 Disable User Task Version Editing (#428)

* Disable user task editing when inspecting a process version

* Disabling everything in the user task editor when inspecting a process version

* Fixed: Form elements in exported and deployed html are all disabled

* Fixed formatting

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/BuilderContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+type BuilderContextType = {
+  editingEnabled: boolean;
+};
+
+const BuilderContext = createContext<BuilderContextType>({ editingEnabled: false });
+
+export default BuilderContext;

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/Toolbar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { Row, Button, Divider, Col, Space } from 'antd';
 
@@ -13,6 +13,7 @@ import {
 import styles from './index.module.scss';
 
 import { useEditor, Node } from '@craftjs/core';
+import BuilderContext from './BuilderContext';
 
 export type EditorLayout = 'computer' | 'mobile';
 
@@ -27,41 +28,40 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   iframeLayout,
   onLayoutChange,
 }) => {
-  const { query, actions, canUndo, canRedo, onDelete, editingEnabled } = useEditor(
-    (state, query) => {
-      const currentColumn = Array.from(state.events.selected)
-        .map((id) => state.nodes[id])
-        .find((node) => node && node.data.name === 'Column');
+  const { actions, canUndo, canRedo, onDelete } = useEditor((state, query) => {
+    const currentColumn = Array.from(state.events.selected)
+      .map((id) => state.nodes[id])
+      .find((node) => node && node.data.name === 'Column');
 
-      let onDelete;
+    let onDelete;
 
-      if (currentColumn) {
-        const parentRow = currentColumn.data.parent && state.nodes[currentColumn.data.parent];
-        let deleteId = currentColumn.id;
+    if (currentColumn) {
+      const parentRow = currentColumn.data.parent && state.nodes[currentColumn.data.parent];
+      let deleteId = currentColumn.id;
 
-        if (parentRow && parentRow.data.nodes.length === 1) {
-          deleteId = parentRow.id;
-        }
-
-        const childNodeId = currentColumn.data.nodes[0];
-        const childNode = state.nodes[childNodeId];
-
-        onDelete = async () => {
-          if (childNode.data.custom.onDelete) {
-            await (childNode.data.custom.onDelete as (node: Node) => Promise<void>)(childNode);
-          }
-          actions.delete(deleteId!);
-        };
+      if (parentRow && parentRow.data.nodes.length === 1) {
+        deleteId = parentRow.id;
       }
 
-      return {
-        onDelete,
-        canUndo: query.history.canUndo(),
-        canRedo: query.history.canRedo(),
-        editingEnabled: state.options.enabled,
+      const childNodeId = currentColumn.data.nodes[0];
+      const childNode = state.nodes[childNodeId];
+
+      onDelete = async () => {
+        if (childNode.data.custom.onDelete) {
+          await (childNode.data.custom.onDelete as (node: Node) => Promise<void>)(childNode);
+        }
+        actions.delete(deleteId!);
       };
-    },
-  );
+    }
+
+    return {
+      onDelete,
+      canUndo: query.history.canUndo(),
+      canRedo: query.history.canRedo(),
+    };
+  });
+
+  const { editingEnabled } = useContext(BuilderContext);
 
   return (
     <Row className={styles.EditorHeader}>

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/_sidebar/Settings.tsx

@@ -6,7 +6,7 @@ import styles from './index.module.scss';
 import useBuilderStateStore from '../use-builder-state-store';
 
 export const Settings: React.FC = () => {
-  const { settings, selectedNodeId, query } = useEditor((state) => {
+  const { settings, selectedNodeId } = useEditor((state) => {
     const currentColumn = Array.from(state.events.selected)
       .map((id) => state.nodes[id])
       .find((node) => node && node.data.name === 'Column');

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/_sidebar/Toolbox.tsx

@@ -1,6 +1,6 @@
-import { Element, NodeTree, useEditor, WithoutPrivateActions } from '@craftjs/core';
+import { Element } from '@craftjs/core';
 import { Button as AntButton } from 'antd';
-import { ReactNode } from 'react';
+import React, { ReactNode, useContext } from 'react';
 
 import { LuFormInput, LuImage, LuTable, LuText } from 'react-icons/lu';
 import { MdCheckBox, MdRadioButtonChecked, MdTitle, MdOutlineCheck } from 'react-icons/md';
@@ -22,16 +22,15 @@ import {
 } from '../elements';
 
 import { createPortal } from 'react-dom';
+import BuilderContext from '../BuilderContext';
 
 type CreationButtonProps = React.PropsWithChildren<{
   title: string;
   icon: ReactNode;
 }>;
 
 const CreationButton: React.FC<CreationButtonProps> = ({ children, title, icon }) => {
-  const { editingEnabled } = useEditor((state) => {
-    return { editingEnabled: state.options.enabled };
-  });
+  const { editingEnabled } = useContext(BuilderContext);
 
   const id = `create-${title}-button`;
 

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/elements/CheckboxOrRadioGroup.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useMemo, useState } from 'react';
+import { useContext, useEffect, useId, useMemo, useState } from 'react';
 
 import { Divider, Input, MenuProps, Select, Space, Tooltip } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
@@ -20,6 +20,7 @@ import { WithRequired } from '@/lib/typescript-utils';
 
 import { SettingOutlined, EditOutlined } from '@ant-design/icons';
 import { createPortal } from 'react-dom';
+import BuilderContext from '../BuilderContext';
 
 const checkboxValueHint =
   'This will be the value that is added to the variable associated with this group when the checkbox is checked at the time the form is submitted.';
@@ -63,10 +64,13 @@ const CheckboxOrRadioButton: React.FC<CheckBoxOrRadioButtonProps> = ({
   const [hovered, setHovered] = useState(false);
   const [textEditing, setTextEditing] = useState(false);
 
+  const { editingEnabled } = useContext(BuilderContext);
+
   return (
     <>
       <input
         id={id}
+        disabled={!editingEnabled}
         type={type}
         value={value}
         name={variable}
@@ -79,7 +83,7 @@ const CheckboxOrRadioButton: React.FC<CheckBoxOrRadioButtonProps> = ({
           show={hovered && !textEditing}
           onHide={() => setHovered(false)}
           controls={[
-            {
+            editingEnabled && {
               icon: <EditOutlined onClick={() => setTextEditing(true)} />,
               key: 'edit',
             },
@@ -123,9 +127,7 @@ const CheckBoxOrRadioGroup: UserComponent<CheckBoxOrRadioGroupProps> = ({
   variable = 'test',
   data,
 }) => {
-  const { query, editingEnabled } = useEditor((state) => ({
-    editingEnabled: state.options.enabled,
-  }));
+  const { query } = useEditor();
 
   const [editTarget, setEditTarget] = useState<number>();
   const [hoveredAction, setHoveredAction] = useState<EditAction>();
@@ -151,6 +153,8 @@ const CheckBoxOrRadioGroup: UserComponent<CheckBoxOrRadioGroupProps> = ({
     }
   }, [isSelected]);
 
+  const { editingEnabled } = useContext(BuilderContext);
+
   const handleLabelEdit = (index: number, text: string) => {
     if (!editingEnabled) return;
     setProp((props: CheckBoxOrRadioGroupProps) => {

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/elements/Column.tsx

@@ -1,9 +1,10 @@
 import { UserComponent, useNode } from '@craftjs/core';
 import { useDraggable } from '@dnd-kit/core';
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useFrame } from 'react-frame-component';
 import useBuilderStateStore from '../use-builder-state-store';
+import BuilderContext from '../BuilderContext';
 /**
  * This component wraps every editor element provides drag handling and some styling
  */
@@ -24,6 +25,7 @@ const Column: UserComponent<React.PropsWithChildren<{ fixed?: boolean }>> = ({
   }));
 
   const dragBlockers = useBuilderStateStore((state) => state.dragBlockers);
+  const { editingEnabled } = useContext(BuilderContext);
 
   const ref = useRef<HTMLDivElement>();
   const frame = useFrame();
@@ -35,7 +37,7 @@ const Column: UserComponent<React.PropsWithChildren<{ fixed?: boolean }>> = ({
     isDragging,
   } = useDraggable({
     id: nodeId,
-    disabled: fixed || !!dragBlockers.length,
+    disabled: fixed || !!dragBlockers.length || !editingEnabled,
   });
 
   return (

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/elements/Container.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { InputNumber, ColorPicker, Empty } from 'antd';
 
-import { UserComponent, useEditor, useNode } from '@craftjs/core';
+import { UserComponent, useNode } from '@craftjs/core';
 
 import { useDroppable } from '@dnd-kit/core';
 
@@ -70,7 +70,6 @@ export const ContainerSettings = () => {
     borderThickness: node.data.props.borderThickness,
     borderColor: node.data.props.borderColor,
   }));
-  const { editingEnabled } = useEditor((state) => ({ editingEnabled: state.options.enabled }));
 
   return (
     <>
@@ -81,7 +80,6 @@ export const ContainerSettings = () => {
             min={0}
             addonAfter="px"
             value={padding}
-            disabled={!editingEnabled}
             onChange={(val) =>
               setProp((props: ContainerProps) => {
                 props.padding = val;
@@ -96,7 +94,6 @@ export const ContainerSettings = () => {
         control={
           <ColorPicker
             value={background}
-            disabled={!editingEnabled}
             onChange={(_, val) =>
               setProp((props: ContainerProps) => {
                 props.background = val;
@@ -112,7 +109,6 @@ export const ContainerSettings = () => {
             min={0}
             addonAfter="px"
             value={borderThickness}
-            disabled={!editingEnabled}
             onChange={(val) =>
               setProp((props: ContainerProps) => {
                 props.borderThickness = val;
@@ -127,7 +123,6 @@ export const ContainerSettings = () => {
         control={
           <ColorPicker
             value={borderColor}
-            disabled={!editingEnabled}
             onChange={(_, val) =>
               setProp((props: ContainerProps) => {
                 props.borderColor = val;

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/elements/Image.tsx

@@ -2,13 +2,14 @@ import { useEditor, useNode, UserComponent, Node } from '@craftjs/core';
 
 import { InputNumber } from 'antd';
 
-import { useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
 import { fallbackImage } from '../../image-selection-section';
 import { useParams } from 'next/navigation';
 import { useEnvironment } from '@/components/auth-can';
 import { ContextMenu, Setting } from './utils';
 import ImageUpload from '@/components/image-upload';
+import BuilderContext from '../BuilderContext';
 import { EntityType } from '@/lib/helpers/fileManagerHelpers';
 import { useFileManager } from '@/lib/useFileManager';
 import { enableUseFileManager } from 'FeatureFlags';
@@ -59,7 +60,7 @@ export const EditImage: UserComponent<ImageProps> = ({ src, reloadParam, width }
     return { isHovered: !!parent && parent.events.hovered };
   });
 
-  const { editingEnabled } = useEditor((state) => ({ editingEnabled: state.options.enabled }));
+  const { editingEnabled } = useContext(BuilderContext);
 
   const {
     fileUrl: imageUrl,
@@ -208,7 +209,6 @@ export const ImageSettings = () => {
     width: node.data.props.width,
     dom: node.dom,
   }));
-  const { editingEnabled } = useEditor((state) => ({ editingEnabled: state.options.enabled }));
 
   const [currentWidth, setCurrentWidth] = useState<number | null>(null);
 
@@ -237,7 +237,7 @@ export const ImageSettings = () => {
         label="Width"
         control={
           <InputNumber
-            disabled={!editingEnabled || !src}
+            disabled={!src}
             value={currentWidth}
             min={1}
             max={100}

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/elements/Input.tsx

@@ -1,13 +1,14 @@
-import { useEffect, useId, useState } from 'react';
+import { useContext, useEffect, useId, useState } from 'react';
 
 import { Select, Input as AntInput } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 
-import { UserComponent, useEditor, useNode } from '@craftjs/core';
+import { UserComponent, useNode } from '@craftjs/core';
 
 import { ContextMenu, Overlay, Setting } from './utils';
 import EditableText from '../_utils/EditableText';
 import useBuilderStateStore from '../use-builder-state-store';
+import BuilderContext from '../BuilderContext';
 
 type InputProps = {
   label?: string;
@@ -28,7 +29,7 @@ const Input: UserComponent<InputProps> = ({
     connectors: { connect },
     actions: { setProp },
   } = useNode();
-  const { editingEnabled } = useEditor((state) => ({ editingEnabled: state.options.enabled }));
+  const { editingEnabled } = useContext(BuilderContext);
 
   const inputId = useId();
 
@@ -67,7 +68,7 @@ const Input: UserComponent<InputProps> = ({
             onMouseEnter={() => setLabelHovered(true)}
           >
             <Overlay
-              show={labelHovered && !textEditing}
+              show={editingEnabled && labelHovered && !textEditing}
               onHide={() => setLabelHovered(false)}
               controls={[
                 {
@@ -92,6 +93,7 @@ const Input: UserComponent<InputProps> = ({
 
         <input
           id={inputId}
+          disabled={!editingEnabled}
           type={type}
           value={defaultValue}
           name={variable}
@@ -121,7 +123,6 @@ export const InputSettings = () => {
     labelPosition: node.data.props.labelPosition,
     variable: node.data.props.variable,
   }));
-  const { editingEnabled } = useEditor((state) => ({ editingEnabled: state.options.enabled }));
 
   return (
     <>
@@ -136,7 +137,6 @@ export const InputSettings = () => {
               { value: 'email', label: 'E-Mail' },
             ]}
             value={type}
-            disabled={!editingEnabled}
             onChange={(val) =>
               setProp((props: InputProps) => {
                 props.type = val;
@@ -156,7 +156,6 @@ export const InputSettings = () => {
               { value: 'none', label: 'Hidden' },
             ]}
             value={labelPosition}
-            disabled={!editingEnabled}
             onChange={(val) =>
               setProp((props: InputProps) => {
                 props.labelPosition = val;