From eb033f56dbaa11a68f4f14c6d22ec4e2792fcc7e Mon Sep 17 00:00:00 2001 From: Roman Sergeenko Date: Tue, 28 Nov 2023 14:50:06 +0100 Subject: [PATCH 1/3] #RI-5206 - fix button state for editing #RI-5207 - fix string details heights --- .../string-details/StringDetails.spec.tsx | 21 ++++++++++++++++++- .../string-details/StringDetails.tsx | 2 +- .../StringDetailsTable.tsx | 21 +++++++------------ .../string-details-table/styles.module.scss | 16 ++++++-------- 4 files changed, 35 insertions(+), 25 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.spec.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.spec.tsx index dbe2cbaebf..2b50cd7536 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.spec.tsx +++ b/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() @@ -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( + + ) + + const editValueBtn = screen.getByTestId(`${EDIT_VALUE_BTN_TEST_ID}`) + expect(editValueBtn).toHaveProperty('disabled', true) + }) + it('"edit-key-value-btn" should render', () => { const { queryByTestId } = render() expect(queryByTestId('edit-key-value-btn')).toBeInTheDocument() diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx index bea335540b..279614065c 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx @@ -56,7 +56,7 @@ const StringDetails = (props: Props) => { setEditItem(!editItem)} /> ) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx index cd92f6115b..f590c9e928 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx +++ b/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(5) + const [rows, setRows] = useState(MIN_ROWS) const [value, setValue] = useState('') const [areaValue, setAreaValue] = useState('') const [viewFormat, setViewFormat] = useState(viewFormatProp) @@ -83,6 +82,7 @@ const StringDetailsTable = (props: Props) => { const textAreaRef: Ref = useRef(null) const viewValueRef: Ref = useRef(null) + const containerRef: Ref = 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(MIN_ROWS) - return + if (calculatedRows > MIN_ROWS) { + setRows(calculatedRows) } - setRows(calculatedRows) }, [viewValueRef, isEditItem]) useMemo(() => { @@ -188,7 +181,7 @@ const StringDetailsTable = (props: Props) => { return ( <> -
+
{isLoading && ( { )} {!isEditItem && ( isEditable && setIsEdit(true)} style={{ whiteSpace: 'break-spaces' }} data-testid="string-value" @@ -253,6 +247,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" /> diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/styles.module.scss index 3ae9881baf..8efcbe220f 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/styles.module.scss +++ b/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,6 +25,11 @@ $outer-height-mobile: 340px; } .stringValue { + @include euiScrollBar; + overflow-y: auto; + overflow-x: hidden; + word-break: break-word; + font: inherit !important; color: inherit !important; padding: 0 !important; @@ -41,11 +42,6 @@ $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; From d401c511266649cfc2f753aee6790dc0b8319a46 Mon Sep 17 00:00:00 2001 From: Roman Sergeenko Date: Wed, 29 Nov 2023 11:57:58 +0100 Subject: [PATCH 2/3] #RI-5213, #RI-5212 - fix tooltip appearing --- .../StringDetailsTable.tsx | 36 +++++++++---------- .../string-details-table/styles.module.scss | 11 +++--- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx index f590c9e928..2094686822 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx @@ -191,28 +191,24 @@ const StringDetailsTable = (props: Props) => { /> )} {!isEditItem && ( - isEditable && setIsEdit(true)} - style={{ whiteSpace: 'break-spaces' }} - data-testid="string-value" + - {areaValue !== '' - ? (isValid + isEditable && setIsEdit(true)} + style={{ whiteSpace: 'break-spaces' }} + data-testid="string-value" + > + {areaValue !== '' ? value - : ( - - <>{value} - - ) - ) - : (!isLoading && (Empty))} - + : (!isLoading && (Empty))} + + )} {isEditItem && ( Date: Wed, 29 Nov 2023 15:33:02 +0100 Subject: [PATCH 3/3] #RI-5213 - fix tooltip position, fix scroll --- .../string-details-table/StringDetailsTable.tsx | 2 +- .../string-details/string-details-table/styles.module.scss | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx index 2094686822..00b0b102ee 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx @@ -195,7 +195,7 @@ const StringDetailsTable = (props: Props) => { title={!isValid ? noEditableText : undefined} anchorClassName={styles.tooltipAnchor} className={styles.tooltip} - position="top" + position="left" data-testid="string-value-tooltip" >