opendev/gerrit
Code Issues Proposed changes

Add rough component for viewing comment threads in the change view

Browse Source 
Future changes will enhance the aesthetics of this component and insert
it as a tab by the messages list

Bug: Issue 8241
Change-Id: Ia68519ba67aa0fa07d1687e731e1ed82e9979369
This commit is contained in:
Becky Siegel
2018-02-05 10:27:32 -08:00
parent e09bb035f3
commit a7b81d2de5
6 changed files with 280 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list.html Normal file
View File

@@ -0,0 +1,57 @@
<!--
Copyright (C) 2018 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.
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../core/gr-navigation/gr-navigation.html">
<link rel="import" href="../../diff/gr-diff-comment-thread/gr-diff-comment-thread.html">
<dom-module id="gr-thread-list">
<template>
<style include="shared-styles">
.draftsOnly gr-diff-comment-thread,
.unresolvedOnly gr-diff-comment-thread {
display: none
}
.draftsOnly:not(.unresolvedOnly) gr-diff-comment-thread[has-draft],
.unresolvedOnly:not(.draftsOnly) gr-diff-comment-thread[unresolved],
.draftsOnly.unresolvedOnly gr-diff-comment-thread[has-draft][unresolved] {
display: block
}
</style>
<div id="threads">
<div>
<paper-toggle-button
id="unresolvedToggle"
on-change="_toggleUnresolved"></paper-toggle-button>Only Unresolved threads
<paper-toggle-button
id="draftToggle"
on-change="_toggleDrafts"></paper-toggle-button>Only threads with drafts
</div>
<template is="dom-repeat" items="[[threads]]" as="thread">
<a href$="[[_getDiffUrlForComment(change, thread.path, thread.patchNum, thread.line)]]">[[thread.path]]</a>
<gr-diff-comment-thread
comments="[[thread.comments]]"
comment-side="[[thread.commentSide]]"
patch-num="[[thread.patchNum]]"
path="[[thread.path]]"></gr-diff-comment-thread>
</template>
</div>
</template>
<script src="gr-thread-list.js"></script>
</dom-module>

38
polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list.js Normal file
View File

@@ -0,0 +1,38 @@
// Copyright (C) 2018 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.
(function() {
'use strict';
Polymer({
is: 'gr-thread-list',
properties: {
change: Object,
threads: Array,
changeNum: String,
},
_toggleUnresolved() {
this.$.threads.classList.toggle('unresolvedOnly');
},
_toggleDrafts() {
this.$.threads.classList.toggle('draftsOnly');
},
_getDiffUrlForComment(change, path, patchNum, lineNum) {
return Gerrit.Nav.getUrlForDiff(change, path, patchNum, null, lineNum);
},
});
})();

180
polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_test.html Normal file
View File

@@ -0,0 +1,180 @@
<!DOCTYPE html>
<!--
Copyright (C) 2018 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.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>gr-thread-list</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="../../../test/common-test-setup.html"/>
<link rel="import" href="gr-thread-list.html">
<script>void(0);</script>
<test-fixture id="basic">
<template>
<gr-thread-list></gr-thread-list>
</template>
</test-fixture>
<script>
suite('gr-thread-list tests', () => {
let element;
let sandbox;
let threadsElements;
const computeVisibleNumber = threads => {
let count = 0;
for (const thread of threads) {
if (getComputedStyle(thread).display !== 'none') {
count++;
}
}
return count;
};
setup(() => {
sandbox = sinon.sandbox.create();
element = fixture('basic');
element.threads = [
{
comments: [
{
__path: '/COMMIT_MSG',
author: {
_account_id: 1000000,
name: 'user',
username: 'user',
},
patch_set: 4,
id: 'ecf0b9fa_fe1a5f62',
line: 5,
updated: '2018-02-08 18:49:18.000000000',
message: 'test',
unresolved: true,
},
{
id: '503008e2_0ab203ee',
path: '/COMMIT_MSG',
line: 5,
in_reply_to: 'ecf0b9fa_fe1a5f62',
updated: '2018-02-13 22:48:48.018000000',
message: 'draft',
unresolved: true,
__draft: true,
__draftID: '0.m683trwff68',
__editing: false,
patch_set: '2',
},
],
patchNum: 4,
path: '/COMMIT_MSG',
line: 5,
rootId: 'ecf0b9fa_fe1a5f62',
start_datetime: '2018-02-08 18:49:18.000000000',
},
{
comments: [
{
__path: 'test.txt',
author: {
_account_id: 1000000,
name: 'user',
username: 'user',
},
patch_set: 3,
id: '09a9fb0a_1484e6cf',
side: 'PARENT',
updated: '2018-02-13 22:47:19.000000000',
message: 'Some comment on another patchset.',
unresolved: false,
},
],
patchNum: 3,
path: 'test.txt',
rootId: '09a9fb0a_1484e6cf',
start_datetime: '2018-02-13 22:47:19.000000000',
commentSide: 'PARENT',
},
{
comments: [
{
__path: '/COMMIT_MSG',
author: {
_account_id: 1000000,
name: 'user',
username: 'user',
},
patch_set: 2,
id: '8caddf38_44770ec1',
line: 4,
updated: '2018-02-13 22:48:40.000000000',
message: 'Another unresolved comment',
unresolved: true,
},
],
patchNum: 2,
path: '/COMMIT_MSG',
line: 4,
rootId: '8caddf38_44770ec1',
start_datetime: '2018-02-13 22:48:40.000000000',
},
];
flushAsynchronousOperations();
threadsElements = Polymer.dom(element.root)
.querySelectorAll('gr-diff-comment-thread');
});
teardown(() => {
sandbox.restore();
});
test('there are three threads by default', () => {
assert.equal(computeVisibleNumber(threadsElements), 3);
});
test('toggle unresolved only shows unressolved comments', () => {
MockInteractions.tap(element.$.unresolvedToggle);
flushAsynchronousOperations();
assert.equal(computeVisibleNumber(threadsElements), 2);
});
test('toggle drafts only shows threads with draft comments', () => {
MockInteractions.tap(element.$.draftToggle);
flushAsynchronousOperations();
assert.equal(computeVisibleNumber(threadsElements), 1);
});
test('toggle drafts and unresolved only shows threads with drafts and ' +
'unresolved', () => {
MockInteractions.tap(element.$.draftToggle);
MockInteractions.tap(element.$.unresolvedToggle);
flushAsynchronousOperations();
assert.equal(computeVisibleNumber(threadsElements), 1);
});
test('_getDiffUrlForComment', () => {
sandbox.stub(Gerrit.Nav, 'getUrlForDiff');
const change = {_number: 123, project: 'demo-project'};
const path = '/path';
const patchNum = 2;
const lineNum = 5;
element._getDiffUrlForComment(change, path, patchNum, lineNum);
assert.isTrue(Gerrit.Nav.getUrlForDiff.lastCall.calledWithExactly(
change, path, patchNum, null, lineNum));
});
});
</script>

5
polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.html
View File

@@ -293,11 +293,12 @@ limitations under the License.
* @param {number=} opt_patchNum
* @param {number|string=} opt_basePatchNum The string 'PARENT' can be
* used for none.
* @param {number|string=} opt_lineNum
* @return {string}
*/
getUrlForDiff(change, path, opt_patchNum, opt_basePatchNum) {
getUrlForDiff(change, path, opt_patchNum, opt_basePatchNum, opt_lineNum) {
return this.getUrlForDiffById(change._number, change.project, path,
opt_patchNum, opt_basePatchNum);
opt_patchNum, opt_basePatchNum, opt_lineNum);
},
/**

1
polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.js
View File

@@ -130,6 +130,7 @@
if (this._orderedComments.length) {
this._lastComment = this._getLastComment();
this.unresolved = this._lastComment.unresolved;
this.hasDraft = this._lastComment.__draft;
}
},

1
polygerrit-ui/app/test/index.html
View File

@@ -80,6 +80,7 @@ limitations under the License.
'change/gr-reply-dialog/gr-reply-dialog-it_test.html',
'change/gr-reply-dialog/gr-reply-dialog_test.html',
'change/gr-reviewer-list/gr-reviewer-list_test.html',
'change/gr-thread-list/gr-thread-list_test.html',
'core/gr-account-dropdown/gr-account-dropdown_test.html',
'core/gr-error-manager/gr-error-manager_test.html',
'core/gr-main-header/gr-main-header_test.html',