Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-25 01:53:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: No match scenario in search (#1667)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
e2e/integration/search.e2e.ts
View File

@ -53,4 +53,10 @@ describe('Search', () => {
getSearchInput().type('int', { force: true }); getSearchInput().type('int', { force: true });
cy.get('[data-markjs]').should('exist'); 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');
})
}); });

9
src/components/SearchBox/SearchBox.tsx
View File

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

2
src/services/Labels.ts
View File

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