SC-704 Extract more components (#1921)

* Extract BoxedGroupAccordion

* Extract Select and SearchSelect

* Extract Validation controls

* Update sonar-ui-common

server/sonar-vsts/package.json

@@ -12,7 +12,7 @@
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "regenerator-runtime": "0.13.2",
-    "sonar-ui-common": "0.0.10",
+    "sonar-ui-common": "0.0.13",
     "whatwg-fetch": "2.0.4"
   },
   "devDependencies": {

server/sonar-vsts/yarn.lock

@@ -1018,6 +1018,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-select@1.2.6":
+  version "1.2.6"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/react-select/-/react-select-1.2.6.tgz#8a9579705e04b2c15ce529379402980d80e9d243"
+  integrity sha1-ipV5cF4EssFc5Sk3lAKYDYDp0kM=
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@16.8.23":
   version "16.8.23"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/react/-/react-16.8.23.tgz#ec6be3ceed6353a20948169b6cb4c97b65b97ad2"
@@ -2194,7 +2201,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.6, classnames@^2.2.3, classnames@^2.2.5:
+classnames@2.2.6, classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5:
   version "2.2.6"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha1-Q5Nb/90pHzJtrQogUwmzjQD2UM4=
@@ -2544,6 +2551,14 @@ create-react-class@^15.5.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-react-context@^0.2.2:
+  version "0.2.3"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  integrity sha1-nsFAppFKIu8EuLCbd3HeiVZ8tvM=
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@5.1.0:
   version "5.1.0"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2977,6 +2992,11 @@ deep-is@~0.1.3:
   resolved "https://repox.jfrog.io/repox/api/npm/npm/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha1-XT/yKgHAD2RUBaL7wX0HeKGAEXA=
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3867,7 +3887,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -4013,6 +4033,21 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@1.2.0:
+  version "1.2.0"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/formik/-/formik-1.2.0.tgz#a0daf8512ce2ec18d88ff59a5bb172b0167e85d1"
+  integrity sha1-oNr4USzi7BjYj/WaW7FysBZ+hdE=
+  dependencies:
+    create-react-context "^0.2.2"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^2.5.5"
+    lodash.clonedeep "^4.5.0"
+    lodash.topath "4.5.2"
+    prop-types "^15.6.1"
+    react-fast-compare "^1.0.0"
+    tslib "^1.9.3"
+    warning "^3.0.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4210,6 +4245,11 @@ growly@^1.3.0:
   resolved "https://repox.jfrog.io/repox/api/npm/npm/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha1-pIlYGxfmpwvsqavjrlfeekmYUsA=
+
 gzip-size@3.0.0:
   version "3.0.0"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
@@ -5759,6 +5799,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -5784,6 +5829,11 @@ lodash.sortby@^4.7.0:
   resolved "https://repox.jfrog.io/repox/api/npm/npm/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.topath@4.5.2:
+  version "4.5.2"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
+  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -7308,7 +7358,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -7574,6 +7624,18 @@ react-error-overlay@^4.0.0:
   resolved "https://repox.jfrog.io/repox/api/npm/npm/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
   integrity sha1-QXrdsIFKkPOnCC6sunzuWI0A2ok=
 
+react-fast-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/react-fast-compare/-/react-fast-compare-1.0.0.tgz#813a039155e49b43ceffe99528fe5e9d97a6c938"
+  integrity sha1-gToDkVXkm0PO/+mVKP5enZemyTg=
+
+react-input-autosize@^2.1.2:
+  version "2.2.1"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
+  integrity sha1-7EKPoVsVkplPtfmqFbsetrr0IPg=
+  dependencies:
+    prop-types "^15.5.8"
+
 react-intl@2.8.0:
   version "2.8.0"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/react-intl/-/react-intl-2.8.0.tgz#20b0c1f01d1292427768aa8ec9e51ab7e36503ba"
@@ -7618,6 +7680,15 @@ react-router@3.2.1:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
+react-select@1.2.1:
+  version "1.2.1"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
+  integrity sha1-ov5YpWnrFNyqZUOBYmC5flOBINE=
+  dependencies:
+    classnames "^2.2.4"
+    prop-types "^15.5.8"
+    react-input-autosize "^2.1.2"
+
 react-test-renderer@16.8.5:
   version "16.8.5"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
@@ -8345,11 +8416,12 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
-sonar-ui-common@0.0.10:
-  version "0.0.10"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.10.tgz#c51643ff14232d7ef8669bb553a4c694bd2b7c0c"
-  integrity sha1-xRZD/xQjLX74Zpu1U6TGlL0rfAw=
+sonar-ui-common@0.0.13:
+  version "0.0.13"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.13.tgz#b01255f32d7863e529117bfe715890edfcdb8c97"
+  integrity sha1-sBJV8y14Y+UpEXv+cViQ7fzbjJc=
   dependencies:
+    "@types/react-select" "1.2.6"
     classnames "2.2.6"
     clipboard "2.0.4"
     d3-array "1.2.4"
@@ -8359,12 +8431,14 @@ sonar-ui-common@0.0.10:
     d3-shape "1.2.2"
     d3-zoom "1.7.3"
     date-fns "1.30.1"
+    formik "1.2.0"
     history "3.3.0"
     lodash "4.17.11"
     react-draggable "3.2.1"
     react-intl "2.8.0"
     react-modal "3.8.2"
     react-router "3.2.1"
+    react-select "1.2.1"
     react-virtualized "9.21.0"
 
 source-list-map@^2.0.0:
@@ -8937,7 +9011,7 @@ ts-loader@5.3.3:
     micromatch "^3.1.4"
     semver "^5.0.1"
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha1-w8GflZc/sKYpc/sJ2Q2WHuQ+XIo=

server/sonar-web/package.json

@@ -9,14 +9,9 @@
     "core-js": "3.0.0",
     "create-react-class": "15.6.3",
     "d3-array": "1.2.4",
-    "d3-hierarchy": "1.1.8",
     "d3-scale": "2.1.2",
-    "d3-selection": "1.4.0",
-    "d3-shape": "1.2.2",
-    "d3-zoom": "1.7.3",
     "date-fns": "1.30.1",
     "dompurify": "1.0.11",
-    "formik": "1.2.0",
     "history": "3.3.0",
     "intl-relativeformat": "2.1.0",
     "keymaster": "1.6.2",
@@ -33,7 +28,6 @@
     "react-intl": "2.8.0",
     "react-redux": "5.1.1",
     "react-router": "3.2.1",
-    "react-select": "1.2.1",
     "react-virtualized": "9.21.0",
     "redux": "4.0.1",
     "redux-logger": "3.0.6",
@@ -41,7 +35,7 @@
     "regenerator-runtime": "0.13.2",
     "remark-custom-blocks": "2.3.0",
     "remark-slug": "5.1.0",
-    "sonar-ui-common": "0.0.11",
+    "sonar-ui-common": "0.0.13",
     "unist-util-visit": "1.4.0",
     "valid-url": "1.0.9",
     "whatwg-fetch": "2.0.4"
@@ -58,10 +52,8 @@
     "@babel/preset-react": "7.0.0",
     "@types/classnames": "2.2.6",
     "@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/dompurify": "0.0.32",
     "@types/enzyme": "3.10.1",
@@ -75,7 +67,6 @@
     "@types/react-intl": "2.3.17",
     "@types/react-redux": "6.0.6",
     "@types/react-router": "3.0.20",
-    "@types/react-select": "1.2.6",
     "@types/react-virtualized": "9.21.0",
     "@types/sanitize-html": "1.20.0",
     "@types/valid-url": "1.0.2",

server/sonar-web/src/main/js/app/components/extensions/exposeLibraries.ts

@@ -62,6 +62,8 @@ import ActionsDropdown, {
 } from 'sonar-ui-common/components/controls/ActionsDropdown';
 import RadioToggle from 'sonar-ui-common/components/controls/RadioToggle';
 import ReloadButton from 'sonar-ui-common/components/controls/ReloadButton';
+import Select from 'sonar-ui-common/components/controls/Select';
+import SearchSelect from 'sonar-ui-common/components/controls/SearchSelect';
 import throwGlobalError from '../../utils/throwGlobalError';
 import addGlobalSuccessMessage from '../../utils/addGlobalSuccessMessage';
 import Suggestions from '../embed-docs-modal/Suggestions';
@@ -86,11 +88,9 @@ import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import Favorite from '../../../components/controls/Favorite';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
 import BranchIcon from '../../../components/icons-components/BranchIcon';
-import Select from '../../../components/controls/Select';
 import SelectList from '../../../components/SelectList/SelectList';
 import CoverageRating from '../../../components/ui/CoverageRating';
 import NotFound from '../../../app/components/NotFound';
-import SearchSelect from '../../../components/controls/SearchSelect';
 import A11ySkipTarget from '../a11y/A11ySkipTarget';
 
 const exposeLibraries = () => {

server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx

@@ -22,8 +22,8 @@ import { Helmet } from 'react-helmet';
 import { Link } from 'react-router';
 import { Location } from 'history';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import Select from 'sonar-ui-common/components/controls/Select';
 import SQPageContainer from './components/SQPageContainer';
-import Select from '../../../components/controls/Select';
 import { isLoggedIn } from '../../../helpers/users';
 import './style.css';
 

server/sonar-web/src/main/js/apps/account/notifications/Projects.tsx

@@ -20,10 +20,10 @@
 import * as React from 'react';
 import { differenceWith } from 'lodash';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { AsyncSelect } from 'sonar-ui-common/components/controls/Select';
 import ProjectNotifications from './ProjectNotifications';
 import { NotificationProject } from './types';
 import { getSuggestions } from '../../../api/components';
-import { AsyncSelect } from '../../../components/controls/Select';
 import Organization from '../../../components/shared/Organization';
 
 export interface Props {

server/sonar-web/src/main/js/apps/account/profile/UserDeleteAccountModal.tsx

@@ -18,14 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormikProps } from 'formik';
 import { connect } from 'react-redux';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import InputValidationField from 'sonar-ui-common/components/controls/InputValidationField';
+import ValidationModal from 'sonar-ui-common/components/controls/ValidationModal';
 import UserDeleteAccountContent from './UserDeleteAccountContent';
 import RecentHistory from '../../../app/components/RecentHistory';
-import ValidationModal from '../../../components/controls/ValidationModal';
 import { deactivateUser } from '../../../api/users';
 import { Router, withRouter } from '../../../components/hoc/withRouter';
 import { doLogout } from '../../../store/rootActions';
@@ -94,15 +93,7 @@ export class UserDeleteAccountModal extends React.PureComponent<DeleteModalProps
         onClose={toggleModal}
         onSubmit={this.handleSubmit}
         validate={this.handleValidate}>
-        {({
-          dirty,
-          errors,
-          handleBlur,
-          handleChange,
-          isSubmitting,
-          touched,
-          values
-        }: FormikProps<Values>) => (
+        {({ dirty, errors, handleBlur, handleChange, isSubmitting, touched, values }) => (
           <>
             <Alert className="big-spacer-bottom" variant="error">
               {translate('my_profile.warning_message')}

server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx

@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { STATUSES } from '../constants';
-import Select from '../../../components/controls/Select';
 
 interface Props {
   value?: string;

server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx

@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { ALL_TYPES } from '../constants';
-import Select from '../../../components/controls/Select';
 
 interface Props {
   value: string;

server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx

@@ -22,8 +22,8 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { setWorkerCount } from '../../../api/ce';
-import Select from '../../../components/controls/Select';
 
 const MAX_WORKERS = 10;
 

server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx

@@ -22,7 +22,7 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import { activateRule, Profile } from '../../../api/quality-profiles';
 import { SEVERITIES } from '../../../helpers/constants';

server/sonar-web/src/main/js/apps/coding-rules/components/BulkChangeModal.tsx

@@ -23,8 +23,8 @@ import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/contro
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { formatMeasure } from 'sonar-ui-common/helpers/measures';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { Query, serializeQuery } from '../query';
-import Select from '../../../components/controls/Select';
 import { Profile, bulkActivateRules, bulkDeactivateRules } from '../../../api/quality-profiles';
 
 interface Props {

server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx

@@ -24,8 +24,8 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import Select from 'sonar-ui-common/components/controls/Select';
 import MarkdownTips from '../../../components/common/MarkdownTips';
-import Select from '../../../components/controls/Select';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import TypeHelper from '../../../components/shared/TypeHelper';
 import { createRule, updateRule } from '../../../api/rules';

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

@@ -22,7 +22,7 @@ import TreemapIcon from 'sonar-ui-common/components/icons/TreemapIcon';
 import ListIcon from 'sonar-ui-common/components/icons/ListIcon';
 import TreeIcon from 'sonar-ui-common/components/icons/TreeIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { hasList, hasTree, hasTreemap, View } from '../utils';
 
 interface Props {

server/sonar-web/src/main/js/apps/create/components/OrganizationAvatarInput.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { isWebUri } from 'valid-url';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import ValidationInput from '../../../components/controls/ValidationInput';
+import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
 import OrganizationAvatar from '../../../components/common/OrganizationAvatar';
 
 interface Props {

server/sonar-web/src/main/js/apps/create/components/OrganizationKeyInput.tsx

@@ -20,10 +20,10 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { debounce } from 'lodash';
+import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getHostUrl } from 'sonar-ui-common/helpers/urls';
 import { getOrganization } from '../../../api/organizations';
-import ValidationInput from '../../../components/controls/ValidationInput';
 
 interface Props {
   initialValue?: string;

server/sonar-web/src/main/js/apps/create/components/OrganizationSelect.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import { sortBy } from 'lodash';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { sanitizeAlmId } from '../../../helpers/almIntegrations';
 
 interface Props {

server/sonar-web/src/main/js/apps/create/components/OrganizationUrlInput.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { isWebUri } from 'valid-url';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import ValidationInput from '../../../components/controls/ValidationInput';
+import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
 
 interface Props {
   initialValue?: string;

server/sonar-web/src/main/js/apps/create/components/ProjectKeyInput.tsx

@@ -20,8 +20,8 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { debounce } from 'lodash';
+import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import ValidationInput from '../../../components/controls/ValidationInput';
 import { doesComponentExists } from '../../../api/components';
 
 interface Props {

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

@@ -28,9 +28,9 @@ import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import { SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { serializeQuery, ORGANIZATION_IMPORT_BINDING_IN_PROGRESS_TIMESTAMP } from './utils';
 import OrganizationAvatar from '../../../components/common/OrganizationAvatar';
-import Select from '../../../components/controls/Select';
 import { sanitizeAlmId } from '../../../helpers/almIntegrations';
 
 interface Props {

server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx

@@ -23,7 +23,7 @@ import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/contro
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { getAllMetrics } from '../../../api/metrics';
 
 interface Props {

server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx

@@ -22,7 +22,7 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
-import Select, { Creatable } from '../../../components/controls/Select';
+import Select, { Creatable } from 'sonar-ui-common/components/controls/Select';
 
 export interface MetricProps {
   description: string;

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

@@ -28,11 +28,11 @@ import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import Checkbox from 'sonar-ui-common/components/controls/Checkbox';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import Radio from 'sonar-ui-common/components/controls/Radio';
+import Select from 'sonar-ui-common/components/controls/Select';
+import SearchSelect from 'sonar-ui-common/components/controls/SearchSelect';
 import { searchAssignees } from '../utils';
 import Avatar from '../../../components/ui/Avatar';
 import MarkdownTips from '../../../components/common/MarkdownTips';
-import SearchSelect from '../../../components/controls/SearchSelect';
-import Select from '../../../components/controls/Select';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import throwGlobalError from '../../../app/utils/throwGlobalError';
 import { searchIssueTags, bulkChangeIssues } from '../../../api/issues';

server/sonar-web/src/main/js/apps/overview/badges/BadgeParams.tsx

@@ -20,8 +20,8 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { getLocalizedMetricName, translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { BadgeColors, BadgeType, BadgeOptions, BadgeFormats } from './utils';
-import Select from '../../../components/controls/Select';
 import { fetchWebApi } from '../../../api/web-api';
 
 interface Props {

server/sonar-web/src/main/js/apps/overview/components/App.tsx

@@ -22,7 +22,6 @@ import { Helmet } from 'react-helmet';
 import { getBaseUrl, getPathUrlAsString } from 'sonar-ui-common/helpers/urls';
 import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 import OverviewApp from './OverviewApp';
-import ReviewApp from '../pullRequests/ReviewApp';
 import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
 import { withRouter, Router } from '../../../components/hoc/withRouter';
 import { getProjectUrl } from '../../../helpers/urls';
@@ -30,6 +29,7 @@ import { isSonarCloud } from '../../../helpers/system';
 import { isShortLivingBranch, isPullRequest } from '../../../helpers/branches';
 
 const EmptyOverview = lazyLoad(() => import('./EmptyOverview'));
+const ReviewApp = lazyLoad(() => import('../pullRequests/ReviewApp'));
 
 interface Props {
   branchLike?: T.BranchLike;

server/sonar-web/src/main/js/apps/overview/meta/MetaContainer.tsx

@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import MetaKey from './MetaKey';
 import MetaOrganizationKey from './MetaOrganizationKey';
@@ -27,7 +28,6 @@ import MetaQualityGate from './MetaQualityGate';
 import MetaQualityProfiles from './MetaQualityProfiles';
 import MetaSize from './MetaSize';
 import MetaTags from './MetaTags';
-import BadgesModal from '../badges/BadgesModal';
 import AnalysesList from '../events/AnalysesList';
 import { hasPrivateAccess } from '../../../helpers/organizations';
 import {
@@ -39,6 +39,8 @@ import {
 } from '../../../store/rootReducer';
 import PrivacyBadgeContainer from '../../../components/common/PrivacyBadgeContainer';
 
+const BadgesModal = lazyLoad(() => import('../badges/BadgesModal'), 'BadgesModal');
+
 interface StateToProps {
   appState: T.AppState;
   currentUser: T.CurrentUser;

server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx

@@ -23,7 +23,7 @@ import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/contro
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
-import Select from '../../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { getPermissionTemplates, applyTemplateToProject } from '../../../../api/permissions';
 
 interface Props {

server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphsHeader.tsx

@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import AddGraphMetric from './forms/AddGraphMetric';
 import { isCustomGraph, GRAPH_TYPES } from '../utils';
-import Select from '../../../components/controls/Select';
 
 interface Props {
   addCustomMetric: (metric: string) => void;

server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.tsx

@@ -20,11 +20,11 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import ProjectActivityEventSelectOption from './ProjectActivityEventSelectOption';
 import ProjectActivityEventSelectValue from './ProjectActivityEventSelectValue';
 import ProjectActivityDateInput from './ProjectActivityDateInput';
 import { EVENT_TYPES, APPLICATION_EVENT_TYPES, Query } from '../utils';
-import Select from '../../../components/controls/Select';
 
 interface Props {
   category?: string;

server/sonar-web/src/main/js/apps/projectQualityGate/Form.tsx

@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import Select from '../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 
 interface Props {
   allGates: T.QualityGate[];

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

@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { Profile } from '../../api/quality-profiles';
-import Select from '../../components/controls/Select';
 
 interface Props {
   onChangeProfile: (oldProfile: string, newProfile: string) => Promise<void>;

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

@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import PerspectiveSelectOption, { Option } from './PerspectiveSelectOption';
-import Select from '../../../components/controls/Select';
 import { VIEWS, VISUALIZATIONS } from '../utils';
 
 interface Props {

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

@@ -24,9 +24,9 @@ import SortAscIcon from 'sonar-ui-common/components/icons/SortAscIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import { ButtonIcon } from 'sonar-ui-common/components/controls/buttons';
+import Select from 'sonar-ui-common/components/controls/Select';
 import ProjectsSortingSelectOption, { Option } from './ProjectsSortingSelectOption';
 import { colors } from '../../../app/theme';
-import Select from '../../../components/controls/Select';
 import { SORTING_METRICS, SORTING_LEAK_METRICS, parseSorting } from '../utils';
 
 interface Props {

server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx

@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 
 interface Props {
   isFavorite?: boolean;

server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx

@@ -23,8 +23,8 @@ import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { getPermissionTemplates, bulkApplyTemplate } from '../../api/permissions';
-import Select from '../../components/controls/Select';
 
 export interface Props {
   analyzedBefore: Date | undefined;

server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx

@@ -25,10 +25,10 @@ import { Button } from 'sonar-ui-common/components/controls/buttons';
 import Checkbox from 'sonar-ui-common/components/controls/Checkbox';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import SearchBox from 'sonar-ui-common/components/controls/SearchBox';
+import Select from 'sonar-ui-common/components/controls/Select';
 import BulkApplyTemplateModal from './BulkApplyTemplateModal';
 import DeleteModal from './DeleteModal';
 import DateInput from '../../components/controls/DateInput';
-import Select from '../../components/controls/Select';
 import { Project } from '../../api/components';
 
 export interface Props {

server/sonar-web/src/main/js/apps/quality-gates/components/ConditionOperator.tsx

@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { getPossibleOperators } from '../utils';
 
 interface Props {

server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx

@@ -24,7 +24,7 @@ import {
   getLocalizedMetricName,
   getLocalizedMetricDomain
 } from 'sonar-ui-common/helpers/l10n';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 
 interface Props {
   metrics: T.Metric[];

server/sonar-web/src/main/js/apps/quality-gates/components/ThresholdInput.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 
 interface Props {
   name: string;

server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx

@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import Select from '../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { Profile } from '../types';
 
 interface Props {

server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx

@@ -22,9 +22,9 @@ import { sortBy } from 'lodash';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { Profile } from '../types';
 import { changeProfileParent } from '../../../api/quality-profiles';
-import Select from '../../../components/controls/Select';
 
 interface Props {
   onChange: () => void;

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx

@@ -21,8 +21,8 @@ import * as React from 'react';
 import GroupIcon from 'sonar-ui-common/components/icons/GroupIcon';
 import { debounce, identity } from 'lodash';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { Group } from './ProfilePermissions';
-import Select from '../../../components/controls/Select';
 import Avatar from '../../../components/ui/Avatar';
 
 type Option = T.UserSelected | Group;

server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx

@@ -22,12 +22,12 @@ import { sortBy } from 'lodash';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import Select from 'sonar-ui-common/components/controls/Select';
 import {
   changeProfileParent,
   createQualityProfile,
   getImporters
 } from '../../../api/quality-profiles';
-import Select from '../../../components/controls/Select';
 import { Profile } from '../types';
 
 interface Props {

server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListHeader.tsx

@@ -18,10 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { Option } from 'react-select';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { getProfilesPath, getProfilesForLanguagePath } from '../utils';
-import Select from '../../../components/controls/Select';
 import { withRouter, Router } from '../../../components/hoc/withRouter';
 
 interface Props {
@@ -48,7 +47,7 @@ export class ProfilesListHeader extends React.PureComponent<Props> {
       return null;
     }
 
-    const options: Option[] = languages.map(language => ({
+    const options = languages.map(language => ({
       label: language.name,
       value: language.key
     }));

server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSingleSelectList.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from '../../../../components/controls/Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import { DefaultSpecializedInputProps } from '../../utils';
 
 type Props = DefaultSpecializedInputProps & Pick<T.SettingCategoryDefinition, 'options'>;

server/sonar-web/src/main/js/apps/system/components/info-items/HealthCard.tsx

@@ -21,9 +21,9 @@ import * as React from 'react';
 import { map } from 'lodash';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import BoxedGroupAccordion from 'sonar-ui-common/components/controls/BoxedGroupAccordion';
 import HealthItem from './HealthItem';
 import Section from './Section';
-import BoxedGroupAccordion from '../../../../components/controls/BoxedGroupAccordion';
 import { LOGS_LEVELS, groupSections, getLogsLevel } from '../../utils';
 
 interface Props {

server/sonar-web/src/main/js/apps/users/components/UsersSelectSearch.tsx

@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { debounce } from 'lodash';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import Select from 'sonar-ui-common/components/controls/Select';
 import Avatar from '../../../components/ui/Avatar';
-import Select from '../../../components/controls/Select';
 
 interface Option {
   login: string;

server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx

@@ -18,15 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormikProps } from 'formik';
 import { isWebUri } from 'valid-url';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import InputValidationField from 'sonar-ui-common/components/controls/InputValidationField';
-import ValidationModal from '../../../components/controls/ValidationModal';
+import ValidationModal from 'sonar-ui-common/components/controls/ValidationModal';
 
 interface Props {
   onClose: () => void;
-  onDone: (data: { name: string; url: string }) => Promise<void>;
+  onDone: (data: Values) => Promise<void>;
   webhook?: T.Webhook;
 }
 
@@ -72,24 +71,16 @@ export default class CreateWebhookForm extends React.PureComponent<Props> {
         confirmButtonText={confirmButtonText}
         header={modalHeader}
         initialValues={{
-          name: webhook ? webhook.name : '',
-          secret: webhook ? webhook.secret : '',
-          url: webhook ? webhook.url : ''
+          name: (webhook && webhook.name) || '',
+          secret: (webhook && webhook.secret) || '',
+          url: (webhook && webhook.url) || ''
         }}
         isInitialValid={isUpdate}
         onClose={this.props.onClose}
         onSubmit={this.props.onDone}
         size="small"
         validate={this.handleValidate}>
-        {({
-          dirty,
-          errors,
-          handleBlur,
-          handleChange,
-          isSubmitting,
-          touched,
-          values
-        }: FormikProps<Values>) => (
+        {({ dirty, errors, handleBlur, handleChange, isSubmitting, touched, values }) => (
           <>
             <InputValidationField
               autoFocus={true}

server/sonar-web/src/main/js/apps/webhooks/components/DeliveryAccordion.tsx

@@ -20,9 +20,9 @@
 import * as React from 'react';
 import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
 import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
+import BoxedGroupAccordion from 'sonar-ui-common/components/controls/BoxedGroupAccordion';
 import DeliveryItem from './DeliveryItem';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
-import BoxedGroupAccordion from '../../../components/controls/BoxedGroupAccordion';
 import { getDelivery } from '../../../api/webhooks';
 
 interface Props {

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

@@ -49,7 +49,7 @@ exports[`should render correctly when updating a webhook without secret 1`] = `
   initialValues={
     Object {
       "name": "foo",
-      "secret": undefined,
+      "secret": "",
       "url": "http://foo.bar",
     }
   }

server/sonar-web/src/main/js/components/controls/BoxedGroupAccordion.tsx

@@ -1,78 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import * as classNames from 'classnames';
-import OpenCloseIcon from 'sonar-ui-common/components/icons/OpenCloseIcon';
-
-interface Props {
-  children: React.ReactNode;
-  className?: string;
-  data?: string;
-  onClick: (data?: string) => void;
-  open: boolean;
-  renderHeader?: () => React.ReactNode;
-  title: React.ReactNode;
-}
-
-interface State {
-  hoveringInner: boolean;
-}
-
-export default class BoxedGroupAccordion extends React.PureComponent<Props, State> {
-  state: State = { hoveringInner: false };
-
-  handleClick = () => {
-    this.props.onClick(this.props.data);
-  };
-
-  onDetailEnter = () => {
-    this.setState({ hoveringInner: true });
-  };
-
-  onDetailLeave = () => {
-    this.setState({ hoveringInner: false });
-  };
-
-  render() {
-    const { className, open, renderHeader, title } = this.props;
-    return (
-      <div
-        className={classNames('boxed-group boxed-group-accordion', className, {
-          'no-hover': this.state.hoveringInner
-        })}>
-        <div className="boxed-group-header" onClick={this.handleClick} role="listitem">
-          <span className="boxed-group-accordion-title">
-            <OpenCloseIcon className="little-spacer-right" open={open} />
-            {title}
-          </span>
-          {renderHeader && renderHeader()}
-        </div>
-        {open && (
-          <div
-            className="boxed-group-inner"
-            onMouseEnter={this.onDetailEnter}
-            onMouseLeave={this.onDetailLeave}>
-            {this.props.children}
-          </div>
-        )}
-      </div>
-    );
-  }
-}

server/sonar-web/src/main/js/components/controls/DateInput.tsx

@@ -37,7 +37,7 @@ import {
 import { ButtonIcon, ClearButton } from 'sonar-ui-common/components/controls/buttons';
 import OutsideClickHandler from 'sonar-ui-common/components/controls/OutsideClickHandler';
 import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
-import Select from './Select';
+import Select from 'sonar-ui-common/components/controls/Select';
 import './DayPicker.css';
 import './styles.css';
 

server/sonar-web/src/main/js/components/controls/SearchSelect.tsx

@@ -1,154 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { debounce } from 'lodash';
-import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import Select, { Creatable } from './Select';
-
-interface Props<T> {
-  autofocus?: boolean;
-  canCreate?: boolean;
-  className?: string;
-  clearable?: boolean;
-  defaultOptions?: T[];
-  minimumQueryLength?: number;
-  multi?: boolean;
-  onSearch: (query: string) => Promise<T[]>;
-  onSelect?: (option: T) => void;
-  onMultiSelect?: (options: T[]) => void;
-  promptTextCreator?: (label: string) => string;
-  renderOption?: (option: T) => JSX.Element;
-  resetOnBlur?: boolean;
-  value?: T | T[];
-}
-
-interface State<T> {
-  loading: boolean;
-  options: T[];
-  query: string;
-}
-
-export default class SearchSelect<T extends { value: string }> extends React.PureComponent<
-  Props<T>,
-  State<T>
-> {
-  mounted = false;
-
-  constructor(props: Props<T>) {
-    super(props);
-    this.state = { loading: false, options: props.defaultOptions || [], query: '' };
-    this.handleSearch = debounce(this.handleSearch, 250);
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  get autofocus() {
-    return this.props.autofocus !== undefined ? this.props.autofocus : true;
-  }
-
-  get minimumQueryLength() {
-    return this.props.minimumQueryLength !== undefined ? this.props.minimumQueryLength : 2;
-  }
-
-  get resetOnBlur() {
-    return this.props.resetOnBlur !== undefined ? this.props.resetOnBlur : true;
-  }
-
-  handleSearch = (query: string) => {
-    // Ignore the result if the query changed
-    const currentQuery = query;
-    this.props.onSearch(currentQuery).then(
-      options => {
-        if (this.mounted) {
-          this.setState(state => ({
-            loading: false,
-            options: state.query === currentQuery ? options : state.options
-          }));
-        }
-      },
-      () => {
-        if (this.mounted) {
-          this.setState({ loading: false });
-        }
-      }
-    );
-  };
-
-  handleChange = (option: T | T[]) => {
-    if (Array.isArray(option)) {
-      if (this.props.onMultiSelect) {
-        this.props.onMultiSelect(option);
-      }
-    } else if (this.props.onSelect) {
-      this.props.onSelect(option);
-    }
-  };
-
-  handleInputChange = (query: string) => {
-    if (query.length >= this.minimumQueryLength) {
-      this.setState({ loading: true, query });
-      this.handleSearch(query);
-    } else {
-      // `onInputChange` is called with an empty string after a user selects a value
-      // in this case we shouldn't reset `options`, because it also resets select value :(
-      const options = (query.length === 0 && this.props.defaultOptions) || [];
-      this.setState({ options, query });
-    }
-  };
-
-  // disable internal filtering
-  handleFilterOption = () => true;
-
-  render() {
-    const Component = this.props.canCreate ? Creatable : Select;
-    return (
-      <Component
-        autoFocus={this.autofocus}
-        className={this.props.className}
-        clearable={this.props.clearable}
-        escapeClearsValue={false}
-        filterOption={this.handleFilterOption}
-        isLoading={this.state.loading}
-        multi={this.props.multi}
-        noResultsText={
-          this.state.query.length < this.minimumQueryLength
-            ? translateWithParameters('select2.tooShort', this.minimumQueryLength)
-            : translate('select2.noMatches')
-        }
-        onBlurResetsInput={this.resetOnBlur}
-        onChange={this.handleChange}
-        onInputChange={this.handleInputChange}
-        optionRenderer={this.props.renderOption}
-        options={this.state.options}
-        placeholder={translate('search_verb')}
-        promptTextCreator={this.props.promptTextCreator}
-        searchable={true}
-        value={this.props.value}
-        valueRenderer={this.props.renderOption}
-      />
-    );
-  }
-}

server/sonar-web/src/main/js/components/controls/Select.tsx

@@ -1,59 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { ReactSelectProps, ReactCreatableSelectProps, ReactAsyncSelectProps } from 'react-select';
-import { ClearButton } from 'sonar-ui-common/components/controls/buttons';
-import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
-import './react-select.css';
-
-const ReactSelectLib = import('react-select');
-const ReactSelect = lazyLoad(() => ReactSelectLib);
-const ReactCreatable = lazyLoad(() => ReactSelectLib.then(lib => ({ default: lib.Creatable })));
-const ReactAsync = lazyLoad(() => ReactSelectLib.then(lib => ({ default: lib.Async })));
-
-function renderInput() {
-  return <ClearButton className="button-tiny spacer-left text-middle" iconProps={{ size: 12 }} />;
-}
-
-interface WithInnerRef {
-  innerRef?: (element: React.Component) => void;
-}
-
-export default function Select({ innerRef, ...props }: WithInnerRef & ReactSelectProps) {
-  // TODO try to define good defaults, if any
-  // ReactSelect doesn't declare `clearRenderer` prop
-  const ReactSelectAny = ReactSelect as any;
-  // hide the "x" icon when select is empty
-  const clearable = props.clearable ? Boolean(props.value) : false;
-  return (
-    <ReactSelectAny {...props} clearRenderer={renderInput} clearable={clearable} ref={innerRef} />
-  );
-}
-
-export function Creatable(props: ReactCreatableSelectProps) {
-  // ReactSelect doesn't declare `clearRenderer` prop
-  const ReactCreatableAny = ReactCreatable as any;
-  return <ReactCreatableAny {...props} clearRenderer={renderInput} />;
-}
-
-// TODO figure out why `ref` prop is incompatible
-export function AsyncSelect(props: ReactAsyncSelectProps & { ref?: any }) {
-  return <ReactAsync {...props} />;
-}

server/sonar-web/src/main/js/components/controls/ValidationForm.tsx

@@ -1,72 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { FormikActions, FormikProps, Formik } from 'formik';
-
-export type ChildrenProps<V> = T.Omit<FormikProps<V>, 'handleSubmit'>;
-
-interface Props<V> {
-  children: (props: ChildrenProps<V>) => React.ReactNode;
-  initialValues: V;
-  isInitialValid?: boolean;
-  onSubmit: (data: V) => Promise<void>;
-  validate: (data: V) => { [P in keyof V]?: string } | Promise<{ [P in keyof V]?: string }>;
-}
-
-export default class ValidationForm<V> extends React.Component<Props<V>> {
-  mounted = false;
-
-  componentDidMount() {
-    this.mounted = true;
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  handleSubmit = (data: V, { setSubmitting }: FormikActions<V>) => {
-    const result = this.props.onSubmit(data);
-    const stopSubmitting = () => {
-      if (this.mounted) {
-        setSubmitting(false);
-      }
-    };
-
-    if (result) {
-      result.then(stopSubmitting, stopSubmitting);
-    } else {
-      stopSubmitting();
-    }
-  };
-
-  render() {
-    return (
-      <Formik<V>
-        initialValues={this.props.initialValues}
-        isInitialValid={this.props.isInitialValid}
-        onSubmit={this.handleSubmit}
-        validate={this.props.validate}>
-        {({ handleSubmit, ...props }) => (
-          <form onSubmit={handleSubmit}>{this.props.children(props)}</form>
-        )}
-      </Formik>
-    );
-  }
-}

server/sonar-web/src/main/js/components/controls/ValidationInput.tsx

@@ -1,60 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
-import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
-import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
-
-interface Props {
-  description?: string;
-  children: React.ReactNode;
-  className?: string;
-  error: string | undefined;
-  help?: string;
-  id: string;
-  isInvalid: boolean;
-  isValid: boolean;
-  label: React.ReactNode;
-  required?: boolean;
-}
-
-export default function ValidationInput(props: Props) {
-  const hasError = props.isInvalid && props.error !== undefined;
-  return (
-    <div className={props.className}>
-      <label htmlFor={props.id}>
-        <span className="text-middle">
-          <strong>{props.label}</strong>
-          {props.required && <em className="mandatory">*</em>}
-        </span>
-        {props.help && <HelpTooltip className="spacer-left" overlay={props.help} />}
-      </label>
-      <div className="little-spacer-top spacer-bottom">
-        {props.children}
-        {props.isInvalid && <AlertErrorIcon className="spacer-left text-middle" />}
-        {hasError && (
-          <span className="little-spacer-left text-danger text-middle">{props.error}</span>
-        )}
-        {props.isValid && <AlertSuccessIcon className="spacer-left text-middle" />}
-      </div>
-      {props.description && <div className="note abs-width-400">{props.description}</div>}
-    </div>
-  );
-}

server/sonar-web/src/main/js/components/controls/ValidationModal.tsx

@@ -1,83 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { translate } from 'sonar-ui-common/helpers/l10n';
-import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
-import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
-import Modal, { ModalProps } from 'sonar-ui-common/components/controls/Modal';
-import ValidationForm, { ChildrenProps } from './ValidationForm';
-
-interface Props<V> extends ModalProps {
-  children: (props: ChildrenProps<V>) => React.ReactNode;
-  confirmButtonText: string;
-  header: string;
-  initialValues: V;
-  isDestructive?: boolean;
-  isInitialValid?: boolean;
-  onClose: () => void;
-  onSubmit: (data: V) => Promise<void>;
-  validate: (data: V) => { [P in keyof V]?: string };
-}
-
-export default class ValidationModal<V> extends React.PureComponent<Props<V>> {
-  handleSubmit = (data: V) => {
-    return this.props.onSubmit(data).then(() => {
-      this.props.onClose();
-    });
-  };
-
-  render() {
-    return (
-      <Modal
-        contentLabel={this.props.header}
-        noBackdrop={this.props.noBackdrop}
-        onRequestClose={this.props.onClose}
-        size={this.props.size}>
-        <ValidationForm
-          initialValues={this.props.initialValues}
-          isInitialValid={this.props.isInitialValid}
-          onSubmit={this.handleSubmit}
-          validate={this.props.validate}>
-          {props => (
-            <>
-              <header className="modal-head">
-                <h2>{this.props.header}</h2>
-              </header>
-
-              <div className="modal-body">{this.props.children(props)}</div>
-
-              <footer className="modal-foot">
-                <DeferredSpinner className="spacer-right" loading={props.isSubmitting} />
-                <SubmitButton
-                  className={this.props.isDestructive ? 'button-red' : undefined}
-                  disabled={props.isSubmitting || !props.isValid || !props.dirty}>
-                  {this.props.confirmButtonText}
-                </SubmitButton>
-                <ResetButtonLink disabled={props.isSubmitting} onClick={this.props.onClose}>
-                  {translate('cancel')}
-                </ResetButtonLink>
-              </footer>
-            </>
-          )}
-        </ValidationForm>
-      </Modal>
-    );
-  }
-}

server/sonar-web/src/main/js/components/controls/__tests__/BoxedGroupAccordion-test.tsx

@@ -1,52 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { click } from 'sonar-ui-common/helpers/testUtils';
-import BoxedGroupAccordion from '../BoxedGroupAccordion';
-
-it('should render correctly', () => {
-  expect(getWrapper()).toMatchSnapshot();
-});
-
-it('should show the inner content after a click', () => {
-  const onClick = jest.fn();
-  const wrapper = getWrapper({ onClick });
-  click(wrapper.find('.boxed-group-header'));
-
-  expect(onClick).lastCalledWith('foo');
-  wrapper.setProps({ open: true });
-
-  expect(wrapper.find('.boxed-group-inner').exists()).toBeTruthy();
-});
-
-function getWrapper(props = {}) {
-  return shallow(
-    <BoxedGroupAccordion
-      data="foo"
-      onClick={() => {}}
-      open={false}
-      renderHeader={() => <div>header content</div>}
-      title="Foo"
-      {...props}>
-      <div>inner content</div>
-    </BoxedGroupAccordion>
-  );
-}

server/sonar-web/src/main/js/components/controls/__tests__/SearchSelect-test.tsx

@@ -1,50 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import SearchSelect from '../SearchSelect';
-
-jest.mock('lodash', () => {
-  const lodash = require.requireActual('lodash');
-  lodash.debounce = jest.fn(fn => fn);
-  return lodash;
-});
-
-it('should render Select', () => {
-  expect(shallow(<SearchSelect onSearch={jest.fn()} onSelect={jest.fn()} />)).toMatchSnapshot();
-});
-
-it('should call onSelect', () => {
-  const onSelect = jest.fn();
-  const wrapper = shallow(<SearchSelect onSearch={jest.fn()} onSelect={onSelect} />);
-  wrapper.prop('onChange')({ value: 'foo' });
-  expect(onSelect).lastCalledWith({ value: 'foo' });
-});
-
-it('should call onSearch', () => {
-  const onSearch = jest.fn().mockReturnValue(Promise.resolve([]));
-  const wrapper = shallow(
-    <SearchSelect minimumQueryLength={2} onSearch={onSearch} onSelect={jest.fn()} />
-  );
-  wrapper.prop('onInputChange')('f');
-  expect(onSearch).not.toHaveBeenCalled();
-  wrapper.prop('onInputChange')('foo');
-  expect(onSearch).lastCalledWith('foo');
-});

server/sonar-web/src/main/js/components/controls/__tests__/ValidationForm-test.tsx

@@ -1,47 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import ValidationForm from '../ValidationForm';
-
-it('should render and submit', async () => {
-  const render = jest.fn();
-  const onSubmit = jest.fn();
-  const setSubmitting = jest.fn();
-  const wrapper = shallow(
-    <ValidationForm initialValues={{ foo: 'bar' }} onSubmit={onSubmit} validate={jest.fn()}>
-      {render}
-    </ValidationForm>
-  );
-  expect(wrapper).toMatchSnapshot();
-  wrapper.dive();
-  expect(render).toBeCalledWith(
-    expect.objectContaining({ dirty: false, errors: {}, values: { foo: 'bar' } })
-  );
-
-  wrapper.prop<Function>('onSubmit')({ foo: 'bar' }, { setSubmitting });
-  expect(setSubmitting).toBeCalledWith(false);
-
-  onSubmit.mockResolvedValue(undefined).mockClear();
-  setSubmitting.mockClear();
-  wrapper.prop<Function>('onSubmit')({ foo: 'bar' }, { setSubmitting });
-  await new Promise(setImmediate);
-  expect(setSubmitting).toBeCalledWith(false);
-});

server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx

@@ -1,73 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import ValidationInput from '../ValidationInput';
-
-it('should render', () => {
-  expect(
-    shallow(
-      <ValidationInput
-        description="My description"
-        error={undefined}
-        help="Help message"
-        id="field-id"
-        isInvalid={false}
-        isValid={false}
-        label="Field label"
-        required={true}>
-        <div />
-      </ValidationInput>
-    )
-  ).toMatchSnapshot();
-});
-
-it('should render with error', () => {
-  expect(
-    shallow(
-      <ValidationInput
-        description="My description"
-        error="Field error message"
-        id="field-id"
-        isInvalid={true}
-        isValid={false}
-        label="Field label">
-        <div />
-      </ValidationInput>
-    )
-  ).toMatchSnapshot();
-});
-
-it('should render when valid', () => {
-  expect(
-    shallow(
-      <ValidationInput
-        description="My description"
-        error={undefined}
-        id="field-id"
-        isInvalid={false}
-        isValid={true}
-        label="Field label"
-        required={true}>
-        <div />
-      </ValidationInput>
-    )
-  ).toMatchSnapshot();
-});

server/sonar-web/src/main/js/components/controls/__tests__/ValidationModal-test.tsx

@@ -1,47 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import ValidationModal from '../ValidationModal';
-
-it('should render correctly', () => {
-  const wrapper = shallow(
-    <ValidationModal<{ field: string }>
-      confirmButtonText="confirm"
-      header="title"
-      initialValues={{ field: 'foo' }}
-      isDestructive={true}
-      isInitialValid={true}
-      onClose={jest.fn()}
-      onSubmit={jest.fn()}
-      validate={jest.fn()}>
-      {props => (
-        <input
-          name="field"
-          onBlur={props.handleBlur}
-          onChange={props.handleChange}
-          type="text"
-          value={props.values.field}
-        />
-      )}
-    </ValidationModal>
-  );
-  expect(wrapper).toMatchSnapshot();
-});

server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedGroupAccordion-test.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
-  className="boxed-group boxed-group-accordion"
->
-  <div
-    className="boxed-group-header"
-    onClick={[Function]}
-    role="listitem"
-  >
-    <span
-      className="boxed-group-accordion-title"
-    >
-      <OpenCloseIcon
-        className="little-spacer-right"
-        open={false}
-      />
-      Foo
-    </span>
-    <div>
-      header content
-    </div>
-  </div>
-</div>
-`;

server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchSelect-test.tsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render Select 1`] = `
-<Select
-  autoFocus={true}
-  escapeClearsValue={false}
-  filterOption={[Function]}
-  isLoading={false}
-  noResultsText="select2.tooShort.2"
-  onBlurResetsInput={true}
-  onChange={[Function]}
-  onInputChange={[Function]}
-  options={Array []}
-  placeholder="search_verb"
-  searchable={true}
-/>
-`;

server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationForm-test.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render and submit 1`] = `
-<Formik
-  enableReinitialize={false}
-  initialValues={
-    Object {
-      "foo": "bar",
-    }
-  }
-  isInitialValid={false}
-  onSubmit={[Function]}
-  validate={[MockFunction]}
-  validateOnBlur={true}
-  validateOnChange={true}
->
-  <Component />
-</Formik>
-`;

server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationInput-test.tsx.snap

@@ -1,104 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render 1`] = `
-<div>
-  <label
-    htmlFor="field-id"
-  >
-    <span
-      className="text-middle"
-    >
-      <strong>
-        Field label
-      </strong>
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
-    </span>
-    <HelpTooltip
-      className="spacer-left"
-      overlay="Help message"
-    />
-  </label>
-  <div
-    className="little-spacer-top spacer-bottom"
-  >
-    <div />
-  </div>
-  <div
-    className="note abs-width-400"
-  >
-    My description
-  </div>
-</div>
-`;
-
-exports[`should render when valid 1`] = `
-<div>
-  <label
-    htmlFor="field-id"
-  >
-    <span
-      className="text-middle"
-    >
-      <strong>
-        Field label
-      </strong>
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
-    </span>
-  </label>
-  <div
-    className="little-spacer-top spacer-bottom"
-  >
-    <div />
-    <AlertSuccessIcon
-      className="spacer-left text-middle"
-    />
-  </div>
-  <div
-    className="note abs-width-400"
-  >
-    My description
-  </div>
-</div>
-`;
-
-exports[`should render with error 1`] = `
-<div>
-  <label
-    htmlFor="field-id"
-  >
-    <span
-      className="text-middle"
-    >
-      <strong>
-        Field label
-      </strong>
-    </span>
-  </label>
-  <div
-    className="little-spacer-top spacer-bottom"
-  >
-    <div />
-    <AlertErrorIcon
-      className="spacer-left text-middle"
-    />
-    <span
-      className="little-spacer-left text-danger text-middle"
-    >
-      Field error message
-    </span>
-  </div>
-  <div
-    className="note abs-width-400"
-  >
-    My description
-  </div>
-</div>
-`;

server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationModal-test.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<Modal
-  contentLabel="title"
-  onRequestClose={[MockFunction]}
->
-  <ValidationForm
-    initialValues={
-      Object {
-        "field": "foo",
-      }
-    }
-    isInitialValid={true}
-    onSubmit={[Function]}
-    validate={[MockFunction]}
-  >
-    <Component />
-  </ValidationForm>
-</Modal>
-`;

server/sonar-web/src/main/js/components/controls/react-select.css

@@ -1,483 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2019 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-.Select {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: var(--smallFontSize);
-  text-align: left;
-}
-
-.Select,
-.Select div,
-.Select input,
-.Select span {
-  box-sizing: border-box;
-}
-
-.Select.is-disabled > .Select-control {
-  background-color: var(--disableGrayBg) !important;
-  border-color: var(--disableGrayBorder) !important;
-}
-
-.Select.is-disabled > .Select-control:hover {
-  box-shadow: none !important;
-}
-
-.Select.is-disabled .Select-arrow-zone {
-  cursor: not-allowed !important;
-  pointer-events: none !important;
-}
-
-.Select.is-disabled .Select-placeholder,
-.Select.is-disabled .Select-value {
-  color: var(--disableGrayText) !important;
-}
-
-.Select-control {
-  position: relative;
-  display: table;
-  width: 100%;
-  height: var(--controlHeight);
-  line-height: calc(var(--controlHeight) - 2px);
-  border: 1px solid var(--gray80);
-  border-collapse: separate;
-  border-radius: 2px;
-  background-color: #fff;
-  color: var(--baseFontColor);
-  cursor: default;
-  outline: none;
-  overflow: hidden;
-}
-
-.is-searchable.is-open > .Select-control {
-  cursor: text;
-}
-
-.is-open > .Select-control {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  background: #fff;
-}
-
-.is-open > .Select-control > .Select-arrow {
-  border-color: transparent transparent #999;
-  border-width: 0 5px 5px;
-}
-
-.is-searchable.is-focused:not(.is-open) > .Select-control {
-  cursor: text;
-}
-
-.is-focused:not(.is-open) > .Select-control {
-  border-color: var(--blue);
-}
-
-.Select-placeholder {
-  color: var(--secondFontColor);
-}
-
-.Select-placeholder,
-:not(.Select--multi) > .Select-control .Select-value {
-  bottom: 0;
-  left: 0;
-  line-height: 23px;
-  padding-left: 8px;
-  padding-right: 24px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.Select-value [class^='icon-'] {
-  padding-top: 5px;
-}
-
-.Select-value svg,
-.Select-value img {
-  padding-top: 4px;
-}
-
-.Select-value .outline-badge,
-.Select-option .outline-badge {
-  height: 20px;
-  line-height: 19px;
-  margin-top: 1px;
-}
-
-.Select-option svg,
-.Select-option img,
-.Select-option [class^='icon-'] {
-  padding-top: 2px;
-}
-
-.has-value:not(.Select--multi) > .Select-control > .Select-value .Select-value-label,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  .Select-value-label {
-  color: var(--baseFontColor);
-}
-
-.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  a.Select-value-label {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  a.Select-value-label:hover,
-.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  a.Select-value-label:focus {
-  color: #007eff;
-  outline: none;
-  text-decoration: underline;
-}
-
-.Select-input {
-  vertical-align: top;
-  height: 22px;
-  padding-left: 8px;
-  padding-right: 8px;
-  outline: none;
-}
-
-.Select-input > input {
-  background: none transparent;
-  border: 0 none;
-  cursor: default;
-  display: inline-block;
-  font-family: inherit;
-  font-size: var(--smallFontSize);
-  height: 22px;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  box-shadow: none;
-  -webkit-appearance: none;
-}
-
-.is-focused .Select-input > input {
-  cursor: text;
-}
-
-.has-value.is-pseudo-focused .Select-input {
-  opacity: 0;
-}
-
-.Select-control:not(.is-searchable) > .Select-input {
-  outline: none;
-}
-
-.Select-loading-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 16px;
-}
-
-.Select-loading {
-  -webkit-animation: Select-animation-spin 400ms infinite linear;
-  -o-animation: Select-animation-spin 400ms infinite linear;
-  animation: Select-animation-spin 400ms infinite linear;
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  border: 2px solid #ccc;
-  border-right-color: var(--baseFontColor);
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-}
-
-.Select-clear-zone {
-  -webkit-animation: Select-animation-fadeIn 200ms;
-  -o-animation: Select-animation-fadeIn 200ms;
-  animation: Select-animation-fadeIn 200ms;
-  color: #999;
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  padding-right: 4px;
-}
-
-.Select-clear-zone:hover .Select-clear {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMjM0Mzc1LDAsMCwwLjAyMzQzNzUsLTUuMDE1NjIsLTUuMDE1NjIpIj4gICAgICAgIDxwYXRoIGQ9Ik04MTAsMjc0TDU3Miw1MTJMODEwLDc1MEw3NTAsODEwTDUxMiw1NzJMMjc0LDgxMEwyMTQsNzUwTDQ1Miw1MTJMMjE0LDI3NEwyNzQsMjE0TDUxMiw0NTJMNzUwLDIxNEw4MTAsMjc0WiIgc3R5bGU9ImZpbGw6cmdiKDIzMSwyMCw1Nik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgIDwvZz48L3N2Zz4=);
-}
-
-.Select-clear {
-  display: block;
-  width: 9px;
-  height: 9px;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMjM0Mzc1LDAsMCwwLjAyMzQzNzUsLTUuMDE1NjIsLTUuMDE1NjIpIj4gICAgICAgIDxwYXRoIGQ9Ik04MTAsMjc0TDU3Miw1MTJMODEwLDc1MEw3NTAsODEwTDUxMiw1NzJMMjc0LDgxMEwyMTQsNzUwTDQ1Miw1MTJMMjE0LDI3NEwyNzQsMjE0TDUxMiw0NTJMNzUwLDIxNEw4MTAsMjc0WiIgc3R5bGU9ImZpbGw6cmdiKDE1MywxNTMsMTUzKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-size: 9px 9px;
-  text-indent: -9999px;
-}
-
-.Select--multi .Select-clear-zone {
-  width: 17px;
-}
-
-.Select-arrow-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 20px;
-  padding-right: 5px;
-}
-
-.Select-arrow {
-  border-color: #999 transparent transparent;
-  border-style: solid;
-  border-width: 4px 4px 2px;
-  display: inline-block;
-  height: 0;
-  width: 0;
-}
-
-.is-open .Select-arrow,
-.Select-arrow-zone:hover > .Select-arrow {
-  border-top-color: #666;
-}
-
-@-webkit-keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.Select-menu-outer {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-top-color: var(--barBorderColor);
-  box-sizing: border-box;
-  margin-top: -1px;
-  max-height: 200px;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: var(--dropdownMenuZIndex);
-  -webkit-overflow-scrolling: touch;
-  box-shadow: var(--defaultShadow);
-}
-
-.Select-menu {
-  max-height: 198px;
-  padding: 5px 0;
-  overflow-y: auto;
-}
-
-.Select-option {
-  display: block;
-  line-height: 20px;
-  padding: 0 8px;
-  box-sizing: border-box;
-  color: var(--baseFontColor);
-  font-size: var(--smallFontSize);
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.Select-option:last-child {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.Select-option.is-focused {
-  background-color: var(--barBackgroundColor);
-}
-
-.Select-option.is-disabled {
-  font-weight: 600;
-  cursor: default;
-}
-
-.Select-noresults {
-  box-sizing: border-box;
-  color: #999;
-  cursor: default;
-  display: block;
-  padding: 8px 10px;
-}
-
-.Select--multi .Select-value {
-  background-color: rgba(0, 126, 255, 0.08);
-  border-radius: 2px;
-  border: 1px solid rgba(0, 126, 255, 0.24);
-  color: var(--baseFontColor);
-  display: inline-block;
-  font-size: var(--smallFontSize);
-  line-height: 14px;
-  margin: 1px 4px 1px 1px;
-  vertical-align: top;
-}
-
-.Select-value-label {
-  font-size: var(--smallFontSize);
-}
-
-.is-searchable.is-open .Select-value-label {
-  opacity: 0.5;
-}
-
-.Select-big .Select-control {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.Select-big .Select-placeholder {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.Select-big .Select-value-label {
-  display: inline-block;
-  margin-top: 7px;
-  line-height: 16px;
-}
-
-.Select-big .Select-option {
-  padding: 7px 8px;
-  line-height: 16px;
-}
-
-.Select-big img,
-.Select-big svg {
-  padding-top: 0;
-}
-
-.Select--multi .Select-value-icon,
-.Select--multi .Select-value-label {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.Select--multi .Select-value-label {
-  display: inline-block;
-  max-width: 200px;
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  cursor: default;
-  padding: 2px 5px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.Select--multi a.Select-value-label {
-  color: #007eff;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.Select--multi a.Select-value-label:hover {
-  text-decoration: underline;
-}
-
-.Select--multi .Select-value-icon {
-  cursor: pointer;
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-right: 1px solid rgba(0, 126, 255, 0.24);
-  padding: 1px 5px;
-}
-
-.Select--multi .Select-value-icon:hover,
-.Select--multi .Select-value-icon:focus {
-  background-color: rgba(0, 113, 230, 0.08);
-  color: #0071e6;
-}
-
-.Select--multi .Select-value-icon:active {
-  background-color: rgba(0, 126, 255, 0.24);
-}
-
-.Select--multi.is-disabled .Select-value {
-  background-color: #fcfcfc;
-  border: 1px solid #e3e3e3;
-  color: var(--baseFontColor);
-}
-
-.Select--multi.is-disabled .Select-value-icon {
-  cursor: not-allowed;
-  border-right: 1px solid #e3e3e3;
-}
-
-.Select--multi.is-disabled .Select-value-icon:hover,
-.Select--multi.is-disabled .Select-value-icon:focus,
-.Select--multi.is-disabled .Select-value-icon:active {
-  background-color: #fcfcfc;
-}
-
-.Select-aria-only {
-  display: none;
-}
-
-@keyframes Select-animation-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@-webkit-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-  }
-}

server/sonar-web/yarn.lock

@@ -956,11 +956,6 @@
   resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-color/-/d3-color-1.2.2.tgz#80cf7cfff7401587b8f89307ba36fe4a576bc7cf"
   integrity sha1-gM98//dAFYe4+JMHujb+Sldrx88=
 
-"@types/d3-hierarchy@1.1.4":
-  version "1.1.4"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-hierarchy/-/d3-hierarchy-1.1.4.tgz#b04dfcb1f2074da789ada10fe4942d13f0bce421"
-  integrity sha1-sE38sfIHTaeJraEP5JQtE/C85CE=
-
 "@types/d3-interpolate@*":
   version "1.3.1"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-interpolate/-/d3-interpolate-1.3.1.tgz#1c280511f622de9b0b47d463fa55f9a4fd6f5fc8"
@@ -968,11 +963,6 @@
   dependencies:
     "@types/d3-color" "*"
 
-"@types/d3-path@*":
-  version "1.0.8"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-path/-/d3-path-1.0.8.tgz#48e6945a8ff43ee0a1ce85c8cfa2337de85c7c79"
-  integrity sha1-SOaUWo/0PuChzoXIz6IzfehcfHk=
-
 "@types/d3-scale@2.0.2":
   version "2.0.2"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-scale/-/d3-scale-2.0.2.tgz#61145948aa1a52ab31384766cd013308699112b3"
@@ -990,13 +980,6 @@
   resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-selection/-/d3-selection-1.3.2.tgz#dd5661a560ba9ce3aba823c424b8d4a1bc7e833f"
   integrity sha1-3VZhpWC6nOOrqCPEJLjUobx+gz8=
 
-"@types/d3-shape@1.2.4":
-  version "1.2.4"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-shape/-/d3-shape-1.2.4.tgz#e65585f2254d83ae42c47af2e730dd9b97952996"
-  integrity sha1-5lWF8iVNg65CxHry5zDdm5eVKZY=
-  dependencies:
-    "@types/d3-path" "*"
-
 "@types/d3-time@*":
   version "1.0.10"
   resolved "https://repox.jfrog.io/repox/api/npm/npm/@types/d3-time/-/d3-time-1.0.10.tgz#d338c7feac93a98a32aac875d1100f92c7b61f4f"
@@ -9280,11 +9263,12 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
-sonar-ui-common@0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/sonar-ui-common/-/sonar-ui-common-0.0.11.tgz#b9aee225da16564d5b823ca2fb103f6d913db719"
-  integrity sha512-Q3Umwf+nVnH0J6XUR104PRpLN8aGAlqZHOA2oxaJVzhwT26o80A6i0i6PZAkzrbqQE4jhTRBQ396oalihI0s2g==
+sonar-ui-common@0.0.13:
+  version "0.0.13"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.13.tgz#b01255f32d7863e529117bfe715890edfcdb8c97"
+  integrity sha1-sBJV8y14Y+UpEXv+cViQ7fzbjJc=
   dependencies:
+    "@types/react-select" "1.2.6"
     classnames "2.2.6"
     clipboard "2.0.4"
     d3-array "1.2.4"
@@ -9294,12 +9278,14 @@ sonar-ui-common@0.0.11:
     d3-shape "1.2.2"
     d3-zoom "1.7.3"
     date-fns "1.30.1"
+    formik "1.2.0"
     history "3.3.0"
     lodash "4.17.11"
     react-draggable "3.2.1"
     react-intl "2.8.0"
     react-modal "3.8.2"
     react-router "3.2.1"
+    react-select "1.2.1"
     react-virtualized "9.21.0"
 
 sort-keys@^2.0.0: