feat: Add filter views to save frequently used filters in data browser

src/components/Autocomplete/Autocomplete.react.js

@@ -235,7 +235,7 @@ export default class Autocomplete extends Component {
       // Tab
       // do not type it
       e.preventDefault();
-      
+
       e.stopPropagation();
       // move focus to input
       this.inputRef.current.focus();
@@ -318,7 +318,7 @@ export default class Autocomplete extends Component {
           onClick={onClick}
         />
       );
-    } 
+    }
 
     return (
       <React.Fragment>
@@ -372,5 +372,5 @@ Autocomplete.propTypes = {
   ),
   error: PropTypes.string.describe(
     'Error to be rendered in place of label if defined'
-  ) 
-} 
+  )
+}

src/components/BrowserFilter/BrowserFilter.react.js

@@ -5,15 +5,18 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import * as Filters  from 'lib/Filters';
-import Button        from 'components/Button/Button.react';
-import Filter        from 'components/Filter/Filter.react';
-import FilterRow     from 'components/BrowserFilter/FilterRow.react';
-import Icon          from 'components/Icon/Icon.react';
-import Popover       from 'components/Popover/Popover.react';
-import Position      from 'lib/Position';
-import React         from 'react';
-import styles        from 'components/BrowserFilter/BrowserFilter.scss';
+import * as Filters from 'lib/Filters';
+import Button from 'components/Button/Button.react';
+import Filter from 'components/Filter/Filter.react';
+import FilterRow from 'components/BrowserFilter/FilterRow.react';
+import Icon from 'components/Icon/Icon.react';
+import Popover from 'components/Popover/Popover.react';
+import Field from 'components/Field/Field.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Label from 'components/Label/Label.react';
+import Position from 'lib/Position';
+import React from 'react';
+import styles from 'components/BrowserFilter/BrowserFilter.scss';
 import { List, Map } from 'immutable';
 
 const POPOVER_CONTENT_ID = 'browserFilterPopover';
@@ -25,7 +28,9 @@ export default class BrowserFilter extends React.Component {
     this.state = {
       open: false,
       filters: new List(),
-      blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
+      confirmName: false,
+      name: '',
+      blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters),
     };
     this.toggle = this.toggle.bind(this);
     this.wrapRef = React.createRef();
@@ -42,13 +47,13 @@ export default class BrowserFilter extends React.Component {
     if (this.props.filters.size === 0) {
       let available = Filters.availableFilters(this.props.schema, null, this.state.blacklistedFilters);
       let field = Object.keys(available)[0];
-      filters = new List([
-        new Map({ field: field, constraint: available[field][0] })
-      ]);
+      filters = new List([new Map({ field: field, constraint: available[field][0] })]);
     }
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       open: !prevState.open,
-      filters: filters
+      filters: filters,
+      name: '',
+      confirmName: false,
     }));
     this.props.setCurrent(null);
   }
@@ -57,9 +62,7 @@ export default class BrowserFilter extends React.Component {
     let available = Filters.availableFilters(this.props.schema, this.state.filters, this.state.blacklistedFilters);
     let field = Object.keys(available)[0];
     this.setState(({ filters }) => ({
-      filters: filters.push(
-        new Map({ field: field, constraint: available[field][0] })
-      )
+      filters: filters.push(new Map({ field: field, constraint: available[field][0] })),
     }));
   }
 
@@ -68,7 +71,7 @@ export default class BrowserFilter extends React.Component {
   }
 
   apply() {
-    let formatted = this.state.filters.map(filter => {
+    let formatted = this.state.filters.map((filter) => {
       // TODO: type is unused?
       /*let type = this.props.schema[filter.get('field')].type;
       if (Filters.Constraints[filter.get('constraint')].hasOwnProperty('field')) {
@@ -79,13 +82,25 @@ export default class BrowserFilter extends React.Component {
       // remove compareTo for constraints which are not comparable
       let isComparable = Filters.Constraints[filter.get('constraint')].comparable;
       if (!isComparable) {
-        return filter.delete('compareTo')
+        return filter.delete('compareTo');
       }
       return filter;
     });
     this.props.onChange(formatted);
   }
 
+  save() {
+    let formatted = this.state.filters.map((filter) => {
+      let isComparable = Filters.Constraints[filter.get('constraint')].comparable;
+      if (!isComparable) {
+        return filter.delete('compareTo');
+      }
+      return filter;
+    });
+    this.props.onSaveFilter(formatted, this.state.name);
+    this.toggle();
+  }
+
   render() {
     let popover = null;
     let buttonStyle = [styles.entry];
@@ -99,49 +114,43 @@ export default class BrowserFilter extends React.Component {
       if (this.props.filters.size) {
         popoverStyle.push(styles.active);
       }
-      let available = Filters.availableFilters(
-        this.props.schema,
-        this.state.filters
-      );
+      let available = Filters.availableFilters(this.props.schema, this.state.filters);
       popover = (
         <Popover fixed={true} position={position} onExternalClick={this.toggle} contentId={POPOVER_CONTENT_ID}>
           <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)} id={POPOVER_CONTENT_ID}>
-            <div onClick={this.toggle} style={{ cursor: 'pointer', width: node.clientWidth, height: node.clientHeight }}></div>
+            <div
+              onClick={this.toggle}
+              style={{
+                cursor: 'pointer',
+                width: node.clientWidth,
+                height: node.clientHeight,
+              }}
+            ></div>
             <div className={styles.body}>
               <Filter
                 className={this.props.className}
                 blacklist={this.state.blacklistedFilters}
                 schema={this.props.schema}
                 filters={this.state.filters}
-                onChange={filters => this.setState({ filters: filters })}
+                onChange={(filters) => this.setState({ filters: filters })}
                 onSearch={this.apply.bind(this)}
-                renderRow={props => (
-                  <FilterRow {...props} active={this.props.filters.size > 0} parentContentId={POPOVER_CONTENT_ID} />
-                )}
+                renderRow={(props) => <FilterRow {...props} active={this.props.filters.size > 0} parentContentId={POPOVER_CONTENT_ID} />}
               />
-              <div className={styles.footer}>
-                <Button
-                  color="white"
-                  value="Clear all"
-                  disabled={this.state.filters.size === 0}
-                  width="120px"
-                  onClick={this.clear.bind(this)}
-                />
-                <Button
-                  color="white"
-                  value="Add filter"
-                  disabled={Object.keys(available).length === 0}
-                  width="120px"
-                  onClick={this.addRow.bind(this)}
-                />
-                <Button
-                  color="white"
-                  primary={true}
-                  value="Apply these filters"
-                  width="245px"
-                  onClick={this.apply.bind(this)}
-                />
-              </div>
+              {this.state.confirmName && <Field label={<Label text="Filter view name" />} input={<TextInput placeholder="Give it a good name..." value={this.state.name} onChange={(name) => this.setState({ name })} />} />}
+              {this.state.confirmName && (
+                <div className={styles.footer}>
+                  <Button color="white" value="Back" width="120px" onClick={() => this.setState({ confirmName: false })} />
+                  <Button color="white" value="Confirm" primary={true} width="120px" onClick={() => this.save()} />
+                </div>
+              )}
+              {!this.state.confirmName && (
+                <div className={styles.footer}>
+                  <Button color="white" value="Save" width="120px" onClick={() => this.setState({ confirmName: true })} />
+                  <Button color="white" value="Clear all" disabled={this.state.filters.size === 0} width="120px" onClick={() => this.clear()} />
+                  <Button color="white" value="Add" disabled={Object.keys(available).length === 0} width="120px" onClick={() => this.addRow()} />
+                  <Button color="white" primary={true} value="Apply" width="120px" onClick={() => this.apply()} />
+                </div>
+              )}
             </div>
           </div>
         </Popover>

src/components/CategoryList/CategoryList.react.js

@@ -5,18 +5,21 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes      from 'lib/PropTypes';
-import React          from 'react';
-import styles         from 'components/CategoryList/CategoryList.scss';
-import { Link }       from 'react-router-dom';
-import generatePath   from 'lib/generatePath';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/CategoryList/CategoryList.scss';
+import { Link } from 'react-router-dom';
+import generatePath from 'lib/generatePath';
 import { CurrentApp } from 'context/currentApp';
 
 export default class CategoryList extends React.Component {
   static contextType = CurrentApp;
   constructor() {
     super();
     this.listWrapperRef = React.createRef();
+    this.state = {
+      openClasses: [],
+    };
   }
 
   componentDidMount() {
@@ -46,14 +49,26 @@ export default class CategoryList extends React.Component {
         let id = c.id || c.name;
         if (id === this.props.current) {
           this.highlight.style.display = 'block';
-          this.highlight.style.top = (i * 20) + 'px';
+          this.highlight.style.top = i * 20 + 'px';
           return;
         }
       }
       this.highlight.style.display = 'none';
     }
   }
 
+  toggleDropdown(e, id) {
+    e.preventDefault();
+    const openClasses = [...this.state.openClasses];
+    const index = openClasses.indexOf(id);
+    if (openClasses.includes(id)) {
+      openClasses.splice(index, 1);
+    } else {
+      openClasses.push(id);
+    }
+    this.setState({ openClasses });
+  }
+
   render() {
     if (this.props.categories.length === 0) {
       return null;
@@ -67,15 +82,52 @@ export default class CategoryList extends React.Component {
           }
           let count = c.count;
           let className = id === this.props.current ? styles.active : '';
-          let link = generatePath(
-            this.context,
-            (this.props.linkPrefix || '') + (c.link || id)
-          );
+          let link = generatePath(this.context, (this.props.linkPrefix || '') + (c.link || id));
           return (
-            <Link title={c.name} to={{ pathname: link }} className={className} key={id} >
-              <span>{count}</span>
-              <span>{c.name}</span>
-            </Link>
+            <div>
+              <div className={styles.link}>
+                <Link title={c.name} to={{ pathname: link }} className={className} key={id}>
+                  <span>{count}</span>
+                  <span>{c.name}</span>
+                </Link>
+                {(c.filters || []).length !== 0 && (
+                  <a
+                    className={styles.expand}
+                    onClick={(e) => this.toggleDropdown(e, id)}
+                    style={{
+                      transform: this.state.openClasses.includes(id) ? 'scaleY(-1)' : 'scaleY(1)',
+                    }}
+                  ></a>
+                )}
+              </div>
+              {this.state.openClasses.includes(id) &&
+                c.filters.map((filterData, index) => {
+                  const { name, filter } = filterData;
+                  const url = `${this.props.linkPrefix}${c.name}?filters=${encodeURIComponent(filter)}`;
+                  return (
+                    <div className={styles.childLink}>
+                      <Link
+                        onClick={(e) => {
+                          e.preventDefault();
+                          this.props.filterClicked(url);
+                        }}
+                        key={name + index}
+                      >
+                        <span>{name}</span>
+                      </Link>
+                      <a
+                        className={styles.close}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          this.props.removeFilter(filterData);
+                        }}
+                      >
+                        ×
+                      </a>
+                    </div>
+                  );
+                })}
+            </div>
           );
         })}
       </div>

src/components/CategoryList/CategoryList.scss

@@ -37,7 +37,6 @@
         width: 50px;
         text-align: right;
       }
-
       &:last-of-type {
         margin-right: 50px;
         overflow: hidden;
@@ -62,3 +61,43 @@
   border: 0;
   height: 1px;
 }
+
+.close {
+  font-size: 20px !important;
+  font-weight: bold !important;
+}
+.expand {
+  display: flex !important;
+  align-items: center;
+  cursor: pointer;
+  width: 0px;
+  margin-right: 20px;
+  padding-left: 0px !important;
+  &:after {
+    @include arrow('down', 10px, 7px, #fff);
+    content: '';
+    margin-left: 10px;
+  }
+}
+.link {
+  display: flex;
+  a {
+    &:first-of-type {
+      flex-grow: 1
+    }
+  }
+}
+
+.childLink {
+  display: flex;
+  a {
+    &:first-of-type {
+      flex-grow: 1;
+      display: flex;
+    }
+    span {
+      text-align: left !important;
+      margin-left: 14px;
+    }
+  }
+}