From 28370ee826292a40f658ac0f36791e8a7dec773a Mon Sep 17 00:00:00 2001
From: Nico Guevara <42900763+Tostti@users.noreply.github.com>
Date: Mon, 26 Sep 2022 11:40:37 -0300
Subject: [PATCH] Change message for API version mismatch in Kibana (#4529)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modified the message to be clearer, removed <a>

* Added function to add <a> to urls in errors

* changed structure

* Fixed error on function

* Add PLUGIN_APP_NAME constant to match wzd

* Change error message to match structure of wzd

* Improve addTagsToUrl

* Add change to changelog

* Change structure

* Update CHANGELOG.md

* Improve message

Co-authored-by: Álex <alejandro.ruiz.becerra@wazuh.com>
---
 CHANGELOG.md                                  |  1 +
 common/constants.ts                           |  3 +++
 .../container/health-check.container.tsx      | 25 ++++++++++++++++++-
 .../services/check-setup.service.ts           |  4 +--
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5ad098a40..5287676e19 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Improved alerts summary performance [#4376](https://github.com/wazuh/wazuh-kibana-app/pull/4376)
 - The endpoint `/agents/summary/status` response was adapted. [#3874](https://github.com/wazuh/wazuh-kibana-app/pull/3874)
 - Made Agents Overview icons load independently [#4363](https://github.com/wazuh/wazuh-kibana-app/pull/4363)
+- Improved the message displayed when there is a versions mismatch between the Wazuh API and the Wazuh APP [#4529](https://github.com/wazuh/wazuh-kibana-app/pull/4529)
 
 ### Fixed
 
diff --git a/common/constants.ts b/common/constants.ts
index c6f627e2a1..6412dfba86 100644
--- a/common/constants.ts
+++ b/common/constants.ts
@@ -372,6 +372,9 @@ export const PLUGIN_PLATFORM_REQUEST_HEADERS = {
   'kbn-xsrf': 'kibana'
 };
 
+// Plugin app
+export const PLUGIN_APP_NAME = 'Wazuh App';
+
 // UI
 export const API_NAME_AGENT_STATUS = {
   ACTIVE: 'active',
diff --git a/public/components/health-check/container/health-check.container.tsx b/public/components/health-check/container/health-check.container.tsx
index 9f726b5452..fbde8110cd 100644
--- a/public/components/health-check/container/health-check.container.tsx
+++ b/public/components/health-check/container/health-check.container.tsx
@@ -195,13 +195,36 @@ function HealthCheckComponent() {
       );
     });
   };
+  
+  const addTagsToUrl = (error) => {
+    const words = error.split(' ');
+    words.forEach((word, index) => {
+      if (word.includes('http://') || word.includes('https://')) {
+        if (words[index - 1] === 'guide:') {
+          if (word.endsWith('.') || word.endsWith(',')) {
+            words[index - 2] = `<a href="${word.slice(0, -1)}" target="_blank">${words[index - 2]} ${words[index - 1].slice(0, -1)}</a>${word.slice(-1)}`;
+          } else {
+            words[index - 2] = `<a href="${word}" target="_blank">${words[index - 2]} ${words[index - 1].slice(0, -1)}</a> `;
+          }
+          words.splice(index - 1, 2);
+        } else{
+          if (word.endsWith('.') || word.endsWith(',')) {
+            words[index] = `<a href="${word.slice(0, -1)}" target="_blank">${word.slice(0, -1)}</a>${word.slice(-1)}`;
+          } else {
+            words[index] = `<a href="${word}" target="_blank">${word}</a>`;
+          }
+        }
+      }
+    });
+    return words.join(' ');
+  };
 
   const renderErrors = () => {
     return Object.keys(checkErrors).map((checkID) => 
       checkErrors[checkID].map((error, index) => (
         <Fragment key={index}>
           <EuiCallOut
-            title={(<>{`[${checks[checkID].label}]`} <span dangerouslySetInnerHTML={{__html: error}}></span></>)}
+            title={(<>{`[${checks[checkID].label}]`} <span dangerouslySetInnerHTML={{__html: addTagsToUrl(error)}}></span></>)}
             color="danger"
             iconType="alert"
             style={{ textAlign: 'left' }}
diff --git a/public/components/health-check/services/check-setup.service.ts b/public/components/health-check/services/check-setup.service.ts
index 73e6576276..48a674d79a 100644
--- a/public/components/health-check/services/check-setup.service.ts
+++ b/public/components/health-check/services/check-setup.service.ts
@@ -14,7 +14,7 @@
 
 import { AppState, GenericRequest, WzRequest } from '../../../react-services';
 import { CheckLogger } from '../types/check_logger';
-import { PLUGIN_PLATFORM_WAZUH_DOCUMENTATION_URL_PATH_UPGRADE_PLATFORM } from '../../../../common/constants';
+import { PLUGIN_PLATFORM_WAZUH_DOCUMENTATION_URL_PATH_TROUBLESHOOTING, PLUGIN_APP_NAME } from '../../../../common/constants';
 import { webDocumentationLink } from '../../../../common/services/web_documentation';
 
 export const checkSetupService = appInfo => async (checkLogger: CheckLogger) => {
@@ -44,7 +44,7 @@ export const checkSetupService = appInfo => async (checkLogger: CheckLogger) =>
         api.groups.version !== appSplit[0] ||
         api.groups.minor !== appSplit[1]
       ) {
-        checkLogger.error(`Wazuh API and Wazuh App version mismatch. API version: ${apiVersion}. App version: ${setupData.data.data['app-version']}. At least, major and minor should match. Check more info about upgrading Wazuh App <a target='_blank' href='${webDocumentationLink(PLUGIN_PLATFORM_WAZUH_DOCUMENTATION_URL_PATH_UPGRADE_PLATFORM)}'>here</a>.`);
+        checkLogger.error(`Wazuh API and ${PLUGIN_APP_NAME} version mismatch. API version: ${apiVersion}. App version: ${setupData.data.data['app-version']}. Read more about this error in our troubleshooting guide: ${webDocumentationLink(PLUGIN_PLATFORM_WAZUH_DOCUMENTATION_URL_PATH_TROUBLESHOOTING)}.`);
       }
     }
   }