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;