Use selectors for add-on configurations (#12234)

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -39,7 +39,14 @@ import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
-const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
+const SUPPORTED_UI_TYPES = [
+  "string",
+  "select",
+  "boolean",
+  "integer",
+  "float",
+  "schema",
+];
 
 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   new Type("!secret", {
@@ -78,16 +85,56 @@ class HassioAddonConfig extends LitElement {
     this.addon.translations.en?.configuration?.[entry.name].name ||
     entry.name;
 
-  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
-    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
-    schema.map((entry) =>
-      entry.type === "select"
-        ? {
-            ...entry,
-            options: entry.options.map((option) => [option, option]),
-          }
-        : entry
-    )
+  public computeHelper = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.description ||
+    this.addon.translations.en?.configuration?.[entry.name].description ||
+    "";
+
+  private _convertSchema = memoizeOne(
+    // Convert supervisor schema to selectors
+    (schema: Record<string, any>): HaFormSchema[] =>
+      schema.map((entry) =>
+        entry.type === "select"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { select: { options: entry.options } },
+            }
+          : entry.type === "string"
+          ? entry.multiple
+            ? {
+                name: entry.name,
+                required: entry.required,
+                selector: {
+                  select: { options: [], multiple: true, custom_value: true },
+                },
+              }
+            : {
+                name: entry.name,
+                required: entry.required,
+                selector: { text: { type: "text" } },
+              }
+          : entry.type === "boolean"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { boolean: {} },
+            }
+          : entry.type === "schema"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { object: {} },
+            }
+          : entry.type === "float" || entry.type === "integer"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { number: { mode: "box" } },
+            }
+          : entry
+      )
   );
 
   private _filteredShchema = memoizeOne(
@@ -140,7 +187,8 @@ class HassioAddonConfig extends LitElement {
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
-                .schema=${this._schema(
+                .computeHelper=${this.computeHelper}
+                .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
                     : this._filteredShchema(
@@ -197,8 +245,9 @@ class HassioAddonConfig extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._canShowSchema = !this.addon.schema!.find(
-      // @ts-ignore
-      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+      (entry) =>
+        // @ts-ignore
+        !SUPPORTED_UI_TYPES.includes(entry.type)
     );
     this._yamlMode = !this._canShowSchema;
   }

src/components/ha-selector/ha-selector-object.ts

@@ -3,6 +3,7 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-yaml-editor";
+import "../ha-input-helper-text";
 
 @customElement("ha-selector-object")
 export class HaObjectSelector extends LitElement {
@@ -12,6 +13,8 @@ export class HaObjectSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: string;
 
   @property({ type: Boolean }) public disabled = false;
@@ -20,13 +23,17 @@ export class HaObjectSelector extends LitElement {
 
   protected render() {
     return html`<ha-yaml-editor
-      .hass=${this.hass}
-      .readonly=${this.disabled}
-      .required=${this.required}
-      .placeholder=${this.placeholder}
-      .defaultValue=${this.value}
-      @value-changed=${this._handleChange}
-    ></ha-yaml-editor>`;
+        .hass=${this.hass}
+        .readonly=${this.disabled}
+        .label=${this.label}
+        .required=${this.required}
+        .placeholder=${this.placeholder}
+        .defaultValue=${this.value}
+        @value-changed=${this._handleChange}
+      ></ha-yaml-editor>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""} `;
   }
 
   private _handleChange(ev) {