refactor: Migrate LiteElements (#2145)

- Migrates the following `LiteElement`s to `BtrixElement`: - `App` (`<browsetrix-home>`) - `Admin` (`<btrix-home`) - `Dashboard` (`<btrix-dashboard>`) - `LogInPage` (`<btrix-log-in>`) - Replaces custom light DOM `btrix-input` with `sl-input` since password managers should work now.
webrecorder · Nov 12, 2024 · 0fb6571 · 0fb6571
1 parent 6aaf9c9
commit 0fb6571
Show file tree

Hide file tree

Showing 16 changed files with 105 additions and 267 deletions.
diff --git a/frontend/src/components/screencast.ts b/frontend/src/components/screencast.ts
@@ -39,7 +39,8 @@ type CloseMessage = Message & {
 @localized()
 export class Screencast extends BtrixElement {
   static baseUrl = `${window.location.protocol === "https:" ? "wss" : "ws"}:${
-    process.env.WEBSOCKET_HOST || window.location.host
+    // Defined in webpack:
+    window.process.env.WEBSOCKET_HOST || window.location.host
   }/watch`;
   static maxRetries = 10;
 

diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
@@ -17,7 +17,6 @@ import("./copy-field");
 import("./details");
 import("./file-list");
 import("./inline-input");
-import("./input");
 import("./language-select");
 import("./locale-picker");
 import("./markdown-editor");

diff --git a/frontend/src/components/ui/input/index.ts b/frontend/src/components/ui/input/index.ts
diff --git a/frontend/src/components/ui/input/input.css b/frontend/src/components/ui/input/input.css
diff --git a/frontend/src/components/ui/input/input.ts b/frontend/src/components/ui/input/input.ts
diff --git a/frontend/src/features/accounts/sign-up-form.ts b/frontend/src/features/accounts/sign-up-form.ts
@@ -1,10 +1,10 @@
 import { localized, msg, str } from "@lit/localize";
+import type { SlInput } from "@shoelace-style/shoelace";
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
 import { customElement, property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 
-import type { Input as BtrixInput } from "@/components/ui/input";
 import type { UserOrgInviteInfo, UserRegisterResponseData } from "@/types/user";
 import type { UnderlyingFunction } from "@/types/utils";
 import AuthService from "@/utils/AuthService";
@@ -97,33 +97,35 @@ export class SignUpForm extends LiteElement {
                 />
               `
             : html`
-                <btrix-input
+                <sl-input
                   id="email"
                   name="email"
                   type="email"
                   label=${msg("Enter your email")}
                   placeholder=${msg("you@email.com")}
                   autocomplete="email"
+                  class="hide-required-content"
                   required
                 >
-                </btrix-input>
+                </sl-input>
               `}
         </div>
         <div class="mb-5">
-          <btrix-input
+          <sl-input
             id="password"
             name="password"
             type="password"
             label="${msg("Password")}"
             minlength=${PASSWORD_MINLENGTH}
             autocomplete="new-password"
             passwordToggle
+            class="hide-required-content"
             required
             @input=${this.onPasswordInput as UnderlyingFunction<
               typeof this.onPasswordInput
             >}
           >
-          </btrix-input>
+          </sl-input>
           <p class="mt-2 text-xs text-neutral-500">
             ${msg(
               str`Choose a strong password between ${PASSWORD_MINLENGTH}–${PASSWORD_MAXLENGTH} characters.`,
@@ -132,15 +134,16 @@ export class SignUpForm extends LiteElement {
           ${when(this.pwStrengthResults, this.renderPasswordStrength)}
         </div>
         <div class="mb-5">
-          <btrix-input
+          <sl-input
             id="name"
             name="name"
             label=${msg("Your name")}
             autocomplete="nickname"
             minlength="2"
+            class="hide-required-content"
             required
           >
-          </btrix-input>
+          </sl-input>
           <p class="mt-2 text-xs text-neutral-500">
             ${msg(
               "Your full name, nickname, or another name that org collaborators can see.",
@@ -172,7 +175,7 @@ export class SignUpForm extends LiteElement {
   `;
 
   private readonly onPasswordInput = debounce(150)(async (e: InputEvent) => {
-    const { value } = e.target as BtrixInput;
+    const { value } = e.target as SlInput;
     if (!value || value.length < 4) {
       this.pwStrengthResults = null;
       return;

diff --git a/frontend/src/index.test.ts b/frontend/src/index.test.ts
@@ -1,4 +1,5 @@
 import { expect, fixture } from "@open-wc/testing";
+import { html } from "lit";
 import { restore, stub } from "sinon";
 
 import AuthService from "./utils/AuthService";
@@ -50,8 +51,14 @@ describe("browsertrix-app", () => {
         username: "test-auth@example.com",
       }),
     );
-    const el = await fixture("<browsertrix-app></browsertrix-app>");
-    expect(el).lightDom.descendants("btrix-home");
+    const el = await fixture<App>(html` <browsertrix-app></browsertrix-app>`);
+    expect(el.shadowRoot?.querySelector("btrix-home")).to.exist;
+  });
+
+  it("renders home when not authenticated", async () => {
+    stub(AuthService, "initSessionStorage").returns(Promise.resolve(null));
+    const el = await fixture<App>(html` <browsertrix-app></browsertrix-app>`);
+    expect(el.shadowRoot?.querySelector("btrix-home")).to.exist;
   });
 
   // TODO move tests to AuthService