Add conditional form schema

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230607.0"
+version      = "20230608.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/ha-form/ha-form-conditional.ts

@@ -0,0 +1,74 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../types";
+import "./ha-form";
+import type {
+  HaFormDataContainer,
+  HaFormElement,
+  HaFormConditionalSchema,
+  HaFormSchema,
+} from "./types";
+
+@customElement("ha-form-conditional")
+export class HaFormConditional extends LitElement implements HaFormElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public data!: HaFormDataContainer;
+
+  @property({ attribute: false }) public schema!: HaFormConditionalSchema;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
+
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("schema") || changedProps.has("data")) {
+      this.toggleAttribute("hidden", !this.schema.condition(this.data));
+    }
+  }
+
+  protected render() {
+    if (!this.schema.condition(this.data)) {
+      return nothing;
+    }
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.data}
+        .schema=${this.schema.schema}
+        .disabled=${this.disabled}
+        .computeLabel=${this.computeLabel}
+        .computeHelper=${this.computeHelper}
+      ></ha-form>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host([hidden]) {
+        display: none !important;
+      }
+      :host ha-form {
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-form-conditional": HaFormConditional;
+  }
+}

src/components/ha-form/ha-form.ts

@@ -21,6 +21,7 @@ const LOAD_ELEMENTS = {
   float: () => import("./ha-form-float"),
   grid: () => import("./ha-form-grid"),
   expandable: () => import("./ha-form-expandable"),
+  conditional: () => import("./ha-form-conditional"),
   integer: () => import("./ha-form-integer"),
   multi_select: () => import("./ha-form-multi_select"),
   positive_time_period_dict: () =>
@@ -189,12 +190,13 @@ export class HaForm extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      .root {
+        display: grid;
+        row-gap: 24px;
+      }
       .root > * {
         display: block;
       }
-      .root > *:not([own-margin]):not(:last-child) {
-        margin-bottom: 24px;
-      }
       ha-alert[own-margin] {
         margin-bottom: 4px;
       }

src/components/ha-form/types.ts

@@ -13,7 +13,8 @@ export type HaFormSchema =
   | HaFormTimeSchema
   | HaFormSelector
   | HaFormGridSchema
-  | HaFormExpandableSchema;
+  | HaFormExpandableSchema
+  | HaFormConditionalSchema;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -47,6 +48,13 @@ export interface HaFormExpandableSchema extends HaFormBaseSchema {
   schema: readonly HaFormSchema[];
 }
 
+export interface HaFormConditionalSchema extends HaFormBaseSchema {
+  type: "conditional";
+  name: "";
+  condition: (data: HaFormDataContainer) => boolean;
+  schema: readonly HaFormSchema[];
+}
+
 export interface HaFormSelector extends HaFormBaseSchema {
   type?: never;
   selector: Selector;
@@ -99,7 +107,10 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
 export type SchemaUnion<
   SchemaArray extends readonly HaFormSchema[],
   Schema = SchemaArray[number]
-> = Schema extends HaFormGridSchema | HaFormExpandableSchema
+> = Schema extends
+  | HaFormGridSchema
+  | HaFormExpandableSchema
+  | HaFormConditionalSchema
   ? SchemaUnion<Schema["schema"]>
   : Schema;
 

src/components/ha-related-items.ts

@@ -1,6 +1,10 @@
 import "@material/mwc-list/mwc-list";
-import { mdiDevices, mdiPaletteSwatch, mdiSofa } from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
+import {
+  mdiAlertCircleOutline,
+  mdiDevices,
+  mdiPaletteSwatch,
+  mdiSofa,
+} from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -11,10 +15,11 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { Blueprints, fetchBlueprints } from "../data/blueprint";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
-import { SceneEntity } from "../data/scene";
 import { findRelated, ItemType, RelatedResult } from "../data/search";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
@@ -72,13 +77,55 @@ export class HaRelatedItems extends LitElement {
     }
   }
 
+  private _relatedEntities = memoizeOne((entityIds: string[]) =>
+    this._toEntities(entityIds)
+  );
+
+  private _relatedAutomations = memoizeOne((automationEntityIds: string[]) =>
+    this._toEntities(automationEntityIds)
+  );
+
+  private _relatedScripts = memoizeOne((scriptEntityIds: string[]) =>
+    this._toEntities(scriptEntityIds)
+  );
+
+  private _relatedGroups = memoizeOne((groupEntityIds: string[]) =>
+    this._toEntities(groupEntityIds)
+  );
+
+  private _relatedScenes = memoizeOne((sceneEntityIds: string[]) =>
+    this._toEntities(sceneEntityIds)
+  );
+
+  private _toEntities = (entityIds: string[]) =>
+    entityIds
+      .map((entityId) => this.hass.states[entityId])
+      .filter((entity) => entity)
+      .sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.attributes.friendly_name ?? a.entity_id,
+          b.attributes.friendly_name ?? b.entity_id,
+          this.hass.language
+        )
+      );
+
   protected render() {
     if (!this._related) {
       return nothing;
     }
     if (Object.keys(this._related).length === 0) {
       return html`
-        ${this.hass.localize("ui.components.related-items.no_related_found")}
+        <mwc-list>
+          <ha-list-item hasMeta graphic="icon" noninteractive>
+            <ha-svg-icon
+              .path=${mdiAlertCircleOutline}
+              slot="graphic"
+            ></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.components.related-items.no_related_found"
+            )}
+          </ha-list-item>
+        </mwc-list>
       `;
     }
     return html`
@@ -92,7 +139,7 @@ export class HaRelatedItems extends LitElement {
                   (configEntry) => configEntry.entry_id === relatedConfigEntryId
                 );
                 if (!entry) {
-                  return "";
+                  return nothing;
                 }
                 return html`
                   <a
@@ -117,7 +164,7 @@ export class HaRelatedItems extends LitElement {
                 `;
               })}</mwc-list
             >`
-        : ""}
+        : nothing}
       ${this._related.device
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.device")}
@@ -125,7 +172,7 @@ export class HaRelatedItems extends LitElement {
             ${this._related.device.map((relatedDeviceId) => {
               const device = this.hass.devices[relatedDeviceId];
               if (!device) {
-                return "";
+                return nothing;
               }
               return html`
                 <a
@@ -144,7 +191,7 @@ export class HaRelatedItems extends LitElement {
               `;
             })}            </mwc-list>
             `
-        : ""}
+        : nothing}
       ${this._related.area
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.area")}
@@ -153,7 +200,7 @@ export class HaRelatedItems extends LitElement {
               >${this._related.area.map((relatedAreaId) => {
                 const area = this.hass.areas[relatedAreaId];
                 if (!area) {
-                  return "";
+                  return nothing;
                 }
                 return html`
                   <a
@@ -183,21 +230,16 @@ export class HaRelatedItems extends LitElement {
                 `;
               })}</mwc-list
             >`
-        : ""}
+        : nothing}
       ${this._related.entity
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
             <mwc-list>
-              ${this._related.entity.map((entityId) => {
-                const entity: HassEntity | undefined =
-                  this.hass.states[entityId];
-                if (!entity) {
-                  return "";
-                }
-                return html`
+              ${this._relatedEntities(this._related.entity).map(
+                (entity) => html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${entityId}
+                    .entityId=${entity.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -208,24 +250,20 @@ export class HaRelatedItems extends LitElement {
                     ${entity.attributes.friendly_name || entity.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
-              })}
+                `
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.group
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.group")}</h3>
             <mwc-list>
-              ${this._related.group.map((groupId) => {
-                const group: HassEntity | undefined = this.hass.states[groupId];
-                if (!group) {
-                  return "";
-                }
-                return html`
+              ${this._relatedGroups(this._related.group).map(
+                (group) => html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${groupId}
+                    .entityId=${group.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -236,25 +274,20 @@ export class HaRelatedItems extends LitElement {
                     ${group.attributes.friendly_name || group.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
-              })}
+                `
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.scene
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.scene")}</h3>
             <mwc-list>
-              ${this._related.scene.map((sceneId) => {
-                const scene: SceneEntity | undefined =
-                  this.hass.states[sceneId];
-                if (!scene) {
-                  return "";
-                }
-                return html`
+              ${this._relatedScenes(this._related.scene).map(
+                (scene) => html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${sceneId}
+                    .entityId=${scene.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -265,11 +298,11 @@ export class HaRelatedItems extends LitElement {
                     ${scene.attributes.friendly_name || scene.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
-              })}
+                `
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.automation_blueprint
         ? html`
             <h3>
@@ -298,23 +331,18 @@ export class HaRelatedItems extends LitElement {
               })}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.automation
         ? html`
             <h3>
               ${this.hass.localize("ui.components.related-items.automation")}
             </h3>
             <mwc-list>
-              ${this._related.automation.map((automationId) => {
-                const automation: HassEntity | undefined =
-                  this.hass.states[automationId];
-                if (!automation) {
-                  return "";
-                }
-                return html`
+              ${this._relatedAutomations(this._related.automation).map(
+                (automation) => html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${automationId}
+                    .entityId=${automation.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -326,11 +354,11 @@ export class HaRelatedItems extends LitElement {
                     automation.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
-              })}
+                `
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.script_blueprint
         ? html`
             <h3>
@@ -359,21 +387,16 @@ export class HaRelatedItems extends LitElement {
               })}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.script
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.script")}</h3>
             <mwc-list>
-              ${this._related.script.map((scriptId) => {
-                const script: HassEntity | undefined =
-                  this.hass.states[scriptId];
-                if (!script) {
-                  return "";
-                }
-                return html`
+              ${this._relatedScripts(this._related.script).map(
+                (script) => html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${scriptId}
+                    .entityId=${script.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -384,11 +407,11 @@ export class HaRelatedItems extends LitElement {
                     ${script.attributes.friendly_name || script.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
-              })}
+                `
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
     `;
   }
 

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

@@ -266,7 +266,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                         path=${mdiPackageVariant}
                       ></ha-svg-icon>
                       ${this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
+                        "ui.panel.config.integrations.config_entry.custom_integration"
                       )}</ha-alert
                     >`
                   : ""}
@@ -422,7 +422,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                           .flow=${flow}
                           @click=${this._continueFlow}
                           .label=${this.hass.localize(
-                            "config_entry.disabled_by.config_entry"
+                            "ui.panel.config.integrations.configure"
                           )}
                         ></ha-button>
                       </ha-list-item>`

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

@@ -65,28 +65,28 @@ export class HaIntegrationCard extends LitElement {
           "debug-logging": Boolean(debugLoggingEnabled),
         })}
       >
-        <ha-integration-header
-          .hass=${this.hass}
-          .domain=${this.domain}
-          .localizedDomainName=${this.items[0].localized_domain_name}
-          .banner=${state !== "loaded"
-            ? this.hass.localize(
-                `ui.panel.config.integrations.config_entry.state.${state}`
-              )
-            : debugLoggingEnabled
-            ? this.hass.localize(
-                "ui.panel.config.integrations.config_entry.debug_logging_enabled"
-              )
-            : undefined}
-          .manifest=${this.manifest}
-        >
-          <a
-            href=${`/config/integrations/integration/${this.domain}`}
-            slot="header-button"
+        <a href=${`/config/integrations/integration/${this.domain}`}>
+          <ha-integration-header
+            .hass=${this.hass}
+            .domain=${this.domain}
+            .localizedDomainName=${this.items[0].localized_domain_name}
+            .banner=${state !== "loaded"
+              ? this.hass.localize(
+                  `ui.panel.config.integrations.config_entry.state.${state}`
+                )
+              : debugLoggingEnabled
+              ? this.hass.localize(
+                  "ui.panel.config.integrations.config_entry.debug_logging_enabled"
+                )
+              : undefined}
+            .manifest=${this.manifest}
           >
-            <ha-icon-button .path=${mdiCogOutline}></ha-icon-button>
-          </a>
-        </ha-integration-header>
+            <ha-icon-button
+              slot="header-button"
+              .path=${mdiCogOutline}
+            ></ha-icon-button>
+          </ha-integration-header>
+        </a>
 
         ${this._renderSingleEntry()}
       </ha-card>
@@ -249,7 +249,7 @@ export class HaIntegrationCard extends LitElement {
         }
         a {
           text-decoration: none;
-          color: var(--primary-color);
+          color: var(--primary-text-color);
         }
         a ha-icon-button {
           color: var(--secondary-text-color);

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

@@ -50,7 +50,7 @@ export class HaIntegrationHeader extends LitElement {
         icons.push([
           mdiPackageVariant,
           this.hass.localize(
-            "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
+            "ui.panel.config.integrations.config_entry.custom_integration"
           ),
         ]);
       }

src/panels/config/integrations/ha-integration-list-item.ts

@@ -84,7 +84,7 @@ export class HaIntegrationListItem extends ListItemBase {
             ><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
             ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
+                "ui.panel.config.integrations.config_entry.custom_integration"
               )}</simple-tooltip
             ></span
           >`

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -217,7 +217,7 @@ export const showRepairsFlowDialog = (
         return hass.localize(
           `component.${issue.domain}.issues.${
             issue.translation_key || issue.issue_id
-          }.fix_flow.step.${step.step_id}.menu_issues.${option}`,
+          }.fix_flow.step.${step.step_id}.menu_options.${option}`,
           step.description_placeholders
         );
       },

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -1,6 +1,5 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import {
   array,
   assert,
@@ -13,7 +12,10 @@ import {
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { GaugeCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
@@ -41,6 +43,75 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  {
+    name: "entity",
+    selector: {
+      entity: {
+        domain: ["counter", "input_number", "number", "sensor"],
+      },
+    },
+  },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      { name: "name", selector: { text: {} } },
+      { name: "unit", selector: { text: {} } },
+    ],
+  },
+  { name: "theme", selector: { theme: {} } },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      {
+        name: "min",
+        default: DEFAULT_MIN,
+        selector: { number: { mode: "box" } },
+      },
+      {
+        name: "max",
+        default: DEFAULT_MAX,
+        selector: { number: { mode: "box" } },
+      },
+    ],
+  },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      { name: "needle", selector: { boolean: {} } },
+      { name: "show_severity", selector: { boolean: {} } },
+    ],
+  },
+  {
+    name: "",
+    type: "conditional",
+    condition: (data) => !!data.show_severity,
+    schema: [
+      {
+        name: "severity",
+        type: "grid",
+        schema: [
+          {
+            name: "green",
+            selector: { number: { mode: "box" } },
+          },
+          {
+            name: "yellow",
+            selector: { number: { mode: "box" } },
+          },
+          {
+            name: "red",
+            selector: { number: { mode: "box" } },
+          },
+        ],
+      },
+    ],
+  },
+] as const satisfies readonly HaFormSchema[];
+
 @customElement("hui-gauge-card-editor")
 export class HuiGaugeCardEditor
   extends LitElement
@@ -55,81 +126,11 @@ export class HuiGaugeCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (showSeverity: boolean) =>
-      [
-        {
-          name: "entity",
-          selector: {
-            entity: {
-              domain: ["counter", "input_number", "number", "sensor"],
-            },
-          },
-        },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            { name: "unit", selector: { text: {} } },
-          ],
-        },
-        { name: "theme", selector: { theme: {} } },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            {
-              name: "min",
-              default: DEFAULT_MIN,
-              selector: { number: { mode: "box" } },
-            },
-            {
-              name: "max",
-              default: DEFAULT_MAX,
-              selector: { number: { mode: "box" } },
-            },
-          ],
-        },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "needle", selector: { boolean: {} } },
-            { name: "show_severity", selector: { boolean: {} } },
-          ],
-        },
-        ...(showSeverity
-          ? ([
-              {
-                name: "severity",
-                type: "grid",
-                schema: [
-                  {
-                    name: "green",
-                    selector: { number: { mode: "box" } },
-                  },
-                  {
-                    name: "yellow",
-                    selector: { number: { mode: "box" } },
-                  },
-                  {
-                    name: "red",
-                    selector: { number: { mode: "box" } },
-                  },
-                ],
-              },
-            ] as const)
-          : []),
-      ] as const
-  );
-
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
-    const schema = this._schema(this._config!.severity !== undefined);
     const data = {
       show_severity: this._config!.severity !== undefined,
       ...this._config,
@@ -139,7 +140,7 @@ export class HuiGaugeCardEditor
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -153,7 +154,7 @@ export class HuiGaugeCardEditor
       config = {
         ...config,
         severity: {
-          green: config.green || config.severity?.green || 0,
+          green: config.green || config.severity?.green,
           yellow: config.yellow || config.severity?.yellow || 0,
           red: config.red || config.severity?.red || 0,
         },
@@ -170,9 +171,7 @@ export class HuiGaugeCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "name":
         return this.hass!.localize(

src/translations/en.json

@@ -3320,7 +3320,7 @@
                 "device": "device"
               }
             },
-            "provided_by_custom_integration": "Provided by a custom integration",
+            "custom_integration": "Custom integration",
             "depends_on_cloud": "Depends on the cloud",
             "yaml_only": "Needs manual configuration",
             "disabled_polling": "Automatic polling for updated data disabled",