From 6212ae98915d1e2dc8eae3ca870906beb905ad10 Mon Sep 17 00:00:00 2001
From: Lionel <lionel@lumographe.fr>
Date: Thu, 7 Feb 2019 15:21:31 +0100
Subject: [PATCH] feat(frontend): allow user to extends search to all documents
 (#497)

* fix(css): fix vertical rythm inside alert

* feat(frontend): allow user to extends search to all documents

* test: update snaptshot

fixes #299
---
 .../docs/css/components/_search.css           |  6 +--
 .../docs/css/global/_layout.css               |  1 +
 .../src/common/Answer.js                      |  2 +-
 .../src/common/FeedbackForm.js                |  5 +-
 .../src/common/FeedbackModal.js               | 10 +++-
 .../src/common/__tests__/FeebackForm.test.js  |  7 +++
 .../__snapshots__/Answer.test.js.snap         | 47 ++++++++++++-------
 .../__snapshots__/FeebackForm.test.js.snap    |  5 ++
 .../__snapshots__/FeedbackModal.test.js.snap  |  5 ++
 .../src/search/Search.js                      | 47 ++++++++++---------
 .../src/search/SearchQuery.js                 | 10 ++--
 .../src/search/SearchResults.js               | 18 +++++--
 .../__snapshots__/Search.test.js.snap         | 16 +++----
 .../__snapshots__/SearchResults.test.js.snap  |  4 +-
 14 files changed, 121 insertions(+), 62 deletions(-)

diff --git a/packages/code-du-travail-css/docs/css/components/_search.css b/packages/code-du-travail-css/docs/css/components/_search.css
index 293b9b59a1..5b6000f4d9 100755
--- a/packages/code-du-travail-css/docs/css/components/_search.css
+++ b/packages/code-du-travail-css/docs/css/components/_search.css
@@ -18,7 +18,7 @@
   flex: 1 1 auto;
   display: flex;
 }
-.search__facets {
+.search__sources {
   position: absolute;
   display: flex;
   align-items: center;
@@ -28,13 +28,13 @@
   border-radius: var(--border-radius-base);
   background-color: var(--color-lighter-grey);
 }
-.facet-icon {
+.select-sources__icon {
   position: absolute;
   width: 1.25rem;
   height: 1.25rem;
   margin: 0 calc(var(--spacing-small) / 2);
 }
-.facet-value {
+.select-sources__value {
   color: var(--color-almost-black);
   font-size: var(--font-size-small);
   border: 1px solid transparent;
diff --git a/packages/code-du-travail-css/docs/css/global/_layout.css b/packages/code-du-travail-css/docs/css/global/_layout.css
index c63a880c3d..e7242addef 100755
--- a/packages/code-du-travail-css/docs/css/global/_layout.css
+++ b/packages/code-du-travail-css/docs/css/global/_layout.css
@@ -185,6 +185,7 @@ It is also possible to nest a `.wrapper-narrow` class in a `.wrapper-dark` or
 
 /* Cancel vertical rhythm for last childs in `.container` or `wrapper-*`. */
 .container > :--vertical-rythm-elements:last-child,
+.alert > :--vertical-rythm-elements:last-child,
 [class^="wrapper-"] > :--vertical-rythm-elements:last-child {
   margin-bottom: 0;
 }
diff --git a/packages/code-du-travail-frontend/src/common/Answer.js b/packages/code-du-travail-frontend/src/common/Answer.js
index 2d63e3f8d0..801a1cac05 100644
--- a/packages/code-du-travail-frontend/src/common/Answer.js
+++ b/packages/code-du-travail-frontend/src/common/Answer.js
@@ -37,7 +37,6 @@ class Answer extends React.Component {
     this.setState({ modalVisible: true });
   };
   closeModal = () => {
-    ReactPiwik.push(["trackEvent", "feedback", "cancel"]);
     this.setState({ modalVisible: false });
   };
   setResults = searchResults => {
@@ -71,6 +70,7 @@ class Answer extends React.Component {
               isOpen={this.state.modalVisible}
               closeModal={this.closeModal}
               query={router.query.q || title}
+              source={router.query.source}
               url={router.asPath}
             />
             <Article
diff --git a/packages/code-du-travail-frontend/src/common/FeedbackForm.js b/packages/code-du-travail-frontend/src/common/FeedbackForm.js
index 9973c5c6b7..9839a3dd1a 100755
--- a/packages/code-du-travail-frontend/src/common/FeedbackForm.js
+++ b/packages/code-du-travail-frontend/src/common/FeedbackForm.js
@@ -17,6 +17,7 @@ class FeedbackForm extends React.Component {
   static propTypes = {
     query: PropTypes.string,
     url: PropTypes.string,
+    source: PropTypes.string.isRequired,
     results: PropTypes.arrayOf(PropTypes.object),
     onSubmit: PropTypes.func.isRequired
   };
@@ -63,6 +64,7 @@ class FeedbackForm extends React.Component {
       motif,
       message,
       email,
+      source: this.props.source,
       url: document.location.href,
       userAgent: typeof navigator !== "undefined" && navigator.userAgent,
       subject: question
@@ -98,7 +100,7 @@ class FeedbackForm extends React.Component {
     }
   }
   render() {
-    const { results, query, url } = this.props;
+    const { results, query, url, source } = this.props;
 
     return (
       <form
@@ -119,6 +121,7 @@ class FeedbackForm extends React.Component {
           name="url"
           value={document ? document.location.href : url}
         />
+        <input type="hidden" name="source" value={source} />
         {results && results.length > 0 && (
           <React.Fragment>
             <h2 className="section__subtitle" style={{ alignSelf: "center" }}>
diff --git a/packages/code-du-travail-frontend/src/common/FeedbackModal.js b/packages/code-du-travail-frontend/src/common/FeedbackModal.js
index 995381d8c3..391390f43c 100644
--- a/packages/code-du-travail-frontend/src/common/FeedbackModal.js
+++ b/packages/code-du-travail-frontend/src/common/FeedbackModal.js
@@ -9,14 +9,19 @@ class FeedbackModal extends React.Component {
     isOpen: PropTypes.bool,
     closeModal: PropTypes.func.isRequired,
     query: PropTypes.string,
+    source: PropTypes.string,
     url: PropTypes.string,
     results: PropTypes.arrayOf(PropTypes.object)
   };
   static defaultProps = {
-    isOpen: false
+    isOpen: false,
+    query: "",
+    source: "Tous contenus",
+    url: "",
+    results: []
   };
   render() {
-    const { results, isOpen, closeModal, query, url } = this.props;
+    const { results, isOpen, closeModal, query, url, source } = this.props;
     return (
       <DialogOverlay
         isOpen={isOpen}
@@ -39,6 +44,7 @@ class FeedbackModal extends React.Component {
             <FeedbackForm
               onSubmit={postFeedback}
               query={query}
+              source={source}
               url={url}
               results={results}
             />
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/FeebackForm.test.js b/packages/code-du-travail-frontend/src/common/__tests__/FeebackForm.test.js
index 83924dc960..05db5c2b7c 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/FeebackForm.test.js
+++ b/packages/code-du-travail-frontend/src/common/__tests__/FeebackForm.test.js
@@ -21,6 +21,7 @@ describe("<FeedbackForm />", () => {
     const { container, getByValue } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={jest.fn()}
       />
@@ -33,6 +34,7 @@ describe("<FeedbackForm />", () => {
     const { getByText } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={jest.fn()}
       />
@@ -47,6 +49,7 @@ describe("<FeedbackForm />", () => {
     const { getByText, getByPlaceholderText } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={onSubmit}
       />
@@ -64,6 +67,7 @@ describe("<FeedbackForm />", () => {
     const { getByText, getByPlaceholderText } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={onSubmit}
       />
@@ -85,6 +89,7 @@ describe("<FeedbackForm />", () => {
     const { getByText, getByPlaceholderText } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={onSubmit}
       />
@@ -104,6 +109,7 @@ describe("<FeedbackForm />", () => {
     const { getByText, queryByText, getByPlaceholderText } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={onSubmit}
       />
@@ -123,6 +129,7 @@ describe("<FeedbackForm />", () => {
     const { getByText, queryByText, getByPlaceholderText } = render(
       <FeedbackForm
         query="Initial query"
+        source="Tous contenus"
         results={results}
         onSubmit={onSubmit}
       />
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap
index 4f9899f79c..4ecd328d57 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap
@@ -51,7 +51,7 @@ exports[`<Answer /> should display feedback modal when click on feedback button
               class="search__fields"
             >
               <label
-                class="search__facets"
+                class="search__sources"
                 for="contentSource"
               >
                 <span
@@ -60,7 +60,7 @@ exports[`<Answer /> should display feedback modal when click on feedback button
                   Filtrer par type de contenu
                 </span>
                 <svg
-                  class="facet-icon"
+                  class="select-sources__icon"
                   viewBox="0 0 49 49"
                 >
                   <title>
@@ -84,9 +84,9 @@ exports[`<Answer /> should display feedback modal when click on feedback button
                   </g>
                 </svg>
                 <select
-                  class="facet-value"
+                  class="select-sources__value"
                   id="contentSource"
-                  name="facet"
+                  name="source"
                 >
                   <option
                     value=""
@@ -410,6 +410,11 @@ exports[`<Answer /> should display feedback modal when click on feedback button
               type="hidden"
               value="http://localhost/"
             />
+            <input
+              name="source"
+              type="hidden"
+              value="Tous contenus"
+            />
             <h2
               class="section__subtitle"
             >
@@ -538,7 +543,7 @@ exports[`<Answer /> should display feedback modal when click on thumbDown 1`] =
               class="search__fields"
             >
               <label
-                class="search__facets"
+                class="search__sources"
                 for="contentSource"
               >
                 <span
@@ -547,7 +552,7 @@ exports[`<Answer /> should display feedback modal when click on thumbDown 1`] =
                   Filtrer par type de contenu
                 </span>
                 <svg
-                  class="facet-icon"
+                  class="select-sources__icon"
                   viewBox="0 0 49 49"
                 >
                   <title>
@@ -571,9 +576,9 @@ exports[`<Answer /> should display feedback modal when click on thumbDown 1`] =
                   </g>
                 </svg>
                 <select
-                  class="facet-value"
+                  class="select-sources__value"
                   id="contentSource"
-                  name="facet"
+                  name="source"
                 >
                   <option
                     value=""
@@ -897,6 +902,11 @@ exports[`<Answer /> should display feedback modal when click on thumbDown 1`] =
               type="hidden"
               value="http://localhost/"
             />
+            <input
+              name="source"
+              type="hidden"
+              value="Tous contenus"
+            />
             <h2
               class="section__subtitle"
             >
@@ -1022,7 +1032,7 @@ exports[`<Answer /> should render 1`] = `
             class="search__fields"
           >
             <label
-              class="search__facets"
+              class="search__sources"
               for="contentSource"
             >
               <span
@@ -1031,7 +1041,7 @@ exports[`<Answer /> should render 1`] = `
                 Filtrer par type de contenu
               </span>
               <svg
-                class="facet-icon"
+                class="select-sources__icon"
                 viewBox="0 0 49 49"
               >
                 <title>
@@ -1055,9 +1065,9 @@ exports[`<Answer /> should render 1`] = `
                 </g>
               </svg>
               <select
-                class="facet-value"
+                class="select-sources__value"
                 id="contentSource"
-                name="facet"
+                name="source"
               >
                 <option
                   value=""
@@ -1418,7 +1428,7 @@ exports[`<Answer /> should render additional content 1`] = `
               class="search__fields"
             >
               <label
-                class="search__facets"
+                class="search__sources"
                 for="contentSource"
               >
                 <span
@@ -1427,7 +1437,7 @@ exports[`<Answer /> should render additional content 1`] = `
                   Filtrer par type de contenu
                 </span>
                 <svg
-                  class="facet-icon"
+                  class="select-sources__icon"
                   viewBox="0 0 49 49"
                 >
                   <title>
@@ -1451,9 +1461,9 @@ exports[`<Answer /> should render additional content 1`] = `
                   </g>
                 </svg>
                 <select
-                  class="facet-value"
+                  class="select-sources__value"
                   id="contentSource"
-                  name="facet"
+                  name="source"
                 >
                   <option
                     value=""
@@ -1780,6 +1790,11 @@ exports[`<Answer /> should render additional content 1`] = `
               type="hidden"
               value="http://localhost/"
             />
+            <input
+              name="source"
+              type="hidden"
+              value="Tous contenus"
+            />
             <h2
               class="section__subtitle"
             >
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeebackForm.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeebackForm.test.js.snap
index 49a0bde2e2..29c5bd4f3e 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeebackForm.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeebackForm.test.js.snap
@@ -18,6 +18,11 @@ exports[`<FeedbackForm /> should render 1`] = `
       type="hidden"
       value="http://localhost/"
     />
+    <input
+      name="source"
+      type="hidden"
+      value="Tous contenus"
+    />
     <h2
       class="section__subtitle"
     >
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeedbackModal.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeedbackModal.test.js.snap
index 357aa51fd0..c3146682e5 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeedbackModal.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeedbackModal.test.js.snap
@@ -52,6 +52,11 @@ exports[`<FeedbackModal /> should render modal when isOpen is true 1`] = `
               type="hidden"
               value="http://localhost/"
             />
+            <input
+              name="source"
+              type="hidden"
+              value="Tous contenus"
+            />
             <h2
               class="section__subtitle"
             >
diff --git a/packages/code-du-travail-frontend/src/search/Search.js b/packages/code-du-travail-frontend/src/search/Search.js
index 70cfbd6002..49183a4007 100755
--- a/packages/code-du-travail-frontend/src/search/Search.js
+++ b/packages/code-du-travail-frontend/src/search/Search.js
@@ -53,7 +53,7 @@ class Search extends React.Component {
     query: this.props.router.query.q || "",
     // query to display the search results
     queryResults: "",
-    facet: "",
+    source: "",
     coord: null,
     excludeSources: "",
     suggestions: [],
@@ -71,10 +71,10 @@ class Search extends React.Component {
           : this.props.router.query.q
       });
     }
-    if (this.props.router.query.facet) {
-      const facet = this.props.router.query.facet;
-      const excludeSources = getExcludeSources(facet);
-      this.setState({ facet, excludeSources });
+    if (this.props.router.query.source) {
+      const source = this.props.router.query.source;
+      const excludeSources = getExcludeSources(source);
+      this.setState({ source, excludeSources });
     }
     if (this.props.router.query.coord) {
       const [lon, lat] = this.props.router.query.coord.split(":");
@@ -90,12 +90,12 @@ class Search extends React.Component {
       const [lon, lat] = this.props.router.query.coord.split(":");
       coord = { lon, lat };
     }
-
+    console.log("route change", { source: this.props.router.query.source });
     this.setState({
       query: this.props.router.query.q,
-      facet: this.props.router.query.facet,
+      source: this.props.router.query.source,
       coord: coord,
-      excludeSources: getExcludeSources(this.props.router.query.facet || ""),
+      excludeSources: getExcludeSources(this.props.router.query.source || ""),
       queryResults: this.props.router.query.search
         ? this.props.router.query.search === "0" && ""
         : this.props.router.query.q
@@ -114,7 +114,7 @@ class Search extends React.Component {
       this.setState({ queryResults: this.state.query, coord: null });
       Router.pushRoute("index", {
         q: this.state.query,
-        facet: this.state.facet
+        source: this.state.source
       });
     }
   };
@@ -125,10 +125,10 @@ class Search extends React.Component {
   };
 
   onChange = event => {
-    if (event.target.name === "facet") {
+    if (event.target.name === "source") {
       Router.pushRoute("index", {
         q: this.state.query,
-        facet: event.target.value
+        source: event.target.value
       });
     } else {
       this.setState({
@@ -140,13 +140,13 @@ class Search extends React.Component {
   onSelect = (suggestion, event) => {
     // prevent onSubmit to be call
     event.preventDefault();
-    const { query, facet } = this.state;
-    if (facet === "annuaire") {
+    const { query, source } = this.state;
+    if (source === "annuaire") {
       const [lon, lat] = suggestion._source.coord;
       Router.pushRoute("index", {
         q: suggestion._source.title,
         coord: `${lon}:${lat}`,
-        facet
+        source
       });
       return;
     }
@@ -167,9 +167,9 @@ class Search extends React.Component {
   };
 
   onSearch = ({ value }) => {
-    const { facet, excludeSources } = this.state;
+    const { source, excludeSources } = this.state;
     const asyncSearchResult =
-      facet === "annuaire"
+      source === "annuaire"
         ? searchAddress(value).then(results =>
             results.map(item => ({
               _source: {
@@ -200,17 +200,18 @@ class Search extends React.Component {
       query,
       queryResults,
       excludeSources,
-      facet,
+      source,
       coord,
       suggestions
     } = this.state;
 
     const queryResultsComponent =
-      facet === "annuaire" ? (
+      source === "annuaire" ? (
         <AddressQuery query={queryResults} coord={coord} />
       ) : (
         <SearchQuery
           query={queryResults}
+          source={source}
           excludeSources={excludeSources}
           fetch={searchResults}
         />
@@ -233,16 +234,16 @@ class Search extends React.Component {
               </header>
               <form className="search__form" onSubmit={this.onFormSubmit}>
                 <div className="search__fields">
-                  <label className="search__facets" htmlFor="contentSource">
+                  <label className="search__sources" htmlFor="contentSource">
                     <span className="hidden">Filtrer par type de contenu</span>
-                    <ReponseIcon className="facet-icon" />
+                    <ReponseIcon className="select-sources__icon" />
                     <select
                       id="contentSource"
-                      className="facet-value"
+                      className="select-sources__value"
                       onChange={this.onChange}
                       onBlur={this.onChange}
-                      value={facet}
-                      name="facet"
+                      value={source}
+                      name="source"
                     >
                       <option value="">Tous contenus</option>
                       <option value="faq">Réponses</option>
diff --git a/packages/code-du-travail-frontend/src/search/SearchQuery.js b/packages/code-du-travail-frontend/src/search/SearchQuery.js
index 27346d5baf..fd7b48f3be 100644
--- a/packages/code-du-travail-frontend/src/search/SearchQuery.js
+++ b/packages/code-du-travail-frontend/src/search/SearchQuery.js
@@ -6,6 +6,7 @@ import SearchResults from "./SearchResults";
 export class SearchQuery extends React.Component {
   static propTypes = {
     query: PropTypes.string,
+    source: PropTypes.string,
     excludeSources: PropTypes.string,
     fetch: PropTypes.func.isRequired,
     render: PropTypes.func
@@ -13,15 +14,16 @@ export class SearchQuery extends React.Component {
 
   static defaultProps = {
     query: "",
+    source: "",
     excludeSources: "",
-    render: ({ status, result, query }) => (
+    render: ({ status, result, query, source }) => (
       <div>
         <div style={{ textAlign: "center" }}>
           {status === "loading" ? "..." : " "}
         </div>
         <div>
           {status === "success" && result && (
-            <SearchResults query={query} data={result} />
+            <SearchResults query={query} data={result} source={source} />
           )}
         </div>
       </div>
@@ -40,12 +42,12 @@ export class SearchQuery extends React.Component {
   }
 
   render() {
-    const { query, excludeSources, render, fetch } = this.props;
+    const { query, excludeSources, render, fetch, source } = this.props;
     return (
       <AsyncFetch
         autoFetch={true}
         fetch={() => fetch(query, excludeSources)}
-        render={args => render({ ...args, query })}
+        render={args => render({ ...args, query, source })}
       />
     );
   }
diff --git a/packages/code-du-travail-frontend/src/search/SearchResults.js b/packages/code-du-travail-frontend/src/search/SearchResults.js
index 4a55360c3e..e7e26d36f2 100755
--- a/packages/code-du-travail-frontend/src/search/SearchResults.js
+++ b/packages/code-du-travail-frontend/src/search/SearchResults.js
@@ -81,6 +81,7 @@ const ResultItem = ({ _source, highlight, query }) => {
 class SearchResults extends React.Component {
   static propTypes = {
     query: PropTypes.string,
+    source: PropTypes.string,
     data: PropTypes.shape({
       hits: PropTypes.shape({
         total: PropTypes.integer,
@@ -91,6 +92,7 @@ class SearchResults extends React.Component {
 
   static defaultProps = {
     query: "",
+    source: "",
     data: { hits: { total: 0, hits: [] } }
   };
   state = {
@@ -106,8 +108,7 @@ class SearchResults extends React.Component {
   };
 
   render() {
-    const data = this.props.data;
-    const query = this.props.query;
+    const { data, query, source } = this.props;
     // No results.
     if (!data || !data.hits || !data.hits.total) {
       return (
@@ -115,7 +116,17 @@ class SearchResults extends React.Component {
           <div className="section-light">
             <div className="container">
               <Alert category="primary">
-                Nous n’avons pas trouvé de résultat pour votre recherche.
+                <p>Nous n’avons pas trouvé de résultat pour votre recherche.</p>
+                {source.length > 0 && (
+                  <p>
+                    Vous pouvez élargir la recherche en intégrant&nbsp;
+                    <strong>
+                      <Link route="index" params={{ q: query, source: "" }}>
+                        <a>les autres sources de documents</a>
+                      </Link>
+                    </strong>
+                  </p>
+                )}
               </Alert>
             </div>
           </div>
@@ -129,6 +140,7 @@ class SearchResults extends React.Component {
             isOpen={this.state.feedbackVisible}
             closeModal={this.closeModal}
             query={query}
+            source={source}
           />
         </React.Fragment>
       );
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/Search.test.js.snap b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/Search.test.js.snap
index c10da65955..3ffe2c728a 100644
--- a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/Search.test.js.snap
+++ b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/Search.test.js.snap
@@ -48,7 +48,7 @@ exports[`<search /> should render 1`] = `
             class="search__fields"
           >
             <label
-              class="search__facets"
+              class="search__sources"
               for="contentSource"
             >
               <span
@@ -57,7 +57,7 @@ exports[`<search /> should render 1`] = `
                 Filtrer par type de contenu
               </span>
               <svg
-                class="facet-icon"
+                class="select-sources__icon"
                 viewBox="0 0 49 49"
               >
                 <title>
@@ -81,9 +81,9 @@ exports[`<search /> should render 1`] = `
                 </g>
               </svg>
               <select
-                class="facet-value"
+                class="select-sources__value"
                 id="contentSource"
-                name="facet"
+                name="source"
               >
                 <option
                   value=""
@@ -221,7 +221,7 @@ exports[`<search /> should render suggestions 1`] = `
             class="search__fields"
           >
             <label
-              class="search__facets"
+              class="search__sources"
               for="contentSource"
             >
               <span
@@ -230,7 +230,7 @@ exports[`<search /> should render suggestions 1`] = `
                 Filtrer par type de contenu
               </span>
               <svg
-                class="facet-icon"
+                class="select-sources__icon"
                 viewBox="0 0 49 49"
               >
                 <title>
@@ -254,9 +254,9 @@ exports[`<search /> should render suggestions 1`] = `
                 </g>
               </svg>
               <select
-                class="facet-value"
+                class="select-sources__value"
                 id="contentSource"
-                name="facet"
+                name="source"
               >
                 <option
                   value=""
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
index fe906250d7..f73e76f858 100644
--- a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
+++ b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
@@ -12,7 +12,9 @@ exports[`<SearchResults/> should render no results 1`] = `
         category="primary"
         class="alert "
       >
-        Nous n’avons pas trouvé de résultat pour votre recherche.
+        <p>
+          Nous n’avons pas trouvé de résultat pour votre recherche.
+        </p>
       </div>
     </div>
   </div>