opendev/gerrit
Code Issues Proposed changes

Convert gr-labeled-autocomplete, gr-repo-branch-picker, ... to ts

Browse Source 
The change converts the following files to typescript:

* elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.ts
* elements/shared/gr-repo-branch-picker/gr-repo-branch-picker.ts
* elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.ts

Change-Id: Ief6f2c55ffba7693b566f23cc46b59d7f2b5ebec
This commit is contained in:
Milutin Kristofic
2020-08-27 15:36:18 +02:00
parent 6181daebb0
commit 21459c244c
3 changed files with 168 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.ts
View File

@@ -15,43 +15,52 @@
* limitations under the License. * limitations under the License.
*/ */
import '../../shared/gr-dialog/gr-dialog.js'; import '../../shared/gr-dialog/gr-dialog';
import '../../shared/gr-overlay/gr-overlay.js'; import '../../shared/gr-overlay/gr-overlay';
import '../../shared/gr-repo-branch-picker/gr-repo-branch-picker.js'; import '../../shared/gr-repo-branch-picker/gr-repo-branch-picker';
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-destination-dialog_html.js'; import {htmlTemplate} from './gr-create-destination-dialog_html';
import {customElement, property} from '@polymer/decorators';
import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
import {RepoName, BranchName} from '../../../types/common';
/** /**
* Fired when a destination has been picked. Event details contain the repo * Fired when a destination has been picked. Event details contain the repo
* name and the branch name. * name and the branch name.
* *
* @event confirm * @event confirm
* @extends PolymerElement
*/ */
class GrCreateDestinationDialog extends GestureEventListeners( export interface GrCreateDestinationDialog {
LegacyElementMixin( $: {
PolymerElement)) { createOverlay: GrOverlay;
static get template() { return htmlTemplate; }
static get is() { return 'gr-create-destination-dialog'; }
static get properties() {
return {
_repo: String,
_branch: String,
_repoAndBranchSelected: {
type: Boolean,
value: false,
computed: '_computeRepoAndBranchSelected(_repo, _branch)',
},
}; };
} }
@customElement('gr-create-destination-dialog')
export class GrCreateDestinationDialog extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
@property({type: String})
_repo?: RepoName;
@property({type: String})
_branch?: BranchName;
@property({
type: Boolean,
computed: '_computeRepoAndBranchSelected(_repo, _branch)',
})
_repoAndBranchSelected = false;
open() { open() {
this._repo = ''; this._repo = '' as RepoName;
this._branch = ''; this._branch = '' as BranchName;
this.$.createOverlay.open(); this.$.createOverlay.open();
} }
@@ -59,7 +68,7 @@ class GrCreateDestinationDialog extends GestureEventListeners(
this.$.createOverlay.close(); this.$.createOverlay.close();
} }
_pickerConfirm(e) { _pickerConfirm(e: Event) {
this.$.createOverlay.close(); this.$.createOverlay.close();
const detail = {repo: this._repo, branch: this._branch}; const detail = {repo: this._repo, branch: this._branch};
// e is a 'confirm' event from gr-dialog. We want to fire a more detailed // e is a 'confirm' event from gr-dialog. We want to fire a more detailed
@@ -69,10 +78,13 @@ class GrCreateDestinationDialog extends GestureEventListeners(
this.dispatchEvent(new CustomEvent('confirm', {detail, bubbles: false})); this.dispatchEvent(new CustomEvent('confirm', {detail, bubbles: false}));
} }
_computeRepoAndBranchSelected(repo, branch) { _computeRepoAndBranchSelected(repo?: RepoName, branch?: BranchName) {
return !!(repo && branch); return !!(repo && branch);
} }
} }
customElements.define(GrCreateDestinationDialog.is, declare global {
GrCreateDestinationDialog); interface HTMLElementTagNameMap {
'gr-create-destination-dialog': GrCreateDestinationDialog;
}
}

89
polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.ts
View File

@@ -14,68 +14,63 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import '../gr-autocomplete/gr-autocomplete.js'; import '../gr-autocomplete/gr-autocomplete';
import '../../../styles/shared-styles.js'; import '../../../styles/shared-styles';
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-labeled-autocomplete_html.js'; import {htmlTemplate} from './gr-labeled-autocomplete_html';
import {customElement, property} from '@polymer/decorators';
import {
GrAutocomplete,
AutocompleteQuery,
} from '../gr-autocomplete/gr-autocomplete';
/** @extends PolymerElement */ export interface GrLabeledAutocomplete {
class GrLabeledAutocomplete extends GestureEventListeners( $: {
LegacyElementMixin( autocomplete: GrAutocomplete;
PolymerElement)) { };
static get template() { return htmlTemplate; } }
@customElement('gr-labeled-autocomplete')
export class GrLabeledAutocomplete extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
static get is() { return 'gr-labeled-autocomplete'; }
/** /**
* Fired when a value is chosen. * Fired when a value is chosen.
* *
* @event commit * @event commit
*/ */
static get properties() { @property({type: Object})
return { query: AutocompleteQuery = () => Promise.resolve([]);
/** @property({type: String, notify: true})
* Used just like the query property of gr-autocomplete. text = '';
*
* @type {function(string): Promise<?>}
*/
query: {
type: Function,
value() {
return function() {
return Promise.resolve([]);
};
},
},
text: { @property({type: String})
type: String, label?: string;
value: '',
notify: true,
},
label: String,
placeholder: String,
disabled: Boolean,
_autocompleteThreshold: { @property({type: String})
type: Number, placeholder?: string;
value: 0,
readOnly: true,
},
};
}
_handleTriggerClick(e) { @property({type: Boolean})
disabled?: boolean;
@property({type: Number, readOnly: true})
_autocompleteThreshold = 0;
_handleTriggerClick(e: Event) {
// Stop propagation here so we don't confuse gr-autocomplete, which // Stop propagation here so we don't confuse gr-autocomplete, which
// listens for taps on body to try to determine when it's blurred. // listens for taps on body to try to determine when it's blurred.
e.stopPropagation(); e.stopPropagation();
this.$.autocomplete.focus(); this.$.autocomplete.focus();
} }
setText(text) { setText(text: string) {
this.$.autocomplete.setText(text); this.$.autocomplete.setText(text);
} }
@@ -84,4 +79,8 @@ class GrLabeledAutocomplete extends GestureEventListeners(
} }
} }
customElements.define(GrLabeledAutocomplete.is, GrLabeledAutocomplete); declare global {
interface HTMLElementTagNameMap {
'gr-labeled-autocomplete': GrLabeledAutocomplete;
}
}

145
polygerrit-ui/app/elements/shared/gr-repo-branch-picker/gr-repo-branch-picker.ts
View File

@@ -14,56 +14,65 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import '@polymer/iron-icon/iron-icon.js'; import '@polymer/iron-icon/iron-icon';
import '../../../styles/shared-styles.js'; import '../../../styles/shared-styles';
import '../gr-icons/gr-icons.js'; import '../gr-icons/gr-icons';
import '../gr-labeled-autocomplete/gr-labeled-autocomplete.js'; import '../gr-labeled-autocomplete/gr-labeled-autocomplete';
import '../gr-rest-api-interface/gr-rest-api-interface.js'; import '../gr-rest-api-interface/gr-rest-api-interface';
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-repo-branch-picker_html.js'; import {htmlTemplate} from './gr-repo-branch-picker_html';
import {singleDecodeURL} from '../../../utils/url-util.js'; import {singleDecodeURL} from '../../../utils/url-util';
import {customElement, property} from '@polymer/decorators';
import {AutocompleteQuery} from '../gr-autocomplete/gr-autocomplete';
import {
BranchName,
RepoName,
ProjectInfoWithName,
BranchInfo,
} from '../../../types/common';
import {GrLabeledAutocomplete} from '../gr-labeled-autocomplete/gr-labeled-autocomplete';
import {GrRestApiInterface} from '../gr-rest-api-interface/gr-rest-api-interface';
const SUGGESTIONS_LIMIT = 15; const SUGGESTIONS_LIMIT = 15;
const REF_PREFIX = 'refs/heads/'; const REF_PREFIX = 'refs/heads/';
/** export interface GrRepoBranchPicker {
* @extends PolymerElement $: {
*/ repoInput: GrLabeledAutocomplete;
class GrRepoBranchPicker extends GestureEventListeners( branchInput: GrLabeledAutocomplete;
LegacyElementMixin( restAPI: GrRestApiInterface;
PolymerElement)) {
static get template() { return htmlTemplate; }
static get is() { return 'gr-repo-branch-picker'; }
static get properties() {
return {
repo: {
type: String,
notify: true,
observer: '_repoChanged',
},
branch: {
type: String,
notify: true,
},
_branchDisabled: Boolean,
_query: {
type: Function,
value() {
return this._getRepoBranchesSuggestions.bind(this);
},
},
_repoQuery: {
type: Function,
value() {
return this._getRepoSuggestions.bind(this);
},
},
}; };
} }
@customElement('gr-repo-branch-picker')
export class GrRepoBranchPicker extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
@property({type: String, notify: true, observer: '_repoChanged'})
repo?: RepoName;
@property({type: String, notify: true})
branch?: BranchName;
@property({type: Boolean})
_branchDisabled?: boolean;
@property({type: Object})
_query?: AutocompleteQuery;
@property({type: Object})
_repoQuery?: AutocompleteQuery;
constructor() {
super();
this._query = input => this._getRepoBranchesSuggestions(input);
this._repoQuery = input => this._getRepoSuggestions(input);
}
/** @override */ /** @override */
attached() { attached() {
@@ -79,21 +88,26 @@ class GrRepoBranchPicker extends GestureEventListeners(
this._branchDisabled = !this.repo; this._branchDisabled = !this.repo;
} }
_getRepoBranchesSuggestions(input) { _getRepoBranchesSuggestions(input: string) {
if (!this.repo) { return Promise.resolve([]); } if (!this.repo) {
return Promise.resolve([]);
}
if (input.startsWith(REF_PREFIX)) { if (input.startsWith(REF_PREFIX)) {
input = input.substring(REF_PREFIX.length); input = input.substring(REF_PREFIX.length);
} }
return this.$.restAPI.getRepoBranches(input, this.repo, SUGGESTIONS_LIMIT) return this.$.restAPI
.then(this._branchResponseToSuggestions.bind(this)); .getRepoBranches(input, this.repo, SUGGESTIONS_LIMIT)
.then(res => this._branchResponseToSuggestions(res));
} }
_getRepoSuggestions(input) { _getRepoSuggestions(input: string) {
return this.$.restAPI.getRepos(input, SUGGESTIONS_LIMIT) return this.$.restAPI
.then(this._repoResponseToSuggestions.bind(this)); .getRepos(input, SUGGESTIONS_LIMIT)
.then(res => this._repoResponseToSuggestions(res));
} }
_repoResponseToSuggestions(res) { _repoResponseToSuggestions(res: ProjectInfoWithName[] | undefined) {
if (!res) return [];
return res.map(repo => { return res.map(repo => {
return { return {
name: repo.name, name: repo.name,
@@ -102,22 +116,25 @@ class GrRepoBranchPicker extends GestureEventListeners(
}); });
} }
_branchResponseToSuggestions(res) { _branchResponseToSuggestions(res: BranchInfo[] | undefined) {
return Object.keys(res).map(key => { if (!res) return [];
let branch = res[key].ref; return res.map(branchInfo => {
if (branch.startsWith(REF_PREFIX)) { let branch;
branch = branch.substring(REF_PREFIX.length); if (branchInfo.ref.startsWith(REF_PREFIX)) {
branch = branchInfo.ref.substring(REF_PREFIX.length);
} else {
branch = branchInfo.ref;
} }
return {name: branch, value: branch}; return {name: branch, value: branch};
}); });
} }
_repoCommitted(e) { _repoCommitted(e: CustomEvent<{value: string}>) {
this.repo = e.detail.value; this.repo = e.detail.value as RepoName;
} }
_branchCommitted(e) { _branchCommitted(e: CustomEvent<{value: string}>) {
this.branch = e.detail.value; this.branch = e.detail.value as BranchName;
} }
_repoChanged() { _repoChanged() {
@@ -126,4 +143,8 @@ class GrRepoBranchPicker extends GestureEventListeners(
} }
} }
customElements.define(GrRepoBranchPicker.is, GrRepoBranchPicker); declare global {
interface HTMLElementTagNameMap {
'gr-repo-branch-picker': GrRepoBranchPicker;
}
}