FE: Fix tests, icon styles

Author: Vixtir

frontend/src/components/Topics/List/ListPage.tsx

@@ -65,7 +65,7 @@ const ListPage: React.FC = () => {
       <ControlPanelWrapper hasInput>
         <Search
           placeholder="Search by Topic Name"
-          actions={<Fts resourceName="topics" />}
+          extraActions={<Fts resourceName="topics" />}
         />
         <label>
           <Switch

frontend/src/components/common/Fts/Fts.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FtsIcon from 'components/common/Icons/FtsIcon';
 import styled from 'styled-components';
 
-import useFts from './useFts';
+import useFts, { FtsAvailableResource } from './useFts';
 
 export const IconWrapper = styled.span.attrs<{ active: boolean }>(() => ({
   role: 'button',
@@ -11,15 +11,14 @@ export const IconWrapper = styled.span.attrs<{ active: boolean }>(() => ({
   display: inline-block;
   &:hover {
     cursor: pointer;
-    color: ${({ theme }) => theme.icons.ftsIcon.active};
   }
   color: ${(props) =>
     props.active
       ? props.theme.icons.ftsIcon.active
       : props.theme.icons.ftsIcon.normal};
 `;
 
-const Fts = ({ resourceName }: { resourceName: string }) => {
+const Fts = ({ resourceName }: { resourceName: FtsAvailableResource }) => {
   const { handleSwitch, isFtsEnabled } = useFts(resourceName);
 
   return (

frontend/src/components/common/Fts/useFts.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-type FtsAvailableResource = 'topics';
+export type FtsAvailableResource = 'topics';
 
 const storageName = 'kafbat-ui_fts';
 

frontend/src/components/common/Search/Search.tsx

@@ -1,4 +1,10 @@
-import React, { ComponentRef, ReactNode, useEffect, useRef } from 'react';
+import React, {
+  ComponentRef,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
@@ -19,10 +25,11 @@ const Search: React.FC<SearchProps> = ({
   disabled = false,
   value,
   onChange,
-  actions,
+  extraActions,
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const ref = useRef<ComponentRef<'input'>>(null);
+  const [showIcon, setShowIcon] = useState(!!value || !!searchParams.get('q'));
 
   useEffect(() => {
     if (ref.current !== null && value) {
@@ -31,6 +38,7 @@ const Search: React.FC<SearchProps> = ({
   }, [value]);
 
   const handleChange = useDebouncedCallback((e) => {
+    setShowIcon(!!e.target.value);
     if (ref.current != null) {
       ref.current.value = e.target.value;
     }
@@ -52,16 +60,16 @@ const Search: React.FC<SearchProps> = ({
       searchParams.set('q', '');
       setSearchParams(searchParams);
     }
+
     if (ref.current != null) {
       ref.current.value = '';
     }
     if (onChange) {
       onChange('');
     }
+    setShowIcon(false);
   };
 
-  const showClearIcon = searchParams.get('q');
-
   return (
     <Input
       type="text"
@@ -74,13 +82,16 @@ const Search: React.FC<SearchProps> = ({
       search
       actions={
         <S.Actions>
-          {showClearIcon && (
-            <S.IconButtonWrapper onClick={clearSearchValue}>
+          {showIcon && (
+            <S.IconButtonWrapper
+              onClick={clearSearchValue}
+              data-testid="search-clear-button"
+            >
               <CloseCircleIcon />
             </S.IconButtonWrapper>
           )}
 
-          {actions}
+          {extraActions}
         </S.Actions>
       }
     />

frontend/src/components/common/Search/__tests__/Search.spec.tsx

@@ -2,7 +2,7 @@ import Search from 'components/common/Search/Search';
 import React from 'react';
 import { render } from 'lib/testHelpers';
 import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import { useSearchParams } from 'react-router-dom';
 
 jest.mock('use-debounce', () => ({
@@ -42,23 +42,34 @@ describe('Search', () => {
     expect(screen.queryByPlaceholderText('Search')).toBeInTheDocument();
   });
 
-  it('Clear button is visible', () => {
+  it('Clear button is not visible by default', async () => {
     render(<Search placeholder={placeholder} />);
 
-    const clearButton = screen.getByRole('button');
+    const clearButton = screen.queryByTestId('search-clear-button');
+    expect(clearButton).not.toBeInTheDocument();
+  });
+
+  it('Clear button is visible if value passed', async () => {
+    render(<Search placeholder={placeholder} value="text" />);
+
+    const clearButton = screen.queryByTestId('search-clear-button');
     expect(clearButton).toBeInTheDocument();
   });
 
   it('Clear button should clear text from input', async () => {
     render(<Search placeholder={placeholder} />);
 
     const searchField = screen.getAllByRole('textbox')[0];
-    await userEvent.type(searchField, 'some text');
-    expect(searchField).toHaveValue('some text');
+    fireEvent.change(searchField, { target: { value: 'hello' } });
+    expect(searchField).toHaveValue('hello');
 
-    const clearButton = screen.getByRole('button');
-    await userEvent.click(clearButton);
+    let clearButton = screen.queryByTestId('search-clear-button');
+    expect(clearButton).toBeInTheDocument();
+    await userEvent.click(clearButton!);
 
     expect(searchField).toHaveValue('');
+
+    clearButton = screen.queryByTestId('search-clear-button');
+    expect(clearButton).not.toBeInTheDocument();
   });
 });

frontend/src/theme/theme.ts

@@ -1544,8 +1544,8 @@ export const darkTheme: ThemeType = {
     },
     menuIcon: Colors.brand[0],
     ftsIcon: {
-      normal: Colors.neutral[20],
-      active: Colors.brand[70],
+      normal: Colors.neutral[50],
+      active: Colors.brand[10],
     },
   },
   textArea: {