SC-704 Extract components into sonar-ui-common (#1714)

* SC-704 Extract icons components to sonar-ui-common

* Better typings for theme
* Use sonar-ui-common in extensions
* Extract some helpers
* Extract l10n helper to sonar-ui-common
* Extract requests helper to sonar-ui-common
* Extract part of urls helper
* Move buttons, Tooltips and ScreenPositionFixers
* Move modal related components
* Move IdentityProviderLink
* Move GenericAvatar
* Move SizeRating
* Move charts and move deps to peerDeps
* Move nav
* Move formatMeasure
* Move Rating
* Move PageActions
* Move the rest of ui components
* Move more controls components
* Include theme inside extension build
* Add missing theme context provider in extensions
* Update react to same version everywhere
* Update sonar-ui-common
* Update eslint configuration

16 files changed, 51 insertions, 575 deletions

diff --git a/server/sonar-web/src/main/js/apps/groups/components/App.tsx b/server/sonar-web/src/main/js/apps/groups/components/App.tsx
index 02d96255587..f37c184a35b 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/App.tsx
@@ -19,13 +19,13 @@
  */
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import SearchBox from 'sonar-ui-common/components/controls/SearchBox';
+import ListFooter from 'sonar-ui-common/components/controls/ListFooter';
 import Header from './Header';
 import List from './List';
-import ListFooter from '../../../components/controls/ListFooter';
-import SearchBox from '../../../components/controls/SearchBox';
 import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
 import { searchUsersGroups, deleteGroup, updateGroup, createGroup } from '../../../api/user_groups';
-import { translate } from '../../../helpers/l10n';
 
 interface Props {
   organization?: Pick<T.Organization, 'key'>;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/DeleteForm.tsx b/server/sonar-web/src/main/js/apps/groups/components/DeleteForm.tsx
index cd9173d0024..703ab3eec94 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/DeleteForm.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/DeleteForm.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SimpleModal from '../../../components/controls/SimpleModal';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import { SubmitButton, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
+import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 
 interface Props {
   group: T.Group;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx b/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx
index 4b29d067431..5cd8b19ffa8 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import BulletListIcon from 'sonar-ui-common/components/icons/BulletListIcon';
+import { ButtonIcon } from 'sonar-ui-common/components/controls/buttons';
 import EditMembersModal from './EditMembersModal';
-import BulletListIcon from '../../../components/icons-components/BulletListIcon';
-import { ButtonIcon } from '../../../components/ui/buttons';
 
 interface Props {
   group: T.Group;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx b/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
index 6e6ce01ff70..a0f00cf6d6e 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
@@ -17,19 +17,19 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { find, without } from 'lodash';
 import * as React from 'react';
+import { find, without } from 'lodash';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
+import Modal from 'sonar-ui-common/components/controls/Modal';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import SelectList, { Filter } from '../../../components/SelectList/SelectList';
 import {
   addUserToGroup,
   getUsersInGroup,
   GroupUser,
   removeUserFromGroup
 } from '../../../api/user_groups';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import Modal from '../../../components/controls/Modal';
-import SelectList, { Filter } from '../../../components/SelectList/SelectList';
-import { ResetButtonLink } from '../../../components/ui/buttons';
-import { translate } from '../../../helpers/l10n';
 
 interface Props {
   group: T.Group;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/Form.tsx b/server/sonar-web/src/main/js/apps/groups/components/Form.tsx
index 3f5d72afe08..99c4d2ed3a1 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/Form.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import SimpleModal from '../../../components/controls/SimpleModal';
-import { ResetButtonLink, SubmitButton } from '../../../components/ui/buttons';
-import { translate } from '../../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { ResetButtonLink, SubmitButton } 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';
 
 interface Props {
   confirmButtonText: string;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
index 8373d09ec07..1f76812b7fa 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
@@ -18,10 +18,10 @@
  * 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 { Button } from 'sonar-ui-common/components/controls/buttons';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import Form from './Form';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import { Button } from '../../../components/ui/buttons';
-import { translate } from '../../../helpers/l10n';
 
 interface Props {
   loading: boolean;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/List.tsx b/server/sonar-web/src/main/js/apps/groups/components/List.tsx
index 2321de1e865..798b00fcaf0 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/List.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/List.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { sortBy } from 'lodash';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import ListItem from './ListItem';
-import { translate } from '../../../helpers/l10n';
 
 interface Props {
   groups: T.Group[];
diff --git a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
index 2b7e63c1e86..00579625222 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
@@ -18,15 +18,15 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import DeleteForm from './DeleteForm';
-import EditMembers from './EditMembers';
-import Form from './Form';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { omitNil } from 'sonar-ui-common/helpers/request';
 import ActionsDropdown, {
   ActionsDropdownItem,
   ActionsDropdownDivider
-} from '../../../components/controls/ActionsDropdown';
-import { translate } from '../../../helpers/l10n';
-import { omitNil } from '../../../helpers/request';
+} from 'sonar-ui-common/components/controls/ActionsDropdown';
+import DeleteForm from './DeleteForm';
+import EditMembers from './EditMembers';
+import Form from './Form';
 
 interface Props {
   group: T.Group;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/App-test.tsx b/server/sonar-web/src/main/js/apps/groups/components/__tests__/App-test.tsx
index 0c4e78abd65..1b4a9b972da 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/App-test.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/App-test.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import App from '../App';
 import { mockOrganization } from '../../../../helpers/testMocks';
-import { waitAndUpdate } from '../../../../helpers/testUtils';
 import {
   createGroup,
   deleteGroup,
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembers-test.tsx b/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembers-test.tsx
index 82505385a2c..2e69b46be3d 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembers-test.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembers-test.tsx
@@ -18,26 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import EditMembers from '../EditMembers';
-import { click, waitAndUpdate } from '../../../../helpers/testUtils';
 
-jest.mock('../../../../components/icons-components/SearchIcon');
-jest.mock('../../../../components/icons-components/BulletListIcon');
-
-it('should edit members', async () => {
+it('should edit members', () => {
   const group = { id: 3, name: 'Foo', membersCount: 5 };
   const onEdit = jest.fn();
 
-  const wrapper = mount(<EditMembers group={group} onEdit={onEdit} organization="org" />);
+  const wrapper = shallow(<EditMembers group={group} onEdit={onEdit} organization="org" />);
   expect(wrapper).toMatchSnapshot();
 
   click(wrapper.find('ButtonIcon'));
   expect(wrapper).toMatchSnapshot();
 
-  await waitAndUpdate(wrapper);
-
-  click(wrapper.find('ResetButtonLink'));
+  wrapper.find('EditMembersModal').prop<Function>('onClose')();
   expect(onEdit).toBeCalled();
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembersModal-test.tsx b/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembersModal-test.tsx
index 88209b8e099..e0d134373c4 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembersModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/EditMembersModal-test.tsx
@@ -19,9 +19,9 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import EditMembersModal, { SearchParams } from '../EditMembersModal';
 import SelectList, { Filter } from '../../../../components/SelectList/SelectList';
-import { waitAndUpdate } from '../../../../helpers/testUtils';
 import { getUsersInGroup, addUserToGroup, removeUserFromGroup } from '../../../../api/user_groups';
 
 jest.mock('../../../../api/user_groups', () => ({
@@ -135,7 +135,7 @@ function shallowRender(props: Partial<EditMembersModal['props']> = {}) {
     <EditMembersModal
       group={{ id: 1, name: 'foo', membersCount: 1 }}
       onClose={jest.fn()}
-      organization={'bar'}
+      organization="bar"
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/Form-test.tsx b/server/sonar-web/src/main/js/apps/groups/components/__tests__/Form-test.tsx
index 7ba0fb6887d..feca1dbee75 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/Form-test.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/Form-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { change, submit, click } from 'sonar-ui-common/helpers/testUtils';
 import Form from '../Form';
-import { change, submit, click } from '../../../../helpers/testUtils';
 
 it('should render form', async () => {
   const onClose = jest.fn();
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/Header-test.tsx b/server/sonar-web/src/main/js/apps/groups/components/__tests__/Header-test.tsx
index 3f4c0490eb8..e8b7228d143 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/Header-test.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/Header-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import Header from '../Header';
-import { click } from '../../../../helpers/testUtils';
 
 it('should create new group', () => {
   const onCreate = jest.fn(() => Promise.resolve());
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/ListItem-test.tsx b/server/sonar-web/src/main/js/apps/groups/components/__tests__/ListItem-test.tsx
index e4f35df99c6..e6dc9c48d20 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/ListItem-test.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/ListItem-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import ListItem from '../ListItem';
-import { click } from '../../../../helpers/testUtils';
 
 it('should edit group', () => {
   const group = { id: 3, name: 'Foo', membersCount: 5 };
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap
index 084c8fa46fd..555d1b71305 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap
@@ -1,87 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should edit members 1`] = `
-<EditMembers
-  group={
-    Object {
-      "id": 3,
-      "membersCount": 5,
-      "name": "Foo",
-    }
-  }
-  onEdit={[MockFunction]}
-  organization="org"
->
+<Fragment>
   <ButtonIcon
     className="button-small"
     onClick={[Function]}
   >
-    <Button
-      className="button-small button-icon"
-      onClick={[Function]}
-      stopPropagation={true}
-      style={
-        Object {
-          "color": "#236a97",
-        }
-      }
-    >
-      <button
-        className="button button-small button-icon"
-        onClick={[Function]}
-        style={
-          Object {
-            "color": "#236a97",
-          }
-        }
-        type="button"
-      >
-        <MOCKBulletListIcon />
-      </button>
-    </Button>
+    <BulletListIcon />
   </ButtonIcon>
-</EditMembers>
+</Fragment>
 `;
 
 exports[`should edit members 2`] = `
-<EditMembers
-  group={
-    Object {
-      "id": 3,
-      "membersCount": 5,
-      "name": "Foo",
-    }
-  }
-  onEdit={[MockFunction]}
-  organization="org"
->
+<Fragment>
   <ButtonIcon
     className="button-small"
     onClick={[Function]}
   >
-    <Button
-      className="button-small button-icon"
-      onClick={[Function]}
-      stopPropagation={true}
-      style={
-        Object {
-          "color": "#236a97",
-        }
-      }
-    >
-      <button
-        className="button button-small button-icon"
-        onClick={[Function]}
-        style={
-          Object {
-            "color": "#236a97",
-          }
-        }
-        type="button"
-      >
-        <MOCKBulletListIcon />
-      </button>
-    </Button>
+    <BulletListIcon />
   </ButtonIcon>
   <EditMembersModal
     group={
@@ -93,472 +29,17 @@ exports[`should edit members 2`] = `
     }
     onClose={[Function]}
     organization="org"
-  >
-    <Modal
-      contentLabel="users.update"
-      onRequestClose={[Function]}
-    >
-      <Modal
-        ariaHideApp={true}
-        bodyOpenClassName="ReactModal__Body--open"
-        className="modal"
-        closeTimeoutMS={0}
-        contentLabel="users.update"
-        isOpen={true}
-        onRequestClose={[Function]}
-        overlayClassName="modal-overlay"
-        parentSelector={[Function]}
-        portalClassName="ReactModalPortal"
-        role="dialog"
-        shouldCloseOnEsc={true}
-        shouldCloseOnOverlayClick={true}
-        shouldFocusAfterRender={true}
-        shouldReturnFocusAfterClose={true}
-      >
-        <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 modal-container"
-                  >
-                    <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"
-                          title=""
-                        >
-                          <input
-                            aria-label="search_verb"
-                            autocomplete="off"
-                            class="search-box-input"
-                            maxlength="100"
-                            placeholder="search_verb"
-                            type="search"
-                            value=""
-                          />
-                          
-                        </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>
-          }
-        >
-          <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
-              className="ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay"
-              onClick={[Function]}
-              onMouseDown={[Function]}
-              style={Object {}}
-            >
-              <div
-                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"
-              >
-                <header
-                  className="modal-head"
-                >
-                  <h2>
-                    users.update
-                  </h2>
-                </header>
-                <div
-                  className="modal-body modal-container"
-                >
-                  <DeferredSpinner
-                    loading={true}
-                    timeout={100}
-                  >
-                    <SelectList
-                      elements={Array []}
-                      needReload={false}
-                      onLoadMore={[Function]}
-                      onReload={[Function]}
-                      onSearch={[Function]}
-                      onSelect={[Function]}
-                      onUnselect={[Function]}
-                      renderElement={[Function]}
-                      selectedElements={Array []}
-                    >
-                      <div
-                        className="select-list"
-                      >
-                        <div
-                          className="display-flex-center"
-                        >
-                          <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"
-                          >
-                            <ul
-                              className="radio-toggle spacer-right"
-                            >
-                              <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"
-                              title=""
-                            >
-                              <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}
-                              >
-                                <MOCKSearchIcon
-                                  className="search-box-magnifier"
-                                />
-                              </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>
-                        </SelectListListContainer>
-                      </div>
-                    </SelectList>
-                  </DeferredSpinner>
-                </div>
-                <footer
-                  className="modal-foot"
-                >
-                  <ResetButtonLink
-                    onClick={[Function]}
-                  >
-                    <ButtonLink
-                      onClick={[Function]}
-                      type="reset"
-                    >
-                      <Button
-                        className="button-link"
-                        onClick={[Function]}
-                        type="reset"
-                      >
-                        <button
-                          className="button button-link"
-                          onClick={[Function]}
-                          type="reset"
-                        >
-                          Done
-                        </button>
-                      </Button>
-                    </ButtonLink>
-                  </ResetButtonLink>
-                </footer>
-              </div>
-            </div>
-          </ModalPortal>
-        </Portal>
-      </Modal>
-    </Modal>
-  </EditMembersModal>
-</EditMembers>
+  />
+</Fragment>
 `;
 
 exports[`should edit members 3`] = `
-<EditMembers
-  group={
-    Object {
-      "id": 3,
-      "membersCount": 5,
-      "name": "Foo",
-    }
-  }
-  onEdit={
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  organization="org"
->
+<Fragment>
   <ButtonIcon
     className="button-small"
     onClick={[Function]}
   >
-    <Button
-      className="button-small button-icon"
-      onClick={[Function]}
-      stopPropagation={true}
-      style={
-        Object {
-          "color": "#236a97",
-        }
-      }
-    >
-      <button
-        className="button button-small button-icon"
-        onClick={[Function]}
-        style={
-          Object {
-            "color": "#236a97",
-          }
-        }
-        type="button"
-      >
-        <MOCKBulletListIcon />
-      </button>
-    </Button>
+    <BulletListIcon />
   </ButtonIcon>
-</EditMembers>
+</Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/groups/routes.ts b/server/sonar-web/src/main/js/apps/groups/routes.ts
index 094046e8466..0043ba99cc9 100644
--- a/server/sonar-web/src/main/js/apps/groups/routes.ts
+++ b/server/sonar-web/src/main/js/apps/groups/routes.ts
@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { lazyLoad } from '../../components/lazyLoad';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 
 const routes = [
   {