Move MQTT dev tools to integrations (#6189)

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -8,15 +8,18 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { computeStateName } from "../../common/entity/compute_state_name";
+import { computeStateName } from "../../../../../../common/entity/compute_state_name";
-import "../../components/ha-dialog";
+import "../../../../../../components/ha-dialog";
-import "../../components/ha-switch";
+import "../../../../../../components/ha-switch";
-import "../../components/ha-formfield";
+import "../../../../../../components/ha-formfield";
-import type { HaSwitch } from "../../components/ha-switch";
+import type { HaSwitch } from "../../../../../../components/ha-switch";
-import { computeDeviceName } from "../../data/device_registry";
+import { computeDeviceName } from "../../../../../../data/device_registry";
-import { fetchMQTTDebugInfo, MQTTDeviceDebugInfo } from "../../data/mqtt";
+import {
-import { haStyleDialog } from "../../resources/styles";
+  fetchMQTTDebugInfo,
-import { HomeAssistant } from "../../types";
+  MQTTDeviceDebugInfo,
+} from "../../../../../../data/mqtt";
+import { haStyleDialog } from "../../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../../types";
 import "./mqtt-discovery-payload";
 import "./mqtt-messages";
 import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug-info";
@@ -187,19 +190,19 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
           <li class="triggerlistitem">
             MQTT discovery data:
             <ul class="discoverydata">
-            <li>
+              <li>
-              Topic:
+                Topic:
-              <code>${trigger.discovery_data.topic}</code>
+                <code>${trigger.discovery_data.topic}</code>
-            </li>
+              </li>
-            <li>
+              <li>
-              <mqtt-discovery-payload
+                <mqtt-discovery-payload
-                .hass=${this.hass}
+                  .hass=${this.hass}
-                .payload=${trigger.discovery_data.payload}
+                  .payload=${trigger.discovery_data.payload}
-                .showAsYaml=${this._showAsYaml}
+                  .showAsYaml=${this._showAsYaml}
-                .summary=${"Payload"}
+                  .summary=${"Payload"}
-              >
+                >
-            </li>
+                </mqtt-discovery-payload>
-            </mqtt-discovery-payload>
+              </li>
             </ul>
           </li>
         `

src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts

@@ -7,12 +7,12 @@ import {
   TemplateResult,
   css,
 } from "lit-element";
-import { DeviceRegistryEntry } from "../../../../../data/device_registry";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import { removeMQTTDeviceEntry } from "../../../../../data/mqtt";
+import { removeMQTTDeviceEntry } from "../../../../../../data/mqtt";
-import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
-import { showMQTTDeviceDebugInfoDialog } from "../../../../../dialogs/mqtt-device-debug-info-dialog/show-dialog-mqtt-device-debug-info";
+import { showMQTTDeviceDebugInfoDialog } from "./show-dialog-mqtt-device-debug-info";
-import { haStyle } from "../../../../../resources/styles";
+import { haStyle } from "../../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../types";
+import { HomeAssistant } from "../../../../../../types";
 
 @customElement("ha-device-actions-mqtt")
 export class HaDeviceActionsMqtt extends LitElement {

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -9,9 +9,9 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
-import { formatTimeWithSeconds } from "../../common/datetime/format_time";
+import { formatTimeWithSeconds } from "../../../../../../common/datetime/format_time";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant } from "../../../../../../types";
-import { MQTTMessage } from "../../data/mqtt";
+import { MQTTMessage } from "../../../../../../data/mqtt";
 
 @customElement("mqtt-messages")
 class MQTTMessages extends LitElement {

src/panels/config/devices/device-detail/integration-elements/mqtt/show-dialog-mqtt-device-debug-info.ts

@@ -1,5 +1,5 @@
-import { fireEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../../../../../../common/dom/fire_event";
-import { DeviceRegistryEntry } from "../../data/device_registry";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 
 export interface MQTTDeviceDebugInfoDialogParams {
   device: DeviceRegistryEntry;

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts

@@ -8,17 +8,17 @@ import {
   css,
   PropertyValues,
 } from "lit-element";
-import { DeviceRegistryEntry } from "../../../../../data/device_registry";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import { haStyle } from "../../../../../resources/styles";
+import { haStyle } from "../../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../types";
+import { HomeAssistant } from "../../../../../../types";
 import {
   ZHADevice,
   fetchZHADevice,
   reconfigureNode,
-} from "../../../../../data/zha";
+} from "../../../../../../data/zha";
-import { navigate } from "../../../../../common/navigate";
+import { navigate } from "../../../../../../common/navigate";
-import { showZHADeviceZigbeeInfoDialog } from "../../../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info";
+import { showZHADeviceZigbeeInfoDialog } from "../../../../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info";
-import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
 
 @customElement("ha-device-actions-zha")
 export class HaDeviceActionsZha extends LitElement {

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts

@@ -8,11 +8,11 @@ import {
   css,
   PropertyValues,
 } from "lit-element";
-import { DeviceRegistryEntry } from "../../../../../data/device_registry";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import { haStyle } from "../../../../../resources/styles";
+import { haStyle } from "../../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../types";
+import { HomeAssistant } from "../../../../../../types";
-import { ZHADevice, fetchZHADevice } from "../../../../../data/zha";
+import { ZHADevice, fetchZHADevice } from "../../../../../../data/zha";
-import { formatAsPaddedHex } from "../../../integrations/integration-panels/zha/functions";
+import { formatAsPaddedHex } from "../../../../integrations/integration-panels/zha/functions";
 
 @customElement("ha-device-info-zha")
 export class HaDeviceActionsZha extends LitElement {

src/panels/config/devices/ha-config-device-page.ts

@@ -477,7 +477,9 @@ export class HaConfigDevicePage extends LitElement {
   ): TemplateResult[] {
     const templates: TemplateResult[] = [];
     if (integrations.includes("mqtt")) {
-      import("./device-detail/integration-elements/ha-device-actions-mqtt");
+      import(
+        "./device-detail/integration-elements/mqtt/ha-device-actions-mqtt"
+      );
       templates.push(html`
         <div class="card-actions" slot="actions">
           <ha-device-actions-mqtt
@@ -488,8 +490,8 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (integrations.includes("zha")) {
-      import("./device-detail/integration-elements/ha-device-actions-zha");
+      import("./device-detail/integration-elements/zha/ha-device-actions-zha");
-      import("./device-detail/integration-elements/ha-device-info-zha");
+      import("./device-detail/integration-elements/zha/ha-device-info-zha");
       templates.push(html`
         <ha-device-info-zha
           .hass=${this.hass}

src/panels/config/ha-panel-config.ts

@@ -323,6 +323,13 @@ class HaPanelConfig extends HassRouterPage {
             /* webpackChunkName: "panel-config-zwave" */ "./integrations/integration-panels/zwave/ha-config-zwave"
           ),
       },
+      mqtt: {
+        tag: "mqtt-config-panel",
+        load: () =>
+          import(
+            /* webpackChunkName: "panel-config-mqtt" */ "./integrations/integration-panels/mqtt/mqtt-config-panel"
+          ),
+      },
     },
   };
 

src/panels/config/integrations/ha-integration-card.ts

@@ -46,6 +46,10 @@ declare global {
 }
 
 const integrationsWithPanel = {
+  mqtt: {
+    buttonLocalizeKey: "ui.panel.config.mqtt.button",
+    path: "/config/mqtt",
+  },
   zha: {
     buttonLocalizeKey: "ui.panel.config.zha.button",
     path: "/config/zha/dashboard",

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -9,13 +9,14 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import "../../../components/ha-card";
+import "../../../../../components/ha-card";
-import "../../../components/ha-code-editor";
+import "../../../../../components/ha-code-editor";
-import { haStyle } from "../../../resources/styles";
+import { haStyle } from "../../../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant } from "../../../../../types";
 import "./mqtt-subscribe-card";
+import "../../../../../layouts/hass-subpage";
 
-@customElement("developer-tools-mqtt")
+@customElement("mqtt-config-panel")
 class HaPanelDevMqtt extends LitElement {
   @property() public hass!: HomeAssistant;
 
@@ -37,43 +38,41 @@ class HaPanelDevMqtt extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="content">
+      <hass-subpage>
-        <ha-card
+        <div class="content">
-          header="${this.hass.localize(
+          <ha-card
-            "ui.panel.developer-tools.tabs.mqtt.description_publish"
+            header="${this.hass.localize(
-          )}"
+              "ui.panel.config.mqtt.description_publish"
-        >
+            )}"
-          <div class="card-content">
+          >
-            <paper-input
+            <div class="card-content">
-              label="${this.hass.localize(
+              <paper-input
-                "ui.panel.developer-tools.tabs.mqtt.topic"
+                label="${this.hass.localize("ui.panel.config.mqtt.topic")}"
-              )}"
+                .value=${this.topic}
-              .value=${this.topic}
+                @value-changed=${this._handleTopic}
-              @value-changed=${this._handleTopic}
+              ></paper-input>
-            ></paper-input>
 
-            <p>
+              <p>
-              ${this.hass.localize(
+                ${this.hass.localize("ui.panel.config.mqtt.payload")}
-                "ui.panel.developer-tools.tabs.mqtt.payload"
+              </p>
-              )}
+              <ha-code-editor
-            </p>
+                mode="jinja2"
-            <ha-code-editor
+                .value="${this.payload}"
-              mode="jinja2"
+                @value-changed=${this._handlePayload}
-              .value="${this.payload}"
+              ></ha-code-editor>
-              @value-changed=${this._handlePayload}
+            </div>
-            ></ha-code-editor>
+            <div class="card-actions">
-          </div>
+              <mwc-button @click=${this._publish}
-          <div class="card-actions">
+                >${this.hass.localize(
-            <mwc-button @click=${this._publish}
+                  "ui.panel.config.mqtt.publish"
-              >${this.hass.localize(
+                )}</mwc-button
-                "ui.panel.developer-tools.tabs.mqtt.publish"
+              >
-              )}</mwc-button
+            </div>
-            >
+          </ha-card>
-          </div>
-        </ha-card>
 
-        <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
+          <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
-      </div>
+        </div>
+      </hass-subpage>
     `;
   }
 

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -9,10 +9,10 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { formatTime } from "../../../common/datetime/format_time";
+import { formatTime } from "../../../../../common/datetime/format_time";
-import "../../../components/ha-card";
+import "../../../../../components/ha-card";
-import { MQTTMessage, subscribeMQTTTopic } from "../../../data/mqtt";
+import { MQTTMessage, subscribeMQTTTopic } from "../../../../../data/mqtt";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant } from "../../../../../types";
 
 @customElement("mqtt-subscribe-card")
 class MqttSubscribeCard extends LitElement {
@@ -43,18 +43,14 @@ class MqttSubscribeCard extends LitElement {
     return html`
       <ha-card
         header="${this.hass.localize(
-          "ui.panel.developer-tools.tabs.mqtt.description_listen"
+          "ui.panel.config.mqtt.description_listen"
         )}"
       >
         <form>
           <paper-input
             .label=${this._subscribed
-              ? this.hass.localize(
+              ? this.hass.localize("ui.panel.config.mqtt.listening_to")
-                  "ui.panel.developer-tools.tabs.mqtt.listening_to"
+              : this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
-                )
-              : this.hass.localize(
-                  "ui.panel.developer-tools.tabs.mqtt.subscribe_to"
-                )}
             .disabled=${this._subscribed !== undefined}
             .value=${this._topic}
             @value-changed=${this._valueChanged}
@@ -65,12 +61,8 @@ class MqttSubscribeCard extends LitElement {
             type="submit"
           >
             ${this._subscribed
-              ? this.hass.localize(
+              ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
-                  "ui.panel.developer-tools.tabs.mqtt.stop_listening"
+              : this.hass.localize("ui.panel.config.mqtt.start_listening")}
-                )
-              : this.hass.localize(
-                  "ui.panel.developer-tools.tabs.mqtt.start_listening"
-                )}
           </mwc-button>
         </form>
         <div class="events">
@@ -78,7 +70,7 @@ class MqttSubscribeCard extends LitElement {
             (msg) => html`
               <div class="event">
                 ${this.hass.localize(
-                  "ui.panel.developer-tools.tabs.mqtt.message_received",
+                  "ui.panel.config.mqtt.message_received",
                   "id",
                   msg.id,
                   "topic",

src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js

@@ -38,6 +38,10 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="iron-flex ha-style ha-form-style">
+        app-toolbar {
+          border-bottom: 1px solid var(--divider-color);
+        }
+
         .content {
           margin-top: 24px;
         }

src/panels/developer-tools/developer-tools-router.ts

@@ -25,10 +25,6 @@ class DeveloperToolsRouter extends HassRouterPage {
         tag: "developer-tools-event",
         load: () => import("./event/developer-tools-event"),
       },
-      mqtt: {
-        tag: "developer-tools-mqtt",
-        load: () => import("./mqtt/developer-tools-mqtt"),
-      },
       service: {
         tag: "developer-tools-service",
         load: () => import("./service/developer-tools-service"),

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -13,7 +13,6 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import scrollToTarget from "../../common/dom/scroll-to-target";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
@@ -72,15 +71,6 @@ class PanelDeveloperTools extends LitElement {
                 "ui.panel.developer-tools.tabs.events.title"
               )}
             </paper-tab>
-            ${isComponentLoaded(this.hass, "mqtt")
-              ? html`
-                  <paper-tab page-name="mqtt">
-                    ${this.hass.localize(
-                      "ui.panel.developer-tools.tabs.mqtt.title"
-                    )}
-                  </paper-tab>
-                `
-              : ""}
           </paper-tabs>
         </app-header>
         <developer-tools-router

src/translations/en.json

@@ -1506,6 +1506,20 @@
             "create": "Create"
           }
         },
+        "mqtt": {
+          "button": "Configure",
+          "title": "MQTT",
+          "description_publish": "Publish a packet",
+          "topic": "topic",
+          "payload": "Payload (template allowed)",
+          "publish": "Publish",
+          "description_listen": "Listen to a topic",
+          "listening_to": "Listening to",
+          "subscribe_to": "Topic to subscribe to",
+          "start_listening": "Start listening",
+          "stop_listening": "Stop listening",
+          "message_received": "Message {id} received on {topic} at {time}:"
+        },
         "zha": {
           "button": "Configure",
           "header": "Configure Zigbee Home Automation",
@@ -2299,19 +2313,6 @@
             "alert_event_type": "Event type is a mandatory field",
             "notification_event_fired": "Event {type} successful fired!"
           },
-          "mqtt": {
-            "title": "MQTT",
-            "description_publish": "Publish a packet",
-            "topic": "topic",
-            "payload": "Payload (template allowed)",
-            "publish": "Publish",
-            "description_listen": "Listen to a topic",
-            "listening_to": "Listening to",
-            "subscribe_to": "Topic to subscribe to",
-            "start_listening": "Start listening",
-            "stop_listening": "Stop listening",
-            "message_received": "Message {id} received on {topic} at {time}:"
-          },
           "services": {
             "title": "Services",
             "description": "The service dev tool allows you to call any available service in Home Assistant.",