From 1fe57a5828ebcd1955598580e5b36a5b97387ced Mon Sep 17 00:00:00 2001 From: ArtemHoruzhenko Date: Thu, 18 Sep 2025 18:25:06 +0300 Subject: [PATCH] RI-7431: hash details --- .../ConfirmationPopover.tsx | 10 +++-- .../InlineItemEditor.styles.tsx | 15 ++++--- .../inline-item-editor/InlineItemEditor.tsx | 15 ++++--- .../popover-delete/PopoverDelete.tsx | 42 ++++++++----------- .../KeyDetailsHeaderFormatter.tsx | 2 +- .../hash-details-table/HashDetailsTable.tsx | 3 +- .../shared/editable-input/EditableInput.tsx | 10 ++--- .../shared/editable-input/styles.module.scss | 1 - .../editable-textarea/EditableTextArea.tsx | 1 - .../editable-textarea/styles.module.scss | 11 ----- 10 files changed, 49 insertions(+), 61 deletions(-) diff --git a/redisinsight/ui/src/components/confirmation-popover/ConfirmationPopover.tsx b/redisinsight/ui/src/components/confirmation-popover/ConfirmationPopover.tsx index 4c1c7280fc..46e508acf0 100644 --- a/redisinsight/ui/src/components/confirmation-popover/ConfirmationPopover.tsx +++ b/redisinsight/ui/src/components/confirmation-popover/ConfirmationPopover.tsx @@ -10,20 +10,22 @@ const PopoverContentWrapper = styled(Col)` ` export interface ConfirmationPopoverProps - extends Omit { - title?: string - message?: string + extends Omit { + title?: JSX.Element | string + message?: JSX.Element | string + appendInfo?: JSX.Element | string | null confirmButton: React.ReactNode } const ConfirmationPopover = (props: ConfirmationPopoverProps) => { - const { title, message, confirmButton, ...rest } = props + const { title, message, confirmButton, appendInfo, ...rest } = props return ( {title && {title}} {message && {message}} + {appendInfo} {confirmButton} diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx index 5e80fa8549..59d7994bfb 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx @@ -91,8 +91,10 @@ const positions = { right: css` top: 0; left: 100%; + height: 100%; border-radius: 0 10px 10px 0; box-shadow: 0 3px 3px var(--controlsBoxShadowColor); + align-items: center; `, left: css` top: 0; @@ -114,19 +116,20 @@ const designs = { border-radius: 0; box-shadow: none; background-color: inherit !important; - text-align: right; width: 60px; z-index: 4; + display: flex; + align-items: center; + justify-content: center; .popoverWrapper, ${DeclineButton}, ${ApplyButton} { - margin: 6px 3px; height: 24px !important; width: 24px !important; - } - - ${ApplyButton} { - margin-top: 0; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; } svg { diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx index c0f2a79fe7..65bde501ce 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx @@ -26,6 +26,7 @@ import styles from './styles.module.scss' type Positions = 'top' | 'bottom' | 'left' | 'right' | 'inside' type Design = 'default' | 'separate' +type InputVariant = 'outline' | 'underline' export interface Props { onDecline: (event?: React.MouseEvent) => void @@ -59,14 +60,15 @@ export interface Props { approveByValidation?: (value: string) => boolean approveText?: { title: string; text: string } textFiledClassName?: string + variant?: InputVariant styles?: { inputContainer?: { - width?: string, - height?: string, + width?: string + height?: string } input?: { - width?: string, - height?: string, + width?: string + height?: string } actionsContainer?: { width?: string @@ -105,6 +107,7 @@ const InlineItemEditor = (props: Props) => { approveByValidation, approveText, textFiledClassName, + variant, styles: customStyles, } = props const containerEl: Ref = useRef(null) @@ -223,7 +226,7 @@ const InlineItemEditor = (props: Props) => { handleFormSubmit(e as React.MouseEvent) } style={{ - ...customStyles?.inputContainer + ...customStyles?.inputContainer, }} > @@ -242,6 +245,7 @@ const InlineItemEditor = (props: Props) => { loading={isLoading} data-testid="inline-item-editor" autoComplete={autoComplete} + variant={variant} ref={inputRef} /> {expandable && ( @@ -291,6 +295,7 @@ const InlineItemEditor = (props: Props) => { confirmButton={ { ) return ( - { anchorClassName="deleteFieldPopover" button={isDisabled ? deleteButtonWithTooltip : deleteButton} onClick={(e) => e.stopPropagation()} - > -
- - {!!header && ( -

- {header} -

- )} - {text} - {appendInfo} - -
- handleDeleteItem(itemRaw || item)} - data-testid={testid || 'remove'} - > - Remove - -
-
- + title={header} + message={text} + appendInfo={appendInfo} + confirmButton={ + handleDeleteItem(itemRaw || item)} + data-testid={testid || 'remove'} + > + Remove + + } + /> ) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/KeyDetailsHeaderFormatter.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/KeyDetailsHeaderFormatter.tsx index bda14ca628..20d883d829 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/KeyDetailsHeaderFormatter.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/KeyDetailsHeaderFormatter.tsx @@ -75,7 +75,7 @@ const KeyDetailsHeaderFormatter = (props: Props) => { > <> {width >= MIDDLE_SCREEN_RESOLUTION ? ( - {text} + {text} ) : ( { return ( { onApply={(value) => handleApplyEditExpire(fieldItem, value, 'ttl')} testIdPrefix="hash-ttl" validation={validateTTLNumber} + variant="underline" isEditDisabled={isTruncatedFieldName} editToolTipContent={editTooltipContent} - >
{expire === -1 ? ( diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx index d505a660d2..424fb36f4f 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx @@ -4,6 +4,7 @@ import cx from 'classnames' import { RiTooltip } from 'uiSrc/components' import { StopPropagation } from 'uiSrc/components/virtual-table' import InlineItemEditor from 'uiSrc/components/inline-item-editor' +import { Props as InlineItemEditorProps } from 'uiSrc/components/inline-item-editor/InlineItemEditor' import { Text } from 'uiSrc/components/base/text' import { EditIcon } from 'uiSrc/components/base/icons' @@ -23,6 +24,7 @@ export interface Props { onDecline: (event?: React.MouseEvent) => void onApply: (value: string, event: React.MouseEvent) => void testIdPrefix?: string + variant?: InlineItemEditorProps['variant'] } const EditableInput = (props: Props) => { @@ -39,6 +41,7 @@ const EditableInput = (props: Props) => { onDecline, onApply, testIdPrefix = '', + variant, } = props const [isHovering, setIsHovering] = useState(false) @@ -51,11 +54,7 @@ const EditableInput = (props: Props) => { onMouseLeave={() => setIsHovering(false)} data-testid={`${testIdPrefix}_content-value-${field}`} > - +
{children}
 {isHovering && ( @@ -102,6 +101,7 @@ const EditableInput = (props: Props) => { onEdit?.(false) }} validation={validation} + variant={variant} />
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/styles.module.scss index 38571b7009..98a897fa4c 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/styles.module.scss @@ -11,7 +11,6 @@ .editBtnAnchor { position: absolute; - top: 10px; right: 4px; } } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx index c57dc7e788..43a8c679b1 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx @@ -94,7 +94,6 @@ const EditableTextArea = (props: Props) => { data-testid={`${testIdPrefix}_content-value-${field}`} > diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/styles.module.scss index 1664466ad5..290899b6ce 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/styles.module.scss @@ -11,17 +11,6 @@ .editBtnAnchor { position: absolute; - top: 10px; right: 4px; } } - -.textAreaControls { - right: 4px !important; - bottom: 4px !important; - background-color: var(--euiPageBackgroundColor) !important; - :nth-child(2) { - margin-top: -6px - } -} -