chore: useStepMetadata should read allApps from EditorContext

^ Conflicts:
^	packages/frontend/src/components/EditorRightDrawer/Step.tsx

Author: pregnantboy

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 (
     <>

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}
           >
-            <EditorRightDrawer
-              flowStepGroupIconUrl={flowStepGroupIconUrl}
-              steps={steps}
-            />
+            <EditorRightDrawer step={currentStep} />
           </Flex>
         </StepExecutionsToIncludeProvider>
       </MrfContextProvider>

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,22 +17,21 @@ 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,
     onOpen: onModalOpen,
     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 <CircularProgress isIndeterminate my={2} />
-  }
-
   return (
     <>
       <Flex w="100%" flexDir="column">
@@ -96,7 +91,8 @@ export default function Step(props: StepProps): React.ReactElement | null {
         <FlowStepConfigurationModal
           onClose={onModalClose}
           isTrigger={isTrigger}
-          isLastStep={isLastStep}
+          // this shouldnt matter here since it's just for reconnecting
+          isLastStep={false}
           step={step}
           app={app}
           event={selectedActionOrTrigger}

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

@@ -25,7 +25,6 @@ export default function StepHeader(props: StepHeaderProps) {
   } = useDisclosure()
 
   const {
-    allApps,
     readOnly: isReadOnlyEditor,
     shouldWarnOnLeave,
     onDrawerClose,
@@ -38,7 +37,7 @@ export default function StepHeader(props: StepHeaderProps) {
     defaultCaption,
     position,
     stepName: initialStepName,
-  } = useStepMetadata(allApps, step)
+  } = useStepMetadata(step)
 
   const handleClose = () => {
     if (shouldWarnOnLeave) {

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

@@ -1,31 +1,23 @@
 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'
 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) {
     >
       <StepHeader step={step} />
       <Flex {...styles.stepContentsWrapper} pt={hasConnection ? 0 : 4}>
-        <Step step={step} isLastStep={step.position === steps.length} />
+        <Step step={step} />
       </Flex>
     </Flex>
   )

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,

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,

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

@@ -26,7 +26,6 @@ export default function GroupStepWithAddButton(
     isLastStep,
     isOverlay,
     allowReorder,
-
     showEmptyAction,
     canChildStepsReorder,
   } = props

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,

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'