RI-7431: hash details

redisinsight/ui/src/components/confirmation-popover/ConfirmationPopover.tsx

@@ -10,20 +10,22 @@ const PopoverContentWrapper = styled(Col)`
 `
 
 export interface ConfirmationPopoverProps
-  extends Omit<RiPopoverProps, 'children'> {
-  title?: string
-  message?: string
+  extends Omit<RiPopoverProps, 'children' | 'title'> {
+  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 (
     <RiPopover {...rest}>
       <PopoverContentWrapper gap="l" data-testid="confirm-popover">
         {title && <Title size="S">{title}</Title>}
         {message && <Text size="m">{message}</Text>}
+        {appendInfo}
         <Row>{confirmButton}</Row>
       </PopoverContentWrapper>
     </RiPopover>

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 {

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<HTMLElement>) => 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<HTMLDivElement> = useRef(null)
@@ -223,7 +226,7 @@ const InlineItemEditor = (props: Props) => {
                   handleFormSubmit(e as React.MouseEvent<HTMLElement>)
                 }
                 style={{
-                  ...customStyles?.inputContainer
+                  ...customStyles?.inputContainer,
                 }}
               >
                 <FlexItem grow>
@@ -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={
                           <DestructiveButton
                             aria-label="Save"
+                            size="small"
                             className={cx(styles.btn, styles.saveBtn)}
                             disabled={isDisabledApply()}
                             onClick={handleFormSubmit}

redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { RiPopover, RiTooltip } from 'uiSrc/components/base'
+import { RiTooltip } from 'uiSrc/components/base'
 import { DeleteIcon } from 'uiSrc/components/base/icons'
 import { RedisString } from 'uiSrc/slices/interfaces'
 import { isTruncatedString } from 'uiSrc/utils'
@@ -10,8 +10,8 @@ import {
   EmptyButton,
   IconButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { Text } from 'uiSrc/components/base/text'
 import styles from './styles.module.scss'
+import ConfirmationPopover from 'uiSrc/components/confirmation-popover'
 
 export interface Props {
   header?: JSX.Element | string
@@ -94,7 +94,7 @@ const PopoverDelete = (props: Props) => {
   )
 
   return (
-    <RiPopover
+    <ConfirmationPopover
       key={item}
       anchorPosition="leftCenter"
       ownFocus
@@ -104,28 +104,20 @@ const PopoverDelete = (props: Props) => {
       anchorClassName="deleteFieldPopover"
       button={isDisabled ? deleteButtonWithTooltip : deleteButton}
       onClick={(e) => e.stopPropagation()}
-    >
-      <div className={styles.popover}>
-        <Text size="m" component="div">
-          {!!header && (
-            <h4>
-              <b>{header}</b>
-            </h4>
-          )}
-          <Text size="s">{text}</Text>
-          {appendInfo}
-        </Text>
-        <div className={styles.popoverFooter}>
-          <DestructiveButton
-            icon={DeleteIcon}
-            onClick={() => handleDeleteItem(itemRaw || item)}
-            data-testid={testid || 'remove'}
-          >
-            Remove
-          </DestructiveButton>
-        </div>
-      </div>
-    </RiPopover>
+      title={header}
+      message={text}
+      appendInfo={appendInfo}
+      confirmButton={
+        <DestructiveButton
+          size="small"
+          icon={DeleteIcon}
+          onClick={() => handleDeleteItem(itemRaw || item)}
+          data-testid={testid || 'remove'}
+        >
+          Remove
+        </DestructiveButton>
+      }
+    />
   )
 }
 

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/KeyDetailsHeaderFormatter.tsx

@@ -75,7 +75,7 @@
           >
             <>
               {width >= MIDDLE_SCREEN_RESOLUTION ? (
-                <OptionText color="subdued">{text}</OptionText>
+                <OptionText>{text}</OptionText>
               ) : (
                 <ControlsIcon
                   type={

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -383,7 +383,6 @@ const HashDetailsTable = (props: Props) => {
 
         return (
           <Text
-            color="subdued"
             size="s"
             style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
             component="div"
@@ -573,9 +572,9 @@ const HashDetailsTable = (props: Props) => {
             onApply={(value) => handleApplyEditExpire(fieldItem, value, 'ttl')}
             testIdPrefix="hash-ttl"
             validation={validateTTLNumber}
+            variant="underline"
             isEditDisabled={isTruncatedFieldName}
             editToolTipContent={editTooltipContent}
-
           >
             <div className="innerCellAsCell">
               {expire === -1 ? (

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<HTMLElement>) => 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}`}
       >
-        <Text
-          color="subdued"
-          size="s"
-          style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
-        >
+        <Text size="s" style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}>
           <div style={{ display: 'flex' }}>{children}</div>
         </Text>
         {isHovering && (
@@ -102,6 +101,7 @@ const EditableInput = (props: Props) => {
             onEdit?.(false)
           }}
           validation={validation}
+          variant={variant}
         />
       </div>
     </StopPropagation>

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;
   }
 }

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}`}
       >
         <Text
-          color="subdued"
           size="s"
           style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
         >

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
-  }
-}
-