web/owner-status-column.ts - plugins/code-owners - Git at Google

 /**
  * @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 {
   AccountInfo,
   BasePatchSetNum,
   RevisionPatchSetNum,
 } from '@gerritcodereview/typescript-api/rest-api';
 import {css, html, LitElement, nothing, PropertyValues} from 'lit';
 import {customElement, property} from 'lit/decorators';
 import {OwnerStatus} from './code-owners-api';
 import {FileStatus, PluginState} from './code-owners-model';
 import {CodeOwnersModelMixin} from './code-owners-model-mixin';

 // TODO: Extend the API for plugins.
 export interface PatchRange {
   patchNum: RevisionPatchSetNum;
   basePatchNum: BasePatchSetNum;
 }

 const ACCOUNT_TEMPLATE_REGEX = '<GERRIT_ACCOUNT_(\\d+)>';

 const MAGIC_FILES = ['/COMMIT_MSG', '/MERGE_LIST', '/PATCHSET_LEVEL'];
 const STATUS_CODE = {
   NO_STATUS: 'no-status',
   PENDING: 'pending',
   PENDING_OLD_PATH: 'pending-old-path',
   MISSING: 'missing',
   MISSING_OLD_PATH: 'missing-old-path',
   APPROVED: 'approved',
 };

 const STATUS_PRIORITY_ORDER = [
   STATUS_CODE.NO_STATUS,
   STATUS_CODE.MISSING,
   STATUS_CODE.PENDING,
   STATUS_CODE.MISSING_OLD_PATH,
   STATUS_CODE.PENDING_OLD_PATH,
   STATUS_CODE.APPROVED,
 ];

 const STATUS_ICON = {
   [STATUS_CODE.PENDING]: 'schedule',
   [STATUS_CODE.MISSING]: 'close',
   [STATUS_CODE.PENDING_OLD_PATH]: 'schedule',
   [STATUS_CODE.MISSING_OLD_PATH]: 'close',
   [STATUS_CODE.APPROVED]: 'check',
   [STATUS_CODE.NO_STATUS]: 'check_circle',
 };

 const STATUS_SUMMARY = {
   [STATUS_CODE.PENDING]: 'Pending',
   [STATUS_CODE.MISSING]: 'Missing',
   [STATUS_CODE.PENDING_OLD_PATH]: 'Pending Old Path',
   [STATUS_CODE.MISSING_OLD_PATH]: 'Missing Old Path',
   [STATUS_CODE.APPROVED]: 'Approved',
   [STATUS_CODE.NO_STATUS]: 'Does not need approval',
 };

 const STATUS_TOOLTIP = {
   [STATUS_CODE.PENDING]: 'Pending code owner approval',
   [STATUS_CODE.MISSING]: 'Missing code owner approval',
   [STATUS_CODE.PENDING_OLD_PATH]:
     'Pending code owner approval on pre-renamed file',
   [STATUS_CODE.MISSING_OLD_PATH]:
     'Missing code owner approval on pre-renamed file',
   [STATUS_CODE.APPROVED]: 'Approved by code owner',
   [STATUS_CODE.NO_STATUS]: 'Does not need approval',
 };

 export function hasPath(ownedPaths: Set<string>, path: string | undefined) {
   if (!path) return false;
   if (path.charAt(0) !== '/') path = '/' + path;
   return ownedPaths.has(path);
 }

 export function getOwners(
   owners: Map<string, Array<AccountInfo>>,
   path: string | undefined
 ): Array<AccountInfo> {
   if (!path) return [];
   if (path.charAt(0) !== '/') path = '/' + path;
   return owners.get(path) ?? [];
 }

 export function uniqueAccountId(
   account: AccountInfo,
   index: number,
   accountArray: AccountInfo[]
 ) {
   return (
     index ===
     accountArray.findIndex(other => account._account_id === other._account_id)
   );
 }

 const base = CodeOwnersModelMixin(LitElement);

 class BaseEl extends base {
   @property({type: Object})
   patchRange?: PatchRange;

   protected override willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
     this.hidden = this.computeHidden();
   }

   computeHidden() {
     const newerPatchsetUploaded = this.status?.newerPatchsetUploaded;
     if (
       this.change === undefined ||
       this.patchRange === undefined ||
       newerPatchsetUploaded === undefined
     ) {
       return true;
     }
     if (this.pluginStatus?.state !== PluginState.Enabled) return true;
     if (this.change.status === 'MERGED') return true;
     // if code-owners is not a submit requirement, don't show status column
     if (
       this.change.requirements &&
       !this.change.requirements.find(r => r.type === 'code-owners')
     ) {
       return false;
     }

     if (newerPatchsetUploaded) return true;

     const latestPatchset =
       this.change.revisions![this.change.current_revision!];
     // Note: in some special cases, patchNum is undefined on latest patchset
     // like after publishing the edit, still show for them
     // TODO: this should be fixed in Gerrit
     if (this.patchRange?.patchNum === undefined) return false;
     // only show if its latest patchset
     if (`${this.patchRange.patchNum}` !== `${latestPatchset._number}`)
       return true;
     return false;
   }
 }

 export const OWNERS_STATUS_COLUMN_HEADER = 'owner-status-column-header';
 /**
  * Column header element for owner status.
  */
 @customElement(OWNERS_STATUS_COLUMN_HEADER)
 export class OwnerStatusColumnHeader extends BaseEl {
   static override get styles() {
     return [
       css`
         :host() {
           display: block;
           padding-right: var(--spacing-m);
           width: 5em;
         }
         :host[hidden] {
           display: none;
         }
       `,
     ];
   }

   override render() {
     if (this.computeHidden()) return nothing;
     return html`<div>Owners</div>`;
   }
 }

 export const OWNER_STATUS_COLUMN_CONTENT = 'owner-status-column-content';
 /**
  * Row content element for owner status.
  */
 @customElement(OWNER_STATUS_COLUMN_CONTENT)
 export class OwnerStatusColumnContent extends BaseEl {
   @property({type: String})
   path?: string;

   @property({type: String})
   oldPath?: string;

   @property({type: Array})
   cleanlyMergedPaths?: Array<string>;

   @property({type: Array})
   cleanlyMergedOldPaths?: Array<string>;

   @property({type: String, reflect: true, attribute: 'owner-status'})
   ownerStatus?: string;

   @property({type: Array})
   ownerReasons?: Array<string>;

   static override get styles() {
     return [
       css`
         :host {
           display: flex;
           padding-right: var(--spacing-m);
           width: 5em;
           text-align: center;
         }
         :host[hidden] {
           display: none;
         }
         gr-icon {
           padding: var(--spacing-xs) 0px;
         }
         :host([owner-status='approved']) gr-icon.status {
           color: var(--positive-green-text-color);
         }
         :host([owner-status='pending']) gr-icon.status {
           color: #ffa62f;
         }
         :host([owner-status='missing']) gr-icon.status {
           color: var(--negative-red-text-color);
         }
         gr-avatar-stack {
           padding: var(--spacing-xs) 0px;
           display: flex;
           --avatar-size: 20px;
         }
         .ellipsis {
           /* These are required to get the ... to line up with the bottom of
              the avatar icons. */
           margin-bottom: -2px;
           display: flex;
           align-items: flex-end;
         }
         .error {
           color: var(--negative-red-text-color);
         }
         .fallback-icon {
           /* Undo the padding for the gr-avatar-stack in case of fallback */
           padding: calc(-1 * var(--spacing-xs)) 0px;
         }
       `,
     ];
   }

   protected override willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
     this.computeStatus();
   }

   private renderReason(reason: string): string {
     let reasonWithAccounts = reason.replace(
       new RegExp(ACCOUNT_TEMPLATE_REGEX, 'g'),
       (_accountIdTemplate, accountId) => {
         const parsedAccountId = Number(accountId);
         const accountInText = (this.status?.accounts || {})[parsedAccountId];
         if (!accountInText) {
           return `Gerrit Account ${parsedAccountId}`;
         }
         return accountInText.display_name ?? accountInText.name ?? '';
       }
     );
     return (
       reasonWithAccounts.charAt(0).toUpperCase() + reasonWithAccounts.slice(1)
     );
   }

   override render() {
     if (
       this.computeHidden() ||
       this.status === undefined ||
       !this.path ||
       MAGIC_FILES.includes(this.path)
     )
       return nothing;
     return html`${this.renderStatus()}${this.renderOwnership()}`;
   }

   private renderStatus() {
     let info = STATUS_TOOLTIP[this.ownerStatus!];
     if (this.ownerReasons) {
       info = this.ownerReasons.map(r => this.renderReason(r)).join('\n');
     }
     const summary = STATUS_SUMMARY[this.ownerStatus!];
     const icon = STATUS_ICON[this.ownerStatus!];
     return html`
       <gr-tooltip-content
         title=${info}
         aria-label=${summary}
         aria-description=${info}
         has-tooltip
       >
         <gr-icon class="status" icon=${icon} aria-hidden="true"></gr-icon>
       </gr-tooltip-content>
     `;
   }

   private renderOwnership() {
     if (this.isOwned()) {
       return html`
         <gr-tooltip-content
           title="You are in OWNERS for this file"
           aria-label="owned"
           aria-description="You are an owner of this file"
           has-tooltip
         >
           <gr-icon filled icon="policy" aria-hidden="true"></gr-icon>
         </gr-tooltip-content>
       `;
     } else if (this.ownedPaths) {
       let oldOwners = getOwners(this.ownedPaths.oldPathOwners, this.oldPath);
       const newOwners = getOwners(this.ownedPaths.newPathOwners, this.path);
       if (this.oldPath === undefined || this.oldPath === null) {
         // In case of a file deletion, the Gerrit FE gives 'path' but not 'oldPath'
         // but code-owners considers a deleted file an oldpath so check the oldpath owners.
         oldOwners = getOwners(this.ownedPaths.oldPathOwners, this.path);
       }
       const allOwners = oldOwners.concat(newOwners).filter(uniqueAccountId);

       return html` <gr-avatar-stack
           .accounts=${allOwners.slice(0, 3)}
           .forceFetch=${true}
           .enableHover=${true}
         >
           <gr-tooltip-content
             slot="fallback"
             title="No reviewer owns this file"
             aria-label="missing owner"
             aria-description="No reviewer owns this file"
             has-tooltip
           >
             <gr-icon icon="help" class="error fallback-icon"></gr-icon>
           </gr-tooltip-content>
         </gr-avatar-stack>
         ${allOwners.length > 3
           ? html`<div class="ellipsis">…</div>`
           : nothing}`;
     }
     return nothing;
   }

   private isOwned() {
     if (!this.ownedPaths) return false;
     if (
       hasPath(this.ownedPaths.newPaths, this.path) ||
       hasPath(this.ownedPaths.oldPaths, this.oldPath) ||
       // In case of deletions, the FE gives a path, but code-owners
       // computes this as being part of the old path.
       ((this.oldPath === undefined || this.oldPath === null) &&
         hasPath(this.ownedPaths.oldPaths, this.path))
     )
       return true;
     return false;
   }

   override loadPropertiesAfterModelChanged() {
     super.loadPropertiesAfterModelChanged();
     this.modelLoader?.loadStatus();
     this.modelLoader?.loadOwnedPaths();
   }

   private computeStatus() {
     if (
       this.status === undefined ||
       (this.cleanlyMergedPaths === undefined &&
         (this.path === undefined || this.oldPath === undefined))
     ) {
       return;
     }

     const codeOwnerStatusMap = this.status.codeOwnerStatusMap;
     const paths =
       this.path === undefined ? this.cleanlyMergedPaths : [this.path];
     const oldPaths =
       this.oldPath === undefined ? this.cleanlyMergedOldPaths : [this.oldPath];

     const statuses = (paths ?? [])
       .filter(path => !MAGIC_FILES.includes(path))
       .map(path => ({
         status: this.extractStatus(codeOwnerStatusMap.get(path), false),
         reasons: codeOwnerStatusMap.get(path)?.reasons,
       }));
     // oldPath may contain null, so filter that as well.
     const oldStatuses = (oldPaths ?? [])
       .filter(path => !MAGIC_FILES.includes(path) && !!path)
       .map(path => ({
         status: this.extractStatus(codeOwnerStatusMap.get(path), true),
         reasons: codeOwnerStatusMap.get(path)?.reasons,
       }));
     const allStatuses = statuses.concat(oldStatuses);
     if (allStatuses.length === 0) {
       return;
     }
     const computedStatus = allStatuses.reduce((a, b) =>
       STATUS_PRIORITY_ORDER.indexOf(a.status) <
       STATUS_PRIORITY_ORDER.indexOf(b.status)
         ? a
         : b
     );
     this.ownerStatus = computedStatus.status;
     this.ownerReasons = computedStatus.reasons;
   }

   private extractStatus(statusItem: FileStatus | undefined, oldPath: boolean) {
     if (statusItem === undefined) {
       return STATUS_CODE.NO_STATUS;
     } else if (statusItem.status === OwnerStatus.INSUFFICIENT_REVIEWERS) {
       return oldPath ? STATUS_CODE.MISSING_OLD_PATH : STATUS_CODE.MISSING;
     } else if (statusItem.status === OwnerStatus.PENDING) {
       return oldPath ? STATUS_CODE.PENDING_OLD_PATH : STATUS_CODE.PENDING;
     } else {
       return STATUS_CODE.APPROVED;
     }
   }
 }
	/**
	* @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 {
	AccountInfo,
	BasePatchSetNum,
	RevisionPatchSetNum,
	} from '@gerritcodereview/typescript-api/rest-api';
	import {css, html, LitElement, nothing, PropertyValues} from 'lit';
	import {customElement, property} from 'lit/decorators';
	import {OwnerStatus} from './code-owners-api';
	import {FileStatus, PluginState} from './code-owners-model';
	import {CodeOwnersModelMixin} from './code-owners-model-mixin';

	// TODO: Extend the API for plugins.
	export interface PatchRange {
	patchNum: RevisionPatchSetNum;
	basePatchNum: BasePatchSetNum;
	}

	const ACCOUNT_TEMPLATE_REGEX = '<GERRIT_ACCOUNT_(\\d+)>';

	const MAGIC_FILES = ['/COMMIT_MSG', '/MERGE_LIST', '/PATCHSET_LEVEL'];
	const STATUS_CODE = {
	NO_STATUS: 'no-status',
	PENDING: 'pending',
	PENDING_OLD_PATH: 'pending-old-path',
	MISSING: 'missing',
	MISSING_OLD_PATH: 'missing-old-path',
	APPROVED: 'approved',
	};

	const STATUS_PRIORITY_ORDER = [
	STATUS_CODE.NO_STATUS,
	STATUS_CODE.MISSING,
	STATUS_CODE.PENDING,
	STATUS_CODE.MISSING_OLD_PATH,
	STATUS_CODE.PENDING_OLD_PATH,
	STATUS_CODE.APPROVED,
	];

	const STATUS_ICON = {
	[STATUS_CODE.PENDING]: 'schedule',
	[STATUS_CODE.MISSING]: 'close',
	[STATUS_CODE.PENDING_OLD_PATH]: 'schedule',
	[STATUS_CODE.MISSING_OLD_PATH]: 'close',
	[STATUS_CODE.APPROVED]: 'check',
	[STATUS_CODE.NO_STATUS]: 'check_circle',
	};

	const STATUS_SUMMARY = {
	[STATUS_CODE.PENDING]: 'Pending',
	[STATUS_CODE.MISSING]: 'Missing',
	[STATUS_CODE.PENDING_OLD_PATH]: 'Pending Old Path',
	[STATUS_CODE.MISSING_OLD_PATH]: 'Missing Old Path',
	[STATUS_CODE.APPROVED]: 'Approved',
	[STATUS_CODE.NO_STATUS]: 'Does not need approval',
	};

	const STATUS_TOOLTIP = {
	[STATUS_CODE.PENDING]: 'Pending code owner approval',
	[STATUS_CODE.MISSING]: 'Missing code owner approval',
	[STATUS_CODE.PENDING_OLD_PATH]:
	'Pending code owner approval on pre-renamed file',
	[STATUS_CODE.MISSING_OLD_PATH]:
	'Missing code owner approval on pre-renamed file',
	[STATUS_CODE.APPROVED]: 'Approved by code owner',
	[STATUS_CODE.NO_STATUS]: 'Does not need approval',
	};

	export function hasPath(ownedPaths: Set<string>, path: string \| undefined) {
	if (!path) return false;
	if (path.charAt(0) !== '/') path = '/' + path;
	return ownedPaths.has(path);
	}

	export function getOwners(
	owners: Map<string, Array<AccountInfo>>,
	path: string \| undefined
	): Array<AccountInfo> {
	if (!path) return [];
	if (path.charAt(0) !== '/') path = '/' + path;
	return owners.get(path) ?? [];
	}

	export function uniqueAccountId(
	account: AccountInfo,
	index: number,
	accountArray: AccountInfo[]
	) {
	return (
	index ===
	accountArray.findIndex(other => account._account_id === other._account_id)
	);
	}

	const base = CodeOwnersModelMixin(LitElement);

	class BaseEl extends base {
	@property({type: Object})
	patchRange?: PatchRange;

	protected override willUpdate(changedProperties: PropertyValues): void {
	super.willUpdate(changedProperties);
	this.hidden = this.computeHidden();
	}

	computeHidden() {
	const newerPatchsetUploaded = this.status?.newerPatchsetUploaded;
	if (
	this.change === undefined \|\|
	this.patchRange === undefined \|\|
	newerPatchsetUploaded === undefined
	) {
	return true;
	}
	if (this.pluginStatus?.state !== PluginState.Enabled) return true;
	if (this.change.status === 'MERGED') return true;
	// if code-owners is not a submit requirement, don't show status column
	if (
	this.change.requirements &&
	!this.change.requirements.find(r => r.type === 'code-owners')
	) {
	return false;
	}

	if (newerPatchsetUploaded) return true;

	const latestPatchset =
	this.change.revisions![this.change.current_revision!];
	// Note: in some special cases, patchNum is undefined on latest patchset
	// like after publishing the edit, still show for them
	// TODO: this should be fixed in Gerrit
	if (this.patchRange?.patchNum === undefined) return false;
	// only show if its latest patchset
	if (`${this.patchRange.patchNum}` !== `${latestPatchset._number}`)
	return true;
	return false;
	}
	}

	export const OWNERS_STATUS_COLUMN_HEADER = 'owner-status-column-header';
	/**
	* Column header element for owner status.
	*/
	@customElement(OWNERS_STATUS_COLUMN_HEADER)
	export class OwnerStatusColumnHeader extends BaseEl {
	static override get styles() {
	return [
	css`
	:host() {
	display: block;
	padding-right: var(--spacing-m);
	width: 5em;
	}
	:host[hidden] {
	display: none;
	}
	`,
	];
	}

	override render() {
	if (this.computeHidden()) return nothing;
	return html`<div>Owners</div>`;
	}
	}

	export const OWNER_STATUS_COLUMN_CONTENT = 'owner-status-column-content';
	/**
	* Row content element for owner status.
	*/
	@customElement(OWNER_STATUS_COLUMN_CONTENT)
	export class OwnerStatusColumnContent extends BaseEl {
	@property({type: String})
	path?: string;

	@property({type: String})
	oldPath?: string;

	@property({type: Array})
	cleanlyMergedPaths?: Array<string>;

	@property({type: Array})
	cleanlyMergedOldPaths?: Array<string>;

	@property({type: String, reflect: true, attribute: 'owner-status'})
	ownerStatus?: string;

	@property({type: Array})
	ownerReasons?: Array<string>;

	static override get styles() {
	return [
	css`
	:host {
	display: flex;
	padding-right: var(--spacing-m);
	width: 5em;
	text-align: center;
	}
	:host[hidden] {
	display: none;
	}
	gr-icon {
	padding: var(--spacing-xs) 0px;
	}
	:host([owner-status='approved']) gr-icon.status {
	color: var(--positive-green-text-color);
	}
	:host([owner-status='pending']) gr-icon.status {
	color: #ffa62f;
	}
	:host([owner-status='missing']) gr-icon.status {
	color: var(--negative-red-text-color);
	}
	gr-avatar-stack {
	padding: var(--spacing-xs) 0px;
	display: flex;
	--avatar-size: 20px;
	}
	.ellipsis {
	/* These are required to get the ... to line up with the bottom of
	the avatar icons. */
	margin-bottom: -2px;
	display: flex;
	align-items: flex-end;
	}
	.error {
	color: var(--negative-red-text-color);
	}
	.fallback-icon {
	/* Undo the padding for the gr-avatar-stack in case of fallback */
	padding: calc(-1 * var(--spacing-xs)) 0px;
	}
	`,
	];
	}

	protected override willUpdate(changedProperties: PropertyValues): void {
	super.willUpdate(changedProperties);
	this.computeStatus();
	}

	private renderReason(reason: string): string {
	let reasonWithAccounts = reason.replace(
	new RegExp(ACCOUNT_TEMPLATE_REGEX, 'g'),
	(_accountIdTemplate, accountId) => {
	const parsedAccountId = Number(accountId);
	const accountInText = (this.status?.accounts \|\| {})[parsedAccountId];
	if (!accountInText) {
	return `Gerrit Account ${parsedAccountId}`;
	}
	return accountInText.display_name ?? accountInText.name ?? '';
	}
	);
	return (
	reasonWithAccounts.charAt(0).toUpperCase() + reasonWithAccounts.slice(1)
	);
	}

	override render() {
	if (
	this.computeHidden() \|\|
	this.status === undefined \|\|
	!this.path \|\|
	MAGIC_FILES.includes(this.path)
	)
	return nothing;
	return html`${this.renderStatus()}${this.renderOwnership()}`;
	}

	private renderStatus() {
	let info = STATUS_TOOLTIP[this.ownerStatus!];
	if (this.ownerReasons) {
	info = this.ownerReasons.map(r => this.renderReason(r)).join('\n');
	}
	const summary = STATUS_SUMMARY[this.ownerStatus!];
	const icon = STATUS_ICON[this.ownerStatus!];
	return html`
	<gr-tooltip-content
	title=${info}
	aria-label=${summary}
	aria-description=${info}
	has-tooltip
	>
	<gr-icon class="status" icon=${icon} aria-hidden="true"></gr-icon>
	</gr-tooltip-content>
	`;
	}

	private renderOwnership() {
	if (this.isOwned()) {
	return html`
	<gr-tooltip-content
	title="You are in OWNERS for this file"
	aria-label="owned"
	aria-description="You are an owner of this file"
	has-tooltip
	>
	<gr-icon filled icon="policy" aria-hidden="true"></gr-icon>
	</gr-tooltip-content>
	`;
	} else if (this.ownedPaths) {
	let oldOwners = getOwners(this.ownedPaths.oldPathOwners, this.oldPath);
	const newOwners = getOwners(this.ownedPaths.newPathOwners, this.path);
	if (this.oldPath === undefined \|\| this.oldPath === null) {
	// In case of a file deletion, the Gerrit FE gives 'path' but not 'oldPath'
	// but code-owners considers a deleted file an oldpath so check the oldpath owners.
	oldOwners = getOwners(this.ownedPaths.oldPathOwners, this.path);
	}
	const allOwners = oldOwners.concat(newOwners).filter(uniqueAccountId);

	return html` <gr-avatar-stack
	.accounts=${allOwners.slice(0, 3)}
	.forceFetch=${true}
	.enableHover=${true}
	>
	<gr-tooltip-content
	slot="fallback"
	title="No reviewer owns this file"
	aria-label="missing owner"
	aria-description="No reviewer owns this file"
	has-tooltip
	>
	<gr-icon icon="help" class="error fallback-icon"></gr-icon>
	</gr-tooltip-content>
	</gr-avatar-stack>
	${allOwners.length > 3
	? html`<div class="ellipsis">…</div>`
	: nothing}`;
	}
	return nothing;
	}

	private isOwned() {
	if (!this.ownedPaths) return false;
	if (
	hasPath(this.ownedPaths.newPaths, this.path) \|\|
	hasPath(this.ownedPaths.oldPaths, this.oldPath) \|\|
	// In case of deletions, the FE gives a path, but code-owners
	// computes this as being part of the old path.
	((this.oldPath === undefined \|\| this.oldPath === null) &&
	hasPath(this.ownedPaths.oldPaths, this.path))
	)
	return true;
	return false;
	}

	override loadPropertiesAfterModelChanged() {
	super.loadPropertiesAfterModelChanged();
	this.modelLoader?.loadStatus();
	this.modelLoader?.loadOwnedPaths();
	}

	private computeStatus() {
	if (
	this.status === undefined \|\|
	(this.cleanlyMergedPaths === undefined &&
	(this.path === undefined \|\| this.oldPath === undefined))
	) {
	return;
	}

	const codeOwnerStatusMap = this.status.codeOwnerStatusMap;
	const paths =
	this.path === undefined ? this.cleanlyMergedPaths : [this.path];
	const oldPaths =
	this.oldPath === undefined ? this.cleanlyMergedOldPaths : [this.oldPath];

	const statuses = (paths ?? [])
	.filter(path => !MAGIC_FILES.includes(path))
	.map(path => ({
	status: this.extractStatus(codeOwnerStatusMap.get(path), false),
	reasons: codeOwnerStatusMap.get(path)?.reasons,
	}));
	// oldPath may contain null, so filter that as well.
	const oldStatuses = (oldPaths ?? [])
	.filter(path => !MAGIC_FILES.includes(path) && !!path)
	.map(path => ({
	status: this.extractStatus(codeOwnerStatusMap.get(path), true),
	reasons: codeOwnerStatusMap.get(path)?.reasons,
	}));
	const allStatuses = statuses.concat(oldStatuses);
	if (allStatuses.length === 0) {
	return;
	}
	const computedStatus = allStatuses.reduce((a, b) =>
	STATUS_PRIORITY_ORDER.indexOf(a.status) <
	STATUS_PRIORITY_ORDER.indexOf(b.status)
	? a
	: b
	);
	this.ownerStatus = computedStatus.status;
	this.ownerReasons = computedStatus.reasons;
	}

	private extractStatus(statusItem: FileStatus \| undefined, oldPath: boolean) {
	if (statusItem === undefined) {
	return STATUS_CODE.NO_STATUS;
	} else if (statusItem.status === OwnerStatus.INSUFFICIENT_REVIEWERS) {
	return oldPath ? STATUS_CODE.MISSING_OLD_PATH : STATUS_CODE.MISSING;
	} else if (statusItem.status === OwnerStatus.PENDING) {
	return oldPath ? STATUS_CODE.PENDING_OLD_PATH : STATUS_CODE.PENDING;
	} else {
	return STATUS_CODE.APPROVED;
	}
	}
	}