Fix: Fix invalid DOM props and other minor JS console errors

This fixes various minor errors that do not visibly affect the
content visible to users but appear in the JS console.

This includes:
- internal props are no longer passed to the DOM
- invalid prop types are fixed
- better handling of models and missing data
- tr elements are nested in the correct parent elements
- keys in reference lists are made unique
- correct functions are defined for gmp mock in tests

Fixing these errors makes it easier to spot errors that do have
an effect on the visible content.

src/gmp/model.js

@@ -73,6 +73,12 @@ class Model {
       delete copy.end_time;
     }
 
+    if (isDefined(element.timestamp)) {
+      if (element.timestamp.length > 0) {
+        copy.timestamp = parseDate(element.timestamp);
+      }
+    }
+
     if (isDefined(element.permissions)) {
       // these are the permissions the current user has on the entity
       const caps = map(element.permissions.permission, perm => perm.name);

src/gmp/models/cve.js

@@ -144,9 +144,13 @@ class Cve extends Info {
 
       const products = entry['vulnerable-software-list'];
       if (isDefined(products)) {
-        ret.products = isArray(products.product)
-          ? products.product
-          : [products.product];
+        if (isDefined(products.product)) {
+          ret.products = isArray(products.product)
+            ? products.product
+            : [products.product];
+        } else {
+          ret.products = [];
+        }
       }
 
       delete ret.raw_data;

src/gmp/models/vulnerability.js

@@ -16,9 +16,22 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import Model from 'gmp/model';
+import {isDefined} from 'gmp/utils/identity';
+import {parseDate} from 'gmp/parser';
 
 class Vulnerability extends Model {
   static entityType = 'vulnerability';
+
+  static parseElement(element) {
+    const ret = super.parseElement(element);
+
+    if (isDefined(ret.results)) {
+      ret.results.newest = parseDate(ret.results.newest);
+      ret.results.oldest = parseDate(ret.results.newest);
+    }
+
+    return ret;
+  }
 }
 
 export default Vulnerability;

src/web/components/badge/__tests__/__snapshots__/badge.js.snap

@@ -60,7 +60,6 @@ exports[`Badge tests should render badge 1`] = `
 
 <div
   class="c0"
-  margin="0"
 >
   <span
     class="c1"
@@ -73,7 +72,6 @@ exports[`Badge tests should render badge 1`] = `
   <span
     class="c2"
     data-testid="badge-icon"
-    margin="0"
   >
     1
   </span>

src/web/components/badge/badge.js

@@ -24,16 +24,19 @@ import {isDefined, hasValue} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes';
 import Theme from 'web/utils/theme';
+import {excludePropsConfig} from 'web/utils/styledConfig';
 
-const BadgeContainer = styled.div`
+const BadgeContainer = styled.div.withConfig(excludePropsConfig('margin'))`
   position: relative;
   display: inline-flex;
   margin-right: ${props => props.margin}px;
 `;
 
 BadgeContainer.displayName = 'BadgeContainer';
 
-const BadgeIcon = styled.span`
+const BadgeIcon = styled.span.withConfig(
+  excludePropsConfig(['backgroundColor', 'margin']),
+)`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

src/web/components/bar/__tests__/__snapshots__/compliancestatusbar.js.snap

@@ -48,7 +48,6 @@ exports[`ComplianceStatusBar tests should render 1`] = `
 }
 
 <div
-  boxbackground="#c83814"
   class="c0"
   data-testid="progressbar-box"
   title="75%"
@@ -57,7 +56,6 @@ exports[`ComplianceStatusBar tests should render 1`] = `
     background="#70c000"
     class="c1"
     data-testid="progress"
-    progress="75"
   />
   <div
     class="c2"

src/web/components/bar/__tests__/__snapshots__/progressbar.js.snap

@@ -48,7 +48,6 @@ exports[`ProgressBar tests should render 1`] = `
 }
 
 <div
-  boxbackground="#4C4C4C"
   class="c0"
   data-testid="progressbar-box"
   title="Progress"
@@ -57,7 +56,6 @@ exports[`ProgressBar tests should render 1`] = `
     background="low"
     class="c1"
     data-testid="progress"
-    progress="10"
   />
   <div
     class="c2"

src/web/components/bar/__tests__/__snapshots__/severitybar.js.snap

@@ -48,7 +48,6 @@ exports[`SeverityBar tests should render 1`] = `
 }
 
 <div
-  boxbackground="#4C4C4C"
   class="c0"
   data-testid="progressbar-box"
   title="High"
@@ -57,7 +56,6 @@ exports[`SeverityBar tests should render 1`] = `
     background="error"
     class="c1"
     data-testid="progress"
-    progress="95"
   />
   <div
     class="c2"

src/web/components/bar/__tests__/__snapshots__/statusbar.js.snap

@@ -51,15 +51,13 @@ exports[`StatusBar tests should render 1`] = `
 }
 
 <div
-  boxbackground="#4C4C4C"
   class="c0"
   data-testid="progressbar-box"
   title="undefined"
 >
   <div
     class="c1"
     data-testid="progress"
-    progress="100"
   />
   <div
     class="c2"

src/web/components/bar/__tests__/__snapshots__/titlebar.js.snap

@@ -367,7 +367,6 @@ background-color:#f3f3f3 .c13:nth-child(2):hover {
               >
                 <div
                   class="c3 c15"
-                  margin="5px"
                 >
                   <span
                     class="c8 c16"
@@ -391,7 +390,6 @@ background-color:#f3f3f3 .c13:nth-child(2):hover {
               >
                 <div
                   class="c3 c15"
-                  margin="5px"
                 >
                   <span
                     class="c8 c16"
@@ -431,7 +429,6 @@ background-color:#f3f3f3 .c13:nth-child(2):hover {
                 >
                   <div
                     class="c3 c15"
-                    margin="5px"
                   >
                     <span
                       class="c8 c16"
@@ -457,7 +454,6 @@ background-color:#f3f3f3 .c13:nth-child(2):hover {
               >
                 <div
                   class="c3 c15"
-                  margin="5px"
                 >
                   <span
                     class="c8 c16"

src/web/components/bar/progressbar.js

@@ -21,9 +21,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes.js';
+import {excludePropsConfig} from 'web/utils/styledConfig';
 import Theme from 'web/utils/theme.js';
 
-const ProgressBarBox = styled.div`
+const ProgressBarBox = styled.div.withConfig(
+  excludePropsConfig(['boxBackground']),
+)`
   height: 13px;
   box-sizing: content-box; /* height includes border */
   display: inline-block;
@@ -63,7 +66,7 @@ export const adjustProgress = progress => {
   return progress;
 };
 
-const Progress = styled.div`
+const Progress = styled.div.withConfig(excludePropsConfig(['progress']))`
   height: 13px;
 
   @media print {

src/web/components/dialog/__tests__/__snapshots__/multistepfooter.js.snap

@@ -182,7 +182,6 @@ exports[`MultiStepFooter tests should render 1`] = `
   >
     <div
       class="c6 c8"
-      margin="5px"
     >
       <button
         class="c3 c4 c9"
@@ -404,7 +403,6 @@ exports[`MultiStepFooter tests should render loading and disable cancel button 1
   >
     <div
       class="c6 c8"
-      margin="5px"
     >
       <button
         class="c3 c4 c9"

src/web/components/dialog/scrollablecontent.js

@@ -21,10 +21,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
+import {excludePropsConfig} from 'web/utils/styledConfig';
 
 import Layout from 'web/components/layout/layout';
 
-const ScrollableContent = styled.div`
+const ScrollableContent = styled.div.withConfig(
+  excludePropsConfig(['maxHeight']),
+)`
   overflow: auto;
   padding: 0 15px;
   width: 100%;

src/web/components/error/__tests__/__snapshots__/errormessage.js.snap

@@ -101,7 +101,6 @@ exports[`ErrorMessage tests should render 1`] = `
   >
     <div
       class="c3 c4"
-      margin="15px"
     >
       <span
         class="c5"
@@ -119,7 +118,6 @@ exports[`ErrorMessage tests should render 1`] = `
         >
           <div
             class="c0 c6"
-            margin="5px"
           >
             <b
               data-testid="error-message"

src/web/components/folding/folding.js

@@ -20,6 +20,7 @@ import React from 'react';
 import styled, {keyframes, css} from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
+import {excludePropsConfig} from 'web/utils/styledConfig';
 
 /**
  * State used in foldable components
@@ -42,7 +43,7 @@ const foldDelay = keyframes`
   }
 `;
 
-const Div = styled.div`
+const Div = styled.div.withConfig(excludePropsConfig(['foldState']))`
   overflow: hidden;
   transition: 0.4s;
 

src/web/components/form/__tests__/__snapshots__/checkbox.js.snap

@@ -94,7 +94,6 @@ exports[`CheckBox component tests should render with children 1`] = `
   >
     <div
       class="c1 c3"
-      margin="5px"
     >
       <input
         class="c4 c5"

src/web/components/form/__tests__/__snapshots__/formgroup.js.snap

@@ -103,15 +103,12 @@ exports[`FormGroup tests should render with title 1`] = `
   <label
     class="c1"
     data-testid="formgroup-title"
-    titleoffset="0"
-    titlesize="2"
   >
     Foo
   </label>
   <div
     class="c2 c3"
     data-testid="formgroup-content"
-    size="10"
   />
 </div>
 `;

src/web/components/form/__tests__/__snapshots__/radio.js.snap

@@ -94,7 +94,6 @@ exports[`Radio tests should render radio 1`] = `
   >
     <div
       class="c1 c3"
-      margin="5px"
     >
       <input
         class="c4 c5"
@@ -200,7 +199,6 @@ exports[`Radio tests should render radio with children 1`] = `
   >
     <div
       class="c1 c3"
-      margin="5px"
     >
       <input
         class="c4 c5"

src/web/components/form/__tests__/__snapshots__/selectelement.js.snap

@@ -314,7 +314,6 @@ exports[`Menu tests should render with position adjust 1`] = `
 <div
   class="c0"
   data-testid="select-menu"
-  position="adjust"
   right="0"
   width="0"
   x="0"
@@ -385,7 +384,6 @@ exports[`Menu tests should render with position right 1`] = `
 <div
   class="c0"
   data-testid="select-menu"
-  position="right"
   right="0"
   width="0"
   x="0"

src/web/components/form/__tests__/__snapshots__/yesnoradio.js.snap

@@ -98,7 +98,6 @@ exports[`YesNoRadio tests should render 1`] = `
   >
     <div
       class="c0 c2"
-      margin="5px"
     >
       <label
         class="c3"
@@ -108,7 +107,6 @@ exports[`YesNoRadio tests should render 1`] = `
         >
           <div
             class="c0 c2"
-            margin="5px"
           >
             <input
               class="c4 c5"
@@ -133,7 +131,6 @@ exports[`YesNoRadio tests should render 1`] = `
         >
           <div
             class="c0 c2"
-            margin="5px"
           >
             <input
               class="c4 c5"

src/web/components/form/__tests__/selectelement.js

@@ -208,7 +208,9 @@ class MenuTestComponent extends React.Component {
     super(...args);
 
     this.target = React.createRef();
-    this.mockBoundingClientRect = this.props.mockBoundingClientRect;
+    const {mockBoundingClientRect, ...otherProps} = this.props;
+    this.mockBoundingClientRect = mockBoundingClientRect;
+    this.otherProps = otherProps;
     this.notifyRefAssigned = jest.fn();
   }
 
@@ -238,7 +240,7 @@ class MenuTestComponent extends React.Component {
         />
         {hasTarget && (
           <Menu
-            {...this.props}
+            {...this.otherProps}
             notifyRefAssigned={this.notifyRefAssigned}
             target={this.target}
           />

src/web/components/form/field.js

@@ -22,13 +22,16 @@ import PropTypes from 'web/utils/proptypes';
 
 import styled from 'styled-components';
 
+import {excludePropsConfig} from 'web/utils/styledConfig';
 import Theme from 'web/utils/theme';
 
 import withLayout from 'web/components/layout/withLayout';
 
 export const DISABLED_OPACITY = 0.65;
 
-const StyledInput = styled.input`
+const StyledInput = styled.input.withConfig(
+  excludePropsConfig(['convert', 'hasError']),
+)`
   /* use font and line settings from parents not from browser default */
   font-family: inherit;
   font-size: inherit;