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.
*/
import '../../shared/gr-dialog/gr-dialog.js';
import '../../shared/gr-overlay/gr-overlay.js';
import '../../shared/gr-repo-branch-picker/gr-repo-branch-picker.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-create-destination-dialog_html.js';
import '../../shared/gr-dialog/gr-dialog';
import '../../shared/gr-overlay/gr-overlay';
import '../../shared/gr-repo-branch-picker/gr-repo-branch-picker';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
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
* name and the branch name.
*
* @event confirm
* @extends PolymerElement
*/
class GrCreateDestinationDialog extends GestureEventListeners(
LegacyElementMixin(
PolymerElement)) {
static get template() { return htmlTemplate; }
export interface GrCreateDestinationDialog {
$: {
createOverlay: GrOverlay;
};
}
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() {
this._repo = '';
this._branch = '';
this._repo = '' as RepoName;
this._branch = '' as BranchName;
this.$.createOverlay.open();
}
@@ -59,7 +68,7 @@ class GrCreateDestinationDialog extends GestureEventListeners(
this.$.createOverlay.close();
}
_pickerConfirm(e) {
_pickerConfirm(e: Event) {
this.$.createOverlay.close();
const detail = {repo: this._repo, branch: this._branch};
// 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}));
}
_computeRepoAndBranchSelected(repo, branch) {
_computeRepoAndBranchSelected(repo?: RepoName, branch?: BranchName) {
return !!(repo && branch);
}
}
customElements.define(GrCreateDestinationDialog.is,
GrCreateDestinationDialog);
declare global {
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
* limitations under the License.
*/
import '../gr-autocomplete/gr-autocomplete.js';
import '../../../styles/shared-styles.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-labeled-autocomplete_html.js';
import '../gr-autocomplete/gr-autocomplete';
import '../../../styles/shared-styles';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-labeled-autocomplete_html';
import {customElement, property} from '@polymer/decorators';
import {
GrAutocomplete,
AutocompleteQuery,
} from '../gr-autocomplete/gr-autocomplete';
/** @extends PolymerElement */
class GrLabeledAutocomplete extends GestureEventListeners(
LegacyElementMixin(
PolymerElement)) {
static get template() { return htmlTemplate; }
export interface GrLabeledAutocomplete {
$: {
autocomplete: GrAutocomplete;
};
}
@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.
*
* @event commit
*/
static get properties() {
return {
@property({type: Object})
query: AutocompleteQuery = () => Promise.resolve([]);
/**
* Used just like the query property of gr-autocomplete.
*
* @type {function(string): Promise<?>}
*/
query: {
type: Function,
value() {
return function() {
return Promise.resolve([]);
};
},
},
@property({type: String, notify: true})
text = '';
text: {
type: String,
value: '',
notify: true,
},
label: String,
placeholder: String,
disabled: Boolean,
@property({type: String})
label?: string;
_autocompleteThreshold: {
type: Number,
value: 0,
readOnly: true,
},
};
}
@property({type: String})
placeholder?: string;
_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
// listens for taps on body to try to determine when it's blurred.
e.stopPropagation();
this.$.autocomplete.focus();
}
setText(text) {
setText(text: string) {
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;
}
}

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

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