RI-7817: clear search button spacing (#5274)

pd-redis · web-flow · commit 2438ebb93283 · 2025-12-01T15:02:12.000+02:00
* fix(ui): migrate MultiSearch styles to styled-components

Migrate MultiSearch component from SCSS modules to styled-components
for better theme integration and consistency.

References: #RI-7817
diff --git a/redisinsight/ui/src/components/multi-search/MultiSearch.styles.ts b/redisinsight/ui/src/components/multi-search/MultiSearch.styles.ts
@@ -0,0 +1,175 @@
+import { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { TextInput } from 'uiSrc/components/base/inputs'
+import {
+  ActionIconButton,
+  IconButton,
+} from 'uiSrc/components/base/forms/buttons'
+import GroupBadge from 'uiSrc/components/group-badge'
+
+interface StyledMultiSearchProps extends HTMLAttributes<HTMLDivElement> {
+  $isFocused: boolean
+}
+
+interface StyledSuggestionProps extends HTMLAttributes<HTMLLIElement> {
+  $isFocused?: boolean
+}
+
+export const StyledMultiSearch = styled(Row)<StyledMultiSearchProps>`
+  border: 1px solid
+    ${({ theme, $isFocused }: { theme: Theme; $isFocused: boolean }) =>
+      $isFocused
+        ? theme.components.input.states.focused.borderColor
+        : theme.components.input.states.normal.borderColor};
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.components.input.states.normal.bgColor};
+  border-radius: 4px;
+
+  position: relative;
+  flex: 1;
+  height: 100%;
+  padding: 5px 6px 5px 0;
+  background-repeat: no-repeat;
+  background-size: 0 100%;
+  transition:
+    box-shadow 150ms ease-in,
+    background-image 150ms ease-in,
+    background-size 150ms ease-in,
+    background-color 150ms ease-in;
+`
+/**
+ * Auto-suggestions dropdown container
+ * Replaces: .autoSuggestions
+ */
+export const StyledAutoSuggestions = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  background-color: ${({ theme }) => theme.components.select.dropdown.bgColor};
+  border: 1px solid
+    ${({ theme }) => theme.components.select.states.disabled.borderColor};
+  position: absolute;
+  top: calc(100% + ${({ theme }) => theme.core.space.space025});
+  left: 0;
+  width: 100%;
+  min-width: calc(
+    ${({ theme }) => theme.core.space.space550} * 4
+  ); // 176px instead of hardcoded 180px
+
+  border-radius: ${({ theme }) => theme.core.space.space050};
+  z-index: 1001;
+  padding: ${({ theme }) => theme.core.space.space050} 0 0;
+`
+
+export const StyledMultiSearchWrapper = styled(Row)<
+  React.HTMLAttributes<HTMLDivElement>
+>`
+  flex: 1;
+  padding-bottom: 0;
+  height: 100%;
+  min-height: 36px;
+`
+
+export const StyledClearHistory = styled.li<
+  React.HTMLAttributes<HTMLDivElement>
+>`
+  border-top: 1px solid
+    ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral400};
+  padding: 8px 10px;
+  text-align: left;
+
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme }) =>
+      theme.components.select.dropdown.option.states.highlighted.bgColor};
+  }
+`
+
+export const StyledSearchInput = styled(TextInput)`
+  flex: 1;
+  background-color: transparent;
+  max-width: 100%;
+  border: none;
+  height: 100%;
+  padding: 0 6px 0 10px;
+  background-image: none;
+`
+
+/**
+ * Remove button within suggestion item
+ * Replaces: .suggestionRemoveBtn
+ * Note: Defined before StyledSuggestion so it can be referenced in selectors
+ */
+export const StyledSuggestionRemoveBtn = styled(IconButton)`
+  flex-shrink: 0;
+  visibility: hidden;
+  pointer-events: none;
+`
+
+/**
+ * Individual suggestion item in the dropdown
+ * Replaces: .suggestion
+ */
+export const StyledSuggestion = styled.li<StyledSuggestionProps>`
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: ${({ theme }) => theme.core.space.space050}
+    ${({ theme }) => theme.core.space.space100};
+  cursor: default;
+
+  ${({ $isFocused, theme }) =>
+    $isFocused &&
+    `background: ${theme.components.select.dropdown.option.states.highlighted.bgColor};`}
+
+  &:hover {
+    background: ${({ theme }) =>
+      theme.components.select.dropdown.option.states.highlighted.bgColor};
+  }
+
+  /* Show remove button on hover or when focused */
+  &:hover ${StyledSuggestionRemoveBtn} {
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  ${({ $isFocused }) =>
+    $isFocused &&
+    `& ${StyledSuggestionRemoveBtn} { 
+    visibility: visible; 
+    pointer-events: auto; 
+    }`}
+`
+
+/**
+ * GroupBadge wrapper within suggestion item
+ * Replaces: .suggestionOption
+ */
+export const StyledSuggestionOption = styled(GroupBadge)`
+  margin-right: ${({ theme }) => theme.core.space.space100};
+`
+
+/**
+ * Text content within a suggestion item
+ * Replaces: .suggestionText
+ */
+export const StyledSuggestionText = styled.span<
+  HTMLAttributes<HTMLSpanElement>
+>`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  flex-grow: 1;
+  line-height: 1.4;
+`
+/**
+ * Clear/Reset filters button
+ * Replaces: .clearButton
+ */
+export const StyledClearButton = styled(ActionIconButton)`
+  margin-left: ${({ theme }) => theme.core.space.space050};
+`
diff --git a/redisinsight/ui/src/components/multi-search/MultiSearch.tsx b/redisinsight/ui/src/components/multi-search/MultiSearch.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
-import cx from 'classnames'
 
 import * as keys from 'uiSrc/constants/keys'
-import { TextInput } from 'uiSrc/components/base/inputs'
 import { GroupBadge, RiTooltip } from 'uiSrc/components'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
 import { Nullable } from 'uiSrc/utils'
@@ -12,49 +10,23 @@ import {
   SearchIcon,
   SwitchIcon,
 } from 'uiSrc/components/base/icons'
-import {
-  ActionIconButton,
-  IconButton,
-} from 'uiSrc/components/base/forms/buttons'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { ProgressBarLoader } from 'uiSrc/components/base/display'
-import styles from './styles.module.scss'
-import styled from 'styled-components'
-import { Theme } from 'uiSrc/components/base/theme/types'
-
-interface StyledMultiSearchProps extends React.HTMLAttributes<HTMLDivElement> {
-  $isFocused: boolean
-}
-
-const StyledMultiSearch = styled.div<StyledMultiSearchProps>`
-  border: 1px solid
-    ${({ theme, $isFocused }: { theme: Theme; $isFocused: boolean }) =>
-      $isFocused
-        ? theme.components.input.states.focused.borderColor
-        : theme.components.input.states.normal.borderColor};
-  background-color: ${({ theme }: { theme: Theme }) =>
-    theme.components.input.states.normal.bgColor};
-  border-radius: 4px;
-`
-const StyledAutoSuggestions = styled.div<React.HTMLAttributes<HTMLDivElement>>`
-  background-color: ${({ theme }: { theme: Theme }) =>
-    theme.components.select.dropdown.bgColor};
-  border-color: ${({ theme }: { theme: Theme }) =>
-    theme.components.select.states.disabled.borderColor};
-`
-const StyledSuggestion = styled.li<React.HTMLAttributes<HTMLLIElement>>`
-  &:hover {
-    background: ${({ theme }: { theme: Theme }) =>
-      theme.components.select.dropdown.option.states.highlighted.bgColor};
-  }
-`
+import {
+  StyledAutoSuggestions,
+  StyledClearButton,
+  StyledClearHistory,
+  StyledMultiSearch,
+  StyledMultiSearchWrapper,
+  StyledSearchInput,
+  StyledSuggestion,
+  StyledSuggestionOption,
+  StyledSuggestionRemoveBtn,
+  StyledSuggestionText,
+} from './MultiSearch.styles'
 
-const StyledClearHistory = styled.li<React.HTMLAttributes<HTMLDivElement>>`
-  &:hover {
-    background: ${({ theme }: { theme: Theme }) =>
-      theme.components.select.dropdown.option.states.highlighted.bgColor};
-  }
-`
+import { Text } from 'uiSrc/components/base/text'
 
 interface MultiSearchSuggestion {
   options: null | Array<{
@@ -201,18 +173,14 @@ const MultiSearch = (props: Props) => {
 
   return (
     <OutsideClickDetector onOutsideClick={exitAutoSuggestions}>
-      <div
-        className={cx(styles.multiSearchWrapper, className)}
+      <StyledMultiSearchWrapper
+        align="center"
+        className={className}
         onKeyDown={handleKeyDown}
         role="presentation"
         data-testid="multi-search"
       >
-        <StyledMultiSearch
-          $isFocused={isInputFocus}
-          className={cx(styles.multiSearch, {
-            [styles.isFocused]: isInputFocus,
-          })}
-        >
+        <StyledMultiSearch align="center" gap="m" $isFocused={isInputFocus}>
           <div>
             {options.map((option) => (
               <GroupBadge
@@ -223,8 +191,7 @@ const MultiSearch = (props: Props) => {
               />
             ))}
           </div>
-          <TextInput
-            className={styles.multiSearchInput}
+          <StyledSearchInput
             placeholder={placeholder}
             value={value}
             onKeyDown={handleKeyDown}
@@ -237,7 +204,6 @@ const MultiSearch = (props: Props) => {
           {showAutoSuggestions && !!suggestionOptions?.length && (
             <StyledAutoSuggestions
               role="presentation"
-              className={styles.autoSuggestions}
               data-testid="suggestions"
             >
               {suggestions?.loading && (
@@ -252,28 +218,21 @@ const MultiSearch = (props: Props) => {
                     value && (
                       <StyledSuggestion
                         key={id}
-                        className={cx(styles.suggestion, {
-                          [styles.focused]: focusedItem === index,
-                        })}
+                        $isFocused={focusedItem === index}
                         onClick={() => handleApplySuggestion(index)}
                         role="presentation"
                         data-testid={`suggestion-item-${id}`}
                       >
                         {option && (
-                          <GroupBadge
+                          <StyledSuggestionOption
                             type={option}
                             compressed={compressed}
-                            className={styles.suggestionOption}
                           />
                         )}
-                        <span
-                          className={styles.suggestionText}
-                          data-testid="suggestion-item-text"
-                        >
+                        <StyledSuggestionText data-testid="suggestion-item-text">
                           {value}
-                        </span>
-                        <IconButton
-                          className={styles.suggestionRemoveBtn}
+                        </StyledSuggestionText>
+                        <StyledSuggestionRemoveBtn
                           icon={CancelSlimIcon}
                           color="primary"
                           aria-label="Remove History Record"
@@ -289,7 +248,6 @@ const MultiSearch = (props: Props) => {
               </ul>
               <StyledClearHistory
                 role="presentation"
-                className={styles.clearHistory}
                 onClick={() =>
                   handleDeleteSuggestion(
                     suggestionOptions?.map((item) => item.id),
@@ -298,18 +256,19 @@ const MultiSearch = (props: Props) => {
                 data-testid="clear-history-btn"
               >
                 <RiIcon type="EraserIcon" style={{ marginRight: 6 }} />
-                <span>Clear history</span>
+                <Text component="span" size="m">
+                  Clear history
+                </Text>
               </StyledClearHistory>
             </StyledAutoSuggestions>
           )}
           {(value || !!options.length) && (
             <RiTooltip content="Reset Filters" position="bottom">
-              <ActionIconButton
+              <StyledClearButton
                 icon={CancelSlimIcon}
                 size="XS"
                 aria-label="Reset Filters"
                 onClick={onClear}
-                className={styles.clearButton}
                 data-testid="reset-filter-btn"
                 variant="secondary"
               />
@@ -336,15 +295,14 @@ const MultiSearch = (props: Props) => {
           {disableSubmit && (
             <RiTooltip
               position="top"
-              anchorClassName={styles.anchorSubmitBtn}
               content="Please choose index in order to preform the search"
             >
               {SubmitBtn()}
             </RiTooltip>
           )}
           {!disableSubmit && SubmitBtn()}
         </StyledMultiSearch>
-      </div>
+      </StyledMultiSearchWrapper>
     </OutsideClickDetector>
   )
 }
diff --git a/redisinsight/ui/src/components/multi-search/styles.module.scss b/redisinsight/ui/src/components/multi-search/styles.module.scss
