blob: fbda31cb8fd90d77372cc82d9f2a9609ba68c662 [file] [log] [blame]
/**
* @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 {CodeOwnersModelMixin} from './code-owners-model-mixin';
import {SuggestionsState, SuggestionsType} from './code-owners-model';
import {getDisplayOwnersGroups, GroupedFiles} from './suggest-owners-util';
import {customElement, property, state} from 'lit/decorators';
import {css, html, LitElement, nothing, PropertyValues} from 'lit';
import {when} from 'lit/directives/when';
import {ifDefined} from 'lit/directives/if-defined';
import {CodeOwnerInfo, CodeOwnersInfo, FetchedFile} from './code-owners-api';
import {
AccountId,
AccountInfo,
GroupInfo,
} from '@gerritcodereview/typescript-api/rest-api';
const SUGGESTION_POLLING_INTERVAL = 1000;
export const OWNER_GROUP_FILE_LIST = 'owner-group-file-list';
@customElement(OWNER_GROUP_FILE_LIST)
export class OwnerGroupFileList extends LitElement {
@property({type: Array})
files?: Array<FetchedFile>;
static override get styles() {
return [
css`
:host {
display: block;
max-height: 500px;
overflow: auto;
}
span {
display: inline-block;
border-radius: var(--border-radius);
margin-left: var(--spacing-s);
padding: 0 var(--spacing-m);
color: var(--primary-text-color);
font-size: var(--font-size-small);
}
.Renamed {
background-color: var(--dark-remove-highlight-color);
margin: var(--spacing-s) 0;
}
`,
];
}
override render() {
return html`
<ul>
${this.files?.map(file => this.renderFile(file))}
</ul>
`;
}
private renderFile(file: FetchedFile) {
return html`
<li>
${this.computeFilePath(file)}
<strong>${this.computeFileName(file)}</strong>
${when(
!!file.status,
() => html`
<span class=${ifDefined(file.status)}> ${file.status} </span>
`
)}
</li>
`;
}
computeFilePath(file: FetchedFile) {
const parts = file.path.split('/');
return parts.slice(0, parts.length - 1).join('/') + '/';
}
computeFileName(file: FetchedFile) {
const parts = file.path.split('/');
return parts.pop();
}
}
const base = CodeOwnersModelMixin(LitElement);
export const SUGGEST_OWNERS = 'suggest-owners';
@customElement(SUGGEST_OWNERS)
export class SuggestOwners extends base {
private reportedEvents: Map<
SuggestionsType,
{
fetchingStart: boolean;
fetchingFinished: boolean;
}
>;
// Bound by the extension point.
@property({type: Array})
reviewers?: Array<AccountInfo | GroupInfo>;
@state()
suggestedOwners?: Array<GroupedFiles>;
@state()
showAllOwners = false;
private progressUpdateTimer?: number;
constructor() {
super();
this.reportedEvents = new Map();
for (const suggestionType of Object.values(SuggestionsType)) {
this.reportedEvents.set(suggestionType, {
fetchingStart: false,
fetchingFinished: false,
});
}
}
static override get styles() {
return [
css`
:host([show-suggestions]) {
display: block;
background-color: var(--view-background-color);
border: 1px solid var(--view-background-color);
border-radius: var(--border-radius);
box-shadow: var(--elevation-level-1);
padding: 0 var(--spacing-m);
margin: var(--spacing-m) 0;
}
.loadingSpin {
display: inline-block;
}
li {
list-style: none;
}
.suggestion-container {
max-height: 300px;
overflow-y: auto;
}
.flex-break {
height: 0;
flex-basis: 100%;
}
.suggestion-row,
.show-all-owners-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.suggestion-row {
flex-wrap: wrap;
border-top: 1px solid var(--border-color);
padding: var(--spacing-s) 0;
}
.show-all-owners-row {
padding: var(--spacing-m) var(--spacing-xl) var(--spacing-s) 0;
}
.show-all-owners-row .loading {
padding: 0;
}
.show-all-owners-row .show-all-label {
margin-left: auto; /* align label to the right */
}
.suggestion-row-indicator {
margin-right: var(--spacing-s);
visibility: hidden;
line-height: 26px;
}
.suggestion-row-indicator[visible] {
visibility: visible;
}
.suggestion-row-indicator[visible] gr-icon {
color: var(--link-color);
vertical-align: top;
position: relative;
font-size: 18px;
top: 4px; /* (26-18)/2 - 26px line-height and 18px icon */
}
.suggestion-group-name {
width: 260px;
line-height: 26px;
text-overflow: ellipsis;
overflow: hidden;
padding-right: var(--spacing-s);
white-space: nowrap;
}
.group-name-content {
display: flex;
align-items: center;
}
.group-name-content .group-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.group-name-prefix {
padding-left: var(--spacing-s);
white-space: nowrap;
color: var(--deemphasized-text-color);
}
.suggested-owners {
--account-gap: var(--spacing-xs);
--negative-account-gap: calc(-1 * var(--account-gap));
margin: var(--negative-account-gap) 0 0 var(--negative-account-gap);
flex: 1;
}
.fetch-error-content,
.owned-by-all-users-content,
.no-owners-content {
line-height: 26px;
flex: 1;
padding-left: var(--spacing-m);
}
.owned-by-all-users-content gr-icon {
font-size: 16px;
padding-top: 5px;
}
.fetch-error-content {
color: var(--error-text-color);
}
.no-owners-content a {
padding-left: var(--spacing-s);
}
.no-owners-content a gr-icon {
font-size: 16px;
padding-top: 5px;
}
gr-account-label {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-m);
user-select: none;
border: 1px solid transparent;
--label-border-radius: 8px;
/* account-max-length defines the max text width inside account-label.
With 59 the gr-account-label always has width <= 100px and 5 labels
are always fit in a single row */
--account-max-length: 59px;
border: 1px solid var(--border-color);
margin: var(--account-gap) 0 0 var(--account-gap);
}
gr-account-label:focus {
outline: none;
}
gr-account-label:hover {
box-shadow: var(--elevation-level-1);
cursor: pointer;
}
gr-account-label[selected] {
background-color: var(--chip-selected-background-color);
border: 1px solid var(--chip-selected-background-color);
color: var(--chip-selected-text-color);
}
gr-hovercard {
max-width: 800px;
}
.loading {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
padding: var(--spacing-m);
}
.loadingSpin {
width: 18px;
height: 18px;
margin-right: var(--spacing-m);
}
/* Copied from shared-styles */
ul {
border: 0;
box-sizing: border-box;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
*::after,
*::before {
box-sizing: border-box;
}
`,
];
}
override disconnectedCallback() {
super.disconnectedCallback();
this.stopUpdateProgressTimer();
this.modelLoader?.pauseActiveSuggestedOwnersLoading();
}
protected override willUpdate(changedProperties: PropertyValues): void {
super.willUpdate(changedProperties);
if (changedProperties.has('showAllOwners')) {
this.showAllOwnersChanged();
}
if (changedProperties.has('reviewers')) {
this.onReviewerChanged();
}
if (changedProperties.has('showSuggestions')) {
this.onShowSuggestionsChanged();
}
if (
changedProperties.has('showSuggestions') ||
changedProperties.has('selectedSuggestionsType')
) {
this.onShowSuggestionsTypeChanged();
}
if (changedProperties.has('selectedSuggestionsState')) {
this.onSuggestionsStateChanged();
}
if (
changedProperties.has('selectedSuggestionsFiles') ||
changedProperties.has('selectedSuggestionsType') ||
changedProperties.has('selectedSuggestionsState') ||
changedProperties.has('reviewers')
) {
this.onSuggestionsFilesChanged();
}
}
override render() {
if (!this.showSuggestions) return nothing;
return html`
<ul class="suggestion-container">
<li class="show-all-owners-row">
${this.renderLoading()} ${this.renderShowAllOwnersCheckbox()}
</li>
</ul>
<ul class="suggestion-container">
${when(
this.suggestedOwners && this.suggestedOwners.length > 0,
() =>
(this.suggestedOwners ?? []).map((s, i) =>
this.renderSuggestion(s, i)
),
() => html`<li class="suggestion-row">No owners found</li>`
)}
</ul>
`;
}
private renderLoading() {
const isLoading =
this.selectedSuggestionsState === SuggestionsState.Loading;
if (!isLoading) return nothing;
return html`
<p class="loading">
<span class="loadingSpin"></span>
${this.selectedSuggestionsLoadProgress}
</p>
`;
}
private renderShowAllOwnersCheckbox() {
return html`
<label class="show-all-label">
<input
id="showAllOwnersCheckbox"
type="checkbox"
.checked=${this.showAllOwners}
@click=${() => {
this.showAllOwners = !this.showAllOwners;
}}
/>
Show all owners
</label>
`;
}
private renderSuggestion(suggestion: GroupedFiles, suggestionIndex: number) {
return html`
<li class="suggestion-row">
<div
class="suggestion-row-indicator"
?visible=${suggestion.hasSelected}
>
<gr-icon filled icon="check_circle"></gr-icon>
</div>
${this.renderSuggestionGroupName(suggestion)}
${this.renderSuggestionOwners(suggestion, suggestionIndex)}
</li>
`;
}
private renderSuggestionGroupName(suggestion: GroupedFiles) {
return html`
<div class="suggestion-group-name">
<div class="group-name-content">
<span class="group-name"> ${suggestion.groupName.name} </span>
${when(
suggestion.groupName.prefix,
() => html`
<span class="group-name-prefix">
(${suggestion.groupName.prefix})
</span>
`
)}
${when(
!suggestion.expanded,
() => html`
<gr-hovercard>
<owner-group-file-list
.files=${suggestion.files}
></owner-group-file-list>
</gr-hovercard>
`
)}
</div>
${when(
suggestion.expanded,
() => html`
<owner-group-file-list
.files=${suggestion.files}
></owner-group-file-list>
`
)}
</div>
`;
}
private renderSuggestionOwners(
suggestion: GroupedFiles,
suggestionIndex: number
) {
if (suggestion.error) {
return html` <div class="fetch-error-content">${suggestion.error}</div> `;
}
return html`
${this.renderSuggestionOwnersNotFound(suggestion)}
${this.renderSuggestedOwners(suggestion, suggestionIndex)}
`;
}
private renderSuggestionOwnersNotFound(suggestion: GroupedFiles) {
if (this.areOwnersFound(suggestion.owners)) return nothing;
return html`
<div class="no-owners-content">
<span>Not found</span>
<a
@click=${this.reportDocClick}
href="https://gerrit.googlesource.com/plugins/code-owners/+/HEAD/resources/Documentation/how-to-use.md#no-code-owners-found"
target="_blank"
>
<gr-icon icon="help" title="read documentation"></gr-icon>
</a>
</div>
`;
}
private renderSuggestedOwners(
suggestion: GroupedFiles,
suggestionIndex: number
) {
if (suggestion.owners?.owned_by_all_users) {
return html`
<div class="owned-by-all-users-content">
<gr-icon icon="info" filled></gr-icon>
<span>${this.getOwnedByAllUsersContent()}</span>
</div>
`;
}
return html`
${when(this.showAllOwners, () => html`<div class="flex-break"></div>`)}
<ul class="suggested-owners">
${(suggestion.owners?.code_owners ?? []).map((owner, ownerIndex) =>
this.renderSuggestedOwner(owner, suggestionIndex, ownerIndex)
)}
</ul>
`;
}
private renderSuggestedOwner(
owner: CodeOwnerInfo,
suggestionIndex: number,
ownerIndex: number
) {
return html`<gr-account-label
.account=${owner.account}
?selected=${!!owner.selected}
@click=${() => this.toggleAccount(suggestionIndex, ownerIndex)}
></gr-account-label>`;
}
private onShowSuggestionsChanged() {
if (!this.showSuggestions) {
return;
}
// this is more of a hack to let review input lose focus
// to avoid suggestion dropdown
// gr-autocomplete has a internal state for tracking focus
// that will be canceled if any click happens outside of
// it's target
window.setTimeout(() => this.click(), 100);
}
private onShowSuggestionsTypeChanged() {
if (!this.showSuggestions) {
this.modelLoader?.pauseActiveSuggestedOwnersLoading();
return;
}
const selectedSuggestionsType = this.selectedSuggestionsType;
if (selectedSuggestionsType === undefined) {
return;
}
this.modelLoader?.loadSuggestions(selectedSuggestionsType);
// The progress is updated at the next _progressUpdateTimer tick.
// Without explicit call to updateLoadSuggestionsProgress it looks like
// a slow reaction to checkbox.
this.modelLoader?.updateLoadSelectedSuggestionsProgress();
if (!this.reportedEvents.get(selectedSuggestionsType)?.fetchingStart) {
this.reportedEvents.get(selectedSuggestionsType)!.fetchingStart = true;
this.reporting?.reportLifeCycle('owners-suggestions-fetching-start', {
type: selectedSuggestionsType,
});
}
}
_startUpdateProgressTimer() {
if (this.progressUpdateTimer) return;
this.progressUpdateTimer = window.setInterval(() => {
this.modelLoader?.updateLoadSelectedSuggestionsProgress();
}, SUGGESTION_POLLING_INTERVAL);
}
private stopUpdateProgressTimer() {
if (!this.progressUpdateTimer) return;
window.clearInterval(this.progressUpdateTimer);
this.progressUpdateTimer = undefined;
}
private onSuggestionsStateChanged() {
this.stopUpdateProgressTimer();
if (this.selectedSuggestionsState === SuggestionsState.Loading) {
this._startUpdateProgressTimer();
}
}
override loadPropertiesAfterModelChanged() {
super.loadPropertiesAfterModelChanged();
this.stopUpdateProgressTimer();
this.modelLoader?.loadAreAllFilesApproved();
}
private getReviewersIdSet(): Set<AccountId> {
return new Set(
(this.reviewers ?? [])
// Ugly hack, but we only care about accounts.
.map(account => (account as unknown as AccountInfo)._account_id)
.filter(account_id => account_id !== undefined)
) as Set<AccountId>;
}
private onSuggestionsFilesChanged() {
if (
this.selectedSuggestionsFiles === undefined ||
this.reviewers === undefined ||
this.selectedSuggestionsType === undefined ||
this.selectedSuggestionsState === undefined
)
return;
const allOwners =
this.model?.getSuggestionsByType(SuggestionsType.ALL_SUGGESTIONS)
?.files ?? [];
const allOwnersByPathMap = this.getOwnersByPathMap(allOwners);
const reviewersIdSet = this.getReviewersIdSet();
const selectedSuggestionsType = this.selectedSuggestionsType;
const suggestionsState = this.selectedSuggestionsState;
const groups = getDisplayOwnersGroups(
this.selectedSuggestionsFiles,
allOwnersByPathMap,
reviewersIdSet,
selectedSuggestionsType !== SuggestionsType.ALL_SUGGESTIONS
);
// The updateLoadSuggestionsProgress method also updates suggestions
this.updateSuggestions(groups);
this.updateAllChips(this.reviewers);
if (suggestionsState !== SuggestionsState.Loaded) return;
if (!this.reportedEvents.get(selectedSuggestionsType)!.fetchingFinished) {
this.reportedEvents.get(selectedSuggestionsType)!.fetchingFinished = true;
const reportDetails = groups.reduce(
(details, cur) => {
details.totalGroups++;
details.stats.push([
cur.files.length,
cur.owners && cur.owners.code_owners
? cur.owners.code_owners.length
: 0,
]);
return details;
},
{
totalGroups: 0,
stats: [] as Array<Array<number>>,
type: selectedSuggestionsType,
}
);
this.reporting?.reportLifeCycle(
'owners-suggestions-fetching-finished',
reportDetails
);
}
}
private getOwnersByPathMap(files?: Array<FetchedFile>) {
return new Map(
(files || [])
.filter(file => !file.info.error && file.info.owners)
.map(file => [file.path, file.info.owners])
);
}
private updateSuggestions(suggestions: Array<GroupedFiles>) {
// update group names and files, no modification on owners or error
const suggestedOwners = suggestions.map(suggestion =>
this.formatSuggestionInfo(suggestion)
);
// move owned_by_all_users to the bottom:
const index = suggestedOwners.findIndex(
suggestion => suggestion.owners?.owned_by_all_users
);
if (index >= 0) {
suggestedOwners.push(suggestedOwners.splice(index, 1)[0]);
}
this.suggestedOwners = suggestedOwners;
}
onReviewerChanged() {
this.updateAllChips(this.reviewers);
}
formatSuggestionInfo(suggestion: GroupedFiles): GroupedFiles {
const res = {
groupName: suggestion.groupName,
files: suggestion.files.slice(),
owners: undefined as CodeOwnersInfo | undefined,
error: undefined as Error | undefined,
} as GroupedFiles;
if (suggestion.owners) {
const codeOwners = (suggestion.owners.code_owners || []).map(owner => {
const updatedOwner = {...owner};
const reviewers = this.change?.reviewers.REVIEWER;
if (
reviewers &&
reviewers.find(
reviewer => reviewer._account_id === owner.account?._account_id
)
) {
updatedOwner.selected = true;
}
return updatedOwner;
});
res.owners = {
owned_by_all_users: !!suggestion.owners.owned_by_all_users,
code_owners: codeOwners,
};
} else {
res.owners = {
owned_by_all_users: false,
code_owners: [],
};
}
res.error = suggestion.error;
return res;
}
addAccount(owner: CodeOwnerInfo) {
owner.selected = true;
this.dispatchEvent(
new CustomEvent('add-reviewer', {
detail: {
reviewer: {...owner.account, _pendingAdd: true},
},
composed: true,
bubbles: true,
})
);
this.reporting?.reportInteraction('add-reviewer');
}
removeAccount(owner: CodeOwnerInfo) {
owner.selected = false;
this.dispatchEvent(
new CustomEvent('remove-reviewer', {
detail: {
reviewer: {...owner.account, _pendingAdd: true},
},
composed: true,
bubbles: true,
})
);
this.reporting?.reportInteraction('remove-reviewer');
}
toggleAccount(suggestionIndex: number, ownerIndex: number) {
const owner =
this.suggestedOwners![suggestionIndex]?.owners?.code_owners[ownerIndex];
if (!owner) return;
if (owner.selected) {
this.removeAccount(owner);
} else {
this.addAccount(owner);
}
}
private updateAllChips(accounts: Array<AccountInfo> | undefined) {
if (!this.suggestedOwners || !accounts) return;
// update all occurences
this.suggestedOwners.forEach((suggestion, sId) => {
let hasSelected = false;
suggestion.owners?.code_owners.forEach((owner, oId) => {
if (
accounts.some(
account => account._account_id === owner!.account!._account_id
)
) {
this.suggestedOwners![sId].owners!.code_owners[oId].selected = true;
hasSelected = true;
} else {
this.suggestedOwners![sId].owners!.code_owners[oId].selected = false;
}
});
const nonServiceUser = (account: AccountInfo) =>
!account.tags || account.tags.indexOf('SERVICE_USER') < 0;
if (
suggestion.owners?.owned_by_all_users &&
accounts.some(nonServiceUser)
) {
hasSelected = true;
}
this.suggestedOwners![sId].hasSelected = hasSelected;
});
}
private reportDocClick() {
this.reporting?.reportInteraction('code-owners-doc-click', {
section: 'no owners found',
});
}
private areOwnersFound(owners: CodeOwnersInfo | undefined) {
return (
owners && (owners.code_owners.length > 0 || !!owners.owned_by_all_users)
);
}
private getOwnedByAllUsersContent() {
if (this.selectedSuggestionsState === SuggestionsState.Loading) {
return 'Any user can approve';
}
// If all users own all the files in the change suggestedOwners.length === 1
// (suggestedOwners - collection of owners groupbed by owners)
return this.suggestedOwners && this.suggestedOwners.length === 1
? 'Any user can approve. Please select a user manually'
: 'Any user from the other files can approve';
}
private showAllOwnersChanged() {
// The first call to this method happens before model is set.
if (!this.model) return;
this.model.setSelectedSuggestionType(
this.showAllOwners
? SuggestionsType.ALL_SUGGESTIONS
: SuggestionsType.BEST_SUGGESTIONS
);
}
}