From 7871ab4ff0df3d9a5f71cdeec79bf5e60885c6cb Mon Sep 17 00:00:00 2001
From: Cyril Beslay <cicoub13@gmail.com>
Date: Thu, 28 Sep 2023 15:50:49 +0200
Subject: [PATCH] feat(zigbee2mqtt): Add z2m ui link in Setup page

Fix #1893
---
 front/src/config/i18n/en.json                       | 13 +++++++------
 front/src/config/i18n/fr.json                       |  7 ++++---
 .../all/zigbee2mqtt/setup-page/SetupTab.jsx         | 11 +++++++++++
 .../all/zigbee2mqtt/setup-page/actions.js           | 11 +++++++++++
 .../integration/all/zigbee2mqtt/setup-page/index.js |  2 +-
 5 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
index 1d62ccce83..9e587347d8 100644
--- a/front/src/config/i18n/en.json
+++ b/front/src/config/i18n/en.json
@@ -561,7 +561,7 @@
         "saving": "Saving USB Dongle configuration..."
       },
       "setup": {
-        "title": "Zigbe2mqtt configuration",
+        "title": "Zigbee2mqtt configuration",
         "description": "This service uses two independent docker containers (MQTT broker and Zigbee2mqtt). Enable Zigbee2mqtt for deploying these containers.\nLearn more on the Zigbee2mqtt documentation page",
         "enableLabel": "Zigbee2mqtt activation",
         "nonDockerEnv": "Gladys is not running on Docker, you cannot install a MQTT broker from here.",
@@ -571,13 +571,14 @@
         "serviceStatus": "Zigbee2mqtt Service Status",
         "link": "Link",
         "connected": "Zigbee2mqtt was started with success.",
-        "error": "An error occured while starting Zigbee2mqtt.",
+        "error": "An error occurred while starting Zigbee2mqtt.",
         "mqttZigbeeLink": "MQTT - Zigbee",
         "gladysMqttLink": "Gladys - MQTT",
         "zigbee2Mqtt": "Zigbee2mqtt",
         "gladys": "Gladys",
         "mqtt": "MQTT",
-        "status": "Status"
+        "status": "Status",
+        "connectionUrl": "Zigbee2mqtt Interface URL: <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>"
       },
       "device": {
         "title": "Zigbee2mqtt devices",
@@ -588,16 +589,16 @@
         "permitJoin": "Permit joining",
         "noDeviceDiscovered": "No new device discovered, please click on scan button.",
         "serverNoResponse": "Gladys server is not available.",
-        "serverNoResponseWebSocker": "Gladys server is not available. Pleash refresh the page.",
+        "serverNoResponseWebSocker": "Gladys server is not available. Please refresh the page.",
         "deviceNotHandled": "Device not handled yet, please contact us to help us connect it in Gladys!",
         "createGithubIssue": "Suggest this device"
       },
-      "noDeviceFound": "No zigbee2mqtt device found.",
+      "noDeviceFound": "No Zigbee2mqtt device found.",
       "nameLabel": "Device Name",
       "namePlaceholder": "Enter the name of your device",
       "roomLabel": "Room",
       "topicLabel": "Topic",
-      "topicPlaceholder": "%topic% zigbee2mqtt MQTT value",
+      "topicPlaceholder": "%topic% Zigbee2mqtt MQTT value",
       "featuresLabel": "Features",
       "saveButton": "Save",
       "deleteButton": "Delete",
diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
index 3288aa9514..bdaf89ffdd 100644
--- a/front/src/config/i18n/fr.json
+++ b/front/src/config/i18n/fr.json
@@ -691,10 +691,10 @@
         "description": "Ce service utilise deux containers Docker (MQTT broker and Zigbee2mqtt). Activer Zigbee2mqtt pour déployer ces containers.\nPour en savoir plus, rendez-vous sur la page de documentation Zigbee2mqtt",
         "enableLabel": "Activation du service Zigbee2mqtt",
         "nonDockerEnv": "Gladys ne s'exécute actuellement pas dans Docker, il est impossible d'activer Zigbee2mqtt depuis Gladys.",
-        "invalidDockerNetwork": "Gladys est basée sur une installation personalisée, pour installer Zigbee2mqtt depuis cette page, le conteneur Docker de Gladys doit être démarré avec l'option \"network=host\".",
+        "invalidDockerNetwork": "Gladys est basée sur une installation personnalisée, pour installer Zigbee2mqtt depuis cette page, le conteneur Docker de Gladys doit être démarré avec l'option \"network=host\".",
         "enableZigbee2mqtt": "Activer Zigbee2mqtt",
         "containersStatus": "Conteneurs liés à Zigbee2mqtt",
-        "serviceStatus": "Etat du service Zigbee2mqtt",
+        "serviceStatus": "État du service Zigbee2mqtt",
         "link": "Lien",
         "connected": "Zigbee2mqtt démarré avec succès.",
         "error": "Une erreur s'est produite au démarrage du service Zigbee2mqtt.",
@@ -703,7 +703,8 @@
         "zigbee2Mqtt": "Zigbee2mqtt",
         "gladys": "Gladys",
         "mqtt": "MQTT",
-        "status": "Status"
+        "status": "Status",
+        "connectionUrl": "URL de l'interface Zigbee2mqtt : <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>"
       },
       "device": {
         "title": "Appareils Zigbee",
diff --git a/front/src/routes/integration/all/zigbee2mqtt/setup-page/SetupTab.jsx b/front/src/routes/integration/all/zigbee2mqtt/setup-page/SetupTab.jsx
index 35dc52e4a4..f477a495f6 100644
--- a/front/src/routes/integration/all/zigbee2mqtt/setup-page/SetupTab.jsx
+++ b/front/src/routes/integration/all/zigbee2mqtt/setup-page/SetupTab.jsx
@@ -46,6 +46,17 @@ class SetupTab extends Component {
             </p>
           )}
 
+          {props.zigbee2mqttConnected && props.z2mUrl && (
+            <div class="form-group">
+              <MarkupText
+                id="integration.zigbee2mqtt.setup.connectionUrl"
+                fields={{
+                  url: props.z2mUrl
+                }}
+              />
+            </div>
+          )}
+
           <div class="form-group">
             <label for="enableZigbee2mqtt" class="form-label">
               <Text id={`integration.zigbee2mqtt.setup.enableLabel`} />
diff --git a/front/src/routes/integration/all/zigbee2mqtt/setup-page/actions.js b/front/src/routes/integration/all/zigbee2mqtt/setup-page/actions.js
index 3f4b5b1ef1..d931a9d3a1 100644
--- a/front/src/routes/integration/all/zigbee2mqtt/setup-page/actions.js
+++ b/front/src/routes/integration/all/zigbee2mqtt/setup-page/actions.js
@@ -3,6 +3,7 @@ import { RequestStatus } from '../../../../../utils/consts';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import get from 'get-value';
+import config from '../../../../../config';
 
 dayjs.extend(relativeTime);
 
@@ -38,6 +39,16 @@ const createActions = store => {
           networkModeValid: zigbee2mqttStatus.networkModeValid
         });
       }
+
+      // Compute Zigbee2Mqtt interface URL if connected locally (not through Gladys Plus Gateway)
+      let z2mUrl = null;
+      if (this.session.gatewayClient === undefined) {
+        const url = new URL(config.localApiUrl);
+        z2mUrl = `${url.protocol}//${url.hostname}:8080`;
+      }
+      store.setState({
+        z2mUrl
+      });
     },
 
     async startContainer(state) {
diff --git a/front/src/routes/integration/all/zigbee2mqtt/setup-page/index.js b/front/src/routes/integration/all/zigbee2mqtt/setup-page/index.js
index f5d1270fa6..2c9efc64c3 100644
--- a/front/src/routes/integration/all/zigbee2mqtt/setup-page/index.js
+++ b/front/src/routes/integration/all/zigbee2mqtt/setup-page/index.js
@@ -32,6 +32,6 @@ class Zigbee2mqttSetupPage extends Component {
 }
 
 export default connect(
-  'user,session,z2mEnabled,usbConfigured,mqttExist,mqttRunning,dockerBased,networkModeValid,zigbee2mqttExist,zigbee2mqttRunning,gladysConnected,zigbee2mqttConnected,usbConfigured',
+  'user,session,z2mEnabled,usbConfigured,mqttExist,mqttRunning,dockerBased,networkModeValid,zigbee2mqttExist,zigbee2mqttRunning,gladysConnected,zigbee2mqttConnected,usbConfigured,z2mUrl',
   actions
 )(Zigbee2mqttSetupPage);