blob: 9c88c5ceeaf73b8e1b6ff0beca4cab42527ffe0c [file] [log] [blame]
/**
* @license
* Copyright (C) 2018 The Android Open Source Project
*
* 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 '@polymer/iron-icon/iron-icon';
import '../gr-icons/gr-icons';
import '../gr-labeled-autocomplete/gr-labeled-autocomplete';
import {singleDecodeURL} from '../../../utils/url-util';
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 {getAppContext} from '../../../services/app-context';
import {sharedStyles} from '../../../styles/shared-styles';
import {LitElement, PropertyValues, html, css} from 'lit';
import {customElement, property, state, query} from 'lit/decorators';
import {assertIsDefined} from '../../../utils/common-util';
import {fire} from '../../../utils/event-util';
import {BindValueChangeEvent} from '../../../types/events';
const SUGGESTIONS_LIMIT = 15;
const REF_PREFIX = 'refs/heads/';
@customElement('gr-repo-branch-picker')
export class GrRepoBranchPicker extends LitElement {
@query('#repoInput') protected repoInput?: GrLabeledAutocomplete;
@query('#branchInput') protected branchInput?: GrLabeledAutocomplete;
@property({type: String})
repo?: RepoName;
@property({type: String})
branch?: BranchName;
@state() private branchDisabled = false;
private readonly query: AutocompleteQuery = () => Promise.resolve([]);
private readonly repoQuery: AutocompleteQuery = () => Promise.resolve([]);
private readonly restApiService = getAppContext().restApiService;
constructor() {
super();
this.query = input => this.getRepoBranchesSuggestions(input);
this.repoQuery = input => this.getRepoSuggestions(input);
}
override connectedCallback() {
super.connectedCallback();
if (this.repo) {
assertIsDefined(this.repoInput, 'repoInput');
this.repoInput.setText(this.repo);
}
this.branchDisabled = !this.repo;
}
static override get styles() {
return [
sharedStyles,
css`
:host {
display: block;
}
gr-labeled-autocomplete,
iron-icon {
display: inline-block;
}
iron-icon {
margin-bottom: var(--spacing-l);
}
`,
];
}
override render() {
return html`
<div>
<gr-labeled-autocomplete
id="repoInput"
label="Repository"
placeholder="Select repo"
.query=${this.repoQuery}
@commit=${(e: CustomEvent<{value: string}>) => {
this.repoCommitted(e);
}}
>
</gr-labeled-autocomplete>
<iron-icon icon="gr-icons:chevron-right"></iron-icon>
<gr-labeled-autocomplete
id="branchInput"
label="Branch"
placeholder="Select branch"
?disabled=${this.branchDisabled}
.query=${this.query}
@commit=${(e: CustomEvent<{value: string}>) => {
this.branchCommitted(e);
}}
>
</gr-labeled-autocomplete>
</div>
`;
}
override willUpdate(changedProperties: PropertyValues) {
if (changedProperties.has('repo')) {
this.repoChanged();
}
}
// private but used in test
getRepoBranchesSuggestions(input: string) {
if (!this.repo) {
return Promise.resolve([]);
}
if (input.startsWith(REF_PREFIX)) {
input = input.substring(REF_PREFIX.length);
}
return this.restApiService
.getRepoBranches(input, this.repo, SUGGESTIONS_LIMIT)
.then(res => this.branchResponseToSuggestions(res));
}
private 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};
});
}
// private but used in test
getRepoSuggestions(input: string) {
return this.restApiService
.getRepos(input, SUGGESTIONS_LIMIT)
.then(res => this.repoResponseToSuggestions(res));
}
private repoResponseToSuggestions(res: ProjectInfoWithName[] | undefined) {
if (!res) return [];
return res.map(repo => {
return {
name: repo.name,
value: singleDecodeURL(repo.id),
};
});
}
private repoCommitted(e: CustomEvent<{value: string}>) {
this.repo = e.detail.value as RepoName;
fire(this, 'repo-changed', {value: e.detail.value});
}
private branchCommitted(e: CustomEvent<{value: string}>) {
this.branch = e.detail.value as BranchName;
fire(this, 'branch-changed', {value: e.detail.value});
}
private repoChanged() {
assertIsDefined(this.branchInput, 'branchInput');
this.branchInput.clear();
this.branchDisabled = !this.repo;
}
}
declare global {
interface HTMLElementEventMap {
'branch-changed': BindValueChangeEvent;
'repo-changed': BindValueChangeEvent;
}
interface HTMLElementTagNameMap {
'gr-repo-branch-picker': GrRepoBranchPicker;
}
}