From c34678c1b39cbd4a683ad36fd8941e32fab823f6 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Mon, 8 Apr 2024 08:55:40 -0400
Subject: [PATCH] chore(www): upgrade `servers-view` to Lit (#1941)

* chore(www): upgrade `servers-view` to Lit

* Remove use of `paper-button` from `servers-view`.

* Use semantic elements for header and footer.

* Use `<button>` element.

* Change `line-height` values.

* Rename `useAltAccessMessage` to `shouldShowAccessKeyWikiLink`.

* Hoist `<user-coms-dialog>` to the root element.

* Remove unused import.

* Add a section element.
---
 client/src/www/app/app.ts                  |   5 +-
 client/src/www/ui_components/app-root.js   |  17 +-
 client/src/www/views/servers_view/index.ts | 201 +++++++++++----------
 3 files changed, 126 insertions(+), 97 deletions(-)

diff --git a/client/src/www/app/app.ts b/client/src/www/app/app.ts
index e5802c06338..341d9f3eb3e 100644
--- a/client/src/www/app/app.ts
+++ b/client/src/www/app/app.ts
@@ -122,7 +122,7 @@ export class App {
     document.addEventListener('resume', this.syncConnectivityStateToServerCards.bind(this));
 
     // Register handlers for events fired by Polymer components.
-    this.rootEl.addEventListener('PromptAddServerRequested', this.requestPromptAddServer.bind(this));
+    this.rootEl.$.serversView.addEventListener('add-server', this.requestPromptAddServer.bind(this));
     this.rootEl.addEventListener('AddServerConfirmationRequested', this.requestAddServerConfirmation.bind(this));
     this.rootEl.addEventListener('AddServerRequested', this.requestAddServer.bind(this));
     this.rootEl.addEventListener('IgnoreServerRequested', this.requestIgnoreServer.bind(this));
@@ -300,7 +300,6 @@ export class App {
   }
 
   private requestPromptAddServer() {
-    this.rootEl.promptAddServer();
     this.pullClipboardText();
   }
 
@@ -440,7 +439,7 @@ export class App {
       console.error(`Failed to read auto-connect dialog status, assuming not dismissed: ${e}`);
     }
     if (!dismissed) {
-      this.rootEl.$.serversView.$.autoConnectDialog.show();
+      this.rootEl.$.autoConnectDialog.show();
     }
   }
 
diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js
index f9183d4052e..dae39972294 100644
--- a/client/src/www/ui_components/app-root.js
+++ b/client/src/www/ui_components/app-root.js
@@ -339,7 +339,14 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         </app-header>
 
         <iron-pages id="pages" selected="[[page]]" attr-for-selected="name">
-          <servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]""></servers-view>
+          <servers-view
+            name="servers"
+            id="serversView"
+            servers="[[servers]]"
+            localize="[[localize]]"
+            should-show-access-key-wiki-link="[[useAltAccessMessage]]"
+            on-add-server="promptAddServer"
+          ></servers-view>
           <template is="dom-if" if="{{contactViewFeatureFlag}}">
             <contact-view
               name="contact"
@@ -490,6 +497,14 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         root-path="[[rootPath]]"
         localize="[[localize]]"
       ></server-rename-dialog>
+
+      <user-comms-dialog
+        id="autoConnectDialog"
+        localize="[[localize]]"
+        title-localization-key="auto-connect-dialog-title"
+        detail-localization-key="auto-connect-dialog-detail"
+        fire-event-on-hide="AutoConnectDialogDismissed"
+      ></user-comms-dialog>
     `;
   }
 
diff --git a/client/src/www/views/servers_view/index.ts b/client/src/www/views/servers_view/index.ts
index 68d4d7830c0..750a545310e 100644
--- a/client/src/www/views/servers_view/index.ts
+++ b/client/src/www/views/servers_view/index.ts
@@ -14,139 +14,154 @@
   limitations under the License.
 */
 
-import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {unsafeHTML, UnsafeHTMLDirective} from 'lit/directives/unsafe-html.js';
 
+import '@material/mwc-button';
 import './server_connection_indicator';
 import './server_list';
 
 import {ServerListItem as _ServerListItem} from './server_list_item';
 import {ServerConnectionState as _ServerConnectionState} from './server_connection_indicator';
+import { Localizer } from 'src/infrastructure/i18n';
 
 export type ServerListItem = _ServerListItem;
 
 // (This value is used: it's exported.)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export import ServerConnectionState = _ServerConnectionState;
+import { DirectiveResult } from 'lit/directive';
 
-Polymer({
-  _template: html`
-    <style>
+@customElement('servers-view')
+export class ServerList extends LitElement {
+  static styles = [
+    css`
       :host {
-        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: .9rem;
         height: 100%;
         /* Use vh, as % does not work in iOS. |header-height|+|server-margin| = 64px.
          * Subtract |header-height| to fix iOS padding, and |server-margin| to fix scrolling in Android.
          */
         height: -webkit-calc(100vh - 64px);
-        font-size: 14px;
-        line-height: 20px;
+        justify-content: center;
+        line-height: 1.25rem;
+        margin: auto;
+        max-width: 400px;
+        width: 100%;
       }
       :host a {
         color: var(--medium-green);
         text-decoration: none;
       }
-      .server-list-container {
-        width: 100%;
-        height: 100%;
-        max-width: 400px;
-        margin: auto;
+      section {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
       }
-      .flex-column-container {
-        margin: 0 auto;
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        display: -webkit-flex;
-        -webkit-flex-wrap: wrap;
-        flex-wrap: wrap;
-        -webkit-flex-direction: column;
+      header {
+        display: flex;
         flex-direction: column;
-        -webkit-flex: 1;
         flex: 1;
         justify-content: center;
-      }
-      .header {
-        font-size: 20px;
-        color: rgba(0, 0, 0, 0.87);
         line-height: 32px;
-        margin-top: 34px;
+        text-align: center;
       }
-      .subtle {
+      h1,
+      h2,
+      footer {
         color: rgba(0, 0, 0, 0.54);
-      }
-      .footer {
         margin: 0;
-        padding: 24px 0 16px 0;
-        border-top-width: 1px;
-        border-top-color: rgba(0, 0, 0, 0.08);
-        border-top-style: solid;
       }
-      paper-button {
+      h1 {
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 1.25rem;
+        font-weight: 400;
+      }
+      h2 {
+        font-size: .9rem;
+        font-weight: initial;
+        line-height: 1.5;
+      }
+      footer {
+        border-top: 1px solid rgba(0, 0, 0, 0.08);
+        padding: 24px 0 16px;
+        text-align: center;
+      }
+      button {
+        align-items: center;
+        border: 0;
         display: flex;
         flex-direction: column;
-        text-transform: none;
+        justify-content: center;
         outline: none; /* Remove outline for Safari. */
+        padding: 0;
       }
-      paper-button server-connection-indicator {
-        width: 192px;
+      button:hover {
+        cursor: pointer;
+      }
+      server-connection-indicator {
         height: 192px;
+        margin-bottom: 34px;
+        width: 192px;
       }
-    </style>
-    <div class="server-list-container">
-      <template is="dom-if" if="[[shouldShowZeroState]]">
-        <div class="flex-column-container">
-          <div class="flex-column-container">
-            <paper-button noink="" on-tap="_requestPromptAddServer">
-              <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
-              <div class="header">[[localize('server-add')]]</div>
-              <div class="subtle">[[localize('server-add-zero-state-instructions')]]</div>
-            </paper-button>
-          </div>
-          <template is="dom-if" if="[[!useAltAccessMessage]]">
-            <div
-              class="footer subtle"
-              inner-h-t-m-l="[[localize('server-create-your-own-zero-state', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>', 'closeLink', '</a>')]]"
-            ></div>
-          </template>
-          <template is="dom-if" if="[[useAltAccessMessage]]">
-            <div
-              class="footer subtle"
-              inner-h-t-m-l="[[localize('server-create-your-own-zero-state-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
-            ></div>
-          </template>
-        </div>
-      </template>
-      <user-comms-dialog
-        id="autoConnectDialog"
-        localize="[[localize]]"
-        title-localization-key="auto-connect-dialog-title"
-        detail-localization-key="auto-connect-dialog-detail"
-        fire-event-on-hide="AutoConnectDialogDismissed"
-      ></user-comms-dialog>
-      <template is="dom-if" if="[[!shouldShowZeroState]]">
-        <server-list id="serverList" servers="[[servers]]" localize="[[localize]]"></server-list>
-      </template>
-    </div>
-  `,
+    `,
+  ];
 
-  is: 'servers-view',
+  @property({type: Function}) localize: Localizer = msg => msg;
+  @property({type: Boolean}) shouldShowAccessKeyWikiLink = false;
+  @property({type: Array}) servers: ServerListItem[] = [];
 
-  properties: {
-    localize: Function,
-    useAltAccessMessage: Boolean,
-    servers: Array,
-    shouldShowZeroState: {
-      type: Boolean,
-      computed: '_computeShouldShowZeroState(servers)',
-    },
-  },
+  get shouldShowZeroState() {
+    return this.servers ? this.servers.length === 0 : false;
+  }
 
-  _computeShouldShowZeroState(servers: ServerListItem[]) {
-    return servers ? servers.length === 0 : false;
-  },
+  private requestPromptAddServer() {
+    this.dispatchEvent(new CustomEvent('add-server', {bubbles: true, composed: true}));
+  }
 
-  _requestPromptAddServer() {
-    this.fire('PromptAddServerRequested', {});
-  },
-});
+  private get zeroStateContent(): DirectiveResult<typeof UnsafeHTMLDirective> {
+    let msg;
+    if (this.shouldShowAccessKeyWikiLink) {
+      msg = this.localize(
+        'server-create-your-own-zero-state-access',
+        'breakLine', '<br/>',
+        'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
+        'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>',
+        'closeLink', '</a>');
+    } else {
+      msg = this.localize(
+        'server-create-your-own-zero-state',
+        'breakLine', '<br/>',
+        'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
+        'closeLink', '</a>');
+    }
+    return unsafeHTML(msg);
+  }
+
+  render() {
+    if (this.shouldShowZeroState) {
+      return html`
+        <section>
+          <header>
+            <button type="button" @click=${this.requestPromptAddServer}>
+              <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+              <h1>${this.localize('server-add')}</h1>
+              <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+            </button>
+          </header>
+          <footer>${this.zeroStateContent}</footer>
+        </section>
+      `;
+    } else {
+      return html`
+        <server-list
+          .servers=${this.servers}
+          .localize=${this.localize}
+        ></server-list>
+      `;
+    }
+  }
+}