feat: use dynamic DOCS URL

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 { WEBHOOK_DOCS } from '../../config/urls';
-import TextField from '../TextField';
+import { generateExternalLink } from 'helpers/translationValues';
+import { WEBHOOK_DOCS_PATH } from 'config/urls';
+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 =
-  'https://automatisch.io/docs/apps/webhooks/connection';
+
+// External links and paths
+// 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;
+}