Reset- and Remove-Button for Powerfilter

gsa/src/gmp/models/filter.js

@@ -732,6 +732,8 @@ export const TAGS_FILTER_FILTER = Filter.fromString('type=tag');
 export const USERS_FILTER_FILTER = Filter.fromString('type=user');
 export const VULNS_FILTER_FILTER = Filter.fromString('type=vuln');
 
+export const RESET_FILTER = Filter.fromString('first=1');
+
 export default Filter;
 
 // vim: set ts=2 sw=2 tw=80:

gsa/src/web/components/powerfilter/powerfilter.js

@@ -29,6 +29,8 @@ import _ from 'gmp/locale';
 
 import logger from 'gmp/log';
 
+import Filter, {RESET_FILTER} from 'gmp/models/filter';
+
 import {KeyCode} from 'gmp/utils/event';
 import {isDefined, isString} from 'gmp/utils/identity';
 
@@ -51,8 +53,6 @@ import Divider from 'web/components/layout/divider';
 import IconDivider from 'web/components/layout/icondivider';
 import Layout from 'web/components/layout/layout';
 
-import Filter from 'gmp/models/filter';
-
 const log = logger.getLogger('web.powerfilter');
 
 const DEFAULT_FILTER_ID = '0';
@@ -140,8 +140,10 @@ class PowerFilter extends React.Component {
   handleNamedFilterChange(value) {
     const {filters} = this.props;
 
-    const filter = filters.find(f => f.id === value);
-
+    let filter = filters.find(f => f.id === value);
+    if (!isDefined(filter)) {
+      filter = RESET_FILTER;
+    }
     this.updateFilter(filter);
   }
 
@@ -228,6 +230,7 @@ class PowerFilter extends React.Component {
       capabilities,
       filters,
       onEditClick,
+      onRemoveClick,
       onResetClick,
     } = this.props;
     const namedfilterid = isDefined(filter) && isDefined(filter.id) ?
@@ -266,10 +269,17 @@ class PowerFilter extends React.Component {
                 onClick={this.handleUpdateFilter}
               />
 
-              {onResetClick &&
+              {onRemoveClick &&
                 <DeleteIcon
-                  img="delete.svg"
-                  title={_('Reset Filter')}
+                  title={_('Remove Filter')}
+                  active={isDefined(filter)}
+                  onClick={isDefined(filter) ? onRemoveClick : undefined}
+                />
+              }
+              {onResetClick &&
+                <Icon
+                  img="first.svg"
+                  title={_('Reset to Default Filter')}
                   active={isDefined(filter)}
                   onClick={isDefined(filter) ? onResetClick : undefined}
                 />
@@ -333,6 +343,7 @@ PowerFilter.propTypes = {
   onEditClick: PropTypes.func,
   onError: PropTypes.func,
   onFilterCreated: PropTypes.func,
+  onRemoveClick: PropTypes.func,
   onResetClick: PropTypes.func,
   onUpdate: PropTypes.func,
 };

gsa/src/web/entities/container.js

@@ -36,7 +36,7 @@ import {
   pluralizeType,
 } from 'gmp/utils/entitytype';
 
-import Filter from 'gmp/models/filter';
+import Filter, {RESET_FILTER} from 'gmp/models/filter';
 
 import {YES_VALUE} from 'gmp/parser';
 
@@ -97,6 +97,7 @@ class EntitiesContainer extends React.Component {
     this.handleTimer = this.handleTimer.bind(this);
     this.handleFilterCreated = this.handleFilterCreated.bind(this);
     this.handleFilterChanged = this.handleFilterChanged.bind(this);
+    this.handleFilterRemoved = this.handleFilterRemoved.bind(this);
     this.handleFilterReset = this.handleFilterReset.bind(this);
     this.handleAddMultiTag = this.handleAddMultiTag.bind(this);
     this.handleTagChange = this.handleTagChange.bind(this);
@@ -159,7 +160,7 @@ class EntitiesContainer extends React.Component {
 
   reload() {
     // reload data from backend
-    this.load(this.state.loadedFilter);
+    this.load(this.props.filter);
   }
 
   getRefreshInterval() {
@@ -339,6 +340,10 @@ class EntitiesContainer extends React.Component {
     this.load(filter);
   }
 
+  handleFilterRemoved() {
+    this.load(RESET_FILTER);
+  }
+
   handleFilterReset() {
     const {history, location} = this.props;
     const query = {...location.query};
@@ -545,6 +550,7 @@ class EntitiesContainer extends React.Component {
           onDownloaded: onDownload,
           onError: this.handleError,
           onFilterChanged: this.handleFilterChanged,
+          onFilterRemoved: this.handleFilterRemoved,
           onFilterReset: this.handleFilterReset,
           onSortChange: this.handleSortChange,
           onSelectionTypeChange: this.handleSelectionTypeChange,

gsa/src/web/entities/page.js

@@ -200,6 +200,7 @@ class EntitiesPage extends React.Component {
       onError,
       onFilterChanged,
       onFilterCreated,
+      onFilterRemoved,
       onFilterReset,
     } = this.props;
 
@@ -225,6 +226,7 @@ class EntitiesPage extends React.Component {
           onEditClick={handler}
           onError={onError}
           onFilterCreated={onFilterCreated}
+          onRemoveClick={onFilterRemoved}
           onResetClick={onFilterReset}
           onUpdate={onFilterChanged}
         />
@@ -309,6 +311,7 @@ EntitiesPage.propTypes = {
   onError: PropTypes.func.isRequired,
   onFilterChanged: PropTypes.func.isRequired,
   onFilterCreated: PropTypes.func.isRequired,
+  onFilterRemoved: PropTypes.func.isRequired,
   onFilterReset: PropTypes.func.isRequired,
 };