fix: No match scenario in search (#1667)

Co-authored-by: Alex Varchuk <[email protected]>

Author: raghavi92

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');
+  })
 });

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<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>
     );
   }

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',