Merge pull request #2820 from RedisInsight/fe/bugfix/regression_2.38

#RI-5206 - fix button state for editing

Author: vlad-dargel

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render, screen } from 'uiSrc/utils/test-utils'
-import { stringDataSelector } from 'uiSrc/slices/browser/string'
+import { stringDataSelector, stringSelector } from 'uiSrc/slices/browser/string'
 import { Props, StringDetails } from './StringDetails'
 
 const mockedProps = mock<Props>()
@@ -15,6 +15,9 @@ jest.mock('uiSrc/slices/browser/string', () => ({
       data: [49, 50, 51, 52],
     }
   }),
+  stringSelector: jest.fn().mockReturnValue({
+    isCompressed: false
+  })
 }))
 
 jest.mock('uiSrc/slices/browser/keys', () => ({
@@ -64,6 +67,22 @@ describe('StringDetails', () => {
     expect(editValueBtn).toHaveProperty('disabled', true)
   })
 
+  it('should not be able to change value (compressed)', () => {
+    const stringSelectorMock = jest.fn().mockReturnValue({
+      isCompressed: true
+    })
+    stringSelector.mockImplementation(stringSelectorMock)
+
+    render(
+      <StringDetails
+        {...mockedProps}
+      />
+    )
+
+    const editValueBtn = screen.getByTestId(`${EDIT_VALUE_BTN_TEST_ID}`)
+    expect(editValueBtn).toHaveProperty('disabled', true)
+  })
+
   it('"edit-key-value-btn" should render', () => {
     const { queryByTestId } = render(<StringDetails {...instance(mockedProps)} />)
     expect(queryByTestId('edit-key-value-btn')).toBeInTheDocument()

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx

@@ -56,7 +56,7 @@ const StringDetails = (props: Props) => {
     <EditItemAction
       title="Edit Value"
       tooltipContent={editToolTip}
-      isEditable={isStringEditable}
+      isEditable={isStringEditable && isEditable}
       onEditItem={() => setEditItem(!editItem)}
     />
   )

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx

@@ -51,8 +51,7 @@ import { IFetchKeyArgs } from 'uiSrc/constants/prop-types/keys'
 
 import styles from './styles.module.scss'
 
-const MAX_ROWS = 25
-const MIN_ROWS = 4
+const MIN_ROWS = 8
 const APPROXIMATE_WIDTH_OF_SIGN = 8.6
 const MAX_LENGTH = STRING_MAX_LENGTH + 1
 
@@ -72,7 +71,7 @@ const StringDetailsTable = (props: Props) => {
   const { name: key, type: keyType, length } = useSelector(selectedKeyDataSelector) ?? { name: '' }
   const { viewFormat: viewFormatProp } = useSelector(selectedKeySelector)
 
-  const [rows, setRows] = useState<number>(5)
+  const [rows, setRows] = useState<number>(MIN_ROWS)
   const [value, setValue] = useState<JSX.Element | string>('')
   const [areaValue, setAreaValue] = useState<string>('')
   const [viewFormat, setViewFormat] = useState(viewFormatProp)
@@ -83,6 +82,7 @@ const StringDetailsTable = (props: Props) => {
 
   const textAreaRef: Ref<HTMLTextAreaElement> = useRef(null)
   const viewValueRef: Ref<HTMLPreElement> = useRef(null)
+  const containerRef: Ref<HTMLDivElement> = useRef(null)
 
   const dispatch = useDispatch()
 
@@ -125,16 +125,9 @@ const StringDetailsTable = (props: Props) => {
       return
     }
     const calculatedRows = calculateTextareaLines(areaValue, textAreaRef.current.clientWidth, APPROXIMATE_WIDTH_OF_SIGN)
-
-    if (calculatedRows > MAX_ROWS) {
-      setRows(MAX_ROWS)
-      return
+    if (calculatedRows > MIN_ROWS) {
+      setRows(calculatedRows)
     }
-    if (calculatedRows < MIN_ROWS) {
-      setRows(MIN_ROWS)
-      return
-    }
-    setRows(calculatedRows)
   }, [viewValueRef, isEditItem])
 
   useMemo(() => {
@@ -188,7 +181,7 @@ const StringDetailsTable = (props: Props) => {
 
   return (
     <>
-      <div className={styles.container} data-testid="string-details">
+      <div className={styles.container} ref={containerRef} data-testid="string-details">
         {isLoading && (
           <EuiProgress
             color="primary"
@@ -198,27 +191,24 @@ const StringDetailsTable = (props: Props) => {
           />
         )}
         {!isEditItem && (
-          <EuiText
-            onClick={() => isEditable && setIsEdit(true)}
-            style={{ whiteSpace: 'break-spaces' }}
-            data-testid="string-value"
+          <EuiToolTip
+            title={!isValid ? noEditableText : undefined}
+            anchorClassName={styles.tooltipAnchor}
+            className={styles.tooltip}
+            position="left"
+            data-testid="string-value-tooltip"
           >
-            {areaValue !== ''
-              ? (isValid
+            <EuiText
+              className={styles.stringValue}
+              onClick={() => isEditable && setIsEdit(true)}
+              style={{ whiteSpace: 'break-spaces' }}
+              data-testid="string-value"
+            >
+              {areaValue !== ''
                 ? value
-                : (
-                  <EuiToolTip
-                    title={noEditableText}
-                    className={styles.tooltip}
-                    position="bottom"
-                    data-testid="string-value-tooltip"
-                  >
-                    <>{value}</>
-                  </EuiToolTip>
-                )
-              )
-              : (!isLoading && (<span style={{ fontStyle: 'italic' }}>Empty</span>))}
-          </EuiText>
+                : (!isLoading && (<span style={{ fontStyle: 'italic' }}>Empty</span>))}
+            </EuiText>
+          </EuiToolTip>
         )}
         {isEditItem && (
           <InlineItemEditor
@@ -253,6 +243,7 @@ const StringDetailsTable = (props: Props) => {
               disabled={loading}
               inputRef={textAreaRef}
               className={cx(styles.stringTextArea, { [styles.areaWarning]: isDisabled })}
+              style={{ maxHeight: containerRef.current ? containerRef.current?.clientHeight - 80 : '100%' }}
               data-testid="string-value"
             />
           </InlineItemEditor>

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/styles.module.scss

@@ -6,14 +6,10 @@ $outer-height: 220px;
 $outer-height-mobile: 340px;
 
 .container {
-  @include euiScrollBar;
   padding: 20px 16px 20px;
-
   max-height: calc(100vh - #{$outer-height});
-  overflow-y: auto;
-  overflow-x: hidden;
-  word-break: break-word;
 
+  overflow: hidden;
   color: var(--euiTextSubduedColor);
   flex: 1;
   position: relative;
@@ -29,10 +25,12 @@ $outer-height-mobile: 340px;
 }
 
 .stringValue {
-  font: inherit !important;
-  color: inherit !important;
-  padding: 0 !important;
-  background: inherit !important;
+  @include euiScrollBar;
+  overflow-y: auto;
+  overflow-x: hidden;
+  word-break: break-word;
+  line-height: 1.2;
+  width: 100%;
 
   pre {
     background-color: transparent !important;
@@ -41,17 +39,19 @@ $outer-height-mobile: 340px;
 }
 
 .stringTextArea {
-  max-height: calc(100vh - #{$outer-height} - 55px);
-  @media only screen and (max-width: 767px) {
-    max-height: calc(100vh - #{$outer-height-mobile} - 55px);
-  }
-
   &.areaWarning {
     border-color: var(--euiColorWarningLight) !important;
     background-image: none !important;
   }
 }
 
+.tooltipAnchor {
+  display: inline-flex !important;
+  height: auto;
+  max-height: 100%;
+  width: 100%;
+}
+
 .stringFooterBtn {
   &:global(.euiButton) {
     color: var(--euiTextSubduedColor) !important;