refactor: separate substeps in FlowStep

packages/web/src/components/ChooseAccountSubstep/index.tsx

@@ -1,15 +1,25 @@
 import * as React from 'react';
-import { useQuery } from '@apollo/client';
-import Autocomplete from '@mui/material/Autocomplete';
+import { useQuery, useLazyQuery } from '@apollo/client';
 import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import ListItem from '@mui/material/ListItem';
+import Autocomplete from '@mui/material/Autocomplete';
 
+import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import type { App, AppConnection } from 'types/app';
+import type { Step, Substep } from 'types/step';
 import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
+import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 
 type ChooseAccountSubstepProps = {
-  appKey: string;
-  connectionId: string;
-  onChange: (connectionId: string) => void;
+  substep: Substep,
+  expanded?: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  onChange: ({ step }: { step: Step}) => void;
+  onSubmit: () => void;
+  step: Step;
 };
 
 const optionGenerator = (connection: AppConnection): { label: string; value: string; } => ({
@@ -20,31 +30,105 @@ const optionGenerator = (connection: AppConnection): { label: string; value: str
 const getOption = (options: Record<string, unknown>[], connectionId: string) => options.find(connection => connection.value === connectionId) || null;
 
 function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElement {
-  const { appKey, connectionId, onChange } = props;
+  const {
+    substep,
+    expanded = false,
+    onExpand,
+    onCollapse,
+    step,
+    onSubmit,
+    onChange,
+  } = props;
+  const {
+    connection,
+    appKey,
+  } = step;
   const { data, loading } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey }});
+  // TODO: show detailed error when connection test/verification fails
+  const [
+    testConnection,
+    {
+      loading: testResultLoading,
+      refetch: retestConnection
+    }
+  ] = useLazyQuery (TEST_CONNECTION, { variables: { id: connection?.id, }});
+
+  React.useEffect(() => {
+    if (connection?.id) {
+      testConnection({
+        variables: { id: connection?.id },
+      });
+    }
+    // intentionally no dependencies for initial test
+  }, []);
 
   const connectionOptions = React.useMemo(() => (data?.getApp as App)?.connections?.map((connection) => optionGenerator(connection)) || [], [data]);
 
+  const { name } = substep;
+
   const handleChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
     if (typeof selectedOption === 'object') {
+      // TODO: try to simplify type casting below.
       const typedSelectedOption = selectedOption as { value: string };
-      const value = typedSelectedOption.value;
+      const option: { value: string } = typedSelectedOption;
+      const connectionId = option?.value as string;
 
-      onChange(value);
+      if (connectionId !== step.connection?.id) {
+        onChange({
+          step: {
+            ...step,
+            connection: {
+              id: connectionId,
+            },
+          },
+        });
+      }
     }
-  }, [onChange]);
+  }, [step, onChange]);
+
+  React.useEffect(() => {
+    if (step.connection?.id) {
+      retestConnection({
+        id: step.connection.id,
+      });
+    }
+  }, [step.connection?.id, retestConnection])
+
+  const onToggle = expanded ? onCollapse : onExpand;
 
   return (
-    <Autocomplete
-      fullWidth
-      disablePortal
-      disableClearable
-      options={connectionOptions}
-      renderInput={(params) => <TextField {...params} label="Choose account" />}
-      value={getOption(connectionOptions, connectionId)}
-      onChange={handleChange}
-      loading={loading}
-    />
+    <React.Fragment>
+      <FlowSubstepTitle
+        expanded={expanded}
+        onClick={onToggle}
+        title={name}
+        valid={testResultLoading ? null : connection?.verified}
+      />
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
+          <Autocomplete
+            fullWidth
+            disablePortal
+            disableClearable
+            options={connectionOptions}
+            renderInput={(params) => <TextField {...params} label="Choose account" />}
+            value={getOption(connectionOptions, connection?.id)}
+            onChange={handleChange}
+            loading={loading}
+          />
+
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={onSubmit}
+            sx={{ mt: 2 }}
+            disabled={testResultLoading || !connection?.verified}
+          >
+            Continue
+          </Button>
+        </ListItem>
+      </Collapse>
+    </React.Fragment>
   );
 }
 

packages/web/src/components/ChooseAppAndEventSubstep/index.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { useQuery } from '@apollo/client';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import ListItem from '@mui/material/ListItem';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+import { GET_APPS } from 'graphql/queries/get-apps';
+import FlowSubstepTitle from 'components/FlowSubstepTitle';
+import type { App } from 'types/app';
+import type { Step, Substep } from 'types/step';
+import { StepType } from 'types/step';
+
+type ChooseAppAndEventSubstepProps = {
+  substep: Substep,
+  expanded?: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  onChange: ({ step }: { step: Step}) => void;
+  onSubmit: () => void;
+  step: Step;
+};
+
+const optionGenerator = (app: Record<string, unknown>): { label: string; value: string; } => ({
+  label: app.name as string,
+  value: app.key as string,
+});
+
+const getOption = (options: Record<string, unknown>[], appKey: unknown) => options.find(app => app.value === appKey as string) || null;
+
+function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.ReactElement {
+  const {
+    substep,
+    expanded = false,
+    onExpand,
+    onCollapse,
+    step,
+    onSubmit,
+    onChange,
+  } = props;
+
+  const isTrigger = step.type === StepType.Trigger;
+
+  const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
+  const apps: App[] = data?.getApps;
+  const app = apps?.find((currentApp: App) => currentApp.key === step.appKey);
+
+  const appOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
+  const actionsOrTriggers = isTrigger ? app?.triggers : app?.actions;
+  const actionOptions = React.useMemo(() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
+
+  const {
+    name,
+  } = substep;
+
+  const valid: boolean = !!step.key && !!step.appKey;
+
+  // placeholders
+  const onEventChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
+    if (typeof selectedOption === 'object') {
+      // TODO: try to simplify type casting below.
+      const typedSelectedOption = selectedOption as { value: string };
+      const option: { value: string } = typedSelectedOption;
+      const eventKey = option?.value as string;
+
+      if (step.key !== eventKey) {
+        onChange({
+          step: {
+            ...step,
+            key: eventKey,
+          },
+        });
+      }
+    }
+  }, [step, onChange]);
+
+  const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
+    if (typeof selectedOption === 'object') {
+      // TODO: try to simplify type casting below.
+      const typedSelectedOption = selectedOption as { value: string };
+      const option: { value: string } = typedSelectedOption;
+      const appKey = option?.value as string;
+
+      if (step.appKey !== appKey) {
+        onChange({
+          step: {
+            ...step,
+            key: null,
+            appKey,
+          },
+        });
+      }
+    }
+  }, [step, onChange]);;
+
+  const onToggle = expanded ? onCollapse : onExpand;
+
+  return (
+    <React.Fragment>
+      <FlowSubstepTitle
+        expanded={expanded}
+        onClick={onToggle}
+        title={name}
+        valid={valid}
+      />
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
+          <Autocomplete
+            fullWidth
+            disablePortal
+            disableClearable
+            options={appOptions}
+            renderInput={(params) => <TextField {...params} label="Choose an app" />}
+            value={getOption(appOptions, step.appKey)}
+            onChange={onAppChange}
+          />
+
+          {step.appKey && (
+            <Box display="flex" width="100%" pt={2} flexDirection="column">
+              <Typography variant="subtitle2" pb={2} gutterBottom>
+                Action event
+              </Typography>
+
+              <Autocomplete
+                fullWidth
+                disablePortal
+                disableClearable
+                options={actionOptions}
+                renderInput={(params) => <TextField {...params} label="Choose an event" />}
+                value={getOption(actionOptions, step.key)}
+                onChange={onEventChange}
+              />
+            </Box>
+          )}
+
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={onSubmit}
+            sx={{ mt: 2 }}
+            disabled={!valid}
+          >
+            Continue
+          </Button>
+        </ListItem>
+      </Collapse>
+    </React.Fragment>
+  );
+}
+
+export default ChooseAppAndEventSubstep;

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

@@ -6,19 +6,13 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import IconButton from '@mui/material/IconButton';
 
-import FlowSubstepTitle from 'components/FlowSubstepTitle';
+import FlowSubstep from 'components/FlowSubstep';
+import ChooseAppAndEventSubstep from 'components/ChooseAppAndEventSubstep';
 import ChooseAccountSubstep from 'components/ChooseAccountSubstep';
 import Form from 'components/Form';
-import InputCreator from 'components/InputCreator';
 import FlowStepContextMenu from 'components/FlowStepContextMenu';
 import AppIcon from 'components/AppIcon';
 import { GET_APPS } from 'graphql/queries/get-apps';
@@ -34,127 +28,47 @@ type FlowStepProps = {
   index?: number;
   onOpen?: () => void;
   onClose?: () => void;
-  onChange?: (step: Step) => void;
+  onChange: (step: Step) => void;
 }
 
-const optionGenerator = (app: Record<string, unknown>): { label: string; value: string; } => ({
-  label: app.name as string,
-  value: app.key as string,
-});
-
-const getOption = (options: Record<string, unknown>[], appKey: unknown) => options.find(app => app.value === appKey as string) || null;
-
-const parseStep = (step: any) => {
+const parseStep = (step: Step) => {
   try {
-    const parameters = JSON.parse(step.parameters);
+    // stringify stringified JSON first to overcome type casting
+    const parameters = JSON.parse(step.parameters?.toString());
     return {
       ...step,
       parameters,
     }
   } catch (err) {
     // highly likely that step does not have any parameters and thus, the error is thrown
-    return step;
+    return {
+      ...step,
+      parameters: {},
+    };
   }
 };
 
-const validateSubstep = (substep: any, step: Step, substepIndex: number, substepCount: number) => {
-  if (!substep) return true;
-
-  if (substepCount < substepIndex + 1) {
-    return null;
-  }
-
-  if (substep.name === 'Choose account') {
-    return Boolean(step.connection?.id);
-  }
-
-  const args: AppFields[] = substep.arguments || [];
-
-  return args.every(arg => {
-    if (arg.required === false) { return true; }
-
-    const argValue = step.parameters[arg.key];
-
-    return argValue !== null && argValue !== undefined;
-  });
-};
-
 export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
   const { collapsed, index, onChange } = props;
   const contextButtonRef = React.useRef<HTMLButtonElement  | null>(null);
-  const [step, setStep] = React.useState<Step>(() => parseStep(props.step));
+  const step: Step = React.useMemo(() => parseStep(props.step), [props.step]);
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement  | null>(null);
   const isTrigger = step.type === StepType.Trigger;
-  const isAction = step.type === StepType.Action;
-  const initialRender = React.useRef<boolean>(true);
   const formatMessage = useFormatMessage();
   const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
   const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
   const apps: App[] = data?.getApps;
   const app = apps?.find((currentApp: App) => currentApp.key === step.appKey);
 
-  // emit the step change to the parent component
-  React.useEffect(() => {
-    if (!initialRender.current) {
-      onChange?.(step);
-    } else {
-      initialRender.current = false;
-    }
-  }, [step, onChange]);
-
-  const appOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
   const actionsOrTriggers = isTrigger ? app?.triggers : app?.actions;
-  const actionOptions = React.useMemo(() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
   const substeps = React.useMemo(() => actionsOrTriggers?.find(({ key }) => key === step.key)?.subSteps || [], [actionsOrTriggers, step?.key]);
-  const substepCount = substeps.length + 1;
 
-  const expandNextStep = React.useCallback(() => { setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1); }, []);
+  const handleChange = React.useCallback(({ step }: { step: Step }) => {
+    onChange(step);
+  }, [])
 
-  const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
-    if (typeof selectedOption === 'object') {
-      const typedSelectedOption = selectedOption as { value: string; };
-      const option: { value: string } = typedSelectedOption;
-      const appKey = option?.value as string;
-      setStep((step) => ({ ...step, appKey, parameters: {} }));
-    }
-  }, []);
-
-  const onEventChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
-    if (typeof selectedOption === 'object') {
-      const typedSelectedOption = selectedOption as { value: string; };
-      const option: { value: string } = typedSelectedOption;
-      const eventKey = option?.value as string;
-      setStep((step) => ({
-        ...step,
-        key: eventKey,
-        parameters: {},
-      }));
-
-      expandNextStep();
-    }
-  }, []);
-
-  const onAccountChange = React.useCallback((connectionId: string) => {
-    setStep((step) => ({
-      ...step,
-      connection: {
-        id: connectionId,
-      },
-    }));
-
-    expandNextStep();
-  }, []);
-
-  const onParameterChange = React.useCallback((event: React.SyntheticEvent) => {
-    const { name, value } = event.target as HTMLInputElement;
-
-    setStep((step) => ({
-      ...step,
-      parameters: {
-        ...step.parameters,
-        [name]: value
-      }
-    }));
+  const expandNextStep = React.useCallback(() => {
+    setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);
   }, []);
 
   if  (!apps) return null;
@@ -201,78 +115,44 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
         </Stack>
       </Header>
 
-      <Collapse in={!collapsed}>
+      <Collapse in={!collapsed} unmountOnExit>
         <Content>
           <List>
-            <FlowSubstepTitle
+            <ChooseAppAndEventSubstep
               expanded={currentSubstep === 0}
-              onClick={() => toggleSubstep(0)}
-              title="Choose app & event"
-              valid={substepCount === 1 ? null : !!step.appKey && !!step.key}
+              substep={{ name: 'Choose app & event', arguments: [] }}
+              onExpand={() => toggleSubstep(0)}
+              onCollapse={() => toggleSubstep(0)}
+              onSubmit={expandNextStep}
+              onChange={handleChange}
+              step={step}
             />
-            <Collapse in={currentSubstep === 0} timeout="auto" unmountOnExit>
-              <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
-                <Autocomplete
-                  fullWidth
-                  disablePortal
-                  disableClearable
-                  options={appOptions}
-                  renderInput={(params) => <TextField {...params} label="Choose an app" />}
-                  value={getOption(appOptions, step.appKey)}
-                  onChange={onAppChange}
-                />
-
-                {step.appKey && (
-                  <Box display="flex" width="100%" pt={2} flexDirection="column">
-                    <Typography variant="subtitle2" pb={2} gutterBottom>
-                      Action event
-                    </Typography>
-
-                    <Autocomplete
-                      fullWidth
-                      disablePortal
-                      disableClearable
-                      options={actionOptions}
-                      renderInput={(params) => <TextField {...params} label="Choose an event" />}
-                      value={getOption(actionOptions, step.key)}
-                      onChange={onEventChange}
-                    />
-                  </Box>
-                )}
-              </ListItem>
-            </Collapse>
 
             <Form defaultValues={step.parameters}>
               {substeps?.length > 0 && substeps.map((substep: { name: string, arguments: AppFields[] }, index: number) => (
                 <React.Fragment key={`${substep?.name}-${index}`}>
-                  {validateSubstep(substeps[index - 1], step, index, substepCount) && (
-                    <React.Fragment>
-                      <FlowSubstepTitle
-                        expanded={currentSubstep === (index + 1)}
-                        onClick={() => toggleSubstep(index + 1)}
-                        title={substep.name}
-                        valid={validateSubstep(substep, step, index + 1, substepCount)}
-                      />
-                      <Collapse in={currentSubstep === (index + 1)} timeout="auto" unmountOnExit>
-                        <ListItem sx={{ pt: 2, pb: 3 }}>
-                          {substep.name === 'Choose account' && (
-                            <ChooseAccountSubstep
-                              appKey={step.appKey}
-                              connectionId={step.connection?.id as string}
-                              onChange={onAccountChange}
-                            />
-                          )}
+                  {substep.name === 'Choose account' && (
+                    <ChooseAccountSubstep
+                      expanded={currentSubstep === (index + 1)}
+                      substep={substep}
+                      onExpand={() => toggleSubstep((index + 1))}
+                      onCollapse={() => toggleSubstep((index + 1))}
+                      onSubmit={expandNextStep}
+                      onChange={handleChange}
+                      step={step}
+                    />
+                  )}
 
-                          {substep.name !== 'Choose account' && (
-                            <React.Fragment>
-                              {substep?.arguments?.map((argument: AppFields) => (
-                                <InputCreator key={argument?.key} schema={argument} onBlur={onParameterChange} />
-                              ))}
-                            </React.Fragment>
-                          )}
-                        </ListItem>
-                      </Collapse>
-                    </React.Fragment>
+                  {substep.name !== 'Choose account' && (
+                    <FlowSubstep
+                      expanded={currentSubstep === (index + 1)}
+                      substep={substep}
+                      onExpand={() => toggleSubstep((index + 1))}
+                      onCollapse={() => toggleSubstep((index + 1))}
+                      onSubmit={expandNextStep}
+                      onChange={handleChange}
+                      step={step}
+                    />
                   )}
                 </React.Fragment>
               ))}

packages/web/src/components/FlowSubstep/index.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Collapse from '@mui/material/Collapse';
+import ListItem from '@mui/material/ListItem';
+import Button from '@mui/material/Button';
+
+import FlowSubstepTitle from 'components/FlowSubstepTitle';
+import InputCreator from 'components/InputCreator';
+import type { Step, Substep } from 'types/step';
+import type { AppFields } from 'types/app';
+
+type FlowSubstepProps = {
+  substep: Substep,
+  expanded?: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  onChange: ({ step }: { step: Step }) => void;
+  onSubmit: () => void;
+  step: Step;
+};
+
+const validateSubstep = (substep: Substep, step: Step) => {
+  if (!substep) return true;
+
+  const args: AppFields[] = substep.arguments || [];
+
+  return args.every(arg => {
+    if (arg.required === false) { return true; }
+
+    const argValue = step.parameters[arg.key];
+
+    return argValue !== null && argValue !== undefined;
+  });
+};
+
+function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
+  const {
+    substep,
+    expanded = false,
+    onExpand,
+    onCollapse,
+    onChange,
+    onSubmit,
+    step,
+  } = props;
+
+  const {
+    name,
+    arguments: args,
+  } = substep;
+
+  const handleChangeOnBlur = React.useCallback((event: React.SyntheticEvent) => {
+    const { name, value: newValue } = event.target as HTMLInputElement;
+    const currentValue = step.parameters?.[name];
+
+    if (currentValue !== newValue) {
+      onChange({
+        step: {
+          ...step,
+          parameters: {
+            ...step.parameters,
+            [name]: newValue,
+          }
+        },
+      });
+    }
+  }, [step, onChange]);
+
+  const onToggle = expanded ? onCollapse : onExpand;
+  const valid = validateSubstep(substep, step);
+
+  return (
+    <React.Fragment>
+      <FlowSubstepTitle
+        expanded={expanded}
+        onClick={onToggle}
+        title={name}
+        valid={valid}
+      />
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
+          {substep.name !== 'Choose account' && (
+            <React.Fragment>
+              {args?.map((argument) => (
+                <InputCreator key={argument?.key} schema={argument} onBlur={handleChangeOnBlur} />
+              ))}
+            </React.Fragment>
+          )}
+
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={onSubmit}
+            sx={{ mt: 2 }}
+            disabled={!valid}
+          >
+            Continue
+          </Button>
+        </ListItem>
+      </Collapse>
+    </React.Fragment>
+  );
+};
+
+export default FlowSubstep;

packages/web/src/graphql/queries/get-flow.ts

@@ -13,6 +13,8 @@ export const GET_FLOW = gql`
         appKey
         connection {
           id
+          verified
+          createdAt
         }
         parameters
       }

packages/web/src/types/connection.ts

@@ -6,7 +6,7 @@ type Connection = {
   id: string;
   key: string;
   data: ConnectionData;
-  verified: boolean;
+  verified?: boolean;
   createdAt: string;
 };
 

packages/web/src/types/step.ts

@@ -1,3 +1,6 @@
+import type { AppFields } from './app';
+import type { Connection } from './connection';
+
 export enum StepType {
   Trigger = 'trigger',
   Action = 'action',
@@ -5,13 +8,16 @@ export enum StepType {
 
 export type Step = {
   id: string;
-  key: string;
+  key: string | null;
   name: string;
-  appKey: string;
+  appKey: string | null;
   type: StepType;
   previousStepId: string | null;
   parameters: Record<string, unknown>;
-  connection: {
-    id: string;
-  };
+  connection: Pick<Connection, 'id' | 'verified'>;
+};
+
+export type Substep = {
+  name: string;
+  arguments: AppFields[];
 };