From f26d933e1ecbd9ca104a6e1e0eb251462056aca8 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Tue, 12 Dec 2017 10:58:10 +0100
Subject: [PATCH] update react to 16.2.0, use react fragments

---
 server/sonar-web/package.json                 |  20 +-
 .../component/ComponentNavBranchesMenu.tsx    |  47 ++-
 .../nav/component/ComponentNavMeta.tsx        |  43 +--
 .../ComponentNavBranchesMenu-test.tsx.snap    | 364 ++++++++++--------
 .../ComponentNavMeta-test.tsx.snap            |  12 +-
 .../__snapshots__/AssigneeFacet-test.js.snap  |   3 -
 .../apps/projects/components/PageSidebar.tsx  | 135 +++----
 .../__snapshots__/PageSidebar-test.tsx.snap   | 188 +++++----
 .../projectsManagement/ProjectRowActions.tsx  |   3 +-
 .../ProjectRowActions-test.tsx.snap           |   4 -
 .../compare/ComparisonResults.tsx             | 149 +++----
 .../quality-profiles/details/ProfileRules.tsx |   1 -
 .../__snapshots__/ProfileRules-test.tsx.snap  |   1 -
 .../__snapshots__/SysInfoItem-test.tsx.snap   |   1 -
 .../OrganizationStep-test.js.snap             |  17 -
 .../__snapshots__/TokenStep-test.js.snap      |  18 -
 .../js/apps/users/components/UserActions.tsx  |  54 +--
 .../__snapshots__/UserActions-test.tsx.snap   |  37 +-
 .../__snapshots__/BubbleChart-test.js.snap    |  22 --
 server/sonar-web/yarn.lock                    |  78 ++--
 20 files changed, 556 insertions(+), 641 deletions(-)

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 1ba78887fc8..1610cd1f0bf 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -26,8 +26,8 @@
     "lodash": "4.17.4",
     "prop-types": "15.6.0",
     "rc-tooltip": "3.5.0",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
     "react-draggable": "3.0.3",
     "react-helmet": "5.2.0",
     "react-intl": "2.4.0",
@@ -47,14 +47,14 @@
     "@types/clipboard": "1.5.35",
     "@types/d3-array": "1.2.1",
     "@types/d3-scale": "1.0.10",
-    "@types/enzyme": "3.1.1",
+    "@types/enzyme": "3.1.5",
     "@types/escape-html": "0.0.20",
-    "@types/jest": "21.1.5",
+    "@types/jest": "21.1.8",
     "@types/jquery": "3.2.11",
     "@types/lodash": "4.14.80",
     "@types/prop-types": "15.5.2",
-    "@types/react": "16.0.19",
-    "@types/react-dom": "16.0.2",
+    "@types/react": "16.0.29",
+    "@types/react-dom": "16.0.3",
     "@types/react-helmet": "5.0.3",
     "@types/react-intl": "2.3.2",
     "@types/react-modal": "2.2.2",
@@ -77,9 +77,9 @@
     "babel-preset-react": "^6.22.0",
     "chalk": "2.3.0",
     "css-loader": "0.28.7",
-    "enzyme": "3.1.0",
-    "enzyme-adapter-react-16": "1.0.2",
-    "enzyme-to-json": "3.1.4",
+    "enzyme": "3.2.0",
+    "enzyme-adapter-react-16": "1.1.0",
+    "enzyme-to-json": "3.3.0",
     "eslint": "4.9.0",
     "eslint-plugin-import": "2.8.0",
     "eslint-plugin-jsx-a11y": "6.0.2",
@@ -98,7 +98,7 @@
     "postcss-loader": "2.0.8",
     "prettier": "1.7.4",
     "react-error-overlay": "1.0.7",
-    "react-test-renderer": "16.0.0",
+    "react-test-renderer": "16.2.0",
     "rimraf": "2.6.2",
     "style-loader": "0.19.0",
     "ts-jest": "21.1.4",
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx
index 07f7e0508cd..df39999d149 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx
@@ -166,36 +166,35 @@ export default class ComponentNavBranchesMenu extends React.PureComponent<Props,
       return <div className="menu-message note">{translate('no_results')}</div>;
     }
 
-    const menu: JSX.Element[] = [];
-    branches.forEach((branch, index) => {
+    const items = branches.map((branch, index) => {
       const isOrphan = isShortLivingBranch(branch) && branch.isOrphan;
       const previous = index > 0 ? branches[index - 1] : null;
       const isPreviousOrphan = isShortLivingBranch(previous) ? previous.isOrphan : false;
-      if (isLongLivingBranch(branch) || (isOrphan && !isPreviousOrphan)) {
-        menu.push(<li key={`divider-${branch.name}`} className="divider" />);
-      }
-      if (isOrphan && !isPreviousOrphan) {
-        menu.push(
-          <li className="dropdown-header" key="orphans">
-            {translate('branches.orphan_branches')}
-            <Tooltip overlay={translate('branches.orphan_branches.tooltip')}>
-              <i className="icon-help spacer-left" />
-            </Tooltip>
-          </li>
-        );
-      }
-      menu.push(
-        <ComponentNavBranchesMenuItem
-          branch={branch}
-          component={this.props.component}
-          key={branch.name}
-          onSelect={this.handleSelect}
-          selected={branch.name === selected}
-        />
+      const showDivider = isLongLivingBranch(branch) || (isOrphan && !isPreviousOrphan);
+      const showOrphanHeader = isOrphan && !isPreviousOrphan;
+      return (
+        <React.Fragment key={branch.name}>
+          {showDivider && <li className="divider" />}
+          {showOrphanHeader && (
+            <li className="dropdown-header">
+              {translate('branches.orphan_branches')}
+              <Tooltip overlay={translate('branches.orphan_branches.tooltip')}>
+                <i className="icon-help spacer-left" />
+              </Tooltip>
+            </li>
+          )}
+          <ComponentNavBranchesMenuItem
+            branch={branch}
+            component={this.props.component}
+            key={branch.name}
+            onSelect={this.handleSelect}
+            selected={branch.name === selected}
+          />
+        </React.Fragment>
       );
     });
 
-    return <ul className="menu menu-vertically-limited">{menu}</ul>;
+    return <ul className="menu menu-vertically-limited">{items}</ul>;
   };
 
   render() {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index 1a2b4bd1cd8..0e157ebe219 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -31,34 +31,29 @@ interface Props {
 }
 
 export default function ComponentNavMeta(props: Props) {
-  const metaList = [];
   const shortBranch = props.branch && isShortLivingBranch(props.branch);
-
-  if (props.component.analysisDate) {
-    metaList.push(
-      <li key="analysisDate">
-        <DateTimeFormatter date={props.component.analysisDate} />
-      </li>
-    );
-  }
-
-  if (props.component.version && !shortBranch) {
-    metaList.push(
-      <li key="version">
-        <Tooltip
-          overlay={`${translate('version')} ${props.component.version}`}
-          mouseEnterDelay={0.5}>
-          <span className="text-limited">
-            {translate('version')} {props.component.version}
-          </span>
-        </Tooltip>
-      </li>
-    );
-  }
+  const showVersion = props.component.version && !shortBranch;
 
   return (
     <div className="navbar-context-meta">
-      <ul className="list-inline">{metaList}</ul>
+      <ul className="list-inline">
+        {props.component.analysisDate && (
+          <li>
+            <DateTimeFormatter date={props.component.analysisDate} />
+          </li>
+        )}
+        {showVersion && (
+          <li>
+            <Tooltip
+              overlay={`${translate('version')} ${props.component.version}`}
+              mouseEnterDelay={0.5}>
+              <span className="text-limited">
+                {translate('version')} {props.component.version}
+              </span>
+            </Tooltip>
+          </li>
+        )}
+      </ul>
       {shortBranch && (
         <div className="navbar-context-meta-branch">
           <BranchStatus branch={props.branch!} />
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap
index 6f39c721b9d..6946e02b328 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap
@@ -18,151 +18,166 @@ exports[`renders list 1`] = `
   <ul
     className="menu menu-vertically-limited"
   >
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "key": "component",
-        }
-      }
+    <React.Fragment
       key="master"
-      onSelect={[Function]}
-      selected={true}
-    />
-    <li
-      className="divider"
-      key="divider-baz"
-    />
-    <li
-      className="dropdown-header"
-      key="orphans"
     >
-      branches.orphan_branches
-      <Tooltip
-        overlay="branches.orphan_branches.tooltip"
-        placement="bottom"
-      >
-        <i
-          className="icon-help spacer-left"
-        />
-      </Tooltip>
-    </li>
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": false,
-          "isOrphan": true,
-          "mergeBranch": "master",
-          "name": "baz",
-          "status": Object {
-            "bugs": 0,
-            "codeSmells": 0,
-            "vulnerabilities": 0,
-          },
-          "type": "SHORT",
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": true,
+            "name": "master",
+          }
         }
-      }
-      component={
-        Object {
-          "key": "component",
+        component={
+          Object {
+            "key": "component",
+          }
         }
-      }
+        key="master"
+        onSelect={[Function]}
+        selected={true}
+      />
+    </React.Fragment>
+    <React.Fragment
       key="baz"
-      onSelect={[Function]}
-      selected={false}
-    />
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": false,
-          "isOrphan": undefined,
-          "mergeBranch": "master",
-          "name": "foo",
-          "status": Object {
-            "bugs": 0,
-            "codeSmells": 0,
-            "vulnerabilities": 0,
-          },
-          "type": "SHORT",
+    >
+      <li
+        className="divider"
+      />
+      <li
+        className="dropdown-header"
+      >
+        branches.orphan_branches
+        <Tooltip
+          overlay="branches.orphan_branches.tooltip"
+          placement="bottom"
+        >
+          <i
+            className="icon-help spacer-left"
+          />
+        </Tooltip>
+      </li>
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": false,
+            "isOrphan": true,
+            "mergeBranch": "master",
+            "name": "baz",
+            "status": Object {
+              "bugs": 0,
+              "codeSmells": 0,
+              "vulnerabilities": 0,
+            },
+            "type": "SHORT",
+          }
         }
-      }
-      component={
-        Object {
-          "key": "component",
+        component={
+          Object {
+            "key": "component",
+          }
         }
-      }
+        key="baz"
+        onSelect={[Function]}
+        selected={false}
+      />
+    </React.Fragment>
+    <React.Fragment
       key="foo"
-      onSelect={[Function]}
-      selected={false}
-    />
-    <li
-      className="divider"
-      key="divider-bar"
-    />
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": false,
-          "name": "bar",
-          "type": "LONG",
+    >
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": false,
+            "isOrphan": undefined,
+            "mergeBranch": "master",
+            "name": "foo",
+            "status": Object {
+              "bugs": 0,
+              "codeSmells": 0,
+              "vulnerabilities": 0,
+            },
+            "type": "SHORT",
+          }
         }
-      }
-      component={
-        Object {
-          "key": "component",
+        component={
+          Object {
+            "key": "component",
+          }
         }
-      }
+        key="foo"
+        onSelect={[Function]}
+        selected={false}
+      />
+    </React.Fragment>
+    <React.Fragment
       key="bar"
-      onSelect={[Function]}
-      selected={false}
-    />
-    <li
-      className="divider"
-      key="divider-baz"
-    />
-    <li
-      className="dropdown-header"
-      key="orphans"
     >
-      branches.orphan_branches
-      <Tooltip
-        overlay="branches.orphan_branches.tooltip"
-        placement="bottom"
-      >
-        <i
-          className="icon-help spacer-left"
-        />
-      </Tooltip>
-    </li>
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": false,
-          "isOrphan": true,
-          "mergeBranch": "master",
-          "name": "baz",
-          "status": Object {
-            "bugs": 0,
-            "codeSmells": 0,
-            "vulnerabilities": 0,
-          },
-          "type": "SHORT",
+      <li
+        className="divider"
+      />
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": false,
+            "name": "bar",
+            "type": "LONG",
+          }
         }
-      }
-      component={
-        Object {
-          "key": "component",
+        component={
+          Object {
+            "key": "component",
+          }
         }
-      }
+        key="bar"
+        onSelect={[Function]}
+        selected={false}
+      />
+    </React.Fragment>
+    <React.Fragment
       key="baz"
-      onSelect={[Function]}
-      selected={false}
-    />
+    >
+      <li
+        className="divider"
+      />
+      <li
+        className="dropdown-header"
+      >
+        branches.orphan_branches
+        <Tooltip
+          overlay="branches.orphan_branches.tooltip"
+          placement="bottom"
+        >
+          <i
+            className="icon-help spacer-left"
+          />
+        </Tooltip>
+      </li>
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": false,
+            "isOrphan": true,
+            "mergeBranch": "master",
+            "name": "baz",
+            "status": Object {
+              "bugs": 0,
+              "codeSmells": 0,
+              "vulnerabilities": 0,
+            },
+            "type": "SHORT",
+          }
+        }
+        component={
+          Object {
+            "key": "component",
+          }
+        }
+        key="baz"
+        onSelect={[Function]}
+        selected={false}
+      />
+    </React.Fragment>
   </ul>
 </div>
 `;
@@ -185,51 +200,58 @@ exports[`searches 1`] = `
   <ul
     className="menu menu-vertically-limited"
   >
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": false,
-          "isOrphan": undefined,
-          "mergeBranch": "master",
-          "name": "foobar",
-          "status": Object {
-            "bugs": 0,
-            "codeSmells": 0,
-            "vulnerabilities": 0,
-          },
-          "type": "SHORT",
-        }
-      }
-      component={
-        Object {
-          "key": "component",
-        }
-      }
+    <React.Fragment
       key="foobar"
-      onSelect={[Function]}
-      selected={true}
-    />
-    <li
-      className="divider"
-      key="divider-bar"
-    />
-    <ComponentNavBranchesMenuItem
-      branch={
-        Object {
-          "isMain": false,
-          "name": "bar",
-          "type": "LONG",
+    >
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": false,
+            "isOrphan": undefined,
+            "mergeBranch": "master",
+            "name": "foobar",
+            "status": Object {
+              "bugs": 0,
+              "codeSmells": 0,
+              "vulnerabilities": 0,
+            },
+            "type": "SHORT",
+          }
         }
-      }
-      component={
-        Object {
-          "key": "component",
+        component={
+          Object {
+            "key": "component",
+          }
         }
-      }
+        key="foobar"
+        onSelect={[Function]}
+        selected={true}
+      />
+    </React.Fragment>
+    <React.Fragment
       key="bar"
-      onSelect={[Function]}
-      selected={false}
-    />
+    >
+      <li
+        className="divider"
+      />
+      <ComponentNavBranchesMenuItem
+        branch={
+          Object {
+            "isMain": false,
+            "name": "bar",
+            "type": "LONG",
+          }
+        }
+        component={
+          Object {
+            "key": "component",
+          }
+        }
+        key="bar"
+        onSelect={[Function]}
+        selected={false}
+      />
+    </React.Fragment>
   </ul>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
index dea4abcd294..a1dd339dfce 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
@@ -7,16 +7,12 @@ exports[`renders meta for long-living branch 1`] = `
   <ul
     className="list-inline"
   >
-    <li
-      key="analysisDate"
-    >
+    <li>
       <DateTimeFormatter
         date="2017-01-02T00:00:00.000Z"
       />
     </li>
-    <li
-      key="version"
-    >
+    <li>
       <Tooltip
         mouseEnterDelay={0.5}
         overlay="version 0.0.1"
@@ -42,9 +38,7 @@ exports[`renders status of short-living branch 1`] = `
   <ul
     className="list-inline"
   >
-    <li
-      key="analysisDate"
-    >
+    <li>
       <DateTimeFormatter
         date="2017-01-02T00:00:00.000Z"
       />
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap
index 28442511ef4..d384037257b 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap
@@ -14,7 +14,6 @@ exports[`should render 1`] = `
       active={false}
       disabled={false}
       halfWidth={false}
-      key=""
       name="unassigned"
       onClick={[Function]}
       stat="5"
@@ -101,7 +100,6 @@ exports[`should select unassigned 1`] = `
       active={true}
       disabled={false}
       halfWidth={false}
-      key=""
       name="unassigned"
       onClick={[Function]}
       stat="5"
@@ -164,7 +162,6 @@ exports[`should select user 1`] = `
       active={false}
       disabled={false}
       halfWidth={false}
-      key=""
       name="unassigned"
       onClick={[Function]}
       stat="5"
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
index 19c51033dac..d22864bc006 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
@@ -81,77 +81,70 @@ export default function PageSidebar(props: Props) {
         <h3>{translate('filters')}</h3>
       </div>
       <QualityGateFilter {...facetProps} facet={facets && facets.gate} value={query.gate} />
-      {!isLeakView && [
-        <ReliabilityFilter
-          key="reliability"
-          {...facetProps}
-          facet={facets && facets.reliability}
-          value={query.reliability}
-        />,
-        <SecurityFilter
-          key="security"
-          {...facetProps}
-          facet={facets && facets.security}
-          value={query.security}
-        />,
-        <MaintainabilityFilter
-          key="maintainability"
-          {...facetProps}
-          facet={facets && facets.maintainability}
-          value={query.maintainability}
-        />,
-        <CoverageFilter
-          key="coverage"
-          {...facetProps}
-          facet={facets && facets.coverage}
-          value={query.coverage}
-        />,
-        <DuplicationsFilter
-          key="duplications"
-          {...facetProps}
-          facet={facets && facets.duplications}
-          value={query.duplications}
-        />,
-        <SizeFilter key="size" {...facetProps} facet={facets && facets.size} value={query.size} />
-      ]}
-      {isLeakView && [
-        <NewReliabilityFilter
-          key="new_reliability"
-          {...facetProps}
-          facet={facets && facets.new_reliability}
-          value={query.new_reliability}
-        />,
-        <NewSecurityFilter
-          key="new_security"
-          {...facetProps}
-          facet={facets && facets.new_security}
-          value={query.new_security}
-        />,
-        <NewMaintainabilityFilter
-          key="new_maintainability"
-          {...facetProps}
-          facet={facets && facets.new_maintainability}
-          value={query.new_maintainability}
-        />,
-        <NewCoverageFilter
-          key="new_coverage"
-          {...facetProps}
-          facet={facets && facets.new_coverage}
-          value={query.new_coverage}
-        />,
-        <NewDuplicationsFilter
-          key="new_duplications"
-          {...facetProps}
-          facet={facets && facets.new_duplications}
-          value={query.new_duplications}
-        />,
-        <NewLinesFilter
-          key="new_lines"
-          {...facetProps}
-          facet={facets && facets.new_lines}
-          value={query.new_lines}
-        />
-      ]}
+      {!isLeakView && (
+        <React.Fragment>
+          <ReliabilityFilter
+            {...facetProps}
+            facet={facets && facets.reliability}
+            value={query.reliability}
+          />
+          <SecurityFilter
+            {...facetProps}
+            facet={facets && facets.security}
+            value={query.security}
+          />
+          <MaintainabilityFilter
+            {...facetProps}
+            facet={facets && facets.maintainability}
+            value={query.maintainability}
+          />
+          <CoverageFilter
+            {...facetProps}
+            facet={facets && facets.coverage}
+            value={query.coverage}
+          />
+          <DuplicationsFilter
+            {...facetProps}
+            facet={facets && facets.duplications}
+            value={query.duplications}
+          />
+          <SizeFilter {...facetProps} facet={facets && facets.size} value={query.size} />
+        </React.Fragment>
+      )}
+      {isLeakView && (
+        <React.Fragment>
+          <NewReliabilityFilter
+            {...facetProps}
+            facet={facets && facets.new_reliability}
+            value={query.new_reliability}
+          />
+          <NewSecurityFilter
+            {...facetProps}
+            facet={facets && facets.new_security}
+            value={query.new_security}
+          />
+          <NewMaintainabilityFilter
+            {...facetProps}
+            facet={facets && facets.new_maintainability}
+            value={query.new_maintainability}
+          />
+          <NewCoverageFilter
+            {...facetProps}
+            facet={facets && facets.new_coverage}
+            value={query.new_coverage}
+          />
+          <NewDuplicationsFilter
+            {...facetProps}
+            facet={facets && facets.new_duplications}
+            value={query.new_duplications}
+          />
+          <NewLinesFilter
+            {...facetProps}
+            facet={facets && facets.new_lines}
+            value={query.new_lines}
+          />
+        </React.Fragment>
+      )}
       <LanguagesFilterContainer
         {...facetProps}
         facet={facets && facets.languages}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap
index 1d2b3ef1b03..2ff7b55d83b 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap
@@ -24,60 +24,56 @@ exports[`should render \`leak\` view correctly 1`] = `
       }
     }
   />
-  <NewReliabilityFilter
-    key="new_reliability"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "view": "leak",
+  <React.Fragment>
+    <NewReliabilityFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "view": "leak",
+        }
       }
-    }
-  />
-  <NewSecurityFilter
-    key="new_security"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "view": "leak",
+    />
+    <NewSecurityFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "view": "leak",
+        }
       }
-    }
-  />
-  <NewMaintainabilityFilter
-    key="new_maintainability"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "view": "leak",
+    />
+    <NewMaintainabilityFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "view": "leak",
+        }
       }
-    }
-  />
-  <NewCoverageFilter
-    key="new_coverage"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "view": "leak",
+    />
+    <NewCoverageFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "view": "leak",
+        }
       }
-    }
-  />
-  <NewDuplicationsFilter
-    key="new_duplications"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "view": "leak",
+    />
+    <NewDuplicationsFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "view": "leak",
+        }
       }
-    }
-  />
-  <NewLinesFilter
-    key="new_lines"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "view": "leak",
+    />
+    <NewLinesFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "view": "leak",
+        }
       }
-    }
-  />
+    />
+  </React.Fragment>
   <Connect(LanguagesFilter)
     onQueryChange={[Function]}
     query={
@@ -118,61 +114,57 @@ exports[`should render correctly 1`] = `
       }
     }
   />
-  <ReliabilityFilter
-    key="reliability"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "size": "3",
+  <React.Fragment>
+    <ReliabilityFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "size": "3",
+        }
       }
-    }
-  />
-  <SecurityFilter
-    key="security"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "size": "3",
-      }
-    }
-  />
-  <MaintainabilityFilter
-    key="maintainability"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "size": "3",
+    />
+    <SecurityFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "size": "3",
+        }
       }
-    }
-  />
-  <CoverageFilter
-    key="coverage"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "size": "3",
+    />
+    <MaintainabilityFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "size": "3",
+        }
       }
-    }
-  />
-  <DuplicationsFilter
-    key="duplications"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "size": "3",
+    />
+    <CoverageFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "size": "3",
+        }
       }
-    }
-  />
-  <SizeFilter
-    key="size"
-    onQueryChange={[Function]}
-    query={
-      Object {
-        "size": "3",
+    />
+    <DuplicationsFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "size": "3",
+        }
       }
-    }
-    value="3"
-  />
+    />
+    <SizeFilter
+      onQueryChange={[Function]}
+      query={
+        Object {
+          "size": "3",
+        }
+      }
+      value="3"
+    />
+  </React.Fragment>
   <Connect(LanguagesFilter)
     onQueryChange={[Function]}
     query={
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx
index f5be8f05f05..5b3dbd83fe2 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx
@@ -98,7 +98,7 @@ export default class ProjectRowActions extends React.PureComponent<Props, State>
     const { hasAccess } = this.state;
 
     return (
-      <ActionsDropdown key="dropdown" onToggleClick={this.handleDropdownClick}>
+      <ActionsDropdown onToggleClick={this.handleDropdownClick}>
         {hasAccess === true && (
           <ActionsDropdownItem to={getComponentPermissionsUrl(this.props.project.key)}>
             {translate('edit_permissions')}
@@ -120,7 +120,6 @@ export default class ProjectRowActions extends React.PureComponent<Props, State>
         {this.state.restoreAccessModal && (
           <RestoreAccessModal
             currentUser={this.props.currentUser}
-            key="restore-access-modal"
             onClose={this.handleRestoreAccessClose}
             onRestoreAccess={this.handleRestoreAccessDone}
             project={this.props.project}
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap
index a3bae67199d..d2737d58194 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`restores access 1`] = `
 <ActionsDropdown
-  key="dropdown"
   onToggleClick={[Function]}
 >
   <ActionsDropdownItem
@@ -16,7 +15,6 @@ exports[`restores access 1`] = `
 
 exports[`restores access 2`] = `
 <ActionsDropdown
-  key="dropdown"
   onToggleClick={[Function]}
 >
   <ActionsDropdownItem
@@ -36,7 +34,6 @@ exports[`restores access 2`] = `
 
 exports[`restores access 3`] = `
 <ActionsDropdown
-  key="dropdown"
   onToggleClick={[Function]}
 >
   <ActionsDropdownItem
@@ -57,7 +54,6 @@ exports[`restores access 3`] = `
         "login": "admin",
       }
     }
-    key="restore-access-modal"
     onClose={[Function]}
     onRestoreAccess={[Function]}
     project={
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx
index 175ba7f003e..a98f0e91b5f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx
@@ -73,95 +73,96 @@ export default class ComparisonResults extends React.PureComponent<Props> {
     if (this.props.inLeft.length === 0) {
       return null;
     }
-    const header = (
-      <tr key="left-header">
-        <td>
-          <h6>
-            {translateWithParameters(
-              'quality_profiles.x_rules_only_in',
-              this.props.inLeft.length
-            )}{' '}
-            {this.props.left.name}
-          </h6>
-        </td>
-        <td>&nbsp;</td>
-      </tr>
+    return (
+      <React.Fragment>
+        <tr>
+          <td>
+            <h6>
+              {translateWithParameters(
+                'quality_profiles.x_rules_only_in',
+                this.props.inLeft.length
+              )}{' '}
+              {this.props.left.name}
+            </h6>
+          </td>
+          <td>&nbsp;</td>
+        </tr>
+        {this.props.inLeft.map(rule => (
+          <tr key={`left-${rule.key}`} className="js-comparison-in-left">
+            <td>{this.renderRule(rule, rule.severity)}</td>
+            <td>&nbsp;</td>
+          </tr>
+        ))}
+      </React.Fragment>
     );
-    const rows = this.props.inLeft.map(rule => (
-      <tr key={`left-${rule.key}`} className="js-comparison-in-left">
-        <td>{this.renderRule(rule, rule.severity)}</td>
-        <td>&nbsp;</td>
-      </tr>
-    ));
-    return [header, ...rows];
   }
 
   renderRight() {
     if (this.props.inRight.length === 0) {
       return null;
     }
-    const header = (
-      <tr key="right-header">
-        <td>&nbsp;</td>
-        <td>
-          <h6>
-            {translateWithParameters(
-              'quality_profiles.x_rules_only_in',
-              this.props.inRight.length
-            )}{' '}
-            {this.props.right.name}
-          </h6>
-        </td>
-      </tr>
+    return (
+      <React.Fragment>
+        <tr>
+          <td>&nbsp;</td>
+          <td>
+            <h6>
+              {translateWithParameters(
+                'quality_profiles.x_rules_only_in',
+                this.props.inRight.length
+              )}{' '}
+              {this.props.right.name}
+            </h6>
+          </td>
+        </tr>
+        {this.props.inRight.map(rule => (
+          <tr key={`right-${rule.key}`} className="js-comparison-in-right">
+            <td>&nbsp;</td>
+            <td>{this.renderRule(rule, rule.severity)}</td>
+          </tr>
+        ))}
+      </React.Fragment>
     );
-    const rows = this.props.inRight.map(rule => (
-      <tr key={`right-${rule.key}`} className="js-comparison-in-right">
-        <td>&nbsp;</td>
-        <td>{this.renderRule(rule, rule.severity)}</td>
-      </tr>
-    ));
-    return [header, ...rows];
   }
 
   renderModified() {
     if (this.props.modified.length === 0) {
       return null;
     }
-    const header = (
-      <tr key="modified-header">
-        <td colSpan={2} className="text-center">
-          <h6>
-            {translateWithParameters(
-              'quality_profiles.x_rules_have_different_configuration',
-              this.props.modified.length
-            )}
-          </h6>
-        </td>
-      </tr>
-    );
-    const secondHeader = (
-      <tr key="modified-second-header">
-        <td>
-          <h6>{this.props.left.name}</h6>
-        </td>
-        <td>
-          <h6>{this.props.right.name}</h6>
-        </td>
-      </tr>
+    return (
+      <React.Fragment>
+        <tr>
+          <td colSpan={2} className="text-center">
+            <h6>
+              {translateWithParameters(
+                'quality_profiles.x_rules_have_different_configuration',
+                this.props.modified.length
+              )}
+            </h6>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <h6>{this.props.left.name}</h6>
+          </td>
+          <td>
+            <h6>{this.props.right.name}</h6>
+          </td>
+        </tr>
+        {this.props.modified.map(rule => (
+          <tr key={`modified-${rule.key}`} className="js-comparison-modified">
+            <td>
+              {this.renderRule(rule, rule.left.severity)}
+              {this.renderParameters(rule.left.params)}
+            </td>
+            <td>
+              {this.renderRule(rule, rule.right.severity)}
+              {this.renderParameters(rule.right.params)}
+            </td>
+          </tr>
+        ))}
+      </React.Fragment>
     );
-    const rows = this.props.modified.map(rule => (
-      <tr key={`modified-${rule.key}`} className="js-comparison-modified">
-        <td>
-          {this.renderRule(rule, rule.left.severity)}
-          {this.renderParameters(rule.left.params)}
-        </td>
-        <td>
-          {this.renderRule(rule, rule.right.severity)}
-          {this.renderParameters(rule.right.params)}
-        </td>
-      </tr>
-    ));
-    return [header, secondHeader, ...rows];
   }
 
   render() {
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx
index facde0a4a34..4fec4cb33e9 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx
@@ -164,7 +164,6 @@ export default class ProfileRules extends React.PureComponent<Props, State> {
             </thead>
             <tbody>
               <ProfileRulesRowTotal
-                key="all"
                 count={this.state.activatedTotal}
                 organization={organization}
                 qprofile={profile.key}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRules-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRules-test.tsx.snap
index 6d92fb9ab26..c366398e56e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRules-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRules-test.tsx.snap
@@ -28,7 +28,6 @@ exports[`should render the quality profiles rules with sonarway comparison 1`] =
       <tbody>
         <ProfileRulesRowTotal
           count={68}
-          key="all"
           organization="foo"
           qprofile="foo"
           total={243}
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap
index 0e730faf515..9d3064d124c 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap
@@ -129,7 +129,6 @@ Array [
               >
                 <CheckIcon>
                   <svg
-                    className={undefined}
                     height={16}
                     version="1.1"
                     viewBox="0 0 16 16"
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap
index b36b4f02776..48a5505dee2 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap
@@ -25,9 +25,6 @@ exports[`works with existing organization 1`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
@@ -82,7 +79,6 @@ exports[`works with existing organization 1`] = `
                     },
                   ]
                 }
-                value={undefined}
               >
                 <Select
                   addLabelText="Add \\"{label}\\"?"
@@ -138,13 +134,11 @@ exports[`works with existing organization 1`] = `
                   searchable={true}
                   simpleValue={false}
                   tabSelectsValue={true}
-                  value={undefined}
                   valueComponent={[Function]}
                   valueKey="value"
                 >
                   <div
                     className="Select input-super-large Select--single is-searchable"
-                    style={undefined}
                   >
                     <div
                       className="Select-control"
@@ -153,7 +147,6 @@ exports[`works with existing organization 1`] = `
                       onTouchEnd={[Function]}
                       onTouchMove={[Function]}
                       onTouchStart={[Function]}
-                      style={undefined}
                     >
                       <span
                         className="Select-multi-value-wrapper"
@@ -166,11 +159,8 @@ exports[`works with existing organization 1`] = `
                         </div>
                         <AutosizeInput
                           aria-activedescendant="react-select-2--value"
-                          aria-describedby={undefined}
                           aria-expanded="false"
                           aria-haspopup="false"
-                          aria-label={undefined}
-                          aria-labelledby={undefined}
                           aria-owns=""
                           className="Select-input"
                           minWidth="5"
@@ -179,7 +169,6 @@ exports[`works with existing organization 1`] = `
                           onFocus={[Function]}
                           required={false}
                           role="combobox"
-                          tabIndex={undefined}
                           value=""
                         >
                           <div
@@ -199,14 +188,9 @@ exports[`works with existing organization 1`] = `
                             />
                             <input
                               aria-activedescendant="react-select-2--value"
-                              aria-describedby={undefined}
                               aria-expanded="false"
                               aria-haspopup="false"
-                              aria-label={undefined}
-                              aria-labelledby={undefined}
                               aria-owns=""
-                              className={undefined}
-                              id={undefined}
                               onBlur={[Function]}
                               onChange={[Function]}
                               onFocus={[Function]}
@@ -218,7 +202,6 @@ exports[`works with existing organization 1`] = `
                                   "width": "5px",
                                 }
                               }
-                              tabIndex={undefined}
                               value=""
                             />
                             <div
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap
index c0f9d5a2e4e..a09c774b420 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap
@@ -24,9 +24,6 @@ exports[`generates token 1`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
@@ -129,9 +126,6 @@ exports[`generates token 2`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
@@ -231,9 +225,6 @@ exports[`generates token 3`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
@@ -332,9 +323,6 @@ exports[`revokes token 1`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
@@ -433,9 +421,6 @@ exports[`revokes token 2`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
@@ -515,9 +500,6 @@ exports[`revokes token 3`] = `
   >
     <div
       className="boxed-group onboarding-step is-open"
-      onClick={undefined}
-      role={undefined}
-      tabIndex={undefined}
     >
       <div
         className="onboarding-step-number"
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserActions.tsx b/server/sonar-web/src/main/js/apps/users/components/UserActions.tsx
index 9c5f64fccea..4d3302709f0 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserActions.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserActions.tsx
@@ -49,7 +49,7 @@ export default class UserActions extends React.PureComponent<Props, State> {
   renderActions = () => {
     const { user } = this.props;
     return (
-      <ActionsDropdown key="actions" menuClassName="dropdown-menu-right">
+      <ActionsDropdown menuClassName="dropdown-menu-right">
         <ActionsDropdownItem className="js-user-update" onClick={this.handleOpenUpdateForm}>
           {translate('update_details')}
         </ActionsDropdownItem>
@@ -75,39 +75,23 @@ export default class UserActions extends React.PureComponent<Props, State> {
     const { openForm } = this.state;
     const { isCurrentUser, onUpdateUsers, user } = this.props;
 
-    if (openForm === 'deactivate') {
-      return [
-        this.renderActions(),
-        <DeactivateForm
-          key="form"
-          onClose={this.handleCloseForm}
-          onUpdateUsers={onUpdateUsers}
-          user={user}
-        />
-      ];
-    }
-    if (openForm === 'password') {
-      return [
-        this.renderActions(),
-        <PasswordForm
-          isCurrentUser={isCurrentUser}
-          key="form"
-          onClose={this.handleCloseForm}
-          user={user}
-        />
-      ];
-    }
-    if (openForm === 'update') {
-      return [
-        this.renderActions(),
-        <UserForm
-          key="form"
-          onClose={this.handleCloseForm}
-          onUpdateUsers={onUpdateUsers}
-          user={user}
-        />
-      ];
-    }
-    return this.renderActions();
+    return (
+      <React.Fragment>
+        {this.renderActions()}
+        {openForm === 'deactivate' && (
+          <DeactivateForm
+            onClose={this.handleCloseForm}
+            onUpdateUsers={onUpdateUsers}
+            user={user}
+          />
+        )}
+        {openForm === 'password' && (
+          <PasswordForm isCurrentUser={isCurrentUser} onClose={this.handleCloseForm} user={user} />
+        )}
+        {openForm === 'update' && (
+          <UserForm onClose={this.handleCloseForm} onUpdateUsers={onUpdateUsers} user={user} />
+        )}
+      </React.Fragment>
+    );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserActions-test.tsx.snap
index 6328daaf8e0..0fd31e7f6ae 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserActions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserActions-test.tsx.snap
@@ -1,23 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<ActionsDropdown
-  key="actions"
-  menuClassName="dropdown-menu-right"
->
-  <ActionsDropdownItem
-    className="js-user-update"
-    onClick={[Function]}
+<React.Fragment>
+  <ActionsDropdown
+    menuClassName="dropdown-menu-right"
   >
-    update_details
-  </ActionsDropdownItem>
-  <ActionsDropdownDivider />
-  <ActionsDropdownItem
-    className="js-user-deactivate"
-    destructive={true}
-    onClick={[Function]}
-  >
-    users.deactivate
-  </ActionsDropdownItem>
-</ActionsDropdown>
+    <ActionsDropdownItem
+      className="js-user-update"
+      onClick={[Function]}
+    >
+      update_details
+    </ActionsDropdownItem>
+    <ActionsDropdownDivider />
+    <ActionsDropdownItem
+      className="js-user-deactivate"
+      destructive={true}
+      onClick={[Function]}
+    >
+      users.deactivate
+    </ActionsDropdownItem>
+  </ActionsDropdown>
+</React.Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.js.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.js.snap
index acc3eec0736..e5854e7792f 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.js.snap
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.js.snap
@@ -2,18 +2,13 @@
 
 exports[`should display bubbles 1`] = `
 <Bubble
-  color={undefined}
   key="0"
-  link={undefined}
-  onClick={undefined}
   r={45}
-  tooltip={undefined}
   x={-10}
   y={52.3015873015873}
 >
   <circle
     className="bubble-chart-bubble"
-    onClick={undefined}
     r={45}
     style={
       Object {
@@ -28,18 +23,13 @@ exports[`should display bubbles 1`] = `
 
 exports[`should display bubbles 2`] = `
 <Bubble
-  color={undefined}
   key="1"
-  link={undefined}
-  onClick={undefined}
   r={33.57142857142857}
-  tooltip={undefined}
   x={-75}
   y={33.57142857142857}
 >
   <circle
     className="bubble-chart-bubble"
-    onClick={undefined}
     r={33.57142857142857}
     style={
       Object {
@@ -54,12 +44,9 @@ exports[`should display bubbles 2`] = `
 
 exports[`should render bubble links 1`] = `
 <Bubble
-  color={undefined}
   key="0"
   link="foo"
-  onClick={undefined}
   r={45}
-  tooltip={undefined}
   x={-10}
   y={52.3015873015873}
 >
@@ -74,7 +61,6 @@ exports[`should render bubble links 1`] = `
     >
       <circle
         className="bubble-chart-bubble"
-        onClick={undefined}
         r={45}
         style={
           Object {
@@ -91,12 +77,9 @@ exports[`should render bubble links 1`] = `
 
 exports[`should render bubble links 2`] = `
 <Bubble
-  color={undefined}
   key="1"
   link="bar"
-  onClick={undefined}
   r={33.57142857142857}
-  tooltip={undefined}
   x={-75}
   y={33.57142857142857}
 >
@@ -111,7 +94,6 @@ exports[`should render bubble links 2`] = `
     >
       <circle
         className="bubble-chart-bubble"
-        onClick={undefined}
         r={33.57142857142857}
         style={
           Object {
@@ -128,12 +110,10 @@ exports[`should render bubble links 2`] = `
 
 exports[`should render bubbles with click handlers 1`] = `
 <Bubble
-  color={undefined}
   key="0"
   link="foo"
   onClick={[Function]}
   r={45}
-  tooltip={undefined}
   x={-10}
   y={52.3015873015873}
 >
@@ -154,12 +134,10 @@ exports[`should render bubbles with click handlers 1`] = `
 
 exports[`should render bubbles with click handlers 2`] = `
 <Bubble
-  color={undefined}
   key="1"
   link="bar"
   onClick={[Function]}
   r={33.57142857142857}
-  tooltip={undefined}
   x={-75}
   y={33.57142857142857}
 >
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index ef3096db9fb..79a4fa67c81 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -28,9 +28,9 @@
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.0.7.tgz#4266d7c9be15fa81256a88d1d052d61cd8dc572c"
 
-"@types/enzyme@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.1.tgz#102ebd9aa33fa15fd11477b6f701cde18cbe7de0"
+"@types/enzyme@3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.5.tgz#6cc31d7f7e552209e244a45d89279f4def4aaade"
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"
@@ -43,9 +43,9 @@
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.2.tgz#b6affa240cb10b5f841c6443d8a24d7f3fc8bb0c"
 
-"@types/jest@21.1.5":
-  version "21.1.5"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-21.1.5.tgz#3db93d069d12602ca115d3604550e15131d8eb7a"
+"@types/jest@21.1.8":
+  version "21.1.8"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-21.1.8.tgz#d497213725684f1e5a37900b17a47c9c018f1a97"
 
 "@types/jquery@3.2.11":
   version "3.2.11"
@@ -67,9 +67,9 @@
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.2.tgz#3c6b8dceb2906cc87fe4358e809f9d20c8d59be1"
 
-"@types/react-dom@16.0.2":
-  version "16.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.2.tgz#2da9de21fd83f0140b64794ad9c47930230aedae"
+"@types/react-dom@16.0.3":
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.3.tgz#8accad7eabdab4cca3e1a56f5ccb57de2da0ff64"
   dependencies:
     "@types/node" "*"
     "@types/react" "*"
@@ -110,9 +110,9 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.0.19":
-  version "16.0.19"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.19.tgz#f804a0fcd6d94c17df92cf2fd46671bbbc862329"
+"@types/react@*", "@types/react@16.0.29":
+  version "16.0.29"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.29.tgz#4eea6a8de9f40ca71d580ae7a9f3b4b77b368de8"
 
 abab@^1.0.3:
   version "1.0.4"
@@ -2411,45 +2411,46 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-enzyme-adapter-react-16@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.2.tgz#8c6f431f17c69e1e9eeb25ca4bd92f31971eb2dd"
+enzyme-adapter-react-16@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.0.tgz#86c5db7c10f0be6ec25d54ca41b59f2abb397cf4"
   dependencies:
-    enzyme-adapter-utils "^1.0.0"
+    enzyme-adapter-utils "^1.1.0"
     lodash "^4.17.4"
     object.assign "^4.0.4"
     object.values "^1.0.4"
     prop-types "^15.5.10"
     react-test-renderer "^16.0.0-0"
 
-enzyme-adapter-utils@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.0.1.tgz#fcd81223339a55a312f7552641e045c404084009"
+enzyme-adapter-utils@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz#7f4471ee0a70b91169ec8860d2bf0a6b551664b2"
   dependencies:
     lodash "^4.17.4"
     object.assign "^4.0.4"
     prop-types "^15.5.10"
 
-enzyme-to-json@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.1.4.tgz#a4a85a8f7b561cb8c9c0d728ad1b619a3fed7df2"
+enzyme-to-json@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.0.tgz#553e23a09ffb4b0cf09287e2edf9c6539fddaa84"
   dependencies:
     lodash "^4.17.4"
 
-enzyme@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.1.0.tgz#d8ca84085790fbcec6ed40badd14478faee4c25a"
+enzyme@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.2.0.tgz#998bdcda0fc71b8764a0017f7cc692c943f54a7a"
   dependencies:
     cheerio "^1.0.0-rc.2"
     function.prototype.name "^1.0.3"
+    has "^1.0.1"
     is-subset "^0.1.1"
     lodash "^4.17.4"
     object-is "^1.0.1"
     object.assign "^4.0.4"
     object.entries "^1.0.4"
     object.values "^1.0.4"
-    raf "^3.3.2"
-    rst-selector-parser "^2.2.2"
+    raf "^3.4.0"
+    rst-selector-parser "^2.2.3"
 
 errno@^0.1.3, errno@^0.1.4:
   version "0.1.4"
@@ -5952,7 +5953,7 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
-raf@^3.3.2:
+raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:
@@ -6072,9 +6073,9 @@ react-dev-utils@^3.0.0:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+react-dom@16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6169,12 +6170,13 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-test-renderer@16.0.0, react-test-renderer@^16.0.0-0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
+react-test-renderer@16.2.0, react-test-renderer@^16.0.0-0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 react-virtualized@9.12.0:
   version "9.12.0"
@@ -6186,9 +6188,9 @@ react-virtualized@9.12.0:
     loose-envify "^1.3.0"
     prop-types "^15.5.4"
 
-react@16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+react@16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6547,7 +6549,7 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
-rst-selector-parser@^2.2.2:
+rst-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
   dependencies:
-- 
2.39.5