add hjson support for editing secrets

package.json

@@ -2,6 +2,7 @@
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@babel/eslint-parser": "^7.16.5",
+    "@babel/plugin-syntax-import-assertions": "^7.16.7",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.16.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
@@ -33,12 +34,12 @@
     "webpack-dev-server": "^4.7.2"
   },
   "dependencies": {
-    "@babel/plugin-syntax-import-assertions": "^7.16.7",
     "clipboard": "^2.0.8",
     "codejar": "^3.5.0",
     "core-js": "^3.20.2",
     "date-fns": "^2.28.0",
     "file-saver": "^2.0.5",
+    "hjson": "^3.2.2",
     "i18next": "^21.6.5",
     "normalize.css": "^8.0.1",
     "preact": "^10.6.4",

src/main.tsx

@@ -12,6 +12,7 @@ UIkit.use(Icons);
 import Prism from "prismjs";
 // Don't Sort These!
 import "prismjs/components/prism-hcl";
+import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-json";
 
 Prism.highlightAll();

src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx

@@ -1,10 +1,38 @@
 import { CodeEditor } from "../../../elements/CodeEditor";
-import { Component, JSX } from "preact";
+import { Component, createRef, JSX } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { setErrorText } from "../../../../pageUtils";
-import { sortedObjectMap, verifyJSONString } from "../../../../utils";
+import { sortedObjectMap } from "../../../../utils";
+import Hjson from "hjson";
 import i18next from "i18next";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+
+
+function parseJSON(data: string, hJSON = false): Record<string, unknown> {
+  if (hJSON) {
+    return Hjson.parse(data);
+  } else {
+    return JSON.parse(data);
+  }
+}
+
+function dumpJSON(data: Record<string, unknown>, space: number = 0, hJSON = false): string {
+  if (hJSON) {
+    return Hjson.stringify(data, null, space);
+  } else {
+    return JSON.stringify(data, null, space);
+  }
+}
+
+export function isValidJSON(str: string, hJSON = false): boolean {
+  try {
+    parseJSON(str, hJSON);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
 
 export type KVEditProps = DefaultPageProps & {
   baseMount: string;
@@ -14,19 +42,23 @@ export type KVEditProps = DefaultPageProps & {
 
 type KVEditState =
   | {
-      dataLoaded: false;
+    dataLoaded: false;
-    }
+    useHJSON: boolean;
+  }
   | {
-      dataLoaded: true;
+    dataLoaded: true;
-      kvData: Record<string, unknown>;
+    kvData: Record<string, unknown>;
-      code: string;
+    code: string;
-    };
+    useHJSON: boolean;
+  };
 
 export class KVEditor extends Component<KVEditProps, KVEditState> {
   constructor() {
     super();
+    // TODO: add a global use Hjson option to settings for default
     this.state = {
       dataLoaded: false,
+      useHJSON: false,
     };
   }
 
@@ -34,7 +66,7 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
     if (!this.state.dataLoaded) return;
     const editorContent = this.state.code;
 
-    if (!verifyJSONString(editorContent)) {
+    if (!isValidJSON(editorContent, this.state.useHJSON)) {
       setErrorText(i18next.t("kv_sec_edit_invalid_json_err"));
       return;
     }
@@ -43,7 +75,7 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
       this.props.baseMount,
       this.props.secretPath.map((e) => e + "/"),
       this.props.secretItem,
-      JSON.parse(editorContent) as unknown as Record<string, unknown>,
+      parseJSON(editorContent, this.hJSONToggleRef.current.checked),
     );
     window.history.back();
   }
@@ -54,33 +86,31 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
     });
   }
 
-  loadData(): void {
+  async loadData() {
-    void this.props.api
+    let kvData = await this.props.api.getSecret(
-      .getSecret(
+      this.props.baseMount,
-        this.props.baseMount,
+      this.props.secretPath.map((e) => e + "/"),
-        this.props.secretPath.map((e) => e + "/"),
+      this.props.secretItem,
-        this.props.secretItem,
+    )
-      )
+    this.setState({
-      .then((kvData) => {
+      dataLoaded: true,
-        this.setState({
+      kvData: kvData,
-          dataLoaded: true,
+      code: this.getStringKVData(kvData)
-          kvData: kvData,
+    });
-          code: this.getStringKVData(kvData),
-        });
-      });
-    return;
   }
 
-  componentDidMount(): void {
+  async componentDidMount() {
     if (!this.state.dataLoaded) {
-      this.loadData();
+      await this.loadData();
     }
   }
 
   getStringKVData(data: Record<string, unknown>): string {
-    return JSON.stringify(Object.fromEntries(sortedObjectMap(data)), null, 4);
+    return dumpJSON(Object.fromEntries(sortedObjectMap(data)), 4, this.state.useHJSON);
   }
 
+  hJSONToggleRef = createRef<HTMLInputElement>()
+
   render(): JSX.Element {
     if (!this.state.dataLoaded) {
       return <p>{i18next.t("content_loading")}</p>;
@@ -88,9 +118,15 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
 
     return (
       <div>
+        <InputWithTitle title="Use Hjson">
+          <input ref={this.hJSONToggleRef} type="checkbox" class="uk-checkbox" onChange={() => {
+            this.setState({useHJSON: this.hJSONToggleRef.current.checked})
+          }} />
+
+        </InputWithTitle>
         <p class="uk-text-danger" id="errorText" />
         <CodeEditor
-          language="json"
+          language="js"
           tabSize={4}
           code={this.getStringKVData(this.state.kvData)}
           onUpdate={(code) => this.onCodeUpdate(code)}

webpack-dev.config.js

@@ -34,6 +34,7 @@ module.exports = {
   resolve: {
     modules: ['node_modules'],
     extensions: ['.tsx', '.ts', '.js', ".mjs"],
+    alias: {os: false}
   },
 
   module: {

webpack.config.js

@@ -60,6 +60,7 @@ module.exports = {
   resolve: {
     modules: ['node_modules'],
     extensions: ['.tsx', '.ts', '.js', ".mjs"],
+    alias: {os: false}
   },
 
   module: {