Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard shortcuts for 'Accept/Revert url/test' buttons #360

Merged
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ All notable changes to AET will be documented in this file.
- [PR-338](https://github.com/Cognifide/aet/pull/338) Enable creating new dbs by default
- [PR-345](https://github.com/Cognifide/aet/pull/345) Deprecate AET maven plugin
- [PR-301](https://github.com/Cognifide/aet/pull/301) New versions of virtualization tools used with new AET cookbook
- [PR-360](https://github.com/Cognifide/aet/pull/360) Keyboard shortcuts for 'Accept/Revert url/test' buttons ([#317](https://github.com/Cognifide/aet/issues/317))

## Version 2.1.6

Expand Down
5 changes: 4 additions & 1 deletion documentation/src/main/wiki/SuiteReportFeatures.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,7 @@ Blue version means that it is a rebased version of previous suite - this is also
* press **e** to expand/collapse all error items
* use **[** / **]** to navigate between test's urls
* press **m** to show/hide layout mask (when available)
* press **←** / **→** to navigate between url's tabs
* press **←** / **→** to navigate between url's tabs
* press **a** for accepting suite/test/url
* press **r** for reverting suite/test/url
* **shift** modifier that will define that the specific opened test case should be accepted/reverted (shift + A - accepts opened test case ; shift + R - reverts opened test case )
Original file line number Diff line number Diff line change
Expand Up @@ -3410,6 +3410,9 @@ It is possible to search tests and URLs by the query. Searched fields are the UR
* use **[** / **]** to navigate between test's urls
* press **m** to show/hide layout mask (when available)
* press **←** / **→** to navigate between url's tabs
* press **a** for accepting suite/test/url
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update only SuiteReportFeatures.md. I think that it isn't a good idea to update historical documentation ;)

* press **r** for reverting suite/test/url
* **shift** modifier that will define that the specific opened test case should be accepted/reverted (shift + A - accepts opened test case ; shift + R - reverts opened test case )

# How It Works
AET is distributed system that consists of modules deployed on
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3565,6 +3565,9 @@ It is possible to search tests and URLs by the query. Searched fields are the UR
* use **[** / **]** to navigate between test's urls
* press **m** to show/hide layout mask (when available)
* press **←** / **→** to navigate between url's tabs
* press **a** for accepting suite/test/url
* press **r** for reverting suite/test/url
* **shift** modifier that will define that the specific opened test case should be accepted/reverted (shift + A - accepts opened test case ; shift + R - reverts opened test case )

# How It Works
AET is a distributed system that consists of a set of modules deployed on
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4061,6 +4061,9 @@ It is possible to search tests and URLs by the query. Searched fields are the UR
* use **[** / **]** to navigate between test's urls
* press **m** to show/hide layout mask (when available)
* press **←** / **→** to navigate between url's tabs
* press **a** for accepting suite/test/url
* press **r** for reverting suite/test/url
* **shift** modifier that will define that the specific opened test case should be accepted/reverted (shift + A - accepts opened test case ; shift + R - reverts opened test case )

# How It Works
AET is a distributed system that consists of a set of modules deployed on
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
code 81 - q
code 219 - [
code 221 - ]
code 65 - a
code 82 - r
*/

var shortcuts = {
Expand All @@ -60,14 +62,16 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
},
'221': function () {
scope.traverseTree('down');
}
},
'65': accept,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!
What do you think, maybe we could remember ASCII codes in variables instead of add comment?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually we don't need to use ASCII codes at all and we can use event.key property instead of event.keyCode which is returning single character that identify keyboard buttons. I added new shortcuts using existing convention. If it is necessarily I can quick refactor it.

'82': revert
};

$(document).on('keydown', function (e) {
if ($('body').hasClass('modal-open')) {
if ($('body').hasClass('modal-open') || $(e.target).hasClass('search-input')) {
return true;
} else if (shortcuts[e.keyCode]) {
shortcuts[e.keyCode]();
shortcuts[e.keyCode](e);
}
});

Expand All @@ -86,6 +90,20 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
}
};

function clickButton(buttonClass, event) {
var $tab = (event.shiftKey) ? $('.tab-content-toolbar') : $('.toolbar-bottom');
var $btns = $tab.find('.toolbar-btns');
$btns.find(buttonClass).click();
}

function accept(event) {
clickButton('.button-blue', event);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure that this is correct assumption, that element with class button-blue should be clicked on the accept event (the same for the button-red). More buttons also have those classes, e.g.:
2018-09-20_09h46_37

Maybe buttons for accepting/reverting should have their own identifiers?

Copy link
Author

@sp2mbn sp2mbn Sep 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assumption is that only buttons inside toolbar-bottom or tab-content-toolbar will be clicked (function clickButton is looking for those classes first and then looking in their child nodes proper buttons for click). "Save all changes" button is inside sidepanel so it will not be clicked.

}

function revert(event) {
clickButton('.button-red', event);
}

function goToTab(direction) {
var $tabs = $('.test-tabs'),
$active = $tabs.find('.active');
Expand Down Expand Up @@ -251,7 +269,7 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
var $nextTestTabs = $('.nav-tabs').children();
$nextTestTabs.each(function() {
if($(this).text().replace(/\s/g, '') === currentTabLabel) {
$(this).find('a').click();
$(this).find('a').click();
currentTabLabel = null;
}
});
Expand All @@ -260,15 +278,15 @@ define(['angularAMD', 'userSettingsService'], function (angularAMD) {
//MutationObserver fires a callback every time something changes on the page
//and here it's used to click a tab before the page is actually rendered to get rid of flickering effect
var mutationObserver = new MutationObserver(callback);

function callback(mutList) {
function findElement(element) {
if($(element.target).hasClass('nav-tabs')) {
clickOnTab();
return true;
}
}
mutList.find(findElement);
mutList.find(findElement);
}

mutationObserver.observe(document, {
Expand Down
3 changes: 3 additions & 0 deletions report/src/main/webapp/report.html
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ <h4 class="modal-title">Handful keyboard shortcuts</h4>
available)
</li>
<li>press <span class="label label-info">← / →</span> to navigate between url's tabs</li>
<li>press <span class="label label-info">a</span> for accepting suite/test/url</li>
<li>press <span class="label label-info">r</span> for reverting suite/test/url</li>
<li><span class="label label-info">shift</span> modifier that will define that the specific opened test case should be accepted/reverted (shift + A - accepts opened test case ; shift + R - reverts opened test case)</li>
</ul>
</div>
</div>
Expand Down