Move gr-create-repo-dialog to ts

Change-Id: I96294703552aef96d3f032b3cad2b5c57ed225c4

polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.ts

@@ -14,91 +14,87 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '@polymer/iron-input/iron-input.js';
+import '@polymer/iron-input/iron-input';
-import '../../../styles/gr-form-styles.js';
+import '../../../styles/gr-form-styles';
-import '../../../styles/shared-styles.js';
+import '../../../styles/shared-styles';
-import '../../shared/gr-autocomplete/gr-autocomplete.js';
+import '../../shared/gr-autocomplete/gr-autocomplete';
-import '../../shared/gr-button/gr-button.js';
+import '../../shared/gr-button/gr-button';
-import '../../shared/gr-rest-api-interface/gr-rest-api-interface.js';
+import '../../shared/gr-rest-api-interface/gr-rest-api-interface';
-import '../../shared/gr-select/gr-select.js';
+import '../../shared/gr-select/gr-select';
-import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
-import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-create-repo-dialog_html.js';
+import {htmlTemplate} from './gr-create-repo-dialog_html';
-import {encodeURL, getBaseUrl} from '../../../utils/url-util.js';
+import {encodeURL, getBaseUrl} from '../../../utils/url-util';
-import {page} from '../../../utils/page-wrapper-utils.js';
+import {page} from '../../../utils/page-wrapper-utils';
+import {customElement, observe, property} from '@polymer/decorators';
+import {GrRestApiInterface} from '../../shared/gr-rest-api-interface/gr-rest-api-interface';
+import {ProjectInput, RepoName} from '../../../types/common';
+import {hasOwnProperty} from '../../../utils/common-util';
+import {AutocompleteQuery} from '../../shared/gr-autocomplete/gr-autocomplete';
 
-/**
+declare global {
- * @extends PolymerElement
+  interface HTMLElementTagNameMap {
- */
+    'gr-create-repo-dialog': GrCreateRepoDialog;
-class GrCreateRepoDialog extends GestureEventListeners(
+  }
-    LegacyElementMixin(
+}
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
 
-  static get is() { return 'gr-create-repo-dialog'; }
+export interface GrCreateRepoDialog {
+  $: {
+    restAPI: GrRestApiInterface;
+  };
+}
 
-  static get properties() {
+@customElement('gr-create-repo-dialog')
-    return {
+export class GrCreateRepoDialog extends GestureEventListeners(
-      params: Object,
+  LegacyElementMixin(PolymerElement)
-      hasNewRepoName: {
+) {
-        type: Boolean,
+  static get template() {
-        notify: true,
+    return htmlTemplate;
-        value: false,
+  }
-      },
 
-      /** @type {?} */
+  @property({type: Boolean, notify: true})
-      _repoConfig: {
+  hasNewRepoName = false;
-        type: Object,
+
-        value: () => {
+  @property({type: Object})
-        // Set default values for dropdowns.
+  _repoConfig: ProjectInput & {name: RepoName} = {
-          return {
     create_empty_commit: true,
     permissions_only: false,
+    name: '' as RepoName,
   };
-        },
-      },
-      _repoCreated: {
-        type: Boolean,
-        value: false,
-      },
-      _repoOwner: String,
-      _repoOwnerId: {
-        type: String,
-        observer: '_repoOwnerIdUpdate',
-      },
 
-      _query: {
+  @property({type: Boolean})
-        type: Function,
+  _repoCreated = false;
-        value() {
+
-          return this._getRepoSuggestions.bind(this);
+  @property({type: String})
-        },
+  _repoOwner?: string;
-      },
+
-      _queryGroups: {
+  @property({type: String})
-        type: Function,
+  _repoOwnerId?: string;
-        value() {
+
-          return this._getGroupSuggestions.bind(this);
+  @property({type: Object})
-        },
+  _query: AutocompleteQuery;
-      },
+
-    };
+  @property({type: Object})
+  _queryGroups: AutocompleteQuery;
+
+  constructor() {
+    super();
+    this._query = (input: string) => this._getRepoSuggestions(input);
+    this._queryGroups = (input: string) => this._getGroupSuggestions(input);
   }
 
-  static get observers() {
+  _computeRepoUrl(repoName: string) {
-    return [
+    return getBaseUrl() + '/admin/repos/' + encodeURL(repoName, true);
-      '_updateRepoName(_repoConfig.name)',
-    ];
   }
 
-  _computeRepoUrl(repoName) {
+  @observe('_repoConfig.name')
-    return getBaseUrl() + '/admin/repos/' +
+  _updateRepoName(name: string) {
-        encodeURL(repoName, true);
-  }
-
-  _updateRepoName(name) {
     this.hasNewRepoName = !!name;
   }
 
-  _repoOwnerIdUpdate(id) {
+  @observe('_repoOwnerId')
+  _repoOwnerIdUpdate(id?: string) {
     if (id) {
       this.set('_repoConfig.owners', [id]);
     } else {
@@ -107,8 +103,7 @@ class GrCreateRepoDialog extends GestureEventListeners(
   }
 
   handleCreateRepo() {
-    return this.$.restAPI.createRepo(this._repoConfig)
+    return this.$.restAPI.createRepo(this._repoConfig).then(repoRegistered => {
-        .then(repoRegistered => {
       if (repoRegistered.status === 201) {
         this._repoCreated = true;
         page.show(this._computeRepoUrl(this._repoConfig.name));
@@ -116,12 +111,13 @@ class GrCreateRepoDialog extends GestureEventListeners(
     });
   }
 
-  _getRepoSuggestions(input) {
+  _getRepoSuggestions(input: string) {
-    return this.$.restAPI.getSuggestedProjects(input)
+    return this.$.restAPI.getSuggestedProjects(input).then(response => {
-        .then(response => {
       const repos = [];
       for (const key in response) {
-            if (!response.hasOwnProperty(key)) { continue; }
+        if (!hasOwnProperty(response, key)) {
+          continue;
+        }
         repos.push({
           name: key,
           value: response[key],
@@ -131,12 +127,13 @@ class GrCreateRepoDialog extends GestureEventListeners(
     });
   }
 
-  _getGroupSuggestions(input) {
+  _getGroupSuggestions(input: string) {
-    return this.$.restAPI.getSuggestedGroups(input)
+    return this.$.restAPI.getSuggestedGroups(input).then(response => {
-        .then(response => {
       const groups = [];
       for (const key in response) {
-            if (!response.hasOwnProperty(key)) { continue; }
+        if (!hasOwnProperty(response, key)) {
+          continue;
+        }
         groups.push({
           name: key,
           value: decodeURIComponent(response[key].id),
@@ -146,5 +143,3 @@ class GrCreateRepoDialog extends GestureEventListeners(
     });
   }
 }
-
-customElements.define(GrCreateRepoDialog.is, GrCreateRepoDialog);

polygerrit-ui/app/elements/admin/gr-repo-list/gr-repo-list_html.ts

@@ -110,7 +110,6 @@ export const htmlTemplate = html`
       <div class="main" slot="main">
         <gr-create-repo-dialog
           has-new-repo-name="{{_hasNewRepoName}}"
-          params="[[params]]"
           id="createNewModal"
         ></gr-create-repo-dialog>
       </div>

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts

@@ -58,7 +58,9 @@ declare global {
 export interface AutocompleteSuggestion {
   name?: string;
   label?: string;
-  value?: string;
+  // TODO(TS): this value can be string or arbitrary object (in gr-create-repo-dialog)
+  // probably should limit it to string only as it seems not used
+  value?: any;
   text?: string;
 }