Merge pull request #116 from devtron-labs/yaml-stringify-code-editor

feat: Generalize yaml stringify

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.72",
+    "version": "0.0.73",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -76,7 +76,8 @@
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
-        "react-draggable": "^4.4.5"
+        "react-draggable": "^4.4.5",
+        "yaml": "^2.4.1"
     },
     "dependencies": {
         "react-monaco-editor": "^0.54.0",

package.json

@@ -21,7 +21,7 @@ import 'monaco-editor'
 // import YamlWorker from 'web-worker:monaco-yaml/lib/esm/yaml.worker';
 import { Progressing } from '../Progressing'
 import { useWindowSize } from '../Hooks/UseWindowSize/UseWindowSize'
-import { cleanKubeManifest, copyToClipboard, useJsonYaml } from '../Helper'
+import { YAMLStringify, cleanKubeManifest, copyToClipboard, useJsonYaml } from '../Helper'
 import Select from '../Select/Select'
 import RadioGroup from '../RadioGroup/RadioGroup'
 
@@ -300,7 +300,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             }
             let final = value
             if (obj) {
-                final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAML.stringify(obj, { indent: 2 })
+                final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAMLStringify(obj, { indent: 2 })
             }
             dispatch({ type: 'setCode', value: final })
         }, [value, noParsing])

src/Common/CodeEditor/CodeEditor.tsx

@@ -369,7 +369,7 @@ export function useJsonYaml(value, tabSize = 4, language = 'json', shouldRun = f
         }
         if (obj && typeof obj === 'object') {
             setJson(JSON.stringify(obj, null, tabSize))
-            setYaml(YAML.stringify(obj, { indent: 2 }))
+            setYaml(YAML.stringify(obj, { indent: 2, lineWidth: 0 }))
             setNativeObject(obj)
             setError('')
         } else {
@@ -711,3 +711,11 @@ export const handleRelativeDateSorting = (dateStringA, dateStringB, sortOrder) =
         return sortOrder === SortingOrder.ASC ? dateB - dateA : dateA - dateB
     }
 }
+
+/**
+ * Returns a stringified YAML with default indentation & line width
+ */
+
+export const YAMLStringify = (obj: object | unknown, option?: object) => (
+    YAML.stringify(obj, { indent: 2, lineWidth: 0, ...option  })
+)