From 017060886ebaa37bbcac2e2cc1198079ed012255 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 24 Jul 2023 12:52:19 +0300
Subject: [PATCH] UI: Fixed style check connectivity and text install

---
 .../device/device-check-connectivity-dialog.component.html | 7 ++++++-
 .../device/device-check-connectivity-dialog.component.scss | 7 +++++++
 ui-ngx/src/assets/locale/locale.constant-en_US.json        | 1 +
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index 01d2330aa3..11e1435119 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
@@ -140,7 +140,12 @@
                 <div class="tb-form-panel no-padding no-border tb-tab-body">
                   <div class="tb-form-panel stroked">
                     <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-                    <div class="tb-install-windows">Coming Soon!!!!</div>
+                    <div class="tb-install-windows">
+                      <ng-container *ngTemplateOutlet="seeDocumentation; context:
+                        {doc: {text: 'device.connectivity.install-mqtt-windows',
+                        href: 'https://thingsboard.io/docs/getting-started-guides/helloworld/?connectdevice=mqtt-windows#step-2-connect-device'}}">
+                      </ng-container>
+                    </div>
                   </div>
                   <ng-container
                     *ngTemplateOutlet="executeCommand; context: {cmd: {
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
index e50b46d9fc..fe1c24eb34 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
@@ -124,6 +124,13 @@
           background: #F3F6FA;
           border-color: #305680;
           padding-right: 38px;
+          overflow: scroll;
+          padding-bottom: 4px;
+
+          &::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+          }
         }
       }
       button.clipboard-btn {
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 8e254a655c..47287bd999 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1392,6 +1392,7 @@
             "use-following-instructions": "Use the following instructions for sending telemetry on behalf of the device using shell",
             "execute-following-command": "Executive the following command",
             "install-curl-windows": "Starting Windows 10 b17063, cURL is available by default",
+            "install-mqtt-windows": "Use the instructions to download, install, setup and run mosquitto_pub",
             "install-necessary-client-tools": "Install necessary client tools",
             "mqtts-x509-command": "Use the following documentation to connect the device via MQTT with authorization X509",
             "coaps-x509-command": "Use the following documentation to connect the device via CoAP over DTLS with authorization X509",