IBX-9837: Add more options to SearchNoResults React component: noResultsHints, extraClasses and searchText is no longer required

Author: tischsoic

src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff

@@ -286,6 +286,11 @@
         <target state="new">Try more general keywords.</target>
         <note>key: search.no_results.hint.more_general</note>
       </trans-unit>
+      <trans-unit id="9a697642846df0197cb9e2c0987d6e53d9bb3bc4" resname="search.no_results_without_query">
+        <source>No results found</source>
+        <target state="new">No results found</target>
+        <note>key: search.no_results_without_query</note>
+      </trans-unit>
       <trans-unit id="2b096dbbbcadb6a316903dce656706b528229e21" resname="search.placeholder">
         <source>Search...</source>
         <target state="new">Search...</target>

src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js

@@ -2,40 +2,51 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Icon from '../../../common/icon/icon';
+
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
-const SearchNoResults = ({ searchText }) => {
+import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names';
+
+const SearchNoResults = ({ searchText, noResultsHints: noResultsHintsCustom, extraClasses }) => {
     const Translator = getTranslator();
-    const noResultsLabel = Translator.trans(
-        /*@Desc("No results found for %query%")*/ 'search.no_results',
-        { query: searchText },
-        'ibexa_universal_discovery_widget',
-    );
-    const noResultsHints = [
-        Translator.trans(
-            /*@Desc("Check the spelling of keywords.")*/ 'search.no_results.hint.check_spelling',
-            {},
-            'ibexa_universal_discovery_widget',
-        ),
-        Translator.trans(
-            /*@Desc("Try more general keywords.")*/ 'search.no_results.hint.more_general',
-            {},
-            'ibexa_universal_discovery_widget',
-        ),
-        Translator.trans(
-            /*@Desc("Try different keywords.")*/ 'search.no_results.hint.different_kewords',
-            {},
-            'ibexa_universal_discovery_widget',
-        ),
-        Translator.trans(
-            /*@Desc("Try fewer keywords. Reducing keywords results in more matches.")*/ 'search.no_results.hint.fewer_keywords',
-            {},
-            'ibexa_universal_discovery_widget',
-        ),
-    ];
+    const className = createCssClassNames({
+        'c-search-no-results': true,
+        [extraClasses]: true,
+    });
+    const noResultsLabel = searchText
+        ? Translator.trans(
+              /*@Desc("No results found for %query%")*/ 'search.no_results',
+              { query: searchText },
+              'ibexa_universal_discovery_widget',
+          )
+        : Translator.trans(/*@Desc("No results found")*/ 'search.no_results_without_query', {}, 'ibexa_universal_discovery_widget');
+    const noResultsHints = noResultsHintsCustom
+        ? noResultsHintsCustom
+        : [
+              Translator.trans(
+                  /*@Desc("Check the spelling of keywords.")*/ 'search.no_results.hint.check_spelling',
+                  {},
+                  'ibexa_universal_discovery_widget',
+              ),
+              Translator.trans(
+                  /*@Desc("Try more general keywords.")*/ 'search.no_results.hint.more_general',
+                  {},
+                  'ibexa_universal_discovery_widget',
+              ),
+              Translator.trans(
+                  /*@Desc("Try different keywords.")*/ 'search.no_results.hint.different_kewords',
+                  {},
+                  'ibexa_universal_discovery_widget',
+              ),
+              Translator.trans(
+                  /*@Desc("Try fewer keywords. Reducing keywords results in more matches.")*/ 'search.no_results.hint.fewer_keywords',
+                  {},
+                  'ibexa_universal_discovery_widget',
+              ),
+          ];
 
     return (
-        <div className="c-search-no-results">
+        <div className={className}>
             <img src="/bundles/ibexaadminui/img/no-results.svg" />
             <h2 className="c-search-no-results__no-results-title">{noResultsLabel}</h2>
             <div className="c-search-no-results__no-results-subtitle">
@@ -56,7 +67,15 @@ const SearchNoResults = ({ searchText }) => {
 };
 
 SearchNoResults.propTypes = {
-    searchText: PropTypes.string.isRequired,
+    extraClasses: PropTypes.string,
+    searchText: PropTypes.string,
+    noResultsHints: PropTypes.arrayOf(PropTypes.string),
+};
+
+SearchNoResults.defaultProps = {
+    extraClasses: '',
+    searchText: null,
+    noResultsHints: null,
 };
 
 export default SearchNoResults;