update web dependencies

server/sonar-vsts/config/utils.js

@@ -30,6 +30,15 @@ const cssLoader = ({ production }) => ({
   }
 });
 
+const theme = require('../../sonar-web/src/main/js/app/theme');
+
+const customProperties = {};
+Object.keys(theme).forEach(key => {
+  if (typeof theme[key] === 'string') {
+    customProperties[`--${key}`] = theme[key];
+  }
+});
+
 const postcssLoader = () => ({
   loader: 'postcss-loader',
   options: {
@@ -37,7 +46,8 @@ const postcssLoader = () => ({
     plugins: () => [
       require('autoprefixer'),
       require('postcss-custom-properties')({
-        variables: require('../../sonar-web/src/main/js/app/theme')
+        importFrom: { customProperties },
+        preserve: false
       }),
       require('postcss-calc')
     ]

server/sonar-vsts/package.json

@@ -7,14 +7,14 @@
   "private": true,
   "dependencies": {
     "@babel/polyfill": "7.0.0",
-    "classnames": "2.2.5",
-    "lodash": "4.17.4",
-    "react": "16.4.2",
-    "react-dom": "16.4.2",
+    "classnames": "2.2.6",
+    "lodash": "4.17.11",
+    "react": "16.6.0",
+    "react-dom": "16.6.0",
     "whatwg-fetch": "2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "7.1.0",
+    "@babel/core": "7.1.2",
     "@babel/plugin-proposal-class-properties": "7.1.0",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0",
     "@babel/plugin-syntax-dynamic-import": "7.0.0",
@@ -23,24 +23,24 @@
     "@babel/plugin-transform-react-jsx-source": "7.0.0",
     "@babel/preset-env": "7.1.0",
     "@babel/preset-react": "7.0.0",
-    "@types/classnames": "2.2.3",
-    "@types/enzyme": "3.1.10",
-    "@types/jest": "23.3.1",
-    "@types/lodash": "4.14.102",
-    "@types/react": "16.4.8",
-    "@types/react-dom": "16.0.7",
-    "autoprefixer": "7.1.6",
+    "@types/classnames": "2.2.6",
+    "@types/enzyme": "3.1.14",
+    "@types/jest": "23.3.7",
+    "@types/lodash": "4.14.117",
+    "@types/react": "16.4.18",
+    "@types/react-dom": "16.0.9",
+    "autoprefixer": "9.3.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "23.6.0",
-    "babel-loader": "8.0.2",
-    "babel-plugin-dynamic-import-node": "2.1.0",
+    "babel-loader": "8.0.4",
+    "babel-plugin-dynamic-import-node": "2.2.0",
     "babel-plugin-lodash": "3.3.4",
-    "chalk": "2.3.2",
+    "chalk": "2.4.1",
     "clean-webpack-plugin": "0.1.19",
-    "copy-webpack-plugin": "4.5.1",
-    "css-loader": "0.28.11",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.1.1",
+    "copy-webpack-plugin": "4.5.4",
+    "css-loader": "1.0.0",
+    "enzyme": "3.7.0",
+    "enzyme-adapter-react-16": "1.6.0",
     "enzyme-to-json": "3.3.4",
     "escape-string-regexp": "1.0.5",
     "eslint": "5.7.0",
@@ -50,23 +50,23 @@
     "eslint-plugin-promise": "4.0.1",
     "eslint-plugin-react": "7.11.1",
     "eslint-plugin-sonarjs": "0.2.0",
-    "html-webpack-plugin": "3.0.6",
+    "html-webpack-plugin": "3.2.0",
     "jest": "23.6.0",
-    "postcss-calc": "6.0.1",
-    "postcss-custom-properties": "6.2.0",
-    "postcss-loader": "2.1.1",
-    "prettier": "1.14.0",
+    "postcss-calc": "7.0.0",
+    "postcss-custom-properties": "8.0.8",
+    "postcss-loader": "3.0.0",
+    "prettier": "1.14.3",
     "react-dev-utils": "5.0.0",
     "react-error-overlay": "1.0.7",
-    "react-test-renderer": "16.4.2",
-    "style-loader": "0.20.3",
+    "react-test-renderer": "16.6.0",
+    "style-loader": "0.23.1",
     "ts-jest": "23.10.4",
-    "ts-loader": "5.2.1",
-    "typescript": "3.1.2",
+    "ts-loader": "5.2.2",
+    "typescript": "3.1.3",
     "typescript-eslint-parser": "20.0.0",
-    "webpack": "4.1.1",
-    "webpack-bundle-analyzer": "2.11.1",
-    "webpack-dev-server": "3.1.1"
+    "webpack": "4.22.0",
+    "webpack-bundle-analyzer": "3.0.3",
+    "webpack-dev-server": "3.1.10"
   },
   "scripts": {
     "start": "node scripts/start.js",
@@ -99,7 +99,9 @@
     "globals": {
       "ts-jest": {
         "diagnostics": {
-          "ignoreCodes": [151001]
+          "ignoreCodes": [
+            151001
+          ]
         }
       }
     },

server/sonar-web/config/utils.js

@@ -30,6 +30,15 @@ const cssLoader = ({ production }) => ({
   }
 });
 
+const theme = require('../src/main/js/app/theme');
+
+const customProperties = {};
+Object.keys(theme).forEach(key => {
+  if (typeof theme[key] === 'string') {
+    customProperties[`--${key}`] = theme[key];
+  }
+});
+
 const postcssLoader = () => ({
   loader: 'postcss-loader',
   options: {
@@ -37,7 +46,8 @@ const postcssLoader = () => ({
     plugins: () => [
       require('autoprefixer'),
       require('postcss-custom-properties')({
-        variables: require('../src/main/js/app/theme')
+        importFrom: { customProperties },
+        preserve: false
       }),
       require('postcss-calc')
     ]

server/sonar-web/package.json

@@ -6,7 +6,7 @@
   "license": "LGPL-3.0",
   "dependencies": {
     "@babel/polyfill": "7.0.0",
-    "classnames": "2.2.5",
+    "classnames": "2.2.6",
     "clipboard": "2.0.1",
     "create-react-class": "15.6.3",
     "d3-array": "1.2.4",
@@ -20,34 +20,34 @@
     "history": "3.3.0",
     "intl-relativeformat": "2.1.0",
     "keymaster": "1.6.2",
-    "lodash": "4.17.10",
-    "lunr": "2.3.0",
-    "mdast-util-toc": "2.0.1",
-    "prop-types": "15.6.1",
-    "react": "16.4.2",
-    "react-day-picker": "7.1.8",
-    "react-dom": "16.4.2",
+    "lodash": "4.17.11",
+    "lunr": "2.3.4",
+    "mdast-util-toc": "2.1.0",
+    "prop-types": "15.6.2",
+    "react": "16.6.0",
+    "react-day-picker": "7.2.4",
+    "react-dom": "16.6.0",
     "react-draggable": "3.0.5",
     "react-ga": "2.5.3",
     "react-helmet": "5.2.0",
-    "react-intl": "2.4.0",
-    "react-modal": "3.4.4",
+    "react-intl": "2.7.2",
+    "react-modal": "3.6.1",
     "react-redux": "5.0.7",
     "react-router": "3.2.0",
     "react-select": "1.2.1",
-    "react-virtualized": "9.18.5",
-    "redux": "3.7.2",
+    "react-virtualized": "9.21.0",
+    "redux": "4.0.1",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.2.0",
-    "remark-custom-blocks": "2.2.0",
-    "remark-slug": "5.0.0",
+    "redux-thunk": "2.3.0",
+    "remark-custom-blocks": "2.3.0",
+    "remark-slug": "5.1.0",
     "remark-toc": "5.0.0",
-    "unist-util-visit": "1.3.1",
+    "unist-util-visit": "1.4.0",
     "valid-url": "1.0.9",
     "whatwg-fetch": "2.0.4"
   },
   "devDependencies": {
-    "@babel/core": "7.1.0",
+    "@babel/core": "7.1.2",
     "@babel/plugin-proposal-class-properties": "7.1.0",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0",
     "@babel/plugin-syntax-dynamic-import": "7.0.0",
@@ -56,41 +56,41 @@
     "@babel/plugin-transform-react-jsx-source": "7.0.0",
     "@babel/preset-env": "7.1.0",
     "@babel/preset-react": "7.0.0",
-    "@types/classnames": "2.2.3",
-    "@types/clipboard": "2.0.0",
-    "@types/d3-array": "1.2.2",
+    "@types/classnames": "2.2.6",
+    "@types/clipboard": "2.0.1",
+    "@types/d3-array": "1.2.4",
     "@types/d3-hierarchy": "1.1.4",
     "@types/d3-scale": "2.0.2",
     "@types/d3-selection": "1.3.2",
     "@types/d3-shape": "1.2.4",
     "@types/d3-zoom": "1.7.2",
-    "@types/enzyme": "3.1.10",
-    "@types/jest": "23.3.1",
+    "@types/enzyme": "3.1.14",
+    "@types/jest": "23.3.7",
     "@types/keymaster": "1.6.28",
-    "@types/lodash": "4.14.108",
-    "@types/prop-types": "15.5.4",
-    "@types/react": "16.4.8",
-    "@types/react-dom": "16.0.7",
-    "@types/react-helmet": "5.0.6",
-    "@types/react-intl": "2.3.8",
-    "@types/react-modal": "3.1.2",
+    "@types/lodash": "4.14.117",
+    "@types/prop-types": "15.5.6",
+    "@types/react": "16.4.18",
+    "@types/react-dom": "16.0.9",
+    "@types/react-helmet": "5.0.7",
+    "@types/react-intl": "2.3.11",
+    "@types/react-modal": "3.2.1",
     "@types/react-redux": "6.0.6",
     "@types/react-router": "3.0.13",
     "@types/react-select": "1.2.6",
-    "@types/react-virtualized": "9.18.3",
+    "@types/react-virtualized": "9.18.7",
     "@types/valid-url": "1.0.2",
-    "autoprefixer": "8.4.1",
+    "autoprefixer": "9.3.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "23.6.0",
-    "babel-loader": "8.0.2",
-    "babel-plugin-dynamic-import-node": "2.1.0",
+    "babel-loader": "8.0.4",
+    "babel-plugin-dynamic-import-node": "2.2.0",
     "babel-plugin-lodash": "3.3.4",
     "chalk": "2.4.1",
     "clean-webpack-plugin": "0.1.19",
-    "copy-webpack-plugin": "4.5.1",
-    "css-loader": "0.28.11",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.1.1",
+    "copy-webpack-plugin": "4.5.4",
+    "css-loader": "1.0.0",
+    "enzyme": "3.7.0",
+    "enzyme-adapter-react-16": "1.6.0",
     "enzyme-to-json": "3.3.4",
     "escape-string-regexp": "1.0.5",
     "eslint": "5.7.0",
@@ -102,38 +102,38 @@
     "eslint-plugin-sonarjs": "0.2.0",
     "expose-loader": "0.7.5",
     "flow-bin": "^0.52.0",
-    "glob": "7.1.2",
+    "glob": "7.1.3",
     "glob-promise": "3.4.0",
     "html-webpack-plugin": "3.2.0",
     "jest": "23.6.0",
-    "lint-staged": "4.3.0",
+    "lint-staged": "7.3.0",
     "lodash-webpack-plugin": "0.11.5",
-    "mini-css-extract-plugin": "0.4.0",
-    "postcss-calc": "6.0.1",
-    "postcss-custom-properties": "6.2.0",
-    "postcss-loader": "2.1.5",
-    "prettier": "1.14.0",
+    "mini-css-extract-plugin": "0.4.4",
+    "postcss-calc": "7.0.0",
+    "postcss-custom-properties": "8.0.8",
+    "postcss-loader": "3.0.0",
+    "prettier": "1.14.3",
     "raw-loader": "0.5.1",
     "react-dev-utils": "5.0.1",
     "react-error-overlay": "1.0.7",
-    "react-test-renderer": "16.4.2",
+    "react-test-renderer": "16.6.0",
     "remark": "9.0.0",
     "remark-react": "4.0.3",
-    "style-loader": "0.21.0",
+    "style-loader": "0.23.1",
     "ts-jest": "23.10.4",
-    "ts-loader": "5.2.1",
-    "typescript": "3.1.2",
+    "ts-loader": "5.2.2",
+    "typescript": "3.1.3",
     "typescript-eslint-parser": "20.0.0",
-    "webpack": "4.15.1",
-    "webpack-bundle-analyzer": "2.11.2",
-    "webpack-dev-server": "3.1.4"
+    "webpack": "4.22.0",
+    "webpack-bundle-analyzer": "3.0.3",
+    "webpack-dev-server": "3.1.10"
   },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "jest",
     "format": "prettier --write --list-different 'src/main/js/**/*.{js,ts,tsx,css}'",
-    "format-check": "yarn prettier --list-different 'src/main/js/**/*.{js,ts,tsx,css}'",
+    "format-check": "prettier --list-different 'src/main/js/**/*.{js,ts,tsx,css}'",
     "lint": "eslint --ext js,ts,tsx --quiet src/main/js",
     "lint-report": "eslint --ext js,ts,tsx -f json -o eslint-report.json src/main/js",
     "flow-check": "flow check src/main/js",
@@ -161,7 +161,9 @@
     "globals": {
       "ts-jest": {
         "diagnostics": {
-          "ignoreCodes": [151001]
+          "ignoreCodes": [
+            151001
+          ]
         }
       }
     },

server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx

@@ -31,7 +31,8 @@ import {
   PullRequest,
   BranchType,
   Visibility,
-  Task
+  Task,
+  Component
 } from '../../types';
 import { STATUSES } from '../../../apps/background-tasks/constants';
 import { waitAndUpdate } from '../../../helpers/testUtils';
@@ -84,15 +85,15 @@ beforeEach(() => {
 });
 
 it('changes component', () => {
-  const wrapper = shallow(
+  const wrapper = shallow<ComponentContainer>(
     <ComponentContainer fetchOrganizations={jest.fn()} location={{ query: { id: 'foo' } }}>
       <Inner />
     </ComponentContainer>
   );
-  (wrapper.instance() as ComponentContainer).mounted = true;
+  wrapper.instance().mounted = true;
   wrapper.setState({
-    branches: [{ isMain: true }],
-    component: { qualifier: 'TRK', visibility: Visibility.Public },
+    branchLikes: [{ isMain: true, name: 'master' }],
+    component: { qualifier: 'TRK', visibility: Visibility.Public } as Component,
     loading: false
   });
 

server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap

@@ -5,42 +5,40 @@ exports[`should display correct links for SonarCloud 1`] = `
   <ul
     className="menu abs-width-240"
   >
-    <React.Fragment>
-      <li
-        className="menu-header"
-      >
-        embed_docs.suggestion
-      </li>
-      <li
-        key="0"
+    <li
+      className="menu-header"
+    >
+      embed_docs.suggestion
+    </li>
+    <li
+      key="0"
+    >
+      <Link
+        onClick={[MockFunction]}
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        target="_blank"
+        to="#"
       >
-        <Link
-          onClick={[MockFunction]}
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to="#"
-        >
-          foo
-        </Link>
-      </li>
-      <li
-        key="1"
+        foo
+      </Link>
+    </li>
+    <li
+      key="1"
+    >
+      <Link
+        onClick={[MockFunction]}
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        target="_blank"
+        to="#"
       >
-        <Link
-          onClick={[MockFunction]}
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to="#"
-        >
-          bar
-        </Link>
-      </li>
-      <li
-        className="divider"
-      />
-    </React.Fragment>
+        bar
+      </Link>
+    </li>
+    <li
+      className="divider"
+    />
     <li>
       <Link
         onClick={[MockFunction]}
@@ -62,65 +60,63 @@ exports[`should display correct links for SonarCloud 1`] = `
         api_documentation.page
       </Link>
     </li>
-    <React.Fragment>
-      <li
-        className="divider"
-      />
-      <li>
-        <a
-          href="https://community.sonarsource.com/c/help/sc"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          embed_docs.get_help
-        </a>
-      </li>
-      <li
-        className="divider"
-      />
-      <li
-        className="menu-header"
+    <li
+      className="divider"
+    />
+    <li>
+      <a
+        href="https://community.sonarsource.com/c/help/sc"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        embed_docs.get_help
+      </a>
+    </li>
+    <li
+      className="divider"
+    />
+    <li
+      className="menu-header"
+    >
+      embed_docs.stay_connected
+    </li>
+    <li>
+      <a
+        href="https://twitter.com/sonarcloud"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        embed_docs.stay_connected
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/sonarcloud"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <img
-            alt="Twitter"
-            className="spacer-right"
-            height="18"
-            src="/images/embed-doc/twitter-icon.svg"
-            width="18"
-          />
-          Twitter
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://blog.sonarsource.com/product/SonarCloud"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <img
-            alt="embed_docs.news"
-            className="spacer-right"
-            height="18"
-            src="/images/sonarcloud-square-logo.svg"
-            width="18"
-          />
-          embed_docs.news
-        </a>
-      </li>
-      <li>
-        <Connect(ProductNewsMenuItem)
-          tag="SonarCloud"
+        <img
+          alt="Twitter"
+          className="spacer-right"
+          height="18"
+          src="/images/embed-doc/twitter-icon.svg"
+          width="18"
         />
-      </li>
-    </React.Fragment>
+        Twitter
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://blog.sonarsource.com/product/SonarCloud"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="embed_docs.news"
+          className="spacer-right"
+          height="18"
+          src="/images/sonarcloud-square-logo.svg"
+          width="18"
+        />
+        embed_docs.news
+      </a>
+    </li>
+    <li>
+      <Connect(ProductNewsMenuItem)
+        tag="SonarCloud"
+      />
+    </li>
   </ul>
 </DropdownOverlay>
 `;
@@ -130,42 +126,40 @@ exports[`should display suggestion links 1`] = `
   <ul
     className="menu abs-width-240"
   >
-    <React.Fragment>
-      <li
-        className="menu-header"
-      >
-        embed_docs.suggestion
-      </li>
-      <li
-        key="0"
+    <li
+      className="menu-header"
+    >
+      embed_docs.suggestion
+    </li>
+    <li
+      key="0"
+    >
+      <Link
+        onClick={[MockFunction]}
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        target="_blank"
+        to="#"
       >
-        <Link
-          onClick={[MockFunction]}
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to="#"
-        >
-          foo
-        </Link>
-      </li>
-      <li
-        key="1"
+        foo
+      </Link>
+    </li>
+    <li
+      key="1"
+    >
+      <Link
+        onClick={[MockFunction]}
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        target="_blank"
+        to="#"
       >
-        <Link
-          onClick={[MockFunction]}
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to="#"
-        >
-          bar
-        </Link>
-      </li>
-      <li
-        className="divider"
-      />
-    </React.Fragment>
+        bar
+      </Link>
+    </li>
+    <li
+      className="divider"
+    />
     <li>
       <Link
         onClick={[MockFunction]}
@@ -187,60 +181,58 @@ exports[`should display suggestion links 1`] = `
         api_documentation.page
       </Link>
     </li>
-    <React.Fragment>
-      <li
-        className="divider"
-      />
-      <li>
-        <a
-          href="https://community.sonarsource.com/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          embed_docs.get_help
-        </a>
-      </li>
-      <li
-        className="divider"
-      />
-      <li
-        className="menu-header"
+    <li
+      className="divider"
+    />
+    <li>
+      <a
+        href="https://community.sonarsource.com/"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        embed_docs.stay_connected
-      </li>
-      <li>
-        <a
-          href="https://www.sonarsource.com/resources/product-news/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <img
-            alt="embed_docs.news"
-            className="spacer-right"
-            height="18"
-            src="/images/embed-doc/sq-icon.svg"
-            width="18"
-          />
-          embed_docs.news
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/SonarQube"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <img
-            alt="Twitter"
-            className="spacer-right"
-            height="18"
-            src="/images/embed-doc/twitter-icon.svg"
-            width="18"
-          />
-          Twitter
-        </a>
-      </li>
-    </React.Fragment>
+        embed_docs.get_help
+      </a>
+    </li>
+    <li
+      className="divider"
+    />
+    <li
+      className="menu-header"
+    >
+      embed_docs.stay_connected
+    </li>
+    <li>
+      <a
+        href="https://www.sonarsource.com/resources/product-news/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="embed_docs.news"
+          className="spacer-right"
+          height="18"
+          src="/images/embed-doc/sq-icon.svg"
+          width="18"
+        />
+        embed_docs.news
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://twitter.com/SonarQube"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Twitter"
+          className="spacer-right"
+          height="18"
+          src="/images/embed-doc/twitter-icon.svg"
+          width="18"
+        />
+        Twitter
+      </a>
+    </li>
   </ul>
 </DropdownOverlay>
 `;

server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/__snapshots__/ProductNewsMenuItem-test.tsx.snap

@@ -80,7 +80,9 @@ exports[`should load the product news 2`] = `
       </h4>
       <DateFormatter
         date="2018-04-06T12:07:19+0000"
-      />
+      >
+        <Component />
+      </DateFormatter>
     </div>
     <p
       className="little-spacer-bottom"

server/sonar-web/src/main/js/app/components/extensions/Extension.tsx

@@ -101,4 +101,4 @@ class Extension extends React.PureComponent<Props> {
   }
 }
 
-export default injectIntl<OwnProps>(withRouter<OwnProps & InjectedIntlProps>(Extension));
+export default injectIntl(withRouter(Extension));

server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx

@@ -71,7 +71,7 @@ it('searches', () => {
 });
 
 it('selects next & previous', () => {
-  const wrapper = shallow(
+  const wrapper = shallow<ComponentNavBranchesMenu>(
     <ComponentNavBranchesMenu
       branchLikes={[mainBranch(), shortBranch('foo'), shortBranch('foobar'), longBranch('bar')]}
       component={component}

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenu-test.tsx.snap

@@ -18,208 +18,184 @@ exports[`renders list 1`] = `
   <ul
     className="menu menu-vertically-limited"
   >
-    <React.Fragment
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "key": "component",
+        }
+      }
+      innerRef={[Function]}
       key="branch-master"
+      onSelect={[Function]}
+      selected={true}
+    />
+    <li
+      className="menu-header navbar-context-meta-branch-menu-title"
     >
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": true,
-            "name": "master",
-          }
+      branches.pull_requests
+    </li>
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "base": "master",
+          "branch": "feature",
+          "key": "1234",
+          "status": Object {
+            "bugs": 0,
+            "codeSmells": 0,
+            "qualityGateStatus": "OK",
+            "vulnerabilities": 0,
+          },
+          "title": "qux",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-master"
-        onSelect={[Function]}
-        selected={true}
-      />
-    </React.Fragment>
-    <React.Fragment
+      }
+      innerRef={[Function]}
       key="pull-request-1234"
+      onSelect={[Function]}
+      selected={false}
+    />
+    <li
+      className="divider"
+    />
+    <li
+      className="menu-header"
     >
-      <li
-        className="menu-header navbar-context-meta-branch-menu-title"
+      <div
+        className="display-inline-block text-middle"
       >
-        branches.pull_requests
-      </li>
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "base": "master",
-            "branch": "feature",
-            "key": "1234",
-            "status": Object {
-              "bugs": 0,
-              "codeSmells": 0,
-              "qualityGateStatus": "OK",
-              "vulnerabilities": 0,
-            },
-            "title": "qux",
-          }
+        branches.orphan_branches
+      </div>
+      <HelpTooltip
+        className="spacer-left"
+        overlay="branches.orphan_branches.tooltip"
+      />
+    </li>
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "isOrphan": true,
+          "mergeBranch": "master",
+          "name": "baz",
+          "status": Object {
+            "bugs": 0,
+            "codeSmells": 0,
+            "qualityGateStatus": "OK",
+            "vulnerabilities": 0,
+          },
+          "type": "SHORT",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="pull-request-1234"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
-    <React.Fragment
+      }
+      innerRef={[Function]}
       key="branch-baz"
-    >
-      <li
-        className="divider"
-      />
-      <li
-        className="menu-header"
-      >
-        <div
-          className="display-inline-block text-middle"
-        >
-          branches.orphan_branches
-        </div>
-        <HelpTooltip
-          className="spacer-left"
-          overlay="branches.orphan_branches.tooltip"
-        />
-      </li>
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "isOrphan": true,
-            "mergeBranch": "master",
-            "name": "baz",
-            "status": Object {
-              "bugs": 0,
-              "codeSmells": 0,
-              "qualityGateStatus": "OK",
-              "vulnerabilities": 0,
-            },
-            "type": "SHORT",
-          }
+      onSelect={[Function]}
+      selected={false}
+    />
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "isOrphan": undefined,
+          "mergeBranch": "master",
+          "name": "foo",
+          "status": Object {
+            "bugs": 0,
+            "codeSmells": 0,
+            "qualityGateStatus": "OK",
+            "vulnerabilities": 0,
+          },
+          "type": "SHORT",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-baz"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
-    <React.Fragment
+      }
+      innerRef={[Function]}
       key="branch-foo"
-    >
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "isOrphan": undefined,
-            "mergeBranch": "master",
-            "name": "foo",
-            "status": Object {
-              "bugs": 0,
-              "codeSmells": 0,
-              "qualityGateStatus": "OK",
-              "vulnerabilities": 0,
-            },
-            "type": "SHORT",
-          }
+      onSelect={[Function]}
+      selected={false}
+    />
+    <li
+      className="divider"
+    />
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "name": "bar",
+          "type": "LONG",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-foo"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
-    <React.Fragment
+      }
+      innerRef={[Function]}
       key="branch-bar"
+      onSelect={[Function]}
+      selected={false}
+    />
+    <li
+      className="divider"
+    />
+    <li
+      className="menu-header"
     >
-      <li
-        className="divider"
+      <div
+        className="display-inline-block text-middle"
+      >
+        branches.orphan_branches
+      </div>
+      <HelpTooltip
+        className="spacer-left"
+        overlay="branches.orphan_branches.tooltip"
       />
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "name": "bar",
-            "type": "LONG",
-          }
+    </li>
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "isOrphan": true,
+          "mergeBranch": "master",
+          "name": "baz",
+          "status": Object {
+            "bugs": 0,
+            "codeSmells": 0,
+            "qualityGateStatus": "OK",
+            "vulnerabilities": 0,
+          },
+          "type": "SHORT",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-bar"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
-    <React.Fragment
+      }
+      innerRef={[Function]}
       key="branch-baz"
-    >
-      <li
-        className="divider"
-      />
-      <li
-        className="menu-header"
-      >
-        <div
-          className="display-inline-block text-middle"
-        >
-          branches.orphan_branches
-        </div>
-        <HelpTooltip
-          className="spacer-left"
-          overlay="branches.orphan_branches.tooltip"
-        />
-      </li>
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "isOrphan": true,
-            "mergeBranch": "master",
-            "name": "baz",
-            "status": Object {
-              "bugs": 0,
-              "codeSmells": 0,
-              "qualityGateStatus": "OK",
-              "vulnerabilities": 0,
-            },
-            "type": "SHORT",
-          }
-        }
-        component={
-          Object {
-            "key": "component",
-          }
-        }
-        innerRef={[Function]}
-        key="branch-baz"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
+      onSelect={[Function]}
+      selected={false}
+    />
   </ul>
 </DropdownOverlay>
 `;
@@ -242,91 +218,79 @@ exports[`searches 1`] = `
   <ul
     className="menu menu-vertically-limited"
   >
-    <React.Fragment
-      key="branch-foobar"
+    <li
+      className="menu-header navbar-context-meta-branch-menu-title"
     >
-      <li
-        className="menu-header navbar-context-meta-branch-menu-title"
-      >
-        branches.short_lived_branches
-      </li>
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "isOrphan": undefined,
-            "mergeBranch": "master",
-            "name": "foobar",
-            "status": Object {
-              "bugs": 0,
-              "codeSmells": 0,
-              "qualityGateStatus": "OK",
-              "vulnerabilities": 0,
-            },
-            "type": "SHORT",
-          }
+      branches.short_lived_branches
+    </li>
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "isOrphan": undefined,
+          "mergeBranch": "master",
+          "name": "foobar",
+          "status": Object {
+            "bugs": 0,
+            "codeSmells": 0,
+            "qualityGateStatus": "OK",
+            "vulnerabilities": 0,
+          },
+          "type": "SHORT",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-foobar"
-        onSelect={[Function]}
-        selected={true}
-      />
-    </React.Fragment>
-    <React.Fragment
-      key="branch-BARBAZ"
-    >
-      <li
-        className="divider"
-      />
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "name": "BARBAZ",
-            "type": "LONG",
-          }
+      }
+      innerRef={[Function]}
+      key="branch-foobar"
+      onSelect={[Function]}
+      selected={true}
+    />
+    <li
+      className="divider"
+    />
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "name": "BARBAZ",
+          "type": "LONG",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-BARBAZ"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
-    <React.Fragment
-      key="branch-bar"
-    >
-      <li
-        className="divider"
-      />
-      <ComponentNavBranchesMenuItem
-        branchLike={
-          Object {
-            "isMain": false,
-            "name": "bar",
-            "type": "LONG",
-          }
+      }
+      innerRef={[Function]}
+      key="branch-BARBAZ"
+      onSelect={[Function]}
+      selected={false}
+    />
+    <li
+      className="divider"
+    />
+    <ComponentNavBranchesMenuItem
+      branchLike={
+        Object {
+          "isMain": false,
+          "name": "bar",
+          "type": "LONG",
         }
-        component={
-          Object {
-            "key": "component",
-          }
+      }
+      component={
+        Object {
+          "key": "component",
         }
-        innerRef={[Function]}
-        key="branch-bar"
-        onSelect={[Function]}
-        selected={false}
-      />
-    </React.Fragment>
+      }
+      innerRef={[Function]}
+      key="branch-bar"
+      onSelect={[Function]}
+      selected={false}
+    />
   </ul>
 </DropdownOverlay>
 `;

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavHeader-test.tsx.snap

@@ -7,31 +7,27 @@ exports[`should not render breadcrumbs with one element 1`] = `
   <OrganizationHelmet
     title="My Project"
   />
-  <React.Fragment
-    key="my-project"
-  >
-    <QualifierIcon
-      className="spacer-right"
-      qualifier="TRK"
-    />
-    <Link
-      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
-      onlyActiveOnIndex={false}
-      style={Object {}}
-      title="My Project"
-      to={
-        Object {
-          "pathname": "/dashboard",
-          "query": Object {
-            "branch": undefined,
-            "id": "my-project",
-          },
-        }
+  <QualifierIcon
+    className="spacer-right"
+    qualifier="TRK"
+  />
+  <Link
+    className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
+    onlyActiveOnIndex={false}
+    style={Object {}}
+    title="My Project"
+    to={
+      Object {
+        "pathname": "/dashboard",
+        "query": Object {
+          "branch": undefined,
+          "id": "my-project",
+        },
       }
-    >
-      My Project
-    </Link>
-  </React.Fragment>
+    }
+  >
+    My Project
+  </Link>
 </header>
 `;
 
@@ -49,57 +45,51 @@ exports[`should render alm links 1`] = `
     }
     title="My Project"
   />
-  <React.Fragment>
-    <OrganizationAvatar
-      organization={
-        Object {
-          "key": "foo",
-          "name": "The Foo Organization",
-          "projectVisibility": "public",
-        }
+  <OrganizationAvatar
+    organization={
+      Object {
+        "key": "foo",
+        "name": "The Foo Organization",
+        "projectVisibility": "public",
       }
-    />
-    <OrganizationLink
-      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline spacer-left"
-      organization={
-        Object {
-          "key": "foo",
-          "name": "The Foo Organization",
-          "projectVisibility": "public",
-        }
+    }
+  />
+  <OrganizationLink
+    className="navbar-context-header-breadcrumb-link link-base-color link-no-underline spacer-left"
+    organization={
+      Object {
+        "key": "foo",
+        "name": "The Foo Organization",
+        "projectVisibility": "public",
       }
-    >
-      The Foo Organization
-    </OrganizationLink>
-    <span
-      className="slash-separator"
-    />
-  </React.Fragment>
-  <React.Fragment
-    key="my-project"
+    }
   >
-    <QualifierIcon
-      className="spacer-right"
-      qualifier="TRK"
-    />
-    <Link
-      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
-      onlyActiveOnIndex={false}
-      style={Object {}}
-      title="My Project"
-      to={
-        Object {
-          "pathname": "/dashboard",
-          "query": Object {
-            "branch": undefined,
-            "id": "my-project",
-          },
-        }
+    The Foo Organization
+  </OrganizationLink>
+  <span
+    className="slash-separator"
+  />
+  <QualifierIcon
+    className="spacer-right"
+    qualifier="TRK"
+  />
+  <Link
+    className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
+    onlyActiveOnIndex={false}
+    style={Object {}}
+    title="My Project"
+    to={
+      Object {
+        "pathname": "/dashboard",
+        "query": Object {
+          "branch": undefined,
+          "id": "my-project",
+        },
       }
-    >
-      My Project
-    </Link>
-  </React.Fragment>
+    }
+  >
+    My Project
+  </Link>
   <a
     className="link-no-underline"
     href="https://bitbucket.org/foo"
@@ -131,56 +121,50 @@ exports[`should render organization 1`] = `
     }
     title="My Project"
   />
-  <React.Fragment>
-    <OrganizationAvatar
-      organization={
-        Object {
-          "key": "foo",
-          "name": "The Foo Organization",
-          "projectVisibility": "public",
-        }
+  <OrganizationAvatar
+    organization={
+      Object {
+        "key": "foo",
+        "name": "The Foo Organization",
+        "projectVisibility": "public",
       }
-    />
-    <OrganizationLink
-      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline spacer-left"
-      organization={
-        Object {
-          "key": "foo",
-          "name": "The Foo Organization",
-          "projectVisibility": "public",
-        }
+    }
+  />
+  <OrganizationLink
+    className="navbar-context-header-breadcrumb-link link-base-color link-no-underline spacer-left"
+    organization={
+      Object {
+        "key": "foo",
+        "name": "The Foo Organization",
+        "projectVisibility": "public",
       }
-    >
-      The Foo Organization
-    </OrganizationLink>
-    <span
-      className="slash-separator"
-    />
-  </React.Fragment>
-  <React.Fragment
-    key="my-project"
+    }
   >
-    <QualifierIcon
-      className="spacer-right"
-      qualifier="TRK"
-    />
-    <Link
-      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
-      onlyActiveOnIndex={false}
-      style={Object {}}
-      title="My Project"
-      to={
-        Object {
-          "pathname": "/dashboard",
-          "query": Object {
-            "branch": undefined,
-            "id": "my-project",
-          },
-        }
+    The Foo Organization
+  </OrganizationLink>
+  <span
+    className="slash-separator"
+  />
+  <QualifierIcon
+    className="spacer-right"
+    qualifier="TRK"
+  />
+  <Link
+    className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
+    onlyActiveOnIndex={false}
+    style={Object {}}
+    title="My Project"
+    to={
+      Object {
+        "pathname": "/dashboard",
+        "query": Object {
+          "branch": undefined,
+          "id": "my-project",
+        },
       }
-    >
-      My Project
-    </Link>
-  </React.Fragment>
+    }
+  >
+    My Project
+  </Link>
 </header>
 `;

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap

@@ -80,7 +80,9 @@ exports[`should work for all qualifiers 1`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -209,7 +211,9 @@ exports[`should work for all qualifiers 1`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
 </NavBarTabs>
 `;
 
@@ -328,7 +332,9 @@ exports[`should work for all qualifiers 2`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
 </NavBarTabs>
 `;
 
@@ -412,7 +418,9 @@ exports[`should work for all qualifiers 3`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -490,7 +498,9 @@ exports[`should work for all qualifiers 3`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
 </NavBarTabs>
 `;
 
@@ -574,7 +584,9 @@ exports[`should work for all qualifiers 4`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -709,7 +721,9 @@ exports[`should work for all qualifiers 5`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -787,7 +801,9 @@ exports[`should work for all qualifiers 5`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
 </NavBarTabs>
 `;
 
@@ -875,7 +891,9 @@ exports[`should work for long-living branches 1`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -1017,7 +1035,9 @@ exports[`should work for long-living branches 2`] = `
       </ul>
     }
     tagName="li"
-  />
+  >
+    <Component />
+  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -1164,7 +1184,9 @@ exports[`should work with extensions 1`] = `
     </ul>
   }
   tagName="li"
-/>
+>
+  <Component />
+</Dropdown>
 `;
 
 exports[`should work with extensions 2`] = `
@@ -1263,7 +1285,9 @@ exports[`should work with extensions 2`] = `
     </ul>
   }
   tagName="li"
-/>
+>
+  <Component />
+</Dropdown>
 `;
 
 exports[`should work with multiple extensions 1`] = `
@@ -1312,7 +1336,9 @@ exports[`should work with multiple extensions 1`] = `
     </ul>
   }
   tagName="li"
-/>
+>
+  <Component />
+</Dropdown>
 `;
 
 exports[`should work with multiple extensions 2`] = `
@@ -1429,5 +1455,7 @@ exports[`should work with multiple extensions 2`] = `
     </ul>
   }
   tagName="li"
-/>
+>
+  <Component />
+</Dropdown>
 `;

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap

@@ -103,31 +103,29 @@ exports[`renders status of short-living branch 1`] = `
         }
       }
     />
-    <React.Fragment>
-      <span
-        className="vertical-separator"
-      />
-      <BranchMeasures
-        measures={
-          Array [
-            Object {
-              "metric": "new_coverage",
-              "periods": Array [
-                Object {
-                  "index": 1,
-                  "value": "95.9943",
-                },
-              ],
-              "value": "0",
-            },
-            Object {
-              "metric": "coverage",
-              "value": "99.3",
-            },
-          ]
-        }
-      />
-    </React.Fragment>
+    <span
+      className="vertical-separator"
+    />
+    <BranchMeasures
+      measures={
+        Array [
+          Object {
+            "metric": "new_coverage",
+            "periods": Array [
+              Object {
+                "index": 1,
+                "value": "95.9943",
+              },
+            ],
+            "value": "0",
+          },
+          Object {
+            "metric": "coverage",
+            "value": "99.3",
+          },
+        ]
+      }
+    />
   </div>
 </div>
 `;

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavWarnings-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="badge badge-focus badge-medium display-inline-flex-center js-component-analysis-warnings"
   >
@@ -31,5 +31,5 @@ exports[`should render 1`] = `
       ]
     }
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap

@@ -95,5 +95,7 @@ exports[`should work with extensions 1`] = `
     </ul>
   }
   tagName="li"
-/>
+>
+  <Component />
+</Dropdown>
 `;

server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap

@@ -83,7 +83,9 @@ exports[`should work with extensions 1`] = `
         </ul>
       }
       tagName="li"
-    />
+    >
+      <Component />
+    </Dropdown>
     <Dropdown
       overlay={
         <ul
@@ -124,7 +126,9 @@ exports[`should work with extensions 1`] = `
         </ul>
       }
       tagName="li"
-    />
+    >
+      <Component />
+    </Dropdown>
     <Dropdown
       overlay={
         <ul
@@ -149,7 +153,9 @@ exports[`should work with extensions 1`] = `
         </ul>
       }
       tagName="li"
-    />
+    >
+      <Component />
+    </Dropdown>
     <li>
       <IndexLink
         activeClassName="active"
@@ -222,7 +228,9 @@ Array [
       </ul>
     }
     tagName="li"
-  />,
+  >
+    <Component />
+  </Dropdown>,
   <Dropdown
     overlay={
       <ul
@@ -263,7 +271,9 @@ Array [
       </ul>
     }
     tagName="li"
-  />,
+  >
+    <Component />
+  </Dropdown>,
   <Dropdown
     overlay={
       <ul
@@ -288,6 +298,8 @@ Array [
       </ul>
     }
     tagName="li"
-  />,
+  >
+    <Component />
+  </Dropdown>,
 ]
 `;

server/sonar-web/src/main/js/app/components/search/__tests__/Search-test.tsx

@@ -66,7 +66,7 @@ it('shows warning about short input', () => {
 });
 
 function shallowRender(props: Partial<Search['props']> = {}) {
-  return shallow(
+  return shallow<Search>(
     // @ts-ignore
     <Search
       appState={{ organizationsEnabled: false }}

server/sonar-web/src/main/js/app/utils/getStore.ts

@@ -20,11 +20,11 @@
 import { Store } from 'redux';
 import { AppState, CurrentUser } from '../types';
 import { setAppState } from '../../store/appState';
-import rootReducer from '../../store/rootReducer';
+import rootReducer, { Store as State } from '../../store/rootReducer';
 import { receiveCurrentUser } from '../../store/users';
 import configureStore from '../../store/utils/configureStore';
 
-let store: Store<any>;
+let store: Store<State, any>;
 
 const createStore = (currentUser?: CurrentUser, appState?: AppState) => {
   store = configureStore(rootReducer);

server/sonar-web/src/main/js/apps/about/actions.ts

@@ -20,12 +20,13 @@
 import { Dispatch } from 'redux';
 import { getValues } from '../../api/settings';
 import { receiveValues } from '../settings/store/values/actions';
-import { Store } from '../../store/rootReducer';
 
-export const fetchAboutPageSettings = () => (dispatch: Dispatch<Store>) => {
-  const keys = ['sonar.lf.aboutText'];
+export function fetchAboutPageSettings() {
+  return (dispatch: Dispatch) => {
+    const keys = ['sonar.lf.aboutText'];
 
-  return getValues({ keys: keys.join() }).then(values => {
-    dispatch(receiveValues(values));
-  });
-};
+    return getValues({ keys: keys.join() }).then(values => {
+      dispatch(receiveValues(values));
+    });
+  };
+}

server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.tsx.snap

@@ -18,73 +18,71 @@ exports[`should fetch notifications and render 1`] = `
     loading={false}
     timeout={100}
   >
-    <React.Fragment>
-      <GlobalNotifications
-        addNotification={[Function]}
-        channels={
-          Array [
-            "channel1",
-            "channel2",
-          ]
-        }
-        notifications={
-          Array [
-            Object {
-              "channel": "channel1",
-              "type": "type-global",
-            },
-            Object {
-              "channel": "channel1",
-              "type": "type-common",
-            },
-          ]
-        }
-        removeNotification={[Function]}
-        types={
-          Array [
-            "type-global",
-            "type-common",
-          ]
-        }
-      />
-      <Projects
-        addNotification={[Function]}
-        channels={
-          Array [
-            "channel1",
-            "channel2",
-          ]
-        }
-        notificationsByProject={
+    <GlobalNotifications
+      addNotification={[Function]}
+      channels={
+        Array [
+          "channel1",
+          "channel2",
+        ]
+      }
+      notifications={
+        Array [
           Object {
-            "foo": Array [
-              Object {
-                "channel": "channel2",
-                "organization": "org",
-                "project": "foo",
-                "projectName": "Foo",
-                "type": "type-common",
-              },
-            ],
-          }
-        }
-        projects={
-          Array [
+            "channel": "channel1",
+            "type": "type-global",
+          },
+          Object {
+            "channel": "channel1",
+            "type": "type-common",
+          },
+        ]
+      }
+      removeNotification={[Function]}
+      types={
+        Array [
+          "type-global",
+          "type-common",
+        ]
+      }
+    />
+    <Projects
+      addNotification={[Function]}
+      channels={
+        Array [
+          "channel1",
+          "channel2",
+        ]
+      }
+      notificationsByProject={
+        Object {
+          "foo": Array [
             Object {
-              "key": "foo",
-              "name": "Foo",
+              "channel": "channel2",
               "organization": "org",
+              "project": "foo",
+              "projectName": "Foo",
+              "type": "type-common",
             },
-          ]
-        }
-        removeNotification={[Function]}
-        types={
-          Array [
-            "type-common",
-          ]
+          ],
         }
-      />
-    </React.Fragment>
+      }
+      projects={
+        Array [
+          Object {
+            "key": "foo",
+            "name": "Foo",
+            "organization": "org",
+          },
+        ]
+      }
+      removeNotification={[Function]}
+      types={
+        Array [
+          "type-common",
+        ]
+      }
+    />
   </DeferredSpinner>
 </div>
 `;

server/sonar-web/src/main/js/apps/account/organizations/actions.ts

@@ -22,15 +22,14 @@ import { getOrganizations } from '../../../api/organizations';
 import { receiveMyOrganizations } from '../../../store/organizations';
 import { getValues } from '../../../api/settings';
 import { receiveValues } from '../../settings/store/values/actions';
-import { Store } from '../../../store/rootReducer';
 
-export const fetchMyOrganizations = () => (dispatch: Dispatch<Store>) => {
+export const fetchMyOrganizations = () => (dispatch: Dispatch) => {
   return getOrganizations({ member: true }).then(({ organizations }) => {
     return dispatch(receiveMyOrganizations(organizations));
   });
 };
 
-export const fetchIfAnyoneCanCreateOrganizations = () => (dispatch: Dispatch<Store>) => {
+export const fetchIfAnyoneCanCreateOrganizations = () => (dispatch: Dispatch) => {
   return getValues({ keys: 'sonar.organizations.anyoneCanCreate' }).then(values => {
     dispatch(receiveValues(values, undefined));
   });

server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap

@@ -88,20 +88,18 @@ exports[`should display right meta info 1`] = `
         />
       </li>
     </Tooltip>
-    <React.Fragment>
-      <Tooltip
-        overlay="coding_rules.scope.title"
+    <Tooltip
+      overlay="coding_rules.scope.title"
+    >
+      <li
+        className="coding-rules-detail-property"
       >
-        <li
-          className="coding-rules-detail-property"
-        >
-          <RuleScopeIcon
-            className="little-spacer-right"
-          />
-          coding_rules.scope.MAIN
-        </li>
-      </Tooltip>
-    </React.Fragment>
+        <RuleScopeIcon
+          className="little-spacer-right"
+        />
+        coding_rules.scope.MAIN
+      </li>
+    </Tooltip>
     <li
       className="coding-rules-detail-property"
       data-meta="tags"
@@ -145,7 +143,6 @@ exports[`should display right meta info 1`] = `
         date="2013-07-26T09:40:51+0200"
       />
     </li>
-    <React.Fragment />
   </ul>
 </div>
 `;

server/sonar-web/src/main/js/apps/component-measures/components/AppContainer.tsx

@@ -76,7 +76,7 @@ function banQualityGate({ measures = [], qualifier }: ComponentMeasure): Measure
 }
 
 const fetchMeasures = (component: string, metricsKey: string[], branchLike?: BranchLike) => (
-  _dispatch: Dispatch<any>,
+  _dispatch: Dispatch,
   getState: () => any
 ) => {
   if (metricsKey.length <= 0) {

server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -33,7 +33,9 @@ exports[`should render correctly 1`] = `
   >
     <ScreenPositionHelper
       className="layout-page-side-outer"
-    />
+    >
+      <Component />
+    </ScreenPositionHelper>
     <MeasureContentContainer
       className="layout-page-main"
       currentUser={

server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/ComponentList-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should renders correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <table
     className="data zebra zebra-hover"
   >
@@ -40,13 +40,13 @@ exports[`should renders correctly 1`] = `
       />
     </tbody>
   </table>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should renders empty 1`] = `<EmptyResult />`;
 
 exports[`should renders with multiple measures 1`] = `
-<React.Fragment>
+<Fragment>
   <table
     className="data zebra zebra-hover"
   >
@@ -136,5 +136,5 @@ exports[`should renders with multiple measures 1`] = `
       />
     </tbody>
   </table>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/component-measures/sidebar/__tests__/Sidebar-test.tsx

@@ -72,7 +72,7 @@ it('should display two facets', () => {
 });
 
 it('should correctly toggle facets', () => {
-  const wrapper = shallow(<Sidebar {...PROPS} />);
+  const wrapper = shallow<Sidebar>(<Sidebar {...PROPS} />);
   expect(wrapper.state('openFacets').bugs).toBeUndefined();
   (wrapper.instance() as Sidebar).toggleFacet('bugs');
   expect(wrapper.state('openFacets').bugs).toBeTruthy();

server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx

@@ -33,7 +33,6 @@ import { translate } from '../../../helpers/l10n';
 import { getOrganizationUrl } from '../../../helpers/urls';
 import * as api from '../../../api/organizations';
 import * as actions from '../../../store/organizations';
-import { Store } from '../../../store/rootReducer';
 import '../../../app/styles/sonarcloud.css';
 import '../../tutorials/styles.css'; // TODO remove me
 
@@ -207,7 +206,7 @@ export class CreateOrganization extends React.PureComponent<Props & WithRouterPr
 }
 
 function createOrganization(organization: OrganizationBase) {
-  return (dispatch: Dispatch<Store>) => {
+  return (dispatch: Dispatch) => {
     return api.createOrganization(organization).then((organization: Organization) => {
       dispatch(actions.createOrganization(organization));
       return organization;
@@ -216,7 +215,7 @@ function createOrganization(organization: OrganizationBase) {
 }
 
 function deleteOrganization(key: string) {
-  return (dispatch: Dispatch<Store>) => {
+  return (dispatch: Dispatch) => {
     return api.deleteOrganization(key).then(() => {
       dispatch(actions.deleteOrganization(key));
     });

server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/BillingFormShim-test.tsx.snap

@@ -10,5 +10,7 @@ exports[`should render 1`] = `
   onCommit={[MockFunction]}
   organizationKey="org"
   subscriptionPlans={Array []}
-/>
+>
+  <Component />
+</BillingForm>
 `;

server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CreateOrganization-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render and create organization 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -42,40 +42,38 @@ exports[`should render and create organization 1`] = `
         />
       </p>
     </header>
-    <React.Fragment>
-      <OrganizationDetailsStep
-        finished={false}
-        onContinue={[Function]}
-        onOpen={[Function]}
-        open={true}
-      />
-      <PlanStep
-        createOrganization={[Function]}
-        deleteOrganization={[Function]}
-        onFreePlanChoose={[Function]}
-        onPaidPlanChoose={[Function]}
-        open={false}
-        startingPrice="billing.price_format.10"
-        subscriptionPlans={
-          Array [
-            Object {
-              "maxNcloc": 100000,
-              "price": 10,
-            },
-            Object {
-              "maxNcloc": 250000,
-              "price": 75,
-            },
-          ]
-        }
-      />
-    </React.Fragment>
+    <OrganizationDetailsStep
+      finished={false}
+      onContinue={[Function]}
+      onOpen={[Function]}
+      open={true}
+    />
+    <PlanStep
+      createOrganization={[Function]}
+      deleteOrganization={[Function]}
+      onFreePlanChoose={[Function]}
+      onPaidPlanChoose={[Function]}
+      open={false}
+      startingPrice="billing.price_format.10"
+      subscriptionPlans={
+        Array [
+          Object {
+            "maxNcloc": 100000,
+            "price": 10,
+          },
+          Object {
+            "maxNcloc": 250000,
+            "price": 75,
+          },
+        ]
+      }
+    />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render and create organization 2`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -116,43 +114,41 @@ exports[`should render and create organization 2`] = `
         />
       </p>
     </header>
-    <React.Fragment>
-      <OrganizationDetailsStep
-        finished={true}
-        onContinue={[Function]}
-        onOpen={[Function]}
-        open={false}
-        organization={
-          Object {
-            "avatar": "http://example.com/avatar",
-            "description": "description-foo",
-            "key": "key-foo",
-            "name": "name-foo",
-            "url": "http://example.com/foo",
-          }
-        }
-      />
-      <PlanStep
-        createOrganization={[Function]}
-        deleteOrganization={[Function]}
-        onFreePlanChoose={[Function]}
-        onPaidPlanChoose={[Function]}
-        open={true}
-        startingPrice="billing.price_format.10"
-        subscriptionPlans={
-          Array [
-            Object {
-              "maxNcloc": 100000,
-              "price": 10,
-            },
-            Object {
-              "maxNcloc": 250000,
-              "price": 75,
-            },
-          ]
+    <OrganizationDetailsStep
+      finished={true}
+      onContinue={[Function]}
+      onOpen={[Function]}
+      open={false}
+      organization={
+        Object {
+          "avatar": "http://example.com/avatar",
+          "description": "description-foo",
+          "key": "key-foo",
+          "name": "name-foo",
+          "url": "http://example.com/foo",
         }
-      />
-    </React.Fragment>
+      }
+    />
+    <PlanStep
+      createOrganization={[Function]}
+      deleteOrganization={[Function]}
+      onFreePlanChoose={[Function]}
+      onPaidPlanChoose={[Function]}
+      open={true}
+      startingPrice="billing.price_format.10"
+      subscriptionPlans={
+        Array [
+          Object {
+            "maxNcloc": 100000,
+            "price": 10,
+          },
+          Object {
+            "maxNcloc": 250000,
+            "price": 75,
+          },
+        ]
+      }
+    />
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/OrganizationDetailsInput-test.tsx.snap

@@ -16,16 +16,14 @@ exports[`should render 1`] = `
     className="little-spacer-top spacer-bottom"
   >
     <div />
-    <React.Fragment>
-      <AlertErrorIcon
-        className="spacer-left text-middle"
-      />
-      <span
-        className="little-spacer-left text-danger text-middle"
-      >
-        This field is bad!
-      </span>
-    </React.Fragment>
+    <AlertErrorIcon
+      className="spacer-left text-middle"
+    />
+    <span
+      className="little-spacer-left text-danger text-middle"
+    >
+      This field is bad!
+    </span>
   </div>
 </div>
 `;

server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/OrganizationDetailsStep-test.tsx.snap

@@ -47,7 +47,9 @@ exports[`should render form 2`] = `
         isInitialValid={false}
         onSubmit={[MockFunction]}
         validate={[Function]}
-      />
+      >
+        <Component />
+      </ValidationForm>
     </div>
   </div>
 </div>
@@ -57,105 +59,113 @@ exports[`should render form 3`] = `
 <form
   onSubmit={[Function]}
 >
-  <React.Fragment>
-    <OrganizationDetailsInput
-      description="onboarding.create_organization.organization_name.description"
-      dirty={false}
-      id="organization-key"
-      isSubmitting={false}
-      label="onboarding.create_organization.organization_name"
-      name="key"
-      onBlur={[Function]}
-      onChange={[Function]}
-      required={true}
-      value=""
-    />
+  <OrganizationDetailsInput
+    description="onboarding.create_organization.organization_name.description"
+    dirty={false}
+    id="organization-key"
+    isSubmitting={false}
+    label="onboarding.create_organization.organization_name"
+    name="key"
+    onBlur={[Function]}
+    onChange={[Function]}
+    required={true}
+    value=""
+  >
+    <Component />
+  </OrganizationDetailsInput>
+  <div
+    className="big-spacer-top"
+  >
+    <ResetButtonLink
+      onClick={[Function]}
+    >
+      onboarding.create_organization.add_additional_info
+      <DropdownIcon
+        className="little-spacer-left"
+        turned={false}
+      />
+    </ResetButtonLink>
+  </div>
+  <div
+    className="js-additional-info"
+    hidden={true}
+  >
     <div
       className="big-spacer-top"
     >
-      <ResetButtonLink
-        onClick={[Function]}
+      <OrganizationDetailsInput
+        description="onboarding.create_organization.display_name.description"
+        dirty={false}
+        id="organization-display-name"
+        isSubmitting={false}
+        label="onboarding.create_organization.display_name"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        onboarding.create_organization.add_additional_info
-        <DropdownIcon
-          className="little-spacer-left"
-          turned={false}
-        />
-      </ResetButtonLink>
+        <Component />
+      </OrganizationDetailsInput>
     </div>
     <div
-      className="js-additional-info"
-      hidden={true}
+      className="big-spacer-top"
     >
-      <div
-        className="big-spacer-top"
-      >
-        <OrganizationDetailsInput
-          description="onboarding.create_organization.display_name.description"
-          dirty={false}
-          id="organization-display-name"
-          isSubmitting={false}
-          label="onboarding.create_organization.display_name"
-          name="name"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
-      </div>
-      <div
-        className="big-spacer-top"
+      <OrganizationDetailsInput
+        description="onboarding.create_organization.avatar.description"
+        dirty={false}
+        id="organization-avatar"
+        isSubmitting={false}
+        label="onboarding.create_organization.avatar"
+        name="avatar"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        <OrganizationDetailsInput
-          description="onboarding.create_organization.avatar.description"
-          dirty={false}
-          id="organization-avatar"
-          isSubmitting={false}
-          label="onboarding.create_organization.avatar"
-          name="avatar"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
-      </div>
-      <div
-        className="big-spacer-top"
-      >
-        <OrganizationDetailsInput
-          dirty={false}
-          id="organization-description"
-          isSubmitting={false}
-          label="description"
-          name="description"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
-      </div>
-      <div
-        className="big-spacer-top"
+        <Component />
+      </OrganizationDetailsInput>
+    </div>
+    <div
+      className="big-spacer-top"
+    >
+      <OrganizationDetailsInput
+        dirty={false}
+        id="organization-description"
+        isSubmitting={false}
+        label="description"
+        name="description"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        <OrganizationDetailsInput
-          dirty={false}
-          id="organization-url"
-          isSubmitting={false}
-          label="onboarding.create_organization.url"
-          name="url"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+        <Component />
+      </OrganizationDetailsInput>
     </div>
     <div
       className="big-spacer-top"
     >
-      <SubmitButton
-        disabled={true}
+      <OrganizationDetailsInput
+        dirty={false}
+        id="organization-url"
+        isSubmitting={false}
+        label="onboarding.create_organization.url"
+        name="url"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        continue
-      </SubmitButton>
+        <Component />
+      </OrganizationDetailsInput>
     </div>
-  </React.Fragment>
+  </div>
+  <div
+    className="big-spacer-top"
+  >
+    <SubmitButton
+      disabled={true}
+    >
+      continue
+    </SubmitButton>
+  </div>
 </form>
 `;
 
@@ -212,7 +222,9 @@ exports[`should render result 1`] = `
         isInitialValid={true}
         onSubmit={[MockFunction]}
         validate={[Function]}
-      />
+      >
+        <Component />
+      </ValidationForm>
     </div>
   </div>
 </div>

server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/PlanStep-test.tsx.snap

@@ -34,14 +34,14 @@ exports[`should preselect paid plan 2`] = `
     <div
       className="boxed-group-inner"
     >
-      <React.Fragment>
-        <Connect(withCurrentUser(BillingFormShim))
-          onCommit={[MockFunction]}
-          onFailToUpgrade={[MockFunction]}
-          organizationKey={[MockFunction]}
-          subscriptionPlans={Array []}
-        />
-      </React.Fragment>
+      <Connect(withCurrentUser(BillingFormShim))
+        onCommit={[MockFunction]}
+        onFailToUpgrade={[MockFunction]}
+        organizationKey={[MockFunction]}
+        subscriptionPlans={Array []}
+      >
+        <Component />
+      </Connect(withCurrentUser(BillingFormShim))>
     </div>
   </div>
 </div>
@@ -81,23 +81,21 @@ exports[`should render and use free plan 2`] = `
     <div
       className="boxed-group-inner"
     >
-      <React.Fragment>
-        <PlanSelect
-          onChange={[Function]}
-          plan="free"
-          startingPrice="10"
-        />
-        <div
-          className="display-flex-center big-spacer-top"
+      <PlanSelect
+        onChange={[Function]}
+        plan="free"
+        startingPrice="10"
+      />
+      <div
+        className="display-flex-center big-spacer-top"
+      >
+        <SubmitButton
+          disabled={false}
+          onClick={[Function]}
         >
-          <SubmitButton
-            disabled={false}
-            onClick={[Function]}
-          >
-            my_account.create_organization
-          </SubmitButton>
-        </div>
-      </React.Fragment>
+          my_account.create_organization
+        </SubmitButton>
+      </div>
     </div>
   </div>
 </div>
@@ -125,19 +123,19 @@ exports[`should upgrade 1`] = `
     <div
       className="boxed-group-inner"
     >
-      <React.Fragment>
-        <PlanSelect
-          onChange={[Function]}
-          plan="paid"
-          startingPrice="10"
-        />
-        <Connect(withCurrentUser(BillingFormShim))
-          onCommit={[MockFunction]}
-          onFailToUpgrade={[MockFunction]}
-          organizationKey={[MockFunction]}
-          subscriptionPlans={Array []}
-        />
-      </React.Fragment>
+      <PlanSelect
+        onChange={[Function]}
+        plan="paid"
+        startingPrice="10"
+      />
+      <Connect(withCurrentUser(BillingFormShim))
+        onCommit={[MockFunction]}
+        onFailToUpgrade={[MockFunction]}
+        organizationKey={[MockFunction]}
+        subscriptionPlans={Array []}
+      >
+        <Component />
+      </Connect(withCurrentUser(BillingFormShim))>
     </div>
   </div>
 </div>

server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/App-test.tsx

@@ -53,7 +53,7 @@ jest.mock('../../../../api/measures', () => ({
 }));
 
 it('should work', async () => {
-  const wrapper = shallow(<App component={{ key: 'foo' }} />);
+  const wrapper = shallow<App>(<App component={{ key: 'foo' }} />);
   expect(wrapper).toMatchSnapshot();
 
   await waitAndUpdate(wrapper);
@@ -67,7 +67,7 @@ it('should work', async () => {
   });
   await waitAndUpdate(wrapper);
   expect(wrapper.state().measures).toMatchSnapshot();
-  expect(wrapper.state().paging.total).toBe(2);
+  expect(wrapper.state().paging!.total).toBe(2);
 
   // edit
   wrapper.find('List').prop<Function>('onEdit')({
@@ -77,11 +77,11 @@ it('should work', async () => {
   });
   await waitAndUpdate(wrapper);
   expect(wrapper.state().measures).toMatchSnapshot();
-  expect(wrapper.state().paging.total).toBe(2);
+  expect(wrapper.state().paging!.total).toBe(2);
 
   // delete
   wrapper.find('List').prop<Function>('onDelete')('2');
   await waitAndUpdate(wrapper);
   expect(wrapper.state().measures).toMatchSnapshot();
-  expect(wrapper.state().paging.total).toBe(1);
+  expect(wrapper.state().paging!.total).toBe(1);
 });

server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should work 1`] = `
-<React.Fragment>
+<Fragment>
   <Suggestions
     suggestions="custom_measures"
   />
@@ -18,11 +18,11 @@ exports[`should work 1`] = `
       onCreate={[Function]}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should work 2`] = `
-<React.Fragment>
+<Fragment>
   <Suggestions
     suggestions="custom_measures"
   />
@@ -75,7 +75,7 @@ exports[`should work 2`] = `
       total={1}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should work 3`] = `

server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/CreateButton-test.tsx.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should create new custom measure 1`] = `
-<React.Fragment>
+<Fragment>
   <Button
     id="custom-measures-create"
     onClick={[Function]}
   >
     create
   </Button>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should create new custom measure 2`] = `
-<React.Fragment>
+<Fragment>
   <Button
     id="custom-measures-create"
     onClick={[Function]}
@@ -26,5 +26,5 @@ exports[`should create new custom measure 2`] = `
     onSubmit={[MockFunction]}
     skipMetrics={Array []}
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/App-test.tsx

@@ -39,8 +39,8 @@ jest.mock('../../../../api/metrics', () => ({
 }));
 
 it('should work', async () => {
-  const wrapper = shallow(<App />);
-  (wrapper.instance() as App).mounted = true;
+  const wrapper = shallow<App>(<App />);
+  wrapper.instance().mounted = true;
   expect(wrapper).toMatchSnapshot();
 
   await waitAndUpdate(wrapper);
@@ -55,7 +55,7 @@ it('should work', async () => {
   });
   await waitAndUpdate(wrapper);
   expect(wrapper.state().metrics).toMatchSnapshot();
-  expect(wrapper.state().paging.total).toBe(2);
+  expect(wrapper.state().paging!.total).toBe(2);
 
   // edit
   wrapper.find('List').prop<Function>('onEdit')({
@@ -67,11 +67,11 @@ it('should work', async () => {
   });
   await waitAndUpdate(wrapper);
   expect(wrapper.state().metrics).toMatchSnapshot();
-  expect(wrapper.state().paging.total).toBe(2);
+  expect(wrapper.state().paging!.total).toBe(2);
 
   // delete
   wrapper.find('List').prop<Function>('onDelete')('bar');
   await waitAndUpdate(wrapper);
   expect(wrapper.state().metrics).toMatchSnapshot();
-  expect(wrapper.state().paging.total).toBe(1);
+  expect(wrapper.state().paging!.total).toBe(1);
 });

server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should work 1`] = `
-<React.Fragment>
+<Fragment>
   <Suggestions
     suggestions="custom_metrics"
   />
@@ -19,11 +19,11 @@ exports[`should work 1`] = `
       onCreate={[Function]}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should work 2`] = `
-<React.Fragment>
+<Fragment>
   <Suggestions
     suggestions="custom_metrics"
   />
@@ -85,7 +85,7 @@ exports[`should work 2`] = `
       total={1}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should work 3`] = `

server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/CreateButton-test.tsx.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should create new group 1`] = `
-<React.Fragment>
+<Fragment>
   <Button
     id="metrics-create"
     onClick={[Function]}
   >
     custom_metrics.create_metric
   </Button>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should create new group 2`] = `
-<React.Fragment>
+<Fragment>
   <Button
     id="metrics-create"
     onClick={[Function]}
@@ -37,5 +37,5 @@ exports[`should create new group 2`] = `
       ]
     }
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/documentation/components/__tests__/__snapshots__/MenuBlock-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render a closed menu block 1`] = `
-<React.Fragment>
+<Fragment>
   <a
     className="list-group-item"
     href="#"
@@ -17,11 +17,11 @@ exports[`should render a closed menu block 1`] = `
       Foobarbaz
     </h3>
   </a>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render an opened menu block 1`] = `
-<React.Fragment>
+<Fragment>
   <a
     className="list-group-item"
     href="#"
@@ -65,5 +65,5 @@ exports[`should render an opened menu block 1`] = `
     }
     splat="/foo/"
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/documentation/components/__tests__/__snapshots__/SearchResultEntry-test.tsx.snap

@@ -103,25 +103,13 @@ exports[`SearchResultTitle should render with highlights 1`] = `
 `;
 
 exports[`SearchResultTokens should render 1`] = `
-<React.Fragment>
-  <React.Fragment
-    key="0"
-  >
-    Foobar is a 
-  </React.Fragment>
-  <React.Fragment
+<Fragment>
+  Foobar is a 
+  <mark
     key="1"
   >
-    <mark
-      key="1"
-    >
-      universal
-    </mark>
-  </React.Fragment>
-  <React.Fragment
-    key="2"
-  >
-     variable understood to represent whatever is being discussed.
-  </React.Fragment>
-</React.Fragment>
+    universal
+  </mark>
+   variable understood to represent whatever is being discussed.
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/documentation/components/__tests__/__snapshots__/SearchResults-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should search 1`] = `
-<React.Fragment>
+<Fragment>
   <SearchResultEntry
     active={false}
     key="lorem/origin"
@@ -56,5 +56,5 @@ exports[`should search 1`] = `
       }
     }
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/documentation/components/__tests__/__snapshots__/Sidebar-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render menu 1`] = `
-<React.Fragment>
+<Fragment>
   <SearchBox
     className="big-spacer-top spacer-bottom"
     minLength={2}
@@ -49,11 +49,11 @@ exports[`should render menu 1`] = `
       />
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should search 1`] = `
-<React.Fragment>
+<Fragment>
   <SearchBox
     className="big-spacer-top spacer-bottom"
     minLength={2}
@@ -102,5 +102,5 @@ exports[`should search 1`] = `
       />
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap

@@ -165,304 +165,435 @@ exports[`should edit members 2`] = `
         overlayClassName="modal-overlay"
         parentSelector={[Function]}
         portalClassName="ReactModalPortal"
+        role="dialog"
         shouldCloseOnEsc={true}
         shouldCloseOnOverlayClick={true}
         shouldFocusAfterRender={true}
         shouldReturnFocusAfterClose={true}
       >
-        <ModalPortal
-          ariaHideApp={true}
-          bodyOpenClassName="ReactModal__Body--open"
-          className="modal"
-          closeTimeoutMS={0}
-          contentLabel="users.update"
-          defaultStyles={
-            Object {
-              "content": Object {
-                "WebkitOverflowScrolling": "touch",
-                "background": "#fff",
-                "border": "1px solid #ccc",
-                "borderRadius": "4px",
-                "bottom": "40px",
-                "left": "40px",
-                "outline": "none",
-                "overflow": "auto",
-                "padding": "20px",
-                "position": "absolute",
-                "right": "40px",
-                "top": "40px",
-              },
-              "overlay": Object {
-                "backgroundColor": "rgba(255, 255, 255, 0.75)",
-                "bottom": 0,
-                "left": 0,
-                "position": "fixed",
-                "right": 0,
-                "top": 0,
-              },
-            }
-          }
-          isOpen={true}
-          onRequestClose={[Function]}
-          overlayClassName="modal-overlay"
-          parentSelector={[Function]}
-          portalClassName="ReactModalPortal"
-          shouldCloseOnEsc={true}
-          shouldCloseOnOverlayClick={true}
-          shouldFocusAfterRender={true}
-          shouldReturnFocusAfterClose={true}
-          style={
-            Object {
-              "content": Object {},
-              "overlay": Object {},
-            }
+        <Portal
+          containerInfo={
+            <div
+              class="ReactModalPortal"
+            >
+              <div
+                class="ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay"
+              >
+                <div
+                  aria-label="users.update"
+                  class="ReactModal__Content ReactModal__Content--after-open modal"
+                  role="dialog"
+                  tabindex="-1"
+                >
+                  <header
+                    class="modal-head"
+                  >
+                    <h2>
+                      users.update
+                    </h2>
+                  </header>
+                  <div
+                    class="modal-body"
+                  >
+                    <div
+                      class="select-list"
+                    >
+                      <div
+                        class="display-flex-center"
+                      >
+                        <ul
+                          class="radio-toggle spacer-right"
+                        >
+                          <li>
+                            <input
+                              checked=""
+                              id="filter__selected"
+                              name="filter"
+                              type="radio"
+                              value="selected"
+                            />
+                            <label
+                              for="filter__selected"
+                            >
+                              selected
+                            </label>
+                          </li>
+                          <li>
+                            <input
+                              id="filter__deselected"
+                              name="filter"
+                              type="radio"
+                              value="deselected"
+                            />
+                            <label
+                              for="filter__deselected"
+                            >
+                              unselected
+                            </label>
+                          </li>
+                          <li>
+                            <input
+                              id="filter__all"
+                              name="filter"
+                              type="radio"
+                              value="all"
+                            />
+                            <label
+                              for="filter__all"
+                            >
+                              all
+                            </label>
+                          </li>
+                        </ul>
+                        <div
+                          class="search-box"
+                        >
+                          <input
+                            aria-label="search_verb"
+                            autocomplete="off"
+                            class="search-box-input"
+                            maxlength="100"
+                            placeholder="search_verb"
+                            type="search"
+                            value=""
+                          />
+                          <svg
+                            class="search-box-magnifier"
+                            height="16"
+                            style="fill-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421;"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xml:space="preserve"
+                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                          >
+                            <path
+                              d="M10.308 7.077c0-.89-.316-1.65-.949-2.283a3.111 3.111 0 0 0-2.282-.948c-.89 0-1.65.316-2.283.948a3.111 3.111 0 0 0-.948 2.283c0 .89.316 1.65.948 2.282a3.111 3.111 0 0 0 2.283.949c.89 0 1.65-.316 2.282-.949a3.111 3.111 0 0 0 .949-2.282zm3.692 6c0 .25-.091.466-.274.649a.887.887 0 0 1-.65.274.857.857 0 0 1-.648-.274L9.954 11.26c-.86.596-1.82.894-2.877.894a4.989 4.989 0 0 1-1.972-.4 5.076 5.076 0 0 1-1.623-1.082A5.076 5.076 0 0 1 2.4 9.049 4.989 4.989 0 0 1 2 7.077c0-.688.133-1.345.4-1.972a5.076 5.076 0 0 1 1.082-1.623A5.076 5.076 0 0 1 5.105 2.4 4.989 4.989 0 0 1 7.077 2c.687 0 1.345.133 1.972.4a5.076 5.076 0 0 1 1.623 1.082c.454.454.815.995 1.082 1.623.266.627.4 1.284.4 1.972a4.938 4.938 0 0 1-.894 2.877l2.473 2.474a.883.883 0 0 1 .267.649z"
+                              style="fill: currentColor;"
+                            />
+                          </svg>
+                          
+                        </div>
+                      </div>
+                      <div
+                        class="select-list-list-container spacer-top"
+                      >
+                        <ul
+                          class="menu"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <footer
+                    class="modal-foot"
+                  >
+                    <button
+                      class="button button-link"
+                      type="reset"
+                    >
+                      Done
+                    </button>
+                  </footer>
+                </div>
+              </div>
+            </div>
           }
         >
-          <div
-            aria-modal="true"
-            className="ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay"
-            onClick={[Function]}
-            onMouseDown={[Function]}
-            style={Object {}}
+          <ModalPortal
+            ariaHideApp={true}
+            bodyOpenClassName="ReactModal__Body--open"
+            className="modal"
+            closeTimeoutMS={0}
+            contentLabel="users.update"
+            defaultStyles={
+              Object {
+                "content": Object {
+                  "WebkitOverflowScrolling": "touch",
+                  "background": "#fff",
+                  "border": "1px solid #ccc",
+                  "borderRadius": "4px",
+                  "bottom": "40px",
+                  "left": "40px",
+                  "outline": "none",
+                  "overflow": "auto",
+                  "padding": "20px",
+                  "position": "absolute",
+                  "right": "40px",
+                  "top": "40px",
+                },
+                "overlay": Object {
+                  "backgroundColor": "rgba(255, 255, 255, 0.75)",
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "fixed",
+                  "right": 0,
+                  "top": 0,
+                },
+              }
+            }
+            isOpen={true}
+            onRequestClose={[Function]}
+            overlayClassName="modal-overlay"
+            parentSelector={[Function]}
+            portalClassName="ReactModalPortal"
+            role="dialog"
+            shouldCloseOnEsc={true}
+            shouldCloseOnOverlayClick={true}
+            shouldFocusAfterRender={true}
+            shouldReturnFocusAfterClose={true}
+            style={
+              Object {
+                "content": Object {},
+                "overlay": Object {},
+              }
+            }
           >
             <div
-              aria-label="users.update"
-              className="ReactModal__Content ReactModal__Content--after-open modal"
+              className="ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay"
               onClick={[Function]}
-              onKeyDown={[Function]}
               onMouseDown={[Function]}
-              onMouseUp={[Function]}
               style={Object {}}
-              tabIndex="-1"
             >
-              <header
-                className="modal-head"
-              >
-                <h2>
-                  users.update
-                </h2>
-              </header>
               <div
-                className="modal-body"
+                aria-label="users.update"
+                className="ReactModal__Content ReactModal__Content--after-open modal"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onMouseDown={[Function]}
+                onMouseUp={[Function]}
+                role="dialog"
+                style={Object {}}
+                tabIndex="-1"
               >
-                <DeferredSpinner
-                  loading={true}
-                  timeout={100}
+                <header
+                  className="modal-head"
+                >
+                  <h2>
+                    users.update
+                  </h2>
+                </header>
+                <div
+                  className="modal-body"
                 >
-                  <SelectList
-                    elements={Array []}
-                    onSearch={[Function]}
-                    onSelect={[Function]}
-                    onUnselect={[Function]}
-                    renderElement={[Function]}
-                    selectedElements={Array []}
+                  <DeferredSpinner
+                    loading={true}
+                    timeout={100}
                   >
-                    <div
-                      className="select-list"
+                    <SelectList
+                      elements={Array []}
+                      onSearch={[Function]}
+                      onSelect={[Function]}
+                      onUnselect={[Function]}
+                      renderElement={[Function]}
+                      selectedElements={Array []}
                     >
                       <div
-                        className="display-flex-center"
+                        className="select-list"
                       >
-                        <RadioToggle
-                          className="spacer-right"
-                          disabled={false}
-                          name="filter"
-                          onCheck={[Function]}
-                          options={
-                            Array [
-                              Object {
-                                "disabled": false,
-                                "label": "selected",
-                                "value": "selected",
-                              },
-                              Object {
-                                "disabled": false,
-                                "label": "unselected",
-                                "value": "deselected",
-                              },
-                              Object {
-                                "disabled": false,
-                                "label": "all",
-                                "value": "all",
-                              },
-                            ]
-                          }
-                          value="selected"
+                        <div
+                          className="display-flex-center"
                         >
-                          <ul
-                            className="radio-toggle spacer-right"
+                          <RadioToggle
+                            className="spacer-right"
+                            disabled={false}
+                            name="filter"
+                            onCheck={[Function]}
+                            options={
+                              Array [
+                                Object {
+                                  "disabled": false,
+                                  "label": "selected",
+                                  "value": "selected",
+                                },
+                                Object {
+                                  "disabled": false,
+                                  "label": "unselected",
+                                  "value": "deselected",
+                                },
+                                Object {
+                                  "disabled": false,
+                                  "label": "all",
+                                  "value": "all",
+                                },
+                              ]
+                            }
+                            value="selected"
                           >
-                            <li
-                              key="selected"
-                            >
-                              <input
-                                checked={true}
-                                disabled={false}
-                                id="filter__selected"
-                                name="filter"
-                                onChange={[Function]}
-                                type="radio"
-                                value="selected"
-                              />
-                              <Tooltip>
-                                <label
-                                  htmlFor="filter__selected"
-                                >
-                                  selected
-                                </label>
-                              </Tooltip>
-                            </li>
-                            <li
-                              key="deselected"
+                            <ul
+                              className="radio-toggle spacer-right"
                             >
-                              <input
-                                checked={false}
-                                disabled={false}
-                                id="filter__deselected"
-                                name="filter"
-                                onChange={[Function]}
-                                type="radio"
-                                value="deselected"
-                              />
-                              <Tooltip>
-                                <label
-                                  htmlFor="filter__deselected"
-                                >
-                                  unselected
-                                </label>
-                              </Tooltip>
-                            </li>
-                            <li
-                              key="all"
+                              <li
+                                key="selected"
+                              >
+                                <input
+                                  checked={true}
+                                  disabled={false}
+                                  id="filter__selected"
+                                  name="filter"
+                                  onChange={[Function]}
+                                  type="radio"
+                                  value="selected"
+                                />
+                                <Tooltip>
+                                  <label
+                                    htmlFor="filter__selected"
+                                  >
+                                    selected
+                                  </label>
+                                </Tooltip>
+                              </li>
+                              <li
+                                key="deselected"
+                              >
+                                <input
+                                  checked={false}
+                                  disabled={false}
+                                  id="filter__deselected"
+                                  name="filter"
+                                  onChange={[Function]}
+                                  type="radio"
+                                  value="deselected"
+                                />
+                                <Tooltip>
+                                  <label
+                                    htmlFor="filter__deselected"
+                                  >
+                                    unselected
+                                  </label>
+                                </Tooltip>
+                              </li>
+                              <li
+                                key="all"
+                              >
+                                <input
+                                  checked={false}
+                                  disabled={false}
+                                  id="filter__all"
+                                  name="filter"
+                                  onChange={[Function]}
+                                  type="radio"
+                                  value="all"
+                                />
+                                <Tooltip>
+                                  <label
+                                    htmlFor="filter__all"
+                                  >
+                                    all
+                                  </label>
+                                </Tooltip>
+                              </li>
+                            </ul>
+                          </RadioToggle>
+                          <SearchBox
+                            autoFocus={true}
+                            loading={false}
+                            onChange={[Function]}
+                            placeholder="search_verb"
+                            value=""
+                          >
+                            <div
+                              className="search-box"
                             >
                               <input
-                                checked={false}
-                                disabled={false}
-                                id="filter__all"
-                                name="filter"
+                                aria-label="search_verb"
+                                autoComplete="off"
+                                autoFocus={true}
+                                className="search-box-input"
+                                maxLength={100}
                                 onChange={[Function]}
-                                type="radio"
-                                value="all"
+                                onKeyDown={[Function]}
+                                placeholder="search_verb"
+                                type="search"
+                                value=""
                               />
-                              <Tooltip>
-                                <label
-                                  htmlFor="filter__all"
-                                >
-                                  all
-                                </label>
-                              </Tooltip>
-                            </li>
-                          </ul>
-                        </RadioToggle>
-                        <SearchBox
-                          autoFocus={true}
-                          loading={false}
-                          onChange={[Function]}
-                          placeholder="search_verb"
-                          value=""
-                        >
-                          <div
-                            className="search-box"
-                          >
-                            <input
-                              aria-label="search_verb"
-                              autoComplete="off"
-                              autoFocus={true}
-                              className="search-box-input"
-                              maxLength={100}
-                              onChange={[Function]}
-                              onKeyDown={[Function]}
-                              placeholder="search_verb"
-                              type="search"
-                              value=""
-                            />
-                            <DeferredSpinner
-                              loading={false}
-                              timeout={100}
-                            >
-                              <SearchIcon
-                                className="search-box-magnifier"
+                              <DeferredSpinner
+                                loading={false}
+                                timeout={100}
                               >
-                                <Icon
+                                <SearchIcon
                                   className="search-box-magnifier"
                                 >
-                                  <svg
+                                  <Icon
                                     className="search-box-magnifier"
-                                    height={16}
-                                    style={
-                                      Object {
-                                        "clipRule": "evenodd",
-                                        "fillRule": "evenodd",
-                                        "strokeLinejoin": "round",
-                                        "strokeMiterlimit": 1.41421,
-                                      }
-                                    }
-                                    version="1.1"
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlSpace="preserve"
-                                    xmlnsXlink="http://www.w3.org/1999/xlink"
                                   >
-                                    <path
-                                      d="M10.308 7.077c0-.89-.316-1.65-.949-2.283a3.111 3.111 0 0 0-2.282-.948c-.89 0-1.65.316-2.283.948a3.111 3.111 0 0 0-.948 2.283c0 .89.316 1.65.948 2.282a3.111 3.111 0 0 0 2.283.949c.89 0 1.65-.316 2.282-.949a3.111 3.111 0 0 0 .949-2.282zm3.692 6c0 .25-.091.466-.274.649a.887.887 0 0 1-.65.274.857.857 0 0 1-.648-.274L9.954 11.26c-.86.596-1.82.894-2.877.894a4.989 4.989 0 0 1-1.972-.4 5.076 5.076 0 0 1-1.623-1.082A5.076 5.076 0 0 1 2.4 9.049 4.989 4.989 0 0 1 2 7.077c0-.688.133-1.345.4-1.972a5.076 5.076 0 0 1 1.082-1.623A5.076 5.076 0 0 1 5.105 2.4 4.989 4.989 0 0 1 7.077 2c.687 0 1.345.133 1.972.4a5.076 5.076 0 0 1 1.623 1.082c.454.454.815.995 1.082 1.623.266.627.4 1.284.4 1.972a4.938 4.938 0 0 1-.894 2.877l2.473 2.474a.883.883 0 0 1 .267.649z"
+                                    <svg
+                                      className="search-box-magnifier"
+                                      height={16}
                                       style={
                                         Object {
-                                          "fill": "currentColor",
+                                          "clipRule": "evenodd",
+                                          "fillRule": "evenodd",
+                                          "strokeLinejoin": "round",
+                                          "strokeMiterlimit": 1.41421,
                                         }
                                       }
-                                    />
-                                  </svg>
-                                </Icon>
-                              </SearchIcon>
-                            </DeferredSpinner>
+                                      version="1.1"
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlSpace="preserve"
+                                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                                    >
+                                      <path
+                                        d="M10.308 7.077c0-.89-.316-1.65-.949-2.283a3.111 3.111 0 0 0-2.282-.948c-.89 0-1.65.316-2.283.948a3.111 3.111 0 0 0-.948 2.283c0 .89.316 1.65.948 2.282a3.111 3.111 0 0 0 2.283.949c.89 0 1.65-.316 2.282-.949a3.111 3.111 0 0 0 .949-2.282zm3.692 6c0 .25-.091.466-.274.649a.887.887 0 0 1-.65.274.857.857 0 0 1-.648-.274L9.954 11.26c-.86.596-1.82.894-2.877.894a4.989 4.989 0 0 1-1.972-.4 5.076 5.076 0 0 1-1.623-1.082A5.076 5.076 0 0 1 2.4 9.049 4.989 4.989 0 0 1 2 7.077c0-.688.133-1.345.4-1.972a5.076 5.076 0 0 1 1.082-1.623A5.076 5.076 0 0 1 5.105 2.4 4.989 4.989 0 0 1 7.077 2c.687 0 1.345.133 1.972.4a5.076 5.076 0 0 1 1.623 1.082c.454.454.815.995 1.082 1.623.266.627.4 1.284.4 1.972a4.938 4.938 0 0 1-.894 2.877l2.473 2.474a.883.883 0 0 1 .267.649z"
+                                        style={
+                                          Object {
+                                            "fill": "currentColor",
+                                          }
+                                        }
+                                      />
+                                    </svg>
+                                  </Icon>
+                                </SearchIcon>
+                              </DeferredSpinner>
+                            </div>
+                          </SearchBox>
+                        </div>
+                        <SelectListListContainer
+                          disabledElements={Array []}
+                          elements={Array []}
+                          filter="selected"
+                          onSelect={[Function]}
+                          onUnselect={[Function]}
+                          renderElement={[Function]}
+                          selectedElements={Array []}
+                        >
+                          <div
+                            className="select-list-list-container spacer-top"
+                          >
+                            <ul
+                              className="menu"
+                            />
                           </div>
-                        </SearchBox>
+                        </SelectListListContainer>
                       </div>
-                      <SelectListListContainer
-                        disabledElements={Array []}
-                        elements={Array []}
-                        filter="selected"
-                        onSelect={[Function]}
-                        onUnselect={[Function]}
-                        renderElement={[Function]}
-                        selectedElements={Array []}
-                      >
-                        <div
-                          className="select-list-list-container spacer-top"
-                        >
-                          <ul
-                            className="menu"
-                          />
-                        </div>
-                      </SelectListListContainer>
-                    </div>
-                  </SelectList>
-                </DeferredSpinner>
-              </div>
-              <footer
-                className="modal-foot"
-              >
-                <ResetButtonLink
-                  onClick={[Function]}
+                    </SelectList>
+                  </DeferredSpinner>
+                </div>
+                <footer
+                  className="modal-foot"
                 >
-                  <Button
-                    className="button-link"
+                  <ResetButtonLink
                     onClick={[Function]}
-                    type="reset"
                   >
-                    <button
-                      className="button button-link"
+                    <Button
+                      className="button-link"
                       onClick={[Function]}
                       type="reset"
                     >
-                      Done
-                    </button>
-                  </Button>
-                </ResetButtonLink>
-              </footer>
+                      <button
+                        className="button button-link"
+                        onClick={[Function]}
+                        type="reset"
+                      >
+                        Done
+                      </button>
+                    </Button>
+                  </ResetButtonLink>
+                </footer>
+              </div>
             </div>
-          </div>
-        </ModalPortal>
+          </ModalPortal>
+        </Portal>
       </Modal>
     </Modal>
   </EditMembers>

server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Header-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should create new group 1`] = `
-<React.Fragment>
+<Fragment>
   <header
     className="page-header"
     id="groups-header"
@@ -31,11 +31,11 @@ exports[`should create new group 1`] = `
       user_groups.page.description
     </p>
   </header>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should create new group 2`] = `
-<React.Fragment>
+<Fragment>
   <header
     className="page-header"
     id="groups-header"
@@ -71,5 +71,5 @@ exports[`should create new group 2`] = `
     onClose={[Function]}
     onSubmit={[Function]}
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/issues/components/AppContainer.tsx

@@ -45,7 +45,7 @@ const mapStateToProps = (state: Store): StateProps => ({
   userOrganizations: getMyOrganizations(state)
 });
 
-const fetchIssueOrganizations = (organizationKeys: string[]) => (dispatch: Dispatch<Store>) => {
+const fetchIssueOrganizations = (organizationKeys: string[]) => (dispatch: Dispatch) => {
   if (!organizationKeys.length) {
     return Promise.resolve();
   }

server/sonar-web/src/main/js/apps/issues/components/__tests__/App-test.tsx

@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ShallowWrapper } from 'enzyme';
 import App from '../App';
 import { shallowWithIntl, waitAndUpdate } from '../../../../helpers/testUtils';
 import { Issue } from '../../../../app/types';
@@ -66,7 +65,7 @@ const PROPS = {
 };
 
 it('should render a list of issue', async () => {
-  const wrapper: ShallowWrapper<App['props'], App['state']> = shallowWithIntl(<App {...PROPS} />, {
+  const wrapper = shallowWithIntl<App>(<App {...PROPS} />, {
     context: { router: { replace } }
   });
 
@@ -77,14 +76,14 @@ it('should render a list of issue', async () => {
 });
 
 it('should be able to check/uncheck a group of issues with the Shift key', async () => {
-  const wrapper = shallowWithIntl(<App {...PROPS} />, {
+  const wrapper = shallowWithIntl<App>(<App {...PROPS} />, {
     context: { router: { replace } }
   });
 
   await waitAndUpdate(wrapper);
   expect(wrapper.state().issues.length).toBe(4);
 
-  const instance = wrapper.instance() as App;
+  const instance = wrapper.instance();
   instance.handleIssueCheck('foo', eventNoShiftKey);
   expect(wrapper.state().checked.length).toBe(1);
 
@@ -99,14 +98,14 @@ it('should be able to check/uncheck a group of issues with the Shift key', async
 });
 
 it('should avoid non-existing keys', async () => {
-  const wrapper = shallowWithIntl(<App {...PROPS} />, {
+  const wrapper = shallowWithIntl<App>(<App {...PROPS} />, {
     context: { router: { replace } }
   });
 
   await waitAndUpdate(wrapper);
   expect(wrapper.state().issues.length).toBe(4);
 
-  const instance = wrapper.instance() as App;
+  const instance = wrapper.instance();
   instance.handleIssueCheck('foo', eventNoShiftKey);
   expect(wrapper.state().checked.length).toBe(1);
 
@@ -115,14 +114,14 @@ it('should avoid non-existing keys', async () => {
 });
 
 it('should be able to uncheck all issue with global checkbox', async () => {
-  const wrapper = shallowWithIntl(<App {...PROPS} />, {
+  const wrapper = shallowWithIntl<App>(<App {...PROPS} />, {
     context: { router: { replace } }
   });
 
   await waitAndUpdate(wrapper);
   expect(wrapper.state().issues.length).toBe(4);
 
-  const instance = wrapper.instance() as App;
+  const instance = wrapper.instance();
   instance.handleIssueCheck('foo', eventNoShiftKey);
   instance.handleIssueCheck('bar', eventNoShiftKey);
   expect(wrapper.state().checked.length).toBe(2);
@@ -132,13 +131,13 @@ it('should be able to uncheck all issue with global checkbox', async () => {
 });
 
 it('should be able to check all issue with global checkbox', async () => {
-  const wrapper = shallowWithIntl(<App {...PROPS} />, {
+  const wrapper = shallowWithIntl<App>(<App {...PROPS} />, {
     context: { router: { replace } }
   });
 
   await waitAndUpdate(wrapper);
 
-  const instance = wrapper.instance() as App;
+  const instance = wrapper.instance();
   expect(wrapper.state().checked.length).toBe(0);
   instance.onCheckAll(true);
   expect(wrapper.state().checked.length).toBe(wrapper.state().issues.length);

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StandardFacet-test.tsx.snap

@@ -29,17 +29,15 @@ exports[`should render empty sub-facet 1`] = `
     loading={false}
     timeout={100}
   />
-  <React.Fragment>
-    <div
-      className="search-navigator-facet-empty little-spacer-top"
-    >
-      no_results
-    </div>
-    <MultipleSelectionHint
-      options={0}
-      values={0}
-    />
-  </React.Fragment>
+  <div
+    className="search-navigator-facet-empty little-spacer-top"
+  >
+    no_results
+  </div>
+  <MultipleSelectionHint
+    options={0}
+    values={0}
+  />
 </FacetBox>
 `;
 
@@ -60,141 +58,135 @@ exports[`should render sub-facets 1`] = `
       ]
     }
   />
-  <React.Fragment>
-    <FacetBox
-      className="is-inner"
-      property="owaspTop10"
-    >
-      <FacetHeader
-        name="issues.facet.owaspTop10"
-        onClick={[Function]}
-        open={true}
-        values={
-          Array [
-            "A3",
-          ]
-        }
-      />
-      <DeferredSpinner
+  <FacetBox
+    className="is-inner"
+    property="owaspTop10"
+  >
+    <FacetHeader
+      name="issues.facet.owaspTop10"
+      onClick={[Function]}
+      open={true}
+      values={
+        Array [
+          "A3",
+        ]
+      }
+    />
+    <DeferredSpinner
+      loading={false}
+      timeout={100}
+    />
+    <FacetItemsList>
+      <FacetItem
+        active={false}
+        disabled={false}
+        halfWidth={false}
+        key="a1"
         loading={false}
-        timeout={100}
-      />
-      <React.Fragment>
-        <FacetItemsList>
-          <FacetItem
-            active={false}
-            disabled={false}
-            halfWidth={false}
-            key="a1"
-            loading={false}
-            name="A1 - a1 title"
-            onClick={[Function]}
-            stat="15"
-            tooltip="A1 - a1 title"
-            value="a1"
-          />
-          <FacetItem
-            active={true}
-            disabled={false}
-            halfWidth={false}
-            key="a3"
-            loading={false}
-            name="A3"
-            onClick={[Function]}
-            stat="5"
-            tooltip="A3"
-            value="a3"
-          />
-        </FacetItemsList>
-        <MultipleSelectionHint
-          options={2}
-          values={1}
-        />
-      </React.Fragment>
-    </FacetBox>
-    <FacetBox
-      className="is-inner"
-      property="sansTop25"
-    >
-      <FacetHeader
-        name="issues.facet.sansTop25"
+        name="A1 - a1 title"
         onClick={[Function]}
-        open={true}
-        values={
-          Array [
-            "Risky Resource Management",
-          ]
-        }
+        stat="15"
+        tooltip="A1 - a1 title"
+        value="a1"
       />
-      <DeferredSpinner
+      <FacetItem
+        active={true}
+        disabled={false}
+        halfWidth={false}
+        key="a3"
         loading={false}
-        timeout={100}
+        name="A3"
+        onClick={[Function]}
+        stat="5"
+        tooltip="A3"
+        value="a3"
       />
-      <React.Fragment>
-        <FacetItemsList>
-          <FacetItem
-            active={false}
-            disabled={false}
-            halfWidth={false}
-            key="foo"
-            loading={false}
-            name="foo"
-            onClick={[Function]}
-            stat="12"
-            tooltip="foo"
-            value="foo"
-          />
-          <FacetItem
-            active={true}
-            disabled={false}
-            halfWidth={false}
-            key="risky-resource"
-            loading={false}
-            name="Risky Resource Management"
-            onClick={[Function]}
-            stat="10"
-            tooltip="Risky Resource Management"
-            value="risky-resource"
-          />
-        </FacetItemsList>
-        <MultipleSelectionHint
-          options={2}
-          values={1}
-        />
-      </React.Fragment>
-    </FacetBox>
-    <ListStyleFacet
-      className="is-inner"
-      facetHeader="issues.facet.cwe"
-      fetching={false}
-      getFacetItemText={[Function]}
-      getSearchResultKey={[Function]}
-      getSearchResultText={[Function]}
-      loadSearchResultCount={[Function]}
-      maxInitialItems={15}
-      maxItems={100}
-      minSearchLength={2}
-      onChange={[MockFunction]}
-      onSearch={[Function]}
-      onToggle={[MockFunction]}
+    </FacetItemsList>
+    <MultipleSelectionHint
+      options={2}
+      values={1}
+    />
+  </FacetBox>
+  <FacetBox
+    className="is-inner"
+    property="sansTop25"
+  >
+    <FacetHeader
+      name="issues.facet.sansTop25"
+      onClick={[Function]}
       open={true}
-      property="cwe"
-      query={Object {}}
-      renderFacetItem={[Function]}
-      renderSearchResult={[Function]}
-      searchPlaceholder="search.search_for_cwe"
-      stats={
-        Object {
-          "173": 3,
-          "42": 5,
-        }
-      }
       values={
         Array [
-          "42",
+          "Risky Resource Management",
         ]
       }
     />
-  </React.Fragment>
+    <DeferredSpinner
+      loading={false}
+      timeout={100}
+    />
+    <FacetItemsList>
+      <FacetItem
+        active={false}
+        disabled={false}
+        halfWidth={false}
+        key="foo"
+        loading={false}
+        name="foo"
+        onClick={[Function]}
+        stat="12"
+        tooltip="foo"
+        value="foo"
+      />
+      <FacetItem
+        active={true}
+        disabled={false}
+        halfWidth={false}
+        key="risky-resource"
+        loading={false}
+        name="Risky Resource Management"
+        onClick={[Function]}
+        stat="10"
+        tooltip="Risky Resource Management"
+        value="risky-resource"
+      />
+    </FacetItemsList>
+    <MultipleSelectionHint
+      options={2}
+      values={1}
+    />
+  </FacetBox>
+  <ListStyleFacet
+    className="is-inner"
+    facetHeader="issues.facet.cwe"
+    fetching={false}
+    getFacetItemText={[Function]}
+    getSearchResultKey={[Function]}
+    getSearchResultText={[Function]}
+    loadSearchResultCount={[Function]}
+    maxInitialItems={15}
+    maxItems={100}
+    minSearchLength={2}
+    onChange={[MockFunction]}
+    onSearch={[Function]}
+    onToggle={[MockFunction]}
+    open={true}
+    property="cwe"
+    query={Object {}}
+    renderFacetItem={[Function]}
+    renderSearchResult={[Function]}
+    searchPlaceholder="search.search_for_cwe"
+    stats={
+      Object {
+        "173": 3,
+        "42": 5,
+      }
+    }
+    values={
+      Array [
+        "42",
+      ]
+    }
+  />
 </FacetBox>
 `;

server/sonar-web/src/main/js/apps/maintenance/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Maintenance Page should render DB_MIGRATION_NEEDED status 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -15,36 +15,34 @@ exports[`Maintenance Page should render DB_MIGRATION_NEEDED status 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
-        >
-          maintenance.sonarqube_is_under_maintenance
-        </h1>
-        <p
-          className="maintenance-text"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "maintenance.sonarqube_is_under_maintenance.1",
-            }
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.sonarqube_is_under_maintenance
+      </h1>
+      <p
+        className="maintenance-text"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "maintenance.sonarqube_is_under_maintenance.1",
           }
-        />
-        <p
-          className="maintenance-text"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "maintenance.sonarqube_is_under_maintenance.2",
-            }
+        }
+      />
+      <p
+        className="maintenance-text"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "maintenance.sonarqube_is_under_maintenance.2",
           }
-        />
-      </React.Fragment>
+        }
+      />
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Maintenance Page should render DB_MIGRATION_RUNNING status 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -58,36 +56,34 @@ exports[`Maintenance Page should render DB_MIGRATION_RUNNING status 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
-        >
-          maintenance.sonarqube_is_under_maintenance
-        </h1>
-        <p
-          className="maintenance-text"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "maintenance.sonarqube_is_under_maintenance.1",
-            }
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.sonarqube_is_under_maintenance
+      </h1>
+      <p
+        className="maintenance-text"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "maintenance.sonarqube_is_under_maintenance.1",
           }
-        />
-        <p
-          className="maintenance-text"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "maintenance.sonarqube_is_under_maintenance.2",
-            }
+        }
+      />
+      <p
+        className="maintenance-text"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "maintenance.sonarqube_is_under_maintenance.2",
           }
-        />
-      </React.Fragment>
+        }
+      />
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Maintenance Page should render DOWN status 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -101,34 +97,32 @@ exports[`Maintenance Page should render DOWN status 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title text-danger"
-        >
-          maintenance.sonarqube_is_down
-        </h1>
-        <p
-          className="maintenance-text"
-        >
-          maintenance.sonarqube_is_down.text
-        </p>
-        <p
-          className="maintenance-text text-center"
+      <h1
+        className="maintenance-title text-danger"
+      >
+        maintenance.sonarqube_is_down
+      </h1>
+      <p
+        className="maintenance-text"
+      >
+        maintenance.sonarqube_is_down.text
+      </p>
+      <p
+        className="maintenance-text text-center"
+      >
+        <a
+          href="/"
         >
-          <a
-            href="/"
-          >
-            maintenance.try_again
-          </a>
-        </p>
-      </React.Fragment>
+          maintenance.try_again
+        </a>
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Maintenance Page should render OFFLINE status 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -142,34 +136,32 @@ exports[`Maintenance Page should render OFFLINE status 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title text-danger"
+      <h1
+        className="maintenance-title text-danger"
+      >
+        maintenance.sonarqube_is_offline
+      </h1>
+      <p
+        className="maintenance-text"
+      >
+        maintenance.sonarqube_is_offline.text
+      </p>
+      <p
+        className="maintenance-text text-center"
+      >
+        <a
+          href="/"
         >
-          maintenance.sonarqube_is_offline
-        </h1>
-        <p
-          className="maintenance-text"
-        >
-          maintenance.sonarqube_is_offline.text
-        </p>
-        <p
-          className="maintenance-text text-center"
-        >
-          <a
-            href="/"
-          >
-            maintenance.try_again
-          </a>
-        </p>
-      </React.Fragment>
+          maintenance.try_again
+        </a>
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Maintenance Page should render STARTING status 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -183,27 +175,25 @@ exports[`Maintenance Page should render STARTING status 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
-        >
-          maintenance.sonarqube_is_starting
-        </h1>
-        <p
-          className="maintenance-spinner"
-        >
-          <i
-            className="spinner"
-          />
-        </p>
-      </React.Fragment>
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.sonarqube_is_starting
+      </h1>
+      <p
+        className="maintenance-spinner"
+      >
+        <i
+          className="spinner"
+        />
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Maintenance Page should render UP status 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -217,34 +207,32 @@ exports[`Maintenance Page should render UP status 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
-        >
-          maintenance.sonarqube_is_up
-        </h1>
-        <p
-          className="maintenance-text text-center"
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.sonarqube_is_up
+      </h1>
+      <p
+        className="maintenance-text text-center"
+      >
+        maintenance.all_systems_opetational
+      </p>
+      <p
+        className="maintenance-text text-center"
+      >
+        <a
+          href="/"
         >
-          maintenance.all_systems_opetational
-        </p>
-        <p
-          className="maintenance-text text-center"
-        >
-          <a
-            href="/"
-          >
-            layout.home
-          </a>
-        </p>
-      </React.Fragment>
+          layout.home
+        </a>
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Setup Page should render MIGRATION_FAILED state 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -258,25 +246,23 @@ exports[`Setup Page should render MIGRATION_FAILED state 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title text-danger"
-        >
-          maintenance.upgrade_failed
-        </h1>
-        <p
-          className="maintenance-text"
-        >
-          maintenance.upgrade_failed.text
-        </p>
-      </React.Fragment>
+      <h1
+        className="maintenance-title text-danger"
+      >
+        maintenance.upgrade_failed
+      </h1>
+      <p
+        className="maintenance-text"
+      >
+        maintenance.upgrade_failed.text
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Setup Page should render MIGRATION_SUCCEEDED state 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -290,29 +276,27 @@ exports[`Setup Page should render MIGRATION_SUCCEEDED state 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title text-success"
-        >
-          maintenance.database_is_up_to_date
-        </h1>
-        <p
-          className="maintenance-text text-center"
+      <h1
+        className="maintenance-title text-success"
+      >
+        maintenance.database_is_up_to_date
+      </h1>
+      <p
+        className="maintenance-text text-center"
+      >
+        <a
+          href="/"
         >
-          <a
-            href="/"
-          >
-            layout.home
-          </a>
-        </p>
-      </React.Fragment>
+          layout.home
+        </a>
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Setup Page should render NO_MIGRATION state 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -326,29 +310,27 @@ exports[`Setup Page should render NO_MIGRATION state 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.database_is_up_to_date
+      </h1>
+      <p
+        className="maintenance-text text-center"
+      >
+        <a
+          href="/"
         >
-          maintenance.database_is_up_to_date
-        </h1>
-        <p
-          className="maintenance-text text-center"
-        >
-          <a
-            href="/"
-          >
-            layout.home
-          </a>
-        </p>
-      </React.Fragment>
+          layout.home
+        </a>
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Setup Page should render NOT_SUPPORTED state 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -362,23 +344,21 @@ exports[`Setup Page should render NOT_SUPPORTED state 1`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title text-danger"
-        >
-          maintenance.migration_not_supported
-        </h1>
-        <p>
-          maintenance.migration_not_supported.text
-        </p>
-      </React.Fragment>
+      <h1
+        className="maintenance-title text-danger"
+      >
+        maintenance.migration_not_supported
+      </h1>
+      <p>
+        maintenance.migration_not_supported.text
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Setup Page should start migration 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -392,45 +372,43 @@ exports[`Setup Page should start migration 1`] = `
       className="page-simple panel-warning"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
-        >
-          maintenance.upgrade_database
-        </h1>
-        <p
-          className="maintenance-text"
-        >
-          maintenance.upgrade_database.1
-        </p>
-        <p
-          className="maintenance-text"
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.upgrade_database
+      </h1>
+      <p
+        className="maintenance-text"
+      >
+        maintenance.upgrade_database.1
+      </p>
+      <p
+        className="maintenance-text"
+      >
+        maintenance.upgrade_database.2
+      </p>
+      <p
+        className="maintenance-text"
+      >
+        maintenance.upgrade_database.3
+      </p>
+      <div
+        className="maintenance-spinner"
+      >
+        <Button
+          id="start-migration"
+          onClick={[Function]}
         >
-          maintenance.upgrade_database.2
-        </p>
-        <p
-          className="maintenance-text"
-        >
-          maintenance.upgrade_database.3
-        </p>
-        <div
-          className="maintenance-spinner"
-        >
-          <Button
-            id="start-migration"
-            onClick={[Function]}
-          >
-            maintenance.upgrade
-          </Button>
-        </div>
-      </React.Fragment>
+          maintenance.upgrade
+        </Button>
+      </div>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`Setup Page should start migration 2`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defaultTitle="maintenance.page"
     defer={true}
@@ -444,39 +422,37 @@ exports[`Setup Page should start migration 2`] = `
       className="page-simple"
       id="nonav"
     >
-      <React.Fragment>
-        <h1
-          className="maintenance-title"
-        >
-          maintenance.database_migration
-        </h1>
-        <p
-          className="maintenance-text text-center"
+      <h1
+        className="maintenance-title"
+      >
+        maintenance.database_migration
+      </h1>
+      <p
+        className="maintenance-text text-center"
+      >
+        background_tasks.table.started
+         
+        <DateFromNow
+          date="2017-01-02T00:00:00.000Z"
+        />
+        <br />
+        <small
+          className="text-muted"
         >
-          background_tasks.table.started
-           
-          <DateFromNow
+          <TimeFormatter
             date="2017-01-02T00:00:00.000Z"
+            long={true}
           />
-          <br />
-          <small
-            className="text-muted"
-          >
-            <TimeFormatter
-              date="2017-01-02T00:00:00.000Z"
-              long={true}
-            />
-          </small>
-        </p>
-        <p
-          className="maintenance-spinner"
-        >
-          <i
-            className="spinner"
-          />
-        </p>
-      </React.Fragment>
+        </small>
+      </p>
+      <p
+        className="maintenance-spinner"
+      >
+        <i
+          className="spinner"
+        />
+      </p>
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/organizationMembers/__tests__/__snapshots__/AddMemberForm-test.tsx.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render and open the modal 1`] = `
-<React.Fragment>
+<Fragment>
   <Button
     key="add-member-button"
     onClick={[Function]}
   >
     organization.members.add
   </Button>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render and open the modal 2`] = `
-<React.Fragment>
+<Fragment>
   <Button
     key="add-member-button"
     onClick={[Function]}
@@ -73,5 +73,5 @@ exports[`should render and open the modal 2`] = `
       </footer>
     </form>
   </Modal>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/organizationMembers/__tests__/__snapshots__/MembersListItem-test.tsx.snap

@@ -28,26 +28,24 @@ exports[`should groups at 0 if the groupCount field is not defined (just added u
   >
     organization.members.x_groups.0
   </td>
-  <React.Fragment>
-    <td
-      className="nowrap text-middle text-right"
-    >
-      <ActionsDropdown>
-        <ActionsDropdownItem
-          onClick={[Function]}
-        >
-          organization.members.manage_groups
-        </ActionsDropdownItem>
-        <ActionsDropdownDivider />
-        <ActionsDropdownItem
-          destructive={true}
-          onClick={[Function]}
-        >
-          organization.members.remove
-        </ActionsDropdownItem>
-      </ActionsDropdown>
-    </td>
-  </React.Fragment>
+  <td
+    className="nowrap text-middle text-right"
+  >
+    <ActionsDropdown>
+      <ActionsDropdownItem
+        onClick={[Function]}
+      >
+        organization.members.manage_groups
+      </ActionsDropdownItem>
+      <ActionsDropdownDivider />
+      <ActionsDropdownItem
+        destructive={true}
+        onClick={[Function]}
+      >
+        organization.members.remove
+      </ActionsDropdownItem>
+    </ActionsDropdown>
+  </td>
 </tr>
 `;
 
@@ -105,25 +103,23 @@ exports[`should render actions and groups for admin 1`] = `
   >
     organization.members.x_groups.3
   </td>
-  <React.Fragment>
-    <td
-      className="nowrap text-middle text-right"
-    >
-      <ActionsDropdown>
-        <ActionsDropdownItem
-          onClick={[Function]}
-        >
-          organization.members.manage_groups
-        </ActionsDropdownItem>
-        <ActionsDropdownDivider />
-        <ActionsDropdownItem
-          destructive={true}
-          onClick={[Function]}
-        >
-          organization.members.remove
-        </ActionsDropdownItem>
-      </ActionsDropdown>
-    </td>
-  </React.Fragment>
+  <td
+    className="nowrap text-middle text-right"
+  >
+    <ActionsDropdown>
+      <ActionsDropdownItem
+        onClick={[Function]}
+      >
+        organization.members.manage_groups
+      </ActionsDropdownItem>
+      <ActionsDropdownDivider />
+      <ActionsDropdownItem
+        destructive={true}
+        onClick={[Function]}
+      >
+        organization.members.remove
+      </ActionsDropdownItem>
+    </ActionsDropdown>
+  </td>
 </tr>
 `;

server/sonar-web/src/main/js/apps/organizationMembers/__tests__/__snapshots__/OrganizationMembers-test.tsx.snap

@@ -40,63 +40,61 @@ exports[`should fetch members and groups and render for admin 1`] = `
       />
     </div>
   </MembersPageHeader>
-  <React.Fragment>
-    <MembersListHeader
-      handleSearch={[Function]}
-      total={3}
-    />
-    <MembersList
-      members={
-        Array [
-          Object {
-            "avatar": "",
-            "groupCount": 3,
-            "login": "admin",
-            "name": "Admin Istrator",
-          },
-          Object {
-            "avatar": "7daf6c79d4802916d83f6266e24850af",
-            "groupCount": 1,
-            "login": "john",
-            "name": "John Doe",
-          },
-        ]
-      }
-      organization={
+  <MembersListHeader
+    handleSearch={[Function]}
+    total={3}
+  />
+  <MembersList
+    members={
+      Array [
         Object {
-          "canAdmin": true,
-          "key": "foo",
-          "name": "Foo",
-        }
-      }
-      organizationGroups={
-        Array [
-          Object {
-            "default": true,
-            "description": "",
-            "id": 1,
-            "membersCount": 2,
-            "name": "Members",
-          },
-          Object {
-            "default": false,
-            "description": "",
-            "id": 2,
-            "membersCount": 0,
-            "name": "Watchers",
-          },
-        ]
+          "avatar": "",
+          "groupCount": 3,
+          "login": "admin",
+          "name": "Admin Istrator",
+        },
+        Object {
+          "avatar": "7daf6c79d4802916d83f6266e24850af",
+          "groupCount": 1,
+          "login": "john",
+          "name": "John Doe",
+        },
+      ]
+    }
+    organization={
+      Object {
+        "canAdmin": true,
+        "key": "foo",
+        "name": "Foo",
       }
-      removeMember={[Function]}
-      updateMemberGroups={[Function]}
-    />
-    <ListFooter
-      count={2}
-      loadMore={[Function]}
-      ready={true}
-      total={3}
-    />
-  </React.Fragment>
+    }
+    organizationGroups={
+      Array [
+        Object {
+          "default": true,
+          "description": "",
+          "id": 1,
+          "membersCount": 2,
+          "name": "Members",
+        },
+        Object {
+          "default": false,
+          "description": "",
+          "id": 2,
+          "membersCount": 0,
+          "name": "Watchers",
+        },
+      ]
+    }
+    removeMember={[Function]}
+    updateMemberGroups={[Function]}
+  />
+  <ListFooter
+    count={2}
+    loadMore={[Function]}
+    ready={true}
+    total={3}
+  />
 </div>
 `;
 
@@ -133,44 +131,42 @@ exports[`should fetch members and render for non-admin 2`] = `
   <MembersPageHeader
     loading={false}
   />
-  <React.Fragment>
-    <MembersListHeader
-      handleSearch={[Function]}
-      total={3}
-    />
-    <MembersList
-      members={
-        Array [
-          Object {
-            "avatar": "",
-            "groupCount": 3,
-            "login": "admin",
-            "name": "Admin Istrator",
-          },
-          Object {
-            "avatar": "7daf6c79d4802916d83f6266e24850af",
-            "groupCount": 1,
-            "login": "john",
-            "name": "John Doe",
-          },
-        ]
-      }
-      organization={
+  <MembersListHeader
+    handleSearch={[Function]}
+    total={3}
+  />
+  <MembersList
+    members={
+      Array [
         Object {
-          "key": "foo",
-          "name": "Foo",
-        }
+          "avatar": "",
+          "groupCount": 3,
+          "login": "admin",
+          "name": "Admin Istrator",
+        },
+        Object {
+          "avatar": "7daf6c79d4802916d83f6266e24850af",
+          "groupCount": 1,
+          "login": "john",
+          "name": "John Doe",
+        },
+      ]
+    }
+    organization={
+      Object {
+        "key": "foo",
+        "name": "Foo",
       }
-      organizationGroups={Array []}
-      removeMember={[Function]}
-      updateMemberGroups={[Function]}
-    />
-    <ListFooter
-      count={2}
-      loadMore={[Function]}
-      ready={true}
-      total={3}
-    />
-  </React.Fragment>
+    }
+    organizationGroups={Array []}
+    removeMember={[Function]}
+    updateMemberGroups={[Function]}
+  />
+  <ListFooter
+    count={2}
+    loadMore={[Function]}
+    ready={true}
+    total={3}
+  />
 </div>
 `;

server/sonar-web/src/main/js/apps/organizations/actions.ts

@@ -23,9 +23,8 @@ import * as actions from '../../store/organizations';
 import { addGlobalSuccessMessage } from '../../store/globalMessages';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { Organization, OrganizationBase } from '../../app/types';
-import { Store } from '../../store/rootReducer';
 
-export const fetchOrganization = (key: string) => (dispatch: Dispatch<Store>) => {
+export const fetchOrganization = (key: string) => (dispatch: Dispatch) => {
   return Promise.all([api.getOrganization(key), api.getOrganizationNavigation(key)]).then(
     ([organization, navigation]) => {
       if (organization) {
@@ -36,9 +35,7 @@ export const fetchOrganization = (key: string) => (dispatch: Dispatch<Store>) =>
   );
 };
 
-export const createOrganization = (organization: OrganizationBase) => (
-  dispatch: Dispatch<Store>
-) => {
+export const createOrganization = (organization: OrganizationBase) => (dispatch: Dispatch<any>) => {
   return api.createOrganization(organization).then((organization: Organization) => {
     dispatch(actions.createOrganization(organization));
     dispatch(
@@ -49,7 +46,7 @@ export const createOrganization = (organization: OrganizationBase) => (
 };
 
 export const updateOrganization = (key: string, changes: OrganizationBase) => (
-  dispatch: Dispatch<Store>
+  dispatch: Dispatch<any>
 ) => {
   return api.updateOrganization(key, changes).then(() => {
     dispatch(actions.updateOrganization(key, changes));
@@ -57,7 +54,7 @@ export const updateOrganization = (key: string, changes: OrganizationBase) => (
   });
 };
 
-export const deleteOrganization = (key: string) => (dispatch: Dispatch<Store>) => {
+export const deleteOrganization = (key: string) => (dispatch: Dispatch<any>) => {
   return api.deleteOrganization(key).then(() => {
     dispatch(actions.deleteOrganization(key));
     dispatch(addGlobalSuccessMessage(translate('organization.deleted')));

server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationDelete-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should show a info message for paying organization 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -43,13 +43,15 @@ exports[`should show a info message for paying organization 1`] = `
       }
       modalHeader="organization.delete"
       onConfirm={[Function]}
-    />
+    >
+      <Component />
+    </ConfirmButton>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`smoke test 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -86,7 +88,9 @@ exports[`smoke test 1`] = `
       }
       modalHeader="organization.delete"
       onConfirm={[Function]}
-    />
+    >
+      <Component />
+    </ConfirmButton>
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/ApplicationLeakPeriodLegend-test.tsx.snap

@@ -47,19 +47,19 @@ exports[`renders 2`] = `
     issues.max_new_code_period
     :
      
-    <React.Fragment>
-      <DateFromNow
-        date="2017-01-01T11:39:03+0100"
-      />
-      <br />
-      <span
-        className="note"
-      >
-        from
-        :
-        Foo
-      </span>
-    </React.Fragment>
+    <DateFromNow
+      date="2017-01-01T11:39:03+0100"
+    >
+      <Component />
+    </DateFromNow>
+    <br />
+    <span
+      className="note"
+    >
+      from
+      :
+      Foo
+    </span>
   </div>
 </Tooltip>
 `;

server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/LeakPeriodLegend-test.tsx.snap

@@ -26,7 +26,9 @@ exports[`date 1`] = `
     <br />
     <DateFromNow
       date={2013-09-21T22:00:00.000Z}
-    />
+    >
+      <Component />
+    </DateFromNow>
   </div>
 </Tooltip>
 `;
@@ -39,7 +41,9 @@ exports[`previous_analysis 1`] = `
   <br />
   <DateFromNow
     date={2013-09-21T22:00:00.000Z}
-  />
+  >
+    <Component />
+  </DateFromNow>
 </div>
 `;
 
@@ -51,7 +55,9 @@ exports[`previous_version 1`] = `
   <br />
   <DateFromNow
     date={2013-09-21T22:00:00.000Z}
-  />
+  >
+    <Component />
+  </DateFromNow>
 </div>
 `;
 
@@ -72,7 +78,9 @@ exports[`should render a more precise date 1`] = `
     <br />
     <DateFromNow
       date={2018-08-16T22:00:00.000Z}
-    />
+    >
+      <Component />
+    </DateFromNow>
   </div>
 </Tooltip>
 `;
@@ -85,6 +93,8 @@ exports[`version 1`] = `
   <br />
   <DateFromNow
     date={2013-09-21T22:00:00.000Z}
-  />
+  >
+    <Component />
+  </DateFromNow>
 </div>
 `;

server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/SonarCloudEmptyOverview-test.tsx.snap

@@ -10,28 +10,26 @@ exports[`renders correctly 1`] = `
     <div
       className="overview-main page-main sonarcloud"
     >
-      <React.Fragment>
-        <AnalyzeTutorial
-          component={
-            Object {
-              "analysisDate": "2016-01-01",
-              "breadcrumbs": Array [],
-              "key": "foo",
-              "name": "Foo",
-              "organization": "org",
-              "qualifier": "TRK",
-              "version": "0.0.1",
-            }
+      <AnalyzeTutorial
+        component={
+          Object {
+            "analysisDate": "2016-01-01",
+            "breadcrumbs": Array [],
+            "key": "foo",
+            "name": "Foo",
+            "organization": "org",
+            "qualifier": "TRK",
+            "version": "0.0.1",
           }
-          currentUser={
-            Object {
-              "isLoggedIn": true,
-              "login": "luke",
-              "name": "Skywalker",
-            }
+        }
+        currentUser={
+          Object {
+            "isLoggedIn": true,
+            "login": "luke",
+            "name": "Skywalker",
           }
-        />
-      </React.Fragment>
+        }
+      />
     </div>
     <div
       className="overview-sidebar page-sidebar-fixed"
@@ -71,9 +69,7 @@ exports[`should not render the tutorial 1`] = `
   >
     <div
       className="overview-main page-main sonarcloud"
-    >
-      <React.Fragment />
-    </div>
+    />
     <div
       className="overview-sidebar page-sidebar-fixed"
     >
@@ -113,18 +109,16 @@ exports[`should render another message when there are branches 1`] = `
     <div
       className="overview-main page-main sonarcloud"
     >
-      <React.Fragment>
-        <WarningMessage
-          branchLike={
-            Object {
-              "isMain": true,
-              "name": "b",
-              "type": "LONG",
-            }
+      <WarningMessage
+        branchLike={
+          Object {
+            "isMain": true,
+            "name": "b",
+            "type": "LONG",
           }
-          message="provisioning.no_analysis_on_main_branch"
-        />
-      </React.Fragment>
+        }
+        message="provisioning.no_analysis_on_main_branch"
+      />
     </div>
     <div
       className="overview-sidebar page-sidebar-fixed"
@@ -165,18 +159,16 @@ exports[`should render another message when there are branches 2`] = `
     <div
       className="overview-main page-main sonarcloud"
     >
-      <React.Fragment>
-        <WarningMessage
-          branchLike={
-            Object {
-              "isMain": true,
-              "name": "b",
-              "type": "LONG",
-            }
+      <WarningMessage
+        branchLike={
+          Object {
+            "isMain": true,
+            "name": "b",
+            "type": "LONG",
           }
-          message="provisioning.no_analysis_on_main_branch.bad_configuration"
-        />
-      </React.Fragment>
+        }
+        message="provisioning.no_analysis_on_main_branch.bad_configuration"
+      />
     </div>
     <div
       className="overview-sidebar page-sidebar-fixed"

server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/GroupHolder-test.tsx

@@ -52,14 +52,14 @@ it('should render correctly', () => {
 });
 
 it('should disabled PermissionCell checkboxes when waiting for promise to return', async () => {
-  const wrapper = shallow(groupHolder);
+  const wrapper = shallow<GroupHolder>(groupHolder);
   expect(wrapper.state().loading).toEqual([]);
 
-  (wrapper.instance() as GroupHolder).handleCheck(true, 'baz');
+  wrapper.instance().handleCheck(true, 'baz');
   wrapper.update();
   expect(wrapper.state().loading).toEqual(['baz']);
 
-  (wrapper.instance() as GroupHolder).handleCheck(true, 'bar');
+  wrapper.instance().handleCheck(true, 'bar');
   wrapper.update();
   expect(wrapper.state().loading).toEqual(['baz', 'bar']);
 

server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/UserHolder-test.tsx

@@ -52,14 +52,14 @@ it('should render correctly', () => {
 });
 
 it('should disabled PermissionCell checkboxes when waiting for promise to return', async () => {
-  const wrapper = shallow(userHolder);
+  const wrapper = shallow<UserHolder>(userHolder);
   expect(wrapper.state().loading).toEqual([]);
 
-  (wrapper.instance() as UserHolder).handleCheck(true, 'baz');
+  wrapper.instance().handleCheck(true, 'baz');
   wrapper.update();
   expect(wrapper.state().loading).toEqual(['baz']);
 
-  (wrapper.instance() as UserHolder).handleCheck(true, 'bar');
+  wrapper.instance().handleCheck(true, 'bar');
   wrapper.update();
   expect(wrapper.state().loading).toEqual(['baz', 'bar']);
 

server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/HoldersList-test.tsx.snap

@@ -201,15 +201,13 @@ exports[`should display users and groups 1`] = `
         }
         selectedPermission="bar"
       />
-      <React.Fragment>
-        <tr>
-          <td
-            className="divider"
-            colSpan={20}
-          />
-        </tr>
-        <tr />
-      </React.Fragment>
+      <tr>
+        <td
+          className="divider"
+          colSpan={20}
+        />
+      </tr>
+      <tr />
       <GroupHolder
         group={
           Object {

server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphHistory-test.tsx.snap

@@ -37,7 +37,9 @@ exports[`should correctly render a graph 1`] = `
       disableWidth={false}
       onResize={[Function]}
       style={Object {}}
-    />
+    >
+      <Component />
+    </AutoSizer>
   </div>
 </div>
 `;

server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/DeleteBranchModal-test.tsx

@@ -110,7 +110,7 @@ function shallowRender(
   onDelete: () => void = jest.fn(),
   onClose: () => void = jest.fn()
 ) {
-  const wrapper = shallow(
+  const wrapper = shallow<DeleteBranchModal>(
     <DeleteBranchModal
       branchLike={branchLike}
       component="foo"
@@ -118,7 +118,7 @@ function shallowRender(
       onDelete={onDelete}
     />
   );
-  (wrapper.instance() as any).mounted = true;
+  wrapper.instance().mounted = true;
   return wrapper;
 }
 

server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/RenameBranchModal-test.tsx

@@ -78,10 +78,10 @@ it('stops loading on WS error', async () => {
 
 function shallowRender(onRename: () => void = jest.fn(), onClose: () => void = jest.fn()) {
   const branch: MainBranch = { isMain: true, name: 'master' };
-  const wrapper = shallow(
+  const wrapper = shallow<RenameBranchModal>(
     <RenameBranchModal branch={branch} component="foo" onClose={onClose} onRename={onRename} />
   );
-  (wrapper.instance() as any).mounted = true;
+  wrapper.instance().mounted = true;
   return wrapper;
 }
 

server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -32,24 +32,22 @@ exports[`renders sorted list of branches 1`] = `
           }
         }
       />
-      <React.Fragment>
-        <br />
-        <FormattedMessage
-          defaultMessage="project_branches.page.life_time.admin"
-          id="project_branches.page.life_time.admin"
-          values={
-            Object {
-              "settings": <Link
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/admin/settings"
-              >
-                settings.page
-              </Link>,
-            }
+      <br />
+      <FormattedMessage
+        defaultMessage="project_branches.page.life_time.admin"
+        id="project_branches.page.life_time.admin"
+        values={
+          Object {
+            "settings": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              to="/admin/settings"
+            >
+              settings.page
+            </Link>,
           }
-        />
-      </React.Fragment>
+        }
+      />
     </p>
   </header>
   <div
@@ -81,102 +79,82 @@ exports[`renders sorted list of branches 1`] = `
         </tr>
       </thead>
       <tbody>
-        <React.Fragment
-          key="branch-master"
-        >
-          <BranchRow
-            branchLike={
-              Object {
-                "isMain": true,
-                "name": "master",
-              }
+        <BranchRow
+          branchLike={
+            Object {
+              "isMain": true,
+              "name": "master",
             }
-            component="foo"
-            isOrphan={false}
-            onChange={[MockFunction]}
-          />
-        </React.Fragment>
-        <React.Fragment
-          key="pull-request-1234"
-        >
-          <BranchRow
-            branchLike={
-              Object {
-                "base": "master",
-                "branch": "feature",
-                "key": "1234",
-                "title": "Feature PR",
-              }
+          }
+          component="foo"
+          isOrphan={false}
+          onChange={[MockFunction]}
+        />
+        <BranchRow
+          branchLike={
+            Object {
+              "base": "master",
+              "branch": "feature",
+              "key": "1234",
+              "title": "Feature PR",
             }
-            component="foo"
-            onChange={[MockFunction]}
-          />
-        </React.Fragment>
-        <React.Fragment
-          key="branch-feature"
-        >
-          <BranchRow
-            branchLike={
-              Object {
-                "isMain": false,
-                "mergeBranch": "master",
-                "name": "feature",
-                "type": "SHORT",
-              }
+          }
+          component="foo"
+          onChange={[MockFunction]}
+        />
+        <BranchRow
+          branchLike={
+            Object {
+              "isMain": false,
+              "mergeBranch": "master",
+              "name": "feature",
+              "type": "SHORT",
             }
-            component="foo"
-            onChange={[MockFunction]}
-          />
-        </React.Fragment>
-        <React.Fragment
-          key="branch-branch-1.0"
-        >
-          <BranchRow
-            branchLike={
-              Object {
-                "isMain": false,
-                "name": "branch-1.0",
-                "type": "LONG",
-              }
+          }
+          component="foo"
+          onChange={[MockFunction]}
+        />
+        <BranchRow
+          branchLike={
+            Object {
+              "isMain": false,
+              "name": "branch-1.0",
+              "type": "LONG",
             }
-            component="foo"
-            isOrphan={false}
-            onChange={[MockFunction]}
-          />
-        </React.Fragment>
-        <React.Fragment
-          key="branch-feature"
-        >
-          <tr>
-            <td
-              colSpan={4}
+          }
+          component="foo"
+          isOrphan={false}
+          onChange={[MockFunction]}
+        />
+        <tr>
+          <td
+            colSpan={4}
+          >
+            <div
+              className="display-inline-block text-middle"
             >
-              <div
-                className="display-inline-block text-middle"
-              >
-                branches.orphan_branches
-              </div>
-              <HelpTooltip
-                className="spacer-left"
-                overlay="branches.orphan_branches.tooltip"
-              />
-            </td>
-          </tr>
-          <BranchRow
-            branchLike={
-              Object {
-                "isMain": false,
-                "isOrphan": true,
-                "mergeBranch": "foobar",
-                "name": "feature",
-                "type": "SHORT",
-              }
+              branches.orphan_branches
+            </div>
+            <HelpTooltip
+              className="spacer-left"
+              overlay="branches.orphan_branches.tooltip"
+            />
+          </td>
+        </tr>
+        <BranchRow
+          branchLike={
+            Object {
+              "isMain": false,
+              "isOrphan": true,
+              "mergeBranch": "foobar",
+              "name": "feature",
+              "type": "SHORT",
             }
-            component="foo"
-            isOrphan={true}
-            onChange={[MockFunction]}
-          />
-        </React.Fragment>
+          }
+          component="foo"
+          isOrphan={true}
+          onChange={[MockFunction]}
+        />
       </tbody>
     </table>
   </div>

server/sonar-web/src/main/js/apps/projectDeletion/__tests__/__snapshots__/Form-test.tsx.snap

@@ -7,7 +7,9 @@ exports[`should render 1`] = `
   modalBody="project_deletion.delete_resource_confirmation.Foo"
   modalHeader="qualifier.delete.TRK"
   onConfirm={[Function]}
-/>
+>
+  <Component />
+</ConfirmButton>
 `;
 
 exports[`should render 2`] = `

server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/Header-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render 1`] = `
-<React.Fragment>
+<Fragment>
   <header
     className="page-header"
   >
@@ -26,5 +26,5 @@ exports[`should render 1`] = `
       project_links.page.description
     </div>
   </header>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/LinkRow-test.tsx.snap

@@ -44,7 +44,9 @@ exports[`should render custom link 1`] = `
       modalBody="project_links.are_you_sure_to_delete_x_link.foo"
       modalHeader="project_links.delete_project_link"
       onConfirm={[MockFunction]}
-    />
+    >
+      <Component />
+    </ConfirmButton>
   </td>
 </tr>
 `;

server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/ProfileRow-test.tsx

@@ -20,7 +20,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProfileRow from '../ProfileRow';
-import { doAsync } from '../../../helpers/testUtils';
 
 it('renders', () => {
   expect(
@@ -34,9 +33,9 @@ it('renders', () => {
   ).toMatchSnapshot();
 });
 
-it('changes profile', () => {
+it('changes profile', async () => {
   const onChangeProfile = jest.fn(() => Promise.resolve());
-  const wrapper = shallow(
+  const wrapper = shallow<ProfileRow>(
     <ProfileRow
       onChangeProfile={onChangeProfile}
       possibleProfiles={[randomProfile('bar'), randomProfile('baz')]}
@@ -47,9 +46,8 @@ it('changes profile', () => {
   wrapper.find('Select').prop<Function>('onChange')({ value: 'baz' });
   expect(onChangeProfile).toBeCalledWith('foo', 'baz');
   expect(wrapper.state().loading).toBeTruthy();
-  return doAsync().then(() => {
-    expect(wrapper.state().loading).toBeFalsy();
-  });
+  await new Promise(setImmediate);
+  expect(wrapper.state().loading).toBeFalsy();
 });
 
 function randomProfile(key: string) {

server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx

@@ -77,10 +77,10 @@ export default class ProjectsList extends React.PureComponent<Props> {
     const cardHeight = this.getCardHeight();
     return (
       <WindowScroller>
-        {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
+        {({ height, isScrolling, onChildScroll, scrollTop }) => (
           <AutoSizer disableHeight={true}>
             {({ width }) => (
-              <div ref={registerChild as any}>
+              <div>
                 <List
                   autoHeight={true}
                   height={height}

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap

@@ -15,7 +15,9 @@ exports[`renders 1`] = `
   />
   <ScreenPositionHelper
     className="layout-page-side-outer"
-  />
+  >
+    <Component />
+  </ScreenPositionHelper>
   <div
     className="layout-page-main"
   >
@@ -155,7 +157,9 @@ exports[`renders 2`] = `
   />
   <ScreenPositionHelper
     className="layout-page-side-outer"
-  />
+  >
+    <Component />
+  </ScreenPositionHelper>
   <div
     className="layout-page-main"
   >

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap

@@ -24,56 +24,54 @@ exports[`should render \`leak\` view correctly 1`] = `
       }
     }
   />
-  <React.Fragment>
-    <NewReliabilityFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "view": "leak",
-        }
+  <NewReliabilityFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "view": "leak",
       }
-    />
-    <NewSecurityFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "view": "leak",
-        }
+    }
+  />
+  <NewSecurityFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "view": "leak",
       }
-    />
-    <NewMaintainabilityFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "view": "leak",
-        }
+    }
+  />
+  <NewMaintainabilityFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "view": "leak",
       }
-    />
-    <NewCoverageFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "view": "leak",
-        }
+    }
+  />
+  <NewCoverageFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "view": "leak",
       }
-    />
-    <NewDuplicationsFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "view": "leak",
-        }
+    }
+  />
+  <NewDuplicationsFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "view": "leak",
       }
-    />
-    <NewLinesFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "view": "leak",
-        }
+    }
+  />
+  <NewLinesFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "view": "leak",
       }
-    />
-  </React.Fragment>
+    }
+  />
   <Connect(LanguagesFilter)
     onQueryChange={[MockFunction]}
     query={
@@ -114,57 +112,55 @@ exports[`should render correctly 1`] = `
       }
     }
   />
-  <React.Fragment>
-    <ReliabilityFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "size": "3",
-        }
+  <ReliabilityFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "size": "3",
       }
-    />
-    <SecurityFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "size": "3",
-        }
+    }
+  />
+  <SecurityFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "size": "3",
       }
-    />
-    <MaintainabilityFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "size": "3",
-        }
+    }
+  />
+  <MaintainabilityFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "size": "3",
       }
-    />
-    <CoverageFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "size": "3",
-        }
+    }
+  />
+  <CoverageFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "size": "3",
       }
-    />
-    <DuplicationsFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "size": "3",
-        }
+    }
+  />
+  <DuplicationsFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "size": "3",
       }
-    />
-    <SizeFilter
-      onQueryChange={[MockFunction]}
-      query={
-        Object {
-          "size": "3",
-        }
-      }
-      value="3"
-    />
-  </React.Fragment>
+    }
+  />
+  <SizeFilter
+    onQueryChange={[MockFunction]}
+    query={
+      Object {
+        "size": "3",
+      }
+    }
+    value="3"
+  />
   <Connect(LanguagesFilter)
     onQueryChange={[MockFunction]}
     query={

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap

@@ -172,7 +172,9 @@ exports[`should display the leak measures and quality gate 1`] = `
       </span>
       <DateTimeFormatter
         date="2017-01-01"
-      />
+      >
+        <Component />
+      </DateTimeFormatter>
     </div>
   </div>
   <div

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap

@@ -169,7 +169,9 @@ exports[`should display the overall measures and quality gate 1`] = `
     >
       <DateTimeFormatter
         date="2017-01-01"
-      />
+      >
+        <Component />
+      </DateTimeFormatter>
     </div>
   </div>
   <div

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap

@@ -11,7 +11,9 @@ exports[`renders 1`] = `
     scrollingResetTimeInterval={150}
     serverHeight={0}
     serverWidth={0}
-  />
+  >
+    <Component />
+  </WindowScroller>
 </div>
 `;
 

server/sonar-web/src/main/js/apps/projects/create/__tests__/__snapshots__/AlmRepositoryItem-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <Checkbox
     checked={false}
     disabled={false}
@@ -26,11 +26,11 @@ exports[`should render correctly 1`] = `
       Awesome Project
     </span>
   </Checkbox>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render disabled 1`] = `
-<React.Fragment>
+<Fragment>
   <Checkbox
     checked={true}
     disabled={true}
@@ -78,11 +78,11 @@ exports[`should render disabled 1`] = `
       onboarding.create_project.already_imported
     </Link>
   </span>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render selected 1`] = `
-<React.Fragment>
+<Fragment>
   <Checkbox
     checked={true}
     disabled={false}
@@ -107,5 +107,5 @@ exports[`should render selected 1`] = `
       Awesome Project
     </span>
   </Checkbox>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/projects/create/__tests__/__snapshots__/AutoProjectCreate-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should display the list of repositories 1`] = `
-<React.Fragment>
+<Fragment>
   <p
     className="alert alert-info width-60 big-spacer-bottom"
   >
@@ -71,11 +71,11 @@ exports[`should display the list of repositories 1`] = `
       timeout={100}
     />
   </form>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should display the provider app install button 1`] = `
-<React.Fragment>
+<Fragment>
   <p
     className="alert alert-info width-60 big-spacer-bottom"
   >
@@ -84,11 +84,11 @@ exports[`should display the provider app install button 1`] = `
   <DeferredSpinner
     timeout={100}
   />
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should display the provider app install button 2`] = `
-<React.Fragment>
+<Fragment>
   <p
     className="alert alert-info width-60 big-spacer-bottom"
   >
@@ -116,5 +116,5 @@ exports[`should display the provider app install button 2`] = `
       onboarding.create_project.install_app_x.button.Foo Provider
     </IdentityProviderLink>
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/projects/create/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -24,11 +24,11 @@ exports[`should render correctly 1`] = `
       timeout={100}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render correctly 2`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -47,52 +47,50 @@ exports[`should render correctly 2`] = `
         onboarding.create_project.header
       </h1>
     </div>
-    <React.Fragment>
-      <ul
-        className="flex-tabs"
-      >
-        <li>
-          <a
-            className="js-auto selected"
-            href="#"
-            onClick={[Function]}
-          >
-            onboarding.create_project.select_repositories
-            <span
-              className="rounded alert alert-small spacer-left display-inline-block alert-info"
-            >
-              beta
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            className="js-manual"
-            href="#"
-            onClick={[Function]}
+    <ul
+      className="flex-tabs"
+    >
+      <li>
+        <a
+          className="js-auto selected"
+          href="#"
+          onClick={[Function]}
+        >
+          onboarding.create_project.select_repositories
+          <span
+            className="rounded alert alert-small spacer-left display-inline-block alert-info"
           >
-            onboarding.create_project.create_manually
-          </a>
-        </li>
-      </ul>
-      <AutoProjectCreate
-        identityProvider={
-          Object {
-            "backgroundColor": "blue",
-            "iconPath": "icon/path",
-            "key": "github",
-            "name": "GitHub",
-          }
+            beta
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          className="js-manual"
+          href="#"
+          onClick={[Function]}
+        >
+          onboarding.create_project.create_manually
+        </a>
+      </li>
+    </ul>
+    <AutoProjectCreate
+      identityProvider={
+        Object {
+          "backgroundColor": "blue",
+          "iconPath": "icon/path",
+          "key": "github",
+          "name": "GitHub",
         }
-        onProjectCreate={[Function]}
-      />
-    </React.Fragment>
+      }
+      onProjectCreate={[Function]}
+    />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render with Manual creation only 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -111,27 +109,25 @@ exports[`should render with Manual creation only 1`] = `
         onboarding.create_project.header
       </h1>
     </div>
-    <React.Fragment>
-      <Connect(ManualProjectCreate)
-        currentUser={
-          Object {
-            "externalProvider": "microsoft",
-            "groups": Array [],
-            "isLoggedIn": true,
-            "login": "foo",
-            "name": "Foo",
-            "scmAccounts": Array [],
-          }
+    <Connect(ManualProjectCreate)
+      currentUser={
+        Object {
+          "externalProvider": "microsoft",
+          "groups": Array [],
+          "isLoggedIn": true,
+          "login": "foo",
+          "name": "Foo",
+          "scmAccounts": Array [],
         }
-        onProjectCreate={[Function]}
-      />
-    </React.Fragment>
+      }
+      onProjectCreate={[Function]}
+    />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should switch tabs 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -150,46 +146,44 @@ exports[`should switch tabs 1`] = `
         onboarding.create_project.header
       </h1>
     </div>
-    <React.Fragment>
-      <ul
-        className="flex-tabs"
-      >
-        <li>
-          <a
-            className="js-auto selected"
-            href="#"
-            onClick={[Function]}
-          >
-            onboarding.create_project.select_repositories
-            <span
-              className="rounded alert alert-small spacer-left display-inline-block alert-info"
-            >
-              beta
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            className="js-manual"
-            href="#"
-            onClick={[Function]}
+    <ul
+      className="flex-tabs"
+    >
+      <li>
+        <a
+          className="js-auto selected"
+          href="#"
+          onClick={[Function]}
+        >
+          onboarding.create_project.select_repositories
+          <span
+            className="rounded alert alert-small spacer-left display-inline-block alert-info"
           >
-            onboarding.create_project.create_manually
-          </a>
-        </li>
-      </ul>
-      <AutoProjectCreate
-        identityProvider={
-          Object {
-            "backgroundColor": "blue",
-            "iconPath": "icon/path",
-            "key": "github",
-            "name": "GitHub",
-          }
+            beta
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          className="js-manual"
+          href="#"
+          onClick={[Function]}
+        >
+          onboarding.create_project.create_manually
+        </a>
+      </li>
+    </ul>
+    <AutoProjectCreate
+      identityProvider={
+        Object {
+          "backgroundColor": "blue",
+          "iconPath": "icon/path",
+          "key": "github",
+          "name": "GitHub",
         }
-        onProjectCreate={[Function]}
-      />
-    </React.Fragment>
+      }
+      onProjectCreate={[Function]}
+    />
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/projects/create/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap

@@ -17,7 +17,7 @@ exports[`should correctly create a project 2`] = `
 `;
 
 exports[`should render correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <form
     onSubmit={[Function]}
   >
@@ -123,5 +123,5 @@ exports[`should render correctly 1`] = `
       timeout={100}
     />
   </form>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`applies permission template 1`] = `
 `;
 
 exports[`restores access 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown
     onOpen={[Function]}
   >
@@ -29,11 +29,11 @@ exports[`restores access 1`] = `
       projects_role.apply_template
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`restores access 2`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown
     onOpen={[Function]}
   >
@@ -50,11 +50,11 @@ exports[`restores access 2`] = `
       projects_role.apply_template
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`restores access 3`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown
     onOpen={[Function]}
   >
@@ -90,5 +90,5 @@ exports[`restores access 3`] = `
       }
     }
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ProfileActions-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders with all permissions 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown>
     <ActionsDropdownItem
       id="quality-profile-activate-more-rules"
@@ -65,11 +65,11 @@ exports[`renders with all permissions 1`] = `
       delete
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`renders with no permissions 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown>
     <ActionsDropdownItem
       download="foo.xml"
@@ -93,11 +93,11 @@ exports[`renders with no permissions 1`] = `
       compare
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`renders with permission to edit only 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown>
     <ActionsDropdownItem
       id="quality-profile-activate-more-rules"
@@ -141,5 +141,5 @@ exports[`renders with permission to edit only 1`] = `
       rename
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/settings/__tests__/__snapshots__/DefinitionActions-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`disables save button on error 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="settings-definition-changes nowrap"
   >
@@ -19,11 +19,11 @@ exports[`disables save button on error 1`] = `
       cancel
     </Button>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`displays cancel button when value changed and has error 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="settings-definition-changes nowrap"
   >
@@ -41,11 +41,11 @@ exports[`displays cancel button when value changed and has error 1`] = `
       cancel
     </Button>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`displays cancel button when value changed and no error 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="settings-definition-changes nowrap"
   >
@@ -63,11 +63,11 @@ exports[`displays cancel button when value changed and no error 1`] = `
       cancel
     </Button>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`displays default message when value is default 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="spacer-top note"
     style={
@@ -95,11 +95,11 @@ exports[`displays default message when value is default 1`] = `
       settings.default.no_value
     </span>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`displays reset button when empty and not default 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="settings-definition-changes nowrap"
   >
@@ -117,11 +117,11 @@ exports[`displays reset button when empty and not default 1`] = `
       settings.default.no_value
     </span>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`displays save button when it can be saved 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="settings-definition-changes nowrap"
   >
@@ -139,5 +139,5 @@ exports[`displays save button when it can be saved 1`] = `
       cancel
     </Button>
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ClusterSysInfos-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should support more than two nodes 1`] = `
-<React.Fragment>
+<Fragment>
   <HealthCard
     biggerHealth={true}
     health="RED"
@@ -67,5 +67,5 @@ exports[`should support more than two nodes 1`] = `
       }
     }
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/StandaloneSysInfos-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <HealthCard
     biggerHealth={true}
     health="RED"
@@ -60,5 +60,5 @@ exports[`should render correctly 1`] = `
       }
     }
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeIntermediate-test.tsx.snap

@@ -36,7 +36,9 @@ exports[`should display correctly 2`] = `
     <DateFormatter
       date="2017-04-02"
       long={true}
-    />
+    >
+      <Component />
+    </DateFormatter>
     <p
       className="little-spacer-top"
     >
@@ -50,7 +52,9 @@ exports[`should display correctly 2`] = `
     <DateFormatter
       date="2017-03-01"
       long={true}
-    />
+    >
+      <Component />
+    </DateFormatter>
     <p
       className="little-spacer-top"
     >

server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeItem-test.tsx.snap

@@ -29,7 +29,9 @@ exports[`should display correctly 1`] = `
     <DateFormatter
       date="2017-03-01"
       long={true}
-    />
+    >
+      <Component />
+    </DateFormatter>
     <a
       className="spacer-left"
       href="changelogurl"

server/sonar-web/src/main/js/apps/tutorials/analyzeProject/__tests__/__snapshots__/AnalyzeTutorial-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <div
     className="page-header big-spacer-bottom"
   >
@@ -17,40 +17,38 @@ exports[`renders correctly 1`] = `
     </p>
   </div>
   <AnalyzeTutorialSuggestion />
-  <React.Fragment>
-    <TokenStep
-      currentUser={
-        Object {
-          "groups": Array [],
-          "isLoggedIn": true,
-          "login": "luke",
-          "name": "Skywalker",
-          "scmAccounts": Array [],
-        }
+  <TokenStep
+    currentUser={
+      Object {
+        "groups": Array [],
+        "isLoggedIn": true,
+        "login": "luke",
+        "name": "Skywalker",
+        "scmAccounts": Array [],
       }
-      finished={false}
-      onContinue={[Function]}
-      onOpen={[Function]}
-      open={true}
-      stepNumber={1}
-    />
-    <ProjectAnalysisStep
-      component={
-        Object {
-          "analysisDate": "2016-01-01",
-          "breadcrumbs": Array [],
-          "key": "foo",
-          "name": "Foo",
-          "organization": "org",
-          "qualifier": "TRK",
-          "version": "0.0.1",
-        }
+    }
+    finished={false}
+    onContinue={[Function]}
+    onOpen={[Function]}
+    open={true}
+    stepNumber={1}
+  />
+  <ProjectAnalysisStep
+    component={
+      Object {
+        "analysisDate": "2016-01-01",
+        "breadcrumbs": Array [],
+        "key": "foo",
+        "name": "Foo",
+        "organization": "org",
+        "qualifier": "TRK",
+        "version": "0.0.1",
       }
-      displayRowLayout={true}
-      open={false}
-      organization="org"
-      stepNumber={2}
-    />
-  </React.Fragment>
-</React.Fragment>
+    }
+    displayRowLayout={true}
+    open={false}
+    organization="org"
+    stepNumber={2}
+  />
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/LanguageForm-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`selects c# 1`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -35,11 +35,11 @@ exports[`selects c# 1`] = `
     onDelete={[Function]}
     onDone={[Function]}
   />
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects c-family 1`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -100,11 +100,11 @@ exports[`selects c-family 1`] = `
       value={null}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects c-family 2`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -169,11 +169,11 @@ exports[`selects c-family 2`] = `
     onDelete={[Function]}
     onDone={[Function]}
   />
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects c-family 3`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -265,11 +265,11 @@ exports[`selects c-family 3`] = `
       value={null}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects c-family 4`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -366,11 +366,11 @@ exports[`selects c-family 4`] = `
     onDone={[Function]}
     projectKey="project-foo"
   />
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects java 1`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -427,11 +427,11 @@ exports[`selects java 1`] = `
       value={null}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects java 2`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -488,11 +488,11 @@ exports[`selects java 2`] = `
       value="maven"
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects java 3`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -549,11 +549,11 @@ exports[`selects java 3`] = `
       value="gradle"
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects other 1`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -614,11 +614,11 @@ exports[`selects other 1`] = `
       value={null}
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`selects other 2`] = `
-<React.Fragment>
+<Fragment>
   <div>
     <h4
       className="spacer-bottom"
@@ -683,5 +683,5 @@ exports[`selects other 2`] = `
     onDelete={[Function]}
     onDone={[Function]}
   />
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/tutorials/components/commands/__tests__/__snapshots__/ClangGCC-test.tsx.snap

@@ -16,7 +16,9 @@ exports[`renders correctly 1`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.sq_scanner.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     snippet="build-wrapper-win-x86-64.exe --out-dir bw-output make clean all"
   />
@@ -61,7 +63,9 @@ exports[`renders correctly 2`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.sq_scanner.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     snippet="build-wrapper-linux-x86-64 --out-dir bw-output make clean all"
   />
@@ -106,7 +110,9 @@ exports[`renders correctly 3`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.sq_scanner.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={true}
     snippet="build-wrapper-linux-x86-64 --out-dir bw-output make clean all"

server/sonar-web/src/main/js/apps/tutorials/components/commands/__tests__/__snapshots__/DotNet-test.tsx.snap

@@ -10,7 +10,9 @@ exports[`renders correctly 1`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.msbuild.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={true}
     snippet={
@@ -56,7 +58,9 @@ exports[`renders correctly 2`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.msbuild.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={true}
     snippet={

server/sonar-web/src/main/js/apps/tutorials/components/commands/__tests__/__snapshots__/JavaGradle-test.tsx.snap

@@ -9,7 +9,9 @@ exports[`renders correctly 1`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.java.gradle.text.1"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     snippet="plugins {
   id \\"org.sonarqube\\" version \\"2.6\\"
@@ -59,7 +61,9 @@ exports[`renders correctly 2`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.java.gradle.text.1"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     snippet="plugins {
   id \\"org.sonarqube\\" version \\"2.6\\"
@@ -109,7 +113,9 @@ exports[`renders with projectKey 1`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.java.gradle.text.1"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     snippet="plugins {
   id \\"org.sonarqube\\" version \\"2.6\\"

server/sonar-web/src/main/js/apps/tutorials/components/commands/__tests__/__snapshots__/Msvc-test.tsx.snap

@@ -14,7 +14,9 @@ exports[`renders correctly 1`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.msbuild.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={true}
     snippet={
@@ -64,7 +66,9 @@ exports[`renders correctly 2`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.msbuild.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={true}
     snippet={

server/sonar-web/src/main/js/apps/tutorials/components/commands/__tests__/__snapshots__/Other-test.tsx.snap

@@ -12,7 +12,9 @@ exports[`renders correctly 1`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.sq_scanner.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={true}
     snippet={
@@ -49,7 +51,9 @@ exports[`renders correctly 2`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.sq_scanner.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={false}
     snippet={
@@ -86,7 +90,9 @@ exports[`renders correctly 3`] = `
   </h4>
   <InstanceMessage
     message="onboarding.analysis.sq_scanner.execute.text"
-  />
+  >
+    <Component />
+  </InstanceMessage>
   <CodeSnippet
     isOneLine={false}
     snippet={

server/sonar-web/src/main/js/apps/tutorials/projectOnboarding/__tests__/__snapshots__/ProjectOnboarding-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`guides for on-premise 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -58,11 +58,11 @@ exports[`guides for on-premise 1`] = `
       tutorials.find_tutorial_back_in_help
     </span>
   </footer>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`guides for on-premise 2`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -120,11 +120,11 @@ exports[`guides for on-premise 2`] = `
       tutorials.find_tutorial_back_in_help
     </span>
   </footer>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`guides for sonarcloud 1`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -194,11 +194,11 @@ exports[`guides for sonarcloud 1`] = `
       tutorials.find_tutorial_back_in_plus
     </span>
   </footer>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`guides for sonarcloud 2`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -269,11 +269,11 @@ exports[`guides for sonarcloud 2`] = `
       tutorials.find_tutorial_back_in_plus
     </span>
   </footer>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`guides for sonarcloud 3`] = `
-<React.Fragment>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -345,5 +345,5 @@ exports[`guides for sonarcloud 3`] = `
       tutorials.find_tutorial_back_in_plus
     </span>
   </footer>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserActions-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown>
     <ActionsDropdownItem
       className="js-user-update"
@@ -18,5 +18,5 @@ exports[`should render correctly 1`] = `
       users.deactivate
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/webhooks/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should be in loading status 1`] = `
-<React.Fragment>
+<Fragment>
   <Suggestions
     suggestions="webhooks"
   />
@@ -23,11 +23,11 @@ exports[`should be in loading status 1`] = `
       />
     </PageHeader>
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should fetch webhooks and display them 1`] = `
-<React.Fragment>
+<Fragment>
   <Suggestions
     suggestions="webhooks"
   />
@@ -71,5 +71,5 @@ exports[`should fetch webhooks and display them 1`] = `
       />
     </div>
   </div>
-</React.Fragment>
+</Fragment>
 `;

server/sonar-web/src/main/js/apps/webhooks/components/__tests__/__snapshots__/CreateWebhookForm-test.tsx.snap

@@ -14,7 +14,9 @@ exports[`should render correctly when creating a new webhook 1`] = `
   onClose={[MockFunction]}
   onSubmit={[MockFunction]}
   validate={[Function]}
-/>
+>
+  <Component />
+</ValidationModal>
 `;
 
 exports[`should render correctly when updating a webhook 1`] = `
@@ -31,5 +33,7 @@ exports[`should render correctly when updating a webhook 1`] = `
   onClose={[MockFunction]}
   onSubmit={[MockFunction]}
   validate={[Function]}
-/>
+>
+  <Component />
+</ValidationModal>
 `;

server/sonar-web/src/main/js/apps/webhooks/components/__tests__/__snapshots__/PageActions-test.tsx.snap

@@ -20,13 +20,11 @@ exports[`should render correctly 1`] = `
 <div
   className="page-actions"
 >
-  <React.Fragment>
-    <Button
-      className="js-webhook-create"
-      onClick={[Function]}
-    >
-      create
-    </Button>
-  </React.Fragment>
+  <Button
+    className="js-webhook-create"
+    onClick={[Function]}
+  >
+    create
+  </Button>
 </div>
 `;

server/sonar-web/src/main/js/apps/webhooks/components/__tests__/__snapshots__/WebhookActions-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should display the deliveries form 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown
     className="big-spacer-left"
   >
@@ -26,11 +26,11 @@ exports[`should display the deliveries form 1`] = `
       delete
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`should render correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <ActionsDropdown
     className="big-spacer-left"
   >
@@ -49,5 +49,5 @@ exports[`should render correctly 1`] = `
       delete
     </ActionsDropdownItem>
   </ActionsDropdown>
-</React.Fragment>
+</Fragment>
 `;