feat: introduce choose account substep in flow editor

packages/backend/src/models/connection.ts

@@ -20,10 +20,10 @@ class Connection extends Base {
     required: ['key', 'data'],
 
     properties: {
-      id: { type: 'integer' },
+      id: { type: 'string' },
       key: { type: 'string', minLength: 1, maxLength: 255 },
       data: { type: 'object' },
-      userId: { type: 'integer' },
+      userId: { type: 'string' },
       verified: { type: 'boolean' },
     },
   };

packages/backend/src/models/step.ts

@@ -13,7 +13,7 @@ class Step extends Base {
   key: string;
   appKey: string;
   type!: StepEnumType;
-  connectionId: number;
+  connectionId: string;
   position: number;
   parameters: string;
   connection?: Connection;
@@ -31,7 +31,7 @@ class Step extends Base {
       key: { type: ['string', null] },
       appKey: { type: ['string', null], minLength: 1, maxLength: 255 },
       type: { type: 'string', enum: ['action', 'trigger'] },
-      connectionId: { type: ['integer', null] },
+      connectionId: { type: ['string', null] },
       position: { type: 'integer' },
       parameters: { type: ['string', null] },
     },

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useQuery } from '@apollo/client';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+import type { App, AppConnection } from 'types/app';
+import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
+
+type ChooseAccountSubstepProps = {
+  appKey: string;
+  connectionId: string;
+  onChange: (connectionId: string) => void;
+};
+
+const optionGenerator = (connection: AppConnection): { label: string; value: string; } => ({
+  label: connection?.data?.screenName as string,
+  value: connection?.id as string,
+});
+
+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 { data, loading } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey }});
+
+  const app: App = data?.getApp;
+  const connections = app?.connections || [];
+
+  const connectionOptions = React.useMemo(() => connections.map((connection) => optionGenerator(connection)), [connections]);
+
+  const handleChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
+    if (typeof selectedOption === 'object') {
+      const typedSelectedOption = selectedOption as { value: string };
+      const value = typedSelectedOption.value;
+
+      onChange(value);
+    }
+  }, [onChange]);
+
+  return (
+    <Autocomplete
+      fullWidth
+      disablePortal
+      options={connectionOptions}
+      renderInput={(params) => <TextField {...params} label="Choose account" />}
+      value={getOption(connectionOptions, connectionId)}
+      onChange={handleChange}
+      loading={loading}
+    />
+  );
+}
+
+export default ChooseAccountSubstep;

packages/web/src/components/FlowRow/style.ts

@@ -12,9 +12,6 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 
 
 export const Typography = styled(MuiTypography)(() => ({
-  '&.MuiTypography-h6': {
-    textTransform: 'capitalize',
-  },
   display: 'inline-block',
   width: 500,
   maxWidth: '70%',

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

@@ -13,6 +13,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import IconButton from '@mui/material/IconButton';
 
+import ChooseAccountSubstep from 'components/ChooseAccountSubstep';
 import Form from 'components/Form';
 import InputCreator from 'components/InputCreator';
 import FlowStepContextMenu from 'components/FlowStepContextMenu';
@@ -38,7 +39,7 @@ const optionGenerator = (app: Record<string, unknown>): { label: string; value:
   value: app.key as string,
 });
 
-const getOption = (options: Record<string, unknown>[], appKey: unknown) => options.find(app => app.value === appKey as string);
+const getOption = (options: Record<string, unknown>[], appKey: unknown) => options.find(app => app.value === appKey as string) || null;
 
 const parseStep = (step: any) => {
   try {
@@ -76,7 +77,7 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
     }
   }, [step, onChange]);
 
-  const appAndEventOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
+  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]);
@@ -103,6 +104,15 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
     }
   }, []);
 
+  const onAccountChange = React.useCallback((connectionId: string) => {
+    setStep((step) => ({
+      ...step,
+      connection: {
+        id: connectionId,
+      },
+    }));
+  }, []);
+
   const onParameterChange = React.useCallback((event: React.SyntheticEvent) => {
     const { name, value } = event.target as HTMLInputElement;
 
@@ -172,9 +182,9 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
                 <Autocomplete
                   fullWidth
                   disablePortal
-                  options={appAndEventOptions}
+                  options={appOptions}
-                  renderInput={(params) => <TextField {...params} label="Choose app" />}
+                  renderInput={(params) => <TextField {...params} label="Choose an app" />}
-                  value={getOption(appAndEventOptions, step.appKey)}
+                  value={getOption(appOptions, step.appKey)}
                   onChange={onAppChange}
                 />
 
@@ -207,9 +217,21 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
                   </ListItemButton>
                   <Collapse in={currentSubstep === (index + 1)} timeout="auto" unmountOnExit>
                     <ListItem sx={{ pt: 2 }}>
-                      {substep?.arguments?.map((argument: AppFields) => (
+                      {substep.name === 'Choose account' && (
-                        <InputCreator key={argument?.key} schema={argument} onBlur={onParameterChange} />
+                        <ChooseAccountSubstep
-                      ))}
+                          appKey={step.appKey}
+                          connectionId={step.connection?.id as string}
+                          onChange={onAccountChange}
+                        />
+                      )}
+
+                      {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>

packages/web/src/types/app.ts

@@ -11,6 +11,16 @@ type AppFields = {
   clickToCopy: boolean,
 };
 
+type AppConnection = {
+  id: string;
+  key: string;
+  verified: boolean;
+  createdAt: string;
+  data: {
+    [key: string]: any;
+  };
+};
+
 type App = {
   key: string;
   name: string;
@@ -23,6 +33,7 @@ type App = {
   reconnectionSteps: any[];
   triggers: any[];
   actions: any[];
+  connections: AppConnection[];
 };
 
-export type { App, AppFields };
+export type { App, AppFields, AppConnection };