Merge pull request #25 from swiftype/brianearwood/make-filters-optional

Brian Earwood · web-flow · commit af36f591500e · 2019-01-15T11:19:39.000-06:00
Make filter fields optional and update README. Update Body component for optional sidebar.
diff --git a/README.md b/README.md
@@ -58,8 +58,8 @@ The following is a complete list of options available for configuration in [engi
 | `titleField`       | String        | optional          | The field to display as the title in results.                                                                                                                                          |
 | `urlField`         | String        | optional          | A field with a url to use as a link in results.                                                                                                                                        |
 | `urlFieldTemplate` | String        | optional          | Instead of urlField, you can provide a URL "template" here, which lets you build a URL from other fields. ex: "https://www.example.com/{{id}}".                                        |
-| `sortFields`       | Array[String] | required          | A list of fields that will be used for sort options.                                                                                                                                   |
-| `facets`           | Array[String] | required          | A list of fields that will be available as "facet" filters. Read more about facets within the [App Search documentation](https://swiftype.com/documentation/search-lib/guides/facets). |
+| `sortFields`       | Array[String] | optional          | A list of fields that will be used for sort options.                                                                                                                                   |
+| `facets`           | Array[String] | optional          | A list of fields that will be available as "facet" filters. Read more about facets within the [App Search documentation](https://swiftype.com/documentation/search-lib/guides/facets). |
 
 ### External configuration
 
diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,9 @@ import {
 import {
   buildFacetConfigFromConfig,
   buildSearchOptionsFromConfig,
-  getConfig
+  getConfig,
+  getFacetFields,
+  getSortFields
 } from "./config/config-helper";
 
 function createDriver() {
@@ -49,7 +51,7 @@ class App extends Component {
             }`}
           >
             <Header />
-            <Body />
+            <Body hasSidebar={getFacetFields().length > 0 || getSortFields().length > 0 ? true : false} />
           </div>
         )}
       </SearchProvider>
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 import {
@@ -11,15 +12,15 @@ import {
 } from "../containers";
 import { buildSortOptionsFromConfig } from "../config/config-helper";
 
-export default function Body() {
+function Body({ hasSidebar = true }) {
   return (
     <div className="reference-ui-body">
       <ErrorBoundary>
         <div className="initial-state-message">
           Type a search above to begin.
         </div>
         <div className="search-results">
-          <div className="sidebar">
+          <div className={"sidebar" + (hasSidebar ? '' : ' hidden')}>
             <Sorting sortOptions={buildSortOptionsFromConfig()} />
             <Facets />
           </div>
@@ -42,3 +43,9 @@ export default function Body() {
     </div>
   );
 }
+
+Body.propTypes = {
+  hasSidebar: PropTypes.bool
+};
+
+export default Body;
diff --git a/src/components/Body.test.js b/src/components/Body.test.js
@@ -2,7 +2,12 @@ import React from "react";
 import Body from "./Body";
 import { shallow } from "enzyme";
 
-it("renders correctly", () => {
-  const wrapper = shallow(<Body />);
+it("renders correctly with sidebar", () => {
+  const wrapper = shallow(<Body hasSidebar={true}/>);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly without the sidebar", () => {
+  const wrapper = shallow(<Body hasSidebar={false} />);
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/src/components/__snapshots__/Body.test.js.snap b/src/components/__snapshots__/Body.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders correctly with sidebar 1`] = `
 <div
   className="reference-ui-body"
 >
@@ -57,3 +57,61 @@ exports[`renders correctly 1`] = `
   </Component>
 </div>
 `;
+
+exports[`renders correctly without the sidebar 1`] = `
+<div
+  className="reference-ui-body"
+>
+  <Component>
+    <div
+      className="initial-state-message"
+    >
+      Type a search above to begin.
+    </div>
+    <div
+      className="search-results"
+    >
+      <div
+        className="sidebar hidden"
+      >
+        <Component
+          sortOptions={
+            Array [
+              Object {
+                "direction": "",
+                "name": "Relevance",
+                "value": "",
+              },
+            ]
+          }
+        />
+        <Component />
+      </div>
+      <div
+        className="results"
+      >
+        <div
+          className="results__header"
+        >
+          <div
+            className="meta"
+          >
+            <Component />
+            <Component />
+          </div>
+        </div>
+        <div
+          className="results__body"
+        >
+          <Component />
+        </div>
+        <div
+          className="results__footer"
+        >
+          <Component />
+        </div>
+      </div>
+    </div>
+  </Component>
+</div>
+`;
diff --git a/src/config/config-helper.js b/src/config/config-helper.js
@@ -46,6 +46,14 @@ export function getUrlField() {
   return getConfig().urlField;
 }
 
+export function getFacetFields() {
+  return getConfig().facets || [];
+}
+
+export function getSortFields() {
+  return getConfig().sortFields || [];
+}
+
 export function getUrlFieldTemplate() {
   return getConfig().urlFieldTemplate;
 }
diff --git a/src/search-lib/SearchDriver.js b/src/search-lib/SearchDriver.js
@@ -297,12 +297,18 @@ export default class SearchDriver {
         current,
         size: resultsPerPage
       },
-      facets: removeConditionalFacets(this.facetConfig, filters),
       filters: {
         all: formatORFiltersAsAND(convertRangeFiltersToDateString(filters))
       }
     };
 
+    const facets = removeConditionalFacets(this.facetConfig, filters);
+    const numberOfFacets = Object.keys(facets).length;
+
+    if (numberOfFacets > 0) {
+      searchOptions.facets = facets;
+    }
+
     if (sortField && sortDirection) {
       searchOptions.sort = {
         [sortField]: sortDirection
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -393,7 +393,10 @@ a {
   padding: 0 24px; }
 
 .sidebar {
-  flex: 0 1 30%; }
+  flex: 0 1 30%;
+  padding-right: 12px; }
+  .sidebar.hidden {
+    display: none; }
 
 .sorting {
   padding-top: 32px; }
@@ -476,77 +479,79 @@ a {
     width: 100%;
     justify-content: space-between;
     align-items: center; }
-  .active-search .results {
-    padding: 32px 0 0 32px;
-    border-left: 1px solid #eeeeee; }
-
-.result {
-  border-top: 1px solid #eeeeee;
-  padding: 24px 0; }
-  .result + .result {
-    margin-top: 20px; }
-  .result em {
-    position: relative;
-    color: #3a56e4;
-    font-weight: 900;
-    font-style: inherit; }
-    .result em:after {
-      content: "";
-      position: absolute;
-      top: -3px;
-      left: -3px;
-      width: calc(100% + 6px);
-      height: calc(100% + 6px);
-      background: rgba(37, 139, 248, 0.08);
-      pointer-events: none; }
-  .result__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center; }
-  .result__title {
-    font-size: 1.8em;
-    font-weight: 700; }
-  .result__key {
-    font-family: monospace;
-    font-weight: 400;
-    font-size: 14px;
-    flex: 0 1 50%;
-    color: #777777; }
-    .result__key:before {
-      content: '"'; }
-    .result__key:after {
-      content: '": '; }
-  .result__value {
-    font-weight: 400;
-    font-size: 14px; }
-  .result__version {
-    font-size: 12px;
-    display: inline;
-    vertical-align: bottom; }
-  .result__lisence {
-    font-size: 12px;
-    color: #999999;
-    display: inline-block;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    line-height: 1;
-    padding: 4px 4px 3px 4px; }
-  .result__body {
-    margin-top: 1rem;
-    line-height: 1.5; }
-    .result__body p {
-      margin: 0; }
-  .result__details {
-    max-height: 300px;
-    position: relative;
-    overflow: hidden;
-    overflow-y: auto;
-    padding: 24px;
-    background-color: #f9f9f9; }
-  .result__footer {
-    padding: 0 2rem;
-    margin-top: 1rem;
-    line-height: 1; }
+
+.result em {
+  position: relative;
+  color: #3a56e4;
+  font-weight: 900;
+  font-style: inherit; }
+  .result em:after {
+    content: "";
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: calc(100% + 6px);
+    height: calc(100% + 6px);
+    background: rgba(37, 139, 248, 0.08);
+    pointer-events: none; }
+
+.result__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center; }
+
+.result__title {
+  font-size: 1.8em;
+  font-weight: 700;
+  margin-top: 24px; }
+
+.result__key {
+  font-family: monospace;
+  font-weight: 400;
+  font-size: 14px;
+  flex: 0 1 50%;
+  color: #777777; }
+  .result__key:before {
+    content: '"'; }
+  .result__key:after {
+    content: '": '; }
+
+.result__value {
+  font-weight: 400;
+  font-size: 14px; }
+
+.result__version {
+  font-size: 12px;
+  display: inline;
+  vertical-align: bottom; }
+
+.result__lisence {
+  font-size: 12px;
+  color: #999999;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  line-height: 1;
+  padding: 4px 4px 3px 4px; }
+
+.result__body {
+  margin-top: 1rem;
+  line-height: 1.5; }
+  .result__body p {
+    margin: 0; }
+
+.result__details {
+  max-height: 300px;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 24px;
+  background-color: #f9f9f9; }
+
+.result__footer {
+  padding: 0 2rem;
+  margin-top: 1rem;
+  line-height: 1; }
 
 .rc-pagination {
   display: flex;
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -181,6 +181,11 @@ a {
 
 .sidebar {
   flex: 0 1 30%;
+  padding-right: $sizeM;
+
+  &.hidden {
+    display: none;
+  }
 }
 
 .sorting {
@@ -289,21 +294,9 @@ a {
     justify-content: space-between;
     align-items: center;
   }
-
-  .active-search & {
-    padding: $sizeXL 0 0 $sizeXL;
-    border-left: 1px solid $resultsLeftBorderColor;
-  }
 }
 
 .result {
-  border-top: 1px solid $resultBorderColor;
-  padding: $sizeL 0;
-
-  & + & {
-    margin-top: 20px;
-  }
-
   em {
     position: relative;
     color: $textMatchColor;
@@ -331,6 +324,7 @@ a {
   &__title {
     font-size: 1.8em;
     font-weight: $fontWeightBold;
+    margin-top: $sizeL;
   }
 
   &__key {

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,14 @@ export function getUrlField() {`
`46`	`46`	`return getConfig().urlField;`
`47`	`47`	`}`
`48`	`48`
	`49`	`+export function getFacetFields() {`
	`50`	`+ return getConfig().facets \|\| [];`
	`51`	`+}`
	`52`	`+`
	`53`	`+export function getSortFields() {`
	`54`	`+ return getConfig().sortFields \|\| [];`
	`55`	`+}`
	`56`	`+`
`49`	`57`	`export function getUrlFieldTemplate() {`
`50`	`58`	`return getConfig().urlFieldTemplate;`
`51`	`59`	`}`