feat(new-ui): clear input button

Author: sonic16x

lib/static/new-ui/components/NameFilter/index.tsx

@@ -2,7 +2,7 @@ import React, {ChangeEvent, ReactNode, useCallback, useMemo, useState} from 'rea
 import {debounce} from 'lodash';
 import {useDispatch, useSelector} from 'react-redux';
 import {Icon, TextInput} from '@gravity-ui/uikit';
-import {FontCase} from '@gravity-ui/icons';
+import {FontCase, Xmark} from '@gravity-ui/icons';
 import * as actions from '@/static/modules/actions';
 import {getIsInitialized} from '@/static/new-ui/store/selectors';
 import {NameFilterButton} from './NameFilterButton';
@@ -31,6 +31,11 @@ export const NameFilter = (): ReactNode => {
         updateNameFilter(event.target.value);
     }, [setNameFilter, updateNameFilter]);
 
+    const onClear = useCallback((): void => {
+        setNameFilter('');
+        search('', useMatchCaseFilter, useRegexFilter, page, false, dispatch);
+    }, [setNameFilter, useMatchCaseFilter, useRegexFilter, page]);
+
     const isInitialized = useSelector(getIsInitialized);
 
     const onCaseSensitiveClick = (): void => {
@@ -74,17 +79,27 @@ export const NameFilter = (): ReactNode => {
                 qa="name-filter"
             />
             <div className={styles['buttons-wrapper']}>
+                {testNameFilter && (
+                    <NameFilterButton
+                        selected={false}
+                        tooltip="Clear filter"
+                        onClick={onClear}
+                        qa="clear-name-filter"
+                    >
+                        <Icon data={Xmark}/>
+                    </NameFilterButton>
+                )}
                 <NameFilterButton
                     selected={useMatchCaseFilter}
-                    tooltip={'Match case'}
+                    tooltip="Match case"
                     onClick={onCaseSensitiveClick}
                     qa="match-case"
                 >
                     <Icon data={FontCase}/>
                 </NameFilterButton>
                 <NameFilterButton
                     selected={useRegexFilter}
-                    tooltip={'Regex'}
+                    tooltip="Regex"
                     onClick={onRegexClick}
                     className={styles['buttons-wrapper__regex']}
                     qa="regex"

lib/static/new-ui/components/SettingsPanel/index.tsx

@@ -56,7 +56,7 @@ export function SettingsPanel(): ReactNode {
 
     return <AsidePanel title={'Settings'}>
         <PanelSection title={'Base Host'} description={<>URLs in Meta and in test steps&apos; commands are affected by this.</>}>
-            <TextInput onChange={onBaseHostChange} value={baseHost}/>
+            <TextInput onChange={onBaseHostChange} value={baseHost} hasClear />
         </PanelSection>
         <Divider orientation={'horizontal'} className={styles.divider}/>
         <PanelSection title={'New UI'} description={'Minimalistic yet informative, the new UI offers a cleaner look and optimised screen space usage.'}>

lib/static/new-ui/components/TabsSelect/index.tsx

@@ -14,7 +14,10 @@ interface TabsSelectOptionProps {
 
 const TabsSelectOption = ({count, icon, title}: TabsSelectOptionProps): ReactNode => (
     <div className={styles['test-status-filter-option']}>
-        {!icon ? <span>{title}</span> : icon}<span className={styles['test-status-filter-option__count']}>{count}</span>
+        {!icon ? <span>{title}</span> : icon}
+        <span data-qa={`${title.toLowerCase()}-count`} className={styles['test-status-filter-option__count']}>
+            {count}
+        </span>
     </div>
 );
 

lib/static/new-ui/components/TreeViewItemSubtitle/index.tsx

@@ -87,7 +87,7 @@ export function TreeViewItemSubtitle(props: TreeViewItemSubtitleProps): ReactNod
 
     if (props.item.errorStack) {
         return (
-            <div className={classNames(styles['tree-view-item-subtitle__error-stack'], props.className)}>
+            <div data-qa="error-stack-item" className={classNames(styles['tree-view-item-subtitle__error-stack'], props.className)}>
                 {(props.item.errorTitle + '\n' + stripAnsi(props.item.errorStack)).trim()}
             </div>
         );

test/func/tests/common/new-ui/suites-page/name-filter.testplane.js

@@ -13,30 +13,35 @@ if (process.env.TOOL === 'testplane') {
                         regexButton = await browser.$('[data-qa="regex"]');
                     });
 
-                    it('usual search', async ({browser}) => {
+                    it('usual search', async () => {
                         await searchInput.setValue('failed');
-                        await browser.pause(1000);
-                        await browser.assertView('body');
                     });
 
-                    it('empty result', async ({browser}) => {
+                    it('empty text', async () => {
+                        await searchInput.setValue('');
+                    });
+
+                    it('empty result', async () => {
                         await searchInput.setValue('not found');
-                        await browser.pause(1000);
-                        await browser.assertView('body');
                     });
 
-                    it('match case', async ({browser}) => {
+                    it('match case', async () => {
                         await matchCaseButton.click();
                         await searchInput.setValue('FAILED');
-                        await browser.pause(1000);
-                        await browser.assertView('body');
                     });
 
-                    it('regex', async ({browser}) => {
+                    it('regex', async () => {
                         await searchInput.setValue('failed *');
                         await regexButton.click();
+                    });
+
+                    afterEach(async ({browser}) => {
                         await browser.pause(1000);
-                        await browser.assertView('body');
+                        await browser.assertView(
+                            'sidebar',
+                            '[data-qa="suites-tree-card"]',
+                            {ignoreElements: ['img', 'div[data-qa="error-stack-item"]']}
+                        );
                     });
                 });
             });