Skip to content

Commit 250bf2e

Browse files
kevinkim-ogpkevinkim-ogp
committed
chore: refactor
1 parent 2b1a42d commit 250bf2e

File tree

4 files changed

+51
-139
lines changed

4 files changed

+51
-139
lines changed

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

Lines changed: 32 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,15 @@
11
import type { IFlowTemplateConfig, IStep, ISubstep } from '@plumber/types'
22

3-
import {
4-
Fragment,
5-
useCallback,
6-
useContext,
7-
useEffect,
8-
useMemo,
9-
useState,
10-
} from 'react'
3+
import { Fragment, useCallback, useContext, useMemo } from 'react'
114
import { BiInfoCircle } from 'react-icons/bi'
125
import { Box, CircularProgress, Flex, useDisclosure } from '@chakra-ui/react'
13-
import { yupResolver } from '@hookform/resolvers/yup'
146
import { Infobox } from '@opengovsg/design-system-react'
15-
import type { BaseSchema } from 'yup'
16-
import * as yup from 'yup'
17-
import type { ObjectShape } from 'yup/lib/object'
187

198
import ChooseConnectionSubstep from '@/components/ChooseConnectionSubstep'
209
import FlowSubstep from '@/components/FlowSubstep'
2110
import Form from '@/components/Form'
2211
import MarkdownRenderer from '@/components/MarkdownRenderer'
23-
import TestSubstep from '@/components/TestSubstep'
2412
import { EditorContext } from '@/contexts/Editor'
25-
import { StepDisplayOverridesContext } from '@/contexts/StepDisplayOverrides'
2613
import { StepExecutionsProvider } from '@/contexts/StepExecutions'
2714
import { StepExecutionsToIncludeContext } from '@/contexts/StepExecutionsToInclude'
2815
import { generateValidationSchema } from '@/helpers/editor'
@@ -45,15 +32,7 @@ type FlowStepProps = {
4532
}
4633

4734
export default function Step(props: FlowStepProps): React.ReactElement | null {
48-
const {
49-
index,
50-
step,
51-
isLastStep,
52-
collapsed,
53-
onChange,
54-
onContinue,
55-
templateConfig,
56-
} = props
35+
const { step, isLastStep, collapsed, onChange, templateConfig } = props
5736

5837
const {
5938
isOpen: isModalOpen,
@@ -63,14 +42,6 @@ export default function Step(props: FlowStepProps): React.ReactElement | null {
6342

6443
const { allApps, onDrawerClose, testExecutionSteps } =
6544
useContext(EditorContext)
66-
const displayOverrides = useContext(StepDisplayOverridesContext)?.[step.id]
67-
68-
const cannotChooseApp = displayOverrides?.disableActionChanges ?? false
69-
const [currentSubstep, setCurrentSubstep] = useState<number | null>(
70-
// OK to set to 1, even if a step has _no_ substeps, everything will just be
71-
// collapsed due to matching logic below.
72-
cannotChooseApp ? 1 : 0,
73-
)
7445

7546
// This includes all steps that run even after the current step, but within the same branch.
7647
const stepExecutionsToInclude = useContext(StepExecutionsToIncludeContext)
@@ -91,15 +62,11 @@ export default function Step(props: FlowStepProps): React.ReactElement | null {
9162

9263
const handleChange = useCallback(
9364
async ({ step }: { step: IStep }) => {
94-
return await onChange(step)
65+
return onChange(step)
9566
},
9667
[onChange],
9768
)
9869

99-
const expandNextStep = useCallback(() => {
100-
setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1)
101-
}, [])
102-
10370
const handleSubmit = (val: any) => {
10471
handleChange({ step: val as IStep })
10572
}
@@ -122,15 +89,6 @@ export default function Step(props: FlowStepProps): React.ReactElement | null {
12289
const shouldShowInfobox: boolean =
12390
stepAppEventKey === templateStepAppEventKey && !!templateStepHelpMessage
12491

125-
const toggleSubstep = (substepIndex: number) =>
126-
setCurrentSubstep((value) => (value !== substepIndex ? substepIndex : null))
127-
128-
useEffect(() => {
129-
if (index !== null) {
130-
setCurrentSubstep(cannotChooseApp ? 1 : 0)
131-
}
132-
}, [cannotChooseApp, index])
133-
13492
// this ensures that we do not have an empty drawer
13593
if (!step.appKey && !step.key) {
13694
onDrawerClose()
@@ -167,75 +125,39 @@ export default function Step(props: FlowStepProps): React.ReactElement | null {
167125
onSubmit={handleSubmit}
168126
resolver={stepValidationSchema}
169127
>
170-
{/* Place ChooseConnectionSubstep outside the accordion structure */}
171-
{substeps?.some(
172-
(substep: ISubstep) => substep.key === 'chooseConnection',
173-
) &&
174-
app && (
175-
<ChooseConnectionSubstep
176-
step={step}
177-
application={app}
178-
onReconnect={onModalOpen}
179-
/>
128+
<Fragment>
129+
{/* Place ChooseConnectionSubstep outside the accordion structure */}
130+
{substeps?.some(
131+
(substep: ISubstep) => substep.key === 'chooseConnection',
132+
) &&
133+
app && (
134+
<ChooseConnectionSubstep
135+
step={step}
136+
application={app}
137+
onReconnect={onModalOpen}
138+
/>
139+
)}
140+
141+
{substeps?.map(
142+
(substep) =>
143+
substep.key &&
144+
((step.appKey === 'webhook' && step?.webhookUrl) ||
145+
['chooseConnection', 'testStep'].includes(substep.key) ===
146+
false) && (
147+
<FlowSubstep
148+
key={substep.key}
149+
substep={substep}
150+
onSave={handleChange}
151+
step={step}
152+
selectedActionOrTrigger={selectedActionOrTrigger}
153+
/>
154+
),
180155
)}
181-
182-
{/* Render the remaining substeps as accordions */}
183-
{substeps?.length > 0 &&
184-
substeps
185-
.filter((substep) => substep.key !== 'chooseConnection')
186-
.map((substep: ISubstep, index: number) => {
187-
return (
188-
<Fragment key={`${substep?.name}-${index}`}>
189-
{substep.key === 'testStep' && (
190-
<TestSubstep
191-
expanded={currentSubstep === index}
192-
substep={substep}
193-
onExpand={() => toggleSubstep(index)}
194-
onCollapse={() => toggleSubstep(index)}
195-
onChange={handleChange}
196-
onContinue={onContinue}
197-
step={step}
198-
selectedActionOrTrigger={selectedActionOrTrigger}
199-
/>
200-
)}
201-
202-
{substep.key && substep.key !== 'testStep' && (
203-
<FlowSubstep
204-
expanded={currentSubstep === index}
205-
substep={substep}
206-
onExpand={() => toggleSubstep(index)}
207-
onCollapse={() => toggleSubstep(index)}
208-
onSubmit={(
209-
type?: string,
210-
currentStep?: IStep,
211-
status?: string,
212-
) => {
213-
if (type === 'save' && currentStep) {
214-
return handleChange({
215-
step: {
216-
...currentStep,
217-
...(status !== undefined && { status }),
218-
},
219-
})
220-
} else {
221-
expandNextStep()
222-
}
223-
}}
224-
onChange={handleChange}
225-
step={step}
226-
settingsLabel={
227-
selectedActionOrTrigger?.settingsStepLabel ??
228-
app?.substepLabels?.settingsStepLabel
229-
}
230-
selectedActionOrTrigger={selectedActionOrTrigger}
231-
/>
232-
)}
233-
</Fragment>
234-
)
235-
})}
156+
</Fragment>
236157
</Form>
237158
</StepExecutionsProvider>
238159
</Flex>
160+
239161
{isModalOpen && (
240162
<FlowStepConfigurationModal
241163
onClose={onModalClose}

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,17 @@ interface EditorRightDrawerProps {
2121
}
2222

2323
export default function EditorRightDrawer(props: EditorRightDrawerProps) {
24-
const {
25-
flow,
26-
index,
27-
isLastStep,
28-
onStepChange,
29-
currentStepIndex,
30-
setCurrentStepIndex,
31-
steps,
32-
} = props
24+
const { flow, index, isLastStep, onStepChange, steps } = props
3325

3426
const {
3527
currentStepId,
28+
currentStepIndex,
3629
isDrawerOpen,
3730
isMobile,
3831
onDrawerClose,
3932
onDrawerOpen,
4033
setCurrentStepId,
34+
setCurrentStepIndex,
4135
} = useContext(EditorContext)
4236

4337
const step = useMemo(() => {

‎packages/frontend/src/components/FlowStepTestController/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ interface FlowStepTestControllerProps {
2626
isDirty: boolean
2727
isSaving: boolean
2828
isTestResultOpen: boolean
29+
isValid: boolean
2930
step: IStep
30-
validationStatus: boolean
3131
handleSave: () => void
3232
handleSaveAndTest: () => void
3333
onTestResultOpen: () => void
@@ -41,8 +41,8 @@ export default function FlowStepTestController(
4141
isDirty,
4242
isSaving,
4343
isTestResultOpen,
44+
isValid,
4445
step,
45-
validationStatus,
4646
handleSave,
4747
handleSaveAndTest,
4848
onTestResultOpen,
@@ -199,7 +199,7 @@ export default function FlowStepTestController(
199199
onClick={handleSaveAndTest}
200200
type="submit"
201201
data-test="flow-substep-continue-button"
202-
isDisabled={!validationStatus || readOnly || isSaving}
202+
isDisabled={!isValid || readOnly || isSaving}
203203
isLoading={isTestExecuting}
204204
>
205205
Check step

‎packages/frontend/src/components/FlowSubstep/index.tsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,13 @@ import { validateSubstep } from '@/helpers/editor'
1414

1515
type FlowSubstepProps = {
1616
substep: ISubstep
17-
onChange: ({ step }: { step: IStep }) => void
18-
onSubmit: (
19-
type?: string,
20-
currentStep?: IStep,
21-
status?: string,
22-
) => Promise<{ data?: { updateStep?: any } } | void> | void
17+
onSave: ({ step }: { step: IStep }) => Promise<void>
2318
step: IStep
2419
selectedActionOrTrigger?: ITrigger | IAction
2520
}
2621

2722
function FlowSubstep(props: FlowSubstepProps): JSX.Element {
28-
const { substep, onSubmit, step, selectedActionOrTrigger } = props
23+
const { substep, onSave, step, selectedActionOrTrigger } = props
2924
const { flags } = useContext(LaunchDarklyContext)
3025
const formContext = useFormContext()
3126
const { readOnly, executeTestStep } = useContext(EditorContext)
@@ -38,7 +33,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
3833
const { arguments: args } = substep
3934
const toast = useToast()
4035
const [isSaving, setIsSaving] = useState(false)
41-
const [validationStatus, setValidationStatus] = useState<boolean>(
36+
const [isValid, setIsValid] = useState<boolean>(
4237
validateSubstep(substep, formContext.getValues() as IStep),
4338
)
4439

@@ -67,7 +62,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
6762
useEffect(() => {
6863
function validate(step: unknown) {
6964
const validationResult = validateSubstep(substep, step as IStep)
70-
setValidationStatus(validationResult)
65+
setIsValid(validationResult)
7166
}
7267
const subscription = formContext.watch(validate)
7368

@@ -80,12 +75,13 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
8075
try {
8176
setIsSaving(true)
8277
const currentStep = formContext.getValues() as IStep
83-
const isValid = validateSubstep(substep, currentStep)
84-
const result = await onSubmit(
85-
'save',
86-
currentStep,
87-
isValid ? 'completed' : 'incomplete',
88-
)
78+
const isSubStepValid = validateSubstep(substep, currentStep)
79+
const result = onSave({
80+
step: {
81+
...currentStep,
82+
status: isSubStepValid ? 'completed' : 'incomplete',
83+
},
84+
})
8985

9086
if (!result) {
9187
throw new Error('Failed to save step')
@@ -104,7 +100,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
104100
} finally {
105101
setIsSaving(false)
106102
}
107-
}, [formContext, onSubmit, substep, toast])
103+
}, [formContext, onSave, substep, toast])
108104

109105
const handleSaveAndTest = useCallback(async () => {
110106
await handleSave()
@@ -137,7 +133,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
137133
handleSaveAndTest={handleSaveAndTest}
138134
onTestResultOpen={onTestResultOpen}
139135
onTestResultClose={onTestResultClose}
140-
validationStatus={validationStatus}
136+
isValid={isValid}
141137
/>
142138
</Box>
143139
)

0 commit comments

Comments
 (0)