fix: hide drag handle when drawer is open (#1234)

_Reusing this PR_

## Problem
* useEffect that forces a re-render of editor content when variable info
changes (e.g., after step reorder) causes cursor to move to the wrong
position
* After reordering, copied variables hold the wrong value

## Solution
* Hide the drag handle when the side drawer is open


## Tests
Test to ensure no regression
- [ ] Drag handle only shows when drawer is closed
- [ ] Step widths are correct
- [ ] If-then branch condition step width is aligned with the action
step widths
- [ ] Hover add step button widths are aligned with the action step
widths
- [ ] Reordering steps that have been checked are updated appropriately
with empty variable pill and prompt to update with the latest data

Author: kevinkim-ogp

packages/frontend/src/components/FlowStep/FlowStepWrapper.tsx

@@ -7,10 +7,18 @@ interface FlowStepWrapperProps {
   children: React.ReactNode
   canChildStepsReorder?: boolean
   allowReorder?: boolean
+  isDrawerOpen?: boolean
+  isReadOnly?: boolean
 }
 
 export default function FlowStepWrapper(props: FlowStepWrapperProps) {
-  const { children, canChildStepsReorder, allowReorder } = props
+  const {
+    children,
+    canChildStepsReorder,
+    allowReorder,
+    isDrawerOpen,
+    isReadOnly,
+  } = props
   const isMobile = useIsMobile()
 
   return (
@@ -19,7 +27,11 @@ export default function FlowStepWrapper(props: FlowStepWrapperProps) {
       display={isMobile ? 'block' : 'flex'}
       flexDir="column"
       w={
-        canChildStepsReorder && !allowReorder && !isMobile
+        canChildStepsReorder &&
+        !allowReorder &&
+        !isMobile &&
+        !isDrawerOpen &&
+        !isReadOnly
           ? `calc(100% - ${NESTED_DRAG_HANDLE_WIDTH}px)`
           : '100%'
       }

packages/frontend/src/components/FlowStep/index.tsx

@@ -79,7 +79,14 @@ export default function FlowStep(
     selectedActionOrTrigger,
     substeps,
     shouldShowDragHandle,
-  } = useStepMetadata(allApps, step, readOnly, allowReorder, isMobile)
+  } = useStepMetadata(
+    allApps,
+    step,
+    readOnly,
+    allowReorder,
+    isMobile,
+    isDrawerOpen,
+  )
 
   const {
     cancelRef,
@@ -176,6 +183,8 @@ export default function FlowStep(
     <FlowStepWrapper
       canChildStepsReorder={canChildStepsReorder}
       allowReorder={allowReorder}
+      isDrawerOpen={isDrawerOpen}
+      isReadOnly={readOnly}
     >
       {!app ? (
         <EmptyFlowStepHeader

packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx

@@ -40,13 +40,15 @@ export function HoverAddStepButton(
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [isHovered, setIsHovered] = useState(false)
 
-  const { allApps, readOnly, isMobile } = useContext(EditorContext)
+  const { allApps, readOnly, isMobile, isDrawerOpen } =
+    useContext(EditorContext)
   const { shouldShowDragHandle } = useStepMetadata(
     allApps,
     step,
     readOnly,
     allowReorder,
     isMobile,
+    isDrawerOpen,
   )
 
   const {
@@ -81,7 +83,7 @@ export function HoverAddStepButton(
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
           w={
-            (shouldShowDragHandle || canChildStepsReorder) && !isMobile
+            (shouldShowDragHandle || canChildStepsReorder) && !isDrawerOpen
               ? `calc(100% - ${NESTED_DRAG_HANDLE_WIDTH}px)`
               : 'full'
           }

packages/frontend/src/components/FlowStepGroup/index.tsx

@@ -73,7 +73,7 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
   return (
     <Flex
       w={
-        isInsideForEach && stepsBeforeGroup.length > 2
+        isInsideForEach && stepsBeforeGroup.length > 2 && !isDrawerOpen
           ? `calc(100% - ${NESTED_DRAG_HANDLE_WIDTH}px)`
           : '100%'
       }

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -217,25 +217,6 @@ const Editor = ({
     editor?.setOptions({ editable })
   }, [editable, editor])
 
-  // NOTE: we force a re-render editor content when variable info changes (e.g., after step reorder)
-  // to ensure that the variable shown in the RTE is updated
-  useEffect(() => {
-    if (!editor || !content) {
-      return
-    }
-
-    // Get current editor content
-    const currentContent = editor.getHTML()
-
-    // Re-substitute templates with updated variable info
-    const updatedContent = substituteOldTemplates(content, varInfo)
-
-    // Only update if content has actually changed
-    if (currentContent !== updatedContent) {
-      editor.commands.setContent(updatedContent)
-    }
-  }, [editor, content, varInfo])
-
   const handleVariableClick = useCallback(
     (variable: Variable) => {
       // if the selection is a node, means the user clicked on a variable

packages/frontend/src/hooks/useStepMetadata.ts

@@ -26,6 +26,7 @@ export function useStepMetadata(
   readOnly?: boolean,
   allowReorder?: boolean,
   isMobile?: boolean,
+  isDrawerOpen?: boolean,
 ): UseStepMetadataResult {
   const isCompleted = step?.status === 'completed'
   const isTrigger = step?.type === 'trigger'
@@ -66,10 +67,18 @@ export function useStepMetadata(
    * - step is not a trigger
    * - step is not an if-then condition step
    * - allowReorder is true
+   * - side drawer is not open
    */
   const shouldShowDragHandle = useMemo(() => {
-    return !readOnly && !isTrigger && !isMobile && !isIfThenStep && allowReorder
-  }, [readOnly, isTrigger, isMobile, isIfThenStep, allowReorder])
+    return (
+      !readOnly &&
+      !isTrigger &&
+      !isMobile &&
+      !isIfThenStep &&
+      allowReorder &&
+      !isDrawerOpen
+    )
+  }, [readOnly, isTrigger, isMobile, isIfThenStep, allowReorder, isDrawerOpen])
 
   return {
     app,