feat: introduce action event step in flow step

packages/backend/src/apps/twitter/info.json

@@ -229,9 +229,6 @@
       "key": "myTweet",
       "description": "Will be triggered when you tweet something new.",
       "subSteps": [
-        {
-          "name": "Choose app & event"
-        },
         {
           "name": "Choose account"
         },
@@ -245,9 +242,6 @@
       "key": "userTweet",
       "description": "Will be triggered when a specific user tweet something new.",
       "subSteps": [
-        {
-          "name": "Choose app & event"
-        },
         {
           "name": "Choose account"
         },
@@ -273,9 +267,6 @@
       "key": "createTweet",
       "description": "Will create a tweet.",
       "subSteps": [
-        {
-          "name": "Choose app & event"
-        },
         {
           "name": "Choose account"
         },

packages/backend/src/graphql/mutations/update-step.ts

@@ -7,15 +7,16 @@ import RequestWithCurrentUser from '../../types/express/request-with-current-use
 
 type Params = {
   input: {
-    id: number,
+    id: number;
-    key: string,
+    key: string;
-    appKey: string,
+    appKey: string;
+    parameters: string;
     flow: {
-      id: number,
+      id: number;
-    },
+    };
     connection: {
-      id: number
+      id: number;
-    },
+    };
   }
 }
 const updateStepResolver = async (params: Params, req: RequestWithCurrentUser) => {
@@ -35,6 +36,7 @@ const updateStepResolver = async (params: Params, req: RequestWithCurrentUser) =
     key: input.key,
     appKey: input.appKey,
     connectionId: input.connection.id,
+    parameters: input.parameters,
   });
 
   return step;

packages/backend/src/graphql/types/step.ts

@@ -23,6 +23,7 @@ const stepType = new GraphQLObjectType({
         },
       }),
     },
+    parameters: { type: GraphQLString },
     connection: { type: ConnectionType },
     position: { type: GraphQLInt },
   },
@@ -51,6 +52,7 @@ export const stepInputType = new GraphQLInputObjectType({
         },
       }),
     },
+    parameters: { type: GraphQLString },
     previousStep: {
       type: new GraphQLInputObjectType({
         name: 'PreviousStepInput',

packages/backend/src/models/step.ts

@@ -15,7 +15,7 @@ class Step extends Base {
   type!: StepEnumType;
   connectionId: number;
   position: number;
-  parameters: any;
+  parameters: string;
 
   static tableName = 'steps';
 
@@ -31,7 +31,7 @@ class Step extends Base {
       type: { type: 'string', enum: ['action', 'trigger'] },
       connectionId: { type: ['integer', null] },
       position: { type: 'integer' },
-      parameters: { type: ['object', null] },
+      parameters: { type: ['string', null] },
     },
   };
 

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

@@ -53,6 +53,7 @@ export default function Editor(props: EditorProps): React.ReactElement {
     const mutationInput: Record<string, unknown> = {
       id: step.id,
       key: step.key,
+      parameters: JSON.stringify(step.parameters, null, 2),
       connection: {
         id: step.connection?.id
       },

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
@@ -14,6 +14,7 @@ import Editor from 'components/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import type { Flow } from 'types/flow';
+import * as URLS from 'config/urls';
 
 export default function EditorLayout(): React.ReactElement {
   const { flowId } = useParams();
@@ -26,7 +27,11 @@ export default function EditorLayout(): React.ReactElement {
       <Stack direction="column" height="100%">
         <Stack direction="row" bgcolor="white" justifyContent="space-between" alignItems="center" boxShadow={1} py={1} px={1}>
           <Box display="flex" flex={1} alignItems="center">
-            <IconButton size="small">
+            <IconButton
+              size="small"
+              component={Link}
+              to={URLS.APPS}
+            >
               <ArrowBackIosNewIcon fontSize="small" />
             </IconButton>
 

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

@@ -27,21 +27,37 @@ type FlowStepProps = {
   onChange?: (step: Step) => void;
 }
 
-const optionGenerator = (app: App): { label: string; value: string; } => ({
+const optionGenerator = (app: Record<string, unknown>): { label: string; value: string; } => ({
-  label: app.name,
+  label: app.name as string,
-  value: app.key,
+  value: app.key as string,
 });
 
-const getOption = (options: Record<string, unknown>[], appKey: string) => options.find(app => app.value === appKey);
+const getOption = (options: Record<string, unknown>[], appKey: unknown) => options.find(app => app.value === appKey as string);
+
+const parseStep = (step: any) => {
+  try {
+    const parameters = JSON.parse(step.parameters);
+    return {
+      ...step,
+      parameters,
+    }
+  } catch (err) {
+    // highly likely that step does not have any parameters and thus, the error is thrown
+    return step;
+  }
+};
 
 export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
   const { collapsed, index, onChange } = props;
-  const [step, setStep] = React.useState<Step>(props.step);
+  const [step, setStep] = React.useState<Step>(() => parseStep(props.step));
+  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)
   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(() => {
@@ -52,21 +68,35 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
     }
   }, [step, onChange]);
 
-  const appAndEventOptions = React.useMemo(() => apps?.map(optionGenerator), [apps]);
+  const appAndEventOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
+  const actionOptions = React.useMemo(() => app?.triggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
 
-  const onAppAndEventChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
+  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 }));
+      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,
+        parameters: {
+          ...step.parameters,
+          eventKey,
+        }
+      }));
     }
   }, []);
 
   if  (!apps) return null;
 
-  const app = apps.find((currentApp: App) => currentApp.key === step.appKey);
-
   const onOpen = () => collapsed && props.onOpen?.();
   const onClose = () => props.onClose?.();
 
@@ -81,7 +111,7 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
           <div>
             <Typography variant="caption">
               {
-                step.type === StepType.Trigger ?
+                isTrigger ?
                   formatMessage('flowStep.triggerType') :
                   formatMessage('flowStep.actionType')
               }
@@ -110,7 +140,25 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
                     sx={{ width: 300 }}
                     renderInput={(params) => <TextField {...params} label="Choose app & event" />}
                     value={getOption(appAndEventOptions, step.appKey)}
-                    onChange={onAppAndEventChange}
+                    onChange={onAppChange}
+                  />
+                </ListItem>
+              </Collapse>
+
+
+              <ListItemButton onClick={() => toggleSubstep(1)}>
+                Action event
+              </ListItemButton>
+              <Collapse in={currentSubstep === 1} timeout="auto" unmountOnExit>
+                <ListItem sx={{ pt: 2 }}>
+                  <Autocomplete
+                    disablePortal
+                    id="combo-box-demo"
+                    options={actionOptions}
+                    sx={{ width: 300 }}
+                    renderInput={(params) => <TextField {...params} label="Choose app & event" />}
+                    value={getOption(actionOptions, step?.parameters?.eventKey)}
+                    onChange={onEventChange}
                   />
                 </ListItem>
               </Collapse>

packages/web/src/config/urls.ts

@@ -20,5 +20,6 @@ export const CREATE_FLOW = '/editor/create';
 export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`;
 
 export const FLOWS = '/flows';
-export const FLOW = (flowId: string): string => `/flows/${flowId}`;
+// TODO: revert this back to /flows/:flowId once we have a proper single flow page
+export const FLOW = (flowId: string): string => `/editor/${flowId}`;
 export const FLOW_PATTERN = '/flows/:flowId';

packages/web/src/graphql/mutations/update-step.ts

@@ -7,6 +7,7 @@ export const UPDATE_STEP = gql`
       type
       key
       appKey
+      parameters
       connection {
         id
       }

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

@@ -14,6 +14,7 @@ export const GET_FLOW = gql`
         connection {
           id
         }
+        parameters
       }
     }
   }

packages/web/src/types/step.ts

@@ -10,6 +10,7 @@ export type Step = {
   appKey: string;
   type: StepType;
   previousStepId: number | null;
+  parameters: Record<string, unknown>;
   connection: {
     id: number;
   };