move cert info to a dialog (#2940)

src/data/cloud.ts

@@ -11,7 +11,7 @@ interface CloudStatusBase {
   cloud: "disconnected" | "connecting" | "connected";
 }
 
-interface CertificateInformation {
+export interface CertificateInformation {
   common_name: string;
   expire_date: string;
   fingerprint: string;

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

@@ -13,7 +13,6 @@ import "@polymer/paper-toggle-button/paper-toggle-button";
 import "@polymer/paper-item/paper-item-body";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
-import "../../../components/buttons/ha-call-api-button";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
@@ -22,7 +21,7 @@ import {
   disconnectCloudRemote,
   CloudStatusLoggedIn,
 } from "../../../data/cloud";
-import format_date_time from "../../../common/datetime/format_date_time";
+import { showCloudCertificateDialog } from "./show-dialog-cloud-certificate";
 
 @customElement("cloud-remote-pref")
 export class CloudRemotePref extends LitElement {
@@ -64,46 +63,36 @@ export class CloudRemotePref extends LitElement {
           @change="${this._toggleChanged}"
         ></paper-toggle-button>
         <div class="card-content">
-          Home Assistant Cloud provides you with a secure remote connection to
+          Home Assistant Cloud provides a secure remote connection to your
-          your instance while away from home. Your instance
+          instance while away from home. Your instance
           ${remote_connected ? "is" : "will be"} available at
           <a href="https://${remote_domain}" target="_blank">
             https://${remote_domain}</a
           >.
-          ${!remote_certificate
-            ? ""
-            : html`
-                <div class="data-row">
-                  <paper-item-body two-line>
-                    Certificate expiration date
-                    <div secondary>Will be automatically renewed</div>
-                  </paper-item-body>
-                  <div class="data-value">
-                    ${format_date_time(
-                      new Date(remote_certificate.expire_date),
-                      this.hass!.language
-                    )}
-                  </div>
-                </div>
-                <div class="data-row">
-                  <paper-item-body>
-                    Certificate fingerprint
-                  </paper-item-body>
-                  <div class="data-value">
-                    ${remote_certificate.fingerprint}
-                  </div>
-                </div>
-              `}
         </div>
         <div class="card-actions">
           <a href="https://www.nabucasa.com/config/remote/" target="_blank">
             <mwc-button>Learn how it works</mwc-button>
           </a>
+          ${remote_certificate
+            ? html`
+                <div class="spacer"></div>
+                <mwc-button @click=${this._openCertInfo}>
+                  Certificate Info
+                </mwc-button>
+              `
+            : ""}
         </div>
       </paper-card>
     `;
   }
 
+  private _openCertInfo() {
+    showCloudCertificateDialog(this, {
+      certificateInfo: this.cloudStatus!.remote_certificate!,
+    });
+  }
+
   private async _toggleChanged(ev) {
     const toggle = ev.target as PaperToggleButtonElement;
 
@@ -127,12 +116,6 @@ export class CloudRemotePref extends LitElement {
       .preparing {
         padding: 0 16px 16px;
       }
-      .data-row {
-        display: flex;
-      }
-      .data-value {
-        padding: 16px 0;
-      }
       a {
         color: var(--primary-color);
       }
@@ -141,17 +124,11 @@ export class CloudRemotePref extends LitElement {
         right: 8px;
         top: 16px;
       }
-      ha-call-api-button {
+      .card-actions {
-        color: var(--primary-color);
-        font-weight: 500;
-      }
-      .unlock {
         display: flex;
-        flex-direction: row;
-        padding-top: 16px;
       }
-      .unlock > div {
+      .spacer {
-        flex: 1;
+        flex-grow: 1;
       }
     `;
   }

src/panels/config/cloud/dialog-cloud-certificate.ts

@@ -0,0 +1,89 @@
+import {
+  html,
+  LitElement,
+  css,
+  CSSResult,
+  customElement,
+  property,
+} from "lit-element";
+
+import "@material/mwc-button";
+import "@polymer/paper-dialog/paper-dialog";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+
+import { HomeAssistant } from "../../../types";
+import { haStyle } from "../../../resources/styles";
+import { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
+import format_date_time from "../../../common/datetime/format_date_time";
+
+@customElement("dialog-cloud-certificate")
+class DialogCloudCertificate extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property()
+  private _params?: CloudCertificateDialogParams;
+
+  public async showDialog(params: CloudCertificateDialogParams) {
+    this._params = params;
+    // Wait till dialog is rendered.
+    await this.updateComplete;
+    this._dialog.open();
+  }
+
+  protected render() {
+    if (!this._params) {
+      return html``;
+    }
+    const { certificateInfo } = this._params;
+
+    return html`
+      <paper-dialog with-backdrop>
+        <h2>Certificate Information</h2>
+        <div>
+          <p>
+            Certificate expiration date:
+            ${format_date_time(
+              new Date(certificateInfo.expire_date),
+              this.hass!.language
+            )}<br />
+            (Will be automatically renewed)
+          </p>
+          <p>
+            Certificate fingerprint: ${certificateInfo.fingerprint}
+          </p>
+        </div>
+
+        <div class="paper-dialog-buttons">
+          <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
+        </div>
+      </paper-dialog>
+    `;
+  }
+
+  private get _dialog(): PaperDialogElement {
+    return this.shadowRoot!.querySelector("paper-dialog")!;
+  }
+
+  private _closeDialog() {
+    this._dialog.close();
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        paper-dialog {
+          width: 535px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-cloud-certificate": DialogCloudCertificate;
+  }
+}

src/panels/config/cloud/show-dialog-cloud-certificate.ts

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import { CertificateInformation } from "../../../data/cloud";
+
+export interface CloudCertificateParams {
+  certificateInfo: CertificateInformation;
+}
+
+export const showCloudCertificateDialog = (
+  element: HTMLElement,
+  webhookDialogParams: CloudCertificateParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-cloud-certificate",
+    dialogImport: () =>
+      import(/* webpackChunkName: "dialog-cloud-certificate" */ "./dialog-cloud-certificate"),
+    dialogParams: webhookDialogParams,
+  });
+};