"Default Indent" -> "Indent"

README.md

@@ -8,7 +8,7 @@ VaultUI is a user interface for [Hashicorp Vault](https://www.hashicorp.com/prod
 ### Key Value
 - Viewing of Key/Value secrets (v1 & v2)
 - Managing versions of secrets in v2 mounts.
-- Editing Key/Value secrets with ability to edit in JSON, JSON5, Yaml, etc.
+- Editing and Viewing Key/Value secrets in JSON, JSON5, Yaml, etc with default settings for both.
 - Search bar for easily finding a secret on mobile.
 ### TOTP
 - Can view and delete TOTP codes.

src/translations/en.js

@@ -84,9 +84,9 @@ module.exports = {
   // Key/Value Settings
   settings_kv_title: "Key/Value",
   settings_kv_default_view_language: "Default View Syntax",
-  settings_kv_default_view_indent: "Default View Indent",
+  settings_kv_view_indent: "View Indent",
   settings_kv_default_editor_language: "Default Editor Syntax",
-  settings_kv_default_editor_indent: "Default Editor Indent",
+  settings_kv_editor_indent: "Editor Indent",
   settings_kv_always_view_in_code_mode: "Always view in code mode",
 
   // Set Vault URL Page

src/ui/pages/Settings/KeyValueSettings.tsx

@@ -5,18 +5,12 @@ import { SupportedLanguages } from "../../../utils/dataInterchange";
 import { settingsSavedNotification } from "./Settings";
 import i18next from "i18next";
 
-export class KeyValueSettings extends Component<DefaultPageProps> {
+export class KeyValueViewSettings extends Component<DefaultPageProps> {
-  editorSyntaxSelectRef = createRef<HTMLSelectElement>();
-  editorIndentInputRef = createRef<HTMLInputElement>();
   viewSyntaxSelectRef = createRef<HTMLSelectElement>();
   viewIndentInputRef = createRef<HTMLInputElement>();
-  codeModeToggleRef = createRef<HTMLInputElement>();
-
   render() {
     return (
       <div>
-        <h4>{i18next.t("settings_kv_title")}</h4>
-
         {/* KV View Language */}
         <InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
           <select
@@ -40,12 +34,12 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
         </InputWithTitle>
 
         {/* KV View Indent */}
-        <InputWithTitle title={i18next.t("settings_kv_default_view_indent")}>
+        <InputWithTitle title={i18next.t("settings_kv_view_indent")}>
           <input
             ref={this.viewIndentInputRef}
             class="uk-input uk-form-width-medium"
             type="number"
-            value={this.props.settings.kvEditorIndent}
+            value={this.props.settings.kvViewIndent}
             onChange={() => {
               const value = this.viewIndentInputRef.current.value;
               const indent = parseInt(value);
@@ -54,7 +48,18 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
             }}
           />
         </InputWithTitle>
+      </div>
+    )
+  }
+}
 
+
+export class KeyValueEditorSettings extends Component<DefaultPageProps> {
+  editorSyntaxSelectRef = createRef<HTMLSelectElement>();
+  editorIndentInputRef = createRef<HTMLInputElement>();
+  render() {
+    return (
+      <div>
         {/* KV Editor Language */}
         <InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
           <select
@@ -79,7 +84,7 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
         </InputWithTitle>
 
         {/* KV Editor Indent */}
-        <InputWithTitle title={i18next.t("settings_kv_default_editor_indent")}>
+        <InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
           <input
             ref={this.editorIndentInputRef}
             class="uk-input uk-form-width-medium"
@@ -93,6 +98,23 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
             }}
           />
         </InputWithTitle>
+      </div>
+    )
+  }
+}
+
+
+
+export class KeyValueSettings extends Component<DefaultPageProps> {
+  codeModeToggleRef = createRef<HTMLInputElement>();
+
+  render() {
+    return (
+      <div>
+        <h4>{i18next.t("settings_kv_title")}</h4>
+
+        <KeyValueViewSettings {...this.props} />
+        <KeyValueEditorSettings {...this.props} />
 
         {/* Always view in code mode */}
         <InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>