From 3147482acf52b281c02812f2a6f71160b79490b6 Mon Sep 17 00:00:00 2001
From: Chaos <chaoticryptidz@owo.monster>
Date: Wed, 14 Dec 2022 15:07:03 +0000
Subject: [PATCH] Add hybrid mode to KV View

---
 src/settings/Settings.ts                      | 11 ++-
 src/translations/en.js                        |  1 +
 .../pages/Secrets/KeyValue/KeyValueView.tsx   | 86 ++++++++++++++-----
 .../KeyValue/KeyValueViewSettings.tsx         | 16 ++++
 4 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
index 9f37b16..1811040 100644
--- a/src/settings/Settings.ts
+++ b/src/settings/Settings.ts
@@ -118,7 +118,7 @@ export class Settings {
   }
 
   get kvAlwaysCodeView(): boolean {
-    const value = this.storage.getItem("kvAlwaysCodeView") || false;
+    const value = this.storage.getItem("kvAlwaysCodeView") || "false";
     return value == "true";
   }
   set kvAlwaysCodeView(value: boolean) {
@@ -126,6 +126,15 @@ export class Settings {
     this.alertChange("kvAlwaysCodeView");
   }
 
+  get kvUseHybridView(): boolean {
+    const value = this.storage.getItem("kvUseHybridView") || "true";
+    return value == "true";
+  }
+  set kvUseHybridView(value: boolean) {
+    this.storage.setItem("kvUseHybridView", String(value));
+    this.alertChange("kvUseHybridView");
+  }
+
   get kvEditorDefaultLanguage(): string {
     return this.storage.getItem("kvEditorDefaultLanguage") || "yaml";
   }
diff --git a/src/translations/en.js b/src/translations/en.js
index 8e9ea0f..2c49055 100644
--- a/src/translations/en.js
+++ b/src/translations/en.js
@@ -89,6 +89,7 @@ module.exports = {
   settings_kv_editor_indent: "Editor Indent",
   settings_kv_always_view_in_code_mode: "Always view in code mode",
   settings_kv_hide_values: "Hide values with key (comma seporated)",
+  settings_kv_use_hybrid_mode: "Show Secrets in hybrid mode",
 
   // Set Vault URL Page
   set_vault_url_title: "Set Vault URL",
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
index 49f551f..4c4e83c 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
@@ -113,25 +113,6 @@ export class KVSecretNormalVew extends Component<KVSecretViewDataProps> {
             </Grid>
           );
         })}
-
-        {(() => {
-          if (this.props.data.has("__vaultui_totp_path")) {
-            const value = this.props.data.get("__vaultui_totp_path") as string;
-            const baseMount = value.split("/")[0];
-            const totpKey = value.split("/")[1];
-
-            return (
-              <p>
-                <CopyTOTPButton api={this.props.api} baseMount={baseMount} totpKey={totpKey} />
-                <Button
-                  text={i18next.t("kv_secret_view_totp_btn")}
-                  color="secondary"
-                  route={totpListURL(baseMount, totpKey)}
-                />
-              </p>
-            );
-          }
-        })()}
       </div>
     );
   }
@@ -141,6 +122,27 @@ export type KVSecretViewProps = DefaultPageProps & {
   kvData: Record<string, unknown>;
 };
 
+function KVTOTPExtra(props: KVSecretViewDataProps) {
+  if (props.data.has("__vaultui_totp_path")) {
+    const value = props.data.get("__vaultui_totp_path") as string;
+    const baseMount = value.split("/")[0];
+    const totpKey = value.split("/")[1];
+
+    return (
+      <p>
+        <CopyTOTPButton api={props.api} baseMount={baseMount} totpKey={totpKey} />
+        <Button
+          text={i18next.t("kv_secret_view_totp_btn")}
+          color="secondary"
+          route={totpListURL(baseMount, totpKey)}
+        />
+      </p>
+    );
+  } else {
+    return <></>;
+  }
+}
+
 export class KVSecretVew extends Component<KVSecretViewProps, { syntax: string }> {
   render(): JSX.Element {
     const secretsMap = sortedObjectMap(this.props.kvData);
@@ -150,10 +152,52 @@ export class KVSecretVew extends Component<KVSecretViewProps, { syntax: string }
       if (typeof value == "object") isMultiLevel = true;
     }
 
+    let showableAsHybrid = false;
+    for (const value of secretsMap.values()) {
+      if (typeof value != "object") showableAsHybrid = true;
+    }
+
+    if (showableAsHybrid && this.props.settings.kvUseHybridView && secretsMap.size >= 1) {
+      let kvNormalViewMap = new Map();
+      let kvCodeViewMap = new Map();
+
+      for (const key of secretsMap.keys()) {
+        const value = secretsMap.get(key);
+        if (typeof value == "object") {
+          kvCodeViewMap = kvCodeViewMap.set(key, value);
+        } else {
+          kvNormalViewMap = kvNormalViewMap.set(key, value);
+        }
+      }
+
+      kvNormalViewMap = sortedObjectMap(
+        Object.fromEntries(kvNormalViewMap) as Record<string, unknown>,
+      );
+      kvCodeViewMap = sortedObjectMap(Object.fromEntries(kvCodeViewMap) as Record<string, unknown>);
+
+      return (
+        <div>
+          <KVSecretNormalVew {...this.props} data={kvNormalViewMap} />
+          {kvCodeViewMap.size >= 1 && <KVSecretCodeVew {...this.props} data={kvCodeViewMap} />}
+          <KVTOTPExtra {...this.props} data={secretsMap} />
+        </div>
+      );
+    }
+
     if (isMultiLevel || this.props.settings.kvAlwaysCodeView) {
-      return <KVSecretCodeVew {...this.props} data={secretsMap} />;
+      return (
+        <div>
+          <KVSecretCodeVew {...this.props} data={secretsMap} />
+          <KVTOTPExtra {...this.props} data={secretsMap} />
+        </div>
+      );
     } else {
-      return <KVSecretNormalVew {...this.props} data={secretsMap} />;
+      return (
+        <div>
+          <KVSecretNormalVew {...this.props} data={secretsMap} />
+          <KVTOTPExtra {...this.props} data={secretsMap} />
+        </div>
+      );
     }
   }
 }
diff --git a/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx b/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx
index 4fd3d1c..597d43f 100644
--- a/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx
+++ b/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx
@@ -1,3 +1,4 @@
+import { Checkbox } from "../../../elements/forms/Checkbox";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
@@ -10,6 +11,8 @@ import i18next from "i18next";
 export class KeyValueViewSettings extends Component<DefaultPageProps> {
   viewSyntaxSelectRef = createRef<HTMLSelectElement>();
   viewIndentInputRef = createRef<HTMLInputElement>();
+  hybridModeInputRef = createRef<HTMLInputElement>();
+
   render() {
     return (
       <div>
@@ -47,6 +50,19 @@ export class KeyValueViewSettings extends Component<DefaultPageProps> {
             }}
           />
         </InputWithTitle>
+
+        {/* Always view in code mode */}
+        <InputWithTitle title={i18next.t("settings_kv_use_hybrid_mode")}>
+          <Checkbox
+            checkboxRef={this.hybridModeInputRef}
+            checked={this.props.settings.kvUseHybridView}
+            onChange={() => {
+              const value = this.hybridModeInputRef.current.checked;
+              this.props.settings.kvUseHybridView = value;
+              settingsSavedNotification();
+            }}
+          />
+        </InputWithTitle>
       </div>
     );
   }