From 4e77a96df22fc42dc3f321e26c3c501e701a2bcf Mon Sep 17 00:00:00 2001
From: ArtemHoruzhenko <artsiom.kharuzhenka@gmail.com>
Date: Tue, 16 Sep 2025 10:57:37 +0300
Subject: [PATCH 1/4] RI-7431: Fix columns popover layout

---
 .../components/keys-header/KeysHeader.tsx     | 106 +++++++++---------
 1 file changed, 55 insertions(+), 51 deletions(-)

diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
index 96a219d091..3a06689833 100644
--- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
+++ b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
@@ -1,15 +1,9 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/no-this-in-sfc */
-import cx from 'classnames'
 import React, { Ref, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
-import {
-  IconType,
-  ColumnsIcon,
-  EqualIcon,
-  FoldersIcon,
-} from 'uiSrc/components/base/icons'
+import { IconType, EqualIcon, FoldersIcon } from 'uiSrc/components/base/icons'
 import KeysSummary from 'uiSrc/components/keys-summary'
 import {
   SCAN_COUNT_DEFAULT,
@@ -50,15 +44,15 @@ import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { BrowserColumns, KeyValueFormat } from 'uiSrc/constants'
 
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { setConnectivityError } from 'uiSrc/slices/app/connectivity'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import styles from './styles.module.scss'
 import { ButtonGroup } from 'uiSrc/components/base/forms/button-group/ButtonGroup'
 import styled from 'styled-components'
-import {TextButton} from '@redis-ui/components'
-import {Text} from 'uiSrc/components/base/text'
+import { ToggleButton } from '@redis-ui/components'
+import { Text } from 'uiSrc/components/base/text'
 
 const HIDE_REFRESH_LABEL_WIDTH = 640
 
@@ -368,65 +362,75 @@ const KeysHeader = (props: Props) => {
                     panelClassName={styles.popoverWrapper}
                     closePopover={() => setColumnsConfigShown(false)}
                     button={
-                      <TextButton
-                        onClick={toggleColumnsConfigVisibility}
+                      <ToggleButton
+                        onPressedChange={toggleColumnsConfigVisibility}
                         className={styles.columnsButton}
                         data-testid="btn-columns-actions"
                         aria-label="columns"
+                        pressed={columnsConfigShown}
                       >
                         <RiIcon size="m" type="ColumnsIcon" />
                         <Text size="s">Columns</Text>
-                      </TextButton>
+                      </ToggleButton>
                     }
                   >
-                    <Row align="center" gap="m">
-                      <FlexItem grow>
+                    <Col gap="m">
+                      <FlexItem>
+                        <Row align="center" gap="m">
+                          <FlexItem grow>
+                            <Checkbox
+                              id="show-key-size"
+                              name="show-key-size"
+                              label="Key size"
+                              checked={shownColumns.includes(
+                                BrowserColumns.Size,
+                              )}
+                              onChange={(e) =>
+                                changeColumnsShown(
+                                  e.target.checked,
+                                  BrowserColumns.Size,
+                                )
+                              }
+                              data-testid="show-key-size"
+                              className={styles.checkbox}
+                            />
+                          </FlexItem>
+                          <FlexItem grow>
+                            <RiTooltip
+                              content="Hide the key size to avoid performance issues when working with large keys."
+                              position="top"
+                              anchorClassName="flex-row"
+                            >
+                              <RiIcon
+                                className={styles.infoIcon}
+                                type="InfoIcon"
+                                size="m"
+                                style={{ cursor: 'pointer' }}
+                                data-testid="key-size-info-icon"
+                              />
+                            </RiTooltip>
+                          </FlexItem>
+                        </Row>
+                      </FlexItem>
+                      <FlexItem>
                         <Checkbox
-                          id="show-key-size"
-                          name="show-key-size"
-                          label="Key size"
-                          checked={shownColumns.includes(BrowserColumns.Size)}
+                          id="show-ttl"
+                          name="show-ttl"
+                          label="TTL"
+                          checked={shownColumns.includes(BrowserColumns.TTL)}
                           onChange={(e) =>
                             changeColumnsShown(
                               e.target.checked,
-                              BrowserColumns.Size,
+                              BrowserColumns.TTL,
                             )
                           }
-                          data-testid="show-key-size"
-                          className={styles.checkbox}
+                          data-testid="show-ttl"
                         />
                       </FlexItem>
-                      <FlexItem grow>
-                        <RiTooltip
-                          content="Hide the key size to avoid performance issues when working with large keys."
-                          position="top"
-                          anchorClassName="flex-row"
-                        >
-                          <RiIcon
-                            className={styles.infoIcon}
-                            type="InfoIcon"
-                            size="m"
-                            style={{ cursor: 'pointer' }}
-                            data-testid="key-size-info-icon"
-                          />
-                        </RiTooltip>
-                      </FlexItem>
-                    </Row>
-                    <Checkbox
-                      id="show-ttl"
-                      name="show-ttl"
-                      label="TTL"
-                      checked={shownColumns.includes(BrowserColumns.TTL)}
-                      onChange={(e) =>
-                        changeColumnsShown(e.target.checked, BrowserColumns.TTL)
-                      }
-                      data-testid="show-ttl"
-                    />
+                    </Col>
                   </RiPopover>
                 </FlexItem>
-                <FlexItem>
-                  {ViewSwitch()}
-                </FlexItem>
+                <FlexItem>{ViewSwitch()}</FlexItem>
               </Row>
             </FlexItem>
           </Row>

From 67a42b31cfc653b9522a83396760bd20c6d686ed Mon Sep 17 00:00:00 2001
From: ArtemHoruzhenko <artsiom.kharuzhenka@gmail.com>
Date: Tue, 16 Sep 2025 15:11:59 +0300
Subject: [PATCH 2/4] RI-7431: Fix tree view settings popover

---
 .../base/forms/combo-box/AutoTag.tsx          |  10 +-
 .../KeyTreeSettings/KeyTreeSettings.tsx       | 118 ++++++++----------
 .../KeyTreeSettings/styles.module.scss        |  95 --------------
 3 files changed, 63 insertions(+), 160 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/styles.module.scss

diff --git a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx
index 7171552d9a..eccc9d27d4 100644
--- a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx
+++ b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx
@@ -128,6 +128,13 @@ export const AutoTag = ({
     }
   }
 
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    const tag = (e.target as HTMLInputElement).value.trim()
+    if (tag !== null && tag.length > 0) {
+      createOption(tag)
+    }
+  }
+
   function getPlaceholder() {
     return selectedOptions?.length && selectedOptions.length > 0
       ? undefined
@@ -186,6 +193,7 @@ export const AutoTag = ({
             placeholder={getPlaceholder()}
             onChange={handleInputChange}
             onKeyDown={handleEnter}
+            onBlur={handleBlur}
             value={tag}
             data-test-subj="autoTagInput"
           />
@@ -210,7 +218,7 @@ const StyledWrapper = styled(Row)`
   position: relative;
   border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral600};
   border-radius: 0.4rem;
-  padding: 0.15rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: ${({ theme }) =>
     theme.semantic.color.background.neutral100};
 `
diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx
index 7bbcea86a2..66791f61b1 100644
--- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx
+++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { isEqual } from 'lodash'
@@ -19,7 +18,7 @@ import {
 } from 'uiSrc/slices/app/context'
 import { comboBoxToArray } from 'uiSrc/utils'
 
-import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+import {Col, FlexItem, Row} from 'uiSrc/components/base/layout/flex'
 import {
   IconButton,
   PrimaryButton,
@@ -30,11 +29,10 @@ import {
   AutoTag,
   AutoTagOption,
 } from 'uiSrc/components/base/forms/combo-box/AutoTag'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { RiPopover } from 'uiSrc/components/base'
 import { Theme } from 'uiSrc/components/base/theme/types'
-import styles from './styles.module.scss'
+import { FormField } from 'uiSrc/components/base/forms/FormField'
 
 export interface Props {
   loading: boolean
@@ -42,10 +40,7 @@ export interface Props {
 const sortOptions = [SortOrder.ASC, SortOrder.DESC].map((value) => ({
   value,
   inputDisplay: (
-    <span
-      data-testid={`tree-view-sorting-item-${value}`}
-      className={styles.selectItem}
-    >
+    <span data-testid={`tree-view-sorting-item-${value}`}>
       Key name {value}
     </span>
   ),
@@ -142,69 +137,64 @@ const KeyTreeSettings = ({ loading }: Props) => {
     setSorting(value)
   }
 
+  const StyledCol = styled(Col)`
+    width: 300px;
+  `
+
   return (
-    <div className={styles.container}>
-      <RiPopover
-        ownFocus={false}
-        anchorPosition="downLeft"
-        isOpen={isPopoverOpen}
-        anchorClassName={styles.anchorWrapper}
-        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper)}
-        closePopover={closePopover}
-        button={button}
-      >
-        <Col gap="s">
-          <FlexItem grow className={styles.row} />
-          <FlexItem grow className={styles.row}>
-            <AutoTag
-              layout="horizontal"
-              label="Delimiter"
-              placeholder=":"
-              delimiter=" "
-              selectedOptions={delimiters}
-              onCreateOption={(del) =>
-                setDelimiters([...delimiters, { label: del }])
-              }
-              onChange={(selectedOptions) => setDelimiters(selectedOptions)}
-              className={styles.combobox}
-              data-testid="delimiter-combobox"
-            />
-          </FlexItem>
-          <FlexItem className={styles.row}>
-            <div className={styles.label}>
-              <RiIcon type="DescendingIcon" className={styles.sortIcon} />
-              Sort by
-            </div>
+    <RiPopover
+      ownFocus={false}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      button={button}
+    >
+      <StyledCol gap="l">
+        <FlexItem>
+          <AutoTag
+            layout="horizontal"
+            label="Delimiter"
+            placeholder=":"
+            delimiter=" "
+            selectedOptions={delimiters}
+            onCreateOption={(del) =>
+              setDelimiters([...delimiters, { label: del }])
+            }
+            onChange={(selectedOptions) => setDelimiters(selectedOptions)}
+            data-testid="delimiter-combobox"
+          />
+        </FlexItem>
+        <FlexItem>
+          <FormField layout="horizontal" label="Sort by">
             <RiSelect
               options={sortOptions}
-              valueRender={({ option }) => option.inputDisplay ?? option.value}
+              valueRender={({ option }) =>
+                option.inputDisplay ?? option.value
+              }
               value={sorting}
-              className={styles.select}
               onChange={(value: SortOrder) => onChangeSort(value)}
               data-testid="tree-view-sorting-select"
             />
-          </FlexItem>
-          <FlexItem className={styles.row}>
-            <div className={styles.footer}>
-              <SecondaryButton
-                size="s"
-                data-testid="tree-view-cancel-btn"
-                onClick={closePopover}
-              >
-                Cancel
-              </SecondaryButton>
-              <PrimaryButton
-                size="s"
-                data-testid="tree-view-apply-btn"
-                onClick={handleApply}
-              >
-                Apply
-              </PrimaryButton>
-            </div>
-          </FlexItem>
-        </Col>
-      </RiPopover>
-    </div>
+          </FormField>
+        </FlexItem>
+        <FlexItem />
+        <FlexItem>
+          <Row gap="m" justify="end">
+            <SecondaryButton
+              data-testid="tree-view-cancel-btn"
+              onClick={closePopover}
+            >
+              Cancel
+            </SecondaryButton>
+            <PrimaryButton
+              data-testid="tree-view-apply-btn"
+              onClick={handleApply}
+            >
+              Apply
+            </PrimaryButton>
+          </Row>
+        </FlexItem>
+      </StyledCol>
+    </RiPopover>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/styles.module.scss b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/styles.module.scss
deleted file mode 100644
index bbca5995a7..0000000000
--- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/styles.module.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-.container {
-  margin-left: 8px;
-  margin-top: 1px;
-
-  :global(.euiPopover),
-  .anchorWrapper {
-    height: 100%;
-  }
-}
-
-.popoverWrapper {
-  width: 300px;
-  padding: 14px 16px !important;
-  border: none !important;
-  background-color: var(--euiColorLightestShade) !important;
-
-  :global {
-    .euiPopover__panelArrow {
-      &::before,
-      &::after {
-        border-bottom-color: var(--euiColorLightestShade) !important;
-      }
-    }
-    .euiFormControlLayout {
-      min-height: 26px !important;
-      height: auto !important;
-      width: auto;
-    }
-  }
-
-  .select {
-    width: 188px;
-    height: 24px !important;
-    font-size: 12px;
-    border-radius: 4px;
-    background-color: var(--euiColorEmptyShade) !important;
-  }
-}
-
-.label {
-  display: flex;
-  width: 66px;
-  font-size: 12px;
-  color: var(--euiTextSubduedColor) !important;
-}
-
-.title {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.row {
-  flex-direction: row !important;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.sortIcon {
-  margin-right: 4px;
-}
-
-.selectItem {
-  min-height: 24px !important;
-}
-
-.footer {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 4px;
-
-  button {
-    margin-left: 8px;
-  }
-}
-
-.combobox {
-  padding-bottom: 6px;
-
-  :global(.euiComboBox__input) {
-    height: 30px !important;
-  }
-  :global(.euiComboBox__inputWrap) {
-    max-height: 200px;
-    overflow: auto;
-    max-width: 210px !important;
-    padding: 2px 4px !important;
-    min-height: 34px !important;
-    border-radius: 4px !important;
-  }
-  :global(.euiComboBoxPlaceholder) {
-    height: 30px !important;
-    line-height: 30px;
-  }
-}

From eedb28b608607b3ccc9f2f1863799cdd053783cd Mon Sep 17 00:00:00 2001
From: ArtemHoruzhenko <artsiom.kharuzhenka@gmail.com>
Date: Tue, 16 Sep 2025 15:54:35 +0300
Subject: [PATCH 3/4] RI-7431: Address review comments

---
 .../ui/src/components/base/forms/buttons/ToggleButton.tsx | 8 ++++++++
 .../ui/src/components/base/forms/buttons/index.ts         | 1 +
 .../ui/src/components/base/forms/combo-box/AutoTag.tsx    | 5 +++--
 .../pages/browser/components/keys-header/KeysHeader.tsx   | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx

diff --git a/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx
new file mode 100644
index 0000000000..15d0203274
--- /dev/null
+++ b/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { ToggleButton as RedisUiToggleButton } from '@redis-ui/components'
+
+export type ButtonProps = React.ComponentProps<typeof RedisUiToggleButton>
+
+export const ToggleButton = ({ ...props }: ButtonProps) => {
+  return <RedisUiToggleButton {...props} />
+}
diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.ts b/redisinsight/ui/src/components/base/forms/buttons/index.ts
index 6500e979e0..5adf5f966a 100644
--- a/redisinsight/ui/src/components/base/forms/buttons/index.ts
+++ b/redisinsight/ui/src/components/base/forms/buttons/index.ts
@@ -5,5 +5,6 @@ export { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton'
 export { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton'
 export { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton'
 export { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton'
+export { ToggleButton } from 'uiSrc/components/base/forms/buttons/ToggleButton'
 
 export type { IconType } from 'uiSrc/components/base/forms/buttons/IconButton'
diff --git a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx
index eccc9d27d4..13087b4e52 100644
--- a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx
+++ b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx
@@ -3,7 +3,7 @@ import { Chip, FormField, Input } from '@redis-ui/components'
 import cn from 'classnames'
 import styled from 'styled-components'
 import { CancelSlimIcon } from 'uiSrc/components/base/icons'
-import { CommonProps } from 'uiSrc/components/base/theme/types'
+import { CommonProps, Theme } from 'uiSrc/components/base/theme/types'
 import { Row } from 'uiSrc/components/base/layout/flex'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 
@@ -218,7 +218,8 @@ const StyledWrapper = styled(Row)`
   position: relative;
   border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral600};
   border-radius: 0.4rem;
-  padding: 0 0.5rem;
+  padding: ${({ theme }: { theme: Theme }) =>
+    `${theme.core.space.space000} ${theme.core.space.space050}`};
   background-color: ${({ theme }) =>
     theme.semantic.color.background.neutral100};
 `
diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
index 3a06689833..abe03b12d0 100644
--- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
+++ b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
@@ -51,7 +51,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import styles from './styles.module.scss'
 import { ButtonGroup } from 'uiSrc/components/base/forms/button-group/ButtonGroup'
 import styled from 'styled-components'
-import { ToggleButton } from '@redis-ui/components'
+import { ToggleButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
 
 const HIDE_REFRESH_LABEL_WIDTH = 640

From 700cb08c6fad1b4be0f5f2a65a942b9476bb56b2 Mon Sep 17 00:00:00 2001
From: ArtemHoruzhenko <artsiom.kharuzhenka@gmail.com>
Date: Wed, 17 Sep 2025 09:13:07 +0300
Subject: [PATCH 4/4] RI-7431: fix review comments

---
 .../src/components/base/forms/buttons/ToggleButton.tsx   | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx
index 15d0203274..445cc4d49c 100644
--- a/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx
+++ b/redisinsight/ui/src/components/base/forms/buttons/ToggleButton.tsx
@@ -1,8 +1 @@
-import React from 'react'
-import { ToggleButton as RedisUiToggleButton } from '@redis-ui/components'
-
-export type ButtonProps = React.ComponentProps<typeof RedisUiToggleButton>
-
-export const ToggleButton = ({ ...props }: ButtonProps) => {
-  return <RedisUiToggleButton {...props} />
-}
+export { ToggleButton } from '@redis-ui/components'