From 730fdd32b191c17fc56ca4e2c76d4a3af29d1765 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Tue, 23 Jul 2024 09:48:20 +0000
Subject: [PATCH] feat: use dynamic DOCS URL

---
 .../controllers/api/v1/automatisch/info.js    |  1 +
 .../api/v1/automatisch/info.test.js           |  1 +
 .../mocks/rest/api/v1/automatisch/info.js     |  1 +
 .../src/components/WebhookUrlInfo/index.jsx   | 11 +++++---
 packages/web/src/config/urls.js               |  8 +++---
 packages/web/src/hooks/useDocsUrl.js          | 27 +++++++++++++++++++
 6 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 packages/web/src/hooks/useDocsUrl.js

diff --git a/packages/backend/src/controllers/api/v1/automatisch/info.js b/packages/backend/src/controllers/api/v1/automatisch/info.js
index 5a37b539..cf436994 100644
--- a/packages/backend/src/controllers/api/v1/automatisch/info.js
+++ b/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);
diff --git a/packages/backend/src/controllers/api/v1/automatisch/info.test.js b/packages/backend/src/controllers/api/v1/automatisch/info.test.js
index 1853346f..83e82092 100644
--- a/packages/backend/src/controllers/api/v1/automatisch/info.test.js
+++ b/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')
diff --git a/packages/backend/test/mocks/rest/api/v1/automatisch/info.js b/packages/backend/test/mocks/rest/api/v1/automatisch/info.js
index ec071631..1bdf89d2 100644
--- a/packages/backend/test/mocks/rest/api/v1/automatisch/info.js
+++ b/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,
diff --git a/packages/web/src/components/WebhookUrlInfo/index.jsx b/packages/web/src/components/WebhookUrlInfo/index.jsx
index 7740c203..809fb4a8 100644
--- a/packages/web/src/components/WebhookUrlInfo/index.jsx
+++ b/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) }}
           />
         }
       />
diff --git a/packages/web/src/config/urls.js b/packages/web/src/config/urls.js
index 865edf82..50c1a07c 100644
--- a/packages/web/src/config/urls.js
+++ b/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';
diff --git a/packages/web/src/hooks/useDocsUrl.js b/packages/web/src/hooks/useDocsUrl.js
new file mode 100644
index 00000000..2d65cb98
--- /dev/null
+++ b/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;
+}