Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-issue-list/mr-issue-list.js b/static_src/elements/framework/mr-issue-list/mr-issue-list.js
new file mode 100644
index 0000000..3e0a279
--- /dev/null
+++ b/static_src/elements/framework/mr-issue-list/mr-issue-list.js
@@ -0,0 +1,1575 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+
+import page from 'page';
+import {connectStore, store} from 'reducers/base.js';
+import * as issueV0 from 'reducers/issueV0.js';
+import * as sitewide from 'reducers/sitewide.js';
+import 'elements/framework/links/mr-issue-link/mr-issue-link.js';
+import 'elements/framework/links/mr-crbug-link/mr-crbug-link.js';
+import 'elements/framework/mr-dropdown/mr-dropdown.js';
+import 'elements/framework/mr-star/mr-issue-star.js';
+import {constructHref, prepareDataForDownload} from './list-to-csv-helpers.js';
+import {
+ issueRefToUrl,
+ issueRefToString,
+ issueStringToRef,
+ issueToIssueRef,
+ issueToIssueRefString,
+ labelRefsToOneWordLabels,
+} from 'shared/convertersV0.js';
+import {isTextInput, findDeepEventTarget} from 'shared/dom-helpers.js';
+import {
+ urlWithNewParams,
+ pluralize,
+ setHasAny,
+ objectValuesForKeys,
+} from 'shared/helpers.js';
+import {SHARED_STYLES} from 'shared/shared-styles.js';
+import {parseColSpec, EMPTY_FIELD_VALUE} from 'shared/issue-fields.js';
+import './mr-show-columns-dropdown.js';
+
+/**
+ * Column to display name mapping dictionary
+ * @type {Object<string, string>}
+ */
+const COLUMN_DISPLAY_NAMES = Object.freeze({
+ 'summary': 'Summary + Labels',
+});
+
+/** @const {number} Button property value of DOM click event */
+const PRIMARY_BUTTON = 0;
+/** @const {number} Button property value of DOM auxclick event */
+const MIDDLE_BUTTON = 1;
+
+/** @const {string} A short transition to ease movement of list items. */
+const EASE_OUT_TRANSITION = 'transform 0.05s cubic-bezier(0, 0, 0.2, 1)';
+
+/**
+ * Really high cardinality attributes like ID and Summary are unlikely to be
+ * useful if grouped, so it's better to just hide the option.
+ * @const {Set<string>}
+ */
+const UNGROUPABLE_COLUMNS = new Set(['id', 'summary']);
+
+/**
+ * Columns that should render as issue links.
+ * @const {Set<string>}
+ */
+const ISSUE_COLUMNS = new Set(['id', 'mergedinto', 'blockedon', 'blocking']);
+
+/**
+ * `<mr-issue-list>`
+ *
+ * A list of issues intended to be used in multiple contexts.
+ * @extends {LitElement}
+ */
+export class MrIssueList extends connectStore(LitElement) {
+ /** @override */
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ :host {
+ width: 100%;
+ font-size: var(--chops-main-font-size);
+ }
+ table {
+ width: 100%;
+ }
+ .edit-widget-container {
+ display: flex;
+ flex-wrap: no-wrap;
+ align-items: center;
+ }
+ mr-issue-star {
+ --mr-star-size: 18px;
+ margin-bottom: 1px;
+ margin-left: 4px;
+ }
+ input[type="checkbox"] {
+ cursor: pointer;
+ margin: 0 4px;
+ width: 16px;
+ height: 16px;
+ border-radius: 2px;
+ box-sizing: border-box;
+ appearance: none;
+ -webkit-appearance: none;
+ border: 2px solid var(--chops-gray-400);
+ position: relative;
+ background: var(--chops-white);
+ }
+ th input[type="checkbox"] {
+ border-color: var(--chops-gray-500);
+ }
+ input[type="checkbox"]:checked {
+ background: var(--chops-primary-accent-color);
+ border-color: var(--chops-primary-accent-color);
+ }
+ input[type="checkbox"]:checked::after {
+ left: 1px;
+ top: 2px;
+ position: absolute;
+ content: "";
+ width: 8px;
+ height: 4px;
+ border: 2px solid white;
+ border-right: none;
+ border-top: none;
+ transform: rotate(-45deg);
+ }
+ td, th.group-header {
+ padding: 4px 8px;
+ text-overflow: ellipsis;
+ border-bottom: var(--chops-normal-border);
+ cursor: pointer;
+ font-weight: normal;
+ }
+ .group-header-content {
+ height: 100%;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ }
+ th.group-header i.material-icons {
+ font-size: var(--chops-icon-font-size);
+ color: var(--chops-primary-icon-color);
+ margin-right: 4px;
+ }
+ td.ignore-navigation {
+ cursor: default;
+ }
+ th {
+ background: var(--chops-table-header-bg);
+ white-space: nowrap;
+ text-align: left;
+ border-bottom: var(--chops-normal-border);
+ }
+ th.selection-header {
+ padding: 3px 8px;
+ }
+ th > mr-dropdown, th > mr-show-columns-dropdown {
+ font-weight: normal;
+ color: var(--chops-link-color);
+ --mr-dropdown-icon-color: var(--chops-link-color);
+ --mr-dropdown-anchor-padding: 3px 8px;
+ --mr-dropdown-anchor-font-weight: bold;
+ --mr-dropdown-menu-min-width: 150px;
+ }
+ tr {
+ padding: 0 8px;
+ }
+ tr[selected] {
+ background: var(--chops-selected-bg);
+ }
+ td:first-child, th:first-child {
+ border-left: 4px solid transparent;
+ }
+ tr[cursored] > td:first-child {
+ border-left: 4px solid var(--chops-blue-700);
+ }
+ mr-crbug-link {
+ /* We need the shortlink to be hidden but still accessible.
+ * The opacity attribute visually hides a link while still
+ * keeping it in the DOM.opacity. */
+ --mr-crbug-link-opacity: 0;
+ --mr-crbug-link-opacity-focused: 1;
+ }
+ td:hover > mr-crbug-link {
+ --mr-crbug-link-opacity: 1;
+ }
+ .col-summary, .header-summary {
+ /* Setting a table cell to 100% width makes it take up
+ * all remaining space in the table, not the full width of
+ * the table. */
+ width: 100%;
+ }
+ .summary-label {
+ display: inline-block;
+ margin: 0 2px;
+ color: var(--chops-green-800);
+ text-decoration: none;
+ font-size: 90%;
+ }
+ .summary-label:hover {
+ text-decoration: underline;
+ }
+ td.draggable i {
+ opacity: 0;
+ }
+ td.draggable {
+ color: var(--chops-primary-icon-color);
+ cursor: grab;
+ padding-left: 0;
+ padding-right: 0;
+ }
+ tr.dragged {
+ opacity: 0.74;
+ }
+ tr:hover td.draggable i {
+ opacity: 1;
+ }
+ .csv-download-container {
+ border-bottom: none;
+ text-align: end;
+ cursor: default;
+ }
+ #hidden-data-link {
+ display: none;
+ }
+ @media (min-width: 1024px) {
+ .first-row th {
+ position: sticky;
+ top: var(--monorail-header-height);
+ z-index: 10;
+ }
+ }
+ `,
+ ];
+ }
+
+ /** @override */
+ render() {
+ const selectAllChecked = this._selectedIssues.size > 0;
+ const checkboxLabel = `Select ${selectAllChecked ? 'None' : 'All'}`;
+
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <table cellspacing="0">
+ <thead>
+ <tr class="first-row">
+ ${this.rerank ? html`<th></th>` : ''}
+ <th class="selection-header">
+ <div class="edit-widget-container">
+ ${this.selectionEnabled ? html`
+ <input
+ class="select-all"
+ .checked=${selectAllChecked}
+ type="checkbox"
+ aria-label=${checkboxLabel}
+ title=${checkboxLabel}
+ @change=${this._selectAll}
+ />
+ ` : ''}
+ </div>
+ </th>
+ ${this.columns.map((column, i) => this._renderHeader(column, i))}
+ <th style="z-index: ${this.highestZIndex};">
+ <mr-show-columns-dropdown
+ title="Show columns"
+ menuAlignment="right"
+ .columns=${this.columns}
+ .issues=${this.issues}
+ .defaultFields=${this.defaultFields}
+ ></mr-show-columns-dropdown>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ ${this._renderIssues()}
+ </tbody>
+ ${this.userDisplayName && html`
+ <tfoot><tr><td colspan=999 class="csv-download-container">
+ <a id="download-link" aria-label="Download page as CSV"
+ @click=${this._downloadCsv} href>CSV</a>
+ <a id="hidden-data-link" download="${this.projectName}-issues.csv"
+ href=${this._csvDataHref}></a>
+ </td></tr></tfoot>
+ `}
+ </table>
+ `;
+ }
+
+ /**
+ * @param {string} column
+ * @param {number} i The index of the column in the table.
+ * @return {TemplateResult} html for header for the i-th column.
+ * @private
+ */
+ _renderHeader(column, i) {
+ // zIndex is used to render the z-index property in descending order
+ const zIndex = this.highestZIndex - i;
+ const colKey = column.toLowerCase();
+ const name = colKey in COLUMN_DISPLAY_NAMES ? COLUMN_DISPLAY_NAMES[colKey] :
+ column;
+ return html`
+ <th style="z-index: ${zIndex};" class="header-${colKey}">
+ <mr-dropdown
+ class="dropdown-${colKey}"
+ .text=${name}
+ .items=${this._headerActions(column, i)}
+ menuAlignment="left"
+ ></mr-dropdown>
+ </th>`;
+ }
+
+ /**
+ * @param {string} column
+ * @param {number} i The index of the column in the table.
+ * @return {Array<Object>} Available actions for the column.
+ * @private
+ */
+ _headerActions(column, i) {
+ const columnKey = column.toLowerCase();
+
+ const isGroupable = this.sortingAndGroupingEnabled &&
+ !UNGROUPABLE_COLUMNS.has(columnKey);
+
+ let showOnly = [];
+ if (isGroupable) {
+ const values = [...this._uniqueValuesByColumn.get(columnKey)];
+ if (values.length) {
+ showOnly = [{
+ text: 'Show only',
+ items: values.map((v) => ({
+ text: v,
+ handler: () => this.showOnly(column, v),
+ })),
+ }];
+ }
+ }
+ const sortingActions = this.sortingAndGroupingEnabled ? [
+ {
+ text: 'Sort up',
+ handler: () => this.updateSortSpec(column),
+ },
+ {
+ text: 'Sort down',
+ handler: () => this.updateSortSpec(column, true),
+ },
+ ] : [];
+ const actions = [
+ ...sortingActions,
+ ...showOnly,
+ {
+ text: 'Hide column',
+ handler: () => this.removeColumn(i),
+ },
+ ];
+ if (isGroupable) {
+ actions.push({
+ text: 'Group rows',
+ handler: () => this.addGroupBy(i),
+ });
+ }
+ return actions;
+ }
+
+ /**
+ * @return {TemplateResult}
+ */
+ _renderIssues() {
+ // Keep track of all the groups that we've seen so far to create
+ // group headers as needed.
+ const {issues, groupedIssues} = this;
+
+ if (groupedIssues) {
+ // Make sure issues in groups are rendered with unique indices across
+ // groups to make sure hot keys and the like still work.
+ let indexOffset = 0;
+ return html`${groupedIssues.map(({groupName, issues}) => {
+ const template = html`
+ ${this._renderGroup(groupName, issues, indexOffset)}
+ `;
+ indexOffset += issues.length;
+ return template;
+ })}`;
+ }
+
+ return html`
+ ${issues.map((issue, i) => this._renderRow(issue, i))}
+ `;
+ }
+
+ /**
+ * @param {string} groupName
+ * @param {Array<Issue>} issues
+ * @param {number} iOffset
+ * @return {TemplateResult}
+ * @private
+ */
+ _renderGroup(groupName, issues, iOffset) {
+ if (!this.groups.length) return html``;
+
+ const count = issues.length;
+ const groupKey = groupName.toLowerCase();
+ const isHidden = this._hiddenGroups.has(groupKey);
+
+ return html`
+ <tr>
+ <th
+ class="group-header"
+ colspan="${this.numColumns}"
+ @click=${() => this._toggleGroup(groupKey)}
+ aria-expanded=${(!isHidden).toString()}
+ >
+ <div class="group-header-content">
+ <i
+ class="material-icons"
+ title=${isHidden ? 'Show' : 'Hide'}
+ >${isHidden ? 'add' : 'remove'}</i>
+ ${count} ${pluralize(count, 'issue')}: ${groupName}
+ </div>
+ </th>
+ </tr>
+ ${issues.map((issue, i) => this._renderRow(issue, iOffset + i, isHidden))}
+ `;
+ }
+
+ /**
+ * @param {string} groupKey Lowercase group key.
+ * @private
+ */
+ _toggleGroup(groupKey) {
+ if (this._hiddenGroups.has(groupKey)) {
+ this._hiddenGroups.delete(groupKey);
+ } else {
+ this._hiddenGroups.add(groupKey);
+ }
+
+ // Lit-element's default hasChanged check does not notice when Sets mutate.
+ this.requestUpdate('_hiddenGroups');
+ }
+
+ /**
+ * @param {Issue} issue
+ * @param {number} i Index within the list of issues
+ * @param {boolean=} isHidden
+ * @return {TemplateResult}
+ */
+ _renderRow(issue, i, isHidden = false) {
+ const rowSelected = this._selectedIssues.has(issueRefToString(issue));
+ const id = issueRefToString(issue);
+ const cursorId = issueRefToString(this.cursor);
+ const hasCursor = cursorId === id;
+ const dragged = this._dragging && rowSelected;
+
+ return html`
+ <tr
+ class="row-${i} list-row ${dragged ? 'dragged' : ''}"
+ ?selected=${rowSelected}
+ ?cursored=${hasCursor}
+ ?hidden=${isHidden}
+ data-issue-ref=${id}
+ data-index=${i}
+ data-name=${issue.name}
+ @focus=${this._setRowAsCursorOnFocus}
+ @click=${this._clickIssueRow}
+ @auxclick=${this._clickIssueRow}
+ @keydown=${this._keydownIssueRow}
+ tabindex="0"
+ >
+ ${this.rerank ? html`
+ <td class="draggable ignore-navigation"
+ @mousedown=${this._onMouseDown}>
+ <i class="material-icons" title="Drag issue">drag_indicator</i>
+ </td>
+ ` : ''}
+ <td class="ignore-navigation">
+ <div class="edit-widget-container">
+ ${this.selectionEnabled ? html`
+ <input
+ class="issue-checkbox"
+ .value=${id}
+ .checked=${rowSelected}
+ type="checkbox"
+ data-index=${i}
+ aria-label="Select Issue ${issue.localId}"
+ @change=${this._selectIssue}
+ @click=${this._selectIssueRange}
+ />
+ ` : ''}
+ ${this.starringEnabled ? html`
+ <mr-issue-star
+ .issueRef=${issueToIssueRef(issue)}
+ ></mr-issue-star>
+ ` : ''}
+ </div>
+ </td>
+
+ ${this.columns.map((column) => html`
+ <td class="col-${column.toLowerCase()}">
+ ${this._renderCell(column, issue)}
+ </td>
+ `)}
+
+ <td>
+ <mr-crbug-link .issue=${issue}></mr-crbug-link>
+ </td>
+ </tr>
+ `;
+ }
+
+ /**
+ * @param {string} column
+ * @param {Issue} issue
+ * @return {TemplateResult} Html for the given column for the given issue.
+ * @private
+ */
+ _renderCell(column, issue) {
+ const columnName = column.toLowerCase();
+ if (columnName === 'summary') {
+ return html`
+ ${issue.summary}
+ ${labelRefsToOneWordLabels(issue.labelRefs).map(({label}) => html`
+ <a
+ class="summary-label"
+ href="/p/${issue.projectName}/issues/list?q=label%3A${label}"
+ >${label}</a>
+ `)}
+ `;
+ }
+ const values = this.extractFieldValues(issue, column);
+
+ if (!values.length) return EMPTY_FIELD_VALUE;
+
+ // TODO(zhangtiff): Make this based on the "ISSUE" field type rather than a
+ // hardcoded list of issue fields.
+ if (ISSUE_COLUMNS.has(columnName)) {
+ return values.map((issueRefString, i) => {
+ const issue = this._issueForRefString(issueRefString, this.projectName);
+ return html`
+ <mr-issue-link
+ .projectName=${this.projectName}
+ .issue=${issue}
+ .queryParams=${this._queryParams}
+ short
+ ></mr-issue-link>${values.length - 1 > i ? ', ' : ''}
+ `;
+ });
+ }
+ return values.join(', ');
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ /**
+ * Array of columns to display.
+ */
+ columns: {type: Array},
+ /**
+ * Array of built in fields that are available outside of project
+ * configuration.
+ */
+ defaultFields: {type: Array},
+ /**
+ * A function that takes in an issue and a field name and returns the
+ * value for that field in the issue. This function accepts custom fields,
+ * built in fields, and ad hoc fields computed from label prefixes.
+ */
+ extractFieldValues: {type: Object},
+ /**
+ * Array of columns that are used as groups for issues.
+ */
+ groups: {type: Array},
+ /**
+ * List of issues to display.
+ */
+ issues: {type: Array},
+ /**
+ * A Redux action creator that calls the API to rerank the issues
+ * in the list. If set, reranking is enabled for this issue list.
+ */
+ rerank: {type: Object},
+ /**
+ * Whether issues should be selectable or not.
+ */
+ selectionEnabled: {type: Boolean},
+ /**
+ * Whether issues should be sortable and groupable or not. This will
+ * change how column headers will be displayed. The ability to sort and
+ * group are currently coupled.
+ */
+ sortingAndGroupingEnabled: {type: Boolean},
+ /**
+ * Whether to show issue starring or not.
+ */
+ starringEnabled: {type: Boolean},
+ /**
+ * A query representing the current set of matching issues in the issue
+ * list. Does not necessarily match queryParams.q since queryParams.q can
+ * be empty while currentQuery is set to a default project query.
+ */
+ currentQuery: {type: String},
+ /**
+ * Object containing URL parameters to be preserved when issue links are
+ * clicked. This Object is only used for the purpose of preserving query
+ * parameters across links, not for the purpose of evaluating the query
+ * parameters themselves to get values like columns, sort, or q. This
+ * separation is important because we don't want to tightly couple this
+ * list component with a specific URL system.
+ * @private
+ */
+ _queryParams: {type: Object},
+ /**
+ * The initial cursor that a list view uses. This attribute allows users
+ * of the list component to specify and control the cursor. When the
+ * initialCursor attribute updates, the list focuses the element specified
+ * by the cursor.
+ */
+ initialCursor: {type: String},
+ /**
+ * Logged in user's display name
+ */
+ userDisplayName: {type: String},
+ /**
+ * IssueRef Object specifying which issue the user is currently focusing.
+ */
+ _localCursor: {type: Object},
+ /**
+ * Set of group keys that are currently hidden.
+ */
+ _hiddenGroups: {type: Object},
+ /**
+ * Set of all selected issues where each entry is an issue ref string.
+ */
+ _selectedIssues: {type: Object},
+ /**
+ * List of unique phase names for all phases in issues.
+ */
+ _phaseNames: {type: Array},
+ /**
+ * True iff the user is dragging issues.
+ */
+ _dragging: {type: Boolean},
+ /**
+ * CSV data in data HREF format, used to download csv
+ */
+ _csvDataHref: {type: String},
+ /**
+ * Function to get a full Issue object for a given ref string.
+ */
+ _issueForRefString: {type: Object},
+ };
+ };
+
+ /** @override */
+ constructor() {
+ super();
+ /** @type {Array<Issue>} */
+ this.issues = [];
+ // TODO(jojwang): monorail:6336#c8, when ezt listissues page is fully
+ // deprecated, remove phaseNames from mr-issue-list.
+ this._phaseNames = [];
+ /** @type {IssueRef} */
+ this._localCursor;
+ /** @type {IssueRefString} */
+ this.initialCursor;
+ /** @type {Set<IssueRefString>} */
+ this._selectedIssues = new Set();
+ /** @type {string} */
+ this.projectName;
+ /** @type {Object} */
+ this._queryParams = {};
+ /** @type {string} */
+ this.currentQuery = '';
+ /**
+ * @param {Array<String>} items
+ * @param {number} index
+ * @return {Promise<void>}
+ */
+ this.rerank = null;
+ /** @type {boolean} */
+ this.selectionEnabled = false;
+ /** @type {boolean} */
+ this.sortingAndGroupingEnabled = false;
+ /** @type {boolean} */
+ this.starringEnabled = false;
+ /** @type {Array} */
+ this.columns = ['ID', 'Summary'];
+ /** @type {Array<string>} */
+ this.defaultFields = [];
+ /** @type {Array} */
+ this.groups = [];
+ this.userDisplayName = '';
+
+ /** @type {function(KeyboardEvent): void} */
+ this._boundRunListHotKeys = this._runListHotKeys.bind(this);
+ /** @type {function(MouseEvent): void} */
+ this._boundOnMouseMove = this._onMouseMove.bind(this);
+ /** @type {function(MouseEvent): void} */
+ this._boundOnMouseUp = this._onMouseUp.bind(this);
+
+ /**
+ * @param {Issue} _issue
+ * @param {string} _fieldName
+ * @return {Array<string>}
+ */
+ this.extractFieldValues = (_issue, _fieldName) => [];
+
+ /**
+ * @param {IssueRefString} _issueRefString
+ * @param {string} projectName The currently viewed project.
+ * @return {Issue}
+ */
+ this._issueForRefString = (_issueRefString, projectName) =>
+ issueStringToRef(_issueRefString, projectName);
+
+ this._hiddenGroups = new Set();
+
+ this._starredIssues = new Set();
+ this._fetchingStarredIssues = false;
+ this._starringIssues = new Map();
+
+ this._uniqueValuesByColumn = new Map();
+
+ this._dragging = false;
+ this._mouseX = null;
+ this._mouseY = null;
+
+ /** @type {number} */
+ this._lastSelectedCheckbox = -1;
+
+ // Expose page.js for stubbing.
+ this._page = page;
+ /** @type {string} page data in csv format as data href */
+ this._csvDataHref = '';
+ };
+
+ /** @override */
+ stateChanged(state) {
+ this._starredIssues = issueV0.starredIssues(state);
+ this._fetchingStarredIssues =
+ issueV0.requests(state).fetchStarredIssues.requesting;
+ this._starringIssues = issueV0.starringIssues(state);
+
+ this._phaseNames = (issueV0.issueListPhaseNames(state) || []);
+ this._queryParams = sitewide.queryParams(state);
+
+ this._issueForRefString = issueV0.issueForRefString(state);
+ }
+
+ /** @override */
+ firstUpdated() {
+ // Only attach an event listener once the DOM has rendered.
+ window.addEventListener('keydown', this._boundRunListHotKeys);
+ this._dataLink = this.shadowRoot.querySelector('#hidden-data-link');
+ }
+
+ /** @override */
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ window.removeEventListener('keydown', this._boundRunListHotKeys);
+ }
+
+ /**
+ * @override
+ * @fires CustomEvent#selectionChange
+ */
+ update(changedProperties) {
+ if (changedProperties.has('issues')) {
+ // Clear selected issues to avoid an ever-growing Set size. In the future,
+ // we may want to consider saving selections across issue reloads, though,
+ // such as in the case or list refreshing.
+ this._selectedIssues = new Set();
+ this.dispatchEvent(new CustomEvent('selectionChange'));
+
+ // Clear group toggle state when the list of issues changes to prevent an
+ // ever-growing Set size.
+ this._hiddenGroups = new Set();
+
+ this._lastSelectedCheckbox = -1;
+ }
+
+ const valuesByColumnArgs = ['issues', 'columns', 'extractFieldValues'];
+ if (setHasAny(changedProperties, valuesByColumnArgs)) {
+ this._uniqueValuesByColumn = this._computeUniqueValuesByColumn(
+ ...objectValuesForKeys(this, valuesByColumnArgs));
+ }
+
+ super.update(changedProperties);
+ }
+
+ /** @override */
+ updated(changedProperties) {
+ if (changedProperties.has('initialCursor')) {
+ const ref = issueStringToRef(this.initialCursor, this.projectName);
+ const row = this._getRowFromIssueRef(ref);
+ if (row) {
+ row.focus();
+ }
+ }
+ }
+
+ /**
+ * Iterates through all issues in a list to sort unique values
+ * across columns, for use in the "Show only" feature.
+ * @param {Array} issues
+ * @param {Array} columns
+ * @param {function(Issue, string): Array<string>} fieldExtractor
+ * @return {Map} Map where each entry has a String key for the
+ * lowercase column name and a Set value, continuing all values for
+ * that column.
+ */
+ _computeUniqueValuesByColumn(issues, columns, fieldExtractor) {
+ const valueMap = new Map(
+ columns.map((col) => [col.toLowerCase(), new Set()]));
+
+ issues.forEach((issue) => {
+ columns.forEach((col) => {
+ const key = col.toLowerCase();
+ const valueSet = valueMap.get(key);
+
+ const values = fieldExtractor(issue, col);
+ // Note: This allows multiple casings of the same values to be added
+ // to the Set.
+ values.forEach((v) => valueSet.add(v));
+ });
+ });
+ return valueMap;
+ }
+
+ /**
+ * Used for dynamically computing z-index to ensure column dropdowns overlap
+ * properly.
+ */
+ get highestZIndex() {
+ return this.columns.length + 10;
+ }
+
+ /**
+ * The number of columns displayed in the table. This is the count of
+ * customized columns + number of built in columns.
+ */
+ get numColumns() {
+ return this.columns.length + 2;
+ }
+
+ /**
+ * Sort issues into groups if groups are defined. The grouping feature is used
+ * when the "groupby" URL parameter is set in the list view.
+ */
+ get groupedIssues() {
+ if (!this.groups || !this.groups.length) return;
+
+ const issuesByGroup = new Map();
+
+ this.issues.forEach((issue) => {
+ const groupName = this._groupNameForIssue(issue);
+ const groupKey = groupName.toLowerCase();
+
+ if (!issuesByGroup.has(groupKey)) {
+ issuesByGroup.set(groupKey, {groupName, issues: [issue]});
+ } else {
+ const entry = issuesByGroup.get(groupKey);
+ entry.issues.push(issue);
+ }
+ });
+ return [...issuesByGroup.values()];
+ }
+
+ /**
+ * The currently selected issue, with _localCursor overriding initialCursor.
+ *
+ * @return {IssueRef} The currently selected issue.
+ */
+ get cursor() {
+ if (this._localCursor) {
+ return this._localCursor;
+ }
+ if (this.initialCursor) {
+ return issueStringToRef(this.initialCursor, this.projectName);
+ }
+ return {};
+ }
+
+ /**
+ * Computes the name of the group that an issue belongs to. Issues are grouped
+ * by fields that the user specifies and group names are generated using a
+ * combination of an issue's field values for all specified groups.
+ *
+ * @param {Issue} issue
+ * @return {string}
+ */
+ _groupNameForIssue(issue) {
+ const groups = this.groups;
+ const keyPieces = [];
+
+ groups.forEach((group) => {
+ const values = this.extractFieldValues(issue, group);
+ if (!values.length) {
+ keyPieces.push(`-has:${group}`);
+ } else {
+ values.forEach((v) => {
+ keyPieces.push(`${group}=${v}`);
+ });
+ }
+ });
+
+ return keyPieces.join(' ');
+ }
+
+ /**
+ * @return {Array<Issue>} Selected issues in the order they appear.
+ */
+ get selectedIssues() {
+ return this.issues.filter((issue) =>
+ this._selectedIssues.has(issueToIssueRefString(issue)));
+ }
+
+ /**
+ * Update the search query to filter values matching a specific one.
+ *
+ * @param {string} column name of the column being filtered.
+ * @param {string} value value of the field to filter by.
+ */
+ showOnly(column, value) {
+ column = column.toLowerCase();
+
+ // TODO(zhangtiff): Handle edge cases where column names are not
+ // mapped directly to field names. For example, "AllLabels", should
+ // query for "Labels".
+ const querySegment = `${column}=${value}`;
+
+ let query = this.currentQuery.trim();
+
+ if (!query.includes(querySegment)) {
+ query += ' ' + querySegment;
+
+ this._updateQueryParams({q: query.trim()}, ['start']);
+ }
+ }
+
+ /**
+ * Update sort parameter in the URL based on user input.
+ *
+ * @param {string} column name of the column to be sorted.
+ * @param {boolean} descending descending or ascending order.
+ */
+ updateSortSpec(column, descending = false) {
+ column = column.toLowerCase();
+ const oldSpec = this._queryParams.sort || '';
+ const columns = parseColSpec(oldSpec.toLowerCase());
+
+ // Remove any old instances of the same sort spec.
+ const newSpec = columns.filter(
+ (c) => c && c !== column && c !== `-${column}`);
+
+ newSpec.unshift(`${descending ? '-' : ''}${column}`);
+
+ this._updateQueryParams({sort: newSpec.join(' ')}, ['start']);
+ }
+
+ /**
+ * Updates the groupby URL parameter to include a new column to group.
+ *
+ * @param {number} i index of the column to be grouped.
+ */
+ addGroupBy(i) {
+ const groups = [...this.groups];
+ const columns = [...this.columns];
+ const groupedColumn = columns[i];
+ columns.splice(i, 1);
+
+ groups.unshift(groupedColumn);
+
+ this._updateQueryParams({
+ groupby: groups.join(' '),
+ colspec: columns.join('+'),
+ }, ['start']);
+ }
+
+ /**
+ * Removes the column at a particular index.
+ *
+ * @param {number} i the issue column to be removed.
+ */
+ removeColumn(i) {
+ const columns = [...this.columns];
+ columns.splice(i, 1);
+ this.reloadColspec(columns);
+ }
+
+ /**
+ * Adds a new column to a particular index.
+ *
+ * @param {string} name of the new column added.
+ */
+ addColumn(name) {
+ this.reloadColspec([...this.columns, name]);
+ }
+
+ /**
+ * Reflects changes to the columns of an issue list to the URL, through
+ * frontend routing.
+ *
+ * @param {Array} newColumns the new colspec to set in the URL.
+ */
+ reloadColspec(newColumns) {
+ this._updateQueryParams({colspec: newColumns.join('+')});
+ }
+
+ /**
+ * Navigates to the same URL as the current page, but with query
+ * params updated.
+ *
+ * @param {Object} newParams keys and values of the queryParams
+ * Object to be updated.
+ * @param {Array} deletedParams keys to be cleared from queryParams.
+ */
+ _updateQueryParams(newParams = {}, deletedParams = []) {
+ const url = urlWithNewParams(this._baseUrl(), this._queryParams, newParams,
+ deletedParams);
+ this._page(url);
+ }
+
+ /**
+ * Get the current URL of the page, without query params. Useful for
+ * test stubbing.
+ *
+ * @return {string} the URL of the list page, without params.
+ */
+ _baseUrl() {
+ return window.location.pathname;
+ }
+
+ /**
+ * Run issue list hot keys. This event handler needs to be bound globally
+ * because a list cursor can be defined even when no element in the list is
+ * focused.
+ * @param {KeyboardEvent} e
+ */
+ _runListHotKeys(e) {
+ if (!this.issues || !this.issues.length) return;
+ const target = findDeepEventTarget(e);
+ if (!target || isTextInput(target)) return;
+
+ const key = e.key;
+
+ const activeRow = this._getCursorElement();
+
+ let i = -1;
+ if (activeRow) {
+ i = Number.parseInt(activeRow.dataset.index);
+
+ const issue = this.issues[i];
+
+ switch (key) {
+ case 's': // Star focused issue.
+ this._starIssue(issueToIssueRef(issue));
+ return;
+ case 'x': // Toggle selection of focused issue.
+ const issueRefString = issueToIssueRefString(issue);
+ this._updateSelectedIssues([issueRefString],
+ !this._selectedIssues.has(issueRefString));
+ return;
+ case 'o': // Open current issue.
+ case 'O': // Open current issue in new tab.
+ this._navigateToIssue(issue, e.shiftKey);
+ return;
+ }
+ }
+
+ // Move up and down the issue list.
+ // 'j' moves 'down'.
+ // 'k' moves 'up'.
+ if (key === 'j' || key === 'k') {
+ if (key === 'j') { // Navigate down the list.
+ i += 1;
+ if (i >= this.issues.length) {
+ i = 0;
+ }
+ } else if (key === 'k') { // Navigate up the list.
+ i -= 1;
+ if (i < 0) {
+ i = this.issues.length - 1;
+ }
+ }
+
+ const nextRow = this.shadowRoot.querySelector(`.row-${i}`);
+ this._setRowAsCursor(nextRow);
+ }
+ }
+
+ /**
+ * @return {HTMLTableRowElement}
+ */
+ _getCursorElement() {
+ const cursor = this.cursor;
+ if (cursor) {
+ // If there's a cursor set, use that instead of focus.
+ return this._getRowFromIssueRef(cursor);
+ }
+ return;
+ }
+
+ /**
+ * @param {FocusEvent} e
+ */
+ _setRowAsCursorOnFocus(e) {
+ this._setRowAsCursor(/** @type {HTMLTableRowElement} */ (e.target));
+ }
+
+ /**
+ *
+ * @param {HTMLTableRowElement} row
+ */
+ _setRowAsCursor(row) {
+ this._localCursor = issueStringToRef(row.dataset.issueRef,
+ this.projectName);
+ row.focus();
+ }
+
+ /**
+ * @param {IssueRef} ref The issueRef to query for.
+ * @return {HTMLTableRowElement}
+ */
+ _getRowFromIssueRef(ref) {
+ return this.shadowRoot.querySelector(
+ `.list-row[data-issue-ref="${issueRefToString(ref)}"]`);
+ }
+
+ /**
+ * Returns an Array containing every <tr> in the list, excluding the header.
+ * @return {Array<HTMLTableRowElement>}
+ */
+ _getRows() {
+ return Array.from(this.shadowRoot.querySelectorAll('.list-row'));
+ }
+
+ /**
+ * Returns an Array containing every selected <tr> in the list.
+ * @return {Array<HTMLTableRowElement>}
+ */
+ _getSelectedRows() {
+ return this._getRows().filter((row) => {
+ return this._selectedIssues.has(row.dataset.issueRef);
+ });
+ }
+
+ /**
+ * @param {IssueRef} issueRef Issue to star
+ */
+ _starIssue(issueRef) {
+ if (!this.starringEnabled) return;
+ const issueKey = issueRefToString(issueRef);
+
+ // TODO(zhangtiff): Find way to share star disabling logic more.
+ const isStarring = this._starringIssues.has(issueKey) &&
+ this._starringIssues.get(issueKey).requesting;
+ const starEnabled = !this._fetchingStarredIssues && !isStarring;
+ if (starEnabled) {
+ const newIsStarred = !this._starredIssues.has(issueKey);
+ this._starIssueInternal(issueRef, newIsStarred);
+ }
+ }
+
+ /**
+ * Wrap store.dispatch and issue.star, for testing.
+ *
+ * @param {IssueRef} issueRef the issue being starred.
+ * @param {boolean} newIsStarred whether to star or unstar the issue.
+ * @private
+ */
+ _starIssueInternal(issueRef, newIsStarred) {
+ store.dispatch(issueV0.star(issueRef, newIsStarred));
+ }
+ /**
+ * @param {Event} e
+ * @fires CustomEvent#open-dialog
+ * @private
+ */
+ _selectAll(e) {
+ const checkbox = /** @type {HTMLInputElement} */ (e.target);
+
+ if (checkbox.checked) {
+ this._selectedIssues = new Set(this.issues.map(issueRefToString));
+ } else {
+ this._selectedIssues = new Set();
+ }
+ this.dispatchEvent(new CustomEvent('selectionChange'));
+ }
+
+ // TODO(zhangtiff): Implement Shift+Click to select a range of checkboxes
+ // for the 'x' hot key.
+ /**
+ * @param {MouseEvent} e
+ * @private
+ */
+ _selectIssueRange(e) {
+ if (!this.selectionEnabled) return;
+
+ const checkbox = /** @type {HTMLInputElement} */ (e.target);
+
+ const index = Number.parseInt(checkbox.dataset.index);
+ if (Number.isNaN(index)) {
+ console.error('Issue checkbox has invalid data-index attribute.');
+ return;
+ }
+
+ const lastIndex = this._lastSelectedCheckbox;
+ if (e.shiftKey && lastIndex >= 0) {
+ const newCheckedState = checkbox.checked;
+
+ const start = Math.min(lastIndex, index);
+ const end = Math.max(lastIndex, index) + 1;
+
+ const updatedIssueKeys = this.issues.slice(start, end).map(
+ issueToIssueRefString);
+ this._updateSelectedIssues(updatedIssueKeys, newCheckedState);
+ }
+
+ this._lastSelectedCheckbox = index;
+ }
+
+ /**
+ * @param {Event} e
+ * @private
+ */
+ _selectIssue(e) {
+ if (!this.selectionEnabled) return;
+
+ const checkbox = /** @type {HTMLInputElement} */ (e.target);
+ const issueKey = checkbox.value;
+
+ this._updateSelectedIssues([issueKey], checkbox.checked);
+ }
+
+ /**
+ * @param {Array<IssueRefString>} issueKeys Stringified issue refs.
+ * @param {boolean} selected
+ * @fires CustomEvent#selectionChange
+ * @private
+ */
+ _updateSelectedIssues(issueKeys, selected) {
+ let hasChanges = false;
+
+ issueKeys.forEach((issueKey) => {
+ const oldSelection = this._selectedIssues.has(issueKey);
+
+ if (selected) {
+ this._selectedIssues.add(issueKey);
+ } else if (this._selectedIssues.has(issueKey)) {
+ this._selectedIssues.delete(issueKey);
+ }
+
+ const newSelection = this._selectedIssues.has(issueKey);
+
+ hasChanges = hasChanges || newSelection !== oldSelection;
+ });
+
+
+ if (hasChanges) {
+ this.requestUpdate('_selectedIssues');
+ this.dispatchEvent(new CustomEvent('selectionChange'));
+ }
+ }
+
+ /**
+ * Handles 'Enter' being pressed when a row is focused.
+ * Note we install the 'Enter' listener on the row rather than the window so
+ * 'Enter' behaves as expected when the focus is on other elements.
+ *
+ * @param {KeyboardEvent} e
+ * @private
+ */
+ _keydownIssueRow(e) {
+ if (e.key === 'Enter') {
+ this._maybeOpenIssueRow(e);
+ }
+ }
+
+ /**
+ * Handles mouseDown to start drag events.
+ * @param {MouseEvent} event
+ * @private
+ */
+ _onMouseDown(event) {
+ event.cancelable && event.preventDefault();
+
+ this._mouseX = event.clientX;
+ this._mouseY = event.clientY;
+
+ this._setRowAsCursor(event.currentTarget.parentNode);
+ this._startDrag();
+
+ // We add the event listeners to window because the mouse can go out of the
+ // bounds of the target element. window.mouseUp still triggers even if the
+ // mouse is outside the browser window.
+ window.addEventListener('mousemove', this._boundOnMouseMove);
+ window.addEventListener('mouseup', this._boundOnMouseUp);
+ }
+
+ /**
+ * Handles mouseMove to continue drag events.
+ * @param {MouseEvent} event
+ * @private
+ */
+ _onMouseMove(event) {
+ event.cancelable && event.preventDefault();
+
+ const x = event.clientX - this._mouseX;
+ const y = event.clientY - this._mouseY;
+ this._continueDrag(x, y);
+ }
+
+ /**
+ * Handles mouseUp to end drag events.
+ * @param {MouseEvent} event
+ * @private
+ */
+ _onMouseUp(event) {
+ event.cancelable && event.preventDefault();
+
+ window.removeEventListener('mousemove', this._boundOnMouseMove);
+ window.removeEventListener('mouseup', this._boundOnMouseUp);
+
+ this._endDrag(event.clientY - this._mouseY);
+ }
+
+ /**
+ * Gives a visual indicator that we've started dragging an issue row.
+ * @private
+ */
+ _startDrag() {
+ this._dragging = true;
+
+ // If the dragged row is not selected, select it.
+ // TODO(dtu): Allow dragging an existing selection for multi-drag.
+ const issueRefString = issueRefToString(this.cursor);
+ this._selectedIssues = new Set();
+ this._updateSelectedIssues([issueRefString], true);
+ }
+
+ /**
+ * @param {number} x The x-distance the cursor has moved since mouseDown.
+ * @param {number} y The y-distance the cursor has moved since mouseDown.
+ * @private
+ */
+ _continueDrag(x, y) {
+ // Unselected rows: Transition them to their new positions.
+ const [rows, initialIndex, finalIndex] = this._computeRerank(y);
+ this._translateRows(rows, initialIndex, finalIndex);
+
+ // Selected rows: Stick them to the cursor. No transition.
+ for (const row of this._getSelectedRows()) {
+ row.style.transform = `translate(${x}px, ${y}px`;
+ };
+ }
+
+ /**
+ * @param {number} y The y-distance the cursor has moved since mouseDown.
+ * @private
+ */
+ async _endDrag(y) {
+ this._dragging = false;
+
+ // Unselected rows: Transition them to their new positions.
+ const [rows, initialIndex, finalIndex] = this._computeRerank(y);
+ const targetTranslation =
+ this._translateRows(rows, initialIndex, finalIndex);
+
+ // Selected rows: Transition them to their final positions
+ // and reset their opacity.
+ const selectedRows = this._getSelectedRows();
+ for (const row of selectedRows) {
+ row.style.transition = EASE_OUT_TRANSITION;
+ row.style.transform = `translate(0px, ${targetTranslation}px)`;
+ };
+
+ // Submit the change.
+ const items = selectedRows.map((row) => row.dataset.name);
+ await this.rerank(items, finalIndex);
+
+ // Reset the transforms.
+ for (const row of this._getRows()) {
+ row.style.transition = '';
+ row.style.transform = '';
+ };
+
+ // Set the cursor to the new row.
+ // In order to focus the correct element, we need the DOM to be in sync
+ // with the issue list. We modified this.issues, so wait for a re-render.
+ await this.updateComplete;
+ const selector = `.list-row[data-index="${finalIndex}"]`;
+ this.shadowRoot.querySelector(selector).focus();
+ }
+
+ /**
+ * Computes the starting and ending indices of the cursor row,
+ * given how far the mouse has been dragged in the y-direction.
+ * The indices assume the cursor row has been removed from the list.
+ * @param {number} y The y-distance the cursor has moved since mouseDown.
+ * @return {[Array<HTMLTableRowElement>, number, number]} A tuple containing:
+ * An Array of table rows with the cursor row removed.
+ * The initial index of the cursor row.
+ * The final index of the cursor row.
+ * @private
+ */
+ _computeRerank(y) {
+ const row = this._getCursorElement();
+ const rows = this._getRows();
+ const listTop = row.parentNode.offsetTop;
+
+ // Find the initial index of the cursor row.
+ // TODO(dtu): If we support multi-drag, this should be the adjusted index of
+ // the first selected row after collapsing spaces in the selected group.
+ const initialIndex = rows.indexOf(row);
+ rows.splice(initialIndex, 1);
+
+ // Compute the initial and final y-positions of the top
+ // of the cursor row relative to the top of the list.
+ const initialY = row.offsetTop - listTop;
+ const finalY = initialY + y;
+
+ // Compute the final index of the cursor row.
+ // The break points are the halfway marks of each row.
+ let finalIndex = 0;
+ for (finalIndex = 0; finalIndex < rows.length; ++finalIndex) {
+ const rowTop = rows[finalIndex].offsetTop - listTop -
+ (finalIndex >= initialIndex ? row.scrollHeight : 0);
+ const breakpoint = rowTop + rows[finalIndex].scrollHeight / 2;
+ if (breakpoint > finalY) {
+ break;
+ }
+ }
+
+ return [rows, initialIndex, finalIndex];
+ }
+
+ /**
+ * @param {Array<HTMLTableRowElement>} rows Array of table rows with the
+ * cursor row removed.
+ * @param {number} initialIndex The initial index of the cursor row.
+ * @param {number} finalIndex The final index of the cursor row.
+ * @return {number} The number of pixels the cursor row moved.
+ * @private
+ */
+ _translateRows(rows, initialIndex, finalIndex) {
+ const firstIndex = Math.min(initialIndex, finalIndex);
+ const lastIndex = Math.max(initialIndex, finalIndex);
+
+ const rowHeight = this._getCursorElement().scrollHeight;
+ const translation = initialIndex < finalIndex ? -rowHeight : rowHeight;
+
+ let targetTranslation = 0;
+ for (let i = 0; i < rows.length; ++i) {
+ rows[i].style.transition = EASE_OUT_TRANSITION;
+ if (i >= firstIndex && i < lastIndex) {
+ rows[i].style.transform = `translate(0px, ${translation}px)`;
+ targetTranslation += rows[i].scrollHeight;
+ } else {
+ rows[i].style.transform = '';
+ }
+ }
+
+ return initialIndex < finalIndex ? targetTranslation : -targetTranslation;
+ }
+
+ /**
+ * Handle click and auxclick on issue row.
+ * @param {MouseEvent} event
+ * @private
+ */
+ _clickIssueRow(event) {
+ if (event.button === PRIMARY_BUTTON || event.button === MIDDLE_BUTTON) {
+ this._maybeOpenIssueRow(
+ event, /* openNewTab= */ event.button === MIDDLE_BUTTON);
+ }
+ }
+
+ /**
+ * Checks that the given event should not be ignored, then navigates to the
+ * issue associated with the row.
+ *
+ * @param {MouseEvent|KeyboardEvent} rowEvent A click or 'enter' on a row.
+ * @param {boolean=} openNewTab Forces opening in a new tab
+ * @private
+ */
+ _maybeOpenIssueRow(rowEvent, openNewTab = false) {
+ const path = rowEvent.composedPath();
+ const containsIgnoredElement = path.find(
+ (node) => (node.tagName || '').toUpperCase() === 'A' ||
+ (node.classList && node.classList.contains('ignore-navigation')));
+ if (containsIgnoredElement) return;
+
+ const row = /** @type {HTMLTableRowElement} */ (rowEvent.currentTarget);
+
+ const i = Number.parseInt(row.dataset.index);
+
+ if (i >= 0 && i < this.issues.length) {
+ this._navigateToIssue(this.issues[i], openNewTab || rowEvent.metaKey ||
+ rowEvent.ctrlKey);
+ }
+ }
+
+ /**
+ * @param {Issue} issue
+ * @param {boolean} newTab
+ * @private
+ */
+ _navigateToIssue(issue, newTab) {
+ const link = issueRefToUrl(issueToIssueRef(issue),
+ this._queryParams);
+
+ if (newTab) {
+ // Whether the link opens in a new tab or window is based on the
+ // user's browser preferences.
+ window.open(link, '_blank', 'noopener');
+ } else {
+ this._page(link);
+ }
+ }
+
+ /**
+ * Convert an issue's data into an array of strings, where the columns
+ * match this.columns. Extracting data like _renderCell.
+ * @param {Issue} issue
+ * @return {Array<string>}
+ * @private
+ */
+ _convertIssueToPlaintextArray(issue) {
+ return this.columns.map((column) => {
+ return this.extractFieldValues(issue, column).join(', ');
+ });
+ }
+
+ /**
+ * Convert each Issue into array of strings, where the columns
+ * match this.columns.
+ * @return {Array<Array<string>>}
+ * @private
+ */
+ _convertIssuesToPlaintextArrays() {
+ return this.issues.map(this._convertIssueToPlaintextArray.bind(this));
+ }
+
+ /**
+ * Download content as csv. Conversion to CSV only on button click
+ * instead of on data change because CSV download is not often used.
+ * @param {MouseEvent} event
+ * @private
+ */
+ async _downloadCsv(event) {
+ event.preventDefault();
+
+ if (this.userDisplayName) {
+ // convert issues to array of arrays of strings
+ const issueData = this._convertIssuesToPlaintextArrays();
+
+ // convert the data into csv formatted string.
+ const csvDataString = prepareDataForDownload(issueData, this.columns);
+
+ // construct data href
+ const href = constructHref(csvDataString);
+
+ // modify a tag's href
+ this._csvDataHref = href;
+ await this.requestUpdate('_csvDataHref');
+
+ // click to trigger download
+ this._dataLink.click();
+
+ // reset dataHref
+ this._csvDataHref = '';
+ }
+ }
+};
+
+customElements.define('mr-issue-list', MrIssueList);