pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* initial commit

* fix test

* fix lint
This commit is contained in:
Phillip Kelley-Dotson 2021-07-04 22:59:56 -07:00 committed by GitHub
parent b20293d1b1
commit fb322b5bab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
superset-frontend/src/components/SearchInput/SearchInput.test.jsx
View File

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

13
superset-frontend/src/components/SearchInput/index.tsx
View File

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