Redesign screen/page "List of networks" (#13560)
Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Elliot Winkler <elliot.winkler@gmail.com>feature/default_network_editable
VSaric
3 years ago
committed by
GitHub
parent
8174aaa6b5
commit
8184b150cb
@ -0,0 +1,114 @@ |
||||
import React, { useState, useContext } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Fuse from 'fuse.js'; |
||||
import InputAdornment from '@material-ui/core/InputAdornment'; |
||||
import TextField from '../../../../components/ui/text-field'; |
||||
import { I18nContext } from '../../../../contexts/i18n'; |
||||
import SearchIcon from '../../../../components/ui/search-icon'; |
||||
|
||||
export default function CustomContentSearch({ |
||||
onSearch, |
||||
error, |
||||
networksList, |
||||
searchQueryInput, |
||||
}) { |
||||
const t = useContext(I18nContext); |
||||
const [searchIconColor, setSearchIconColor] = useState( |
||||
'var(--color-icon-muted)', |
||||
); |
||||
|
||||
const networksListArray = Object.values(networksList); |
||||
const networksSearchFuse = new Fuse(networksListArray, { |
||||
shouldSort: true, |
||||
threshold: 0.2, |
||||
location: 0, |
||||
distance: 100, |
||||
maxPatternLength: 32, |
||||
minMatchCharLength: 1, |
||||
keys: ['label', 'labelKey'], |
||||
}); |
||||
|
||||
const handleSearch = async (searchQuery) => { |
||||
if (searchQuery === '') { |
||||
setSearchIconColor('var(--color-icon-muted)'); |
||||
} else { |
||||
setSearchIconColor('var(--color-icon-default)'); |
||||
} |
||||
|
||||
const fuseSearchResult = networksSearchFuse.search(searchQuery); |
||||
const results = searchQuery ? [...fuseSearchResult] : networksListArray; |
||||
await onSearch({ searchQuery, results }); |
||||
}; |
||||
|
||||
const renderStartAdornment = () => { |
||||
return ( |
||||
<InputAdornment position="start"> |
||||
<SearchIcon color={searchIconColor} /> |
||||
</InputAdornment> |
||||
); |
||||
}; |
||||
|
||||
const renderEndAdornment = () => { |
||||
return ( |
||||
<> |
||||
{searchQueryInput && ( |
||||
<InputAdornment |
||||
className="imageclosectn" |
||||
position="end" |
||||
onClick={() => handleSearch('')} |
||||
> |
||||
<i |
||||
className="fa fa-times networks-tab__imageclose" |
||||
width="17" |
||||
heigth="17" |
||||
title="Close" |
||||
/> |
||||
</InputAdornment> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
return ( |
||||
<TextField |
||||
id="search-networks" |
||||
data-testid="search-networks" |
||||
placeholder={t('customContentSearch')} |
||||
type="text" |
||||
value={searchQueryInput} |
||||
onChange={(e) => handleSearch(e.target.value)} |
||||
error={error} |
||||
fullWidth |
||||
autoFocus |
||||
autoComplete="off" |
||||
classes={{ |
||||
inputRoot: 'networks-tab__networks-list__custom-search-network', |
||||
}} |
||||
startAdornment={renderStartAdornment()} |
||||
endAdornment={renderEndAdornment()} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
CustomContentSearch.propTypes = { |
||||
/** |
||||
* The function searches the list of networks depending on |
||||
* the entered parameter and returns the entire list of |
||||
* networks when the user clicks on 'X' on the search tab |
||||
*/ |
||||
onSearch: PropTypes.func, |
||||
/** |
||||
* An error message is displayed when a user searches for a specific |
||||
* network on the search tab and that network does not exist |
||||
* in the networks list |
||||
*/ |
||||
error: PropTypes.string, |
||||
/** |
||||
* The list of networks available for search. |
||||
*/ |
||||
networksList: PropTypes.array, |
||||
/** |
||||
* Search for a specific network(s) by label or labelKey |
||||
*/ |
||||
searchQueryInput: PropTypes.string, |
||||
}; |
||||
@ -0,0 +1,23 @@ |
||||
import React from 'react'; |
||||
import testData from '../../../../../.storybook/test-data'; |
||||
import CustomContentSearch from './custom-content-search'; |
||||
|
||||
export default { |
||||
title: 'Pages/Settings/NetworksTab/CustomContentSearch', |
||||
id: __filename, |
||||
argTypes: { |
||||
error: { |
||||
control: 'text', |
||||
}, |
||||
searchQueryInput: { |
||||
control: 'text', |
||||
}, |
||||
onSearch: { |
||||
action: 'onSearch', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export const CustomContentSearchComponent = (args) => { |
||||
return <CustomContentSearch {...args} networksList={testData.networkList} />; |
||||
}; |
||||
@ -0,0 +1,110 @@ |
||||
import React from 'react'; |
||||
import { fireEvent, render, screen } from '@testing-library/react'; |
||||
import Fuse from 'fuse.js'; |
||||
import configureStore from '../../../../store/store'; |
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers'; |
||||
import testData from '../../../../../.storybook/test-data'; |
||||
import CustomContentSearch from './custom-content-search'; |
||||
|
||||
function renderComponent({ componentProps = {} } = {}) { |
||||
const store = configureStore({}); |
||||
return renderWithProvider(<CustomContentSearch {...componentProps} />, store); |
||||
} |
||||
|
||||
describe('CustomContentSearch', () => { |
||||
it('should render custom content search correctly', () => { |
||||
const onSearch = jest.fn(); |
||||
const wrapper = renderComponent({ |
||||
componentProps: { onSearch, networksList: testData.networkList }, |
||||
}); |
||||
expect(wrapper.getByTestId('search-networks')).toBeDefined(); |
||||
}); |
||||
|
||||
it('should check placeholder text in TextField input', () => { |
||||
const onSearch = jest.fn(); |
||||
const wrapper = renderComponent({ |
||||
componentProps: { onSearch, networksList: testData.networkList }, |
||||
}); |
||||
const { getByPlaceholderText } = wrapper; |
||||
expect( |
||||
getByPlaceholderText('Search for a previously added network'), |
||||
).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('re-render the same component with different props', () => { |
||||
const onSearch = jest.fn(); |
||||
const { rerender } = render( |
||||
<CustomContentSearch |
||||
onSearch={onSearch} |
||||
networksList={[]} |
||||
searchQueryInput="" |
||||
/>, |
||||
); |
||||
const input = screen.getByTestId('search-networks'); |
||||
expect(input.value).toBe(''); |
||||
rerender( |
||||
<CustomContentSearch |
||||
onSearch={onSearch} |
||||
networksList={[]} |
||||
searchQueryInput="Polygon" |
||||
/>, |
||||
); |
||||
expect(input.value).toBe('Polygon'); |
||||
}); |
||||
|
||||
it('should call onSearch prop with input value', () => { |
||||
const onSearch = jest.fn(); |
||||
const wrapper = renderComponent({ |
||||
componentProps: { |
||||
onSearch, |
||||
networksList: [], |
||||
searchQueryInput: 'Avalanche', |
||||
}, |
||||
}); |
||||
const input = wrapper.getByTestId('search-networks'); |
||||
fireEvent.change(input, { target: { value: 'Polygon' } }); |
||||
expect(input.value).toBe('Avalanche'); |
||||
}); |
||||
|
||||
it('should check if error is shown if search does not return any network from the list', () => { |
||||
const onSearch = jest.fn(); |
||||
const networksSearchFuse = new Fuse(testData.networkList, { |
||||
keys: ['label', 'labelKey'], |
||||
}); |
||||
const fuseSearchResult = networksSearchFuse.search('Optimism'); |
||||
const wrapper = renderComponent({ |
||||
componentProps: { |
||||
onSearch, |
||||
networksList: testData.networkList, |
||||
searchQueryInput: 'Optimism', |
||||
error: 'No matching results found.', |
||||
}, |
||||
}); |
||||
const input = wrapper.getByTestId('search-networks'); |
||||
expect(fuseSearchResult).toHaveLength(0); |
||||
fireEvent.change(input, { |
||||
target: { error: 'No matching results found.' }, |
||||
}); |
||||
expect(input.error).toBe('No matching results found.'); |
||||
}); |
||||
|
||||
it('should check if error is not shown if search return some network from the list', () => { |
||||
const onSearch = jest.fn(); |
||||
const networksSearchFuse = new Fuse(testData.networkList, { |
||||
keys: ['label', 'labelKey'], |
||||
}); |
||||
const fuseSearchResult = networksSearchFuse.search('ropsten'); |
||||
const wrapper = renderComponent({ |
||||
componentProps: { |
||||
onSearch, |
||||
networksList: testData.networkList, |
||||
searchQueryInput: 'Avalanche', |
||||
error: '', |
||||
}, |
||||
}); |
||||
const input = wrapper.getByTestId('search-networks'); |
||||
expect(fuseSearchResult).toHaveLength(1); |
||||
fireEvent.change(input, { target: { error: '' } }); |
||||
expect(input.error).toBe(''); |
||||
}); |
||||
}); |
||||
@ -0,0 +1 @@ |
||||
export { default } from './custom-content-search'; |
||||
@ -0,0 +1,28 @@ |
||||
import React from 'react'; |
||||
import testData from '../../../../../.storybook/test-data'; |
||||
import NetworksList from './networks-list'; |
||||
|
||||
export default { |
||||
title: 'Pages/Settings/NetworksTab/NetworksList', |
||||
id: __filename, |
||||
argTypes: { |
||||
networkDefaultedToProvider: { |
||||
control: 'boolean', |
||||
}, |
||||
networkIsSelected: { |
||||
control: 'boolean', |
||||
}, |
||||
networksToRender: { |
||||
control: 'array', |
||||
}, |
||||
}, |
||||
args: { |
||||
networkDefaultedToProvider: false, |
||||
networkIsSelected: false, |
||||
networksToRender: testData.networkList, |
||||
}, |
||||
}; |
||||
|
||||
export const NetworksListComponent = (args) => { |
||||
return <NetworksList {...args} />; |
||||
}; |
||||
Loading…
Reference in new issue