opendev/gerrit
Code Issues Proposed changes

Add two new dynamic endpoints on gr-file-list

Browse Source 
These endpoints are used to prepend new columns to the file list table.
Also added a new plugin sample for demo purpose.

Screenshot: https://imgur.com/gsr3n7I
Change-Id: I89cc2797b39eb365dd63958b87943554e5479502
This commit is contained in:
Tao Zhou
2020-05-27 14:16:58 +02:00
parent 9f1df675ca
commit 11b03c134a
4 changed files with 149 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js
View File

@@ -225,6 +225,11 @@ class GrFileList extends mixinBehaviors( [
computed: '_computeShowDynamicColumns(_dynamicHeaderEndpoints, ' +
'_dynamicContentEndpoints, _dynamicSummaryEndpoints)',
},
_showPrependedDynamicColumns: {
type: Boolean,
computed: '_computeShowPrependedDynamicColumns(' +
'_dynamicPrependedHeaderEndpoints, _dynamicPrependedContentEndpoints)',
},
/** @type {Array<string>} */
_dynamicHeaderEndpoints: {
type: Array,
@@ -237,6 +242,14 @@ class GrFileList extends mixinBehaviors( [
_dynamicSummaryEndpoints: {
type: Array,
},
/** @type {Array<string>} */
_dynamicPrependedHeaderEndpoints: {
type: Array,
},
/** @type {Array<string>} */
_dynamicPrependedContentEndpoints: {
type: Array,
},
};
}
@@ -295,18 +308,27 @@ class GrFileList extends mixinBehaviors( [
attached() {
super.attached();
pluginLoader.awaitPluginsLoaded().then(() => {
this._dynamicHeaderEndpoints = pluginEndpoints.getDynamicEndpoints(
'change-view-file-list-header');
this._dynamicContentEndpoints = pluginEndpoints.getDynamicEndpoints(
'change-view-file-list-content');
this._dynamicSummaryEndpoints = pluginEndpoints.getDynamicEndpoints(
'change-view-file-list-summary');
this._dynamicHeaderEndpoints = pluginEndpoints
.getDynamicEndpoints('change-view-file-list-header');
this._dynamicContentEndpoints = pluginEndpoints
.getDynamicEndpoints('change-view-file-list-content');
this._dynamicPrependedHeaderEndpoints = pluginEndpoints
.getDynamicEndpoints('change-view-file-list-header-prepend');
this._dynamicPrependedContentEndpoints = pluginEndpoints
.getDynamicEndpoints('change-view-file-list-content-prepend');
this._dynamicSummaryEndpoints = pluginEndpoints
.getDynamicEndpoints('change-view-file-list-summary');
if (this._dynamicHeaderEndpoints.length !==
this._dynamicContentEndpoints.length) {
console.warn(
'Different number of dynamic file-list header and content.');
}
if (this._dynamicPrependedHeaderEndpoints.length !==
this._dynamicPrependedContentEndpoints.length) {
console.warn(
'Different number of dynamic file-list header and content.');
}
if (this._dynamicHeaderEndpoints.length !==
this._dynamicSummaryEndpoints.length) {
console.warn(
@@ -1432,10 +1454,22 @@ class GrFileList extends mixinBehaviors( [
_computeShowDynamicColumns(
headerEndpoints, contentEndpoints, summaryEndpoints) {
return headerEndpoints && contentEndpoints && summaryEndpoints &&
headerEndpoints.length &&
headerEndpoints.length === contentEndpoints.length &&
headerEndpoints.length === summaryEndpoints.length;
}
/**
* Shows registered dynamic prepended columns iff the 'header', 'content'
* endpoints are registered the exact same number of times.
*/
_computeShowPrependedDynamicColumns(
headerEndpoints, contentEndpoints) {
return headerEndpoints && contentEndpoints &&
headerEndpoints.length &&
headerEndpoints.length === contentEndpoints.length;
}
/**
* Returns true if none of the inline diffs have been expanded.
*

31
polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_html.js
View File

@@ -297,10 +297,22 @@ export const htmlTemplate = html`
</style>
<div id="container" on-click="_handleFileListClick">
<div class="header-row row">
<!-- endpoint: change-view-file-list-header-prepend -->
<template is="dom-if" if="[[_showPrependedDynamicColumns]]">
<template
is="dom-repeat"
items="[[_dynamicPrependedHeaderEndpoints]]"
as="headerEndpoint"
>
<gr-endpoint-decorator name$="[[headerEndpoint]]">
</gr-endpoint-decorator>
</template>
</template>
<div class="path">File</div>
<div class="comments">Comments</div>
<div class="sizeBars">Size</div>
<div class="header-stats">Delta</div>
<!-- endpoint: change-view-file-list-header -->
<template is="dom-if" if="[[_showDynamicColumns]]">
<template
is="dom-repeat"
@@ -332,6 +344,23 @@ export const htmlTemplate = html`
data-file$="[[_computeFileRange(file)]]"
tabindex="-1"
>
<!-- endpoint: change-view-file-list-content-prepend -->
<template is="dom-if" if="[[_showPrependedDynamicColumns]]">
<template
is="dom-repeat"
items="[[_dynamicPrependedContentEndpoints]]"
as="contentEndpoint"
>
<gr-endpoint-decorator name="[[contentEndpoint]]">
<gr-endpoint-param name="changeNum" value="[[changeNum]]">
</gr-endpoint-param>
<gr-endpoint-param name="patchRange" value="[[patchRange]]">
</gr-endpoint-param>
<gr-endpoint-param name="path" value="[[file.__path]]">
</gr-endpoint-param>
</gr-endpoint-decorator>
</template>
</template>
<!-- TODO: Remove data-url as it appears its not used -->
<span
data-url="[[_computeDiffURL(change, patchRange, file.__path, editMode)]]"
@@ -433,6 +462,7 @@ export const htmlTemplate = html`
file.size_delta)]]
</span>
</div>
<!-- endpoint: change-view-file-list-content -->
<template is="dom-if" if="[[_showDynamicColumns]]">
<template
is="dom-repeat"
@@ -537,6 +567,7 @@ export const htmlTemplate = html`
-[[_patchChange.deleted]]
</span>
</div>
<!-- endpoint: change-view-file-list-summary -->
<template is="dom-if" if="[[_showDynamicColumns]]">
<template
is="dom-repeat"

77
polygerrit-ui/app/samples/extra-column-on-file-list.js Normal file
View File

@@ -0,0 +1,77 @@
/**
* @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.
*/
/**
* This plugin will an extra column to file list on change page to show
* the first character of the path.
*/
// Header of this extra column
class ColumnHeader extends Polymer.Element {
static get is() { return 'column-header'; }
static get template() {
return Polymer.html`
<style>
:host {
display: block;
padding-right: var(--spacing-m);
min-width: 5em;
}
</style>
<div>First Char</div>
`;
}
}
customElements.define(ColumnHeader.is, ColumnHeader);
// Content of this extra column
class ColumnContent extends Polymer.Element {
static get is() { return 'column-content'; }
static get properties() {
return {
path: String,
};
}
static get template() {
return Polymer.html`
<style>
:host {
display:block;
padding-right: var(--spacing-m);
min-width: 5em;
}
</style>
<div>[[getStatus(path)]]</div>
`;
}
getStatus(path) {
return path.charAt(0);
}
}
customElements.define(ColumnContent.is, ColumnContent);
Gerrit.install(plugin => {
plugin.registerDynamicCustomComponent(
'change-view-file-list-header-prepend', ColumnHeader.is);
plugin.registerDynamicCustomComponent(
'change-view-file-list-content-prepend', ColumnContent.is);
});

1
polygerrit-ui/server.go
View File

@@ -61,6 +61,7 @@ func main() {
dirListingMux := http.NewServeMux()
dirListingMux.Handle("/styles/", http.StripPrefix("/styles/", http.FileServer(http.Dir("app/styles"))))
dirListingMux.Handle("/samples/", http.StripPrefix("/samples/", http.FileServer(http.Dir("app/samples"))))
dirListingMux.Handle("/elements/", http.StripPrefix("/elements/", http.FileServer(http.Dir("app/elements"))))
dirListingMux.Handle("/behaviors/", http.StripPrefix("/behaviors/", http.FileServer(http.Dir("app/behaviors"))))