From ac6395b4d03a71e75c8b50fcb44c1f8cc03d6819 Mon Sep 17 00:00:00 2001 From: Ian Chen Date: Fri, 24 Oct 2025 15:23:32 +0800 Subject: [PATCH 1/3] chore: mostly refactor, add placeholder mrf context --- .../Editor/FlowStepWithAddButton.tsx | 62 ++---- .../frontend/src/components/Editor/index.tsx | 203 +++++++++--------- .../src/components/EditorRightDrawer/Step.tsx | 18 +- packages/frontend/src/contexts/MrfContext.tsx | 67 ++++++ .../frontend/src/contexts/StepExecutions.tsx | 69 +++++- .../src/contexts/StepExecutionsToInclude.tsx | 36 +++- .../frontend/src/hooks/useStepMetadata.ts | 13 +- 7 files changed, 291 insertions(+), 177 deletions(-) create mode 100644 packages/frontend/src/contexts/MrfContext.tsx diff --git a/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx b/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx index 2163b3ce68..74922a91de 100644 --- a/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx +++ b/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,51 +14,27 @@ 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 ( <> 1} + allowReorder={true} /> {isApprovalStep && } - - {showAddButton && ( - - )} + ) } diff --git a/packages/frontend/src/components/Editor/index.tsx b/packages/frontend/src/components/Editor/index.tsx index b3a7415808..1784270f1d 100644 --- a/packages/frontend/src/components/Editor/index.tsx +++ b/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 (
@@ -172,80 +160,95 @@ export default function Editor(props: EditorProps): React.ReactElement { backgroundSize: '30px 30px', }} > - - + - {triggerStep && ( - + {triggerStep && ( + + )} + + { + const { id, position } = step + return ( + + + + + + ) + }} /> - )} - - { - const { id, position } = step - return ( - - - - - - ) - }} + {groupedSteps.length > 0 && ( + + )} + + {/** HACKFIX (kevinkim-ogp): to ensure that the transitions are smooth */} + - {groupedSteps.length > 0 && ( - + - )} - - {/** HACKFIX (kevinkim-ogp): to ensure that the transitions are smooth */} - - - - - + + + ) } diff --git a/packages/frontend/src/components/EditorRightDrawer/Step.tsx b/packages/frontend/src/components/EditorRightDrawer/Step.tsx index a52df7a4eb..d3b6290a31 100644 --- a/packages/frontend/src/components/EditorRightDrawer/Step.tsx +++ b/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 ( <> - +
void +} + +const MrfContext = createContext(undefined) + +export const useMrfContext = () => { + const context = useContext(MrfContext) + if (!context) { + throw new Error('useMrfContext must be used within a MrfContextProvider') + } + return context +} + +interface MrfContextProviderProps { + children: React.ReactNode + steps: IStep[] +} + +export const MrfContextProvider = ({ + children, + steps, +}: MrfContextProviderProps) => { + const mrfSteps = steps.filter( + (step) => step.appKey === FORMSG_APP_KEY && step.key === MRF_ACTION_KEY, + ) + + const [approvalBranches, setApprovalBranches] = useState< + Record + >({ + ...mrfSteps.reduce((acc, step) => { + acc[step.id] = 'approve' + return acc + }, {} as Record), + }) + + const setApprovalBranch = (stepId: string, branch: ApprovalBranch) => { + setApprovalBranches((prev) => ({ + ...prev, + [stepId]: branch, + })) + } + + return ( + + {children} + + ) +} diff --git a/packages/frontend/src/contexts/StepExecutions.tsx b/packages/frontend/src/contexts/StepExecutions.tsx index ade4847501..a84ba46627 100644 --- a/packages/frontend/src/contexts/StepExecutions.tsx +++ b/packages/frontend/src/contexts/StepExecutions.tsx @@ -1,20 +1,73 @@ -import type { IExecutionStep } from '@plumber/types' +import type { IExecutionStep, IStep } from '@plumber/types' -import * as React from 'react' +import { createContext, useContext, useMemo } from 'react' -export const StepExecutionsContext = React.createContext<{ +import { TOOLBOX_ACTIONS } from '@/helpers/toolbox' + +import { EditorContext } from './Editor' +import { StepExecutionsToIncludeContext } from './StepExecutionsToInclude' + +export const StepExecutionsContext = createContext<{ priorExecutionSteps: IExecutionStep[] }>({ priorExecutionSteps: [] }) type StepExecutionsProviderProps = { children: React.ReactNode - priorExecutionSteps: IExecutionStep[] + currentStep: IStep } -export const StepExecutionsProvider = ( - props: StepExecutionsProviderProps, -): React.ReactElement => { - const { children, priorExecutionSteps } = props +export const StepExecutionsProvider = ({ + currentStep, + children, +}: StepExecutionsProviderProps): React.ReactElement => { + const { testExecutionSteps } = useContext(EditorContext) + + const { + triggerStep, + actionStepsBeforeGroup: stepsBeforeGroup, + groupedSteps, + } = useContext(StepExecutionsToIncludeContext) + + // + // 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.key === TOOLBOX_ACTIONS.ForEach || step.id === currentStep.id, + ) + ? group + : [], + ) + }, [currentStep?.id, groupedSteps]) + + const stepExecutionsToInclude = useMemo( + () => + new Set([ + ...(triggerStep?.id ? [triggerStep.id] : []), + ...stepsBeforeGroup.map((step) => step.id), + ...groupStepsToInclude.map((s) => s.id), + ]), + [triggerStep, stepsBeforeGroup, groupStepsToInclude], + ) + + const priorExecutionSteps = useMemo( + () => + testExecutionSteps.filter( + (stepExecution) => + stepExecutionsToInclude?.has(stepExecution.stepId) && + stepExecution.step.position < currentStep.position, + ), + [currentStep.position, stepExecutionsToInclude, testExecutionSteps], + ) + return ( {children} diff --git a/packages/frontend/src/contexts/StepExecutionsToInclude.tsx b/packages/frontend/src/contexts/StepExecutionsToInclude.tsx index 0f2bae6048..45fb83856b 100644 --- a/packages/frontend/src/contexts/StepExecutionsToInclude.tsx +++ b/packages/frontend/src/contexts/StepExecutionsToInclude.tsx @@ -3,22 +3,40 @@ import type { IStep } from '@plumber/types' import type { ReactNode } from 'react' import { createContext } from 'react' -export type StepExecutionsToIncludeContextData = ReadonlySet +export type StepExecutionsToIncludeContextData = { + triggerStep: IStep | null + actionStepsBeforeGroup: IStep[] + groupedSteps: IStep[][] +} export const StepExecutionsToIncludeContext = - createContext(new Set()) + createContext({ + triggerStep: null, + actionStepsBeforeGroup: [], + groupedSteps: [], + }) -type StepExecutionsProviderProps = { +interface StepExecutionsProviderProps { children: ReactNode - value: StepExecutionsToIncludeContextData + triggerStep: IStep | null + actionStepsBeforeGroup: IStep[] + groupedSteps: IStep[][] } -export function StepExecutionsToIncludeProvider( - props: StepExecutionsProviderProps, -): JSX.Element { - const { children, value } = props +export function StepExecutionsToIncludeProvider({ + children, + triggerStep, + actionStepsBeforeGroup, + groupedSteps, +}: StepExecutionsProviderProps): JSX.Element { return ( - + {children} ) diff --git a/packages/frontend/src/hooks/useStepMetadata.ts b/packages/frontend/src/hooks/useStepMetadata.ts index d45aad59e7..c2c8c54d8c 100644 --- a/packages/frontend/src/hooks/useStepMetadata.ts +++ b/packages/frontend/src/hooks/useStepMetadata.ts @@ -99,9 +99,18 @@ export function useStepMetadata( !isMobile && !isIfThenStep && allowReorder && - !isDrawerOpen + !isDrawerOpen && + !isMrfStep ) - }, [readOnly, isTrigger, isMobile, isIfThenStep, allowReorder, isDrawerOpen]) + }, [ + readOnly, + isTrigger, + isMobile, + isIfThenStep, + allowReorder, + isDrawerOpen, + isMrfStep, + ]) return { app, From 3f9e2c1fca60111e2cc298ea071fedfbecbfaaaa Mon Sep 17 00:00:00 2001 From: Ian Chen Date: Fri, 24 Oct 2025 15:37:41 +0800 Subject: [PATCH 2/3] refactor: useStepMetadata hook --- packages/frontend/src/components/FlowStep/index.tsx | 9 +-------- .../Content/IfThen/HoverAddStepButton.tsx | 12 ++---------- packages/frontend/src/hooks/useStepMetadata.ts | 8 ++++---- 3 files changed, 7 insertions(+), 22 deletions(-) diff --git a/packages/frontend/src/components/FlowStep/index.tsx b/packages/frontend/src/components/FlowStep/index.tsx index 329ded9891..6e0ac73e44 100644 --- a/packages/frontend/src/components/FlowStep/index.tsx +++ b/packages/frontend/src/components/FlowStep/index.tsx @@ -77,14 +77,7 @@ export default function FlowStep( substeps, shouldShowDragHandle, isDeletable, - } = useStepMetadata( - allApps, - step, - readOnly, - allowReorder, - isMobile, - isDrawerOpen, - ) + } = useStepMetadata(allApps, step, true) const { cancelRef, diff --git a/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx b/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx index 33efbacffd..ca10699be7 100644 --- a/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx +++ b/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx @@ -40,16 +40,8 @@ export function HoverAddStepButton( const { isOpen, onOpen, onClose } = useDisclosure() const [isHovered, setIsHovered] = useState(false) - const { allApps, readOnly, isMobile, isDrawerOpen } = - useContext(EditorContext) - const { shouldShowDragHandle } = useStepMetadata( - allApps, - step, - readOnly, - allowReorder, - isMobile, - isDrawerOpen, - ) + const { allApps, readOnly, isDrawerOpen } = useContext(EditorContext) + const { shouldShowDragHandle } = useStepMetadata(allApps, step, allowReorder) const { cancelRef, diff --git a/packages/frontend/src/hooks/useStepMetadata.ts b/packages/frontend/src/hooks/useStepMetadata.ts index c2c8c54d8c..deda5f91b6 100644 --- a/packages/frontend/src/hooks/useStepMetadata.ts +++ b/packages/frontend/src/hooks/useStepMetadata.ts @@ -1,8 +1,9 @@ import { IAction, IApp, IStep, ISubstep, ITrigger } from '@plumber/types' -import { useMemo } from 'react' +import { useContext, useMemo } from 'react' import get from 'lodash/get' +import { EditorContext } from '@/contexts/Editor' import { FORMSG_APP_KEY, MRF_ACTION_KEY } from '@/helpers/formsg' import getStepName from '@/helpers/getStepName' import { @@ -31,11 +32,10 @@ interface UseStepMetadataResult { export function useStepMetadata( allApps: IApp[], step: IStep | undefined, - readOnly?: boolean, allowReorder?: boolean, - isMobile?: boolean, - isDrawerOpen?: boolean, ): UseStepMetadataResult { + const { readOnly, isMobile, isDrawerOpen } = useContext(EditorContext) + const isCompleted = step?.status === 'completed' const isTrigger = step?.type === 'trigger' const isIfThenStep = step ? checkIfThenStep(step) : false From 3374fde0f7a38447098242a7dc30c8c94eab5cb9 Mon Sep 17 00:00:00 2001 From: Ian Chen Date: Sun, 30 Nov 2025 16:00:59 +0800 Subject: [PATCH 3/3] chore: useStepMetadata should read allApps from EditorContext ^ Conflicts: ^ packages/frontend/src/components/EditorRightDrawer/Step.tsx --- .../Editor/FlowStepWithAddButton.tsx | 7 +------ .../frontend/src/components/Editor/index.tsx | 19 ++++++------------- .../src/components/EditorRightDrawer/Step.tsx | 18 +++++++----------- .../EditorRightDrawer/StepHeader.tsx | 3 +-- .../components/EditorRightDrawer/index.tsx | 18 +++++------------- .../src/components/FlowStep/index.tsx | 2 +- .../Content/IfThen/HoverAddStepButton.tsx | 4 ++-- .../components/GroupStepWithAddButton.tsx | 1 - .../FlowStepTestController/index.tsx | 2 +- .../frontend/src/hooks/useStepMetadata.ts | 4 ++-- 10 files changed, 26 insertions(+), 52 deletions(-) diff --git a/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx b/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx index 74922a91de..f1f7256962 100644 --- a/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx +++ b/packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx @@ -1,8 +1,5 @@ import { IStep } from '@plumber/types' -import { useContext } from 'react' - -import { EditorContext } from '@/contexts/Editor' import { FlowStep } from '@/exports/components' import { useStepMetadata } from '@/hooks/useStepMetadata' @@ -31,9 +28,7 @@ export default function FlowStepWithAddButton({ showEmptyAction: boolean } }) { - const { allApps } = useContext(EditorContext) - - const { isApprovalStep } = useStepMetadata(allApps, step) + const { isApprovalStep } = useStepMetadata(step) return ( <> diff --git a/packages/frontend/src/components/Editor/index.tsx b/packages/frontend/src/components/Editor/index.tsx index 1784270f1d..19af6fcd37 100644 --- a/packages/frontend/src/components/Editor/index.tsx +++ b/packages/frontend/src/components/Editor/index.tsx @@ -26,7 +26,7 @@ type EditorProps = { export default function Editor(props: EditorProps): React.ReactElement { const { isNested } = props - const { allApps, isDrawerOpen, isMobile, flow, readOnly } = + const { allApps, isDrawerOpen, isMobile, flow, readOnly, currentStepId } = useContext(EditorContext) const { handleReorderUpdate } = useReorderSteps(flow.id) @@ -44,6 +44,10 @@ export default function Editor(props: EditorProps): React.ReactElement { [flow, rawSteps], ) + const currentStep = useMemo(() => { + return steps.find((step) => step.id === currentStepId) + }, [currentStepId, steps]) + const appsWithActions: IApp[] = allApps.filter( (app: IApp) => !!app.actions?.length, ) @@ -93,14 +97,6 @@ export default function Editor(props: EditorProps): React.ReactElement { : [triggerStep, steps.slice(1, groupStepIdx), branchesWithSteps] }, [groupingActions, steps]) - const flowStepGroupIconUrl = useMemo(() => { - if (groupedSteps.length === 0) { - return undefined - } - return appsWithActions.find((app) => app.key === groupedSteps[0][0].appKey) - ?.iconUrl - }, [appsWithActions, groupedSteps]) - const handleReorderSteps = async (reorderedSteps: IStep[]) => { const stepPositions = reorderedSteps.map((step, index) => ({ id: step.id, @@ -242,10 +238,7 @@ export default function Editor(props: EditorProps): React.ReactElement { opacity={isDrawerOpen ? 1 : 0} transform={rightDrawerTransform} > - + diff --git a/packages/frontend/src/components/EditorRightDrawer/Step.tsx b/packages/frontend/src/components/EditorRightDrawer/Step.tsx index d3b6290a31..5677804cb3 100644 --- a/packages/frontend/src/components/EditorRightDrawer/Step.tsx +++ b/packages/frontend/src/components/EditorRightDrawer/Step.tsx @@ -1,7 +1,7 @@ import type { IStep } from '@plumber/types' -import { useCallback, useContext, useMemo } from 'react' -import { CircularProgress, Flex, useDisclosure } from '@chakra-ui/react' +import { Fragment, useCallback, useContext, useMemo } from 'react' +import { Flex, useDisclosure } from '@chakra-ui/react' import ChooseConnectionSubstep from '@/components/ChooseConnectionSubstep' import FlowSubstep from '@/components/FlowSubstep' @@ -17,11 +17,10 @@ import LearnFromGuideInfobox from './LearnFromGuideInfobox' type StepProps = { step: IStep - isLastStep: boolean } export default function Step(props: StepProps): React.ReactElement | null { - const { step, isLastStep } = props + const { step } = props const { isOpen: isModalOpen, @@ -29,10 +28,10 @@ export default function Step(props: StepProps): React.ReactElement | null { onClose: onModalClose, } = useDisclosure() - const { allApps, onUpdateStep, resetTimestamp } = useContext(EditorContext) + const { onUpdateStep, resetTimestamp } = useContext(EditorContext) const { app, hasConnection, isTrigger, selectedActionOrTrigger, substeps } = - useStepMetadata(allApps, step) + useStepMetadata(step) const handleSubmit = useCallback( (val: any) => { @@ -46,10 +45,6 @@ export default function Step(props: StepProps): React.ReactElement | null { [substeps], ) - if (!allApps) { - return - } - return ( <> @@ -96,7 +91,8 @@ export default function Step(props: StepProps): React.ReactElement | null { { if (shouldWarnOnLeave) { diff --git a/packages/frontend/src/components/EditorRightDrawer/index.tsx b/packages/frontend/src/components/EditorRightDrawer/index.tsx index 1a2b44a0f7..f3c5c42e3e 100644 --- a/packages/frontend/src/components/EditorRightDrawer/index.tsx +++ b/packages/frontend/src/components/EditorRightDrawer/index.tsx @@ -1,9 +1,7 @@ import { IStep } from '@plumber/types' -import { useContext, useMemo } from 'react' import { Flex } from '@chakra-ui/react' -import { EditorContext } from '@/contexts/Editor' import { useStepMetadata } from '@/hooks/useStepMetadata' import Step from './Step' @@ -11,21 +9,15 @@ import StepHeader from './StepHeader' import { editorRightDrawerStyles as styles } from './styles' interface EditorRightDrawerProps { - flowStepGroupIconUrl?: string - steps: IStep[] + step?: IStep } export default function EditorRightDrawer(props: EditorRightDrawerProps) { - const { steps } = props + const { step } = props - const { allApps, currentStepId } = useContext(EditorContext) + const { hasConnection } = useStepMetadata(step) - const step = useMemo(() => { - return steps.find((step) => step.id === currentStepId) - }, [currentStepId, steps]) - const { hasConnection } = useStepMetadata(allApps, step) - - if (!currentStepId || !step) { + if (!step) { return null } @@ -40,7 +32,7 @@ export default function EditorRightDrawer(props: EditorRightDrawerProps) { > - + ) diff --git a/packages/frontend/src/components/FlowStep/index.tsx b/packages/frontend/src/components/FlowStep/index.tsx index 6e0ac73e44..baaf45dadc 100644 --- a/packages/frontend/src/components/FlowStep/index.tsx +++ b/packages/frontend/src/components/FlowStep/index.tsx @@ -77,7 +77,7 @@ export default function FlowStep( substeps, shouldShowDragHandle, isDeletable, - } = useStepMetadata(allApps, step, true) + } = useStepMetadata(step, true) const { cancelRef, diff --git a/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx b/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx index ca10699be7..ae905c185b 100644 --- a/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx +++ b/packages/frontend/src/components/FlowStepGroup/Content/IfThen/HoverAddStepButton.tsx @@ -40,8 +40,8 @@ export function HoverAddStepButton( const { isOpen, onOpen, onClose } = useDisclosure() const [isHovered, setIsHovered] = useState(false) - const { allApps, readOnly, isDrawerOpen } = useContext(EditorContext) - const { shouldShowDragHandle } = useStepMetadata(allApps, step, allowReorder) + const { readOnly, isDrawerOpen } = useContext(EditorContext) + const { shouldShowDragHandle } = useStepMetadata(step, allowReorder) const { cancelRef, diff --git a/packages/frontend/src/components/FlowStepGroup/components/GroupStepWithAddButton.tsx b/packages/frontend/src/components/FlowStepGroup/components/GroupStepWithAddButton.tsx index 658df6f339..cd1bcd1b2a 100644 --- a/packages/frontend/src/components/FlowStepGroup/components/GroupStepWithAddButton.tsx +++ b/packages/frontend/src/components/FlowStepGroup/components/GroupStepWithAddButton.tsx @@ -26,7 +26,6 @@ export default function GroupStepWithAddButton( isLastStep, isOverlay, allowReorder, - showEmptyAction, canChildStepsReorder, } = props diff --git a/packages/frontend/src/components/FlowStepTestController/index.tsx b/packages/frontend/src/components/FlowStepTestController/index.tsx index 96bec1d579..63e7ce9b53 100644 --- a/packages/frontend/src/components/FlowStepTestController/index.tsx +++ b/packages/frontend/src/components/FlowStepTestController/index.tsx @@ -114,7 +114,7 @@ export default function FlowStepTestController( isMrfStep, selectedActionOrTrigger, substeps, - } = useStepMetadata(allApps, step) + } = useStepMetadata(step) const { isTestSuccessful, diff --git a/packages/frontend/src/hooks/useStepMetadata.ts b/packages/frontend/src/hooks/useStepMetadata.ts index deda5f91b6..8ec1f83fd7 100644 --- a/packages/frontend/src/hooks/useStepMetadata.ts +++ b/packages/frontend/src/hooks/useStepMetadata.ts @@ -30,11 +30,11 @@ interface UseStepMetadataResult { } export function useStepMetadata( - allApps: IApp[], step: IStep | undefined, allowReorder?: boolean, ): UseStepMetadataResult { - const { readOnly, isMobile, isDrawerOpen } = useContext(EditorContext) + const { readOnly, isMobile, isDrawerOpen, allApps } = + useContext(EditorContext) const isCompleted = step?.status === 'completed' const isTrigger = step?.type === 'trigger'