Fixes #23382: Improve display of YAML code

Normation · Sep 4, 2023 · 1d49e1a · 1d49e1a
1 parent ad2a41c
commit 1d49e1a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
@@ -294,7 +294,7 @@ showTechnique model technique origin ui editInfo =
             ]
 
           , button [ class "btn btn-primary", onClick (UpdateEdition ({editInfo | open = not editInfo.open }))] [
-              text (if (editInfo.open) then "Visual editor " else "Edit Yaml ")
+              text (if (editInfo.open) then "Visual editor " else "YAML editor")
             , i [ class "fa fa-pen"] []
             ]
           , btnSave ui.saving (isUnchanged || not (isValid ui) || String.isEmpty technique.name || isEmptyParameters || not areErrorOnMethodParameters || not areErrorOnMethodCondition || not areBlockOnError) StartSaving
@@ -360,7 +360,7 @@ showTechnique model technique origin ui editInfo =
               ]
             ]
           , if (editInfo.open) then
-            div [class "col-xs-12"] [ textarea [class "form-control" , rows (String.lines editInfo.value |> List.length), onInput (\s -> UpdateEdition ({editInfo | value =  s})), value editInfo.value] [] ]else render methodsList
+            div [class "col-xs-12"] [ textarea [class "yaml-editor" , rows (String.lines editInfo.value |> List.length), onInput (\s -> UpdateEdition ({editInfo | value =  s})), value editInfo.value] [] ]else render methodsList
           ]
         ]
       ]

diff --git a/webapp/sources/rudder/rudder-web/src/main/package-lock.json b/webapp/sources/rudder/rudder-web/src/main/package-lock.json
diff --git a/webapp/sources/rudder/rudder-web/src/main/package.json b/webapp/sources/rudder/rudder-web/src/main/package.json
@@ -2,21 +2,23 @@
   "dependencies": {
     "bootstrap": "^3.4.1",
     "chart.js": "^3.7.1",
+    "ci": "^2.3.0",
     "clipboard": "^2.0.11",
     "datatables.net": "^1.13.4",
     "datatables.net-fixedheader": "^3.3.2",
     "datatables.net-plugins": "^1.13.5",
     "datatables.net-rowgroup": "^1.3.1",
     "diff": "^5.1.0",
     "gaugeJS": "^1.3.7",
+    "highlight.js": "^11.8.0",
     "jquery": "^3.7.0",
     "jquery-ui": "^1.13.2",
     "jquery-ui-timepicker-addon": "^1.6.3",
+    "jsondiffpatch": "^0.5.0",
     "jstree": "^3.3.15",
     "showdown": "^2.1.0",
     "showdown-xss-filter": "^0.2.0",
-    "xss": "^1.0.14",
-    "jsondiffpatch": "^0.5.0"
+    "xss": "^1.0.14"
   },
   "devDependencies": {
     "better-npm-audit": "^3.7.3",
@@ -30,4 +32,4 @@
     "gulp-terser": "^2.1.0",
     "merge-stream": "^2.0.0"
   }
-}
+}
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-technique-editor.css
@@ -1652,4 +1652,16 @@ ul li.hide-method {
 }
 .unknown-gm-icon {
   color:#da291c;
-}
+}
+
+/* YAML editor */
+textarea.yaml-editor {
+  font-family: var(--font-mono);
+  /* Remove decoration */
+  border: none;
+  box-shadow: none;
+  resize: none;
+  outline: none;
+  width: 100%;
+  margin-top: 10px;
+}