opendev/gerrit
Code Issues Proposed changes

Revert "Revert "Provide in-dashboard help for creating changes""

Browse Source 
This reverts commit e5639b3e98.

Change-Id: I37e26ead38fef16534da952b09bcd0d4beb105aa
This commit is contained in:
Logan Hanks 2018-09-19 13:18:59 -07:00 committed by Kasper Nilsson
parent 79b545e4d0
commit 1d3dc2ae6f
13 changed files with 435 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
View File

@ -67,13 +67,18 @@ limitations under the License.
</td>
</tr>
</template>
<template is="dom-if" if="[[!changeSection.results.length]]">
<template is="dom-if" if="[[_isEmpty(changeSection)]]">
<tr class="noChanges">
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden></td>
<td class="cell"
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
<template is="dom-if" if="[[_isOutgoing(changeSection)]]">
<slot name="empty-outgoing"></slot>
</template>
<template is="dom-if" if="[[!_isOutgoing(changeSection)]]">
No changes
</template>
</td>
</tr>
</template>

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

@ -347,5 +347,13 @@
this.$.cursor.stops = this._getListItems();
this.$.cursor.moveToStart();
},
_isOutgoing(section) {
return !!section.isOutgoing;
},
_isEmpty(section) {
return !section.results.length;
},
});
})();

26
polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html
View File

@ -270,6 +270,32 @@ limitations under the License.
assert.equal(noChangesMsg.length, 2);
});
suite('empty outgoing', () => {
test('not shown on empty non-outgoing sections', () => {
const section = {results: []};
assert.isTrue(element._isEmpty(section));
assert.isFalse(element._isOutgoing(section));
});
test('shown on empty outgoing sections', () => {
const section = {results: [], isOutgoing: true};
assert.isTrue(element._isEmpty(section));
assert.isTrue(element._isOutgoing(section));
});
test('not shown on non-empty outgoing sections', () => {
const section = {isOutgoing: true, results: [
{_number: 0, labels: {Verified: {approved: {}}}}]};
assert.isFalse(element._isEmpty(section));
assert.isTrue(element._isOutgoing(section));
});
});
test('_isOutgoing', () => {
assert.isTrue(element._isOutgoing({results: [], isOutgoing: true}));
assert.isFalse(element._isOutgoing({results: []}));
});
suite('empty column preference', () => {
let element;

87
polygerrit-ui/app/elements/change-list/gr-create-commands-dialog/gr-create-commands-dialog.html Normal file
View File

@ -0,0 +1,87 @@
<!--
@license
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="../../shared/gr-dialog/gr-dialog.html">
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-shell-command/gr-shell-command.html">
<dom-module id="gr-create-commands-dialog">
<template>
<style include="shared-styles">
ol {
list-style: decimal;
margin-left: 1em;
}
p {
margin-bottom: .75em;
}
#commandsDialog {
max-width: 40em;
}
</style>
<gr-overlay id="commandsOverlay" with-backdrop>
<gr-dialog
id="commandsDialog"
confirm-label="Done"
cancel-label=""
confirm-on-enter
on-confirm="_handleClose">
<div class="header" slot="header">
Create change commands
</div>
<div class="main" slot="main">
<ol>
<li>
<p>
Make the changes to the files on your machine
</p>
</li>
<li>
<p>
If you are making a new commit use
</p>
<gr-shell-command command="[[_createNewCommitCommand]]"></gr-shell-command>
<p>
Or to amend an existing commit use
</p>
<gr-shell-command command="[[_amendExistingCommitCommand]]"></gr-shell-command>
<p>
Please make sure you add a commit message as it becomes the
description for your change.
</p>
</li>
<li>
<p>
Push the change for code review
</p>
<gr-shell-command command="[[_pushCommand]]"></gr-shell-command>
</li>
<li>
<p>
Close this dialog and you should be able to see your recently
created change in ``Outgoing changes'' section on
``Your changes'' page.
</p>
</li>
</ol>
</div>
</gr-dialog>
</gr-overlay>
</template>
<script src="gr-create-commands-dialog.js"></script>
</dom-module>

58
polygerrit-ui/app/elements/change-list/gr-create-commands-dialog/gr-create-commands-dialog.js Normal file
View File

@ -0,0 +1,58 @@
/**
* @license
* 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';
const Commands = {
CREATE: 'git commit',
AMEND: 'git commit --amend',
PUSH_PREFIX: 'git push origin HEAD:refs/for/',
};
Polymer({
is: 'gr-create-commands-dialog',
properties: {
branch: String,
_createNewCommitCommand: {
type: String,
readonly: true,
value: Commands.CREATE,
},
_amendExistingCommitCommand: {
type: String,
readonly: true,
value: Commands.AMEND,
},
_pushCommand: {
type: String,
computed: '_computePushCommand(branch)',
},
},
open() {
this.$.commandsOverlay.open();
},
_handleClose() {
this.$.commandsOverlay.close();
},
_computePushCommand(branch) {
return Commands.PUSH_PREFIX + branch;
},
});
})();

53
polygerrit-ui/app/elements/change-list/gr-create-commands-dialog/gr-create-commands-dialog_test.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<!--
@license
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-create-commands-dialog</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-create-commands-dialog.html">
<script>void(0);</script>
<test-fixture id="basic">
<template>
<gr-create-commands-dialog></gr-create-commands-dialog>
</template>
</test-fixture>
<script>
suite('gr-create-commands-dialog tests', () => {
let element;
setup(() => {
element = fixture('basic');
});
test('_computePushCommand', () => {
element.branch = 'master';
assert.equal(element._pushCommand,
'git push origin HEAD:refs/for/master');
element.branch = 'stable-2.15';
assert.equal(element._pushCommand,
'git push origin HEAD:refs/for/stable-2.15');
});
});
</script>

48
polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.html Normal file
View File

@ -0,0 +1,48 @@
<!--
@license
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="../../shared/gr-dialog/gr-dialog.html">
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-repo-branch-picker/gr-repo-branch-picker.html">
<dom-module id="gr-create-destination-dialog">
<template>
<style include="shared-styles">
</style>
<gr-overlay id="createOverlay" with-backdrop>
<gr-dialog
confirm-label="View commands"
on-confirm="_pickerConfirm"
on-cancel="_handleClose"
disabled="[[!_repoAndBranchSelected]]">
<div class="header" slot="header">
Create change
</div>
<div class="main" slot="main">
<gr-repo-branch-picker
repo="{{_repo}}"
branch="{{_branch}}"></gr-repo-branch-picker>
<p>
If you haven't done so, you will need to clone the repository.
</p>
</div>
</gr-dialog>
</gr-overlay>
</template>
<script src="gr-create-destination-dialog.js"></script>
</dom-module>

58
polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.js Normal file
View File

@ -0,0 +1,58 @@
/**
* @license
* 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';
/**
* Fired when a destination has been picked. Event details contain the repo
* name and the branch name.
*
* @event confirm
*/
Polymer({
is: 'gr-create-destination-dialog',
properties: {
_repo: String,
_branch: String,
_repoAndBranchSelected: {
type: Boolean,
value: false,
computed: '_computeRepoAndBranchSelected(_repo, _branch)',
},
},
open() {
this._repo = '';
this._branch = '';
this.$.createOverlay.open();
},
_handleClose() {
this.$.createOverlay.close();
},
_pickerConfirm() {
this.$.createOverlay.close();
const detail = {repo: this._repo, branch: this._branch};
this.dispatchEvent(new CustomEvent('confirm', {detail, bubbles: false}));
},
_computeRepoAndBranchSelected(repo, branch) {
return !!(repo && branch);
},
});
})();

60
polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
View File

@ -24,6 +24,8 @@ limitations under the License.
<link rel="import" href="../../shared/gr-dialog/gr-dialog.html">
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../gr-create-commands-dialog/gr-create-commands-dialog.html">
<link rel="import" href="../gr-create-destination-dialog/gr-create-destination-dialog.html">
<link rel="import" href="../gr-user-header/gr-user-header.html">
<dom-module id="gr-dashboard-view">
@ -59,10 +61,42 @@ limitations under the License.
.hide {
display: none;
}
#emptyOutgoing {
display: block;
}
#emptyOutgoing #graphic,
#emptyOutgoing #help {
display: inline-block;
margin: .5em;
}
#emptyOutgoing #graphic {
fill: var(--deemphasized-text-color);
max-width: 12em;
}
#emptyOutgoing #graphic svg {
display: block;
margin: 0 auto;
max-width: 100px;
}
#emptyOutgoing #graphic p {
text-align: center;
}
#emptyOutgoing #help {
vertical-align: top;
}
#emptyOutgoing #help h1 {
font-size: var(--font-size-large);
}
#emptyOutgoing #help p {
max-width: 35em;
}
@media only screen and (max-width: 50em) {
.loading {
padding: 0 var(--default-horizontal-margin);
}
#emptyOutgoing #graphic {
display: none;
}
}
</style>
<div class$="banner [[_computeBannerClass(_showDraftsBanner)]]">
@ -90,7 +124,27 @@ limitations under the License.
selected-index="{{viewState.selectedChangeIndex}}"
sections="[[_results]]"
on-toggle-star="_handleToggleStar"
on-toggle-reviewed="_handleToggleReviewed"></gr-change-list>
on-toggle-reviewed="_handleToggleReviewed">
<div id="emptyOutgoing" slot="empty-outgoing">
<div id="graphic">
<svg width="150" height="100">
<circle cx="50" cy="50" r="50"></circle>
</svg>
<p>
No outgoing changes yet
</p>
</div>
<div id="help">
<h1>Push your first changes for code review</h1>
<p>
Pushing a change for review is easy, but a little different from
other git code review tools. Click on the `Create Change' button
and follow the step by step instructions.
</p>
<gr-button on-tap="_createChangeTap">Create Change</gr-button>
</div>
</div>
</gr-change-list>
</div>
<gr-overlay id="confirmDeleteOverlay" with-backdrop>
<gr-dialog
@ -107,6 +161,10 @@ limitations under the License.
</div>
</gr-dialog>
</gr-overlay>
<gr-create-destination-dialog
id="destinationDialog"
on-confirm="_handleDestinationConfirm"></gr-create-destination-dialog>
<gr-create-commands-dialog id="commandsDialog"></gr-create-commands-dialog>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
<gr-reporting id="reporting"></gr-reporting>
</template>

10
polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
View File

@ -187,6 +187,7 @@
sectionName: res.sections[i].name,
query: res.sections[i].query,
results,
isOutgoing: res.sections[i].isOutgoing,
})).filter((section, i) => !res.sections[i].hideIfEmpty ||
section.results.length);
});
@ -248,5 +249,14 @@
_computeDraftsLink() {
return Gerrit.Nav.getUrlForSearchQuery('has:draft -is:open');
},
_createChangeTap() {
this.$.destinationDialog.open();
},
_handleDestinationConfirm(e) {
this.$.commandsDialog.branch = e.detail.branch;
this.$.commandsDialog.open();
},
});
})();

16
polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.html
View File

@ -283,6 +283,22 @@ limitations under the License.
});
});
test('preserve isOutgoing sections', () => {
const sections = [
{name: 'test1', query: 'test1', isOutgoing: true},
{name: 'test2', query: 'test2'},
];
getChangesStub.restore();
sandbox.stub(element.$.restAPI, 'getChanges')
.returns(Promise.resolve([[], []]));
return element._fetchDashboardChanges({sections}).then(() => {
assert.equal(element._results.length, 2);
assert.isTrue(element._results[0].isOutgoing);
assert.isNotOk(element._results[1].isOutgoing);
});
});
test('_computeUserHeaderClass', () => {
assert.equal(element._computeUserHeaderClass(undefined), '');
assert.equal(element._computeUserHeaderClass(''), '');

4
polygerrit-ui/app/styles/gr-change-list-styles.html
View File

@ -207,6 +207,10 @@ limitations under the License.
.size {
max-width: none;
}
.noChanges .cell {
display: block;
height: auto;
}
}
@media only screen and (min-width: 1450px) {
:host {

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

@ -56,6 +56,7 @@ limitations under the License.
'change-list/gr-change-list-item/gr-change-list-item_test.html',
'change-list/gr-change-list-view/gr-change-list-view_test.html',
'change-list/gr-change-list/gr-change-list_test.html',
'change-list/gr-create-commands-dialog/gr-create-commands-dialog_test.html',
'change-list/gr-dashboard-view/gr-dashboard-view_test.html',
'change-list/gr-user-header/gr-user-header_test.html',
'change/gr-account-entry/gr-account-entry_test.html',