fix: No match scenario in search (#1667)

Co-authored-by: Alex Varchuk <olexandr.varchuk@gmail.com>
This commit is contained in:
raghavi92 2021-10-11 20:04:20 +05:30 committed by GitHub
parent 8e75f9929b
commit 352a851857
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 0 deletions

View File

@ -53,4 +53,10 @@ describe('Search', () => {
getSearchInput().type('int', { force: true });
cy.get('[data-markjs]').should('exist');
});
it('should show proper message when no search results are found', () => {
getSearchResults().should('not.exist');
getSearchInput().type('xzss', {force: true});
getSearchResults().should('exist').should('contain', 'No results found');
})
});

View File

@ -16,6 +16,7 @@ import {
SearchResultsBox,
SearchWrap,
} from './styled.elements';
import { l } from '../../services/Labels';
export interface SearchBoxProps {
search: SearchStore<string>;
@ -28,6 +29,7 @@ export interface SearchBoxProps {
export interface SearchBoxState {
results: SearchResult[];
noResults: boolean;
term: string;
activeItemIdx: number;
}
@ -39,6 +41,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
super(props);
this.state = {
results: [],
noResults: false,
term: '',
activeItemIdx: -1,
};
@ -47,6 +50,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
clearResults(term: string) {
this.setState({
results: [],
noResults: false,
term,
});
this.props.marker.unmark();
@ -55,6 +59,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
clear = () => {
this.setState({
results: [],
noResults: false,
term: '',
activeItemIdx: -1,
});
@ -95,6 +100,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
setResults(results: SearchResult[], term: string) {
this.setState({
results,
noResults: results.length === 0
});
this.props.marker.mark(term);
}
@ -166,6 +172,9 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
</SearchResultsBox>
</PerfectScrollbarWrap>
)}
{this.state.term && this.state.noResults ? (
<SearchResultsBox data-role="search:results">{l('noResultsFound')}</SearchResultsBox>
) : null}
</SearchWrap>
);
}

View File

@ -10,6 +10,7 @@ export interface LabelsConfig {
arrayOf: string;
webhook: string;
const: string;
noResultsFound: string;
download: string;
downloadSpecification: string;
responses: string;
@ -32,6 +33,7 @@ const labels: LabelsConfig = {
arrayOf: 'Array of ',
webhook: 'Event',
const: 'Value',
noResultsFound: 'No results found',
download: 'Download',
downloadSpecification: 'Download OpenAPI specification',
responses: 'Responses',