Simplify remote connection preferences (#10071)

* Simplify remote connection preferences

* Remove unused CSS and strings

src/data/cloud.ts

@@ -3,8 +3,8 @@ import { PlaceholderContainer } from "../panels/config/automation/thingtalk/dial
 import { HomeAssistant } from "../types";
 import { AutomationConfig } from "./automation";
 
-interface CloudStatusBase {
-  logged_in: boolean;
+interface CloudStatusNotLoggedIn {
+  logged_in: false;
   cloud: "disconnected" | "connecting" | "connected";
 }
 
@@ -44,7 +44,9 @@ export interface CloudPreferences {
   tts_default_voice: [string, string];
 }
 
-export type CloudStatusLoggedIn = CloudStatusBase & {
+export interface CloudStatusLoggedIn {
+  logged_in: true;
+  cloud: "disconnected" | "connecting" | "connected";
   email: string;
   google_registered: boolean;
   google_entities: EntityFilter;
@@ -54,9 +56,9 @@ export type CloudStatusLoggedIn = CloudStatusBase & {
   remote_domain: string | undefined;
   remote_connected: boolean;
   remote_certificate: undefined | CertificateInformation;
-};
+}
 
-export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
+export type CloudStatus = CloudStatusNotLoggedIn | CloudStatusLoggedIn;
 
 export interface SubscriptionInfo {
   human_description: string;

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -6,6 +6,7 @@ import { property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -44,16 +45,14 @@ export class CloudGooglePref extends LitElement {
           </p>
           ${google_enabled && !this.cloudStatus.google_registered
             ? html`
-                <h3 class="warning">
-                  ${this.hass.localize(
+                <ha-alert
+                  .title=${this.hass.localize(
                     "ui.panel.config.cloud.account.google.not_configured_title"
                   )}
-                </h3>
-                <p>
+                >
                   ${this.hass.localize(
                     "ui.panel.config.cloud.account.google.not_configured_text"
                   )}
-                </p>
 
                   <ul>
                     <li>
@@ -79,6 +78,7 @@ export class CloudGooglePref extends LitElement {
                       </a>
                     </li>
                   </ul>
+                </ha-alert>
               `
             : ""}
           ${google_enabled

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -4,6 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-switch";
 // eslint-disable-next-line
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -53,18 +54,22 @@ export class CloudRemotePref extends LitElement {
           "ui.panel.config.cloud.account.remote.title"
         )}
       >
-        <div class="connection-status">
-          ${this.hass.localize(
-            `ui.panel.config.cloud.account.remote.${
-              remote_connected
-                ? "connected"
-                : remote_enabled
-                ? "reconnecting"
-                : "not_connected"
-            }`
-          )}
+        <div class="switch">
+          <ha-switch
+            .checked="${remote_enabled}"
+            @change="${this._toggleChanged}"
+          ></ha-switch>
         </div>
         <div class="card-content">
+          ${!remote_connected && remote_enabled
+            ? html`
+                <ha-alert
+                  .title=${this.hass.localize(
+                    `ui.panel.config.cloud.account.remote.reconnecting`
+                  )}
+                ></ha-alert>
+              `
+            : ""}
           ${this.hass.localize("ui.panel.config.cloud.account.remote.info")}
           ${this.hass.localize(
             `ui.panel.config.cloud.account.remote.${
@@ -81,25 +86,6 @@ export class CloudRemotePref extends LitElement {
           >
             https://${remote_domain}</a
           >.
-
-          <div class="remote-enabled">
-            <h3>
-              ${this.hass.localize(
-                "ui.panel.config.cloud.account.remote.remote_enabled.caption"
-              )}
-            </h3>
-            <div class="remote-enabled-switch">
-              <ha-switch
-                .checked="${remote_enabled}"
-                @change="${this._toggleChanged}"
-              ></ha-switch>
-            </div>
-          </div>
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.remote_enabled.description"
-            )}
-          </p>
         </div>
         <div class="card-actions">
           <a
@@ -158,6 +144,22 @@ export class CloudRemotePref extends LitElement {
       a {
         color: var(--primary-color);
       }
+      .switch {
+        position: absolute;
+        right: 24px;
+        top: 24px;
+      }
+      :host([dir="rtl"]) .switch {
+        right: auto;
+        left: 24px;
+      }
+      .warning {
+        font-weight: bold;
+        margin-bottom: 1em;
+      }
+      .warning ha-svg-icon {
+        color: var(--warning-color);
+      }
       .break-word {
         overflow-wrap: break-word;
       }
@@ -179,25 +181,6 @@ export class CloudRemotePref extends LitElement {
       .spacer {
         flex-grow: 1;
       }
-      .remote-enabled {
-        display: flex;
-        margin-top: 1.5em;
-      }
-      .remote-enabled + p {
-        margin-top: 0.5em;
-      }
-      h3 {
-        margin: 0 0 8px 0;
-      }
-      .remote-enabled h3 {
-        flex-grow: 1;
-        margin: 0;
-      }
-      .remote-enabled-switch {
-        margin-top: 0.25em;
-        margin-right: 7px;
-        margin-left: 0.5em;
-      }
     `;
   }
 }

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

@@ -402,7 +402,14 @@ class HaPanelConfig extends HassRouterPage {
   private async _updateCloudStatus() {
     this._cloudStatus = await fetchCloudStatus(this.hass);
 
-    if (this._cloudStatus.cloud === "connecting") {
+    if (
+      // Relayer connecting
+      this._cloudStatus.cloud === "connecting" ||
+      // Remote connecting
+      (this._cloudStatus.logged_in &&
+        this._cloudStatus.prefs.remote_enabled &&
+        !this._cloudStatus.remote_connected)
+    ) {
       setTimeout(() => this._updateCloudStatus(), 5000);
     }
   }

src/translations/en.json

@@ -1974,15 +1974,11 @@
               "title": "Remote Control",
               "connected": "Connected",
               "not_connected": "Not Connected",
-              "reconnecting": "Reconnecting",
+              "reconnecting": "Not connected. Trying to reconnect.",
               "access_is_being_prepared": "Remote control is being prepared. We will notify you when it's ready.",
               "info": "Home Assistant Cloud provides a secure remote connection to your instance while away from home.",
               "instance_is_available": "Your instance is available at",
               "instance_will_be_available": "Your instance will be available at",
-              "remote_enabled": {
-                "caption": "Automatically connect",
-                "description": "Enable this option to make sure that your Home Assistant instance is always remotely accessible."
-              },
               "link_learn_how_it_works": "Learn how it works",
               "certificate_info": "Certificate Info"
             },