Support for disabled selectors in config flow (#22592)

* Support for disabled selectors in config flow

* rename flag to readonly

* rename to read_only

* Merge branch 'dev' of https://github.com/home-assistant/frontend into disabled-fields-config-flow

* rework for new backend

* Fix disabled entity picker

* no longer used type

* Update src/dialogs/config-flow/step-flow-form.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

src/components/entity/ha-entity-picker.ts

@@ -386,6 +386,7 @@ export class HaEntityPicker extends LitElement {
     return html`
       <ha-generic-picker
         .hass=${this.hass}
+        .disabled=${this.disabled}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
         .label=${this.label}

src/dialogs/config-flow/step-flow-form.ts

@@ -2,13 +2,17 @@ import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isNavigationClick } from "../../common/dom/is-navigation-click";
 import "../../components/ha-alert";
 import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
 import "../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../components/ha-form/types";
+import type {
+  HaFormSchema,
+  HaFormSelector,
+} from "../../components/ha-form/types";
 import "../../components/ha-markdown";
 import "../../components/ha-spinner";
 import { autocompleteLoginFields } from "../../data/auth";
@@ -38,6 +42,15 @@ class StepFlowForm extends LitElement {
     this.removeEventListener("keydown", this._handleKeyDown);
   }
 
+  private handleReadOnlyFields = memoizeOne((schema) =>
+    schema?.map((field) => ({
+      ...field,
+      ...(Object.values((field as HaFormSelector)?.selector ?? {})[0]?.read_only
+        ? { disabled: true }
+        : {}),
+    }))
+  );
+
   protected render(): TemplateResult {
     const step = this.step;
     const stepData = this._stepDataProcessed;
@@ -53,7 +66,9 @@ class StepFlowForm extends LitElement {
           .data=${stepData}
           .disabled=${this._loading}
           @value-changed=${this._stepDataChanged}
-          .schema=${autocompleteLoginFields(step.data_schema)}
+          .schema=${autocompleteLoginFields(
+            this.handleReadOnlyFields(step.data_schema)
+          )}
           .error=${step.errors}
           .computeLabel=${this._labelCallback}
           .computeHelper=${this._helperCallback}
@@ -178,8 +193,10 @@ class StepFlowForm extends LitElement {
     Object.keys(stepData).forEach((key) => {
       const value = stepData[key];
       const isEmpty = [undefined, ""].includes(value);
-
+      const field = this.step.data_schema?.find((f) => f.name === key);
-      if (!isEmpty) {
+      const selector = (field as HaFormSelector)?.selector ?? {};
+      const read_only = (Object.values(selector)[0] as any)?.read_only;
+      if (!isEmpty && !read_only) {
         toSendData[key] = value;
       }
     });