Unverified Commit 9aeae994 authored by Dumitru Corini's avatar Dumitru Corini Committed by GitHub
Browse files

Feat (Bonita applications): Optimize list containers in the applications (#182)

* Feat (Admin case list): Change the look & feel of the lists

Covers [RUNTIME-837](https://bonitasoft.atlassian.net/browse/RUNTIME-837

)
Co-authored-by: default avatarVishalThapaliya <vishal.thapaliya@gmail.com>
Co-authored-by: default avatarcleoGitHub <survcleo@hotmail.fr>
parent d8360cef
......@@ -520,13 +520,11 @@
"dependencies": {
"boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
"bundled": true
},
"cheerio": {
"version": "1.0.0-rc.5",
"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.5.tgz",
"integrity": "sha512-yoqps/VCaZgN4pfXtenwHROTp8NG6/Hlt4Jpz2FEP0ZJQ+ZUkVDd0hAPDNKhj3nakpfPt/CNs57yEtxD1bXQiw==",
"bundled": true,
"requires": {
"cheerio-select-tmp": "^0.1.0",
"dom-serializer": "~1.2.0",
......@@ -539,8 +537,7 @@
},
"cheerio-select-tmp": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/cheerio-select-tmp/-/cheerio-select-tmp-0.1.1.tgz",
"integrity": "sha512-YYs5JvbpU19VYJyj+F7oYrIE2BOll1/hRU7rEy/5+v9BzkSo3bK81iAeeQEMI92vRIxz677m72UmJUiVwwgjfQ==",
"bundled": true,
"requires": {
"css-select": "^3.1.2",
"css-what": "^4.0.0",
......@@ -551,8 +548,7 @@
},
"css-select": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
"integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
"bundled": true,
"requires": {
"boolbase": "^1.0.0",
"css-what": "^4.0.0",
......@@ -563,13 +559,11 @@
},
"css-what": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
"integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A=="
"bundled": true
},
"dom-serializer": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
"integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
"bundled": true,
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.0.0",
......@@ -578,21 +572,18 @@
},
"domelementtype": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
"integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
"bundled": true
},
"domhandler": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
"integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
"bundled": true,
"requires": {
"domelementtype": "^2.1.0"
}
},
"domutils": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.0.tgz",
"integrity": "sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==",
"bundled": true,
"requires": {
"dom-serializer": "^1.0.1",
"domelementtype": "^2.0.1",
......@@ -601,13 +592,11 @@
},
"entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
"bundled": true
},
"htmlparser2": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.0.1.tgz",
"integrity": "sha512-GDKPd+vk4jvSuvCbyuzx/unmXkk090Azec7LovXP8as1Hn8q9p3hbjmDGbUqqhknw0ajwit6LiiWqfiTUPMK7w==",
"bundled": true,
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.0.0",
......@@ -617,21 +606,18 @@
},
"nth-check": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
"integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
"bundled": true,
"requires": {
"boolbase": "^1.0.0"
}
},
"parse5": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
"bundled": true
},
"parse5-htmlparser2-tree-adapter": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
"integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
"bundled": true,
"requires": {
"parse5": "^6.0.1"
}
......
......@@ -45,10 +45,15 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
/* Custom css */
.pl-0,
.pl-0.component {
padding-left: 0;
}
.pl-10 {
padding-left: 10px;
}
.pr-0.component {
padding-right: 0;
}
......@@ -98,7 +103,7 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
border-bottom: 1px solid lightgray;
overflow: hidden;
transition: 0.3s;
padding-top: 0.5rem;
padding: 0;
}
.process-variable-item p {
......@@ -155,7 +160,56 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
text-overflow: unset;
max-height: 100%;
white-space: inherit;
}
.tab-content .tab-pane .row:nth-child(1),
.tab-content .tab-pane .row:nth-child(1)>div,
.item-label-container > .row{
display: contents;
}
.tab-content .tab-pane > div > div > div > .row:nth-child(1) {
display: block;
position: sticky;
z-index: 2;
top: -15px;
}
.item-label-container {
position: sticky;
margin-top: 15px;
top: 2px;
padding-top: 10px;
font-size: 13px;
word-wrap: break-word;
word-break: break-word;
font-weight: bold;
z-index: 2;
border-radius: 5px;
margin-left: -15px;
width: calc(100% + 3rem);
}
.action-button-container button {
padding-top: 0;
padding-bottom: 0;
}
/* For mobile view only */
.mobile-action-buttons-container {
position: absolute;
top: 0;
right: 0;
width: 15%;
height: 100%;
}
.mobile-action-buttons-container .row {
height: 100%;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
flex-direction: column;
}
/* Spinner */
......
......@@ -311,7 +311,10 @@ then("The add comment button is {string}", (buttonState) => {
});
then("{string} is shown at the end of the comments", (text) => {
cy.get('h5').contains(text).should('be.visible');
cy.get('h5').contains(text)
.should('exist')
.scrollIntoView()
.should('be.visible');
});
then("There is no {string}", (text) => {
......@@ -339,55 +342,45 @@ then("The task list link is not visible", () => {
});
then("The process variables have the correct information", () => {
cy.contains('.item-label-container p', 'Name').should('be.visible');
cy.contains('.item-label-container p', 'Type').should('be.visible');
cy.contains('.item-label-container p', 'Value').should('be.visible');
cy.contains('.item-label-container p', 'Edit').should('be.visible');
// Check that the element exist.
cy.get('.process-variable-item').eq(0).within(() => {
cy.get('.item-label').eq(0).contains('Name');
cy.get('.item-value').eq(0).contains('description');
cy.get('.item-label').eq(1).contains('Type');
cy.get('.item-value').eq(1).contains('java.lang.String');
cy.get('.item-label').eq(2).contains('Value');
cy.get('.item-value').eq(2).contains('Description about the leave request.');
cy.get('button').should('be.enabled');
cy.get('.glyphicon-pencil').should('have.attr', 'title', 'Edit description');
});
cy.get('.process-variable-item').eq(1).within(() => {
cy.get('.item-label').eq(0).contains('Name');
cy.get('.item-value').eq(0).contains('isUrgentRequest');
cy.get('.item-label').eq(1).contains('Type');
cy.get('.item-value').eq(1).contains('java.lang.Boolean');
cy.get('.item-label').eq(2).contains('Value');
cy.get('.item-value').eq(2).contains('false');
cy.get('button').should('be.enabled');
cy.get('.glyphicon-pencil').should('have.attr', 'title', 'Edit isUrgentRequest');
});
cy.get('.process-variable-item').eq(2).within(() => {
cy.get('.item-label').eq(1).contains('Type');
cy.get('.item-value').eq(1).contains('java.util.Collection');
cy.get('.item-label').eq(2).contains('Value');
cy.get('.item-value').eq(2).contains('[Multiple description, about the leave request.]');
cy.get('button').should('be.disabled');
cy.get('.glyphicon-pencil').should('have.attr', 'title', 'java.util.Collection variables cannot be edited at runtime.');
});
cy.get('.process-variable-item').eq(3).within(() => {
cy.get('.item-label').eq(1).contains('Type');
cy.get('.item-value').eq(1).contains('java.lang.Integer');
cy.get('.item-label').eq(2).contains('Value');
cy.get('.item-value').eq(2).contains('55');
cy.get('button').should('be.enabled');
cy.get('.glyphicon-pencil').should('have.attr', 'title', 'Edit numberOfDays');
});
cy.get('.process-variable-item').eq(4).within(() => {
cy.get('.item-label').eq(1).contains('Type');
cy.get('.item-value').eq(1).contains('java.lang.Double');
cy.get('.item-label').eq(2).contains('Value');
cy.get('.item-value').eq(2).contains('0.0');
cy.get('button').should('be.enabled');
cy.get('.glyphicon-pencil').should('have.attr', 'title', 'Edit ticketFare');
});
cy.get('.process-variable-item').eq(5).within(() => {
cy.get('.item-label').eq(1).contains('Type');
cy.get('.item-value').eq(1).contains('java.lang.Long');
cy.get('.item-label').eq(2).contains('Value');
cy.get('.item-value').eq(2).contains('123456789');
cy.get('button').should('be.enabled');
cy.get('.glyphicon-pencil').should('have.attr', 'title', 'Edit timeStamp');
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -16,14 +16,14 @@ h1 {
/* Set a red border to invalid input fields in forms */
input[type='text'].ng-invalid.ng-dirty, input[type='email'].ng-invalid.ng-dirty,
input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-dirty {
border-color: #C00;
border-width: 1px;
border-color: #C00;
border-width: 1px;
}
/* Add a red star after required inputs */
.control-label--required:after {
content: " *";
color: #C00;
content: " *";
color: #C00;
}
.btn-invalid {
border-color: #C00;
......@@ -56,7 +56,7 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
margin-left: 10px;
}
.isDisabled {
.isDisabled {
cursor: not-allowed;
opacity: 0.5;
}
......@@ -80,20 +80,41 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
margin-right: 0;
}
.p-0 {
.p-0,
.p-0 a,
.p-0 button {
padding: 0;
}
.pl-0 {
padding-left: 0;
}
.pr-0 {
padding-right: 0;
}
.pr-5.component {
padding-right: 5px;
}
.pt-5.component {
padding-top: 5px;
}
.pl-15 p {
padding-left: 15px;
}
.pl-50 {
padding-left: 50px;
}
.case-item {
border-bottom: 1px solid lightgray;
/*box-shadow: 0 1px 2px 0;*/
overflow: hidden;
transition: 0.3s;
padding-top: 0.5rem;
padding-top: 1rem;
}
.case-item p {
......@@ -105,6 +126,12 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
margin-top: 0px;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
.item-label {
font-size: 11px;
opacity: 0.6;
......@@ -112,20 +139,22 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
padding-right: 0;
word-wrap: break-word;
word-break: break-word;
font-weight: bold;
}
.item-value {
font-size: 12px;
font-size: 14px;
margin: 0 0 3px 0;
padding-right: 0;
word-wrap: break-word;
word-break: break-word;
padding: 0;
}
.caseID .btn {
display: inline;
padding: 0;
font-size: 12px;
font-size: 14px;
text-align: left;
text-decoration: none;
cursor: pointer;
......@@ -152,6 +181,10 @@ h3 .glyphicon-info-sign {
opacity: 0.6;
}
.text-center p {
text-align: center;
}
.dropdown-menu {
position: absolute;
top: 35px;
......@@ -199,4 +232,70 @@ h3 .glyphicon-info-sign {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.tab-content .tab-pane .row:nth-child(2),
.tab-content .tab-pane .row:nth-child(2)>div,
.item-label-container > .row{
display: contents;
}
.tab-content .tab-pane > div > div > div > .row:nth-child(2) {
display: block;
position: sticky;
z-index: 2;
top: -15px;
}
.item-label-container {
position: sticky;
margin-top: 15px;
top: 2px;
padding-top: 10px;
font-size: 13px;
word-wrap: break-word;
word-break: break-word;
font-weight: bold;
z-index: 2;
border-radius: 5px;
margin-left: -15px;
width: calc(100% + 3rem);
}
/* For mobile view only */
.mobile-action-buttons-container {
position: absolute;
top: 0;
right: 0;
width: 15%;
height: 100%;
}
.mobile-action-buttons-container .row {
height: 100%;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
flex-direction: column;
}
@media screen and (max-width: 767px) {
.action-button-container {
margin-top: 15px;
}
.action-button-container i {
padding: 12px;
border-radius: 50%;
line-height: 1rem;
font-size: 1rem;
}
}
@media screen and (min-width: 768px) {
.action-button-container a,
.action-button-container button {
background-opacity: 1;
}
}
\ No newline at end of file
......@@ -239,24 +239,26 @@ then("I see an archived case list page", () => {
then("The archived case list have the correct information", () => {
cy.wait('@archivedCases5Route');
cy.contains('.item-label-container p', 'Case ID (original)')
cy.contains('.item-label-container p', 'Process name (version)')
cy.contains('.item-label-container p', 'Started by')
cy.contains('.item-label-container p', 'Start date')
cy.contains('.item-label-container p', 'End date')
cy.contains('.item-label-container p', 'State')
cy.contains('.item-label-container p', 'Pending flow nodes').should('not.exist');
cy.contains('.item-label-container p', 'Failed flow nodes').should('not.exist');
cy.get('.case-item:visible').eq(0).within(() => {
// Check that the element exist.
cy.get('.item-label').contains('Case ID (original)');
cy.get('.item-value').contains('2042');
cy.get('.item-label').contains('Process name (version)');
cy.get('.item-value').contains('Process 1 (1.0)');
cy.get('.item-value').contains('Process display name 1');
cy.get('.item-label').contains('Started by');
cy.get('.item-value').contains('Walter Bates');
cy.get('.item-label').contains('Start date');
cy.get('.item-value').contains('2/5/21 2:12 PM');
cy.get('.item-label').contains('End date');
cy.get('.item-value').contains('2/5/21 4:00 PM');
cy.get('.item-label').contains('State');
cy.get('.item-value').contains('completed');
cy.get('.item-label').contains('Pending flow nodes').should('not.exist');
cy.get('.item-label').contains('Failed flow nodes').should('not.exist');
cy.get('.glyphicon-option-horizontal').should('have.attr', 'title', 'View case details');
cy.get('.glyphicon-picture').should('have.attr', 'title', 'View diagram');
cy.get('.glyphicon-eye-open').should('have.attr', 'title', 'View case details');
cy.get('.glyphicon-trash').should('have.attr', 'title', 'Delete case');
});
cy.get('.text-primary.item-label:visible').contains('Cases shown: 5 of 5');
});
......
......@@ -283,21 +283,23 @@ when("I clear the process name filter", () => {
then("The open case list have the correct information", () => {
cy.wait('@openCases5Route');
cy.contains('.item-label-container p', 'Case ID').should('be.visible');
cy.contains('.item-label-container p', 'Process name (version)').should('be.visible');
cy.contains('.item-label-container p', 'Started by').should('be.visible');
cy.contains('.item-label-container p', 'Start date').should('be.visible');
cy.contains('.item-label-container p', 'End date').should("not.exist");
cy.contains('.item-label-container p', 'Failed flow nodes').should('be.visible');
cy.get('.item-label-container i.glyphicon-info-sign').should('have.attr', 'title', 'Aggregates tasks in states ready, waiting, executing, completing, and initializing.');
cy.contains('.item-label-container p', 'Pending flow nodes').should('be.visible');
cy.contains('.item-label-container p', 'Actions').should('be.visible');
cy.get('.case-item:visible').eq(0).within(() => {
// Check that the element exist.
cy.get('.item-label').contains('Case ID');
cy.get('.item-value').contains('3001');
cy.get('.item-label').contains('Process name (version)');
cy.get('.item-value').contains('Process 1 (1.0)');
cy.get('.item-value').contains('Process display name 1');
cy.get('.item-label').contains('Started by');
cy.get('.item-value').contains('Walter Bates');
cy.get('.item-label').contains('Start date');
cy.get('.item-value').contains('2/8/21 10:41 AM');
cy.get('.item-label').contains('End date').should("not.exist");
cy.get('.item-label').contains('Pending flow nodes');
cy.get('.item-value').contains('16');
cy.get('.item-label').contains('Failed flow nodes');
cy.get('.item-value').contains('0');
cy.get('.item-label').contains('Key 1');
cy.get('.item-value').contains('Value 1');
......@@ -310,7 +312,7 @@ then("The open case list have the correct information", () => {
cy.get('.item-label').contains('Key 5');
cy.get('.item-value').contains('Value 5');
cy.get('.glyphicon-picture').should('have.attr', 'title', 'View diagram');
cy.get('.glyphicon-option-horizontal').should('have.attr', 'title', 'View case details');
cy.get('.glyphicon-eye-open').should('have.attr', 'title', 'View case details');
cy.get('.glyphicon-trash').should('have.attr', 'title', 'Delete case');
});
cy.get('.text-primary.item-label:visible').contains('Cases shown: 5 of 5');
......@@ -388,11 +390,11 @@ then("The go to case details button is enabled", () => {
});
then("The view case details button at top has correct href with {string}", (caseId) => {
cy.get('.btn-primary .glyphicon-option-horizontal').parent().should('have.attr', 'href', caseDetailsUrl + caseId);
cy.get('.btn-primary .glyphicon-eye-open').parent().should('have.attr', 'href', caseDetailsUrl + caseId);
});
then("The view case details button in the list has correct href with {string}", (caseId) => {
cy.get('.btn-link .glyphicon-option-horizontal').eq(0).parent().should('have.attr', 'href', caseDetailsUrl + caseId);
cy.get('.btn-link .glyphicon-eye-open').eq(0).parent().should('have.attr', 'href', caseDetailsUrl + caseId);
});
then("The delete open case modal is open and has a default state for {string}", (state) => {
......
......@@ -108,6 +108,7 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
white-space: nowrap;
}
.pt-5,
.pt-5.component {
padding-top: 5px;
}
......@@ -137,6 +138,58 @@ input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-d
text-align: left;
}
.main-container .row:nth-child(3),
.main-container .row:nth-child(3)>div,
.item-label-container > .row
{
display: contents;
}
.main-container > .row:nth-child(3){
display: block;
position: sticky;
z-index: 2;