update react to 16.2.0, use react fragments

18 files changed, 506 insertions, 593 deletions

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}
 >