From d5dfab6c7ac195874417db4819d32bbd8eac0355 Mon Sep 17 00:00:00 2001
From: Andrii Shvaika <ashvayka@thingsboard.io>
Date: Thu, 2 Apr 2026 17:35:40 +0300
Subject: [PATCH] feat(iot-hub): add authenticated docker-compose download
 button for gateway install

Markdown links can't pass JWT auth headers, so instead of relying on
${gateway.dockerComposeUrl} in markdown, add a download bar above the
instruction content when a gateway was created. Uses the existing
DeviceService.downloadGatewayDockerComposeFile() which handles
authenticated download via ResourcesService (JWT injected by interceptor,
Blob created, browser download triggered).
---
 .../device-install-dialog.component.html         |  9 +++++++++
 .../device-install-dialog.component.scss         | 16 ++++++++++++++++
 .../device-install-dialog.component.ts           | 12 ++++++++++++
 .../src/assets/locale/locale.constant-en_US.json |  1 +
 4 files changed, 38 insertions(+)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
index 5ee5463c3f..2033801e0c 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
@@ -77,6 +77,15 @@
 
                 @case ('instruction') {
                   <div class="tb-device-install-instruction">
+                    @if (gatewayDockerComposeAvailable) {
+                      <div class="tb-gateway-download-bar">
+                        <span>{{ 'iot-hub.device-install-gateway-docker-compose' | translate }}</span>
+                        <button mat-stroked-button color="primary" (click)="downloadGatewayDockerCompose()">
+                          <mat-icon>download</mat-icon>
+                          {{ 'action.download' | translate }}
+                        </button>
+                      </div>
+                    }
                     <tb-markdown [data]="ws.markdown"
                                  [usePlainMarkdown]="true">
                     </tb-markdown>
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
index 2a764ccb12..cd17092788 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
@@ -123,6 +123,22 @@
   min-height: 120px;
 }
 
+// Gateway download bar
+.tb-gateway-download-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  background: #e3f2fd;
+  border-radius: 8px;
+
+  span {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.87);
+  }
+}
+
 // Instruction view
 .tb-device-install-instruction {
   ::ng-deep tb-markdown {
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
index 97f0b61a41..fda2ade211 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
@@ -240,6 +240,18 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
     }
   }
 
+  get gatewayDockerComposeAvailable(): boolean {
+    const gateway = this.entityOutputs.get('gateway');
+    return !!gateway?.dockerComposeUrl;
+  }
+
+  downloadGatewayDockerCompose(): void {
+    const gateway = this.entityOutputs.get('gateway');
+    if (gateway?.id) {
+      this.deviceService.downloadGatewayDockerComposeFile(gateway.id).subscribe();
+    }
+  }
+
   getPatternErrorMessage(field: FormFieldDefinition): string {
     return field.validators?.[0]?.message || 'Invalid format';
   }
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 fa55e3cea0..2b341eb7f0 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3895,6 +3895,7 @@
         "device-install-step-type-GATEWAY": "Gateway",
         "device-install-step-type-GATEWAY_CONNECTOR": "Gateway Connector",
         "device-install-step-type-RULE_CHAIN": "Rule Chain",
+        "device-install-gateway-docker-compose": "Download docker-compose.yml for your gateway",
         "device-install-title": "Install \"{{name}}\"",
         "device-install-complete-title": "Install \"{{name}}\" — Complete",
         "device-installing-title": "Installing \"{{name}}\""