feat(Editor): show webhook info in test substep

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;