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

@@ -11,6 +11,9 @@ 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';
@@ -25,9 +28,12 @@ export default class BrowserFilter extends React.Component {
     this.state = {
       open: false,
       filters: new List(),
+      confirmName: false,
+      name: '',
       blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
     };
     this.toggle = this.toggle.bind(this);
+    this.save = this.save.bind(this);
     this.wrapRef = React.createRef();
   }
 
@@ -48,9 +54,12 @@ export default class BrowserFilter extends React.Component {
     }
     this.setState(prevState => ({
       open: !prevState.open,
-      filters: filters
+      filters: filters,
+      name: '',
+      confirmName: false
     }));
     this.props.setCurrent(null);
+    console.log('isOpen', this.state.open);
   }
 
   addRow() {
@@ -86,6 +95,18 @@ export default class BrowserFilter extends React.Component {
     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];
@@ -118,7 +139,11 @@ export default class BrowserFilter extends React.Component {
                 renderRow={props => (
                   <FilterRow {...props} active={this.props.filters.size > 0} parentContentId={POPOVER_CONTENT_ID} />
                 )}
-              />
+                />
+                {this.state.confirmName && <Field
+                  label={<Label text='What should we this filter?' />}
+                  input={<TextInput placeholder='Give it a good name...' value={this.state.name} onChange={(name) => this.setState({ name })} />}
+                />}
               <div className={styles.footer}>
                 <Button
                   color="white"
@@ -137,10 +162,18 @@ export default class BrowserFilter extends React.Component {
                 <Button
                   color="white"
                   primary={true}
-                  value="Apply these filters"
-                  width="245px"
+                  value={this.state.confirmName ? 'Confirm' : 'Save filters'}
+                  width="120px"
+                  onClick={() => this.state.confirmName ? this.save() : this.setState({confirmName: true})}
+                />
+                <Button
+                  color="white"
+                  primary={true}
+                  value="Apply filters"
+                  width="120px"
                   onClick={this.apply.bind(this)}
                 />
+
               </div>
             </div>
           </div>

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,21 +49,33 @@ 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;
     }
     return (
       <div ref={this.listWrapperRef} className={styles.class_list}>
-        {this.props.categories.map((c) => {
+        {this.props.categories.map(c => {
           let id = c.id || c.name;
           if (c.type === 'separator') {
             return <hr key={id} className={styles.separator} />;
@@ -72,10 +87,59 @@ export default class CategoryList extends React.Component {
             (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) => {
+                  console.log({ filterData });
+                  const { name, filter } = filterData;
+                  const url = `${this.props.linkPrefix}${
+                    c.name
+                  }?filters=${encodeURIComponent(filter)}`;
+                  return (
+                    <div className={styles.link}>
+                      <Link
+                        onClick={(e) => {
+                          e.preventDefault();
+                          this.props.filterClicked(url);
+                        }}
+                        key={name + index}
+                        style={{display: 'flex'}}
+                      >
+                        <span>{name}</span>
+                      </Link>
+                      <a
+                        className={styles.close}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          this.props.removeFilter(filterData);
+                        }}
+                      >×</a>
+                    </div>
+                  );
+                })}
+            </div>
           );
         })}
       </div>
@@ -84,7 +148,13 @@ export default class CategoryList extends React.Component {
 }
 
 CategoryList.propTypes = {
-  categories: PropTypes.arrayOf(PropTypes.object).describe('Array of categories used to populate list.'),
-  current: PropTypes.string.describe('Id of current category to be highlighted.'),
-  linkPrefix: PropTypes.string.describe('Link prefix used to generate link path.'),
+  categories: PropTypes.arrayOf(PropTypes.object).describe(
+    'Array of categories used to populate list.'
+  ),
+  current: PropTypes.string.describe(
+    'Id of current category to be highlighted.'
+  ),
+  linkPrefix: PropTypes.string.describe(
+    'Link prefix used to generate link path.'
+  ),
 };

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,29 @@
   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
+    }
+  }
+}