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