diff --git a/packages/web/src/components/AddAppConnection/index.tsx b/packages/web/src/components/AddAppConnection/index.tsx
index 7b54e0fe..38ba620b 100644
--- a/packages/web/src/components/AddAppConnection/index.tsx
+++ b/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) =>
- (
-
- {str}
-
- );
-
type AddAppConnectionProps = {
onClose: (response: Record) => void;
application: IApp;
@@ -112,7 +105,7 @@ export default function AddAppConnection(
{formatMessage('addAppConnection.callToDocs', {
appName: name,
- docsLink: generateDocsLink(authDocUrl),
+ docsLink: generateExternalLink(authDocUrl),
})}
)}
diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx
index f2b895c3..09a5f0c7 100644
--- a/packages/web/src/components/TestSubstep/index.tsx
+++ b/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 {
)}
+ {step.webhookUrl && }
+
{hasNoOutput && (
diff --git a/packages/web/src/components/WebhookUrlInfo/index.tsx b/packages/web/src/components/WebhookUrlInfo/index.tsx
new file mode 100644
index 00000000..cc5ca10d
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+ );
+}
+
+export default WebhookUrlInfo;
diff --git a/packages/web/src/components/WebhookUrlInfo/style.ts b/packages/web/src/components/WebhookUrlInfo/style.ts
new file mode 100644
index 00000000..b74a3834
--- /dev/null
+++ b/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%'
+ }
+}));
diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts
index 27214fe0..5f0830f0 100644
--- a/packages/web/src/config/urls.ts
+++ b/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'
diff --git a/packages/web/src/graphql/queries/get-flow.ts b/packages/web/src/graphql/queries/get-flow.ts
index 34345984..f3e86446 100644
--- a/packages/web/src/graphql/queries/get-flow.ts
+++ b/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 {
diff --git a/packages/web/src/helpers/translation-values.tsx b/packages/web/src/helpers/translation-values.tsx
new file mode 100644
index 00000000..86e84ce5
--- /dev/null
+++ b/packages/web/src/helpers/translation-values.tsx
@@ -0,0 +1,6 @@
+export const generateExternalLink = (link: string) => (str: string) =>
+ (
+
+ {str}
+
+ );
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 4d79ee2b..1732120f 100644
--- a/packages/web/src/locales/en.json
+++ b/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. Learn more about webhooks.",
+ "webhookUrlInfo.copy": "Copy"
}
\ No newline at end of file