From 9cde6620921188a7a70b6b98319e6ee954073aa7 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Sat, 10 Dec 2022 16:38:25 +0100
Subject: [PATCH 1/2] feat(grapql-schema): add type property in Trigger

---
 packages/backend/src/graphql/schema.graphql | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql
index 3f9714a3..a33d6f06 100644
--- a/packages/backend/src/graphql/schema.graphql
+++ b/packages/backend/src/graphql/schema.graphql
@@ -381,6 +381,7 @@ type Trigger {
   key: String
   description: String
   pollInterval: Int
+  type: String
   substeps: [TriggerSubstep]
 }
 

From e77580dd35f7e3c1736509ecbd6f46fcd2e16397 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Sat, 10 Dec 2022 16:39:10 +0100
Subject: [PATCH 2/2] feat: show "instant" chip for webhook triggers

---
 .../ChooseAppAndEventSubstep/index.tsx        | 63 +++++++++++++++++--
 packages/web/src/graphql/queries/get-app.ts   |  1 +
 packages/web/src/graphql/queries/get-apps.ts  |  1 +
 packages/web/src/locales/en.json              |  1 +
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
index fc964bbc..080fb7ef 100644
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
+++ b/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']) =>
-  options.find((option) => option.value === (appKey as string)) || null;
+const eventOptionGenerator = (app: {
+  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(
-    () => actionsOrTriggers.map((trigger) => optionGenerator(trigger)),
+  const actionOrTriggerOptions = React.useMemo(
+    () => 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"
               />
diff --git a/packages/web/src/graphql/queries/get-app.ts b/packages/web/src/graphql/queries/get-app.ts
index b0f49df5..f9009c75 100644
--- a/packages/web/src/graphql/queries/get-app.ts
+++ b/packages/web/src/graphql/queries/get-app.ts
@@ -59,6 +59,7 @@ export const GET_APP = gql`
       triggers {
         name
         key
+        type
         pollInterval
         description
         substeps {
diff --git a/packages/web/src/graphql/queries/get-apps.ts b/packages/web/src/graphql/queries/get-apps.ts
index e643845e..c6d19682 100644
--- a/packages/web/src/graphql/queries/get-apps.ts
+++ b/packages/web/src/graphql/queries/get-apps.ts
@@ -66,6 +66,7 @@ export const GET_APPS = gql`
       triggers {
         name
         key
+        type
         pollInterval
         description
         substeps {
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 1732120f..4512cfbf 100644
--- a/packages/web/src/locales/en.json
+++ b/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",