Merge pull request #504 from automatisch/issue-498

feat: show CTA for connecting to services

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,

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
     }
   ],

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
     }
   ],

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]

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[];

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) => (
+  <a href={link} target="_blank">{str}</a>
+);
+
 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<string | null>(null);
   const [inProgress, setInProgress] = React.useState(false);
@@ -82,8 +86,18 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
     <Dialog open={true} onClose={onClose}>
       <DialogTitle>{hasConnection ? formatMessage('app.reconnectConnection') : formatMessage('app.addConnection')}</DialogTitle>
 
+      <Alert severity="info" sx={{ fontWeight: 300 }}>
+        {formatMessage(
+          'addAppConnection.callToDocs',
+          {
+            appName: name,
+            docsLink: generateDocsLink(authDocUrl)
+          }
+        )}
+      </Alert>
+
       {errorMessage && (
-        <Alert severity="error" sx={{ mb: 1, fontWeight: 500 }}>
+        <Alert severity="error" sx={{ mt: 1, fontWeight: 500 }}>
           {errorMessage}
         </Alert>
       )}

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

@@ -7,6 +7,7 @@ export const GET_APP = gql`
       key
       iconUrl
       docUrl
+      authDocUrl
       primaryColor
       supportsConnections
       fields {

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 <docsLink>our documentation</docsLink> to see how to add connection for {appName}.",
   "connection.flowCount": "{count} flows",
   "connection.viewFlows": "View flows",
   "connection.testConnection": "Test connection",