From 385ae8fd65838317d45dfbcd900c51dcc936b1dd Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Wed, 21 Feb 2024 00:35:20 -0500
Subject: [PATCH 1/2] chore(www): upgrade `server-list` to Lit

---
 .../views/servers_view/server_list/index.ts   | 87 ++++++++-----------
 1 file changed, 38 insertions(+), 49 deletions(-)

diff --git a/src/www/views/servers_view/server_list/index.ts b/src/www/views/servers_view/server_list/index.ts
index 0accdc8e66..ecd8496c9e 100644
--- a/src/www/views/servers_view/server_list/index.ts
+++ b/src/www/views/servers_view/server_list/index.ts
@@ -11,64 +11,53 @@
   limitations under the License.
 */
 
-import {computed, customElement, property} from '@polymer/decorators';
-import {html, PolymerElement} from '@polymer/polymer';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 import '../server_list_item/server_card';
 import {ServerListItem} from '../server_list_item';
 import {Localizer} from 'src/infrastructure/i18n';
 
 @customElement('server-list')
-export class ServerList extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          margin: 0 auto;
-          width: 100%;
-          height: 100%;
-          padding: 8px;
-          box-sizing: border-box;
-        }
-
-        server-row-card {
-          margin: 0 auto 8px auto;
-          height: 130px;
-        }
-
-        server-hero-card {
-          height: 400px;
-        }
-      </style>
-
-      <!-- TODO(daniellacosse): use slots instead after we move this to lit -->
-      <template is="dom-repeat" items="[[servers]]">
-        <template is="dom-if" if="[[hasSingleServer]]">
-          <server-hero-card localize="[[localize]]" server="[[item]]"></server-hero-card>
-        </template>
-        <template is="dom-if" if="[[!hasSingleServer]]">
-          <server-row-card localize="[[localize]]" server="[[item]]"></server-row-card>
-        </template>
-      </template>
-    `;
-  }
-
-  // Need to declare localize function passed in from parent, or else
-  // localize() calls within the template won't be updated.
-
-  // @polymer/decorators doesn't support Function constructors...
-  @property({type: Object}) localize: Localizer;
+export class ServerList extends LitElement {
+  static styles = [
+    css`
+      :host {
+        box-sizing: border-box;
+        display: block;
+        height: 100%;
+        margin: 0 auto;
+        padding: 8px;
+        width: 100%;
+      }
+
+      server-row-card {
+        margin: 0 auto 8px auto;
+        height: 130px;
+      }
+
+      server-hero-card {
+        height: 400px;
+      }
+    `,
+  ];
+
+  @property({type: Function}) localize: Localizer = msg => msg;
   @property({type: Array}) servers: ServerListItem[] = [];
 
-  @computed('servers')
-  get hasSingleServer() {
-    return this.servers.length === 1;
+  render() {
+    if (this.hasSingleServer) {
+      return html` <server-hero-card .localize=${this.localize} .server="${this.servers[0]}"></server-hero-card> `;
+    } else {
+      return html`
+        ${this.servers.map(
+          server => html`<server-row-card .localize=${this.localize} .server="${server}"></server-row-card>`
+        )}
+      `;
+    }
   }
 
-  getErrorMessage(errorMessageId: string) {
-    if (typeof errorMessageId === 'string') {
-      return this.localize(errorMessageId);
-    }
+  private get hasSingleServer() {
+    return this.servers.length === 1;
   }
 }

From 04b8d0b69f06284239b80d1ea632054e44becd77 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:16:46 -0500
Subject: [PATCH 2/2] Address review comments.

---
 src/www/views/servers_view/server_list/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/www/views/servers_view/server_list/index.ts b/src/www/views/servers_view/server_list/index.ts
index ecd8496c9e..4f7523b2e0 100644
--- a/src/www/views/servers_view/server_list/index.ts
+++ b/src/www/views/servers_view/server_list/index.ts
@@ -31,6 +31,7 @@ export class ServerList extends LitElement {
         width: 100%;
       }
 
+      /* TODO(daniellacosse): Remove the hard-coded heights. */
       server-row-card {
         margin: 0 auto 8px auto;
         height: 130px;
@@ -47,11 +48,11 @@ export class ServerList extends LitElement {
 
   render() {
     if (this.hasSingleServer) {
-      return html` <server-hero-card .localize=${this.localize} .server="${this.servers[0]}"></server-hero-card> `;
+      return html`<server-hero-card .localize=${this.localize} .server=${this.servers[0]}></server-hero-card>`;
     } else {
       return html`
         ${this.servers.map(
-          server => html`<server-row-card .localize=${this.localize} .server="${server}"></server-row-card>`
+          server => html`<server-row-card .localize=${this.localize} .server=${server}></server-row-card>`
         )}
       `;
     }