blob: 1789fcb622d5c52cb4dce66d8498dc74b1d86d3e [file] [log] [blame]
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import {css, html, LitElement, nothing} from 'lit';
import {customElement, query, state} from 'lit/decorators.js';
import {ProgressStatus, ReviewerState} from '../../../constants/constants';
import {bulkActionsModelToken} from '../../../models/bulk-actions/bulk-actions-model';
import {configModelToken} from '../../../models/config/config-model';
import {resolve} from '../../../models/dependency';
import {
AccountDetailInfo,
AccountInfo,
ChangeInfo,
NumericChangeId,
ServerInfo,
SuggestedReviewerGroupInfo,
} from '../../../types/common';
import {subscribe} from '../../lit/subscription-controller';
import '../../shared/gr-dialog/gr-dialog';
import '../../shared/gr-button/gr-button';
import '../../shared/gr-icon/gr-icon';
import {getAppContext} from '../../../services/app-context';
import {
GrReviewerSuggestionsProvider,
ReviewerSuggestionsProvider,
} from '../../../services/gr-reviewer-suggestions-provider/gr-reviewer-suggestions-provider';
import '../../shared/gr-account-list/gr-account-list';
import {getOverallStatus} from '../../../utils/bulk-flow-util';
import {allSettled} from '../../../utils/async-util';
import {listForSentence, pluralize} from '../../../utils/string-util';
import {getDisplayName} from '../../../utils/display-name-util';
import {
AccountInput,
GrAccountList,
} from '../../shared/gr-account-list/gr-account-list';
import {getReplyByReason} from '../../../utils/attention-set-util';
import {intersection} from '../../../utils/common-util';
import {accountKey, getUserId} from '../../../utils/account-util';
import {ValueChangedEvent} from '../../../types/events';
import {fireAlert, fireReload} from '../../../utils/event-util';
import {GrDialog} from '../../shared/gr-dialog/gr-dialog';
import {Interaction} from '../../../constants/reporting';
import {userModelToken} from '../../../models/user/user-model';
import {modalStyles} from '../../../styles/gr-modal-styles';
@customElement('gr-change-list-reviewer-flow')
export class GrChangeListReviewerFlow extends LitElement {
@state() private selectedChanges: ChangeInfo[] = [];
// contents are given to gr-account-lists to mutate
// private but used in tests
@state() updatedAccountsByReviewerState: Map<ReviewerState, AccountInput[]> =
new Map([
[ReviewerState.REVIEWER, []],
[ReviewerState.CC, []],
]);
@state() private suggestionsProviderByReviewerState: Map<
ReviewerState,
ReviewerSuggestionsProvider
> = new Map();
@state() private progressByChangeNum = new Map<
NumericChangeId,
ProgressStatus
>();
@state() private isOverlayOpen = false;
@state() private serverConfig?: ServerInfo;
@state()
private groupPendingConfirmationByReviewerState: Map<
ReviewerState,
SuggestedReviewerGroupInfo | null
> = new Map([
[ReviewerState.REVIEWER, null],
[ReviewerState.CC, null],
]);
@query('dialog#flow') private modal?: HTMLDialogElement;
@query('gr-account-list#reviewer-list') private reviewerList?: GrAccountList;
@query('gr-account-list#cc-list') private ccList?: GrAccountList;
@query('dialog#confirm-reviewer')
private reviewerConfirmModal?: HTMLDialogElement;
@query('dialog#confirm-cc') private ccConfirmModal?: HTMLDialogElement;
@query('gr-dialog') dialog?: GrDialog;
private readonly reportingService = getAppContext().reportingService;
private readonly getBulkActionsModel = resolve(this, bulkActionsModelToken);
private readonly getConfigModel = resolve(this, configModelToken);
private readonly getUserModel = resolve(this, userModelToken);
private restApiService = getAppContext().restApiService;
private isLoggedIn = false;
private account?: AccountDetailInfo;
static override get styles() {
return [
modalStyles,
css`
gr-dialog {
width: 60em;
}
.grid {
display: grid;
grid-template-columns: min-content 1fr;
column-gap: var(--spacing-l);
}
gr-account-list {
display: flex;
flex-wrap: wrap;
}
.warning,
.error {
display: flex;
align-items: center;
gap: var(--spacing-xl);
padding: var(--spacing-l);
padding-left: var(--spacing-xl);
background-color: var(--yellow-50);
}
.error {
background-color: var(--error-background);
}
.grid + .warning,
.error {
margin-top: var(--spacing-l);
}
.warning + .warning {
margin-top: var(--spacing-s);
}
gr-icon {
color: var(--orange-800);
font-size: 18px;
}
dialog#confirm-cc,
dialog#confirm-reviewer {
padding: var(--spacing-l);
text-align: center;
}
.confirmation-buttons {
margin-top: var(--spacing-l);
}
`,
];
}
constructor() {
super();
subscribe(
this,
() => this.getBulkActionsModel().selectedChanges$,
selectedChanges => (this.selectedChanges = selectedChanges)
);
subscribe(
this,
() => this.getConfigModel().serverConfig$,
serverConfig => (this.serverConfig = serverConfig)
);
subscribe(
this,
() => this.getUserModel().loggedIn$,
isLoggedIn => (this.isLoggedIn = isLoggedIn)
);
subscribe(
this,
() => this.getUserModel().account$,
account => (this.account = account)
);
}
override render() {
return html`
<gr-button
id="start-flow"
.disabled=${this.isFlowDisabled()}
flatten
@click=${() => this.openOverlay()}
>add reviewer/cc</gr-button
>
<dialog id="flow" tabindex="-1">
${this.isOverlayOpen ? this.renderDialog() : nothing}
</dialog>
`;
}
private renderDialog() {
const overallStatus = getOverallStatus(this.progressByChangeNum);
return html`
<gr-dialog
@cancel=${() => this.closeOverlay()}
@confirm=${() => this.onConfirm(overallStatus)}
.confirmLabel=${'Add'}
.disabled=${overallStatus === ProgressStatus.RUNNING}
.loadingLabel=${'Adding Reviewer and CC in progress...'}
?loading=${getOverallStatus(this.progressByChangeNum) ===
ProgressStatus.RUNNING}
>
<div slot="header">Add reviewer / CC</div>
<div slot="main">
<div class="grid">
<span>Reviewers</span>
${this.renderAccountList(
ReviewerState.REVIEWER,
'reviewer-list',
'Add reviewer'
)}
<span>CC</span>
${this.renderAccountList(ReviewerState.CC, 'cc-list', 'Add CC')}
</div>
${this.renderAnyOverwriteWarnings()} ${this.renderErrors()}
</div>
</gr-dialog>
`;
}
private renderAccountList(
reviewerState: ReviewerState,
id: string,
placeholder: string
) {
const updatedAccounts =
this.updatedAccountsByReviewerState.get(reviewerState);
const suggestionsProvider =
this.suggestionsProviderByReviewerState.get(reviewerState);
if (!updatedAccounts || !suggestionsProvider) {
return;
}
return html`
<gr-account-list
id=${id}
.accounts=${updatedAccounts}
.removableValues=${[]}
.suggestionsProvider=${suggestionsProvider}
.placeholder=${placeholder}
.pendingConfirmation=${this.groupPendingConfirmationByReviewerState.get(
reviewerState
)}
@accounts-changed=${() => this.onAccountsChanged(reviewerState)}
@pending-confirmation-changed=${(
ev: ValueChangedEvent<SuggestedReviewerGroupInfo | null>
) => this.onPendingConfirmationChanged(reviewerState, ev)}
>
</gr-account-list>
${this.renderConfirmationDialog(reviewerState)}
`;
}
private renderConfirmationDialog(reviewerState: ReviewerState) {
const id =
reviewerState === ReviewerState.CC ? 'confirm-cc' : 'confirm-reviewer';
const suggestion =
this.groupPendingConfirmationByReviewerState.get(reviewerState);
return html`
<dialog
tabindex="-1"
id=${id}
@iron-overlay-canceled=${() => this.cancelPendingGroup(reviewerState)}
>
<div class="confirmation-text">
Group
<span class="groupName"> ${suggestion?.group.name} </span>
has
<span class="groupSize"> ${suggestion?.count} </span>
members.
<br />
Are you sure you want to add them all?
</div>
<div class="confirmation-buttons">
<gr-button
@click=${() => this.confirmPendingGroup(reviewerState, suggestion)}
>Yes</gr-button
>
<gr-button @click=${() => this.cancelPendingGroup(reviewerState)}
>No</gr-button
>
</div>
</dialog>
`;
}
private renderAnyOverwriteWarnings() {
return html`
${this.renderAnyOverwriteWarning(ReviewerState.REVIEWER)}
${this.renderAnyOverwriteWarning(ReviewerState.CC)}
`;
}
private renderErrors() {
if (getOverallStatus(this.progressByChangeNum) !== ProgressStatus.FAILED)
return nothing;
const failedAccounts = [
...(this.updatedAccountsByReviewerState.get(ReviewerState.REVIEWER) ??
[]),
...(this.updatedAccountsByReviewerState.get(ReviewerState.CC) ?? []),
].map(account => getDisplayName(this.serverConfig, account));
if (failedAccounts.length === 0) {
return nothing;
}
return html`
<div class="error">
<gr-icon icon="error" filled role="img" aria-label="Error"></gr-icon>
Failed to add ${listForSentence(failedAccounts)} to changes.
</div>
`;
}
private renderAnyOverwriteWarning(currentReviewerState: ReviewerState) {
const updatedReviewerState =
currentReviewerState === ReviewerState.CC
? ReviewerState.REVIEWER
: ReviewerState.CC;
const overwrittenNames =
this.getOverwrittenDisplayNames(currentReviewerState);
if (overwrittenNames.length === 0) {
return nothing;
}
const pluralizedVerb = overwrittenNames.length === 1 ? 'is a' : 'are';
const currentLabel = `${
currentReviewerState === ReviewerState.CC ? 'CC' : 'reviewer'
}${overwrittenNames.length > 1 ? 's' : ''}`;
const updatedLabel =
updatedReviewerState === ReviewerState.CC ? 'CC' : 'reviewer';
return html`
<div class="warning">
<gr-icon
icon="warning"
filled
role="img"
aria-label="Warning"
></gr-icon>
${listForSentence(overwrittenNames)} ${pluralizedVerb} ${currentLabel}
on some selected changes and will be moved to ${updatedLabel} on all
changes.
</div>
`;
}
private getAccountsInCurrentState(currentReviewerState: ReviewerState) {
return this.selectedChanges
.flatMap(
change =>
change.reviewers[currentReviewerState]?.filter(isNotOwner(change)) ??
[]
)
.filter(account => account?._account_id !== undefined);
}
private getOverwrittenDisplayNames(
currentReviewerState: ReviewerState
): string[] {
const updatedReviewerState =
currentReviewerState === ReviewerState.CC
? ReviewerState.REVIEWER
: ReviewerState.CC;
const accountsInCurrentState =
this.getAccountsInCurrentState(currentReviewerState);
return this.updatedAccountsByReviewerState
.get(updatedReviewerState)!
.filter(account =>
accountsInCurrentState.some(
otherAccount => getUserId(otherAccount) === getUserId(account)
)
)
.map(reviewer => getDisplayName(this.serverConfig, reviewer));
}
private async openOverlay() {
this.resetFlow();
this.isOverlayOpen = true;
// Must await the overlay opening because the dialog is lazily rendered.
await this.modal?.showModal();
}
private closeOverlay() {
this.isOverlayOpen = false;
this.modal?.close();
}
private resetFlow() {
this.progressByChangeNum = new Map(
this.selectedChanges.map(change => [
change._number,
ProgressStatus.NOT_STARTED,
])
);
for (const state of [ReviewerState.REVIEWER, ReviewerState.CC] as const) {
this.updatedAccountsByReviewerState.set(
state,
this.getCurrentAccounts(state)
);
if (this.selectedChanges.length > 0) {
this.suggestionsProviderByReviewerState.set(
state,
this.createSuggestionsProvider(state)
);
}
}
this.requestUpdate();
}
/*
* Removes accounts from one list when they are added to the other. Also
* trigger re-render so warnings will update as accounts are added, removed,
* and confirmed.
*/
private onAccountsChanged(reviewerState: ReviewerState) {
const reviewerStateKeys = this.updatedAccountsByReviewerState
.get(reviewerState)!
.map(getUserId);
const oppositeReviewerState =
reviewerState === ReviewerState.CC
? ReviewerState.REVIEWER
: ReviewerState.CC;
const oppositeUpdatedAccounts = this.updatedAccountsByReviewerState.get(
oppositeReviewerState
)!;
const notOverwrittenOppositeAccounts = oppositeUpdatedAccounts.filter(
acc => !reviewerStateKeys.includes(getUserId(acc))
);
if (
notOverwrittenOppositeAccounts.length !== oppositeUpdatedAccounts.length
) {
this.updatedAccountsByReviewerState.set(
oppositeReviewerState,
notOverwrittenOppositeAccounts
);
}
this.requestUpdate();
}
private async onPendingConfirmationChanged(
reviewerState: ReviewerState,
ev: ValueChangedEvent<SuggestedReviewerGroupInfo | null>
) {
this.groupPendingConfirmationByReviewerState.set(
reviewerState,
ev.detail.value
);
this.requestUpdate();
await this.updateComplete;
const modal =
reviewerState === ReviewerState.CC
? this.ccConfirmModal
: this.reviewerConfirmModal;
if (ev.detail.value === null) {
modal?.close();
} else {
await modal?.showModal();
}
}
private cancelPendingGroup(reviewerState: ReviewerState) {
const overlay =
reviewerState === ReviewerState.CC
? this.ccConfirmModal
: this.reviewerConfirmModal;
overlay?.close();
this.groupPendingConfirmationByReviewerState.set(reviewerState, null);
this.requestUpdate();
}
private confirmPendingGroup(
reviewerState: ReviewerState,
suggestion: SuggestedReviewerGroupInfo | null | undefined
) {
if (!suggestion) return;
const accountList =
reviewerState === ReviewerState.CC ? this.ccList : this.reviewerList;
accountList?.confirmGroup(suggestion.group);
}
private onConfirm(overallStatus: ProgressStatus) {
switch (overallStatus) {
case ProgressStatus.NOT_STARTED:
this.saveReviewers();
break;
case ProgressStatus.SUCCESSFUL:
this.modal?.close();
break;
case ProgressStatus.FAILED:
this.modal?.close();
break;
}
}
private fireSuccessToasts() {
const numReviewersAdded =
(this.updatedAccountsByReviewerState.get(ReviewerState.REVIEWER)
?.length ?? 0) - this.getCurrentAccounts(ReviewerState.REVIEWER).length;
const numCcsAdded =
(this.updatedAccountsByReviewerState.get(ReviewerState.CC)?.length ?? 0) -
this.getCurrentAccounts(ReviewerState.CC).length;
let alert = '';
if (numReviewersAdded && numCcsAdded) {
alert = `${pluralize(numReviewersAdded, 'reviewer')} and ${pluralize(
numCcsAdded,
'CC'
)} added`;
} else if (numReviewersAdded) {
alert = `${pluralize(numReviewersAdded, 'reviewer')} added`;
} else {
alert = `${pluralize(numCcsAdded, 'CC')} added`;
}
fireAlert(this, alert);
}
private async saveReviewers() {
this.reportingService.reportInteraction(Interaction.BULK_ACTION, {
type: 'add-reviewer',
selectedChangeCount: this.selectedChanges.length,
});
this.progressByChangeNum = new Map(
this.selectedChanges.map(change => [
change._number,
ProgressStatus.RUNNING,
])
);
const inFlightActions = this.getBulkActionsModel().addReviewers(
this.updatedAccountsByReviewerState,
getReplyByReason(this.account, this.serverConfig)
);
await allSettled(
inFlightActions.map((promise, index) => {
const change = this.selectedChanges[index];
return promise
.then(() => {
this.progressByChangeNum.set(
change._number,
ProgressStatus.SUCCESSFUL
);
this.requestUpdate();
})
.catch(() => {
this.progressByChangeNum.set(change._number, ProgressStatus.FAILED);
this.requestUpdate();
});
})
);
if (getOverallStatus(this.progressByChangeNum) === ProgressStatus.FAILED) {
this.reportingService.reportInteraction('bulk-action-failure', {
type: 'add-reviewer',
count: Array.from(this.progressByChangeNum.values()).filter(
status => status === ProgressStatus.FAILED
).length,
});
} else {
this.fireSuccessToasts();
this.closeOverlay();
fireReload(this);
}
}
private isFlowDisabled() {
// No additional checks are necessary. If the user has visibility enough to
// see the change, they have permission enough to add reviewers/cc.
return this.selectedChanges.length === 0;
}
// private but used in tests
getCurrentAccounts(reviewerState: ReviewerState) {
const reviewersPerChange = this.selectedChanges.map(
change =>
change.reviewers[reviewerState]?.filter(isNotOwner(change)) ?? []
);
return intersection(
reviewersPerChange,
(account1, account2) => accountKey(account1) === accountKey(account2)
);
}
private createSuggestionsProvider(
state: ReviewerState.CC | ReviewerState.REVIEWER
): ReviewerSuggestionsProvider {
const suggestionsProvider = new GrReviewerSuggestionsProvider(
this.restApiService,
state,
this.serverConfig,
this.isLoggedIn,
...this.selectedChanges
);
return suggestionsProvider;
}
}
function isNotOwner(change: ChangeInfo) {
return (account: AccountInfo) =>
accountKey(change.owner) !== accountKey(account);
}
declare global {
interface HTMLElementTagNameMap {
'gr-change-list-reviewer-flow': GrChangeListReviewerFlow;
}
}