Fix-labels-yaml-helper (#27776)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-button";
 import type { ExtEntityRegistryEntry } from "../../../../../data/entity_registry";
 import { removeEntityRegistryEntry } from "../../../../../data/entity_registry";
 import { HELPERS_CRUD } from "../../../../../data/helpers_crud";
@@ -22,7 +23,6 @@ import "../../../helpers/forms/ha-schedule-form";
 import "../../../helpers/forms/ha-timer-form";
 import "../../../voice-assistants/entity-voice-settings";
 import "../../entity-registry-settings-editor";
-import "../../../../../components/ha-button";
 import type { EntityRegistrySettingsEditor } from "../../entity-registry-settings-editor";
 
 @customElement("entity-settings-helper-tab")
@@ -72,22 +72,28 @@ export class EntitySettingsHelperTab extends LitElement {
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
+        ${this._item === null
+          ? html`<ha-alert alert-type="info"
+              >${this.hass.localize(
+                "ui.dialogs.helper_settings.yaml_not_editable"
+              )}</ha-alert
+            >`
+          : nothing}
         ${!this._componentLoaded
           ? this.hass.localize(
               "ui.dialogs.helper_settings.platform_not_loaded",
               { platform: this.entry.platform }
             )
-          : this._item === null
+          : html`
-            ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
+              <span @value-changed=${this._valueChanged}>
-            : html`
+                ${dynamicElement(`ha-${this.entry.platform}-form`, {
-                <span @value-changed=${this._valueChanged}>
+                  hass: this.hass,
-                  ${dynamicElement(`ha-${this.entry.platform}-form`, {
+                  item: this._item,
-                    hass: this.hass,
+                  entry: this.entry,
-                    item: this._item,
+                  disabled: this._item === null,
-                    entry: this.entry,
+                })}
-                  })}
+              </span>
-                </span>
+            `}
-              `}
         <entity-registry-settings-editor
           .hass=${this.hass}
           .entry=${this.entry}
@@ -122,6 +128,9 @@ export class EntitySettingsHelperTab extends LitElement {
   }
 
   private _valueChanged(ev: CustomEvent): void {
+    if (this._item === null) {
+      return;
+    }
     this._error = undefined;
     this._item = ev.detail.value;
   }
@@ -195,6 +204,10 @@ export class EntitySettingsHelperTab extends LitElement {
           display: block;
           padding: 0 !important;
         }
+        ha-alert {
+          display: block;
+          margin-bottom: var(--ha-space-4);
+        }
         .form {
           padding: 20px 24px;
         }

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -784,7 +784,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
       <ha-labels-picker
         .hass=${this.hass}
         .value=${this._labels}
-        .disabled=${this.disabled}
+        .disabled=${!!this.disabled}
         @value-changed=${this._labelsChanged}
       ></ha-labels-picker>
       ${this._cameraPrefs

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -17,6 +17,8 @@ class HaCounterForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: Partial<Counter>;
 
   @state() private _name!: string;
@@ -82,6 +84,7 @@ class HaCounterForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -91,6 +94,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-textfield
           .value=${this._minimum}
@@ -100,6 +104,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.minimum"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-textfield
           .value=${this._maximum}
@@ -109,6 +114,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.maximum"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-textfield
           .value=${this._initial}
@@ -118,6 +124,7 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.initial"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-expansion-panel
           header=${this.hass.localize(
@@ -133,12 +140,14 @@ class HaCounterForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.counter.step"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
           <div class="row">
             <ha-switch
               .checked=${this._restore}
               .configValue=${"restore"}
               @change=${this._valueChanged}
+              .disabled=${this.disabled}
             >
             </ha-switch>
             <div>

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -14,6 +14,8 @@ class HaInputBooleanForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputBoolean;
 
   @state() private _name!: string;
@@ -59,6 +61,7 @@ class HaInputBooleanForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -68,6 +71,7 @@ class HaInputBooleanForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
       </div>
     `;

src/panels/config/helpers/forms/ha-input_button-form.ts

@@ -14,6 +14,8 @@ class HaInputButtonForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _name!: string;
 
   @state() private _icon!: string;
@@ -59,6 +61,7 @@ class HaInputButtonForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -68,6 +71,7 @@ class HaInputButtonForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
       </div>
     `;

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -17,6 +17,8 @@ class HaInputDateTimeForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputDateTime;
 
   @state() private _name!: string;
@@ -73,6 +75,7 @@ class HaInputDateTimeForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -82,6 +85,7 @@ class HaInputDateTimeForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <br />
         ${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
@@ -97,6 +101,7 @@ class HaInputDateTimeForm extends LitElement {
             value="date"
             .checked=${this._mode === "date"}
             @change=${this._modeChanged}
+            .disabled=${this.disabled}
           ></ha-radio>
         </ha-formfield>
         <ha-formfield
@@ -109,6 +114,7 @@ class HaInputDateTimeForm extends LitElement {
             value="time"
             .checked=${this._mode === "time"}
             @change=${this._modeChanged}
+            .disabled=${this.disabled}
           ></ha-radio>
         </ha-formfield>
         <ha-formfield
@@ -121,6 +127,7 @@ class HaInputDateTimeForm extends LitElement {
             value="datetime"
             .checked=${this._mode === "datetime"}
             @change=${this._modeChanged}
+            .disabled=${this.disabled}
           ></ha-radio>
         </ha-formfield>
       </div>

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -18,6 +18,8 @@ class HaInputNumberForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: Partial<InputNumber>;
 
   @state() private _name!: string;
@@ -89,6 +91,7 @@ class HaInputNumberForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -98,6 +101,7 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-textfield
           .value=${this._min}
@@ -108,6 +112,7 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.input_number.min"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-textfield
           .value=${this._max}
@@ -118,6 +123,7 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.input_number.max"
           )}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-expansion-panel
           header=${this.hass.localize(
@@ -139,6 +145,7 @@ class HaInputNumberForm extends LitElement {
                 value="slider"
                 .checked=${this._mode === "slider"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
@@ -151,6 +158,7 @@ class HaInputNumberForm extends LitElement {
                 value="box"
                 .checked=${this._mode === "box"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
           </div>
@@ -163,6 +171,7 @@ class HaInputNumberForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_number.step"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
 
           <ha-textfield
@@ -172,6 +181,7 @@ class HaInputNumberForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_number.unit_of_measurement"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
         </ha-expansion-panel>
       </div>

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -23,6 +23,8 @@ class HaInputSelectForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputSelect;
 
   @state() private _name!: string;
@@ -86,6 +88,7 @@ class HaInputSelectForm extends LitElement {
           )}
           .configValue=${"name"}
           @input=${this._valueChanged}
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -95,13 +98,18 @@ class HaInputSelectForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <div class="header">
           ${this.hass!.localize(
             "ui.dialogs.helper_settings.input_select.options"
           )}:
         </div>
-        <ha-sortable @item-moved=${this._optionMoved} handle-selector=".handle">
+        <ha-sortable
+          @item-moved=${this._optionMoved}
+          handle-selector=".handle"
+          .disabled=${this.disabled}
+        >
           <ha-list class="options">
             ${this._options.length
               ? repeat(
@@ -124,6 +132,7 @@ class HaInputSelectForm extends LitElement {
                           "ui.dialogs.helper_settings.input_select.remove_option"
                         )}
                         @click=${this._removeOption}
+                        .disabled=${this.disabled}
                         .path=${mdiDelete}
                       ></ha-icon-button>
                     </ha-list-item>
@@ -146,8 +155,13 @@ class HaInputSelectForm extends LitElement {
               "ui.dialogs.helper_settings.input_select.add_option"
             )}
             @keydown=${this._handleKeyAdd}
+            .disabled=${this.disabled}
           ></ha-textfield>
-          <ha-button size="small" appearance="plain" @click=${this._addOption}
+          <ha-button
+            size="small"
+            appearance="plain"
+            @click=${this._addOption}
+            .disabled=${this.disabled}
             >${this.hass!.localize(
               "ui.dialogs.helper_settings.input_select.add"
             )}</ha-button

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -19,6 +19,8 @@ class HaInputTextForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: InputText;
 
   @state() private _name!: string;
@@ -79,6 +81,7 @@ class HaInputTextForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -88,6 +91,7 @@ class HaInputTextForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-expansion-panel
           header=${this.hass.localize(
@@ -105,6 +109,7 @@ class HaInputTextForm extends LitElement {
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_text.min"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
           <ha-textfield
             .value=${this._max}
@@ -129,6 +134,7 @@ class HaInputTextForm extends LitElement {
                 value="text"
                 .checked=${this._mode === "text"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
@@ -141,6 +147,7 @@ class HaInputTextForm extends LitElement {
                 value="password"
                 .checked=${this._mode === "password"}
                 @change=${this._modeChanged}
+                .disabled=${this.disabled}
               ></ha-radio>
             </ha-formfield>
           </div>
@@ -154,6 +161,7 @@ class HaInputTextForm extends LitElement {
             .helper=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_text.pattern_helper"
             )}
+            .disabled=${this.disabled}
           ></ha-textfield>
         </ha-expansion-panel>
       </div>

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -17,9 +17,9 @@ import "../../../../components/ha-textfield";
 import type { Schedule, ScheduleDay } from "../../../../data/schedule";
 import { weekdays } from "../../../../data/schedule";
 import { TimeZone } from "../../../../data/translation";
-import { showScheduleBlockInfoDialog } from "./show-dialog-schedule-block-info";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import { showScheduleBlockInfoDialog } from "./show-dialog-schedule-block-info";
 
 const defaultFullCalendarConfig: CalendarOptions = {
   plugins: [timeGridPlugin, interactionPlugin],
@@ -43,6 +43,8 @@ class HaScheduleForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _name!: string;
 
   @state() private _icon!: string;
@@ -132,6 +134,7 @@ class HaScheduleForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -141,8 +144,9 @@ class HaScheduleForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
-        <div id="calendar"></div>
+        ${!this.disabled ? html`<div id="calendar"></div>` : nothing}
       </div>
     `;
   }
@@ -175,7 +179,9 @@ class HaScheduleForm extends LitElement {
   }
 
   protected firstUpdated(): void {
-    this._setupCalendar();
+    if (!this.disabled) {
+      this._setupCalendar();
+    }
   }
 
   private _setupCalendar(): void {

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -1,18 +1,18 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { createDurationData } from "../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-checkbox";
+import "../../../../components/ha-duration-input";
+import type { HaDurationData } from "../../../../components/ha-duration-input";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
-import "../../../../components/ha-duration-input";
 import "../../../../components/ha-textfield";
+import type { ForDict } from "../../../../data/automation";
 import type { DurationDict, Timer } from "../../../../data/timer";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { createDurationData } from "../../../../common/datetime/create_duration_data";
-import type { HaDurationData } from "../../../../components/ha-duration-input";
-import type { ForDict } from "../../../../data/automation";
 
 @customElement("ha-timer-form")
 class HaTimerForm extends LitElement {
@@ -20,6 +20,8 @@ class HaTimerForm extends LitElement {
 
   @property({ type: Boolean }) public new = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _item?: Timer;
 
   @state() private _name!: string;
@@ -77,6 +79,7 @@ class HaTimerForm extends LitElement {
             "ui.dialogs.helper_settings.required_error_msg"
           )}
           dialogInitialFocus
+          .disabled=${this.disabled}
         ></ha-textfield>
         <ha-icon-picker
           .hass=${this.hass}
@@ -86,11 +89,13 @@ class HaTimerForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
+          .disabled=${this.disabled}
         ></ha-icon-picker>
         <ha-duration-input
           .configValue=${"duration"}
           .data=${this._duration_data}
           @value-changed=${this._valueChanged}
+          .disabled=${this.disabled}
         ></ha-duration-input>
         <ha-formfield
           .label=${this.hass.localize(
@@ -101,6 +106,7 @@ class HaTimerForm extends LitElement {
             .configValue=${"restore"}
             .checked=${this._restore}
             @click=${this._toggleRestore}
+            .disabled=${this.disabled}
           >
           </ha-checkbox>
         </ha-formfield>
@@ -130,6 +136,9 @@ class HaTimerForm extends LitElement {
   }
 
   private _toggleRestore() {
+    if (this.disabled) {
+      return;
+    }
     this._restore = !this._restore;
     fireEvent(this, "value-changed", {
       value: { ...this._item, restore: this._restore },