Add support for warnings in check_config (#18489)

src/data/core.ts

@@ -18,6 +18,7 @@ export interface ConfigUpdateValues {
 export interface CheckConfigResult {
   result: "valid" | "invalid";
   errors: string | null;
+  warnings: string | null;
 }
 
 export const saveCoreConfig = (

src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts

@@ -1,11 +1,18 @@
 import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { componentsWithService } from "../../../common/config/components_with_service";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
-import { checkCoreConfig } from "../../../data/core";
+import { CheckConfigResult, checkCoreConfig } from "../../../data/core";
 import { domainToName } from "../../../data/integration";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { haStyle } from "../../../resources/styles";
@@ -32,14 +39,11 @@ export class DeveloperYamlConfig extends LitElement {
 
   @state() private _reloadableDomains: ReloadableDomain[] = [];
 
-  @state() private _isValid: boolean | null = null;
+  @state() private _validateResult?: CheckConfigResult;
-
-  private _validateLog = "";
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._isValid = null;
+    this._validateResult = undefined;
-    this._validateLog = "";
   }
 
   protected updated(changedProperties) {
@@ -68,34 +72,57 @@ export class DeveloperYamlConfig extends LitElement {
             ${this.hass.localize(
               "ui.panel.developer-tools.tabs.yaml.section.validation.introduction"
             )}
-            ${!this._validateLog
+            ${!this._validateResult
-              ? html`
+              ? this._validating
-                  <div class="validate-container layout vertical center-center">
+                ? html`<div
-                    ${!this._validating
+                    class="validate-container layout vertical center-center"
-                      ? html`
+                  >
-                          ${this._isValid
+                    <ha-circular-progress active></ha-circular-progress>
-                            ? html`<div class="validate-result" id="result">
+                  </div> `
-                                ${this.hass.localize(
+                : nothing
-                                  "ui.panel.developer-tools.tabs.yaml.section.validation.valid"
-                                )}
-                              </div>`
-                            : ""}
-                        `
-                      : html`
-                          <ha-circular-progress active></ha-circular-progress>
-                        `}
-                  </div>
-                `
               : html`
-                  <div class="config-invalid">
+                    <div class="validate-result ${
-                    <span class="text">
+                      this._validateResult.result === "invalid" ? "invalid" : ""
-                      ${this.hass.localize(
+                    }">
-                        "ui.panel.developer-tools.tabs.yaml.section.validation.invalid"
+                        ${
-                      )}
+                          this._validateResult.result === "valid"
-                    </span>
+                            ? this.hass.localize(
-                  </div>
+                                "ui.panel.developer-tools.tabs.yaml.section.validation.valid"
-                  <div id="configLog" class="validate-log">
+                              )
-                    ${this._validateLog}
+                            : this.hass.localize(
+                                "ui.panel.developer-tools.tabs.yaml.section.validation.invalid"
+                              )
+                        }
+                    </div>
+                  
+                    ${
+                      this._validateResult.errors
+                        ? html`<ha-alert
+                            alert-type="error"
+                            .title=${this.hass.localize(
+                              "ui.panel.developer-tools.tabs.yaml.section.validation.errors"
+                            )}
+                          >
+                            <span class="validate-log"
+                              >${this._validateResult.errors}</span
+                            >
+                          </ha-alert>`
+                        : ""
+                    }
+                    ${
+                      this._validateResult.warnings
+                        ? html`<ha-alert
+                            alert-type="warning"
+                            .title=${this.hass.localize(
+                              "ui.panel.developer-tools.tabs.yaml.section.validation.warnings"
+                            )}
+                          >
+                            <span class="validate-log"
+                              >${this._validateResult.warnings}</span
+                            >
+                          </ha-alert>`
+                        : ""
+                    }
                   </div>
                 `}
           </div>
@@ -108,7 +135,7 @@ export class DeveloperYamlConfig extends LitElement {
             <mwc-button
               class="warning"
               @click=${this._restart}
-              .disabled=${!!this._validateLog}
+              .disabled=${this._validateResult?.result === "invalid"}
             >
               ${this.hass.localize(
                 "ui.panel.developer-tools.tabs.yaml.section.server_management.restart"
@@ -173,22 +200,17 @@ export class DeveloperYamlConfig extends LitElement {
 
   private async _validateConfig() {
     this._validating = true;
-    this._validateLog = "";
+    this._validateResult = undefined;
-    this._isValid = null;
 
-    const configCheck = await checkCoreConfig(this.hass);
+    this._validateResult = await checkCoreConfig(this.hass);
     this._validating = false;
-    if (!this.isConnected) {
-      return;
-    }
-    this._isValid = configCheck.result === "valid";
-
-    if (configCheck.errors) {
-      this._validateLog = configCheck.errors;
-    }
   }
 
-  private _restart() {
+  private async _restart() {
+    await this._validateConfig();
+    if (this._validateResult?.result === "invalid") {
+      return;
+    }
     showRestartDialog(this);
   }
 
@@ -203,20 +225,16 @@ export class DeveloperYamlConfig extends LitElement {
         .validate-result {
           color: var(--success-color);
           font-weight: 500;
-        }
-
-        .config-invalid {
           margin: 1em 0;
           text-align: center;
         }
 
-        .config-invalid .text {
+        .validate-result.invalid {
           color: var(--error-color);
-          font-weight: 500;
         }
 
         .validate-log {
-          white-space: pre-line;
+          white-space: pre;
           direction: ltr;
         }
 

src/translations/en.json

@@ -5844,7 +5844,9 @@
                 "introduction": "A basic validation of the configuration is automatically done before restarting. The basic validation ensures the YAML configuration doesn't have errors which will prevent Home Assistant or any integration from starting. It's also possible to only do the basic validation check without restarting.",
                 "check_config": "Check configuration",
                 "valid": "Configuration will not prevent Home Assistant from starting!",
-                "invalid": "Configuration invalid!"
+                "invalid": "Configuration invalid!",
+                "warnings": "Configuration warnings",
+                "errors": "Configuration errors"
               },
               "reloading": {
                 "all": "All YAML configuration",