rework quality profiles modals (#2123)

1 files changed, 31 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js
index cc8a8a9f535..ba11b5a9e5d 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.js
@@ -21,13 +21,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import ProfileInheritanceBox from './ProfileInheritanceBox';
-import ChangeParentView from '../views/ChangeParentView';
+import ChangeParentForm from './ChangeParentForm';
 import { translate } from '../../../helpers/l10n';
 import { getProfileInheritance } from '../../../api/quality-profiles';
 import type { Profile } from '../propTypes';
 
 type Props = {
   canAdmin: boolean,
+  onRequestFail: Object => void,
   organization: ?string,
   profile: Profile,
   profiles: Array<Profile>,
@@ -45,6 +46,7 @@ type ProfileInheritanceDetails = {
 type State = {
   ancestors?: Array<ProfileInheritanceDetails>,
   children?: Array<ProfileInheritanceDetails>,
+  formOpen: boolean,
   loading: boolean,
   profile?: ProfileInheritanceDetails
 };
@@ -53,6 +55,7 @@ export default class ProfileInheritance extends React.PureComponent {
   mounted: boolean;
   props: Props;
   state: State = {
+    formOpen: false,
     loading: true
   };
 
@@ -85,14 +88,23 @@ export default class ProfileInheritance extends React.PureComponent {
     });
   }
 
-  handleChangeParent = (e: SyntheticInputEvent) => {
-    e.preventDefault();
-    new ChangeParentView({ profile: this.props.profile, profiles: this.props.profiles })
-      .on('done', () => this.props.updateProfiles())
-      .render();
+  handleChangeParentClick = (event: Event) => {
+    event.preventDefault();
+    this.setState({ formOpen: true });
+  };
+
+  closeForm = () => {
+    this.setState({ formOpen: false });
+  };
+
+  handleParentChange = () => {
+    this.props.updateProfiles();
+    this.closeForm();
   };
 
   render() {
+    const { profile, profiles } = this.props;
+
     const highlightCurrent =
       !this.state.loading &&
       this.state.ancestors != null &&
@@ -109,7 +121,7 @@ export default class ProfileInheritance extends React.PureComponent {
             {translate('quality_profiles.profile_inheritance')}
           </h2>
           {this.props.canAdmin &&
-            <button className="pull-right js-change-parent" onClick={this.handleChangeParent}>
+            <button className="pull-right js-change-parent" onClick={this.handleChangeParentClick}>
               {translate('quality_profiles.change_parent')}
             </button>}
         </header>
@@ -123,7 +135,7 @@ export default class ProfileInheritance extends React.PureComponent {
                     className="js-inheritance-ancestor"
                     depth={index}
                     key={ancestor.key}
-                    language={this.props.profile.language}
+                    language={profile.language}
                     organization={this.props.organization}
                     profile={ancestor}
                   />
@@ -133,7 +145,7 @@ export default class ProfileInheritance extends React.PureComponent {
                 className={currentClassName}
                 depth={this.state.ancestors ? this.state.ancestors.length : 0}
                 displayLink={false}
-                language={this.props.profile.language}
+                language={profile.language}
                 organization={this.props.organization}
                 profile={this.state.profile}
               />
@@ -144,13 +156,22 @@ export default class ProfileInheritance extends React.PureComponent {
                     className="js-inheritance-child"
                     depth={this.state.ancestors ? this.state.ancestors.length + 1 : 0}
                     key={child.key}
-                    language={this.props.profile.language}
+                    language={profile.language}
                     organization={this.props.organization}
                     profile={child}
                   />
                 ))}
             </tbody>
           </table>}
+
+        {this.state.formOpen &&
+          <ChangeParentForm
+            onChange={this.handleParentChange}
+            onClose={this.closeForm}
+            onRequestFail={this.props.onRequestFail}
+            profile={profile}
+            profiles={profiles.filter(p => p !== profile && p.language === profile.language)}
+          />}
       </div>
     );
   }