WF- disable composition field archive&certified

Issue-ID: SDC-2013
Change-Id: I3f6cc3d1f5ccd09766ee7d6e7c68cae6b1abd216
Signed-off-by: Yarin Dekel <yarind@amdocs.com>

4 files changed, 41 insertions, 13 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
index f4421770..a0f16662 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
@@ -4,14 +4,23 @@
 
 	.bpmn-container {
 		flex-basis: 100%;
-		flex-grow: 1
+		flex-grow: 1;
+		.djs-palette.open {
+			border: none;
+		}
+		.djs-palette-entries {
+			border: solid 1px $light-gray;
+			&:empty {
+				border: none;
+			}
+		}
 	}
 	.bpmn-sidebar {
 		background-color: $light-silver;
 		height: 100%;
 		width: 320px;
-		height: 100%;		
-		label {			
+
+		label {
 			@include body-1;
 		}
 		.group-label {
@@ -23,6 +32,15 @@
 			max-height: 888px;
 			overflow-y: auto;
 			&, .bpp-properties-panel {
+				[disabled], [editable-readonly=false] {
+					background-color: $light-gray;
+					color: $dark-gray;
+                    pointer-events: none;
+				}
+				label[for] {
+					cursor: default;
+					background: transparent;
+				}
 				background-color: $light-silver;
 				#camunda-activitySelect-select {
 					&.invalid {
@@ -32,6 +50,14 @@
 				}
 			}
 		}
+		[editable-readonly] {
+			font-family: OpenSans-Regular, Arial, sans-serif;
+			font-style: normal;
+			font-weight: 400;
+			font-size: 14px;
+			box-sizing: border-box;
+		}
+
 		.composition-buttons {
 			position: fixed;
 			background-color: $light-silver;
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
index 649d6574..529627d5 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
@@ -51,10 +51,11 @@ function disablePanelInputs(status) {
         setStatusToElement('button', status, panel);
         setStatusToElement('select', status, panel);
 
+        //distinguish editable and clickable fields using attr and style
         CAMUNDA_PANEL_INPUTS_NAMES.map(name => {
             const div = document.getElementById(name);
             if (div) {
-                div.setAttribute('contenteditable', !status);
+                div.setAttribute('editable-readonly', !status);
             }
         });
     }
@@ -73,8 +74,8 @@ class CompositionView extends Component {
         isReadOnly: PropTypes.bool
     };
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this.generatedId = 'bpmn-container' + Date.now();
         this.fileInput = React.createRef();
         this.bpmnContainer = React.createRef();
@@ -148,7 +149,10 @@ class CompositionView extends Component {
         this.setDiagramToBPMN(composition ? composition : newDiagramXML);
         this.modeler.on('element.out', () => this.exportDiagramToStore());
         this.modeler.on('element.click', this.handleCompositionStatus);
-        this.bpmnContainer.current.click();
+        this.modeler.on(
+            'propertiesPanel.changed',
+            this.handleCompositionStatus
+        );
         this.modeling = this.modeler.get('modeling');
         this.modeler.get('readOnly').readOnly(isReadOnly);
     }
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js
index 7aaa656e..69c7fb86 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js
@@ -28,8 +28,10 @@ export const PROCESS_DEFAULT_ID = 'Process_1';
 export const COMPOSITION_ERROR_COLOR = '#f0c2c2';
 export const COMPOSITION_VALID_COLOR = 'white';
 
+//list of field ids (contenteditable) that has separate treatment
 export const CAMUNDA_PANEL_INPUTS_NAMES = [
     'camunda-parameterType-text',
     'camunda-documentation',
-    'camunda-name'
+    'camunda-name',
+    'camunda-listener-field-value'
 ];
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/readOnly.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/readOnly.js
index 828244b6..f1da7dcf 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/readOnly.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/readOnly.js
@@ -99,12 +99,8 @@ function ReadOnly(
     intercept(paletteProvider, 'getPaletteEntries', function(fn, args) {
         var entries = fn.apply(this, args);
         if (self._readOnly) {
-            let allowedEntries = ['hand-tool'];
-
             forEach(entries, function(value, key) {
-                if (allowedEntries.indexOf(key) === -1) {
-                    delete entries[key];
-                }
+                delete entries[key];
             });
         }
         return entries;