add ability to hide k/v values matching a key

src/settings/Settings.ts

@@ -114,4 +114,18 @@ export class Settings {
     this.storage.setItem("kvViewIndent", String(value));
     this.alertChange("kvViewIndent");
   }
+
+  get kvHideKeyValues(): string[] {
+    const value = this.storage.getItem("kvHideKeyValues") || "";
+    return value.split(",");
+  }
+
+  set kvHideKeyValues(value: string[] | string) {
+    if (typeof value === "string") {
+      this.storage.setItem("kvHideKeyValues", value);
+    } else {
+      this.storage.setItem("kvHideKeyValues", value.join(","));
+    }
+    this.alertChange("kvHideKeyValues");
+  }
 }

src/translations/en.js

@@ -88,6 +88,7 @@ module.exports = {
   settings_kv_default_editor_language: "Default Editor Syntax",
   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)",
 
   // Set Vault URL Page
   set_vault_url_title: "Set Vault URL",

src/ui/elements/CopyableInputBox.tsx

@@ -7,6 +7,7 @@ import i18next from "i18next";
 export type CopyableInputBoxProps = {
   text: string;
   copyable?: boolean;
+  hideLikePassword?: boolean;
 };
 
 export class CopyableInputBox extends Component<CopyableInputBoxProps, unknown> {
@@ -18,6 +19,9 @@ export class CopyableInputBox extends Component<CopyableInputBoxProps, unknown>
   }
 
   render(): JSX.Element {
+    let type = "text";
+    if (this.props.hideLikePassword) type = "password";
+
     return (
       <div>
         <MarginInline>
@@ -31,7 +35,7 @@ export class CopyableInputBox extends Component<CopyableInputBoxProps, unknown>
               aria-label={i18next.t("copy_input_box_copy_icon_text")}
             />
           )}
-          <input class="uk-input uk-input-copyable" type="text" value={this.props.text} readonly />
+          <input class="uk-input uk-input-copyable" type={type} value={this.props.text} readonly />
         </MarginInline>
       </div>
     );

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

@@ -12,13 +12,70 @@ import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
 
+type KVSecretViewDataProps = DefaultPageProps & { data: Map<string, unknown> };
+
+export class KVSecretCodeVew extends Component<KVSecretViewDataProps, { syntax: string }> {
+  syntaxSelectRef = createRef<HTMLSelectElement>();
+  render() {
+    const syntax = this.state.syntax || this.props.settings.kvViewDefaultLanguage;
+    const secretData = Object.fromEntries(this.props.data);
+    const codeData = dumpData(secretData, this.props.settings.kvViewIndent, syntax);
+    return (
+      <>
+        <InputWithTitle title={i18next.t("kv_secret_syntax")}>
+          <select
+            ref={this.syntaxSelectRef}
+            class="uk-select uk-form-width-medium"
+            onChange={() => {
+              this.setState({ syntax: this.syntaxSelectRef.current.value });
+            }}
+          >
+            {SupportedLanguages.map((lang) => {
+              return (
+                <option
+                  label={lang.readable}
+                  value={lang.name}
+                  selected={this.props.settings.kvViewDefaultLanguage == lang.name}
+                />
+              );
+            })}
+          </select>
+        </InputWithTitle>
+        <CodeBlock language={toPrismCode(syntax)} code={codeData} />
+      </>
+    );
+  }
+}
+
+export class KVSecretNormalVew extends Component<KVSecretViewDataProps> {
+  render() {
+    return (
+      <>
+        {Array.from(this.props.data).map((data: [string, unknown]) => {
+          const key = data[0];
+          const value = data[1] as string;
+          console.log(this.props.settings.kvHideKeyValues);
+          return (
+            <Grid size={GridSizes.NORMAL}>
+              <CopyableInputBox text={key} copyable />
+              <CopyableInputBox
+                text={value}
+                hideLikePassword={this.props.settings.kvHideKeyValues.includes(key)}
+                copyable
+              />
+            </Grid>
+          );
+        })}
+      </>
+    );
+  }
+}
+
 export type KVSecretViewProps = DefaultPageProps & {
   kvData: Record<string, unknown>;
 };
 
 export class KVSecretVew extends Component<KVSecretViewProps, { syntax: string }> {
-  syntaxSelectRef = createRef<HTMLSelectElement>();
-
   render(): JSX.Element {
     const secretsMap = sortedObjectMap(this.props.kvData);
     let isMultiLevel = false;
@@ -28,47 +85,9 @@ export class KVSecretVew extends Component<KVSecretViewProps, { syntax: string }
     }
 
     if (isMultiLevel || this.props.settings.kvAlwaysCodeView) {
-      const syntax = this.state.syntax || this.props.settings.kvViewDefaultLanguage;
+      return <KVSecretCodeVew {...this.props} data={secretsMap} />;
-      const secretData = Object.fromEntries(secretsMap);
-      const codeData = dumpData(secretData, this.props.settings.kvViewIndent, syntax);
-      return (
-        <>
-          <InputWithTitle title={i18next.t("kv_secret_syntax")}>
-            <select
-              ref={this.syntaxSelectRef}
-              class="uk-select uk-form-width-medium"
-              onChange={() => {
-                this.setState({ syntax: this.syntaxSelectRef.current.value });
-              }}
-            >
-              {SupportedLanguages.map((lang) => {
-                return (
-                  <option
-                    label={lang.readable}
-                    value={lang.name}
-                    selected={this.props.settings.kvViewDefaultLanguage == lang.name}
-                  />
-                );
-              })}
-            </select>
-          </InputWithTitle>
-          <CodeBlock
-            language={toPrismCode(this.props.settings.kvViewDefaultLanguage)}
-            code={codeData}
-          />
-        </>
-      );
     } else {
-      return (
+      return <KVSecretNormalVew {...this.props} data={secretsMap} />;
-        <>
-          {Array.from(secretsMap).map((data: [string, unknown]) => (
-            <Grid size={GridSizes.NORMAL}>
-              <CopyableInputBox text={data[0]} copyable />
-              <CopyableInputBox text={data[1] as string} copyable />
-            </Grid>
-          ))}
-        </>
-      );
     }
   }
 }

src/ui/pages/Settings/KeyValueSettings.tsx

@@ -49,11 +49,10 @@ export class KeyValueViewSettings extends Component<DefaultPageProps> {
           />
         </InputWithTitle>
       </div>
-    )
+    );
   }
 }
 
-
 export class KeyValueEditorSettings extends Component<DefaultPageProps> {
   editorSyntaxSelectRef = createRef<HTMLSelectElement>();
   editorIndentInputRef = createRef<HTMLInputElement>();
@@ -99,14 +98,13 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
           />
         </InputWithTitle>
       </div>
-    )
+    );
   }
 }
 
-
-
 export class KeyValueSettings extends Component<DefaultPageProps> {
   codeModeToggleRef = createRef<HTMLInputElement>();
+  hideKeysRef = createRef<HTMLInputElement>();
 
   render() {
     return (
@@ -130,6 +128,20 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
             }}
           />
         </InputWithTitle>
+
+        {/* hide values on keys */}
+        <InputWithTitle title={i18next.t("settings_kv_hide_values")}>
+          <input
+            ref={this.hideKeysRef}
+            class="uk-input"
+            value={this.props.settings.kvHideKeyValues.join(",")}
+            onChange={() => {
+              const value = this.hideKeysRef.current.value;
+              this.props.settings.kvHideKeyValues = value;
+              settingsSavedNotification();
+            }}
+          />
+        </InputWithTitle>
       </div>
     );
   }