Add system options UI (#3501)

* Add system options UI

* Tweak translation

src/data/config_entries.ts

@@ -10,6 +10,10 @@ export interface ConfigEntry {
   supports_options: boolean;
 }
 
+export interface ConfigEntrySystemOptions {
+  disable_new_entities: boolean;
+}
+
 export const getConfigEntries = (hass: HomeAssistant) =>
   hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry");
 
@@ -17,3 +21,23 @@ export const deleteConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
   hass.callApi<{
     require_restart: boolean;
   }>("DELETE", `config/config_entries/entry/${configEntryId}`);
+
+export const getConfigEntrySystemOptions = (
+  hass: HomeAssistant,
+  configEntryId: string
+) =>
+  hass.callWS<ConfigEntrySystemOptions>({
+    type: "config_entries/system_options/list",
+    entry_id: configEntryId,
+  });
+
+export const updateConfigEntrySystemOptions = (
+  hass: HomeAssistant,
+  configEntryId: string,
+  params: Partial<ConfigEntrySystemOptions>
+) =>
+  hass.callWS({
+    type: "config_entries/system_options/update",
+    entry_id: configEntryId,
+    ...params,
+  });

src/data/config_flow.ts

@@ -37,7 +37,7 @@ export const getConfigFlowHandlers = (hass: HomeAssistant) =>
 
 const fetchConfigFlowInProgress = (conn) =>
   conn.sendMessagePromise({
-    type: "config/config_entries/flow",
+    type: "config_entries/flow/progress",
   });
 
 const subscribeConfigFlowInProgressUpdates = (conn, store) =>

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -0,0 +1,175 @@
+import {
+  LitElement,
+  html,
+  css,
+  CSSResult,
+  TemplateResult,
+  customElement,
+  property,
+} from "lit-element";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-input/paper-input";
+
+import "../../components/dialog/ha-paper-dialog";
+import { HomeAssistant } from "../../types";
+import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
+import {
+  getConfigEntrySystemOptions,
+  updateConfigEntrySystemOptions,
+} from "../../data/config_entries";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { haStyleDialog } from "../../resources/styles";
+
+@customElement("dialog-config-entry-system-options")
+class DialogConfigEntrySystemOptions extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() private _disableNewEntities!: boolean;
+  @property() private _error?: string;
+  @property() private _params?: ConfigEntrySystemOptionsDialogParams;
+  @property() private _loading?: boolean;
+  @property() private _submitting?: boolean;
+
+  public async showDialog(
+    params: ConfigEntrySystemOptionsDialogParams
+  ): Promise<void> {
+    this._params = params;
+    this._error = undefined;
+    this._loading = true;
+    const systemOptions = await getConfigEntrySystemOptions(
+      this.hass,
+      params.entry.entry_id
+    );
+    this._loading = false;
+    this._disableNewEntities = systemOptions.disable_new_entities;
+    await this.updateComplete;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._params) {
+      return html``;
+    }
+
+    return html`
+      <ha-paper-dialog
+        with-backdrop
+        opened
+        @opened-changed="${this._openedChanged}"
+      >
+        <h2>
+          ${this.hass.localize("ui.dialogs.config_entry_system_options.title")}
+        </h2>
+        <paper-dialog-scrollable>
+          ${this._loading
+            ? html`
+                <div class="init-spinner">
+                  <paper-spinner-lite active></paper-spinner-lite>
+                </div>
+              `
+            : html`
+                ${this._error
+                  ? html`
+                      <div class="error">${this._error}</div>
+                    `
+                  : ""}
+                <div class="form">
+                  <paper-toggle-button
+                    .checked=${!this._disableNewEntities}
+                    @checked-changed=${this._disableNewEntitiesChanged}
+                    .disabled=${this._submitting}
+                  >
+                    <div>
+                      ${this.hass.localize(
+                        "ui.dialogs.config_entry_system_options.enable_new_entities_label"
+                      )}
+                    </div>
+                    <div class="secondary">
+                      ${this.hass.localize(
+                        "ui.dialogs.config_entry_system_options.enable_new_entities_description"
+                      )}
+                    </div>
+                  </paper-toggle-button>
+                </div>
+              `}
+        </paper-dialog-scrollable>
+        ${!this._loading
+          ? html`
+              <div class="paper-dialog-buttons">
+                <mwc-button
+                  @click="${this._updateEntry}"
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.entity_registry.editor.update"
+                  )}
+                </mwc-button>
+              </div>
+            `
+          : ""}
+      </ha-paper-dialog>
+    `;
+  }
+
+  private _disableNewEntitiesChanged(ev: PolymerChangedEvent<boolean>): void {
+    this._error = undefined;
+    this._disableNewEntities = !ev.detail.value;
+  }
+
+  private async _updateEntry(): Promise<void> {
+    this._submitting = true;
+    try {
+      await updateConfigEntrySystemOptions(
+        this.hass,
+        this._params!.entry.entry_id,
+        {
+          disable_new_entities: this._disableNewEntities,
+        }
+      );
+      this._params = undefined;
+    } catch (err) {
+      this._error = err.message || "Unknown error";
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
+    if (!(ev.detail as any).value) {
+      this._params = undefined;
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        ha-paper-dialog {
+          min-width: 400px;
+          max-width: 500px;
+        }
+        .init-spinner {
+          padding: 50px 100px;
+          text-align: center;
+        }
+
+        .form {
+          padding-bottom: 24px;
+          color: var(--primary-text-color);
+        }
+
+        .secondary {
+          color: var(--secondary-text-color);
+        }
+
+        .error {
+          color: var(--google-red-500);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-config-entry-system-options": DialogConfigEntrySystemOptions;
+  }
+}

src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts

@@ -0,0 +1,24 @@
+import { fireEvent } from "../../common/dom/fire_event";
+import { ConfigEntry } from "../../data/config_entries";
+
+export interface ConfigEntrySystemOptionsDialogParams {
+  entry: ConfigEntry;
+  // updateEntry: (
+  //   updates: Partial<EntityRegistryEntryUpdateParams>
+  // ) => Promise<unknown>;
+  // removeEntry: () => Promise<boolean>;
+}
+
+export const loadConfigEntrySystemOptionsDialog = () =>
+  import(/* webpackChunkName: "config-entry-system-options" */ "./dialog-config-entry-system-options");
+
+export const showConfigEntrySystemOptionsDialog = (
+  element: HTMLElement,
+  systemLogDetailParams: ConfigEntrySystemOptionsDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-config-entry-system-options",
+    dialogImport: loadConfigEntrySystemOptionsDialog,
+    dialogParams: systemLogDetailParams,
+  });
+};

src/dialogs/device-registry-detail/dialog-device-registry-detail.ts

@@ -14,16 +14,16 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@material/mwc-button/mwc-button";
 
-import "../../../components/dialog/ha-paper-dialog";
+import "../../components/dialog/ha-paper-dialog";
 
 import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
-import { PolymerChangedEvent } from "../../../polymer-types";
+import { PolymerChangedEvent } from "../../polymer-types";
-import { haStyleDialog } from "../../../resources/styles";
+import { haStyleDialog } from "../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant } from "../../types";
 import {
   subscribeAreaRegistry,
   AreaRegistryEntry,
-} from "../../../data/area_registry";
+} from "../../data/area_registry";
 
 @customElement("dialog-device-registry-detail")
 class DialogDeviceRegistryDetail extends LitElement {
@@ -74,7 +74,7 @@ class DialogDeviceRegistryDetail extends LitElement {
         opened
         @opened-changed="${this._openedChanged}"
       >
-        <h2>${device.name}</h2>
+        <h2>${device.name || "Unnamed device"}</h2>
         <paper-dialog-scrollable>
           ${this._error
             ? html`

src/dialogs/device-registry-detail/show-dialog-device-registry-detail.ts

@@ -1,8 +1,8 @@
-import { fireEvent } from "../../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceRegistryEntry,
   DeviceRegistryEntryMutableParams,
-} from "../../../data/device_registry";
+} from "../../data/device_registry";
 
 export interface DeviceRegistryDetailDialogParams {
   device: DeviceRegistryEntry;

src/panels/config/integrations/config-entry/ha-ce-entities-card.js

@@ -3,13 +3,13 @@ import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-card";
+import "../../../../components/ha-card";
-import "../../../layouts/hass-subpage";
+import "../../../../layouts/hass-subpage";
 
-import { EventsMixin } from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixIn from "../../../mixins/localize-mixin";
+import LocalizeMixIn from "../../../../mixins/localize-mixin";
-import "../../../components/entity/state-badge";
+import "../../../../components/entity/state-badge";
-import { computeEntityRegistryName } from "../../../data/entity_registry";
+import { computeEntityRegistryName } from "../../../../data/entity_registry";
 
 /*
  * @appliesMixin LocalizeMixIn

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

@@ -1,21 +1,25 @@
 import memoizeOne from "memoize-one";
-import "../../../layouts/hass-subpage";
+import "../../../../layouts/hass-subpage";
-import "../../../layouts/hass-error-screen";
+import "../../../../layouts/hass-error-screen";
 
-import "../../../components/entity/state-badge";
+import "../../../../components/entity/state-badge";
-import { compare } from "../../../common/string/compare";
+import { compare } from "../../../../common/string/compare";
 
 import "./ha-device-card";
 import "./ha-ce-entities-card";
-import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
+import { showOptionsFlowDialog } from "../../../../dialogs/config-flow/show-dialog-options-flow";
 import { property, LitElement, CSSResult, css, html } from "lit-element";
-import { navigate } from "../../../common/navigate";
+import { navigate } from "../../../../common/navigate";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant } from "../../../../types";
-import { ConfigEntry, deleteConfigEntry } from "../../../data/config_entries";
+import {
-import { EntityRegistryEntry } from "../../../data/entity_registry";
+  ConfigEntry,
-import { DeviceRegistryEntry } from "../../../data/device_registry";
+  deleteConfigEntry,
-import { AreaRegistryEntry } from "../../../data/area_registry";
+} from "../../../../data/config_entries";
-import { fireEvent } from "../../../common/dom/fire_event";
+import { EntityRegistryEntry } from "../../../../data/entity_registry";
+import { DeviceRegistryEntry } from "../../../../data/device_registry";
+import { AreaRegistryEntry } from "../../../../data/area_registry";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { showConfigEntrySystemOptionsDialog } from "../../../../dialogs/config-entry-system-options/show-dialog-config-entry-system-options";
 
 class HaConfigEntryPage extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -92,6 +96,11 @@ class HaConfigEntryPage extends LitElement {
               ></paper-icon-button>
             `
           : ""}
+        <paper-icon-button
+          slot="toolbar-icon"
+          icon="hass:message-settings-variant"
+          @click=${this._showSystemOptions}
+        ></paper-icon-button>
         <paper-icon-button
           slot="toolbar-icon"
           icon="hass:delete"
@@ -142,6 +151,12 @@ class HaConfigEntryPage extends LitElement {
     showOptionsFlowDialog(this, this._configEntry!);
   }
 
+  private _showSystemOptions() {
+    showConfigEntrySystemOptionsDialog(this, {
+      entry: this._configEntry!,
+    });
+  }
+
   private _removeEntry() {
     if (
       !confirm(

src/panels/config/integrations/config-entry/ha-device-card.js

@@ -6,24 +6,23 @@ import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-card";
+import "../../../../components/ha-card";
-import "../../../layouts/hass-subpage";
+import "../../../../layouts/hass-subpage";
 
-import { EventsMixin } from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
+import LocalizeMixin from "../../../../mixins/localize-mixin";
-import computeStateName from "../../../common/entity/compute_state_name";
+import computeStateName from "../../../../common/entity/compute_state_name";
-import "../../../components/entity/state-badge";
+import "../../../../components/entity/state-badge";
-import { compare } from "../../../common/string/compare";
+import { compare } from "../../../../common/string/compare";
 import {
   subscribeDeviceRegistry,
   updateDeviceRegistryEntry,
-} from "../../../data/device_registry";
+} from "../../../../data/device_registry";
-import { subscribeAreaRegistry } from "../../../data/area_registry";
+import { subscribeAreaRegistry } from "../../../../data/area_registry";
-
 import {
-  showDeviceRegistryDetailDialog,
   loadDeviceRegistryDetailDialog,
-} from "./show-dialog-device-registry-detail";
+  showDeviceRegistryDetailDialog,
+} from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
 
 function computeEntityName(hass, entity) {
   if (entity.name) return entity.name;

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

@@ -1,7 +1,7 @@
 import "@polymer/app-route/app-route";
 
 import "./ha-config-entries-dashboard";
-import "./ha-config-entry-page";
+import "./config-entry/ha-config-entry-page";
 import { compare } from "../../../common/string/compare";
 import {
   subscribeAreaRegistry,

src/translations/en.json

@@ -545,6 +545,11 @@
         "success": {
           "description": "Options successfully saved."
         }
+      },
+      "config_entry_system_options": {
+        "title": "System Options",
+        "enable_new_entities_label": "Enable newly added entities.",
+        "enable_new_entities_description": "If disabled, newly discovered entities will not be automatically added to Home Assistant."
       }
     },
     "duration": {