diff --git a/e2e/integration/search.e2e.ts b/e2e/integration/search.e2e.ts index a44cafb7..b1a7d4a7 100644 --- a/e2e/integration/search.e2e.ts +++ b/e2e/integration/search.e2e.ts @@ -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'); + }) }); diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index 21900862..f0427eb8 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -16,6 +16,7 @@ import { SearchResultsBox, SearchWrap, } from './styled.elements'; +import { l } from '../../services/Labels'; export interface SearchBoxProps { search: SearchStore; @@ -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 { this.setState({ results: [], + noResults: false, term: '', activeItemIdx: -1, }); @@ -95,6 +100,7 @@ export class SearchBox extends React.PureComponent )} + {this.state.term && this.state.noResults ? ( + {l('noResultsFound')} + ) : null} ); } diff --git a/src/services/Labels.ts b/src/services/Labels.ts index 71b83e58..378ef143 100644 --- a/src/services/Labels.ts +++ b/src/services/Labels.ts @@ -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',