Merge pull request #1138 from RedisInsight/bugfix/RI-3447_formatter-editor

#RI-3447 - add space for formatter editor buttons, change calculating height behavior

Author: AlenaSY

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -43,7 +43,6 @@ import HelpTexts from 'uiSrc/constants/help-texts'
 import { KeyTypes, OVER_RENDER_BUFFER_COUNT, TableCellAlignment, TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
 import { getColumnWidth } from 'uiSrc/components/virtual-grid'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
-import { calculateTextareaLines } from 'uiSrc/utils/calculateTextareaLines'
 import { stringToBuffer } from 'uiSrc/utils/formatters/bufferFormatters'
 import {
   GetHashFieldsResponse,
@@ -256,6 +255,13 @@ const HashDetails = (props: Props) => {
     }
   }
 
+  const updateTextAreaHeight = () => {
+    if (textAreaRef.current) {
+      textAreaRef.current.style.height = '0px'
+      textAreaRef.current.style.height = `${textAreaRef.current?.scrollHeight || 0}px`
+    }
+  }
+
   const columns: ITableColumn[] = [
     {
       id: 'field',
@@ -315,9 +321,10 @@ const HashDetails = (props: Props) => {
             && !isEqualBuffers(valueItem, stringToBuffer(value))
 
           setTimeout(() => cellCache.clear(rowIndex, 1), 0)
+          updateTextAreaHeight()
 
           return (
-            <AutoSizer disableHeight>
+            <AutoSizer disableHeight onResize={() => setTimeout(updateTextAreaHeight, 0)}>
               {({ width }) => (
                 <div style={{ width }}>
                   <StopPropagation>
@@ -342,19 +349,20 @@ const HashDetails = (props: Props) => {
                         fullWidth
                         name="value"
                         id="value"
-                        rows={calculateTextareaLines(areaValue, width + 80)}
                         resize="none"
                         placeholder="Enter Value"
                         value={areaValue}
                         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
                           cellCache.clearAll()
                           setAreaValue(e.target.value)
+                          updateTextAreaHeight()
                         }}
                         disabled={updateLoading}
                         inputRef={textAreaRef}
                         className={cx(styles.textArea, { [styles.areaWarning]: disabled })}
                         spellCheck={false}
                         data-testid="hash-value-editor"
+                        style={{ height: textAreaRef.current?.scrollHeight || 0 }}
                       />
                     </InlineItemEditor>
                   </StopPropagation>

redisinsight/ui/src/pages/browser/components/hash-details/styles.module.scss

@@ -7,7 +7,7 @@
 
   .textAreaControls {
     right: -80px !important;
-    bottom: -2px !important;
+    bottom: -4px !important;
     top: auto !important;
     background-color: var(--euiPageBackgroundColor) !important;
   }
@@ -17,11 +17,14 @@
     border-color: var(--euiColorPrimary) !important;
     z-index: 3;
     padding-left: 20px;
+    padding-bottom: 36px !important;
     margin: -8px -6px -8px -20px !important;
-    height: calc(100% + 16px) !important;
     min-width: calc(100% + 120px) !important;
     font: normal normal normal 13px/18px Graphik, sans-serif;
     min-height: 43px;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    resize: none;
 
     &:focus {
       background-image: none !important;

redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx

@@ -47,7 +47,6 @@ import {
   SetListElementDto,
   SetListElementResponse,
 } from 'apiSrc/modules/browser/dto'
-import { calculateTextareaLines } from 'uiSrc/utils/calculateTextareaLines'
 
 import styles from './styles.module.scss'
 
@@ -206,6 +205,13 @@ const ListDetails = (props: Props) => {
     cellCache.clearAll()
   }
 
+  const updateTextAreaHeight = () => {
+    if (textAreaRef.current) {
+      textAreaRef.current.style.height = '0px'
+      textAreaRef.current.style.height = `${textAreaRef.current?.scrollHeight || 0}px`
+    }
+  }
+
   const columns: ITableColumn[] = [
     {
       id: 'index',
@@ -263,7 +269,7 @@ const ListDetails = (props: Props) => {
           setTimeout(() => cellCache.clear(rowIndex, 1), 0)
 
           return (
-            <AutoSizer disableHeight>
+            <AutoSizer disableHeight onResize={() => setTimeout(updateTextAreaHeight, 0)}>
               {({ width }) => (
                 <div style={{ width }}>
                   <StopPropagation>
@@ -289,19 +295,20 @@ const ListDetails = (props: Props) => {
                           fullWidth
                           name="value"
                           id="value"
-                          rows={calculateTextareaLines(areaValue, width + 80)}
                           resize="none"
                           placeholder="Enter Element"
                           value={areaValue}
                           onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
                             cellCache.clearAll()
                             setAreaValue(e.target.value)
+                            updateTextAreaHeight()
                           }}
                           disabled={updateLoading}
                           inputRef={textAreaRef}
                           className={cx(styles.textArea, { [styles.areaWarning]: disabled })}
                           spellCheck={false}
                           data-testid="element-value-editor"
+                          style={{ height: textAreaRef.current?.scrollHeight || 0 }}
                         />
                       </InlineItemEditor>
                     </div>

redisinsight/ui/src/pages/browser/components/list-details/styles.module.scss

@@ -7,7 +7,7 @@
 
   .textAreaControls {
     right: -56px !important;
-    bottom: -2px !important;
+    bottom: -4px !important;
     top: auto !important;
     background-color: var(--euiPageBackgroundColor) !important;
   }
@@ -17,11 +17,14 @@
     border-color: var(--euiColorPrimary) !important;
     z-index: 3;
     padding-left: 20px;
+    padding-bottom: 36px !important;
     margin: -8px -6px -8px -20px !important;
-    height: calc(100% + 16px) !important;
     min-width: calc(100% + 106px) !important;
     font: normal normal normal 13px/18px Graphik, sans-serif;
     min-height: 43px;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    resize: none;
 
     &:focus {
       background-image: none !important;

redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx

@@ -55,7 +55,7 @@ const WBView = (props: Props) => {
     scrollDivRef,
   } = props
   const [isMinimized, setIsMinimized] = useState<boolean>(
-    (localStorageService?.get(BrowserStorageItem.isEnablementAreaMinimized) ?? 'false') === 'true'
+    localStorageService?.get(BrowserStorageItem.isEnablementAreaMinimized) ?? false
   )
   const [isCodeBtnDisabled, setIsCodeBtnDisabled] = useState<boolean>(false)
 

redisinsight/ui/src/services/storage.ts

@@ -15,17 +15,13 @@ class StorageService {
     } catch (error) {
       console.error(`getItem from storage error: ${error}`)
     }
-    const numPatt = new RegExp(/^\d+$/)
-    const jsonPatt = new RegExp(/[[{].*[}\]]/)
 
     if (item) {
-      if (jsonPatt.test(item)) {
+      try {
         return JSON.parse(item)
+      } catch (e) {
+        return item
       }
-      if (numPatt.test(item)) {
-        return parseFloat(item)
-      }
-      return item
     }
     return null
   }