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
SocialGouv · Feb 7, 2019 · 6212ae9 · 6212ae9
1 parent c262ad9
commit 6212ae9
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ages/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeebackForm.test.js.snap b/...ages/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/...es/code-du-travail-frontend/src/common/__tests__/__snapshots__/FeedbackModal.test.js.snap b/...es/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"
             >