SONAR-1330 add widget to manage quality profile permissions

1 files changed, 50 insertions, 43 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx
index 53a6333126a..1e71f1bd612 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx
@@ -119,58 +119,65 @@ export default class ProfileInheritance extends React.PureComponent<Props, State
     const extendsBuiltIn = ancestors != null && ancestors.some(profile => profile.isBuiltIn);
 
     return (
-      <div className="quality-profile-inheritance">
-        <header className="big-spacer-bottom clearfix">
-          <h2 className="pull-left">{translate('quality_profiles.profile_inheritance')}</h2>
-          {this.props.canAdmin &&
-          !this.props.profile.isBuiltIn && (
+      <div className="boxed-group quality-profile-inheritance">
+        {this.props.canAdmin &&
+        !this.props.profile.isBuiltIn && (
+          <div className="boxed-group-actions">
             <button className="pull-right js-change-parent" onClick={this.handleChangeParentClick}>
               {translate('quality_profiles.change_parent')}
             </button>
-          )}
+          </div>
+        )}
+
+        <header className="boxed-group-header">
+          <h2>{translate('quality_profiles.profile_inheritance')}</h2>
         </header>
 
-        {!this.state.loading && (
-          <table className="data zebra">
-            <tbody>
-              {ancestors != null &&
-                ancestors.map((ancestor, index) => (
+        <div className="boxed-group-inner">
+          {this.state.loading ? (
+            <i className="spinner" />
+          ) : (
+            <table className="data zebra">
+              <tbody>
+                {ancestors != null &&
+                  ancestors.map((ancestor, index) => (
+                    <ProfileInheritanceBox
+                      className="js-inheritance-ancestor"
+                      depth={index}
+                      key={ancestor.key}
+                      language={profile.language}
+                      organization={this.props.organization}
+                      profile={ancestor}
+                    />
+                  ))}
+
+                {this.state.profile != null && (
                   <ProfileInheritanceBox
-                    className="js-inheritance-ancestor"
-                    depth={index}
-                    key={ancestor.key}
+                    className={currentClassName}
+                    depth={ancestors ? ancestors.length : 0}
+                    displayLink={false}
+                    extendsBuiltIn={extendsBuiltIn}
                     language={profile.language}
                     organization={this.props.organization}
-                    profile={ancestor}
+                    profile={this.state.profile}
                   />
-                ))}
-
-              {this.state.profile != null && (
-                <ProfileInheritanceBox
-                  className={currentClassName}
-                  depth={ancestors ? ancestors.length : 0}
-                  displayLink={false}
-                  extendsBuiltIn={extendsBuiltIn}
-                  language={profile.language}
-                  organization={this.props.organization}
-                  profile={this.state.profile}
-                />
-              )}
-
-              {this.state.children != null &&
-                this.state.children.map(child => (
-                  <ProfileInheritanceBox
-                    className="js-inheritance-child"
-                    depth={ancestors ? ancestors.length + 1 : 0}
-                    key={child.key}
-                    language={profile.language}
-                    organization={this.props.organization}
-                    profile={child}
-                  />
-                ))}
-            </tbody>
-          </table>
-        )}
+                )}
+
+                {this.state.children != null &&
+                  this.state.children.map(child => (
+                    <ProfileInheritanceBox
+                      className="js-inheritance-child"
+                      depth={ancestors ? ancestors.length + 1 : 0}
+                      key={child.key}
+                      language={profile.language}
+                      organization={this.props.organization}
+                      profile={child}
+                    />
+                  ))}
+              </tbody>
+            </table>
+          )}
+        </div>
 
         {this.state.formOpen && (
           <ChangeParentForm