Convert config server control to Lit (#6141)

src/data/core.ts

@@ -12,6 +12,11 @@ export interface ConfigUpdateValues {
   internal_url?: string | null;
 }
 
+export interface CheckConfigResult {
+  result: "valid" | "invalid";
+  errors: string | null;
+}
+
 export const saveCoreConfig = (
   hass: HomeAssistant,
   values: Partial<ConfigUpdateValues>
@@ -25,3 +30,6 @@ export const detectCoreConfig = (hass: HomeAssistant) =>
   hass.callWS<Partial<ConfigUpdateValues>>({
     type: "config/core/detect",
   });
+
+export const checkCoreConfig = (hass: HomeAssistant) =>
+  hass.callApi<CheckConfigResult>("POST", "config/core/check_config");

src/panels/config/server_control/ha-config-section-server-control.js

@@ -1,267 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import "../../../components/buttons/ha-call-service-button";
-import "../../../components/ha-card";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
-import "../ha-config-section";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaConfigSectionServerControl extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        .validate-container {
-          @apply --layout-vertical;
-          @apply --layout-center-center;
-          height: 140px;
-        }
-
-        .validate-result {
-          color: var(--google-green-500);
-          font-weight: 500;
-          margin-bottom: 1em;
-        }
-
-        .config-invalid {
-          margin: 1em 0;
-        }
-
-        .config-invalid .text {
-          color: var(--google-red-500);
-          font-weight: 500;
-        }
-
-        .config-invalid mwc-button {
-          float: right;
-        }
-
-        .validate-log {
-          white-space: pre-wrap;
-          direction: ltr;
-        }
-      </style>
-      <ha-config-section is-wide="[[isWide]]">
-        <span slot="header"
-          >[[localize('ui.panel.config.server_control.caption')]]</span
-        >
-        <span slot="introduction"
-          >[[localize('ui.panel.config.server_control.description')]]</span
-        >
-
-        <template is="dom-if" if="[[showAdvanced]]">
-          <ha-card
-            header="[[localize('ui.panel.config.server_control.section.validation.heading')]]"
-          >
-            <div class="card-content">
-              [[localize('ui.panel.config.server_control.section.validation.introduction')]]
-              <template is="dom-if" if="[[!validateLog]]">
-                <div class="validate-container">
-                  <template is="dom-if" if="[[!validating]]">
-                    <template is="dom-if" if="[[isValid]]">
-                      <div class="validate-result" id="result">
-                        [[localize('ui.panel.config.server_control.section.validation.valid')]]
-                      </div>
-                    </template>
-                    <mwc-button raised="" on-click="validateConfig">
-                      [[localize('ui.panel.config.server_control.section.validation.check_config')]]
-                    </mwc-button>
-                  </template>
-                  <template is="dom-if" if="[[validating]]">
-                    <paper-spinner active=""></paper-spinner>
-                  </template>
-                </div>
-              </template>
-              <template is="dom-if" if="[[validateLog]]">
-                <div class="config-invalid">
-                  <span class="text">
-                    [[localize('ui.panel.config.server_control.section.validation.invalid')]]
-                  </span>
-                  <mwc-button raised="" on-click="validateConfig">
-                    [[localize('ui.panel.config.server_control.section.validation.check_config')]]
-                  </mwc-button>
-                </div>
-                <div id="configLog" class="validate-log">[[validateLog]]</div>
-              </template>
-            </div>
-          </ha-card>
-
-          <ha-card
-            header="[[localize('ui.panel.config.server_control.section.reloading.heading')]]"
-          >
-            <div class="card-content">
-              [[localize('ui.panel.config.server_control.section.reloading.introduction')]]
-            </div>
-            <div class="card-actions">
-              <ha-call-service-button
-                hass="[[hass]]"
-                domain="homeassistant"
-                service="reload_core_config"
-                >[[localize('ui.panel.config.server_control.section.reloading.core')]]
-              </ha-call-service-button>
-            </div>
-            <template is="dom-if" if="[[groupLoaded(hass)]]">
-              <div class="card-actions">
-                <ha-call-service-button
-                  hass="[[hass]]"
-                  domain="group"
-                  service="reload"
-                  >[[localize('ui.panel.config.server_control.section.reloading.group')]]
-                </ha-call-service-button>
-              </div>
-            </template>
-            <template is="dom-if" if="[[automationLoaded(hass)]]">
-              <div class="card-actions">
-                <ha-call-service-button
-                  hass="[[hass]]"
-                  domain="automation"
-                  service="reload"
-                  >[[localize('ui.panel.config.server_control.section.reloading.automation')]]
-                </ha-call-service-button>
-              </div>
-            </template>
-            <template is="dom-if" if="[[scriptLoaded(hass)]]">
-              <div class="card-actions">
-                <ha-call-service-button
-                  hass="[[hass]]"
-                  domain="script"
-                  service="reload"
-                  >[[localize('ui.panel.config.server_control.section.reloading.script')]]
-                </ha-call-service-button>
-              </div>
-            </template>
-            <template is="dom-if" if="[[sceneLoaded(hass)]]">
-              <div class="card-actions">
-                <ha-call-service-button
-                  hass="[[hass]]"
-                  domain="scene"
-                  service="reload"
-                  >[[localize('ui.panel.config.server_control.section.reloading.scene')]]
-                </ha-call-service-button>
-              </div>
-            </template>
-            <template is="dom-if" if="[[personLoaded(hass)]]">
-              <div class="card-actions">
-                <ha-call-service-button
-                  hass="[[hass]]"
-                  domain="person"
-                  service="reload"
-                  >[[localize('ui.panel.config.server_control.section.reloading.person')]]
-                </ha-call-service-button>
-              </div>
-            </template>
-            <div class="card-actions">
-              <ha-call-service-button
-                hass="[[hass]]"
-                domain="zone"
-                service="reload"
-                >[[localize('ui.panel.config.server_control.section.reloading.zone')]]
-              </ha-call-service-button>
-            </div>
-          </ha-card>
-        </template>
-        <ha-card
-          header="[[localize('ui.panel.config.server_control.section.server_management.heading')]]"
-        >
-          <div class="card-content">
-            [[localize('ui.panel.config.server_control.section.server_management.introduction')]]
-          </div>
-          <div class="card-actions warning">
-            <ha-call-service-button
-              class="warning"
-              hass="[[hass]]"
-              domain="homeassistant"
-              service="restart"
-              confirmation="[[localize('ui.panel.config.server_control.section.server_management.confirm_restart')]]"
-              >[[localize('ui.panel.config.server_control.section.server_management.restart')]]
-            </ha-call-service-button>
-            <ha-call-service-button
-              class="warning"
-              hass="[[hass]]"
-              domain="homeassistant"
-              service="stop"
-              confirmation="[[localize('ui.panel.config.server_control.section.server_management.confirm_stop')]]"
-              >[[localize('ui.panel.config.server_control.section.server_management.stop')]]
-            </ha-call-service-button>
-          </div>
-        </ha-card>
-      </ha-config-section>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      isWide: {
-        type: Boolean,
-        value: false,
-      },
-
-      validating: {
-        type: Boolean,
-        value: false,
-      },
-
-      isValid: {
-        type: Boolean,
-        value: null,
-      },
-
-      validateLog: {
-        type: String,
-        value: "",
-      },
-
-      showAdvanced: Boolean,
-    };
-  }
-
-  groupLoaded(hass) {
-    return isComponentLoaded(hass, "group");
-  }
-
-  automationLoaded(hass) {
-    return isComponentLoaded(hass, "automation");
-  }
-
-  scriptLoaded(hass) {
-    return isComponentLoaded(hass, "script");
-  }
-
-  sceneLoaded(hass) {
-    return isComponentLoaded(hass, "scene");
-  }
-
-  personLoaded(hass) {
-    return isComponentLoaded(hass, "person");
-  }
-
-  validateConfig() {
-    this.validating = true;
-    this.validateLog = "";
-    this.isValid = null;
-
-    this.hass.callApi("POST", "config/core/check_config").then((result) => {
-      this.validating = false;
-      this.isValid = result.result === "valid";
-
-      if (!this.isValid) {
-        this.validateLog = result.errors;
-      }
-    });
-  }
-}
-
-customElements.define(
-  "ha-config-section-server-control",
-  HaConfigSectionServerControl
-);

src/panels/config/server_control/ha-config-server-control.js

@@ -1,72 +0,0 @@
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../layouts/hass-tabs-subpage";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
-import { configSections } from "../ha-panel-config";
-import "./ha-config-section-server-control";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaConfigServerControl extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        .content {
-          padding-bottom: 32px;
-        }
-
-        .border {
-          margin: 32px auto 0;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-          max-width: 1040px;
-        }
-
-        .narrow .border {
-          max-width: 640px;
-        }
-      </style>
-
-      <hass-tabs-subpage
-        hass="[[hass]]"
-        narrow="[[narrow]]"
-        route="[[route]]"
-        back-path="/config"
-        tabs="[[_computeTabs()]]"
-        show-advanced="[[showAdvanced]]"
-      >
-        <div class$="[[computeClasses(isWide)]]">
-          <ha-config-section-server-control
-            is-wide="[[isWide]]"
-            show-advanced="[[showAdvanced]]"
-            hass="[[hass]]"
-          ></ha-config-section-server-control>
-        </div>
-      </hass-tabs-subpage>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      isWide: Boolean,
-      narrow: Boolean,
-      route: Object,
-      showAdvanced: Boolean,
-    };
-  }
-
-  _computeTabs() {
-    return configSections.general;
-  }
-
-  computeClasses(isWide) {
-    return isWide ? "content" : "content narrow";
-  }
-}
-
-customElements.define("ha-config-server-control", HaConfigServerControl);

src/panels/config/server_control/ha-config-server-control.ts

@@ -0,0 +1,269 @@
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "../../../layouts/hass-tabs-subpage";
+import { configSections } from "../ha-panel-config";
+import {
+  LitElement,
+  property,
+  customElement,
+  html,
+  css,
+  CSSResult,
+  TemplateResult,
+} from "lit-element";
+import { HomeAssistant, Route } from "../../../types";
+
+import "@material/mwc-button";
+import "@polymer/paper-input/paper-input";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
+import "../ha-config-section";
+import { haStyle } from "../../../resources/styles";
+import { checkCoreConfig } from "../../../data/core";
+
+const reloadableDomains = [
+  "group",
+  "automation",
+  "scripts",
+  "scene",
+  "person",
+  "zone",
+  "input_boolean",
+  "input_text",
+  "input_number",
+  "input_datetime",
+  "input_select",
+];
+
+@customElement("ha-config-server-control")
+export class HaConfigServerControl extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public isWide!: boolean;
+
+  @property() public narrow!: boolean;
+
+  @property() public route!: Route;
+
+  @property() public showAdvanced!: boolean;
+
+  @property() private _validating = false;
+
+  private _validateLog = "";
+
+  private _isValid: boolean | null = null;
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        back-path="/config"
+        .tabs=${configSections.general}
+        .showAdvanced=${this.showAdvanced}
+      >
+        <ha-config-section .isWide=${this.isWide}>
+          <span slot="header"
+            >${this.hass.localize(
+              "ui.panel.config.server_control.caption"
+            )}</span
+          >
+          <span slot="introduction"
+            >${this.hass.localize(
+              "ui.panel.config.server_control.description"
+            )}</span
+          >
+
+          ${this.showAdvanced
+            ? html` <ha-card
+                header=${this.hass.localize(
+                  "ui.panel.config.server_control.section.validation.heading"
+                )}
+              >
+                <div class="card-content">
+                  ${this.hass.localize(
+                    "ui.panel.config.server_control.section.validation.introduction"
+                  )}
+                  ${!this._validateLog
+                    ? html`
+                        <div
+                          class="validate-container layout vertical center-center"
+                        >
+                          ${!this._validating
+                            ? html`
+                                ${this._isValid
+                                  ? html` <div
+                                      class="validate-result"
+                                      id="result"
+                                    >
+                                      ${this.hass.localize(
+                                        "ui.panel.config.server_control.section.validation.valid"
+                                      )}
+                                    </div>`
+                                  : ""}
+                                <mwc-button
+                                  raised
+                                  @click=${this._validateConfig}
+                                >
+                                  ${this.hass.localize(
+                                    "ui.panel.config.server_control.section.validation.check_config"
+                                  )}
+                                </mwc-button>
+                              `
+                            : html` <paper-spinner active></paper-spinner> `}
+                        </div>
+                      `
+                    : html`
+                        <div class="config-invalid">
+                          <span class="text">
+                            ${this.hass.localize(
+                              "ui.panel.config.server_control.section.validation.invalid"
+                            )}
+                          </span>
+                          <mwc-button raised @click=${this._validateConfig}>
+                            ${this.hass.localize(
+                              "ui.panel.config.server_control.section.validation.check_config"
+                            )}
+                          </mwc-button>
+                        </div>
+                        <div id="configLog" class="validate-log">
+                          ${this._validateLog}
+                        </div>
+                      `}
+                </div>
+              </ha-card>`
+            : ""}
+
+          <ha-card
+            header=${this.hass.localize(
+              "ui.panel.config.server_control.section.server_management.heading"
+            )}
+          >
+            <div class="card-content">
+              ${this.hass.localize(
+                "ui.panel.config.server_control.section.server_management.introduction"
+              )}
+            </div>
+            <div class="card-actions warning">
+              <ha-call-service-button
+                class="warning"
+                .hass=${this.hass}
+                domain="homeassistant"
+                service="restart"
+                .confirmation=${this.hass.localize(
+                  "ui.panel.config.server_control.section.server_management.confirm_restart"
+                )}
+                >${this.hass.localize(
+                  "ui.panel.config.server_control.section.server_management.restart"
+                )}
+              </ha-call-service-button>
+              <ha-call-service-button
+                class="warning"
+                .hass=${this.hass}
+                domain="homeassistant"
+                service="stop"
+                confirmation=${this.hass.localize(
+                  "ui.panel.config.server_control.section.server_management.confirm_stop"
+                )}
+                >${this.hass.localize(
+                  "ui.panel.config.server_control.section.server_management.stop"
+                )}
+              </ha-call-service-button>
+            </div>
+          </ha-card>
+
+          ${this.showAdvanced
+            ? html`
+                <ha-card
+                  header=${this.hass.localize(
+                    "ui.panel.config.server_control.section.reloading.heading"
+                  )}
+                >
+                  <div class="card-content">
+                    ${this.hass.localize(
+                      "ui.panel.config.server_control.section.reloading.introduction"
+                    )}
+                  </div>
+                  <div class="card-actions">
+                    <ha-call-service-button
+                      .hass=${this.hass}
+                      domain="homeassistant"
+                      service="reload_core_config"
+                      >${this.hass.localize(
+                        "ui.panel.config.server_control.section.reloading.core"
+                      )}
+                    </ha-call-service-button>
+                  </div>
+                  ${reloadableDomains.map((domain) =>
+                    isComponentLoaded(this.hass, domain)
+                      ? html`<div class="card-actions">
+                          <ha-call-service-button
+                            .hass=${this.hass}
+                            .domain=${domain}
+                            service="reload"
+                            >${this.hass.localize(
+                              `ui.panel.config.server_control.section.reloading.${domain}`
+                            )}
+                          </ha-call-service-button>
+                        </div>`
+                      : ""
+                  )}
+                </ha-card>
+              `
+            : ""}
+        </ha-config-section>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  private async _validateConfig() {
+    this._validating = true;
+    this._validateLog = "";
+    this._isValid = null;
+
+    const configCheck = await checkCoreConfig(this.hass);
+    this._validating = false;
+    this._isValid = configCheck.result === "valid";
+
+    if (configCheck.errors) {
+      this._validateLog = configCheck.errors;
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .validate-container {
+          height: 140px;
+        }
+
+        .validate-result {
+          color: var(--google-green-500);
+          font-weight: 500;
+          margin-bottom: 1em;
+        }
+
+        .config-invalid {
+          margin: 1em 0;
+        }
+
+        .config-invalid .text {
+          color: var(--google-red-500);
+          font-weight: 500;
+        }
+
+        .config-invalid mwc-button {
+          float: right;
+        }
+
+        .validate-log {
+          white-space: pre-wrap;
+          direction: ltr;
+        }
+      `,
+    ];
+  }
+}

src/translations/en.json

@@ -737,7 +737,12 @@
               "script": "Reload scripts",
               "scene": "Reload scenes",
               "person": "Reload persons",
-              "zone": "Reload zones"
+              "zone": "Reload zones",
+              "input_boolean": "Reload input booleans",
+              "input_text": "Reload input texts",
+              "input_number": "Reload input numbers",
+              "input_datetime": "Reload input date times",
+              "input_select": "Reload input selects"
             },
             "server_management": {
               "heading": "Server management",