SONAR-9747 Make components and global settings independant from each others in the ui

8 files changed, 67 insertions, 36 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/App.js b/server/sonar-web/src/main/js/apps/settings/components/App.js
index ab5cf8414ff..704d742b4a2 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/App.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/App.js
@@ -20,19 +20,16 @@
 // @flow
 import React from 'react';
 import Helmet from 'react-helmet';
-import { connect } from 'react-redux';
 import PageHeader from './PageHeader';
 import CategoryDefinitionsList from './CategoryDefinitionsList';
 import AllCategoriesList from './AllCategoriesList';
 import WildcardsHelp from './WildcardsHelp';
-import { fetchSettings } from '../store/actions';
-import { getSettingsAppDefaultCategory } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
 import '../styles.css';
 
 /*::
 type Props = {
-  component: { key: string },
+  component?: { key: string },
   defaultCategory: ?string,
   fetchSettings(componentKey: ?string): Promise<*>,
   location: { query: {} }
@@ -45,7 +42,7 @@ type State = {
 };
 */
 
-class App extends React.PureComponent {
+export default class App extends React.PureComponent {
   /*:: props: Props; */
   state /*: State */ = { loaded: false };
 
@@ -55,12 +52,10 @@ class App extends React.PureComponent {
       html.classList.add('dashboard-page');
     }
     const componentKey = this.props.component ? this.props.component.key : null;
-    this.props.fetchSettings(componentKey).then(() => {
-      this.setState({ loaded: true });
-    });
+    this.props.fetchSettings(componentKey).then(() => this.setState({ loaded: true }));
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps /*: Props*/) {
     if (prevProps.component !== this.props.component) {
       const componentKey = this.props.component ? this.props.component.key : null;
       this.props.fetchSettings(componentKey);
@@ -105,9 +100,3 @@ class App extends React.PureComponent {
     );
   }
 }
-
-const mapStateToProps = state => ({
-  defaultCategory: getSettingsAppDefaultCategory(state)
-});
-
-export default connect(mapStateToProps, { fetchSettings })(App);
diff --git a/server/sonar-web/src/main/js/apps/settings/components/AppContainer.js b/server/sonar-web/src/main/js/apps/settings/components/AppContainer.js
index 00a3751b00a..8e80ca6cb6f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/AppContainer.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/AppContainer.js
@@ -19,12 +19,16 @@
  */
 import { connect } from 'react-redux';
 import App from './App';
-import { getComponent } from '../../../store/rootReducer';
+import { fetchSettings } from '../store/actions';
+import { getComponent, getSettingsAppDefaultCategory } from '../../../store/rootReducer';
 
 const mapStateToProps = (state, ownProps) => ({
   component: ownProps.location.query.id
     ? getComponent(state, ownProps.location.query.id)
-    : undefined
+    : undefined,
+  defaultCategory: getSettingsAppDefaultCategory(state)
 });
 
-export default connect(mapStateToProps)(App);
+const mapdispatchToProps = { fetchSettings };
+
+export default connect(mapStateToProps, mapdispatchToProps)(App);
diff --git a/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js b/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js
index 81a992dc894..bc5217855fb 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js
@@ -28,7 +28,11 @@ function CategoryDefinitionsList(props) {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  settings: getSettingsAppSettingsForCategory(state, ownProps.category)
+  settings: getSettingsAppSettingsForCategory(
+    state,
+    ownProps.category,
+    ownProps.component ? ownProps.component.key : null
+  )
 });
 
 export default connect(mapStateToProps)(CategoryDefinitionsList);
diff --git a/server/sonar-web/src/main/js/apps/settings/components/Definition.js b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
index cc30120bb5b..d064997d362 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/Definition.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
@@ -101,7 +101,8 @@ class Definition extends React.PureComponent {
   }
 
   handleCancel() {
-    this.props.cancelChange(this.props.setting.definition.key);
+    const componentKey = this.props.component ? this.props.component.key : null;
+    this.props.cancelChange(this.props.setting.definition.key, componentKey);
     this.props.passValidation(this.props.setting.definition.key);
   }
 
diff --git a/server/sonar-web/src/main/js/apps/settings/store/actions.js b/server/sonar-web/src/main/js/apps/settings/store/actions.js
index fab49983ff7..cbdd7eb63ba 100644
--- a/server/sonar-web/src/main/js/apps/settings/store/actions.js
+++ b/server/sonar-web/src/main/js/apps/settings/store/actions.js
@@ -43,7 +43,7 @@ export const fetchSettings = componentKey => dispatch => {
       return getValues(keys, componentKey);
     })
     .then(settings => {
-      dispatch(receiveValues(settings));
+      dispatch(receiveValues(settings, componentKey));
       dispatch(closeAllGlobalMessages());
     })
     .catch(e => parseError(e).then(message => dispatch(addGlobalErrorMessage(message))));
@@ -65,7 +65,7 @@ export const saveValue = (key, componentKey) => (dispatch, getState) => {
   return setSettingValue(definition, value, componentKey)
     .then(() => getValues(key, componentKey))
     .then(values => {
-      dispatch(receiveValues(values));
+      dispatch(receiveValues(values, componentKey));
       dispatch(cancelChange(key));
       dispatch(passValidation(key));
       dispatch(stopLoading(key));
@@ -84,9 +84,9 @@ export const resetValue = (key, componentKey) => dispatch => {
     .then(() => getValues(key, componentKey))
     .then(values => {
       if (values.length > 0) {
-        dispatch(receiveValues(values));
+        dispatch(receiveValues(values, componentKey));
       } else {
-        dispatch(receiveValues([{ key }]));
+        dispatch(receiveValues([{ key }], componentKey));
       }
       dispatch(passValidation(key));
       dispatch(stopLoading(key));
diff --git a/server/sonar-web/src/main/js/apps/settings/store/rootReducer.js b/server/sonar-web/src/main/js/apps/settings/store/rootReducer.js
index d483892a9aa..0f22d81cf13 100644
--- a/server/sonar-web/src/main/js/apps/settings/store/rootReducer.js
+++ b/server/sonar-web/src/main/js/apps/settings/store/rootReducer.js
@@ -24,8 +24,9 @@ import values, * as fromValues from './values/reducer';
 import settingsPage, * as fromSettingsPage from './settingsPage/reducer';
 import licenses, * as fromLicenses from './licenses/reducer';
 import globalMessages, * as fromGlobalMessages from '../../../store/globalMessages/duck';
-/*:: import type { State as GlobalMessagesState } from '../../../store/globalMessages/duck'; */
 import encryptionPage from './encryptionPage/reducer';
+/*:: import type { State as GlobalMessagesState } from '../../../store/globalMessages/duck'; */
+/*:: import type { State as ValuesState } from './values/reducer'; */
 
 /*::
 type State = {
@@ -34,7 +35,7 @@ type State = {
   globalMessages: GlobalMessagesState,
   licenses: {},
   settingsPage: {},
-  values: {}
+  values: ValuesState
 };
 */
 
@@ -58,12 +59,16 @@ export const getAllCategories = (state /*: State */) =>
 export const getDefaultCategory = (state /*: State */) =>
   fromDefinitions.getDefaultCategory(state.definitions);
 
-export const getValue = (state /*: State */, key /*: string */) =>
-  fromValues.getValue(state.values, key);
+export const getValue = (state /*: State */, key /*: string */, componentKey /*: ?string */) =>
+  fromValues.getValue(state.values, key, componentKey);
 
-export const getSettingsForCategory = (state /*: State */, category /*: string */) =>
+export const getSettingsForCategory = (
+  state /*: State */,
+  category /*: string */,
+  componentKey /*: ?string */
+) =>
   fromDefinitions.getDefinitionsForCategory(state.definitions, category).map(definition => ({
-    ...getValue(state, definition.key),
+    ...getValue(state, definition.key, componentKey),
     definition
   }));
 
diff --git a/server/sonar-web/src/main/js/apps/settings/store/values/actions.js b/server/sonar-web/src/main/js/apps/settings/store/values/actions.js
index e9087a0b6d5..8ccc1d5ec1e 100644
--- a/server/sonar-web/src/main/js/apps/settings/store/values/actions.js
+++ b/server/sonar-web/src/main/js/apps/settings/store/values/actions.js
@@ -27,7 +27,8 @@ export const RECEIVE_VALUES /*: string */ = 'RECEIVE_VALUES';
  * @param {Array} settings
  * @returns {Object}
  */
-export const receiveValues = (settings /*: SettingValue[] */) => ({
+export const receiveValues = (settings /*: SettingValue[] */, componentKey /*: ?string */) => ({
   type: RECEIVE_VALUES,
-  settings
+  settings,
+  componentKey
 });
diff --git a/server/sonar-web/src/main/js/apps/settings/store/values/reducer.js b/server/sonar-web/src/main/js/apps/settings/store/values/reducer.js
index d8e42984fd7..e08ace6f2bb 100644
--- a/server/sonar-web/src/main/js/apps/settings/store/values/reducer.js
+++ b/server/sonar-web/src/main/js/apps/settings/store/values/reducer.js
@@ -18,14 +18,35 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 // @flow
+import { combineReducers } from 'redux';
 import { keyBy } from 'lodash';
 import { RECEIVE_VALUES } from './actions';
 
 /*::
-type State = { [key: string]: {} };
+type SettingsState = { [key: string]: {} };
+type ComponentsState = { [key: string]: SettingsState };
+export type State = { components: ComponentsState, global: SettingsState };
 */
 
-const reducer = (state /*: State */ = {}, action /*: Object */) => {
+const componentsSettings = (state /*: ComponentsState */ = {}, action /*: Object */) => {
+  if (!action.componentKey) {
+    return state;
+  }
+
+  const key = action.componentKey;
+  if (action.type === RECEIVE_VALUES) {
+    const settingsByKey = keyBy(action.settings, 'key');
+    return { ...state, [key]: { ...(state[key] || {}), ...settingsByKey } };
+  }
+
+  return state;
+};
+
+const globalSettings = (state /*: SettingsState */ = {}, action /*: Object */) => {
+  if (action.componentKey) {
+    return state;
+  }
+
   if (action.type === RECEIVE_VALUES) {
     const settingsByKey = keyBy(action.settings, 'key');
     return { ...state, ...settingsByKey };
@@ -42,6 +63,12 @@ const reducer = (state /*: State */ = {}, action /*: Object */) => {
   return state;
 };
 
-export default reducer;
+export default combineReducers({ components: componentsSettings, global: globalSettings });
 
-export const getValue = (state /*: State */, key /*: string */) => state[key];
+export const getValue = (state /*: State */, key /*: string */, componentKey /*: ?string */) => {
+  let settings = state.global;
+  if (componentKey) {
+    settings = state.components[componentKey];
+  }
+  return settings && settings[key];
+};