From 816b4d38d53c3c7713cd841cd49b57685af5dad6 Mon Sep 17 00:00:00 2001
From: ck-c8y <christof.strack@cumulocity.com>
Date: Thu, 28 Nov 2024 20:20:41 +0100
Subject: [PATCH] fix bug in styling jsoneditor

---
 .../src/mapping-tree/tree.component.ts        | 21 ++++----
 .../src/mapping/shared/mapping.style.css      | 16 +-----
 .../snoop-explorer-modal.component.html       |  8 +--
 .../snoop-explorer-modal.component.ts         | 17 ++++--
 .../mapping-stepper.component.html            |  2 +-
 .../snooping-stepper.component.ts             |  2 +-
 .../shared/editor2/jsoneditor2.component.ts   | 52 ++++++++++---------
 .../src/shared/editor2/jsoneditor2.style.css  |  2 +-
 8 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/dynamic-mapping-ui/src/mapping-tree/tree.component.ts b/dynamic-mapping-ui/src/mapping-tree/tree.component.ts
index 94f12846..1ea3cabc 100644
--- a/dynamic-mapping-ui/src/mapping-tree/tree.component.ts
+++ b/dynamic-mapping-ui/src/mapping-tree/tree.component.ts
@@ -33,22 +33,21 @@ import { BehaviorSubject } from 'rxjs';
 export class MappingTreeComponent implements OnInit {
   constructor(
     private service: MappingTreeService,
-    private route: ActivatedRoute
-  ) {}
+    private route: ActivatedRoute,
+  ) { }
 
   @ViewChild('editorTree', { static: false }) editorTree: JsonEditor2Component;
   mappingTree$: BehaviorSubject<any> = new BehaviorSubject([]);
-  editorOptionsTree: any = {};
+  editorOptionsTree: any = {
+    mode: 'tree',
+    removeModes: ['text', 'table'],
+    mainMenuBar: true,
+    navigationBar: false,
+    statusBar: false,
+    readOnly: true,
+  };
 
   ngOnInit() {
-    this.editorOptionsTree = {
-      mode: 'tree',
-      mainMenuBar: true,
-      navigationBar: false,
-      statusBar: false,
-      readOnly: false,
-      name: 'root'
-    };
     this.mappingTree$.next(this.route.snapshot.data['mappingTree']);
   }
 
diff --git a/dynamic-mapping-ui/src/mapping/shared/mapping.style.css b/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
index e1ca37f7..1289e036 100644
--- a/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
+++ b/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
@@ -40,11 +40,6 @@ c8y-data-grid button[title='Reload'] {
   font-size: smaller !important;
 }
 
-json-editor > div {
-  max-height: 300px;
-  overflow: auto !important;
-}
-
 .column-left-border {
   border-left: 1px solid;
   border-color: var(--c8y-form-legend-color);
@@ -58,10 +53,6 @@ json-editor > div {
   /* border-color: var(--c8y-root-component-separator-color); */
 }
 
-.reduced-top {
-  top: -20px;
-}
-
 @keyframes background-color {
   from {
     background-color: var(--brand-light, var(--c8y-brand-light));
@@ -70,10 +61,7 @@ json-editor > div {
     background-color: white;
   }
 }
+
 .c8y-switch > button {
   display: none;
-}
-.not-p-b-24 {
-	padding-bottom: 6px;
-	padding-left: 0px;
-}
+}
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.html b/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.html
index 674f7ce0..8c316918 100644
--- a/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.html
+++ b/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.html
@@ -30,16 +30,12 @@ <h4>Explore snooped templates</h4>
 >
   <div class="p-b-24 p-l-24 p-r-24">
     <div class="form-group">
-      <!-- <label>Snooped templates</label> -->
       <div class="c8y-select-wrapper" style="width: 50%">
         <select
           class="form-control"
           (change)="onSelectSnoopedTemplate($event.target.value)"
           [attr.disabled]="isDisabled(mapping.snoopedTemplates?.length === 0)"
         >
-          <!-- <option [value]="-1" [disabled]="true">
-            Select snooped template
-          </option> -->
           <option
             [value]="i"
             *ngFor="
@@ -54,9 +50,9 @@ <h4>Explore snooped templates</h4>
       <div class="p-t-16">
         <label>Template</label>
         <d11r-mapping-json-editor2
-          [options]="editorOptions"
+          [options]="editorOptionsGeneral"
           [class]="'jse-main-small'"
-          [data]="template"
+          [data]="template" #editorGeneral
         ></d11r-mapping-json-editor2>
       </div>
     </div>
diff --git a/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.ts b/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.ts
index fa60de81..c1d708da 100644
--- a/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.ts
+++ b/dynamic-mapping-ui/src/mapping/snoop-explorer/snoop-explorer-modal.component.ts
@@ -19,10 +19,10 @@
  * @authors Christof Strack
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { AlertService, ModalLabels } from '@c8y/ngx-components';
 import { Subject } from 'rxjs';
-import { Mapping, MappingSubstitution } from '../../shared';
+import { JsonEditor2Component, Mapping, MappingSubstitution } from '../../shared';
 import { isDisabled } from '../shared/util';
 import { MappingEnriched } from '../../shared/model/shared.model';
 import { MappingService } from '../core/mapping.service';
@@ -31,7 +31,9 @@ import { HttpStatusCode } from '@angular/common/http';
 
 @Component({
   selector: 'd11r-snoop-explorer-modal',
-  templateUrl: './snoop-explorer-modal.component.html'
+  templateUrl: './snoop-explorer-modal.component.html',
+  styleUrls: ['../shared/mapping.style.css'],
+  encapsulation: ViewEncapsulation.None
 })
 export class SnoopExplorerComponent implements OnInit {
   constructor(
@@ -39,14 +41,19 @@ export class SnoopExplorerComponent implements OnInit {
     private alertService: AlertService
   ) { }
   @Input() enrichedMapping: MappingEnriched;
+
+  @ViewChild('editorGeneral', { static: false })
+  editorGeneral: JsonEditor2Component;
+  
   mapping: Mapping;
   closeSubject: Subject<MappingSubstitution> = new Subject();
   labels: ModalLabels;
   isDisabled = isDisabled;
   template: any;
-  editorOptions: any = {
+
+  editorOptionsGeneral = {
     mode: 'tree',
-    removeModes: ['text', 'tree', 'table'],
+    removeModes: ['text', 'table'],
     mainMenuBar: true,
     navigationBar: false,
     readOnly: true,
diff --git a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html
index 77d9215b..8d2a999f 100644
--- a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html
+++ b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html
@@ -162,7 +162,7 @@ <h4 class="text-medium">
                       </div>
                       <d11r-mapping-json-editor2 [schemaUpdate]="schemaUpdateTarget"
                         [options]="editorOptionsTargetTemplate" [class]="'jse-main-medium'"
-                        (initialized)="onEditorTargetInitialized()"  (contentChanged)="ontargetTemplateChanged($event)" [data]="targetTemplate" #editorTargetStepTemplate>
+                        (initialized)="onEditorTargetInitialized()"  (contentChanged)="ontargetTemplateChanged($event)" [data]="targetTemplate" #editorGeneral>
                       </d11r-mapping-json-editor2>
                     </div>
                   </div>
diff --git a/dynamic-mapping-ui/src/mapping/stepper-snooping/snooping-stepper.component.ts b/dynamic-mapping-ui/src/mapping/stepper-snooping/snooping-stepper.component.ts
index fd9c9fa7..dfbc3532 100644
--- a/dynamic-mapping-ui/src/mapping/stepper-snooping/snooping-stepper.component.ts
+++ b/dynamic-mapping-ui/src/mapping/stepper-snooping/snooping-stepper.component.ts
@@ -33,7 +33,7 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { Direction, Mapping, SAMPLE_TEMPLATES_C8Y, SharedService } from '../../shared';
 import { MappingService } from '../core/mapping.service';
-import { countDeviceIdentifiers, isDisabled } from '../shared/util';
+import { isDisabled } from '../shared/util';
 import { EditorMode } from '../shared/stepper-model';
 import { DeploymentMapEntry, StepperConfiguration } from '../../shared';
 import { SnoopStatus } from '../../shared/model/shared.model';
diff --git a/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.component.ts b/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.component.ts
index e6b6a6a6..cb7c2d7c 100644
--- a/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.component.ts
+++ b/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.component.ts
@@ -66,7 +66,7 @@ export class JsonEditor2Component implements OnInit, OnDestroy, AfterViewInit {
   set data(value: unknown) {
     if (value && Object.keys(value).length != 0 && this.initRan) {
       this.content = { json: value }
-      this.editor.update(this.content);
+      this.editor?.update(this.content);
       this.cdr.detectChanges();
     }
   }
@@ -87,11 +87,11 @@ export class JsonEditor2Component implements OnInit, OnDestroy, AfterViewInit {
 
   initRan: boolean = true;
 
-	constructor(
-		private cdr: ChangeDetectorRef
-	) {
+  constructor(
+    private cdr: ChangeDetectorRef
+  ) {
 
-	}
+  }
 
   private editor: JsonEditor;
   id = `angjsoneditor${Math.floor(Math.random() * 1000000)}`;
@@ -106,17 +106,17 @@ export class JsonEditor2Component implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-		if (changes) {
-			if (JSON.stringify(changes['options']?.currentValue) !== JSON.stringify(changes['options']?.previousValue)) {
-				this.updateProps();
-			}
-		}
-	}
+    if (changes) {
+      if (JSON.stringify(changes['options']?.currentValue) !== JSON.stringify(changes['options']?.previousValue)) {
+        this.updateProps();
+      }
+    }
+  }
 
   private updateProps() {
-		this.editor?.updateProps(this.options);
-		this.cdr.detectChanges();
-	}
+    this.editor?.updateProps(this.options);
+    this.cdr.detectChanges();
+  }
 
   ngAfterViewInit() {
     this.initalizeEditor();
@@ -232,19 +232,21 @@ export class JsonEditor2Component implements OnInit, OnDestroy, AfterViewInit {
   }
 
   async setSelectionToPath(pathString: string) {
-    const path = parseJSONPath(pathString);
-    // console.log('Set selection to path:', pathString, path);
-    const selection: any = createMultiSelection(path, path);
-    // const selection: any = createKeySelection(path, false);
-    // marker to ignore emitting change events when the path was set programmatically
-    selection.triggeredSelection = false;
+    if (pathString) {
+      const path = parseJSONPath(pathString);
+      // console.log('Set selection to path:', pathString, path);
+      const selection: any = createMultiSelection(path, path);
+      // const selection: any = createKeySelection(path, false);
+      // marker to ignore emitting change events when the path was set programmatically
+      selection.triggeredSelection = false;
 
-    try {
-      await this.editor.select(selection);
-    } catch (error) {
-      console.warn('Set selection to path not possible:', pathString, error);
+      try {
+        await this.editor.select(selection);
+      } catch (error) {
+        console.warn('Set selection to path not possible:', pathString, error);
+      }
+      this.pathChanged.emit(pathString);
     }
-    this.pathChanged.emit(pathString);
   }
 
   get(): JSON {
diff --git a/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.style.css b/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.style.css
index fdd46dd9..a61c9d7a 100644
--- a/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.style.css
+++ b/dynamic-mapping-ui/src/shared/editor2/jsoneditor2.style.css
@@ -23,7 +23,7 @@ svg {
   height: unset !important;
 }
 
-body .jsoneditor2 {
+body .jse-main {
   --jse-theme-color: var(--c8y-root-component-background-default);
   --jse-menu-color: var(--c8y-root-component-color-default);
   /*--jse-theme-color-highlight: var(