feat: use dynamic DOCS URL

packages/backend/src/controllers/api/v1/automatisch/info.js

@@ -7,6 +7,7 @@ export default async (request, response) => {
     isCloud: appConfig.isCloud,
     isMation: appConfig.isMation,
     isEnterprise: await hasValidLicense(),
+    docsUrl: appConfig.docsUrl,
   };
 
   renderObject(response, info);

packages/backend/src/controllers/api/v1/automatisch/info.test.js

@@ -10,6 +10,7 @@ describe('GET /api/v1/automatisch/info', () => {
     vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(false);
     vi.spyOn(appConfig, 'isMation', 'get').mockReturnValue(false);
     vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
+    vi.spyOn(appConfig, 'docsUrl', 'get').mockReturnValue('https://automatisch.io/docs');
 
     const response = await request(app)
       .get('/api/v1/automatisch/info')

packages/backend/test/mocks/rest/api/v1/automatisch/info.js

@@ -4,6 +4,7 @@ const infoMock = () => {
       isCloud: false,
       isMation: false,
       isEnterprise: true,
+      docsUrl: 'https://automatisch.io/docs',
     },
     meta: {
       count: 1,

packages/web/src/components/WebhookUrlInfo/index.jsx

@@ -2,13 +2,16 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Typography from '@mui/material/Typography';
-import { generateExternalLink } from '../../helpers/translationValues';
+import { generateExternalLink } from 'helpers/translationValues';
-import { WEBHOOK_DOCS } from '../../config/urls';
+import { WEBHOOK_DOCS_PATH } from 'config/urls';
-import TextField from '../TextField';
+import TextField from 'components/TextField';
+import useDocsUrl from 'hooks/useDocsUrl';
 import { Alert } from './style';
 
 function WebhookUrlInfo(props) {
   const { webhookUrl, ...alertProps } = props;
+  const webhookDocsUrl = useDocsUrl(WEBHOOK_DOCS_PATH);
+
   return (
     <Alert icon={false} color="info" {...alertProps}>
       <Typography variant="body2" textAlign="center">
@@ -28,7 +31,7 @@ function WebhookUrlInfo(props) {
         helperText={
           <FormattedMessage
             id="webhookUrlInfo.helperText"
-            values={{ link: generateExternalLink(WEBHOOK_DOCS) }}
+            values={{ link: generateExternalLink(webhookDocsUrl) }}
           />
         }
       />

packages/web/src/config/urls.js

@@ -97,6 +97,8 @@ export const ADMIN_APP_AUTH_CLIENT = (appKey, id) =>
 export const ADMIN_APP_AUTH_CLIENTS_CREATE = (appKey) =>
   `${ADMIN_SETTINGS}/apps/${appKey}/auth-clients/create`;
 export const DASHBOARD = FLOWS;
-// External links
+
-export const WEBHOOK_DOCS =
+// External links and paths
-  'https://automatisch.io/docs/apps/webhooks/connection';
+// The paths are sensitive for their relativity.
+export const WEBHOOK_DOCS_PATH =
+  './apps/webhooks/connection';

packages/web/src/hooks/useDocsUrl.js

@@ -0,0 +1,27 @@
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
+
+const appendTrailingSlash = (url) => {
+  if (!url) {
+    return undefined;
+  }
+
+  if (!url.endsWith('/')) {
+    return `${url}/`;
+  }
+
+  return url;
+}
+
+/**
+ * Per instance, there may be different documentation. However, the paths are assumed the same.
+ * The given DOCS_URL is made sure to have a trailing slash to have relative paths work as expected.
+ */
+export default function useDocsUrl(path) {
+  const { data: automatischInfo } = useAutomatischInfo();
+  const docsUrlWithTrailingSlash = appendTrailingSlash(automatischInfo?.docsUrl);
+  const docsUrl = docsUrlWithTrailingSlash || 'https://automatisch.io/docs/';
+
+  const absoluteUrl = new URL(path, docsUrl).toString();
+
+  return absoluteUrl;
+}