Fix SONAR-6691

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
index 408c5afa85def4207a70367e0b0e4f4186cdcaf0..dde79b6c7c0a8a2959cba7a112ed23abd69fb328 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
@@ -104,6 +104,7 @@ export default class ChangeProjectsForm extends React.PureComponent<Props> {
 
         <div className="modal-body" id="profile-projects">
           <SelectList
+            allowBulkSelection={true}
             elements={this.state.projects.map(project => project.key)}
             labelAll={translate('quality_gates.projects.all')}
             labelSelected={translate('quality_gates.projects.with')}

diff --git a/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx b/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx
index c57fc9a7029f8259ff60cf9b63ec84c8f92f730b..f1a0b2f7a48f341d92b045492865595458fb883d 100644 (file)
--- a/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx
+++ b/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx
@@ -31,6 +31,7 @@ export enum Filter {
 }
 
 interface Props {
+  allowBulkSelection?: boolean;
   elements: string[];
   disabledElements?: string[];
   labelSelected?: string;
@@ -114,6 +115,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
           />
         </div>
         <SelectListListContainer
+          allowBulkSelection={this.props.allowBulkSelection}
           disabledElements={this.props.disabledElements || []}
           elements={this.props.elements}
           filter={this.getFilter()}

diff --git a/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx b/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx
index ac54e39d417aebd15cbe1609a0cc4758e2b3debb..124b0814b58c60867e6529ed4b53ed2e24fd47fa 100644 (file)
--- a/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx
+++ b/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx
@@ -20,8 +20,12 @@
 import * as React from 'react';
 import { Filter } from './SelectList';
 import SelectListListElement from './SelectListListElement';
+import Checkbox from '../controls/Checkbox';
+import DeferredSpinner from '../common/DeferredSpinner';
+import { translate } from '../../helpers/l10n';
 
 interface Props {
+  allowBulkSelection?: boolean;
   elements: string[];
   disabledElements: string[];
   filter: Filter;
@@ -31,7 +35,28 @@ interface Props {
   selectedElements: string[];
 }
 
-export default class SelectListListContainer extends React.PureComponent<Props> {
+interface State {
+  loading: boolean;
+}
+
+export default class SelectListListContainer extends React.PureComponent<Props, State> {
+  mounted = false;
+  state: State = { loading: false };
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  stopLoading = () => {
+    if (this.mounted) {
+      this.setState({ loading: false });
+    }
+  };
+
   isDisabled = (element: string): boolean => {
     return this.props.disabledElements.includes(element);
   };
@@ -40,8 +65,42 @@ export default class SelectListListContainer extends React.PureComponent<Props>
     return this.props.selectedElements.includes(element);
   };
 
+  handleBulkChange = (checked: boolean) => {
+    this.setState({ loading: true });
+    if (checked) {
+      Promise.all(this.props.elements.map(element => this.props.onSelect(element)))
+        .then(this.stopLoading)
+        .catch(this.stopLoading);
+    } else {
+      Promise.all(this.props.selectedElements.map(element => this.props.onUnselect(element)))
+        .then(this.stopLoading)
+        .catch(this.stopLoading);
+    }
+  };
+
+  renderBulkSelector() {
+    const { elements, selectedElements } = this.props;
+    return (
+      <>
+        <li>
+          <Checkbox
+            checked={selectedElements.length > 0}
+            disabled={this.state.loading}
+            onCheck={this.handleBulkChange}
+            thirdState={selectedElements.length > 0 && elements.length !== selectedElements.length}>
+            <span className="big-spacer-left">
+              {translate('update_key.bulk_update')}
+              <DeferredSpinner className="spacer-left" loading={this.state.loading} timeout={10} />
+            </span>
+          </Checkbox>
+        </li>
+        <li className="divider" />
+      </>
+    );
+  }
+
   render() {
-    const { elements, filter } = this.props;
+    const { allowBulkSelection, elements, filter } = this.props;
     const filteredElements = elements.filter(element => {
       if (filter === Filter.All) {
         return true;
@@ -53,6 +112,10 @@ export default class SelectListListContainer extends React.PureComponent<Props>
     return (
       <div className="select-list-list-container spacer-top">
         <ul className="menu">
+          {allowBulkSelection &&
+            elements.length > 0 &&
+            filter === Filter.All &&
+            this.renderBulkSelector()}
           {filteredElements.map(element => (
             <SelectListListElement
               disabled={this.isDisabled(element)}