Redis Format Json #582

packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte

@@ -9,7 +9,18 @@
 
 <div class="props">
   {#each dbKeyFields as column}
-    <DbKeyValueDetail {item} {column} {onChangeItem} />
+    <DbKeyValueDetail
+      value={item && item[column.name]}
+      columnTitle={_.startCase(column.name)}
+      onChangeValue={onChangeItem
+        ? value => {
+            onChangeItem?.({
+              ...item,
+              [column.name]: value,
+            });
+          }
+        : null}
+    />
   {/each}
 </div>
 

packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte

@@ -9,13 +9,13 @@
 
   let display = 'text';
 
-  export let column;
+  export let columnTitle;
-  export let item;
+  export let value;
-  export let onChangeItem = null;
+  export let onChangeValue = null;
 </script>
 
 <div class="colnamewrap">
-  <div class="colname">{_.startCase(column.name)}</div>
+  <div class="colname">{columnTitle}</div>
   <SelectField
     isNative
     value={display}
@@ -31,22 +31,17 @@
 <div class="colvalue">
   {#if display == 'text'}
     <AceEditor
-      readOnly={!onChangeItem}
+      readOnly={!onChangeValue}
-      value={item && item[column.name]}
+      {value}
       on:input={e => {
-        if (onChangeItem) {
+        onChangeValue?.(e.detail);
-          onChangeItem({
-            ...item,
-            [column.name]: e.detail,
-          });
-        }
       }}
     />
   {/if}
   {#if display == 'json'}
     <div class="outer">
       <div class="inner">
-        <JsonTree value={safeJsonParse(item[column.name]) || { error: 'Not valid JSON' }} expanded />
+        <JsonTree value={safeJsonParse(value) || { error: 'Not valid JSON' }} expanded />
       </div>
     </div>
   {/if}

packages/web/src/tabs/DbKeyDetailTab.svelte

@@ -9,7 +9,7 @@
   function getKeyText(key) {
     const keySplit = key.split(':');
     if (keySplit.length > 1) return keySplit[keySplit.length - 1];
-    return key;
+    return key || '(no name)';
   }
 </script>
 
@@ -32,6 +32,8 @@
   import DbKeyAddItemModal from '../modals/DbKeyAddItemModal.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import { changeTab } from '../utility/common';
+  import SelectField from '../forms/SelectField.svelte';
+  import DbKeyValueDetail from '../dbkeyvalue/DbKeyValueDetail.svelte';
 
   export let tabid;
   export let conid;
@@ -157,12 +159,15 @@
           </svelte:fragment>
         </VerticalSplitter>
       {:else}
-        <AceEditor
+        <div class="value-holder">
-          value={editedValue || keyInfo.value}
+          <DbKeyValueDetail
-          on:input={e => {
+            columnTitle="Value"
-            editedValue = e.detail;
+            value={editedValue || keyInfo.value}
-          }}
+            onChangeValue={value => {
-        />
+              editedValue = value;
+            }}
+          />
+        </div>
       {/if}
     </div>
   </div>
@@ -199,4 +204,15 @@
   .key-name :global(input) {
     flex-grow: 1;
   }
+
+  .value-holder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    flex-direction: column;
+  }
 </style>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -135,7 +135,7 @@
 
 <AppObjectCore
   icon={getIconForRedisType(item.type)}
-  title={item.text}
+  title={item.text || '(no name)'}
   expandIcon={item.type == 'dir' ? plusExpandIcon(isExpanded) : 'icon invisible-box'}
   on:expand={() => {
     if (item.type == 'dir') {
@@ -148,7 +148,7 @@
     } else {
       openNewTab({
         tabComponent: 'DbKeyDetailTab',
-        title: item.text,
+        title: item.text || '(no name)',
         icon: 'img keydb',
         props: {
           isDefaultBrowser: true,