Use UNSET_VALUE as default for relation of severity values in powerfilter

CHANGELOG.md

@@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Use greenbone sensor as default scanner type when opening the dialog if available [#2867](https://github.com/greenbone/gsa/pull/2867)
 
 ### Fixed
+- Use UNSET_VALUE as default for relation of severity values in powerfilter [#3052](https://github.com/greenbone/gsa/pull/3052)
 - Initialize severity value with 0 in powerfilter SeverityValuesGroup [#3031](https://github.com/greenbone/gsa/pull/3031)
 - Removed a CMake dependency in the CMakeLists, so GSA can be build again. [#3030](https://github.com/greenbone/gsa/pull/3030)
 - Fixed setting whether to include related resources for new permissions [#2931](https://github.com/greenbone/gsa/pull/2891)

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

@@ -52,10 +52,11 @@ describe('Relation Selector Tests', () => {
 
     domItems = getItemElements(baseElement);
 
-    expect(domItems.length).toEqual(3);
-    expect(domItems[0]).toHaveTextContent('is equal to');
-    expect(domItems[1]).toHaveTextContent('is greater than');
-    expect(domItems[2]).toHaveTextContent('is less than');
+    expect(domItems.length).toEqual(4);
+    expect(domItems[0]).toHaveTextContent('--');
+    expect(domItems[1]).toHaveTextContent('is equal to');
+    expect(domItems[2]).toHaveTextContent('is greater than');
+    expect(domItems[3]).toHaveTextContent('is less than');
   });
 
   test('should call onChange handler', () => {
@@ -69,7 +70,7 @@ describe('Relation Selector Tests', () => {
 
     const domItems = getItemElements(baseElement);
 
-    fireEvent.click(domItems[0]);
+    fireEvent.click(domItems[1]);
 
     expect(onChange).toBeCalled();
     expect(onChange).toBeCalledWith('=', undefined);
@@ -89,7 +90,7 @@ describe('Relation Selector Tests', () => {
 
     const domItems = getItemElements(baseElement);
 
-    fireEvent.click(domItems[2]);
+    fireEvent.click(domItems[3]);
 
     expect(onChange).toBeCalled();
     expect(onChange).toBeCalledWith('<', undefined);
@@ -103,7 +104,7 @@ describe('Relation Selector Tests', () => {
     openSelectElement(element);
 
     let domItems = getItemElements(baseElement);
-    expect(domItems.length).toEqual(3);
+    expect(domItems.length).toEqual(4);
 
     const input = getInputBox(baseElement);
 

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

@@ -128,7 +128,7 @@ describe('Severity Values Group Tests', () => {
 
     const domItems = getItemElements(baseElement);
 
-    fireEvent.click(domItems[2]);
+    fireEvent.click(domItems[3]);
 
     expect(onChange).toBeCalled();
     expect(onChange).toBeCalledWith(3, 'severity', '<');

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

@@ -23,18 +23,22 @@ import _ from 'gmp/locale';
 
 import Select from 'web/components/form/select';
 import PropTypes from 'web/utils/proptypes.js';
+import {UNSET_LABEL, UNSET_VALUE} from 'web/utils/render';
 
-const RelationSelector = ({relation, onChange}) => (
-  <Select
-    value={relation}
-    onChange={onChange}
-    items={[
-      {label: _('is equal to'), value: '='},
-      {label: _('is greater than'), value: '>'},
-      {label: _('is less than'), value: '<'},
-    ]}
-  />
-);
+const RelationSelector = ({relation, onChange}) => {
+  return (
+    <Select
+      value={relation}
+      onChange={onChange}
+      items={[
+        {label: UNSET_LABEL, value: UNSET_VALUE},
+        {label: _('is equal to'), value: '='},
+        {label: _('is greater than'), value: '>'},
+        {label: _('is less than'), value: '<'},
+      ]}
+    />
+  );
+};
 
 RelationSelector.propTypes = {
   relation: PropTypes.string,

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

@@ -26,6 +26,8 @@ import RelationSelector from 'web/components/powerfilter/relationselector';
 import NumberField from 'web/components/form/numberfield';
 import Divider from 'web/components/layout/divider';
 
+import {UNSET_VALUE} from 'web/utils/render';
+
 const SeverityValuesGroup = ({filter, name, title, onChange}) => {
   /* useState is analogous to setState in class components.
    * the first argument is the state variable.
@@ -39,7 +41,7 @@ const SeverityValuesGroup = ({filter, name, title, onChange}) => {
   const term = filter.getTerm(name);
   const severity = isDefined(term) ? parseSeverity(term.value) : 0;
 
-  const [rel, setRel] = useState(isDefined(term) ? term.relation : '='); // here rel is set to '='
+  const [rel, setRel] = useState(isDefined(term) ? term.relation : UNSET_VALUE);
   const keyword = name;
 
   return (