[ADF-3369] Add toggle for showHeaderContent property (#3603)

* Add toggle for showHeaderContent property

* Add tests for showHeaderContent property

demo-shell/resources/i18n/en.json

@@ -171,7 +171,8 @@
     "START-TASK": "Start task",
     "START-PROCESS": "Start process",
     "PROCESS-AUDIT-LOG": "Process Audit log",
-    "TASK-AUDIT-LOG": "Task Audit log"
+    "TASK-AUDIT-LOG": "Task Audit log",
+    "TASK-SHOW-HEADER": "Show details header"
   },
   "FORM-LIST": {
     "STORE": "Store",

e2e/pages/adf/core/toggleState.js

@@ -0,0 +1,51 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+
+var Util = require('../../../util/util');
+
+var ToggleState = function () {
+
+    var toggleButton = by.xpath("ancestor::mat-slide-toggle");
+
+    this.enableToggle = function (toggle) {
+        Util.waitUntilElementIsVisible(toggle);
+        Util.waitUntilElementIsPresent(toggle);
+        var finalToggleButton = toggle.element(toggleButton);
+        finalToggleButton.getAttribute('class').then(function (value) {
+            if (value.indexOf('mat-checked')===-1) {
+                finalToggleButton.click();
+            }
+        });
+        return this;
+    };
+
+    this.disableToggle = function (toggle) {
+        Util.waitUntilElementIsVisible(toggle);
+        var finalToggleButton = toggle.element(toggleButton);
+        finalToggleButton.getAttribute('class').then(function (value) {
+            if (value.indexOf('mat-checked')!==-1) {
+                finalToggleButton.click();
+            }
+        });
+        return this;
+    };
+
+};
+module.exports = ToggleState;
+
+
+

e2e/pages/adf/dialog/uploadToggles.js

@@ -16,9 +16,12 @@
  */
 
 var Util = require('../../../util/util');
+var ToggleState = require('../core/toggleState');
 
 var UploadToggles = function () {
 
+    var toggleState = new ToggleState();
+
     var toggleButton = by.xpath("ancestor::mat-slide-toggle");
     var multipleFileUploadToggle = element(by.cssContainingText("span[class*='toggle-content']", "Multiple File Upload"));
     var uploadFolderToggle = element(by.cssContainingText("span[class*='toggle-content']", "Folder upload"));
@@ -30,52 +33,52 @@ var UploadToggles = function () {
     var disableUploadCheckbox = element(by.css("[id='adf-disable-upload']"));
 
     this.enableMultipleFileUpload = function () {
-        this.enableToggle(multipleFileUploadToggle);
+        toggleState.enableToggle(multipleFileUploadToggle);
         return this;
     };
 
     this.disableMultipleFileUpload = function () {
-        this.disableToggle(multipleFileUploadToggle);
+        toggleState.disableToggle(multipleFileUploadToggle);
         return this;
     };
 
     this.enableFolderUpload = function () {
-        this.enableToggle(uploadFolderToggle);
+        toggleState.enableToggle(uploadFolderToggle);
         return this;
     };
 
     this.disableFolderUpload = function () {
-        this.disableToggle(uploadFolderToggle);
+        toggleState.disableToggle(uploadFolderToggle);
         return this;
     };
 
     this.enableExtensionFilter = function () {
-        this.enableToggle(extensionFilterToggle);
+        toggleState.enableToggle(extensionFilterToggle);
         return this;
     };
 
     this.disableExtensionFilter = function () {
-        this.disableToggle(extensionFilterToggle);
+        toggleState.disableToggle(extensionFilterToggle);
         return this;
     };
 
     this.enableMaxSize = function () {
-        this.enableToggle(maxSizeToggle);
+        toggleState.enableToggle(maxSizeToggle);
         return this;
     };
 
     this.disableMaxSize = function () {
-        this.disableToggle(maxSizeToggle);
+        toggleState.disableToggle(maxSizeToggle);
         return this;
     };
 
     this.enableVersioning = function () {
-        this.enableToggle(versioningToggle);
+        toggleState.enableToggle(versioningToggle);
         return this;
     };
 
     this.disableVersioning = function () {
-        this.disableToggle(versioningToggle);
+        toggleState.disableToggle(versioningToggle);
         return this;
     };
 
@@ -83,29 +86,6 @@ var UploadToggles = function () {
         return disableUploadCheckbox.click();
     };
 
-    this.enableToggle = function (toggle) {
-        Util.waitUntilElementIsVisible(toggle);
-        Util.waitUntilElementIsPresent(toggle);
-        var finalToggleButton = toggle.element(toggleButton);
-        finalToggleButton.getAttribute('class').then(function (value) {
-            if (value.indexOf('mat-checked')===-1) {
-                finalToggleButton.click();
-            }
-        });
-        return this;
-    };
-
-    this.disableToggle = function (toggle) {
-        Util.waitUntilElementIsVisible(toggle);
-        var finalToggleButton = toggle.element(toggleButton);
-        finalToggleButton.getAttribute('class').then(function (value) {
-            if (value.indexOf('mat-checked')!==-1) {
-                finalToggleButton.click();
-            }
-        });
-        return this;
-    };
-
     this.addExtension = function (extension) {
         Util.waitUntilElementIsVisible(extensionAcceptedField);
         extensionAcceptedField.sendKeys("," + extension);

e2e/pages/adf/process_services/dialog/taskDetailsToggles.js

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+
+var ToggleState = require('../../core/toggleState');
+
+var TaskDetailsToggles = function () {
+
+    var toggleState = new ToggleState();
+    
+    var showDetailsHeaderToggle = element(by.id("showHeaderToggle-input"));
+
+    this.enableShowHeader = function () {
+        toggleState.enableToggle(showDetailsHeaderToggle);
+        return this;
+    };
+
+    this.disableShowHeader = function () {
+        toggleState.disableToggle(showDetailsHeaderToggle);
+        return this;
+    };
+
+};
+module.exports = TaskDetailsToggles;
+
+

e2e/pages/adf/process_services/taskDetailsPage.js

@@ -16,6 +16,7 @@
  */
 
 var Util = require('../../../util/util');
+var TaskDetailsToggles = require('./dialog/taskDetailsToggles');
 
 var TaskDetailsPage = function () {
 
@@ -36,6 +37,7 @@ var TaskDetailsPage = function () {
     var addPeopleField = element(by.css("input[data-automation-id='adf-people-search-input']"));
     var addInvolvedUserButton = element(by.css("button[id='add-people'] span"));
     var emailInvolvedUser = by.xpath("following-sibling::div[@class='people-email ng-star-inserted']");
+    var infoDrawer = element(by.css("adf-info-drawer"));
 
     this.getFormName = function () {
         Util.waitUntilElementIsVisible(formNameField);
@@ -167,6 +169,18 @@ var TaskDetailsPage = function () {
         return email.getText();
     };
 
+    this.usingTaskDetailsToggles = function () {
+        return new TaskDetailsToggles();
+    };
+
+    this.taskInfoDrawerIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(infoDrawer);
+    };
+
+    this.taskInfoDrawerIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotOnPage(infoDrawer);
+    };
+
 };
 
 module.exports = TaskDetailsPage;

e2e/start_task_custom_app.e2e.ts

@@ -50,6 +50,7 @@ describe('Start Task - Custom App', () => {
     let taskPage = new TasksPage();
     let firstComment = 'comm1', firstChecklist = 'checklist1';
     let tasks = ['Modifying task', 'Information box', 'No form', 'Not Created', 'Refreshing form', 'Assignee task', 'Attach File'];
+    let showHeaderTask = 'Show Header';
     let appModel;
     let jpgFile = new FileModel({
         'location': resources.Files.ADF_DOCUMENTS.JPG.file_location,
@@ -202,4 +203,17 @@ describe('Start Task - Custom App', () => {
                 attachmentListPage.checkFileIsAttached(jpgFile.name);
             });
     });
+
+    it('[C263945] Should Information box be hidden when showHeaderContent property is set on false on custom app', () => {
+        processServicesPage.goToProcessServices().goToApp(appModel.name).clickTasksButton();
+        taskPage.usingFiltersPage().goToFilter(CONSTANTS.TASKFILTERS.MY_TASKS);
+        taskPage.createNewTask().addName(showHeaderTask).clickStartButton();
+        taskPage.usingTasksListPage().checkTaskIsDisplayedInTasksList(showHeaderTask).selectTaskFromTasksList(showHeaderTask);
+
+        taskPage.usingTaskDetails().usingTaskDetailsToggles().disableShowHeader();
+        taskPage.usingTaskDetails().taskInfoDrawerIsNotDisplayed();
+
+        taskPage.usingTaskDetails().usingTaskDetailsToggles().enableShowHeader();
+        taskPage.usingTaskDetails().taskInfoDrawerIsDisplayed();
+    });
 });

e2e/start_task_task_app.e2e.ts

@@ -53,6 +53,7 @@ describe('Start Task - Task App', () => {
     let formModel;
     let firstComment = 'comm1', firstChecklist = 'checklist1';
     let tasks = ['Modifying task', 'Information box', 'No form', 'Not Created', 'Refreshing form', 'Assignee task', 'Attach File'];
+    let showHeaderTask = 'Show Header';
     let jpgFile = new FileModel({
         'location': resources.Files.ADF_DOCUMENTS.JPG.file_location,
         'name': resources.Files.ADF_DOCUMENTS.JPG.file_name
@@ -82,6 +83,8 @@ describe('Start Task - Task App', () => {
 
         await this.alfrescoJsApi.activiti.appsApi.importAppDefinition(file);
 
+        await this.alfrescoJsApi.activiti.taskApi.createNewTask({name: showHeaderTask});
+
         loginPage.loginToProcessServicesUsingUserModel(processUserModel);
 
         done();
@@ -206,4 +209,16 @@ describe('Start Task - Task App', () => {
                 attachmentListPage.checkFileIsAttached(jpgFile.name);
             });
     });
+
+    it('[C260420] Should Information box be hidden when showHeaderContent property is set on false', () => {
+        processServicesPage.goToProcessServices().goToTaskApp().clickTasksButton();
+        taskPage.usingFiltersPage().goToFilter(CONSTANTS.TASKFILTERS.MY_TASKS);
+        taskPage.usingTasksListPage().checkTaskIsDisplayedInTasksList(showHeaderTask).selectTaskFromTasksList(showHeaderTask);
+
+        taskPage.usingTaskDetails().usingTaskDetailsToggles().disableShowHeader();
+        taskPage.usingTaskDetails().taskInfoDrawerIsNotDisplayed();
+
+        taskPage.usingTaskDetails().usingTaskDetailsToggles().enableShowHeader();
+        taskPage.usingTaskDetails().taskInfoDrawerIsDisplayed();
+    });
 });

lib/process-services/task-list/components/task-details.component.html

@@ -15,6 +15,15 @@
         </h2>
     </div>
 
+    <mat-slide-toggle
+        class="adf-task-details-toggle"
+        id="showHeaderToggle"
+        [color]="'primary'"
+        (change)="toggleHeaderContent()"
+        [checked]="showHeaderContent">
+        {{ 'PS-TAB.TASK-SHOW-HEADER'| translate }}
+    </mat-slide-toggle>
+
     <div class="adf-task-details-core"
         fxLayout="column"
         fxLayoutGap="8px"

lib/process-services/task-list/components/task-details.component.scss

@@ -52,6 +52,10 @@ adf-task-header.assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property
         }
     }
 
+    &-toggle {
+        position: relative;
+    }
+
     &-core {
         display: flex;
         justify-content: space-between;