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,24 +12,13 @@ import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
 
-export type KVSecretViewProps = DefaultPageProps & {
-  kvData: Record<string, unknown>;
-};
+type KVSecretViewDataProps = DefaultPageProps & { data: Map<string, unknown> };
 
-export class KVSecretVew extends Component<KVSecretViewProps, { syntax: string }> {
+export class KVSecretCodeVew extends Component<KVSecretViewDataProps, { syntax: string }> {
   syntaxSelectRef = createRef<HTMLSelectElement>();
-
-  render(): JSX.Element {
-    const secretsMap = sortedObjectMap(this.props.kvData);
-    let isMultiLevel = false;
-
-    for (const value of secretsMap.values()) {
-      if (typeof value == "object") isMultiLevel = true;
-    }
-
-    if (isMultiLevel || this.props.settings.kvAlwaysCodeView) {
+  render() {
     const syntax = this.state.syntax || this.props.settings.kvViewDefaultLanguage;
-      const secretData = Object.fromEntries(secretsMap);
+    const secretData = Object.fromEntries(this.props.data);
     const codeData = dumpData(secretData, this.props.settings.kvViewIndent, syntax);
     return (
       <>
@@ -52,25 +41,55 @@ export class KVSecretVew extends Component<KVSecretViewProps, { syntax: string }
             })}
           </select>
         </InputWithTitle>
-          <CodeBlock
-            language={toPrismCode(this.props.settings.kvViewDefaultLanguage)}
-            code={codeData}
-          />
+        <CodeBlock language={toPrismCode(syntax)} code={codeData} />
       </>
     );
-    } else {
+  }
+}
+
+export class KVSecretNormalVew extends Component<KVSecretViewDataProps> {
+  render() {
     return (
       <>
-          {Array.from(secretsMap).map((data: [string, unknown]) => (
+        {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={data[0]} copyable />
-              <CopyableInputBox text={data[1] as string} copyable />
+              <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 }> {
+  render(): JSX.Element {
+    const secretsMap = sortedObjectMap(this.props.kvData);
+    let isMultiLevel = false;
+
+    for (const value of secretsMap.values()) {
+      if (typeof value == "object") isMultiLevel = true;
+    }
+
+    if (isMultiLevel || this.props.settings.kvAlwaysCodeView) {
+      return <KVSecretCodeVew {...this.props} data={secretsMap} />;
+    } else {
+      return <KVSecretNormalVew {...this.props} data={secretsMap} />;
+    }
+  }
 }
 
 type KeyValueViewState = {

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>
     );
   }