feat(Editor): show webhook info in test substep

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

@@ -6,22 +6,15 @@ import DialogContentText from '@mui/material/DialogContentText';
 import Dialog from '@mui/material/Dialog';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { FieldValues, SubmitHandler } from 'react-hook-form';
-import { IJSONObject } from '@automatisch/types';
+import type { IApp, IJSONObject, IField } from '@automatisch/types';
 
 import useFormatMessage from 'hooks/useFormatMessage';
 import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
 import { processStep } from 'helpers/authenticationSteps';
 import InputCreator from 'components/InputCreator';
-import type { IApp, IField } from '@automatisch/types';
+import { generateExternalLink } from '../../helpers/translation-values';
 import { Form } from './style';
 
-const generateDocsLink = (link: string) => (str: string) =>
-  (
-    <a href={link} target="_blank">
-      {str}
-    </a>
-  );
-
 type AddAppConnectionProps = {
   onClose: (response: Record<string, unknown>) => void;
   application: IApp;
@@ -112,7 +105,7 @@ export default function AddAppConnection(
         <Alert severity="info" sx={{ fontWeight: 300 }}>
           {formatMessage('addAppConnection.callToDocs', {
             appName: name,
-            docsLink: generateDocsLink(authDocUrl),
+            docsLink: generateExternalLink(authDocUrl),
           })}
         </Alert>
       )}

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

@@ -9,8 +9,9 @@ import LoadingButton from '@mui/lab/LoadingButton';
 
 import { EditorContext } from 'contexts/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
-import JSONViewer from 'components/JSONViewer';
 import { EXECUTE_FLOW } from 'graphql/mutations/execute-flow';
+import JSONViewer from 'components/JSONViewer';
+import WebhookUrlInfo from 'components/WebhookUrlInfo';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import type { IStep, ISubstep } from '@automatisch/types';
 
@@ -115,6 +116,8 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
             </Alert>
           )}
 
+          {step.webhookUrl && <WebhookUrlInfo webhookUrl={step.webhookUrl} />}
+
           {hasNoOutput && (
             <Alert severity="warning" sx={{ mb: 1, width: '100%' }}>
               <AlertTitle sx={{ fontWeight: 700 }}>

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Typography from '@mui/material/Typography';
+
+import { generateExternalLink } from '../../helpers/translation-values';
+import { WEBHOOK_DOCS } from '../../config/urls';
+import TextField from '../TextField';
+import { Alert } from './style';
+
+type WebhookUrlInfoProps = {
+  webhookUrl: string;
+};
+
+function WebhookUrlInfo(props: WebhookUrlInfoProps): React.ReactElement {
+  const { webhookUrl } = props;
+
+  return (
+    <Alert icon={false} color="info">
+      <Typography variant="body2" textAlign="center">
+        <FormattedMessage id="webhookUrlInfo.title" />
+      </Typography>
+
+      <Typography variant="body1" textAlign="center">
+        <FormattedMessage id="webhookUrlInfo.description" />
+      </Typography>
+
+      <TextField
+        readOnly
+        clickToCopy={true}
+        name="webhookUrl"
+        fullWidth
+        defaultValue={webhookUrl}
+        helperText={
+          <FormattedMessage
+            id="webhookUrlInfo.helperText"
+            values={{ link: generateExternalLink(WEBHOOK_DOCS) }}
+          />
+        }
+      />
+    </Alert>
+  );
+}
+
+export default WebhookUrlInfo;

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

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import MuiAlert, { alertClasses } from '@mui/material/Alert';
+
+export const Alert = styled(MuiAlert)(({ theme }) => ({
+  [`&.${alertClasses.root}`]: {
+    fontWeight: 300,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  [`& .${alertClasses.message}`]: {
+    width: '100%'
+  }
+}));

packages/web/src/config/urls.ts

@@ -65,3 +65,6 @@ export const UPDATES = '/updates';
 export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`;
 
 export const DASHBOARD = FLOWS;
+
+// External links
+export const WEBHOOK_DOCS = 'https://automatisch.io/docs'

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

@@ -11,6 +11,8 @@ export const GET_FLOW = gql`
         type
         key
         appKey
+        iconUrl
+        webhookUrl
         status
         position
         connection {

packages/web/src/helpers/translation-values.tsx

@@ -0,0 +1,6 @@
+export const generateExternalLink = (link: string) => (str: string) =>
+  (
+    <a href={link} target="_blank">
+      {str}
+    </a>
+  );

packages/web/src/locales/en.json

@@ -87,5 +87,9 @@
   "profileSettings.updatedPassword": "Your password has been updated.",
   "profileSettings.updatePassword": "Update password",
   "notifications.title": "Notifications",
-  "notification.releasedAt": "Released {relativeDate}"
+  "notification.releasedAt": "Released {relativeDate}",
+  "webhookUrlInfo.title": "Your webhook URL",
+  "webhookUrlInfo.description": "You'll need to configure your application with this webhook URL.",
+  "webhookUrlInfo.helperText": "We've generated a custom webhook URL for you to send requests to. <link>Learn more about webhooks</link>.",
+  "webhookUrlInfo.copy": "Copy"
 }