Merge "Fix missing return type in e2e-tests" into stable-3.6
diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_test.ts b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_test.ts
index 3ca7b0c..50ab91c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_test.ts
@@ -845,7 +845,7 @@
sinon.stub(window, 'alert');
});
- test('works', () => {
+ test('works', async () => {
element._handleCherrypickTap();
const action = {
__key: 'cherrypick',
@@ -868,8 +868,10 @@
element.$.confirmCherrypick.commitMessage = 'foo message';
element.$.confirmCherrypick.changeStatus = ChangeStatus.NEW;
element.$.confirmCherrypick.commitNum = '123' as CommitId;
+ await element.updateComplete;
element._handleCherrypickConfirm();
+ await element.updateComplete;
const autogrowEl = queryAndAssert<IronAutogrowTextareaElement>(
element.$.confirmCherrypick,
@@ -890,7 +892,7 @@
]);
});
- test('cherry pick even with conflicts', () => {
+ test('cherry pick even with conflicts', async () => {
element._handleCherrypickTap();
const action = {
__key: 'cherrypick',
@@ -908,8 +910,10 @@
element.$.confirmCherrypick.commitMessage = 'foo message';
element.$.confirmCherrypick.changeStatus = ChangeStatus.NEW;
element.$.confirmCherrypick.commitNum = '123' as CommitId;
+ await element.updateComplete;
element._handleCherrypickConflictConfirm();
+ await element.updateComplete;
assert.deepEqual(fireActionStub.lastCall.args, [
'/cherrypick',
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.ts b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.ts
index b708020..32dde8c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.ts
@@ -1870,7 +1870,7 @@
assert.equal(element._patchRange.patchNum, 5 as RevisionPatchSetNum);
});
- test('file-action-tap handling', () => {
+ test('file-action-tap handling', async () => {
element._patchRange = {
basePatchNum: ParentPatchSetNum,
patchNum: 1 as RevisionPatchSetNum,
@@ -1881,10 +1881,12 @@
const fileList = element.$.fileList;
const Actions = GrEditConstants.Actions;
element.$.fileListHeader.editMode = true;
+ await element.$.fileListHeader.updateComplete;
flush();
- const controls = element.$.fileListHeader.shadowRoot!.querySelector(
+ const controls = queryAndAssert<GrEditControls>(
+ element.$.fileListHeader,
'#editControls'
- ) as GrEditControls;
+ );
const openDeleteDialogStub = sinon.stub(controls, 'openDeleteDialog');
const openRenameDialogStub = sinon.stub(controls, 'openRenameDialog');
const openRestoreDialogStub = sinon.stub(controls, 'openRestoreDialog');
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
index c3ae19f..828996e 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
@@ -19,8 +19,6 @@
import '../../../styles/shared-styles';
import '../../shared/gr-autocomplete/gr-autocomplete';
import '../../shared/gr-dialog/gr-dialog';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-confirm-cherrypick-dialog_html';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
import {getAppContext} from '../../../services/app-context';
import {
@@ -30,8 +28,13 @@
CommitId,
ChangeInfoId,
} from '../../../types/common';
-import {customElement, property, observe} from '@polymer/decorators';
-import {GrTypedAutocomplete} from '../../shared/gr-autocomplete/gr-autocomplete';
+import {customElement, property, query, state} from 'lit/decorators';
+import {
+ AutocompleteCommitEvent,
+ AutocompleteQuery,
+ AutocompleteSuggestion,
+ GrTypedAutocomplete,
+} from '../../shared/gr-autocomplete/gr-autocomplete';
import {
HttpMethod,
ChangeStatus,
@@ -39,6 +42,11 @@
} from '../../../constants/constants';
import {dom, EventApi} from '@polymer/polymer/lib/legacy/polymer.dom';
import {fireEvent} from '../../../utils/event-util';
+import {css, html, LitElement, PropertyValues} from 'lit';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {choose} from 'lit/directives/choose';
+import {when} from 'lit/directives/when';
+import {BindValueChangeEvent} from '../../../types/events';
const SUGGESTIONS_LIMIT = 15;
const CHANGE_SUBJECT_LIMIT = 50;
@@ -60,18 +68,8 @@
}
}
-export interface GrConfirmCherrypickDialog {
- $: {
- branchInput: GrTypedAutocomplete<BranchName>;
- };
-}
-
@customElement('gr-confirm-cherrypick-dialog')
-export class GrConfirmCherrypickDialog extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
-
+export class GrConfirmCherrypickDialog extends LitElement {
/**
* Fired when the confirm button is pressed.
*
@@ -108,27 +106,30 @@
@property({type: Array})
changes: ChangeInfo[] = [];
- @property({type: Object})
- _query?: (input: string) => Promise<{name: BranchName}[]>;
+ @state()
+ private query: AutocompleteQuery;
- @property({type: Boolean})
- _showCherryPickTopic = false;
+ @state()
+ private showCherryPickTopic = false;
- @property({type: Number})
- _changesCount?: number;
+ @state()
+ private changesCount?: number;
- @property({type: Number})
- _cherryPickType = CherryPickType.SINGLE_CHANGE;
+ @state()
+ cherryPickType = CherryPickType.SINGLE_CHANGE;
- @property({type: Boolean})
- _duplicateProjectChanges = false;
+ @state()
+ private duplicateProjectChanges = false;
- @property({type: Object})
+ @state()
// Status of each change that is being cherry picked together
- _statuses: Statuses;
+ private statuses: Statuses;
- @property({type: Boolean})
- _invalidBranch = false;
+ @state()
+ private invalidBranch = false;
+
+ @query('#branchInput')
+ branchInput!: GrTypedAutocomplete<BranchName>;
private selectedChangeIds = new Set<ChangeInfoId>();
@@ -138,8 +139,254 @@
constructor() {
super();
- this._statuses = {};
- this._query = (text: string) => this._getProjectBranchesSuggestions(text);
+ this.statuses = {};
+ this.query = (text: string) => this.getProjectBranchesSuggestions(text);
+ }
+
+ override willUpdate(changedProperties: PropertyValues) {
+ if (changedProperties.has('branch')) {
+ this.updateBranch();
+ }
+ if (
+ changedProperties.has('changeStatus') ||
+ changedProperties.has('commitNum') ||
+ changedProperties.has('commitMessage')
+ ) {
+ this.computeMessage();
+ }
+ }
+
+ static override styles = [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ }
+ .main {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ .main label,
+ .main input[type='text'] {
+ display: block;
+ width: 100%;
+ }
+ iron-autogrow-textarea {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ width: 73ch; /* Add a char to account for the border. */
+ }
+ .cherryPickTopicLayout {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--spacing-m);
+ }
+ .cherryPickSingleChange,
+ .cherryPickTopic {
+ margin-left: var(--spacing-m);
+ }
+ .cherry-pick-topic-message {
+ margin-bottom: var(--spacing-m);
+ }
+ label[for='messageInput'],
+ label[for='baseInput'] {
+ margin-top: var(--spacing-m);
+ }
+ .title {
+ font-weight: var(--font-weight-bold);
+ }
+ tr > td {
+ padding: var(--spacing-m);
+ }
+ th {
+ color: var(--deemphasized-text-color);
+ }
+ table {
+ border-collapse: collapse;
+ }
+ tr {
+ border-bottom: 1px solid var(--border-color);
+ }
+ .error {
+ color: var(--error-text-color);
+ }
+ .error-message {
+ color: var(--error-text-color);
+ margin: var(--spacing-m) 0 var(--spacing-m) 0;
+ }
+ `,
+ ];
+
+ override render() {
+ return html`
+ <gr-dialog
+ confirm-label="Cherry Pick"
+ .cancelLabel=${this.computeCancelLabel()}
+ ?disabled=${this.computeDisableCherryPick(
+ this.cherryPickType,
+ this.duplicateProjectChanges,
+ this.statuses,
+ this.branch
+ )}
+ @confirm=${this.handleConfirmTap}
+ @cancel=${this.handleCancelTap}
+ >
+ <div class="header title" slot="header">
+ Cherry Pick Change to Another Branch
+ </div>
+ <div class="main" slot="main">
+ ${when(this.showCherryPickTopic, () =>
+ this.renderCherrypickTopicLayout()
+ )}
+ <label for="branchInput"> Cherry Pick to branch </label>
+ <gr-autocomplete
+ id="branchInput"
+ .text=${this.branch}
+ .query=${this.query}
+ placeholder="Destination branch"
+ @commit=${(e: AutocompleteCommitEvent) =>
+ (this.branch = e.detail.value as BranchName)}
+ >
+ </gr-autocomplete>
+ ${when(
+ this.invalidBranch,
+ () => html`
+ <span class="error"
+ >Branch name cannot contain space or commas.</span
+ >
+ `
+ )}
+ ${choose(this.cherryPickType, [
+ [
+ CherryPickType.SINGLE_CHANGE,
+ () => this.renderCherrypickSingleChangeInputs(),
+ ],
+ [CherryPickType.TOPIC, () => this.renderCherrypickTopicTable()],
+ ])}
+ </div>
+ </gr-dialog>
+ `;
+ }
+
+ private renderCherrypickTopicLayout() {
+ return html`
+ <div class="cherryPickTopicLayout">
+ <input
+ name="cherryPickOptions"
+ type="radio"
+ id="cherryPickSingleChange"
+ @change=${this.handlecherryPickSingleChangeClicked}
+ checked
+ />
+ <label for="cherryPickSingleChange" class="cherryPickSingleChange">
+ Cherry Pick single change
+ </label>
+ </div>
+ <div class="cherryPickTopicLayout">
+ <input
+ name="cherryPickOptions"
+ type="radio"
+ id="cherryPickTopic"
+ @change=${this.handlecherryPickTopicClicked}
+ />
+ <label for="cherryPickTopic" class="cherryPickTopic">
+ Cherry Pick entire topic (${this.changesCount} Changes)
+ </label>
+ </div>
+ `;
+ }
+
+ private renderCherrypickSingleChangeInputs() {
+ return html`
+ <label for="baseInput"> Provide base commit sha1 for cherry-pick </label>
+ <iron-input
+ .bindValue=${this.baseCommit}
+ @bind-value-changed=${(e: BindValueChangeEvent) =>
+ (this.baseCommit = e.detail.value)}
+ >
+ <input
+ is="iron-input"
+ id="baseCommitInput"
+ maxlength="40"
+ placeholder="(optional)"
+ />
+ </iron-input>
+ <label for="messageInput"> Cherry Pick Commit Message </label>
+ <iron-autogrow-textarea
+ id="messageInput"
+ class="message"
+ autocomplete="on"
+ rows="4"
+ .maxRows=${15}
+ .bindValue=${this.message}
+ @bind-value-changed=${(e: BindValueChangeEvent) =>
+ (this.message = e.detail.value)}
+ ></iron-autogrow-textarea>
+ `;
+ }
+
+ private renderCherrypickTopicTable() {
+ return html`
+ <span class="error-message">${this.computeTopicErrorMessage()}</span>
+ <span class="cherry-pick-topic-message">
+ Commit Message will be auto generated
+ </span>
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ <th>Change</th>
+ <th>Status</th>
+ <th>Subject</th>
+ <th>Project</th>
+ <th>Progress</th>
+ <!-- Error Message -->
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ ${this.changes.map(
+ item => html`
+ <tr>
+ <td>
+ <input
+ type="checkbox"
+ data-item=${item.id as string}
+ @change=${this.toggleChangeSelected}
+ ?checked=${this.isChangeSelected(item.id)}
+ />
+ </td>
+ <td><span> ${this.getChangeId(item)} </span></td>
+ <td><span> ${item.status} </span></td>
+ <td>
+ <span> ${this.getTrimmedChangeSubject(item.subject)} </span>
+ </td>
+ <td><span> ${item.project} </span></td>
+ <td>
+ <span class=${this.computeStatusClass(item, this.statuses)}>
+ ${this.computeStatus(item, this.statuses)}
+ </span>
+ </td>
+ <td>
+ <span class="error">
+ ${this.computeError(item, this.statuses)}
+ </span>
+ </td>
+ </tr>
+ `
+ )}
+ </tbody>
+ </table>
+ `;
}
containsDuplicateProject(changes: ChangeInfo[]) {
@@ -156,28 +403,27 @@
updateChanges(changes: ChangeInfo[]) {
this.changes = changes;
- this._statuses = {};
+ this.statuses = {};
changes.forEach(change => {
this.selectedChangeIds.add(change.id);
});
- this._duplicateProjectChanges = this.containsDuplicateProject(changes);
- this._changesCount = changes.length;
- this._showCherryPickTopic = changes.length > 1;
+ this.duplicateProjectChanges = this.containsDuplicateProject(changes);
+ this.changesCount = changes.length;
+ this.showCherryPickTopic = changes.length > 1;
}
- @observe('branch')
- _updateBranch(branch: string) {
+ private updateBranch() {
const invalidChars = [',', ' '];
- this._invalidBranch = !!(
- branch && invalidChars.some(c => branch.includes(c))
+ this.invalidBranch = !!(
+ this.branch && invalidChars.some(c => this.branch.includes(c))
);
}
- _isChangeSelected(changeId: ChangeInfoId) {
+ private isChangeSelected(changeId: ChangeInfoId) {
return this.selectedChangeIds.has(changeId);
}
- _toggleChangeSelected(e: Event) {
+ private toggleChangeSelected(e: Event) {
const changeId = ((dom(e) as EventApi).localTarget as HTMLElement).dataset[
'item'
]! as ChangeInfoId;
@@ -187,32 +433,32 @@
const changes = this.changes.filter(change =>
this.selectedChangeIds.has(change.id)
);
- this._duplicateProjectChanges = this.containsDuplicateProject(changes);
+ this.duplicateProjectChanges = this.containsDuplicateProject(changes);
}
- _computeTopicErrorMessage(duplicateProjectChanges: boolean) {
- if (duplicateProjectChanges) {
+ private computeTopicErrorMessage() {
+ if (this.duplicateProjectChanges) {
return 'Two changes cannot be of the same project';
}
return '';
}
updateStatus(change: ChangeInfo, status: Status) {
- this._statuses = {...this._statuses, [change.id]: status};
+ this.statuses = {...this.statuses, [change.id]: status};
}
- _computeStatus(change: ChangeInfo, statuses: Statuses) {
+ private computeStatus(change: ChangeInfo, statuses: Statuses) {
if (!change || !statuses || !statuses[change.id])
return ProgressStatus.NOT_STARTED;
return statuses[change.id].status;
}
- _computeStatusClass(change: ChangeInfo, statuses: Statuses) {
+ computeStatusClass(change: ChangeInfo, statuses: Statuses) {
if (!change || !statuses || !statuses[change.id]) return '';
return statuses[change.id].status === ProgressStatus.FAILED ? 'error' : '';
}
- _computeError(change: ChangeInfo, statuses: Statuses) {
+ private computeError(change: ChangeInfo, statuses: Statuses) {
if (!change || !statuses || !statuses[change.id]) return '';
if (statuses[change.id].status === ProgressStatus.FAILED) {
return statuses[change.id].msg;
@@ -220,24 +466,24 @@
return '';
}
- _getChangeId(change: ChangeInfo) {
+ private getChangeId(change: ChangeInfo) {
return change.change_id.substring(0, 10);
}
- _getTrimmedChangeSubject(subject: string) {
+ private getTrimmedChangeSubject(subject: string) {
if (!subject) return '';
if (subject.length < CHANGE_SUBJECT_LIMIT) return subject;
return subject.substring(0, CHANGE_SUBJECT_LIMIT) + '...';
}
- _computeCancelLabel(statuses: Statuses) {
- const isRunningChange = Object.values(statuses).some(
+ private computeCancelLabel() {
+ const isRunningChange = Object.values(this.statuses).some(
v => v.status === ProgressStatus.RUNNING
);
return isRunningChange ? 'Close' : 'Cancel';
}
- _computeDisableCherryPick(
+ private computeDisableCherryPick(
cherryPickType: CherryPickType,
duplicateProjectChanges: boolean,
statuses: Statuses,
@@ -254,64 +500,54 @@
return isRunningChange;
}
- _computeIfSinglecherryPick(cherryPickType: CherryPickType) {
- return cherryPickType === CherryPickType.SINGLE_CHANGE;
- }
-
- _computeIfCherryPickTopic(cherryPickType: CherryPickType) {
- return cherryPickType === CherryPickType.TOPIC;
- }
-
- _handlecherryPickSingleChangeClicked() {
- this._cherryPickType = CherryPickType.SINGLE_CHANGE;
+ private handlecherryPickSingleChangeClicked() {
+ this.cherryPickType = CherryPickType.SINGLE_CHANGE;
fireEvent(this, 'iron-resize');
}
- _handlecherryPickTopicClicked() {
- this._cherryPickType = CherryPickType.TOPIC;
+ private handlecherryPickTopicClicked() {
+ this.cherryPickType = CherryPickType.TOPIC;
fireEvent(this, 'iron-resize');
}
- @observe('changeStatus', 'commitNum', 'commitMessage')
- _computeMessage(
- changeStatus?: string,
- commitNum?: number,
- commitMessage?: string
- ) {
+ private computeMessage() {
// Polymer 2: check for undefined
if (
- changeStatus === undefined ||
- commitNum === undefined ||
- commitMessage === undefined
+ this.changeStatus === undefined ||
+ this.commitNum === undefined ||
+ this.commitMessage === undefined
) {
return;
}
- let newMessage = commitMessage;
+ let newMessage = this.commitMessage;
- if (changeStatus === 'MERGED') {
+ if (this.changeStatus === 'MERGED') {
if (!newMessage.endsWith('\n')) {
newMessage += '\n';
}
- newMessage += '(cherry picked from commit ' + commitNum.toString() + ')';
+ newMessage += '(cherry picked from commit ' + this.commitNum + ')';
}
this.message = newMessage;
}
- _generateRandomCherryPickTopic(change: ChangeInfo) {
+ private generateRandomCherryPickTopic(change: ChangeInfo) {
const randomString = Math.random().toString(36).substr(2, 10);
const message = `cherrypick-${change.topic}-${randomString}`;
return message;
}
- _handleCherryPickFailed(change: ChangeInfo, response?: Response | null) {
+ private handleCherryPickFailed(
+ change: ChangeInfo,
+ response?: Response | null
+ ) {
if (!response) return;
response.text().then((errText: string) => {
this.updateStatus(change, {status: ProgressStatus.FAILED, msg: errText});
});
}
- _handleCherryPickTopic() {
+ private handleCherryPickTopic() {
const changes = this.changes.filter(change =>
this.selectedChangeIds.has(change.id)
);
@@ -320,7 +556,7 @@
errorSpan!.innerHTML = 'No change selected';
return;
}
- const topic = this._generateRandomCherryPickTopic(changes[0]);
+ const topic = this.generateRandomCherryPickTopic(changes[0]);
changes.forEach(change => {
this.updateStatus(change, {status: ProgressStatus.RUNNING});
const payload = {
@@ -331,7 +567,7 @@
allow_empty: true,
};
const handleError = (response?: Response | null) => {
- this._handleCherryPickFailed(change, response);
+ this.handleCherryPickFailed(change, response);
};
// revisions and current_revision must exist hence casting
const patchNum = change.revisions![change.current_revision!]._number;
@@ -346,7 +582,7 @@
)
.then(() => {
this.updateStatus(change, {status: ProgressStatus.SUCCESSFUL});
- const failedOrPending = Object.values(this._statuses).find(
+ const failedOrPending = Object.values(this.statuses).find(
v => v.status !== ProgressStatus.SUCCESSFUL
);
if (!failedOrPending) {
@@ -358,12 +594,12 @@
});
}
- _handleConfirmTap(e: Event) {
+ private handleConfirmTap(e: Event) {
e.preventDefault();
e.stopPropagation();
- if (this._cherryPickType === CherryPickType.TOPIC) {
+ if (this.cherryPickType === CherryPickType.TOPIC) {
this.reporting.reportInteraction('cherry-pick-topic-clicked', {});
- this._handleCherryPickTopic();
+ this.handleCherryPickTopic();
return;
}
// Cherry pick single change
@@ -375,7 +611,7 @@
);
}
- _handleCancelTap(e: Event) {
+ private handleCancelTap(e: Event) {
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(
@@ -387,10 +623,12 @@
}
resetFocus() {
- this.$.branchInput.focus();
+ this.branchInput.focus();
}
- _getProjectBranchesSuggestions(input: string) {
+ async getProjectBranchesSuggestions(
+ input: string
+ ): Promise<AutocompleteSuggestion[]> {
if (!this.project) return Promise.reject(new Error('Missing project'));
if (input.startsWith('refs/heads/')) {
input = input.substring('refs/heads/'.length);
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_html.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_html.ts
deleted file mode 100644
index d42f7e5..0000000
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_html.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 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 {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <style include="shared-styles">
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- }
- .main {
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- .main label,
- .main input[type='text'] {
- display: block;
- width: 100%;
- }
- iron-autogrow-textarea {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- width: 73ch; /* Add a char to account for the border. */
- }
- .cherryPickTopicLayout {
- display: flex;
- align-items: center;
- margin-bottom: var(--spacing-m);
- }
- .cherryPickSingleChange,
- .cherryPickTopic {
- margin-left: var(--spacing-m);
- }
- .cherry-pick-topic-message {
- margin-bottom: var(--spacing-m);
- }
- label[for='messageInput'],
- label[for='baseInput'] {
- margin-top: var(--spacing-m);
- }
- .title {
- font-weight: var(--font-weight-bold);
- }
- tr > td {
- padding: var(--spacing-m);
- }
- th {
- color: var(--deemphasized-text-color);
- }
- table {
- border-collapse: collapse;
- }
- tr {
- border-bottom: 1px solid var(--border-color);
- }
- .error {
- color: var(--error-text-color);
- }
- .error-message {
- color: var(--error-text-color);
- margin: var(--spacing-m) 0 var(--spacing-m) 0;
- }
- </style>
- <gr-dialog
- confirm-label="Cherry Pick"
- cancel-label="[[_computeCancelLabel(_statuses)]]"
- disabled$="[[_computeDisableCherryPick(_cherryPickType, _duplicateProjectChanges, _statuses, branch)]]"
- on-confirm="_handleConfirmTap"
- on-cancel="_handleCancelTap"
- >
- <div class="header title" slot="header">
- Cherry Pick Change to Another Branch
- </div>
- <div class="main" slot="main">
- <template is="dom-if" if="[[_showCherryPickTopic]]">
- <div class="cherryPickTopicLayout">
- <input
- name="cherryPickOptions"
- type="radio"
- id="cherryPickSingleChange"
- on-change="_handlecherryPickSingleChangeClicked"
- checked=""
- />
- <label for="cherryPickSingleChange" class="cherryPickSingleChange">
- Cherry Pick single change
- </label>
- </div>
- <div class="cherryPickTopicLayout">
- <input
- name="cherryPickOptions"
- type="radio"
- id="cherryPickTopic"
- on-change="_handlecherryPickTopicClicked"
- />
- <label for="cherryPickTopic" class="cherryPickTopic">
- Cherry Pick entire topic ([[_changesCount]] Changes)
- </label>
- </div></template
- >
-
- <label for="branchInput"> Cherry Pick to branch </label>
- <gr-autocomplete
- id="branchInput"
- text="{{branch}}"
- query="[[_query]]"
- placeholder="Destination branch"
- >
- </gr-autocomplete>
- <template is="dom-if" if="[[_invalidBranch]]">
- <span class="error"> Branch name cannot contain space or commas. </span>
- </template>
- <template
- is="dom-if"
- if="[[_computeIfSinglecherryPick(_cherryPickType)]]"
- >
- <label for="baseInput">
- Provide base commit sha1 for cherry-pick
- </label>
- <iron-input
- maxlength="40"
- placeholder="(optional)"
- bind-value="{{baseCommit}}"
- >
- <input
- is="iron-input"
- id="baseCommitInput"
- maxlength="40"
- placeholder="(optional)"
- bind-value="{{baseCommit}}"
- />
- </iron-input>
- <label for="messageInput"> Cherry Pick Commit Message </label>
- </template>
- <template
- is="dom-if"
- if="[[_computeIfSinglecherryPick(_cherryPickType)]]"
- >
- <iron-autogrow-textarea
- id="messageInput"
- class="message"
- autocomplete="on"
- rows="4"
- max-rows="15"
- bind-value="{{message}}"
- ></iron-autogrow-textarea>
- </template>
- <template is="dom-if" if="[[_computeIfCherryPickTopic(_cherryPickType)]]">
- <span class="error-message"
- >[[_computeTopicErrorMessage(_duplicateProjectChanges)]]</span
- >
- <span class="cherry-pick-topic-message">
- Commit Message will be auto generated
- </span>
- <table>
- <thead>
- <tr>
- <th></th>
- <th>Change</th>
- <th>Status</th>
- <th>Subject</th>
- <th>Project</th>
- <th>Progress</th>
- <!-- Error Message -->
- <th></th>
- </tr>
- </thead>
- <tbody>
- <template is="dom-repeat" items="[[changes]]">
- <tr>
- <td>
- <input
- type="checkbox"
- data-item$="[[item.id]]"
- on-change="_toggleChangeSelected"
- checked="[[_isChangeSelected(item.id)]]"
- />
- </td>
- <td><span> [[_getChangeId(item)]] </span></td>
- <td><span> [[item.status]] </span></td>
- <td>
- <span> [[_getTrimmedChangeSubject(item.subject)]] </span>
- </td>
- <td><span> [[item.project]] </span></td>
- <td>
- <span class$="[[_computeStatusClass(item, _statuses)]]">
- [[_computeStatus(item, _statuses)]]
- </span>
- </td>
- <td>
- <span class="error">
- [[_computeError(item, _statuses)]]
- </span>
- </td>
- </tr>
- </template>
- </tbody>
- </table>
- </template>
- </div>
- </gr-dialog>
-`;
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.ts
index 18a4fea..45e13b2 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.ts
@@ -36,8 +36,7 @@
import {GrDialog} from '../../shared/gr-dialog/gr-dialog.js';
import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions';
import {ProgressStatus} from '../../../constants/constants';
-
-const basicFixture = fixtureFromElement('gr-confirm-cherrypick-dialog');
+import {fixture, html} from '@open-wc/testing-helpers';
const CHERRY_PICK_TYPES = {
SINGLE_CHANGE: 1,
@@ -46,7 +45,7 @@
suite('gr-confirm-cherrypick-dialog tests', () => {
let element: GrConfirmCherrypickDialog;
- setup(() => {
+ setup(async () => {
stubRestApi('getRepoBranches').callsFake(input => {
if (input.startsWith('test')) {
return Promise.resolve([
@@ -60,53 +59,59 @@
return Promise.resolve([]);
}
});
- element = basicFixture.instantiate();
+ element = await fixture(
+ html`<gr-confirm-cherrypick-dialog></gr-confirm-cherrypick-dialog>`
+ );
element.project = 'test-project' as RepoName;
});
- test('with message missing newline', () => {
+ test('with message missing newline', async () => {
element.changeStatus = ChangeStatus.MERGED;
element.commitMessage = 'message';
element.commitNum = '123' as CommitId;
element.branch = 'master' as BranchName;
- flush();
+ await element.updateComplete;
const expectedMessage = 'message\n(cherry picked from commit 123)';
assert.equal(element.message, expectedMessage);
});
- test('with merged change', () => {
+ test('with merged change', async () => {
element.changeStatus = ChangeStatus.MERGED;
element.commitMessage = 'message\n';
element.commitNum = '123' as CommitId;
element.branch = 'master' as BranchName;
- flush();
+ await element.updateComplete;
const expectedMessage = 'message\n(cherry picked from commit 123)';
assert.equal(element.message, expectedMessage);
});
- test('with unmerged change', () => {
+ test('with unmerged change', async () => {
element.changeStatus = ChangeStatus.NEW;
element.commitMessage = 'message\n';
element.commitNum = '123' as CommitId;
element.branch = 'master' as BranchName;
- flush();
+ await element.updateComplete;
+
const expectedMessage = 'message\n';
assert.equal(element.message, expectedMessage);
});
- test('with updated commit message', () => {
+ test('with updated commit message', async () => {
element.changeStatus = ChangeStatus.NEW;
element.commitMessage = 'message\n';
element.commitNum = '123' as CommitId;
element.branch = 'master' as BranchName;
+ await element.updateComplete;
+
const myNewMessage = 'updated commit message';
element.message = myNewMessage;
- flush();
+ await element.updateComplete;
+
assert.equal(element.message, myNewMessage);
});
- test('_getProjectBranchesSuggestions empty', async () => {
- const branches = await element._getProjectBranchesSuggestions('asdf');
+ test('getProjectBranchesSuggestions empty', async () => {
+ const branches = await element.getProjectBranchesSuggestions('asdf');
assert.isEmpty(branches);
});
@@ -141,20 +146,18 @@
];
setup(async () => {
element.updateChanges(changes);
- element._cherryPickType = CHERRY_PICK_TYPES.TOPIC;
- await flush();
+ element.cherryPickType = CHERRY_PICK_TYPES.TOPIC;
+ await element.updateComplete;
});
test('cherry pick topic submit', async () => {
element.branch = 'master' as BranchName;
- await flush();
+ await element.updateComplete;
const executeChangeActionStub = stubRestApi(
'executeChangeAction'
).returns(Promise.resolve(new Response()));
- MockInteractions.tap(
- queryAndAssert<GrDialog>(element, 'gr-dialog').confirmButton!
- );
- await flush();
+ queryAndAssert<GrDialog>(element, 'gr-dialog').confirmButton!.click();
+ await element.updateComplete;
const args = executeChangeActionStub.args[0];
assert.equal(args[0], 1);
assert.equal(args[1], 'POST' as HttpMethod);
@@ -170,7 +173,7 @@
'containsDuplicateProject'
);
element.branch = 'master' as BranchName;
- await flush();
+ await element.updateComplete;
const executeChangeActionStub = stubRestApi(
'executeChangeAction'
).returns(Promise.resolve(new Response()));
@@ -181,17 +184,15 @@
assert.equal(checkboxes.length, 2);
assert.isTrue(checkboxes[0].checked);
MockInteractions.tap(checkboxes[0]);
- MockInteractions.tap(
- queryAndAssert<GrDialog>(element, 'gr-dialog').confirmButton!
- );
- await flush();
+ queryAndAssert<GrDialog>(element, 'gr-dialog').confirmButton!.click();
+ await element.updateComplete;
assert.equal(executeChangeActionStub.callCount, 1);
assert.isTrue(duplicateChangesStub.called);
});
test('deselecting all change shows error message', async () => {
element.branch = 'master' as BranchName;
- await flush();
+ await element.updateComplete;
const executeChangeActionStub = stubRestApi(
'executeChangeAction'
).returns(Promise.resolve(new Response()));
@@ -205,7 +206,7 @@
MockInteractions.tap(
queryAndAssert<GrDialog>(element, 'gr-dialog').confirmButton!
);
- await flush();
+ await element.updateComplete;
assert.equal(executeChangeActionStub.callCount, 0);
assert.equal(
queryAndAssert<HTMLElement>(element, '.error-message').innerText,
@@ -213,16 +214,16 @@
);
});
- test('_computeStatusClass', () => {
+ test('computeStatusClass', async () => {
assert.equal(
- element._computeStatusClass(
+ element.computeStatusClass(
{...createChange(), id: '1' as ChangeInfoId},
{1: {status: ProgressStatus.RUNNING}}
),
''
);
assert.equal(
- element._computeStatusClass(
+ element.computeStatusClass(
{...createChange(), id: '1' as ChangeInfoId},
{1: {status: ProgressStatus.FAILED}}
),
@@ -237,24 +238,24 @@
).confirmButton;
assert.isTrue(confirmButton!.hasAttribute('disabled'));
element.branch = 'b' as BranchName;
- await flush();
+ await element.updateComplete;
assert.isFalse(confirmButton!.hasAttribute('disabled'));
element.updateStatus(changes[0], {status: ProgressStatus.RUNNING});
- await flush();
+ await element.updateComplete;
assert.isTrue(confirmButton!.hasAttribute('disabled'));
});
});
- test('resetFocus', () => {
- const focusStub = sinon.stub(element.$.branchInput, 'focus');
+ test('resetFocus', async () => {
+ const focusStub = sinon.stub(element.branchInput, 'focus');
element.resetFocus();
+ await element.updateComplete;
+
assert.isTrue(focusStub.called);
});
- test('_getProjectBranchesSuggestions non-empty', async () => {
- const branches = await element._getProjectBranchesSuggestions(
- 'test-branch'
- );
+ test('getProjectBranchesSuggestions non-empty', async () => {
+ const branches = await element.getProjectBranchesSuggestions('test-branch');
assert.equal(branches.length, 1);
assert.equal(branches[0].name, 'test-branch');
});
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
index 56949fa..a711680 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../../styles/shared-styles';
import '../../../embed/diff/gr-diff-mode-selector/gr-diff-mode-selector';
import '../../diff/gr-patch-range-select/gr-patch-range-select';
import '../../edit/gr-edit-controls/gr-edit-controls';
@@ -22,12 +21,10 @@
import '../../shared/gr-button/gr-button';
import '../../shared/gr-icons/gr-icons';
import '../gr-commit-info/gr-commit-info';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-file-list-header_html';
import {FilesExpandedState} from '../gr-file-list-constants';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
import {computeLatestPatchNum, PatchSet} from '../../../utils/patch-set-util';
-import {property, customElement} from '@polymer/decorators';
+import {property, customElement, query} from 'lit/decorators';
import {
AccountInfo,
ChangeInfo,
@@ -47,27 +44,13 @@
ShortcutSection,
} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
import {getAppContext} from '../../../services/app-context';
-
-declare global {
- interface HTMLElementTagNameMap {
- 'gr-file-list-header': GrFileListHeader;
- }
-}
-
-export interface GrFileListHeader {
- $: {
- modeSelect: GrDiffModeSelector;
- expandBtn: GrButton;
- collapseBtn: GrButton;
- };
-}
+import {css, html, LitElement} from 'lit';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {when} from 'lit/directives/when';
+import {ifDefined} from 'lit/directives/if-defined';
@customElement('gr-file-list-header')
-export class GrFileListHeader extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
-
+export class GrFileListHeader extends LitElement {
/**
* @event expand-diffs
*/
@@ -112,7 +95,7 @@
serverConfig?: ServerInfo;
@property({type: Number})
- shownFileCount?: number;
+ shownFileCount = 0;
@property({type: Object})
diffPrefs?: DiffPreferencesInfo;
@@ -126,25 +109,273 @@
@property({type: String})
filesExpanded?: FilesExpandedState;
- // Caps the number of files that can be shown and have the 'show diffs' /
- // 'hide diffs' buttons still be functional.
- @property({type: Number})
- readonly _maxFilesForBulkActions = 225;
-
@property({type: Object})
revisionInfo?: RevisionInfo;
+ @query('#modeSelect')
+ modeSelect?: GrDiffModeSelector;
+
+ @query('#expandBtn')
+ expandBtn?: GrButton;
+
+ @query('#collapseBtn')
+ collapseBtn?: GrButton;
+
private readonly shortcuts = getAppContext().shortcutsService;
- _expandAllDiffs() {
+ // Caps the number of files that can be shown and have the 'show diffs' /
+ // 'hide diffs' buttons still be functional.
+ private readonly maxFilesForBulkActions = 225;
+
+ static override styles = [
+ sharedStyles,
+ css`
+ .prefsButton {
+ float: right;
+ }
+ .patchInfoOldPatchSet.patchInfo-header {
+ background-color: var(--emphasis-color);
+ }
+ .patchInfo-header {
+ align-items: center;
+ display: flex;
+ padding: var(--spacing-s) var(--spacing-l);
+ }
+ .patchInfo-left {
+ align-items: baseline;
+ display: flex;
+ }
+ .patchInfoContent {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .patchInfo-header .container.latestPatchContainer {
+ display: none;
+ }
+ .patchInfoOldPatchSet .container.latestPatchContainer {
+ display: initial;
+ }
+ .editMode.patchInfoOldPatchSet .container.latestPatchContainer {
+ display: none;
+ }
+ .latestPatchContainer a {
+ text-decoration: none;
+ }
+ .mobile {
+ display: none;
+ }
+ .patchInfo-header .container {
+ align-items: center;
+ display: flex;
+ }
+ .downloadContainer,
+ .uploadContainer {
+ margin-right: 16px;
+ }
+ .uploadContainer.hide {
+ display: none;
+ }
+ .rightControls {
+ align-self: flex-end;
+ margin: auto 0 auto auto;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ font-weight: var(--font-weight-normal);
+ justify-content: flex-end;
+ }
+ #collapseBtn,
+ .allExpanded #expandBtn,
+ .fileViewActions {
+ display: none;
+ }
+ .someExpanded #expandBtn {
+ margin-right: 8px;
+ }
+ .someExpanded #collapseBtn,
+ .allExpanded #collapseBtn,
+ .openFile .fileViewActions {
+ align-items: center;
+ display: flex;
+ }
+ .rightControls gr-button,
+ gr-patch-range-select {
+ margin: 0 -4px;
+ }
+ .fileViewActions gr-button {
+ margin: 0;
+ --gr-button-padding: 2px 4px;
+ }
+ .editMode .hideOnEdit {
+ display: none;
+ }
+ .showOnEdit {
+ display: none;
+ }
+ .editMode .showOnEdit {
+ display: initial;
+ }
+ .editMode .showOnEdit.flexContainer {
+ align-items: center;
+ display: flex;
+ }
+ .label {
+ font-weight: var(--font-weight-bold);
+ margin-right: 24px;
+ }
+ gr-commit-info,
+ gr-edit-controls {
+ margin-right: -5px;
+ }
+ .fileViewActionsLabel {
+ margin-right: var(--spacing-xs);
+ }
+ @media screen and (max-width: 50em) {
+ .patchInfo-header .desktop {
+ display: none;
+ }
+ }
+ `,
+ ];
+
+ override render() {
+ if (!this.change || !this.diffPrefs) {
+ return;
+ }
+ const editModeClass = this.computeEditModeClass(this.editMode);
+ const patchInfoClass = this.computePatchInfoClass(
+ this.patchNum,
+ this.allPatchSets
+ );
+ const expandedClass = this.computeExpandedClass(this.filesExpanded);
+ const prefsButtonHidden = this.computePrefsButtonHidden(
+ this.diffPrefs,
+ this.loggedIn
+ );
+ return html`
+ <div class="patchInfo-header ${editModeClass} ${patchInfoClass}">
+ <div class="patchInfo-left">
+ <div class="patchInfoContent">
+ <gr-patch-range-select
+ id="rangeSelect"
+ .changeNum=${this.changeNum}
+ .patchNum=${this.patchNum}
+ .basePatchNum=${this.basePatchNum}
+ .availablePatches=${this.allPatchSets}
+ .revisions=${this.change.revisions}
+ .revisionInfo=${this.revisionInfo}
+ @patch-range-change=${this.handlePatchChange}
+ >
+ </gr-patch-range-select>
+ <span class="separator"></span>
+ <gr-commit-info
+ .change=${this.change}
+ .serverConfig=${this.serverConfig}
+ .commitInfo=${this.commitInfo}
+ ></gr-commit-info>
+ <span class="container latestPatchContainer">
+ <span class="separator"></span>
+ <a href=${ifDefined(this.changeUrl)}>Go to latest patch set</a>
+ </span>
+ </div>
+ </div>
+ <div class="rightControls ${expandedClass}">
+ ${when(
+ this.editMode,
+ () => html`
+ <span class="showOnEdit flexContainer">
+ <gr-edit-controls
+ id="editControls"
+ .patchNum=${this.patchNum}
+ .change=${this.change}
+ ></gr-edit-controls>
+ <span class="separator"></span>
+ </span>
+ `
+ )}
+ <div class="fileViewActions">
+ <span class="fileViewActionsLabel">Diff view:</span>
+ <gr-diff-mode-selector
+ id="modeSelect"
+ .saveOnChange=${this.loggedIn ?? false}
+ ></gr-diff-mode-selector>
+ <span
+ id="diffPrefsContainer"
+ class="hideOnEdit"
+ ?hidden=${prefsButtonHidden}
+ >
+ <gr-tooltip-content has-tooltip title="Diff preferences">
+ <gr-button
+ link
+ class="prefsButton desktop"
+ @click=${this.handlePrefsTap}
+ ><iron-icon icon="gr-icons:settings"></iron-icon
+ ></gr-button>
+ </gr-tooltip-content>
+ </span>
+ <span class="separator"></span>
+ </div>
+ <span class="downloadContainer desktop">
+ <gr-tooltip-content
+ has-tooltip
+ title=${this.createTitle(
+ Shortcut.OPEN_DOWNLOAD_DIALOG,
+ ShortcutSection.ACTIONS
+ )}
+ >
+ <gr-button link class="download" @click=${this.handleDownloadTap}
+ >Download</gr-button
+ >
+ </gr-tooltip-content>
+ </span>
+ ${when(
+ this.fileListActionsVisible(
+ this.shownFileCount,
+ this.maxFilesForBulkActions
+ ),
+ () => html` <gr-tooltip-content
+ has-tooltip
+ title=${this.createTitle(
+ Shortcut.TOGGLE_ALL_INLINE_DIFFS,
+ ShortcutSection.FILE_LIST
+ )}
+ >
+ <gr-button id="expandBtn" link @click=${this.expandAllDiffs}
+ >Expand All</gr-button
+ >
+ </gr-tooltip-content>
+ <gr-tooltip-content
+ has-tooltip
+ title=${this.createTitle(
+ Shortcut.TOGGLE_ALL_INLINE_DIFFS,
+ ShortcutSection.FILE_LIST
+ )}
+ >
+ <gr-button id="collapseBtn" link @click=${this.collapseAllDiffs}
+ >Collapse All</gr-button
+ >
+ </gr-tooltip-content>`,
+ () => html`
+ <div class="warning">
+ Bulk actions disabled because there are too many files.
+ </div>
+ `
+ )}
+ </div>
+ </div>
+ `;
+ }
+
+ private expandAllDiffs() {
fireEvent(this, 'expand-diffs');
}
- _collapseAllDiffs() {
+ private collapseAllDiffs() {
fireEvent(this, 'collapse-diffs');
}
- _computeExpandedClass(filesExpanded: FilesExpandedState) {
+ private computeExpandedClass(filesExpanded?: FilesExpandedState) {
const classes = [];
if (filesExpanded === FilesExpandedState.ALL) {
classes.push('openFile');
@@ -156,18 +387,21 @@
return classes.join(' ');
}
- _computePrefsButtonHidden(prefs: DiffPreferencesInfo, loggedIn: boolean) {
+ private computePrefsButtonHidden(
+ prefs: DiffPreferencesInfo,
+ loggedIn?: boolean
+ ) {
return !loggedIn || !prefs;
}
- _fileListActionsVisible(
+ private fileListActionsVisible(
shownFileCount: number,
maxFilesForBulkActions: number
) {
return shownFileCount <= maxFilesForBulkActions;
}
- _handlePatchChange(e: CustomEvent) {
+ handlePatchChange(e: CustomEvent) {
const {basePatchNum, patchNum} = e.detail;
if (
(basePatchNum === this.basePatchNum && patchNum === this.patchNum) ||
@@ -178,12 +412,12 @@
GerritNav.navigateToChange(this.change, {patchNum, basePatchNum});
}
- _handlePrefsTap(e: Event) {
+ private handlePrefsTap(e: Event) {
e.preventDefault();
fireEvent(this, 'open-diff-prefs');
}
- _handleDownloadTap(e: Event) {
+ private handleDownloadTap(e: Event) {
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(
@@ -191,11 +425,11 @@
);
}
- _computeEditModeClass(editMode?: boolean) {
+ private computeEditModeClass(editMode?: boolean) {
return editMode ? 'editMode' : '';
}
- _computePatchInfoClass(patchNum?: PatchSetNum, allPatchSets?: PatchSet[]) {
+ computePatchInfoClass(patchNum?: PatchSetNum, allPatchSets?: PatchSet[]) {
const latestNum = computeLatestPatchNum(allPatchSets);
if (patchNum === latestNum) {
return '';
@@ -203,7 +437,13 @@
return 'patchInfoOldPatchSet';
}
- createTitle(shortcutName: Shortcut, section: ShortcutSection) {
+ private createTitle(shortcutName: Shortcut, section: ShortcutSection) {
return this.shortcuts.createTitle(shortcutName, section);
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'gr-file-list-header': GrFileListHeader;
+ }
+}
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts
deleted file mode 100644
index fbba2fc..0000000
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 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 {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <style include="shared-styles">
- .prefsButton {
- float: right;
- }
- .patchInfoOldPatchSet.patchInfo-header {
- background-color: var(--emphasis-color);
- }
- .patchInfo-header {
- align-items: center;
- display: flex;
- padding: var(--spacing-s) var(--spacing-l);
- }
- .patchInfo-left {
- align-items: baseline;
- display: flex;
- }
- .patchInfoContent {
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- }
- .patchInfo-header .container.latestPatchContainer {
- display: none;
- }
- .patchInfoOldPatchSet .container.latestPatchContainer {
- display: initial;
- }
- .editMode.patchInfoOldPatchSet .container.latestPatchContainer {
- display: none;
- }
- .latestPatchContainer a {
- text-decoration: none;
- }
- .mobile {
- display: none;
- }
- .patchInfo-header .container {
- align-items: center;
- display: flex;
- }
- .downloadContainer,
- .uploadContainer {
- margin-right: 16px;
- }
- .uploadContainer.hide {
- display: none;
- }
- .rightControls {
- align-self: flex-end;
- margin: auto 0 auto auto;
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- font-weight: var(--font-weight-normal);
- justify-content: flex-end;
- }
- #collapseBtn,
- .allExpanded #expandBtn,
- .fileViewActions {
- display: none;
- }
- .someExpanded #expandBtn {
- margin-right: 8px;
- }
- .someExpanded #collapseBtn,
- .allExpanded #collapseBtn,
- .openFile .fileViewActions {
- align-items: center;
- display: flex;
- }
- .rightControls gr-button,
- gr-patch-range-select {
- margin: 0 -4px;
- }
- .fileViewActions gr-button {
- margin: 0;
- --gr-button-padding: 2px 4px;
- }
- .editMode .hideOnEdit {
- display: none;
- }
- .showOnEdit {
- display: none;
- }
- .editMode .showOnEdit {
- display: initial;
- }
- .editMode .showOnEdit.flexContainer {
- align-items: center;
- display: flex;
- }
- .label {
- font-weight: var(--font-weight-bold);
- margin-right: 24px;
- }
- gr-commit-info,
- gr-edit-controls {
- margin-right: -5px;
- }
- .fileViewActionsLabel {
- margin-right: var(--spacing-xs);
- }
- @media screen and (max-width: 50em) {
- .patchInfo-header .desktop {
- display: none;
- }
- }
- </style>
- <div
- class$="patchInfo-header [[_computeEditModeClass(editMode)]] [[_computePatchInfoClass(patchNum, allPatchSets)]]"
- >
- <div class="patchInfo-left">
- <div class="patchInfoContent">
- <gr-patch-range-select
- id="rangeSelect"
- change-num="[[changeNum]]"
- patch-num="[[patchNum]]"
- base-patch-num="[[basePatchNum]]"
- available-patches="[[allPatchSets]]"
- revisions="[[change.revisions]]"
- revision-info="[[revisionInfo]]"
- on-patch-range-change="_handlePatchChange"
- >
- </gr-patch-range-select>
- <span class="separator"></span>
- <gr-commit-info
- change="[[change]]"
- server-config="[[serverConfig]]"
- commit-info="[[commitInfo]]"
- ></gr-commit-info>
- <span class="container latestPatchContainer">
- <span class="separator"></span>
- <a href$="[[changeUrl]]">Go to latest patch set</a>
- </span>
- </div>
- </div>
- <div class$="rightControls [[_computeExpandedClass(filesExpanded)]]">
- <template is="dom-if" if="[[editMode]]">
- <span class="showOnEdit flexContainer">
- <gr-edit-controls
- id="editControls"
- patch-num="[[patchNum]]"
- change="[[change]]"
- ></gr-edit-controls>
- <span class="separator"></span>
- </span>
- </template>
- <div class="fileViewActions">
- <span class="fileViewActionsLabel">Diff view:</span>
- <gr-diff-mode-selector
- id="modeSelect"
- save-on-change="[[loggedIn]]"
- ></gr-diff-mode-selector>
- <span
- id="diffPrefsContainer"
- class="hideOnEdit"
- hidden$="[[_computePrefsButtonHidden(diffPrefs, loggedIn)]]"
- hidden=""
- >
- <gr-tooltip-content has-tooltip title="Diff preferences">
- <gr-button
- link=""
- class="prefsButton desktop"
- on-click="_handlePrefsTap"
- ><iron-icon icon="gr-icons:settings"></iron-icon
- ></gr-button>
- </gr-tooltip-content>
- </span>
- <span class="separator"></span>
- </div>
- <span class="downloadContainer desktop">
- <gr-tooltip-content
- has-tooltip
- title="[[createTitle(Shortcut.OPEN_DOWNLOAD_DIALOG,
- ShortcutSection.ACTIONS)]]"
- >
- <gr-button link="" class="download" on-click="_handleDownloadTap"
- >Download</gr-button
- >
- </gr-tooltip-content>
- </span>
- <template
- is="dom-if"
- if="[[_fileListActionsVisible(shownFileCount, _maxFilesForBulkActions)]]"
- >
- <gr-tooltip-content
- has-tooltip
- title="[[createTitle(Shortcut.TOGGLE_ALL_INLINE_DIFFS,
- ShortcutSection.FILE_LIST)]]"
- >
- <gr-button id="expandBtn" link="" on-click="_expandAllDiffs"
- >Expand All</gr-button
- >
- </gr-tooltip-content>
- <gr-tooltip-content
- has-tooltip
- title="[[createTitle(Shortcut.TOGGLE_ALL_INLINE_DIFFS,
- ShortcutSection.FILE_LIST)]]"
- >
- <gr-button id="collapseBtn" link="" on-click="_collapseAllDiffs"
- >Collapse All</gr-button
- >
- </gr-tooltip-content>
- </template>
- <template
- is="dom-if"
- if="[[!_fileListActionsVisible(shownFileCount, _maxFilesForBulkActions)]]"
- >
- <div class="warning">
- Bulk actions disabled because there are too many files.
- </div>
- </template>
- </div>
- </div>
-`;
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.ts b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.ts
index 821c7c5..ac2b4d4 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.ts
@@ -19,11 +19,9 @@
import './gr-file-list-header';
import {FilesExpandedState} from '../gr-file-list-constants';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
-import 'lodash/lodash';
import {createChange, createRevision} from '../../../test/test-data-generators';
import {query, queryAndAssert, stubRestApi} from '../../../test/test-utils';
import {GrFileListHeader} from './gr-file-list-header';
-import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions';
import {
BasePatchSetNum,
ChangeId,
@@ -33,19 +31,33 @@
import {ChangeInfo, ChangeStatus} from '../../../api/rest-api.js';
import {PatchSet} from '../../../utils/patch-set-util';
import {createDefaultDiffPrefs} from '../../../constants/constants.js';
-
-const basicFixture = fixtureFromElement('gr-file-list-header');
+import {fixture, html} from '@open-wc/testing-helpers';
+import {GrButton} from '../../shared/gr-button/gr-button';
suite('gr-file-list-header tests', () => {
let element: GrFileListHeader;
+ const change: ChangeInfo = {
+ ...createChange(),
+ change_id: 'Iad9dc96274af6946f3632be53b106ef80f7ba6ca' as ChangeId,
+ revisions: {
+ rev2: createRevision(2),
+ rev1: createRevision(1),
+ rev13: createRevision(13),
+ rev3: createRevision(3),
+ },
+ status: 'NEW' as ChangeStatus,
+ labels: {},
+ };
- setup(() => {
- stubRestApi('getAccount').returns(Promise.resolve(undefined));
- element = basicFixture.instantiate();
- });
-
- teardown(async () => {
- await flush();
+ setup(async () => {
+ stubRestApi('getAccount').resolves(undefined);
+ element = await fixture(
+ html`<gr-file-list-header
+ .change=${change}
+ .diffPrefs=${createDefaultDiffPrefs()}
+ .shownFileCount=${3}
+ ></gr-file-list-header>`
+ );
});
test('Diff preferences hidden when no prefs', async () => {
@@ -55,53 +67,63 @@
element.diffPrefs = createDefaultDiffPrefs();
element.loggedIn = true;
- await flush();
+ await element.updateComplete;
+
assert.isFalse(
queryAndAssert<HTMLElement>(element, '#diffPrefsContainer').hidden
);
});
test('expandAllDiffs called when expand button clicked', async () => {
- element.shownFileCount = 1;
- await flush();
- const expandAllDiffsStub = sinon.stub(element, '_expandAllDiffs');
- MockInteractions.tap(queryAndAssert(element, '#expandBtn'));
- assert.isTrue(expandAllDiffsStub.called);
+ const expandDiffsListener = sinon.stub();
+ element.addEventListener('expand-diffs', expandDiffsListener);
+
+ queryAndAssert<GrButton>(element, 'gr-button#expandBtn').click();
+ await element.updateComplete;
+
+ assert.isTrue(expandDiffsListener.called);
});
test('collapseAllDiffs called when collapse button clicked', async () => {
- element.shownFileCount = 1;
- await flush();
- const collapseAllDiffsStub = sinon.stub(element, '_collapseAllDiffs');
- MockInteractions.tap(queryAndAssert(element, '#collapseBtn'));
- assert.isTrue(collapseAllDiffsStub.called);
+ const collapseAllDiffsListener = sinon.stub();
+ element.addEventListener('collapse-diffs', collapseAllDiffsListener);
+
+ queryAndAssert<GrButton>(element, 'gr-button#collapseBtn').click();
+ await element.updateComplete;
+
+ assert.isTrue(collapseAllDiffsListener.called);
});
test('show/hide diffs disabled for large amounts of files', async () => {
- const computeSpy = sinon.spy(element, '_fileListActionsVisible');
element.changeNum = 42 as NumericChangeId;
element.basePatchNum = 'PARENT' as BasePatchSetNum;
element.patchNum = '2' as PatchSetNum;
element.shownFileCount = 1;
- await flush();
- assert.isTrue(computeSpy.lastCall.returnValue);
- _.times(element._maxFilesForBulkActions + 1, () => {
- element.shownFileCount = element.shownFileCount! + 1;
- });
- assert.isFalse(computeSpy.lastCall.returnValue);
+ await element.updateComplete;
+
+ queryAndAssert(element, 'gr-button#expandBtn');
+ queryAndAssert(element, 'gr-button#collapseBtn');
+ assert.isNotOk(query(element, '.warning'));
+
+ element.shownFileCount = 226; // more than element.maxFilesForBulkActions
+ await element.updateComplete;
+
+ assert.isNotOk(query(element, 'gr-button#expandBtn'));
+ assert.isNotOk(query(element, 'gr-button#collapseBtn'));
+ queryAndAssert(element, '.warning');
});
test('fileViewActions are properly hidden', async () => {
const actions = queryAndAssert(element, '.fileViewActions');
assert.equal(getComputedStyle(actions).display, 'none');
element.filesExpanded = FilesExpandedState.SOME;
- await flush();
+ await element.updateComplete;
assert.notEqual(getComputedStyle(actions).display, 'none');
element.filesExpanded = FilesExpandedState.ALL;
- await flush();
+ await element.updateComplete;
assert.notEqual(getComputedStyle(actions).display, 'none');
element.filesExpanded = FilesExpandedState.NONE;
- await flush();
+ await element.updateComplete;
assert.equal(getComputedStyle(actions).display, 'none');
});
@@ -109,7 +131,7 @@
// Only the expand button should be visible in the initial state when
// NO files are expanded.
element.shownFileCount = 10;
- await flush();
+ await element.updateComplete;
const expandBtn = queryAndAssert(element, '#expandBtn');
const collapseBtn = queryAndAssert(element, '#collapseBtn');
assert.notEqual(getComputedStyle(expandBtn).display, 'none');
@@ -118,46 +140,37 @@
// Both expand and collapse buttons should be visible when SOME files are
// expanded.
element.filesExpanded = FilesExpandedState.SOME;
- await flush();
+ await element.updateComplete;
assert.notEqual(getComputedStyle(expandBtn).display, 'none');
assert.notEqual(getComputedStyle(collapseBtn).display, 'none');
// Only the collapse button should be visible when ALL files are expanded.
element.filesExpanded = FilesExpandedState.ALL;
- await flush();
+ await element.updateComplete;
assert.equal(getComputedStyle(expandBtn).display, 'none');
assert.notEqual(getComputedStyle(collapseBtn).display, 'none');
// Only the expand button should be visible when NO files are expanded.
element.filesExpanded = FilesExpandedState.NONE;
- await flush();
+ await element.updateComplete;
assert.notEqual(getComputedStyle(expandBtn).display, 'none');
assert.equal(getComputedStyle(collapseBtn).display, 'none');
});
- test('navigateToChange called when range select changes', () => {
+ test('navigateToChange called when range select changes', async () => {
const navigateToChangeStub = sinon.stub(GerritNav, 'navigateToChange');
- element.change = {
- ...createChange(),
- change_id: 'Iad9dc96274af6946f3632be53b106ef80f7ba6ca' as ChangeId,
- revisions: {
- rev2: createRevision(2),
- rev1: createRevision(1),
- rev13: createRevision(13),
- rev3: createRevision(3),
- },
- status: 'NEW' as ChangeStatus,
- labels: {},
- } as ChangeInfo;
element.basePatchNum = 1 as BasePatchSetNum;
element.patchNum = 2 as PatchSetNum;
+ await element.updateComplete;
- element._handlePatchChange({
+ element.handlePatchChange({
detail: {basePatchNum: 1, patchNum: 3},
} as CustomEvent);
+ await element.updateComplete;
+
assert.equal(navigateToChangeStub.callCount, 1);
assert.isTrue(
- navigateToChangeStub.lastCall.calledWithExactly(element.change, {
+ navigateToChangeStub.lastCall.calledWithExactly(change, {
patchNum: 3 as PatchSetNum,
basePatchNum: 1 as BasePatchSetNum,
})
@@ -171,29 +184,29 @@
{num: 1 as PatchSetNum, desc: undefined, sha: ''},
];
assert.equal(
- element._computePatchInfoClass(1 as PatchSetNum, allPatchSets),
+ element.computePatchInfoClass(1 as PatchSetNum, allPatchSets),
'patchInfoOldPatchSet'
);
assert.equal(
- element._computePatchInfoClass(2 as PatchSetNum, allPatchSets),
+ element.computePatchInfoClass(2 as PatchSetNum, allPatchSets),
'patchInfoOldPatchSet'
);
assert.equal(
- element._computePatchInfoClass(4 as PatchSetNum, allPatchSets),
+ element.computePatchInfoClass(4 as PatchSetNum, allPatchSets),
''
);
});
suite('editMode behavior', () => {
- setup(() => {
+ setup(async () => {
element.loggedIn = true;
- element.diffPrefs = createDefaultDiffPrefs();
+ await element.updateComplete;
});
- const isVisible = (el: HTMLElement) => {
+ function isVisible(el: HTMLElement) {
assert.ok(el);
return getComputedStyle(el).getPropertyValue('display') !== 'none';
- };
+ }
test('patch specific elements', async () => {
element.editMode = true;
@@ -202,14 +215,14 @@
{num: 2 as PatchSetNum, desc: undefined, sha: ''},
{num: 3 as PatchSetNum, desc: undefined, sha: ''},
];
- await flush();
+ await element.updateComplete;
assert.isFalse(
isVisible(queryAndAssert<HTMLElement>(element, '#diffPrefsContainer'))
);
element.editMode = false;
- await flush();
+ await element.updateComplete;
assert.isTrue(
isVisible(queryAndAssert<HTMLElement>(element, '#diffPrefsContainer'))
@@ -218,27 +231,21 @@
test('edit-controls visibility', async () => {
element.editMode = false;
- await flush();
- // on the first render, when editMode is false, editControls are not
- // in the DOM to reduce size of DOM and make first render faster.
- assert.isUndefined(query(element, '#editControls'));
+ await element.updateComplete;
+
+ assert.isNotOk(query(element, '#editControls'));
element.editMode = true;
- await flush();
- queryAndAssert<HTMLElement>(element, '#editControls').parentElement;
+ await element.updateComplete;
+
assert.isTrue(
- isVisible(
- queryAndAssert<HTMLElement>(element, '#editControls').parentElement!
- )
+ isVisible(queryAndAssert<HTMLElement>(element, '#editControls'))
);
element.editMode = false;
- await flush();
- assert.isFalse(
- isVisible(
- queryAndAssert<HTMLElement>(element, '#editControls').parentElement!
- )
- );
+ await element.updateComplete;
+
+ assert.isNotOk(query<HTMLElement>(element, '#editControls'));
});
});
});
