From 226a2941d622255615ed08296bcdaf1bf8332bb2 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 25 Mar 2021 13:11:12 +0100 Subject: [PATCH] Service dev tools: Disable UI mode when using templates (#8711) --- .../service/developer-tools-service.ts | 56 +++++++++++++++---- src/translations/en.json | 3 +- 2 files changed, 46 insertions(+), 13 deletions(-) diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts index a477b8d5ff..0f0452b823 100644 --- a/src/panels/developer-tools/service/developer-tools-service.ts +++ b/src/panels/developer-tools/service/developer-tools-service.ts @@ -3,6 +3,7 @@ import { css, CSSResultArray, html, + internalProperty, LitElement, property, query, @@ -11,6 +12,7 @@ import memoizeOne from "memoize-one"; import { LocalStorage } from "../../../common/decorators/local-storage"; import { computeDomain } from "../../../common/entity/compute_domain"; import { computeObjectId } from "../../../common/entity/compute_object_id"; +import { hasTemplate } from "../../../common/string/has-template"; import { extractSearchParam } from "../../../common/url/search-params"; import "../../../components/buttons/ha-progress-button"; import "../../../components/entity/ha-entity-picker"; @@ -30,7 +32,9 @@ import "../../../util/app-localstorage-document"; class HaPanelDevService extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public narrow!: boolean; + @property({ type: Boolean }) public narrow!: boolean; + + @internalProperty() private _uiAvailable = true; @LocalStorage("panel-dev-service-state-service-data", true) private _serviceData?: ServiceAction = { service: "", target: {}, data: {} }; @@ -68,6 +72,7 @@ class HaPanelDevService extends LitElement { ); } } + this._checkUiSupported(); } protected render() { @@ -109,15 +114,27 @@ class HaPanelDevService extends LitElement {
- - ${this._yamlMode - ? this.hass.localize( - "ui.panel.developer-tools.tabs.services.ui_mode" - ) - : this.hass.localize( - "ui.panel.developer-tools.tabs.services.yaml_mode" - )} - +
+ + ${this._yamlMode + ? this.hass.localize( + "ui.panel.developer-tools.tabs.services.ui_mode" + ) + : this.hass.localize( + "ui.panel.developer-tools.tabs.services.yaml_mode" + )} + + ${!this._uiAvailable + ? html`${this.hass.localize( + "ui.panel.developer-tools.tabs.services.no_template_ui_support" + )}` + : ""} +
${this.hass.localize( "ui.panel.developer-tools.tabs.services.call_service" @@ -268,8 +285,18 @@ class HaPanelDevService extends LitElement { this._serviceDataChanged(ev); } + private _checkUiSupported() { + if (hasTemplate(this._serviceData)) { + this._yamlMode = true; + this._uiAvailable = false; + } else { + this._uiAvailable = true; + } + } + private _serviceDataChanged(ev) { this._serviceData = ev.detail.value; + this._checkUiSupported(); } private _serviceChanged(ev) { @@ -318,14 +345,19 @@ class HaPanelDevService extends LitElement { box-sizing: border-box; width: 100%; } - .button-row .buttons { display: flex; justify-content: space-between; max-width: 1200px; margin: auto; } - + .switch-mode-container { + display: flex; + align-items: center; + } + .switch-mode-container .error { + margin-left: 8px; + } .attributes { width: 100%; } diff --git a/src/translations/en.json b/src/translations/en.json index 5b5f1a1f92..bcd659530a 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3360,7 +3360,8 @@ "ui_mode": "Go to UI mode", "yaml_parameters": "Parameters only available in YAML mode", "all_parameters": "All available parameters", - "accepts_target": "This service accepts a target, for example: `entity_id: light.bed_light`" + "accepts_target": "This service accepts a target, for example: `entity_id: light.bed_light`", + "no_template_ui_support": "The UI does not support templates, you can still use the YAML editor." }, "states": { "title": "States",