1 files changed, 65 insertions, 31 deletions

diff --git a/polygerrit-ui/app/elements/admin/gr-create-group-dialog/gr-create-group-dialog.ts b/polygerrit-ui/app/elements/admin/gr-create-group-dialog/gr-create-group-dialog.ts
index 180e60ad5c..9ab7646e27 100644
--- a/polygerrit-ui/app/elements/admin/gr-create-group-dialog/gr-create-group-dialog.ts
+++ b/polygerrit-ui/app/elements/admin/gr-create-group-dialog/gr-create-group-dialog.ts
@@ -17,61 +17,95 @@
 import '@polymer/iron-input/iron-input';
 import '../../../styles/gr-form-styles';
 import '../../../styles/shared-styles';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-create-group-dialog_html';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util';
 import {page} from '../../../utils/page-wrapper-utils';
-import {customElement, property, observe} from '@polymer/decorators';
 import {GroupName} from '../../../types/common';
-import {appContext} from '../../../services/app-context';
+import {getAppContext} from '../../../services/app-context';
+import {formStyles} from '../../../styles/gr-form-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {LitElement, PropertyValues, css, html} from 'lit';
+import {customElement, query, property} from 'lit/decorators';
+import {BindValueChangeEvent} from '../../../types/events';
+import {fireEvent} from '../../../utils/event-util';
 
-@customElement('gr-create-group-dialog')
-export class GrCreateGroupDialog extends PolymerElement {
-  static get template() {
-    return htmlTemplate;
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-create-group-dialog': GrCreateGroupDialog;
   }
+}
 
-  @property({type: Boolean, notify: true})
-  hasNewGroupName = false;
+@customElement('gr-create-group-dialog')
+export class GrCreateGroupDialog extends LitElement {
+  @query('input') private input!: HTMLInputElement;
 
   @property({type: String})
-  _name: GroupName | '' = '';
+  name: GroupName | '' = '';
 
-  @property({type: Boolean})
-  _groupCreated = false;
+  private readonly restApiService = getAppContext().restApiService;
 
-  private readonly restApiService = appContext.restApiService;
+  static override get styles() {
+    return [
+      formStyles,
+      sharedStyles,
+      css`
+        :host {
+          display: inline-block;
+        }
+        input {
+          width: 20em;
+        }
+      `,
+    ];
+  }
 
-  _computeGroupUrl(groupId: string) {
-    return getBaseUrl() + '/admin/groups/' + encodeURL(groupId, true);
+  override render() {
+    return html`
+      <div class="gr-form-styles">
+        <div id="form">
+          <section>
+            <span class="title">Group name</span>
+            <iron-input
+              .bindValue=${this.name}
+              @bind-value-changed=${this.handleGroupNameBindValueChanged}
+            >
+              <input />
+            </iron-input>
+          </section>
+        </div>
+      </div>
+    `;
   }
 
-  @observe('_name')
-  _updateGroupName(name: string) {
-    this.hasNewGroupName = !!name;
+  override updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('name')) {
+      this.updateGroupName();
+    }
+  }
+
+  private updateGroupName() {
+    fireEvent(this, 'has-new-group-name');
+  }
+
+  private computeGroupUrl(groupId: string) {
+    return getBaseUrl() + '/admin/groups/' + encodeURL(groupId, true);
   }
 
   override focus() {
-    this.shadowRoot?.querySelector('input')?.focus();
+    this.input.focus();
   }
 
   handleCreateGroup() {
-    const name = this._name as GroupName;
+    const name = this.name as GroupName;
     return this.restApiService.createGroup({name}).then(groupRegistered => {
-      if (groupRegistered.status !== 201) {
-        return;
-      }
-      this._groupCreated = true;
+      if (groupRegistered.status !== 201) return;
       return this.restApiService.getGroupConfig(name).then(group => {
-        // TODO(TS): should group always defined ?
-        page.show(this._computeGroupUrl(String(group!.group_id!)));
+        if (!group) return;
+        page.show(this.computeGroupUrl(String(group.group_id!)));
       });
     });
   }
-}
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'gr-create-group-dialog': GrCreateGroupDialog;
+  private handleGroupNameBindValueChanged(e: BindValueChangeEvent) {
+    this.name = e.detail.value as GroupName;
   }
 }