refactor(ui): migrate MultiSearch from SCSS modules to styled-components

pd-redis · pd-redis · commit 42f6e6ba328b · 2025-12-01T12:39:51.000+02:00
Replace styles.module.scss with styled-components using theme spacing
and semantic colors. Remove all SCSS class references and add styled
components for suggestion items, text, options, and buttons.

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
@@ -1,12 +1,22 @@
+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 React.HTMLAttributes<HTMLDivElement> {
+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 }) =>
@@ -29,25 +39,25 @@ export const StyledMultiSearch = styled(Row)<StyledMultiSearchProps>`
     background-size 150ms ease-in,
     background-color 150ms ease-in;
 `
-export const StyledAutoSuggestions = styled.div<
-  React.HTMLAttributes<HTMLDivElement>
->`
-  background-color: ${({ theme }: { theme: Theme }) =>
-    theme.components.select.dropdown.bgColor};
+/**
+ * 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: Theme }) =>
-      theme.components.select.states.disabled.borderColor};
+    ${({ theme }) => theme.components.select.states.disabled.borderColor};
   position: absolute;
-  top: calc(100% + 2px);
+  top: calc(100% + ${({ theme }) => theme.core.space.space025});
   left: 0;
   width: 100%;
-  min-width: 180px;
+  min-width: calc(
+    ${({ theme }) => theme.core.space.space550} * 4
+  ); // 176px instead of hardcoded 180px
 
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.core.space.space050};
   z-index: 1001;
-  padding: 4px 0 0;
-
-  font-size: 13px;
+  padding: ${({ theme }) => theme.core.space.space050} 0 0;
 `
 
 export const StyledMultiSearchWrapper = styled(Row)<
@@ -59,13 +69,6 @@ export const StyledMultiSearchWrapper = styled(Row)<
   min-height: 36px;
 `
 
-export const StyledSuggestion = styled.li<React.HTMLAttributes<HTMLLIElement>>`
-  &:hover {
-    background: ${({ theme }: { theme: Theme }) =>
-      theme.components.select.dropdown.option.states.highlighted.bgColor};
-  }
-`
-
 export const StyledClearHistory = styled.li<
   React.HTMLAttributes<HTMLDivElement>
 >`
@@ -95,3 +98,78 @@ export const StyledSearchInput = styled(TextInput)`
   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,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react'
-import cx from 'classnames'
 
 import * as keys from 'uiSrc/constants/keys'
 import { GroupBadge, RiTooltip } from 'uiSrc/components'
@@ -11,21 +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 {
   StyledAutoSuggestions,
+  StyledClearButton,
   StyledClearHistory,
   StyledMultiSearch,
   StyledMultiSearchWrapper,
   StyledSearchInput,
   StyledSuggestion,
+  StyledSuggestionOption,
+  StyledSuggestionRemoveBtn,
+  StyledSuggestionText,
 } from './MultiSearch.styles'
-import styles from './styles.module.scss'
+
+import { Text } from 'uiSrc/components/base/text'
 
 interface MultiSearchSuggestion {
   options: null | Array<{
@@ -174,7 +175,7 @@ const MultiSearch = (props: Props) => {
     <OutsideClickDetector onOutsideClick={exitAutoSuggestions}>
       <StyledMultiSearchWrapper
         align="center"
-        className={cx(styles.multiSearchWrapper, className)}
+        className={className}
         onKeyDown={handleKeyDown}
         role="presentation"
         data-testid="multi-search"
@@ -203,7 +204,6 @@ const MultiSearch = (props: Props) => {
           {showAutoSuggestions && !!suggestionOptions?.length && (
             <StyledAutoSuggestions
               role="presentation"
-              className={styles.autoSuggestions}
               data-testid="suggestions"
             >
               {suggestions?.loading && (
@@ -218,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"
@@ -263,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"
               />
@@ -301,7 +295,6 @@ const MultiSearch = (props: Props) => {
           {disableSubmit && (
             <RiTooltip
               position="top"
-              anchorClassName={styles.anchorSubmitBtn}
               content="Please choose index in order to preform the search"
             >
               {SubmitBtn()}
diff --git a/redisinsight/ui/src/components/multi-search/styles.module.scss b/redisinsight/ui/src/components/multi-search/styles.module.scss
