diff --git a/packages/backend/src/apps/scheduler/info.json b/packages/backend/src/apps/scheduler/info.json index ea0cdbbf..d00807d5 100644 --- a/packages/backend/src/apps/scheduler/info.json +++ b/packages/backend/src/apps/scheduler/info.json @@ -3,6 +3,7 @@ "key": "scheduler", "iconUrl": "{BASE_URL}/apps/scheduler/assets/favicon.svg", "docUrl": "https://automatisch.io/docs/scheduler", + "authDocUrl": "https://automatisch.io/docs/connections/scheduler", "primaryColor": "0059F7", "supportsConnections": false, "requiresAuthentication": false, diff --git a/packages/backend/src/apps/slack/info.json b/packages/backend/src/apps/slack/info.json index d2ccc565..fbba4e74 100644 --- a/packages/backend/src/apps/slack/info.json +++ b/packages/backend/src/apps/slack/info.json @@ -3,6 +3,7 @@ "key": "slack", "iconUrl": "{BASE_URL}/apps/slack/assets/favicon.svg", "docUrl": "https://automatisch.io/docs/slack", + "authDocUrl": "https://automatisch.io/docs/connections/slack", "primaryColor": "2DAAE1", "supportsConnections": true, "fields": [ @@ -15,7 +16,6 @@ "value": null, "placeholder": null, "description": "Access token of slack that Automatisch will connect to.", - "docUrl": "https://automatisch.io/docs/slack#access-token", "clickToCopy": false } ], diff --git a/packages/backend/src/apps/twitter/info.json b/packages/backend/src/apps/twitter/info.json index da657121..f8b3a20d 100644 --- a/packages/backend/src/apps/twitter/info.json +++ b/packages/backend/src/apps/twitter/info.json @@ -3,6 +3,7 @@ "key": "twitter", "iconUrl": "{BASE_URL}/apps/twitter/assets/favicon.svg", "docUrl": "https://automatisch.io/docs/twitter", + "authDocUrl": "https://automatisch.io/docs/connections/twitter", "primaryColor": "2DAAE1", "supportsConnections": true, "fields": [ @@ -15,7 +16,6 @@ "value": "{WEB_APP_URL}/app/twitter/connections/add", "placeholder": null, "description": "When asked to input an OAuth callback or redirect URL in Twitter OAuth, enter the URL above.", - "docUrl": "https://automatisch.io/docs/twitter#oauth-redirect-url", "clickToCopy": true }, { @@ -27,7 +27,6 @@ "value": null, "placeholder": null, "description": null, - "docUrl": "https://automatisch.io/docs/twitter#consumer-key", "clickToCopy": false }, { @@ -39,7 +38,6 @@ "value": null, "placeholder": null, "description": null, - "docUrl": "https://automatisch.io/docs/twitter#consumer-secret", "clickToCopy": false } ], diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index d26c9bf9..7d9d22ad 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -101,6 +101,7 @@ type App { flowCount: Int iconUrl: String docUrl: String + authDocUrl: String primaryColor: String supportsConnections: Boolean fields: [Field] diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts index 3dd82317..cac3c3a7 100644 --- a/packages/types/index.d.ts +++ b/packages/types/index.d.ts @@ -150,6 +150,7 @@ export interface IApp { key: string; iconUrl: string; docUrl: string; + authDocUrl: string; primaryColor: string; supportsConnections: boolean; fields: IField[]; diff --git a/packages/web/src/components/AddAppConnection/index.tsx b/packages/web/src/components/AddAppConnection/index.tsx index d1c97966..ddbf5359 100644 --- a/packages/web/src/components/AddAppConnection/index.tsx +++ b/packages/web/src/components/AddAppConnection/index.tsx @@ -14,6 +14,10 @@ import InputCreator from 'components/InputCreator'; import type { IApp, IField } from '@automatisch/types'; import { Form } from './style'; +const generateDocsLink = (link: string) => (str: string) => ( + {str} +); + type AddAppConnectionProps = { onClose: () => void; application: IApp; @@ -26,7 +30,7 @@ type Response = { export default function AddAppConnection(props: AddAppConnectionProps): React.ReactElement { const { application, connectionId, onClose } = props; - const { key, fields, authenticationSteps, reconnectionSteps } = application; + const { name, authDocUrl, key, fields, authenticationSteps, reconnectionSteps } = application; const formatMessage = useFormatMessage(); const [errorMessage, setErrorMessage] = React.useState(null); const [inProgress, setInProgress] = React.useState(false); @@ -82,8 +86,18 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re {hasConnection ? formatMessage('app.reconnectConnection') : formatMessage('app.addConnection')} + + {formatMessage( + 'addAppConnection.callToDocs', + { + appName: name, + docsLink: generateDocsLink(authDocUrl) + } + )} + + {errorMessage && ( - + {errorMessage} )} diff --git a/packages/web/src/graphql/queries/get-app.ts b/packages/web/src/graphql/queries/get-app.ts index 97f835e1..5e043daa 100644 --- a/packages/web/src/graphql/queries/get-app.ts +++ b/packages/web/src/graphql/queries/get-app.ts @@ -7,6 +7,7 @@ export const GET_APP = gql` key iconUrl docUrl + authDocUrl primaryColor supportsConnections fields { diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index df6d07f1..801306dc 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -27,6 +27,7 @@ "apps.searchApp": "Search for app", "apps.noConnections": "You don't have any connections yet.", "addAppConnection.submit": "Submit", + "addAppConnection.callToDocs": "Visit our documentation to see how to add connection for {appName}.", "connection.flowCount": "{count} flows", "connection.viewFlows": "View flows", "connection.testConnection": "Test connection",