chore: mostly refactor, add placeholder mrf context

Author: pregnantboy

packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx

@@ -1,10 +1,9 @@
 import { IStep } from '@plumber/types'
 
-import { useContext, useMemo } from 'react'
+import { useContext } from 'react'
 
 import { EditorContext } from '@/contexts/Editor'
 import { FlowStep } from '@/exports/components'
-import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 import { useStepMetadata } from '@/hooks/useStepMetadata'
 
 import { ApproveReject } from '../FlowStep/components/ApproveReject'
@@ -15,65 +14,44 @@ export default function FlowStepWithAddButton({
   step,
   isLastStep,
   isNested,
-  stepsBeforeGroup,
-  groupedSteps,
-  showAddButton = true,
+  addButtonProps: {
+    isHidden = false,
+    isDisabled = false,
+    showEmptyAction = false,
+  },
 }: {
   step: IStep
   isLastStep: boolean
   isNested?: boolean
   stepsBeforeGroup: IStep[]
   groupedSteps: IStep[][]
-  showAddButton?: boolean
+  addButtonProps: {
+    isHidden: boolean
+    isDisabled: boolean
+    showEmptyAction: boolean
+  }
 }) {
-  const { readOnly, allApps } = useContext(EditorContext)
+  const { allApps } = useContext(EditorContext)
 
   const { isApprovalStep } = useStepMetadata(allApps, step)
 
-  const nonIfThenActionSteps = stepsBeforeGroup.filter(
-    (step) => step.type === 'action' && step.key !== TOOLBOX_ACTIONS.IfThen,
-  )
-
-  // Disables last add step and hide in-between add step buttons
-  const hasExactlyOneEmptyActionStep =
-    nonIfThenActionSteps.length === 1 && !nonIfThenActionSteps[0].appKey
-
-  // Disables last add step button but show empty action instead
-  const hasNoActionSteps = nonIfThenActionSteps.length === 0
-
-  const getAddStepButtonProps = useMemo(() => {
-    const shouldShowEmptyAction = hasNoActionSteps && !groupedSteps.length
-    const shouldDisableButton =
-      (hasExactlyOneEmptyActionStep || hasNoActionSteps) && !groupedSteps.length
-
-    return (isLastStep: boolean, stepId: string) => ({
-      isHidden: readOnly,
-      showEmptyAction: shouldShowEmptyAction,
-      isDisabled: shouldDisableButton,
-      isLastStep,
-      stepId,
-    })
-  }, [
-    readOnly,
-    hasNoActionSteps,
-    groupedSteps.length,
-    hasExactlyOneEmptyActionStep,
-  ])
-
   return (
     <>
       <FlowStep
         step={step}
         isLastStep={isLastStep}
         isNested={isNested}
         // only allow reordering if there are more than 1 action steps
-        allowReorder={nonIfThenActionSteps.length > 1}
+        allowReorder={true}
       />
       {isApprovalStep && <ApproveReject />}
-
-      {showAddButton && (
-        <AddStepButton {...getAddStepButtonProps(isLastStep, step.id)} />
-      )}
+      <AddStepButton
+        isLastStep={isLastStep}
+        stepId={step.id}
+        isHidden={isHidden}
+        isDisabled={isDisabled}
+        showEmptyAction={showEmptyAction}
+      />
     </>
   )
 }

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

@@ -7,6 +7,7 @@ import EditorRightDrawer from '@/components/EditorRightDrawer'
 import FlowStepGroup from '@/components/FlowStepGroup'
 import { SortableList } from '@/components/SortableList'
 import { EditorContext } from '@/contexts/Editor'
+import { MrfContextProvider } from '@/contexts/MrfContext'
 import { StepExecutionsToIncludeProvider } from '@/contexts/StepExecutionsToInclude'
 import { StepEnumType } from '@/graphql/__generated__/graphql'
 import { extractBranchesWithSteps, TOOLBOX_ACTIONS } from '@/helpers/toolbox'
@@ -25,7 +26,7 @@ type EditorProps = {
 export default function Editor(props: EditorProps): React.ReactElement {
   const { isNested } = props
 
-  const { allApps, isDrawerOpen, isMobile, currentStepId, flow } =
+  const { allApps, isDrawerOpen, isMobile, flow, readOnly } =
     useContext(EditorContext)
 
   const { handleReorderUpdate } = useReorderSteps(flow.id)
@@ -61,7 +62,7 @@ export default function Editor(props: EditorProps): React.ReactElement {
     )
   }, [appsWithActions])
 
-  const [triggerStep, stepsBeforeGroup, groupedSteps] = useMemo(() => {
+  const [triggerStep, actionStepsBeforeGroup, groupedSteps] = useMemo(() => {
     if (!groupingActions) {
       return [null, [], []]
     }
@@ -100,34 +101,6 @@ export default function Editor(props: EditorProps): React.ReactElement {
       ?.iconUrl
   }, [appsWithActions, groupedSteps])
 
-  //
-  // Compute which steps are eligible for variable extraction.
-  // Mainly for if-then branches where we do not want to include steps
-  // from other branches.
-  //
-  // Note:
-  // - we include some grouped steps as there is no longer a nested editor
-  // - we identify the group by checking if the current step id is in the group
-  // - for-each steps are always included
-  const groupStepsToInclude = useMemo(() => {
-    return groupedSteps.flatMap((group) =>
-      group.some((step) => step.id === currentStepId) ||
-      group.some((step) => step.key === TOOLBOX_ACTIONS.ForEach)
-        ? group
-        : [],
-    )
-  }, [currentStepId, groupedSteps])
-
-  const stepExecutionsToInclude = useMemo(
-    () =>
-      new Set([
-        ...(triggerStep?.id ? [triggerStep.id] : []),
-        ...stepsBeforeGroup.map((step) => step.id),
-        ...groupStepsToInclude.map((s) => s.id),
-      ]),
-    [triggerStep, stepsBeforeGroup, groupStepsToInclude],
-  )
-
   const handleReorderSteps = async (reorderedSteps: IStep[]) => {
     const stepPositions = reorderedSteps.map((step, index) => ({
       id: step.id,
@@ -146,6 +119,21 @@ export default function Editor(props: EditorProps): React.ReactElement {
     }
   }
 
+  const nonIfThenActionSteps = actionStepsBeforeGroup.filter(
+    (step) => step.key !== TOOLBOX_ACTIONS.IfThen,
+  )
+
+  // Disables last add step and hide in-between add step buttons
+  const hasExactlyOneEmptyActionStep =
+    nonIfThenActionSteps.length === 1 && !nonIfThenActionSteps[0].appKey
+
+  // Disables last add step button but show empty action instead
+  const hasNoActionSteps = nonIfThenActionSteps.length === 0
+  const shouldShowEmptyAction = hasNoActionSteps && !groupedSteps.length
+  // for backwards compatibility where empty step is created
+  const shouldDisableAddButton =
+    (hasExactlyOneEmptyActionStep || hasNoActionSteps) && !groupedSteps.length
+
   if (!appsWithActions || !groupingActions) {
     return (
       <Center height="100vh" position="fixed" width="full" top={0} left={0}>
@@ -172,80 +160,95 @@ export default function Editor(props: EditorProps): React.ReactElement {
         backgroundSize: '30px 30px',
       }}
     >
-      <StepExecutionsToIncludeProvider value={stepExecutionsToInclude}>
-        <Flex
-          {...editorStyles.stepHeaderContainer}
-          flex={isDrawerOpen ? (isMobile ? 0 : 1) : undefined}
-          px={leftStepPadding}
-          maxWidth={`calc(100% - ${
-            isDrawerOpen ? EDITOR_RIGHT_DRAWER_WIDTH : '0px'
-          })`}
+      <MrfContextProvider steps={steps}>
+        <StepExecutionsToIncludeProvider
+          groupedSteps={groupedSteps}
+          triggerStep={triggerStep}
+          actionStepsBeforeGroup={actionStepsBeforeGroup}
         >
-          {triggerStep && (
-            <FlowStepWithAddButton
-              step={triggerStep}
-              isLastStep={
-                stepsBeforeGroup.length === 0 && groupedSteps.length === 0
-              }
-              isNested={isNested}
-              stepsBeforeGroup={stepsBeforeGroup}
-              groupedSteps={groupedSteps}
-              showAddButton={true}
+          <Flex
+            {...editorStyles.stepHeaderContainer}
+            flex={isDrawerOpen ? (isMobile ? 0 : 1) : undefined}
+            px={leftStepPadding}
+            maxWidth={`calc(100% - ${
+              isDrawerOpen ? EDITOR_RIGHT_DRAWER_WIDTH : '0px'
+            })`}
+          >
+            {triggerStep && (
+              <FlowStepWithAddButton
+                step={triggerStep}
+                isLastStep={
+                  actionStepsBeforeGroup.length === 0 &&
+                  groupedSteps.length === 0
+                }
+                isNested={isNested}
+                stepsBeforeGroup={[]} // no reason to pass in for this
+                groupedSteps={groupedSteps}
+                addButtonProps={{
+                  isHidden: readOnly,
+                  isDisabled: shouldDisableAddButton,
+                  showEmptyAction: shouldShowEmptyAction,
+                }}
+              />
+            )}
+
+            <SortableList
+              items={actionStepsBeforeGroup}
+              onChange={handleReorderSteps}
+              renderItem={(step, isOverlay) => {
+                const { id, position } = step
+                return (
+                  <SortableList.Item id={id}>
+                    <Flex
+                      key={`${id}-${position}`}
+                      width={isDrawerOpen || isMobile ? '100%' : 'auto'}
+                      flexDir="column"
+                      position="relative"
+                    >
+                      <FlowStepWithAddButton
+                        step={step}
+                        isLastStep={position === steps.length}
+                        isNested={isNested}
+                        stepsBeforeGroup={actionStepsBeforeGroup}
+                        groupedSteps={groupedSteps}
+                        addButtonProps={{
+                          isHidden: readOnly || !!isOverlay,
+                          isDisabled: shouldDisableAddButton,
+                          showEmptyAction: shouldShowEmptyAction,
+                        }}
+                      />
+                    </Flex>
+                  </SortableList.Item>
+                )
+              }}
             />
-          )}
-
-          <SortableList
-            items={stepsBeforeGroup}
-            onChange={handleReorderSteps}
-            renderItem={(step, isOverlay) => {
-              const { id, position } = step
-              return (
-                <SortableList.Item id={id}>
-                  <Flex
-                    key={`${id}-${position}`}
-                    width={isDrawerOpen || isMobile ? '100%' : 'auto'}
-                    flexDir="column"
-                    position="relative"
-                  >
-                    <FlowStepWithAddButton
-                      step={step}
-                      isLastStep={position === steps.length}
-                      isNested={isNested}
-                      stepsBeforeGroup={stepsBeforeGroup}
-                      groupedSteps={groupedSteps}
-                      showAddButton={!isOverlay}
-                    />
-                  </Flex>
-                </SortableList.Item>
-              )
-            }}
+            {groupedSteps.length > 0 && (
+              <FlowStepGroup
+                stepsBeforeGroup={actionStepsBeforeGroup}
+                groupedSteps={groupedSteps}
+              />
+            )}
+          </Flex>
+          {/** HACKFIX (kevinkim-ogp): to ensure that the transitions are smooth */}
+          <Flex
+            {...editorStyles.dummyRightContainer}
+            w={rightDrawerWidth}
+            transform={rightDrawerTransform}
           />
-          {groupedSteps.length > 0 && (
-            <FlowStepGroup
-              stepsBeforeGroup={stepsBeforeGroup}
-              groupedSteps={groupedSteps}
+          <Flex
+            {...editorStyles.rightDrawerContainer}
+            w={rightDrawerWidth}
+            visibility={isDrawerOpen ? 'visible' : 'hidden'}
+            opacity={isDrawerOpen ? 1 : 0}
+            transform={rightDrawerTransform}
+          >
+            <EditorRightDrawer
+              flowStepGroupIconUrl={flowStepGroupIconUrl}
+              steps={steps}
             />
-          )}
-        </Flex>
-        {/** HACKFIX (kevinkim-ogp): to ensure that the transitions are smooth */}
-        <Flex
-          {...editorStyles.dummyRightContainer}
-          w={rightDrawerWidth}
-          transform={rightDrawerTransform}
-        />
-        <Flex
-          {...editorStyles.rightDrawerContainer}
-          w={rightDrawerWidth}
-          visibility={isDrawerOpen ? 'visible' : 'hidden'}
-          opacity={isDrawerOpen ? 1 : 0}
-          transform={rightDrawerTransform}
-        >
-          <EditorRightDrawer
-            flowStepGroupIconUrl={flowStepGroupIconUrl}
-            steps={steps}
-          />
-        </Flex>
-      </StepExecutionsToIncludeProvider>
+          </Flex>
+        </StepExecutionsToIncludeProvider>
+      </MrfContextProvider>
     </Flex>
   )
 }

packages/frontend/src/components/EditorRightDrawer/Step.tsx

@@ -8,7 +8,6 @@ import FlowSubstep from '@/components/FlowSubstep'
 import Form from '@/components/Form'
 import { EditorContext } from '@/contexts/Editor'
 import { StepExecutionsProvider } from '@/contexts/StepExecutions'
-import { StepExecutionsToIncludeContext } from '@/contexts/StepExecutionsToInclude'
 import { generateValidationSchema } from '@/helpers/editor'
 import { useStepMetadata } from '@/hooks/useStepMetadata'
 
@@ -30,20 +29,7 @@ export default function Step(props: StepProps): React.ReactElement | null {
     onClose: onModalClose,
   } = useDisclosure()
 
-  const { allApps, onUpdateStep, testExecutionSteps, resetTimestamp } =
-    useContext(EditorContext)
-
-  // This includes all steps that run even after the current step, but within the same branch.
-  const stepExecutionsToInclude = useContext(StepExecutionsToIncludeContext)
-  const priorExecutionSteps = useMemo(
-    () =>
-      testExecutionSteps.filter(
-        (stepExecution) =>
-          stepExecutionsToInclude?.has(stepExecution.stepId) &&
-          stepExecution.step.position < step.position,
-      ),
-    [step.position, stepExecutionsToInclude, testExecutionSteps],
-  )
+  const { allApps, onUpdateStep, resetTimestamp } = useContext(EditorContext)
 
   const { app, hasConnection, isTrigger, selectedActionOrTrigger, substeps } =
     useStepMetadata(allApps, step)
@@ -67,7 +53,7 @@ export default function Step(props: StepProps): React.ReactElement | null {
   return (
     <>
       <Flex w="100%" flexDir="column">
-        <StepExecutionsProvider priorExecutionSteps={priorExecutionSteps}>
+        <StepExecutionsProvider currentStep={step}>
           <Form
             key={`${step.id}-${resetTimestamp}`}
             defaultValues={step}