diff --git a/superset-frontend/src/components/SearchInput/SearchInput.test.jsx b/superset-frontend/src/components/SearchInput/SearchInput.test.jsx
index a5d324d100..8de2794d4e 100644
--- a/superset-frontend/src/components/SearchInput/SearchInput.test.jsx
+++ b/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();
+ return mount(
+
+
+ ,
+ );
};
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();
});
diff --git a/superset-frontend/src/components/SearchInput/index.tsx b/superset-frontend/src/components/SearchInput/index.tsx
index ba7eb2d95f..7ca7026f33 100644
--- a/superset-frontend/src/components/SearchInput/index.tsx
+++ b/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 (
onSubmit()}
/>
onClear()}
/>
)}