step towards a single-entry-point js app (#1362)

5 files changed, 59 insertions, 79 deletions

diff --git a/server/sonar-web/src/main/js/apps/permissions/project/app.js b/server/sonar-web/src/main/js/apps/permissions/project/app.js
deleted file mode 100644
index 1646df7ef24..00000000000
--- a/server/sonar-web/src/main/js/apps/permissions/project/app.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2016 SonarSource SA
- * mailto:contact 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 React from 'react';
-import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import App from './components/App';
-import configureStore from '../../../components/store/configureStore';
-import rootReducer from '../shared/store/rootReducer';
-
-window.sonarqube.appStarted.then(options => {
-  const el = document.querySelector(options.el);
-  const store = configureStore(rootReducer);
-  render((
-      <Provider store={store}>
-        <App project={options.component}/>
-      </Provider>
-  ), el);
-});
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/AllHoldersList.js b/server/sonar-web/src/main/js/apps/permissions/project/components/AllHoldersList.js
index 6dcbe728084..63b041b2fcf 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/AllHoldersList.js
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/AllHoldersList.js
@@ -22,24 +22,24 @@ import { connect } from 'react-redux';
 import SearchForm from '../../shared/components/SearchForm';
 import HoldersList from '../../shared/components/HoldersList';
 import {
-    loadHolders,
-    grantToUser,
-    revokeFromUser,
-    grantToGroup,
-    revokeFromGroup,
-    updateQuery,
-    updateFilter,
-    selectPermission
+  loadHolders,
+  grantToUser,
+  revokeFromUser,
+  grantToGroup,
+  revokeFromGroup,
+  updateQuery,
+  updateFilter,
+  selectPermission
 } from '../store/actions';
-import {
-    getUsers,
-    getGroups,
-    getQuery,
-    getFilter,
-    getSelectedPermission
-} from '../../shared/store/rootReducer';
 import { translate } from '../../../../helpers/l10n';
 import { PERMISSIONS_ORDER_BY_QUALIFIER } from '../constants';
+import {
+  getPermissionsAppUsers,
+  getPermissionsAppGroups,
+  getPermissionsAppQuery,
+  getPermissionsAppFilter,
+  getPermissionsAppSelectedPermission
+} from '../../../../app/store/rootReducer';
 
 class AllHoldersList extends React.Component {
   static propTypes = {
@@ -128,11 +128,11 @@ class AllHoldersList extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  users: getUsers(state),
-  groups: getGroups(state),
-  query: getQuery(state),
-  filter: getFilter(state),
-  selectedPermission: getSelectedPermission(state)
+  users: getPermissionsAppUsers(state),
+  groups: getPermissionsAppGroups(state),
+  query: getPermissionsAppQuery(state),
+  filter: getPermissionsAppFilter(state),
+  selectedPermission: getPermissionsAppSelectedPermission(state)
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/App.js b/server/sonar-web/src/main/js/apps/permissions/project/components/App.js
index d8bc447fa08..ba2b4e44e2e 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/App.js
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/App.js
@@ -27,15 +27,19 @@ import '../../styles.css';
 
 export default class App extends React.Component {
   static propTypes = {
-    project: React.PropTypes.object.isRequired
+    component: React.PropTypes.object
   };
 
   render () {
+    if (!this.props.component) {
+      return null;
+    }
+
     return (
         <div className="page page-limited">
-          <PageHeader project={this.props.project}/>
+          <PageHeader project={this.props.component}/>
           <PageError/>
-          <AllHoldersList project={this.props.project}/>
+          <AllHoldersList project={this.props.component}/>
         </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.js b/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.js
index db60031625d..14fcf947ee9 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.js
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.js
@@ -22,7 +22,7 @@ import { connect } from 'react-redux';
 import { translate } from '../../../../helpers/l10n';
 import ApplyTemplateView from '../views/ApplyTemplateView';
 import { loadHolders } from '../store/actions';
-import { isLoading } from '../../shared/store/rootReducer';
+import { isPermissionsAppLoading } from '../../../../app/store/rootReducer';
 
 class PageHeader extends React.Component {
   static propTypes = {
@@ -76,7 +76,7 @@ class PageHeader extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  loading: isLoading(state)
+  loading: isPermissionsAppLoading(state)
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/store/actions.js b/server/sonar-web/src/main/js/apps/permissions/project/store/actions.js
index 5011dc075ad..b705876a6a2 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/store/actions.js
+++ b/server/sonar-web/src/main/js/apps/permissions/project/store/actions.js
@@ -19,19 +19,30 @@
  */
 import * as api from '../../../../api/permissions';
 import { parseError } from '../../../code/utils';
-import { raiseError } from '../../shared/store/actions';
 import {
-    getQuery,
-    getFilter,
-    getSelectedPermission
-} from '../../shared/store/rootReducer';
+  raiseError,
+  REQUEST_HOLDERS,
+  RECEIVE_HOLDERS_SUCCESS,
+  UPDATE_QUERY,
+  UPDATE_FILTER,
+  SELECT_PERMISSION,
+  GRANT_PERMISSION_TO_USER,
+  REVOKE_PERMISSION_TO_USER,
+  GRANT_PERMISSION_TO_GROUP,
+  REVOKE_PERMISSION_FROM_GROUP
+} from '../../shared/store/actions';
+import {
+  getPermissionsAppQuery,
+  getPermissionsAppFilter,
+  getPermissionsAppSelectedPermission
+} from '../../../../app/store/rootReducer';
 
 export const loadHolders = projectKey => (dispatch, getState) => {
-  const query = getQuery(getState());
-  const filter = getFilter(getState());
-  const selectedPermission = getSelectedPermission(getState());
+  const query = getPermissionsAppQuery(getState());
+  const filter = getPermissionsAppFilter(getState());
+  const selectedPermission = getPermissionsAppSelectedPermission(getState());
 
-  dispatch({ type: 'REQUEST_HOLDERS', query });
+  dispatch({ type: REQUEST_HOLDERS, query });
 
   const requests = [];
 
@@ -51,7 +62,7 @@ export const loadHolders = projectKey => (dispatch, getState) => {
 
   return Promise.all(requests).then(responses => (
       dispatch({
-        type: 'RECEIVE_HOLDERS_SUCCESS',
+        type: RECEIVE_HOLDERS_SUCCESS,
         users: responses[0],
         groups: responses[1],
         query
@@ -62,30 +73,30 @@ export const loadHolders = projectKey => (dispatch, getState) => {
 };
 
 export const updateQuery = (projectKey, query = '') => dispatch => {
-  dispatch({ type: 'UPDATE_QUERY', query });
+  dispatch({ type: UPDATE_QUERY, query });
   if (query.length === 0 || query.length > 2) {
     dispatch(loadHolders(projectKey));
   }
 };
 
 export const updateFilter = (projectKey, filter) => dispatch => {
-  dispatch({ type: 'UPDATE_FILTER', filter });
+  dispatch({ type: UPDATE_FILTER, filter });
   dispatch(loadHolders(projectKey));
 };
 
 export const selectPermission = (projectKey, permission) => (dispatch, getState) => {
-  const selectedPermission = getSelectedPermission(getState());
+  const selectedPermission = getPermissionsAppSelectedPermission(getState());
   if (selectedPermission !== permission) {
-    dispatch({ type: 'SELECT_PERMISSION', permission });
+    dispatch({ type: SELECT_PERMISSION, permission });
   } else {
-    dispatch({ type: 'SELECT_PERMISSION', permission: null });
+    dispatch({ type: SELECT_PERMISSION, permission: null });
   }
   dispatch(loadHolders(projectKey));
 };
 
 export const grantToUser = (projectKey, login, permission) => dispatch => {
   api.grantPermissionToUser(projectKey, login, permission).then(() => {
-    dispatch({ type: 'GRANT_PERMISSION_TO_USER', login, permission });
+    dispatch({ type: GRANT_PERMISSION_TO_USER, login, permission });
   }).catch(e => {
     return parseError(e).then(message => dispatch(raiseError(message)));
   });
@@ -93,7 +104,7 @@ export const grantToUser = (projectKey, login, permission) => dispatch => {
 
 export const revokeFromUser = (projectKey, login, permission) => dispatch => {
   api.revokePermissionFromUser(projectKey, login, permission).then(() => {
-    dispatch({ type: 'REVOKE_PERMISSION_TO_USER', login, permission });
+    dispatch({ type: REVOKE_PERMISSION_TO_USER, login, permission });
   }).catch(e => {
     return parseError(e).then(message => dispatch(raiseError(message)));
   });
@@ -102,7 +113,7 @@ export const revokeFromUser = (projectKey, login, permission) => dispatch => {
 export const grantToGroup = (projectKey, groupName, permission) => dispatch => {
   api.grantPermissionToGroup(projectKey, groupName, permission).then(() => {
     dispatch({
-      type: 'GRANT_PERMISSION_TO_GROUP',
+      type: GRANT_PERMISSION_TO_GROUP,
       groupName,
       permission
     });
@@ -114,7 +125,7 @@ export const grantToGroup = (projectKey, groupName, permission) => dispatch => {
 export const revokeFromGroup = (projectKey, groupName, permission) => dispatch => {
   api.revokePermissionFromGroup(projectKey, groupName, permission).then(() => {
     dispatch({
-      type: 'REVOKE_PERMISSION_FROM_GROUP',
+      type: REVOKE_PERMISSION_FROM_GROUP,
       groupName,
       permission
     });