Update dependency "styled-components"

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add storybook [#1272](https://github.com/greenbone/gsa/pull/1286)
 
 ### Changed
+- Use Reacts new ref API (no innerRef anymore [#1441](https://github.com/greenbone/gsa/pull/1441))
 - Allow dynamic ref types in NVT model and adjust CertLink to it [#1434](https://github.com/greenbone/gsa/pull/1434)
 - Use new ref structure in NVTs [#1424](https://github.com/greenbone/gsa/pull/1424)
 - Use HTTPS for documentation links

gsa/package.json

@@ -62,7 +62,7 @@
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^3.4.10",
+    "styled-components": "^4.3.1",
     "uuid": "^3.3.2",
     "whatwg-fetch": "^3.0.0",
     "x2js": "^3.2.6"
@@ -84,7 +84,7 @@
     "husky": "^1.3.1",
     "jest-dom": "^3.0.0",
     "jest-junit": "^6.0.1",
-    "jest-styled-components": "^6.2.0",
+    "jest-styled-components": "^6.3.1",
     "lint-staged": "^8.1.3",
     "prettier": "1.16.4",
     "react-testing-library": "^7.0.0"

gsa/src/web/components/badge/badge.js

@@ -98,7 +98,7 @@ class Badge extends React.Component {
         {isDefined(content) && (
           <BadgeIcon
             data-testid="badge-icon"
-            innerRef={ref => (this.icon = ref)}
+            ref={ref => (this.icon = ref)}
             color={color}
             backgroundColor={backgroundColor}
             position={position}

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

@@ -120,6 +120,21 @@ exports[`Titlebar tests should render content if user is logged in 1`] = `
 }
 
 .c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin-left: -5px;
 }
 
@@ -135,13 +150,32 @@ exports[`Titlebar tests should render content if user is logged in 1`] = `
 }
 
 .c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
 .c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   color: #393637;
   cursor: pointer;
   font-weight: bold;
@@ -239,17 +273,17 @@ exports[`Titlebar tests should render content if user is logged in 1`] = `
         </div>
       </a>
       <div
-        class="c6 c3"
+        class="c6"
       >
         <div
-          class="c7 c3"
+          class="c7"
           margin="5px"
         >
           <span>
             Logged in as 
           </span>
           <a
-            class="c8 c2"
+            class="c8"
             href="/usersettings"
             title="Your session will end at "
           >

gsa/src/web/components/chart/bar.js

@@ -170,7 +170,7 @@ class BarChart extends React.Component {
     const hideTickLabels = maxWidth / numTicks < MIN_TICK_WIDTH;
     return (
       <StyledLayout align={['start', 'start']}>
-        <Svg innerRef={svgRef} width={width} height={height}>
+        <Svg ref={svgRef} width={width} height={height}>
           <Group top={margin.top} left={marginLeft}>
             <Axis
               orientation="left"
@@ -219,7 +219,7 @@ class BarChart extends React.Component {
         </Svg>
         {showLegend && data.length > 0 && (
           <Legend
-            innerRef={this.legendRef}
+            ref={this.legendRef}
             data={data}
             onItemClick={onLegendItemClick}
           />

gsa/src/web/components/chart/bubble.js

@@ -50,7 +50,7 @@ const BubbleChart = ({data = [], width, height, svgRef, onDataClick}) => {
 
   const nodes = bubbles(root).leaves();
   return (
-    <Svg width={width} height={height} innerRef={svgRef}>
+    <Svg width={width} height={height} ref={svgRef}>
       <Group top={margin.top} left={margin.left}>
         {hasBubbles ? (
           nodes.map((node, i) => {

gsa/src/web/components/chart/donut.js

@@ -275,7 +275,7 @@ class DonutChart extends React.Component {
         <Svg
           width={width}
           height={height}
-          innerRef={setRef(svgRef, ref => (this.svg = ref))}
+          ref={setRef(svgRef, ref => (this.svg = ref))}
         >
           {data.length > 0 ? (
             <React.Fragment>
@@ -329,7 +329,7 @@ class DonutChart extends React.Component {
         {data.length > 0 && showLegend && (
           <Legend
             data={data}
-            innerRef={this.legendRef}
+            ref={this.legendRef}
             onItemClick={onLegendItemClick}
           />
         )}

gsa/src/web/components/chart/donut/labels.js

@@ -58,7 +58,7 @@ const Labels = ({
             <Label
               x={x}
               y={y}
-              innerRef={targetRef}
+              ref={targetRef}
               key={index}
               onMouseEnter={show}
               onMouseLeave={hide}

gsa/src/web/components/chart/donut/paths.js

@@ -102,33 +102,36 @@ const pieOuterPath = (sa, ea, rx, ry, h) => {
   return paths;
 };
 
-export const PieOuterPath = ({
-  startAngle = 0,
-  endAngle = PI2,
-  donutHeight,
-  color,
-  innerRef,
-  outerRadiusX,
-  outerRadiusY,
-}) => (
-  <path
-    d={pieOuterPath(
-      startAngle,
-      endAngle,
+export const PieOuterPath = React.forwardRef(
+  (
+    {
+      startAngle = 0,
+      endAngle = PI2,
+      donutHeight,
+      color,
       outerRadiusX,
       outerRadiusY,
-      donutHeight,
-    )}
-    ref={innerRef}
-    fill={color}
-  />
+    },
+    ref,
+  ) => (
+    <path
+      d={pieOuterPath(
+        startAngle,
+        endAngle,
+        outerRadiusX,
+        outerRadiusY,
+        donutHeight,
+      )}
+      ref={ref}
+      fill={color}
+    />
+  ),
 );
 
 PieOuterPath.propTypes = {
   color: PropTypes.toString.isRequired,
   donutHeight: PropTypes.number.isRequired,
   endAngle: PropTypes.number,
-  innerRef: PropTypes.ref,
   outerRadiusX: PropTypes.number.isRequired,
   outerRadiusY: PropTypes.number.isRequired,
   startAngle: PropTypes.number,

gsa/src/web/components/chart/label.js

@@ -22,9 +22,9 @@ import Theme from 'web/utils/theme';
 
 import PropTypes from '../../utils/proptypes';
 
-const Label = ({x, y, innerRef, children, ...props}) => (
+const Label = React.forwardRef(({x, y, children, ...props}, ref) => (
   <text
-    ref={innerRef}
+    ref={ref}
     fill={Theme.dialogGray} // to have labels a bit visible on white background
     textAnchor="middle"
     x={x}
@@ -37,10 +37,9 @@ const Label = ({x, y, innerRef, children, ...props}) => (
   >
     {children}
   </text>
-);
+));
 
 Label.propTypes = {
-  innerRef: PropTypes.ref,
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
 };

gsa/src/web/components/chart/legend.js

@@ -109,24 +109,24 @@ Line.propTypes = {
   width: PropTypes.number,
 };
 
-const Legend = ({data, children, innerRef, onItemClick}) => (
-  <StyledLegend innerRef={innerRef}>
+const Legend = React.forwardRef(({data, children, onItemClick}, ref) => (
+  <StyledLegend ref={ref}>
     {data.map((d, i) => (
       <ToolTip key={i} content={d.toolTip}>
         {({targetRef, hide, show}) =>
           isDefined(children) ? (
             children({
               d,
               toolTipProps: {
-                innerRef: targetRef,
+                ref: targetRef,
                 onMouseEnter: show,
                 onMouseLeave: hide,
               },
               onItemClick,
             })
           ) : (
             <Item
-              innerRef={targetRef}
+              ref={targetRef}
               onMouseEnter={show}
               onMouseLeave={hide}
               onClick={
@@ -141,7 +141,7 @@ const Legend = ({data, children, innerRef, onItemClick}) => (
       </ToolTip>
     ))}
   </StyledLegend>
-);
+));
 
 Legend.propTypes = {
   children: PropTypes.func,
@@ -152,7 +152,6 @@ Legend.propTypes = {
       toolTip: PropTypes.elementOrString,
     }),
   ).isRequired,
-  innerRef: PropTypes.ref,
   onItemClick: PropTypes.func,
 };
 

gsa/src/web/components/chart/line.js

@@ -503,7 +503,7 @@ class LineChart extends React.Component {
         <Svg
           width={width}
           height={height}
-          innerRef={setRef(svgRef, ref => (this.svg = ref))}
+          ref={setRef(svgRef, ref => (this.svg = ref))}
           onMouseLeave={hasValue ? this.hideInfo : undefined}
           onMouseEnter={hasValue ? this.showInfo : undefined}
           onMouseMove={hasValue ? this.handleMouseMove : undefined}
@@ -591,7 +591,7 @@ class LineChart extends React.Component {
           </Group>
         </Svg>
         {hasLines && showLegend && (
-          <Legend innerRef={this.legendRef} data={[yLine, y2Line]}>
+          <Legend ref={this.legendRef} data={[yLine, y2Line]}>
             {({d, toolTipProps}) => (
               <Item {...toolTipProps}>
                 <LegendLine

gsa/src/web/components/chart/schedule.js

@@ -203,7 +203,7 @@ class ScheduleChart extends React.Component {
     const bandwidth = yScale.bandwidth();
     return (
       <Layout align={['start', 'start']}>
-        <Svg width={width} height={height} innerRef={svgRef}>
+        <Svg width={width} height={height} ref={svgRef}>
           <Group top={margin.top} left={marginLeft}>
             <Axis
               orientation="left"

gsa/src/web/components/chart/tooltip.js

@@ -61,12 +61,12 @@ const ToolTipContainer = styled.div`
 
 ToolTipContainer.displayName = 'ToolTipContainer';
 
-const ToolTipDisplay = ({children, ...props}) => (
-  <ToolTipContainer {...props}>
+const ToolTipDisplay = React.forwardRef(({children, ...props}, ref) => (
+  <ToolTipContainer ref={ref} {...props}>
     <ToolTipText>{children}</ToolTipText>
     <ToolTipArrow>▼</ToolTipArrow>
   </ToolTipContainer>
-);
+));
 
 class ToolTip extends React.Component {
   static propTypes = {
@@ -127,7 +127,7 @@ class ToolTip extends React.Component {
       <React.Fragment>
         {content && visible && (
           <Portal>
-            <ToolTipDisplay innerRef={this.tooltip}>{content}</ToolTipDisplay>
+            <ToolTipDisplay ref={this.tooltip}>{content}</ToolTipDisplay>
           </Portal>
         )}
         {children({

gsa/src/web/components/chart/topology.js

@@ -460,7 +460,7 @@ class HostsTopologyChart extends React.Component {
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMousUp}
           onMouseMove={this.handleMousMove}
-          innerRef={setRef(ref => (this.svg = ref), svgRef)}
+          ref={setRef(ref => (this.svg = ref), svgRef)}
         >
           <Group left={translateX} top={translateY} scale={scale}>
             {links.map(link => {

gsa/src/web/components/chart/wordcloud.js

@@ -132,7 +132,7 @@ class WordCloudChart extends React.Component {
 
     const {words = []} = this.state;
     return (
-      <Svg width={width} height={height} innerRef={svgRef}>
+      <Svg width={width} height={height} ref={svgRef}>
         <Group top={height / 2 + margin.top} left={width / 2 + margin.left}>
           {words.map(word => (
             <Group

gsa/src/web/components/dashboard/display/datadisplay.js

@@ -344,7 +344,7 @@ class DataDisplay extends React.Component {
             )}
           </Layout>
         </DisplayBox>
-        <Download innerRef={this.downloadRef} />
+        <Download ref={this.downloadRef} />
       </Display>
     );
   }