Merge pull request #1811 from automatisch/AUT-920

fix: make inputs look and behave disabled when flow is in published state

packages/web/src/components/ControlledCustomAutocomplete/index.jsx

@@ -61,31 +61,38 @@ function ControlledCustomAutocomplete(props) {
   const [isSingleChoice, setSingleChoice] = React.useState(undefined);
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
+
   const renderElement = React.useCallback(
     (props) => <Element {...props} disabled={disabled} />,
     [disabled],
   );
+
   const [editor] = React.useState(() => customizeEditor(createEditor()));
+
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
   let dependsOnValues = [];
   if (dependsOn?.length) {
     dependsOnValues = watch(dependsOn);
   }
+
   React.useEffect(() => {
     const ref = ReactEditor.toDOMNode(editor, editor);
     resizeObserver.observe(ref);
     return () => resizeObserver.unobserve(ref);
   }, []);
+
   const promoteValue = () => {
     const serializedValue = serialize(editor.children);
     controllerOnChange(serializedValue);
   };
+
   const resizeObserver = React.useMemo(function syncCustomOptionsPosition() {
     return new ResizeObserver(() => {
       forceUpdate();
     });
   }, []);
+
   React.useEffect(() => {
     const hasDependencies = dependsOnValues.length;
     if (hasDependencies) {
@@ -93,6 +100,7 @@ function ControlledCustomAutocomplete(props) {
       resetEditor(editor);
     }
   }, dependsOnValues);
+
   React.useEffect(
     function updateInitialValue() {
       const hasOptions = options.length;
@@ -110,16 +118,19 @@ function ControlledCustomAutocomplete(props) {
     },
     [isInitialValueSet, options, loading],
   );
+
   React.useEffect(() => {
     if (!showVariableSuggestions && value !== serialize(editor.children)) {
       promoteValue();
     }
   }, [showVariableSuggestions]);
+
   const hideSuggestionsOnShift = (event) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
   };
+
   const handleKeyDown = (event) => {
     hideSuggestionsOnShift(event);
     if (event.code === 'Tab') {
@@ -129,15 +140,18 @@ function ControlledCustomAutocomplete(props) {
       event.preventDefault();
     }
   };
+
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
   }, [priorStepsWithExecutions]);
+
   const handleVariableSuggestionClick = React.useCallback(
     (variable) => {
       insertVariable(editor, variable, stepsWithVariables);
     },
     [stepsWithVariables],
   );
+
   const handleOptionClick = React.useCallback(
     (event, option) => {
       event.stopPropagation();
@@ -147,17 +161,20 @@ function ControlledCustomAutocomplete(props) {
     },
     [stepsWithVariables],
   );
+
   const handleClearButtonClick = (event) => {
     event.stopPropagation();
     resetEditor(editor);
     promoteValue();
     setSingleChoice(undefined);
   };
+
   const reset = (tabIndex) => {
     const isOptions = tabIndex === 0;
     setSingleChoice(isOptions);
     resetEditor(editor, { focus: true });
   };
+
   return (
     <Slate
       editor={editor}

packages/web/src/components/InputCreator/index.jsx

@@ -178,6 +178,7 @@ export default function InputCreator(props) {
           helperText={description}
           clickToCopy={schema.clickToCopy}
           shouldUnregister={shouldUnregister}
+          disabled={disabled}
         />
 
         {isDynamicFieldsLoading && !additionalFields?.length && (

packages/web/src/components/PowerInput/style.js

@@ -1,17 +1,20 @@
 import MuiTabs from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
+
 export const ChildrenWrapper = styled('div')`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
 `;
+
 export const InputLabelWrapper = styled('div')`
   position: absolute;
   left: ${({ theme }) => theme.spacing(1.75)};
   inset: 0;
   left: -6px;
 `;
+
 export const FakeInput = styled('div', {
   shouldForwardProp: (prop) => prop !== 'disabled',
 })`
@@ -31,27 +34,31 @@ export const FakeInput = styled('div', {
     border-color: ${theme.palette.action.disabled};
   `}
 
-  &:hover {
+  ${({ disabled, theme }) =>
-    border-color: ${({ theme }) => theme.palette.text.primary};
+    !disabled &&
-  }
+    `
-
+    &:hover {
-  &:focus-within,
+      border-color: ${theme.palette.text.primary};
-  &:focus {
-    &:before {
-      border-color: ${({ theme }) => theme.palette.primary.main};
-      border-radius: ${({ theme }) => theme.spacing(0.5)};
-      border-style: solid;
-      border-width: 2px;
-      bottom: -2px;
-      content: '';
-      display: block;
-      left: -2px;
-      position: absolute;
-      right: -2px;
-      top: -2px;
     }
-  }
+    &:focus-within,
+    &:focus {
+      &:before {
+        border-color: ${theme.palette.primary.main};
+        border-radius: ${theme.spacing(0.5)};
+        border-style: solid;
+        border-width: 2px;
+        bottom: -2px;
+        content: '';
+        display: block;
+        left: -2px;
+        position: absolute;
+        right: -2px;
+        top: -2px;
+      }
+    }
+  `}
 `;
+
 export const Tabs = styled(MuiTabs)`
   border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 `;