Add new core configuration UI for external_url & internal_url (#5755)

package.json

@@ -93,7 +93,7 @@
     "fuse.js": "^3.4.4",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^0.12.4",
-    "home-assistant-js-websocket": "5.0.0",
+    "home-assistant-js-websocket": "^5.1.1",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",

src/data/core.ts

@@ -8,6 +8,8 @@ export interface ConfigUpdateValues {
   elevation: number;
   unit_system: "metric" | "imperial";
   time_zone: string;
+  external_url?: string | null;
+  internal_url?: string | null;
 }
 
 export const saveCoreConfig = (

src/fake_data/demo_config.ts

@@ -18,4 +18,6 @@ export const demoConfig: HassConfig = {
   whitelist_external_dirs: [],
   config_source: "storage",
   safe_mode: false,
+  internal_url: "http://homeassistant.local:8123",
+  external_url: null,
 };

src/panels/config/core/ha-config-section-core.js

@@ -11,6 +11,7 @@ import "../../../resources/ha-style";
 import "../ha-config-section";
 import "./ha-config-core-form";
 import "./ha-config-name-form";
+import "./ha-config-url-form";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -59,6 +60,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
 
         <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
         <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
+        <ha-config-url-form hass="[[hass]]"></ha-config-url-form>
       </ha-config-section>
     `;
   }

src/panels/config/core/ha-config-url-form.ts

@@ -0,0 +1,168 @@
+import "@material/mwc-button/mwc-button";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../components/ha-card";
+import { saveCoreConfig } from "../../../data/core";
+import type { PolymerChangedEvent } from "../../../polymer-types";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("ha-config-url-form")
+class ConfigUrlForm extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() private _error?: string;
+
+  @property() private _working = false;
+
+  @property() private _external_url?: string;
+
+  @property() private _internal_url?: string;
+
+  protected render(): TemplateResult {
+    const canEdit = ["storage", "default"].includes(
+      this.hass.config.config_source
+    );
+    const disabled = this._working || !canEdit;
+
+    if (!this.hass.userData?.showAdvanced) {
+      return html``;
+    }
+
+    return html`
+      <ha-card>
+        <div class="card-content">
+          ${!canEdit
+            ? html`
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.config.core.section.core.core_config.edit_requires_storage"
+                  )}
+                </p>
+              `
+            : ""}
+          ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+          <div class="row">
+            <div class="flex">
+              ${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.external_url"
+              )}
+            </div>
+
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.external_url"
+              )}
+              name="external_url"
+              type="url"
+              .disabled=${disabled}
+              .value=${this._externalUrlValue}
+              @value-changed=${this._handleChange}
+            >
+            </paper-input>
+          </div>
+
+          <div class="row">
+            <div class="flex">
+              ${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.internal_url"
+              )}
+            </div>
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.internal_url"
+              )}
+              name="internal_url"
+              type="url"
+              .disabled=${disabled}
+              .value=${this._internalUrlValue}
+              @value-changed=${this._handleChange}
+            >
+            </paper-input>
+          </div>
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._save} .disabled=${disabled}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
+            )}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private get _internalUrlValue() {
+    return this._internal_url !== undefined
+      ? this._internal_url
+      : this.hass.config.internal_url;
+  }
+
+  private get _externalUrlValue() {
+    return this._external_url !== undefined
+      ? this._external_url
+      : this.hass.config.external_url;
+  }
+
+  private _handleChange(ev: PolymerChangedEvent<string>) {
+    const target = ev.currentTarget as PaperInputElement;
+    this[`_${target.name}`] = target.value;
+  }
+
+  private async _save() {
+    this._working = true;
+    this._error = undefined;
+    try {
+      await saveCoreConfig(this.hass, {
+        external_url: this._external_url || null,
+        internal_url: this._internal_url || null,
+      });
+    } catch (err) {
+      this._error = err.message || err;
+    } finally {
+      this._working = false;
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .row {
+        display: flex;
+        flex-direction: row;
+        margin: 0 -8px;
+        align-items: center;
+      }
+
+      .secondary {
+        color: var(--secondary-text-color);
+      }
+
+      .flex {
+        flex: 1;
+      }
+
+      .row > * {
+        margin: 0 8px;
+      }
+      .error {
+        color: var(--error-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-url-form": ConfigUrlForm;
+  }
+}

src/translations/en.json

@@ -590,7 +590,9 @@
                 "unit_system_metric": "Metric",
                 "imperial_example": "Fahrenheit, pounds",
                 "metric_example": "Celsius, kilograms",
-                "save_button": "Save"
+                "save_button": "Save",
+                "external_url": "External URL",
+                "internal_url": "Internal URL"
               }
             }
           }

yarn.lock

@@ -8219,10 +8219,10 @@ hoek@6.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
   integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
 
-home-assistant-js-websocket@5.0.0:
+home-assistant-js-websocket@^5.1.1:
-  version "5.0.0"
+  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.0.0.tgz#b8c28666e7a9f70a1feb02d138c7666f0ce49d23"
+  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.1.1.tgz#562c510b9784b34878fd974e36d28618f4fa301a"
-  integrity sha512-Eji+QJMR04DAdKUpEn7WA1VjqopWgTuS1oN/aODLmPmxUtxhQ8jIaWMBdbAFUn0SQvmlIwaSYF0zBl8tbOM9+w==
+  integrity sha512-Zh8eFezcVYXxvZYneWecIlgSO1ulFqVKggWyZ9UcIkX0NK8uXxEqkIbggl+Zb1XXQ3fM7rNVANNBilBb5Rlepw==
 
 homedir-polyfill@^1.0.1:
   version "1.0.3"