chore(client): migrate rename server dialog to lit

client/resources/original_messages.json

@@ -607,4 +607,4 @@
     "description": "Affirmative answer to a form question.",
     "message": "Yes"
   }
-}
+}

client/src/www/TODO.spec.ts

@@ -36,7 +36,6 @@ import * as errorReporter from './shared/error_reporter';
 import * as addServerView from './ui_components/add-server-view';
 import * as appRoot from './ui_components/app-root.js';
 import * as privacyView from './ui_components/privacy-view';
-import * as serverRenameDialog from './ui_components/server-rename-dialog';
 import * as userCommsDialog from './ui_components/user-comms-dialog';
 import * as aboutView from './views/about_view';
 import * as languageView from './views/language_view';
@@ -54,7 +53,6 @@ describe('TODOs', () => {
     expect(languageView).toBeDefined();
     expect(platform).toBeDefined();
     expect(privacyView).toBeDefined();
-    expect(serverRenameDialog).toBeDefined();
     expect(server).toBeDefined();
     expect(updater).toBeDefined();
     expect(urlInterceptor).toBeDefined();

client/src/www/app/app.ts

@@ -165,10 +165,6 @@ export class App {
       'AutoConnectDialogDismissed',
       this.autoConnectDialogDismissed.bind(this)
     );
-    this.rootEl.addEventListener(
-      'ShowServerRename',
-      this.rootEl.showServerRename.bind(this.rootEl)
-    );
     this.rootEl.addEventListener(
       'PrivacyTermsAcked',
       this.ackPrivacyTerms.bind(this)

client/src/www/messages/en.json

@@ -114,4 +114,4 @@
   "update-downloaded": "An updated version of Outline has been downloaded. It will be installed when you restart Outline.",
   "version": "Version {appVersion}",
   "yes": "Yes"
-}
+}

client/src/www/ui_components/app-root.js

@@ -53,7 +53,6 @@ import '../views/licenses_view';
 // eslint-disable-next-line n/no-missing-import
 import '../views/servers_view';
 
-import './server-rename-dialog.js';
 import './user-comms-dialog.js';
 
 import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
@@ -546,12 +545,6 @@ export class AppRoot extends mixinBehaviors(
     https://github.com/PolymerElements/paper-dialog/issues/152 and
     https://github.com/PolymerElements/app-layout/issues/295
     Once those are fixed we can consider moving this into server-card.html -->
-      <server-rename-dialog
-        id="serverRenameDialog"
-        root-path="[[rootPath]]"
-        localize="[[localize]]"
-      ></server-rename-dialog>
-
       <user-comms-dialog
         id="autoConnectDialog"
         localize="[[localize]]"
@@ -954,10 +947,6 @@ export class AppRoot extends mixinBehaviors(
     return shouldShowQuitButton ? '' : 'last-menu-item';
   }
 
-  showServerRename(event) {
-    this.$.serverRenameDialog.open(event.detail.name, event.detail.serverId);
-  }
-
   _computeShouldShowAppLogo(page) {
     return page === 'servers';
   }

client/src/www/views/servers_view/server_list_item/index.ts

@@ -22,7 +22,7 @@ export enum ServerListItemEvent {
   CONNECT = 'ConnectPressed',
   DISCONNECT = 'DisconnectPressed',
   FORGET = 'ForgetPressed',
-  RENAME = 'ShowServerRename',
+  RENAME = 'RenameRequested',
 }
 
 /**
@@ -46,4 +46,5 @@ export interface ServerListItemElement {
   localize: Localizer;
   menu: Ref<Menu>;
   menuButton: Ref<HTMLElement>;
+  isRenameDialogOpen: boolean;
 }

client/src/www/views/servers_view/server_list_item/server_card/index.ts

@@ -15,10 +15,11 @@ import type {Menu} from '@material/web/menu/menu';
 
 import {Localizer} from '@outline/infrastructure/i18n';
 import {css, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {customElement, property, state} from 'lit/decorators.js';
 import {createRef, Ref, ref} from 'lit/directives/ref.js';
 
 import '../../server_connection_indicator';
+import './server_rename_dialog';
 import {ServerListItem, ServerListItemElement, ServerListItemEvent} from '..';
 import {ServerConnectionState} from '../../server_connection_indicator';
 
@@ -154,14 +155,18 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
   };
 
   const dispatchers = {
-    beginRename: () =>
+    beginRename: () => (element.isRenameDialogOpen = true),
+    submitRename: (event: CustomEvent) => {
+      element.isRenameDialogOpen = false;
+
       element.dispatchEvent(
         new CustomEvent(ServerListItemEvent.RENAME, {
-          detail: {serverId: server.id, name: server.name},
+          detail: {serverId: event.detail.id, newName: event.detail.name},
           bubbles: true,
           composed: true,
         })
-      ),
+      );
+    },
     forget: () =>
       element.dispatchEvent(
         new CustomEvent(ServerListItemEvent.FORGET, {
@@ -213,7 +218,7 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
         </div>
       `,
       menu: html`
-        <md-menu ${ref(menu)} class="card-menu" menuCorner="END">
+        <md-menu ${ref(menu)} class="card-menu" menuCorner="END" quick>
           <md-menu-item @click="${dispatchers.beginRename}">
             ${localize('server-rename')}
           </md-menu-item>
@@ -243,6 +248,14 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
           </md-text-button>
         </footer>
       `,
+      renameDialog: html`<server-rename-dialog
+        .open=${element.isRenameDialogOpen}
+        .localize=${localize}
+        .serverId=${server.id}
+        .serverName=${server.name}
+        @cancel=${() => (element.isRenameDialogOpen = false)}
+        @submit=${dispatchers.submitRename}
+      ></server-rename-dialog>`,
     },
   };
 };
@@ -255,6 +268,8 @@ export class ServerRowCard extends LitElement implements ServerListItemElement {
   @property() server: ServerListItem;
   @property() localize: Localizer;
 
+  @state() isRenameDialogOpen = false;
+
   menu: Ref<Menu> = createRef();
   menuButton: Ref<HTMLElement> = createRef();
 
@@ -299,7 +314,7 @@ export class ServerRowCard extends LitElement implements ServerListItemElement {
         </div>
         ${elements.menuButton} ${elements.footer}
       </div>
-      ${elements.menu}
+      ${elements.menu} ${elements.renameDialog}
     `;
   }
 }
@@ -315,6 +330,8 @@ export class ServerHeroCard
   @property() server: ServerListItem;
   @property() localize: Localizer;
 
+  @state() isRenameDialogOpen = false;
+
   menu: Ref<Menu> = createRef();
   menuButton: Ref<HTMLElement> = createRef();
 
@@ -401,7 +418,7 @@ export class ServerHeroCard
         </div>
         ${elements.footer}
       </div>
-      ${elements.menu}
+      ${elements.menu} ${elements.renameDialog}
     `;
   }
 }

client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts

@@ -0,0 +1,85 @@
+/*
+  Copyright 2024 The Outline Authors
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+       http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import type {MdFilledTextField} from '@material/web/all.js';
+
+import {LitElement, html, css} from 'lit';
+import {customElement, property, state, query} from 'lit/decorators.js';
+import '@material/web/all.js';
+
+@customElement('server-rename-dialog')
+export class ServerRenameDialog extends LitElement {
+  @property({type: Boolean}) open: boolean = false;
+  @property({type: Function}) localize!: (key: string) => string;
+  @property({type: String}) serverId!: string;
+  @property({type: String}) serverName!: string;
+
+  @state() internalServerName: string | null = null;
+
+  @query('md-filled-text-field') textField: MdFilledTextField;
+
+  static styles = css`
+    :host {
+      --md-sys-color-primary: var(--outline-primary);
+      --md-sys-shape-corner-extra-large: 2px;
+      --md-sys-shape-corner-full: 2px;
+    }
+
+    fieldset {
+      border: none;
+      text-transform: uppercase;
+    }
+  `;
+
+  render() {
+    if (this.internalServerName === null) {
+      this.internalServerName = this.serverName;
+    }
+
+    return html`
+      <md-dialog .open=${this.open} @close=${this.handleClose} quick>
+        <header slot="headline">${this.localize('server-rename')}</header>
+        <md-filled-text-field
+          slot="content"
+          maxlength="100"
+          value="${this.internalServerName}"
+          @input=${(e: Event) => {
+            this.internalServerName = (e.target as HTMLInputElement).value;
+          }}
+        ></md-filled-text-field>
+        <fieldset slot="actions">
+          <md-text-button @click=${this.handleClose}
+            >${this.localize('cancel')}</md-text-button
+          >
+          <md-filled-button
+            @click=${this.handleRename}
+            ?disabled=${this.internalServerName === this.serverName}
+            >${this.localize('save')}</md-filled-button
+          >
+        </fieldset>
+      </md-dialog>
+    `;
+  }
+
+  private handleClose() {
+    this.dispatchEvent(new CustomEvent('cancel'));
+  }
+
+  private handleRename() {
+    this.dispatchEvent(
+      new CustomEvent('submit', {
+        detail: {id: this.serverId, name: this.internalServerName},
+      })
+    );
+  }
+}

client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/stories.ts

@@ -0,0 +1,38 @@
+/*
+  Copyright 2024 The Outline Authors
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+       http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import {html} from 'lit';
+
+import './index';
+import {ServerRenameDialog} from './index';
+import {localize} from '../../../../../testing/localize';
+
+export default {
+  title: 'Client/Servers View/Server List Item/Server Rename Dialog',
+  args: {
+    open: true,
+    serverId: 'my-server-id',
+    serverName: 'My Server',
+  },
+};
+
+export const Example = ({open, serverId, serverName}: ServerRenameDialog) => {
+  return html`
+    <server-rename-dialog
+      .open=${open}
+      .localize=${localize}
+      serverId=${serverId}
+      serverName=${serverName}
+    ></server-rename-dialog>
+  `;
+};