Merge pull request #789 from automatisch/issue-760

feat: show "instant" chip for webhook triggers

packages/backend/src/graphql/schema.graphql

@@ -381,6 +381,7 @@ type Trigger {
   key: String
   description: String
   pollInterval: Int
+  type: String
   substeps: [TriggerSubstep]
 }
 

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

@@ -7,6 +7,7 @@ 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 Chip from '@mui/material/Chip';
 
 import useFormatMessage from 'hooks/useFormatMessage';
 import { EditorContext } from 'contexts/Editor';
@@ -38,8 +39,20 @@ const optionGenerator = (app: {
   value: app.key as string,
 });
 
-const getOption = (options: Record<string, unknown>[], appKey?: IApp['key']) =>
+const eventOptionGenerator = (app: {
-  options.find((option) => option.value === (appKey as string)) || null;
+  name: string;
+  key: string;
+  type?: string;
+}): { label: string; value: string; type: string } => ({
+  label: app.name as string,
+  value: app.key as string,
+  type: app?.type as string,
+});
+
+const getOption = <T extends { value: string }>(
+  options: T[],
+  selectedOptionValue?: string
+) => options.find((option) => option.value === selectedOptionValue);
 
 function ChooseAppAndEventSubstep(
   props: ChooseAppAndEventSubstepProps
@@ -72,14 +85,17 @@ function ChooseAppAndEventSubstep(
   );
   const actionsOrTriggers: Array<ITrigger | IAction> =
     (isTrigger ? app?.triggers : app?.actions) || [];
-  const actionOptions = React.useMemo(
+  const actionOrTriggerOptions = React.useMemo(
-    () => actionsOrTriggers.map((trigger) => optionGenerator(trigger)),
+    () => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),
     [app?.key]
   );
   const selectedActionOrTrigger = actionsOrTriggers.find(
     (actionOrTrigger: IAction | ITrigger) => actionOrTrigger.key === step?.key
   );
 
+  const isWebhook =
+    isTrigger && (selectedActionOrTrigger as ITrigger).type === 'webhook';
+
   const { name } = substep;
 
   const valid: boolean = !!step.key && !!step.appKey;
@@ -177,14 +193,49 @@ function ChooseAppAndEventSubstep(
                 disablePortal
                 disableClearable
                 disabled={editorContext.readOnly}
-                options={actionOptions}
+                options={actionOrTriggerOptions}
                 renderInput={(params) => (
                   <TextField
                     {...params}
                     label={formatMessage('flowEditor.chooseEvent')}
+                    InputProps={{
+                      ...params.InputProps,
+                      endAdornment: (
+                        <React.Fragment>
+                          {isWebhook && (
+                            <Chip
+                              label={formatMessage(
+                                'flowEditor.instantTriggerType'
+                              )}
+                            />
+                          )}
+
+                          {params.InputProps.endAdornment}
+                        </React.Fragment>
+                      ),
+                    }}
                   />
                 )}
-                value={getOption(actionOptions, step.key)}
+                renderOption={(optionProps, option) => (
+                  <li
+                    {...optionProps}
+                    key={option.value.toString()}
+                    style={{
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Typography>{option.label}</Typography>
+
+                    {option.type === 'webhook' && (
+                      <Chip
+                        label={formatMessage('flowEditor.instantTriggerType')}
+                        sx={{ mr: 3 }}
+                      />
+                    )}
+                  </li>
+                )}
+                value={getOption(actionOrTriggerOptions, step.key)}
                 onChange={onEventChange}
                 data-test="choose-event-autocomplete"
               />

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

@@ -59,6 +59,7 @@ export const GET_APP = gql`
       triggers {
         name
         key
+        type
         pollInterval
         description
         substeps {

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

@@ -66,6 +66,7 @@ export const GET_APPS = gql`
       triggers {
         name
         key
+        type
         pollInterval
         description
         substeps {

packages/web/src/locales/en.json

@@ -57,6 +57,7 @@
   "flowEditor.pollIntervalValue": "Every {minutes} minutes",
   "flowEditor.triggerEvent": "Trigger event",
   "flowEditor.actionEvent": "Action event",
+  "flowEditor.instantTriggerType": "Instant",
   "chooseConnectionSubstep.continue": "Continue",
   "chooseConnectionSubstep.addNewConnection": "Add new connection",
   "chooseConnectionSubstep.chooseConnection": "Choose connection",