refactor: migrate to icons for searchinput icons (#15533)

* initial commit

* fix test

* fix lint

superset-frontend/src/components/SearchInput/SearchInput.test.jsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 
 import SearchInput from 'src/components/SearchInput';
 
@@ -31,7 +32,11 @@ describe('SearchInput', () => {
 
   const factory = overrideProps => {
     const props = { ...defaultProps, ...(overrideProps || {}) };
-    return shallow(<SearchInput {...props} />);
+    return mount(
+      <ThemeProvider theme={supersetTheme}>
+        <SearchInput {...props} />
+      </ThemeProvider>,
+    );
   };
 
   let wrapper;
@@ -53,6 +58,7 @@ describe('SearchInput', () => {
   const typeSearchInput = value => {
     wrapper
       .find('[data-test="search-input"]')
+      .first()
       .props()
       .onChange({ currentTarget: { value } });
   };
@@ -62,6 +68,7 @@ describe('SearchInput', () => {
 
     wrapper
       .find('[data-test="search-input"]')
+      .first()
       .props()
       .onKeyDown({ key: 'Enter' });
 
@@ -72,14 +79,14 @@ describe('SearchInput', () => {
   it('submits on search icon click', () => {
     typeSearchInput('bar');
 
-    wrapper.find('[data-test="search-submit"]').props().onClick();
+    wrapper.find('[data-test="search-submit"]').first().props().onClick();
 
     expect(defaultProps.onSubmit).toHaveBeenCalled();
   });
 
   it('clears on clear icon click', () => {
     const wrapper2 = factory({ value: 'fizz' });
-    wrapper2.find('[data-test="search-clear"]').props().onClick();
+    wrapper2.find('[data-test="search-clear"]').first().props().onClick();
 
     expect(defaultProps.onClear).toHaveBeenCalled();
   });

superset-frontend/src/components/SearchInput/index.tsx

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
+import { styled, useTheme } from '@superset-ui/core';
 import React from 'react';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 
 export interface SearchInputProps {
   onSubmit: () => void;
@@ -53,13 +53,13 @@ const commonStyles = `
   display: block;
   cursor: pointer;
 `;
-const SearchIcon = styled(Icon)`
+const SearchIcon = styled(Icons.Search)`
   ${commonStyles};
   top: 4px;
   left: 2px;
 `;
 
-const ClearIcon = styled(Icon)`
+const ClearIcon = styled(Icons.CancelX)`
   ${commonStyles};
   right: 0px;
   top: 4px;
@@ -73,12 +73,13 @@ export default function SearchInput({
   name,
   value,
 }: SearchInputProps) {
+  const theme = useTheme();
   return (
     <SearchInputWrapper>
       <SearchIcon
+        iconColor={theme.colors.grayscale.base}
         data-test="search-submit"
         role="button"
-        name="search"
         onClick={() => onSubmit()}
       />
       <StyledInput
@@ -98,7 +99,7 @@ export default function SearchInput({
         <ClearIcon
           data-test="search-clear"
           role="button"
-          name="cancel-x"
+          iconColor={theme.colors.grayscale.base}
           onClick={() => onClear()}
         />
       )}