SONAR-9581 Use fixed width layout on Quality Gates page

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.js b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.js
index 60957d01b68d2aefb4529dfdfb9ebc8af861c939..8fd787e30305e417c13fa7116f2adc4aab11e8f0 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.js
@@ -102,18 +102,11 @@ export default class Details extends Component {
     const { onAddCondition, onDeleteCondition, onSaveCondition } = this.props;
 
     if (!qualityGate) {
-      return (
-        <div className="search-navigator-workspace">
-          <div className="search-navigator-workspace-header" style={{ top: 30 }}>
-            <h2 className="search-navigator-header-component">&nbsp;</h2>
-          </div>
-          <div className="search-navigator-workspace-details" />
-        </div>
-      );
+      return null;
     }
 
     return (
-      <div className="search-navigator-workspace">
+      <div className="layout-page-main">
         <Helmet title={qualityGate.name} />
         <DetailsHeader
           qualityGate={qualityGate}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js
index a2cfd55fb015c8f3eb0dfc7849adda8049673335..3613be4e567441586e394cceaa7f203d4246d2fa 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.js
@@ -33,7 +33,7 @@ export default class DetailsContent extends Component {
       : translate('quality_gates.projects_for_default');
 
     return (
-      <div ref="container" className="search-navigator-workspace-details">
+      <div className="layout-page-main-inner">
         <Conditions
           qualityGate={gate}
           conditions={conditions}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js
index e7252e1d9be2a23489857932660da95519dcb791..4d518e83238b48a93c4f86375a1a12802ba3864c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js
@@ -49,27 +49,33 @@ export default function DetailsHeader({
   }
 
   return (
-    <div className="search-navigator-workspace-header" style={{ top: 30 }}>
-      <h2 className="search-navigator-header-component">
-        {qualityGate.name}
-      </h2>
-      {edit &&
-        <div className="search-navigator-header-actions">
-          <div className="button-group">
-            <button id="quality-gate-rename" onClick={handleRenameClick}>
-              {translate('rename')}
-            </button>
-            <button id="quality-gate-copy" onClick={handleCopyClick}>
-              {translate('copy')}
-            </button>
-            <button id="quality-gate-toggle-default" onClick={handleSetAsDefaultClick}>
-              {qualityGate.isDefault ? translate('unset_as_default') : translate('set_as_default')}
-            </button>
-            <button id="quality-gate-delete" className="button-red" onClick={handleDeleteClick}>
-              {translate('delete')}
-            </button>
-          </div>
-        </div>}
+    <div className="layout-page-header-panel layout-page-main-header issues-main-header">
+      <div className="layout-page-header-panel-inner layout-page-main-header-inner">
+        <div className="layout-page-main-inner">
+          <h2 className="pull-left">
+            {qualityGate.name}
+          </h2>
+          {edit &&
+            <div className="pull-right">
+              <div className="button-group">
+                <button id="quality-gate-rename" onClick={handleRenameClick}>
+                  {translate('rename')}
+                </button>
+                <button id="quality-gate-copy" onClick={handleCopyClick}>
+                  {translate('copy')}
+                </button>
+                <button id="quality-gate-toggle-default" onClick={handleSetAsDefaultClick}>
+                  {qualityGate.isDefault
+                    ? translate('unset_as_default')
+                    : translate('set_as_default')}
+                </button>
+                <button id="quality-gate-delete" className="button-red" onClick={handleDeleteClick}>
+                  {translate('delete')}
+                </button>
+              </div>
+            </div>}
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Intro.js b/server/sonar-web/src/main/js/apps/quality-gates/components/Intro.js
index e7ccb6c49f3201012c5ed3ca6080682d4a6786d8..03b2c9ef28b5180daa5acf8f82db748445a96842 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Intro.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Intro.js
@@ -22,14 +22,16 @@ import { translate } from '../../../helpers/l10n';
 
 export default function Intro() {
   return (
-    <div className="search-navigator-workspace">
-      <div className="search-navigator-intro markdown">
-        <p>
-          {translate('quality_gates.intro.1')}
-        </p>
-        <p>
-          {translate('quality_gates.intro.2')}
-        </p>
+    <div className="layout-page-main">
+      <div className="layout-page-main-inner">
+        <div className="search-navigator-intro markdown">
+          <p>
+            {translate('quality_gates.intro.1')}
+          </p>
+          <p>
+            {translate('quality_gates.intro.2')}
+          </p>
+        </div>
       </div>
     </div>
   );

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.js b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.js
index e7717e0a40f68c34d0e370f74a3373685ac9c8c6..6c4b912b8dfb6db94bef286d64c05de0842aef34 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.js
@@ -28,7 +28,7 @@ export default function ListHeader({ canEdit, onAdd }) {
   }
 
   return (
-    <div>
+    <header className="page-header">
       <h1 className="page-title">
         {translate('quality_gates.page')}
       </h1>
@@ -40,6 +40,6 @@ export default function ListHeader({ canEdit, onAdd }) {
             </button>
           </div>
         </div>}
-    </div>
+    </header>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js
index 575a9f212e7de49d3b46785fd25fb49e957d5f3c..ff9d95d7bd7db5029082f8dfe26fc874bd2c834e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.js
@@ -56,15 +56,17 @@ export default class QualityGatesApp extends Component {
     const { children, qualityGates, edit } = this.props;
     const defaultTitle = translate('quality_gates.page');
     return (
-      <div className="search-navigator sticky search-navigator-extended-view">
+      <div className="layout-page">
         <Helmet defaultTitle={defaultTitle} titleTemplate={'%s - ' + defaultTitle} />
 
-        <div className="search-navigator-side search-navigator-side-light" style={{ top: 30 }}>
-          <div className="search-navigator-filters">
-            <ListHeader canEdit={edit} onAdd={this.handleAdd.bind(this)} />
-          </div>
-          <div className="quality-gates-results panel">
-            {qualityGates && <List qualityGates={qualityGates} />}
+        <div className="layout-page-side-outer">
+          <div className="layout-page-side" style={{ top: 30 }}>
+            <div className="layout-page-side-inner">
+              <div className="layout-page-filters">
+                <ListHeader canEdit={edit} onAdd={this.handleAdd.bind(this)} />
+                {qualityGates && <List qualityGates={qualityGates} />}
+              </div>
+            </div>
           </div>
         </div>
 

diff --git a/tests/src/test/resources/qualityGate/QualityGateUiTest/should_display_quality_gates_page.html b/tests/src/test/resources/qualityGate/QualityGateUiTest/should_display_quality_gates_page.html
index b0975df675d6309c0599f32f3e0486772fc49890..71a49dc9940a1c4124dace75ee3650e9946eb5fb 100644 (file)
--- a/tests/src/test/resources/qualityGate/QualityGateUiTest/should_display_quality_gates_page.html
+++ b/tests/src/test/resources/qualityGate/QualityGateUiTest/should_display_quality_gates_page.html
@@ -40,12 +40,12 @@
 </tr>
 <tr>
        <td>waitForElementPresent</td>
-       <td>css=.quality-gates-results a</td>
+       <td>css=a.list-group-item</td>
        <td></td>
 </tr>
 <tr>
        <td>click</td>
-       <td>css=.quality-gates-results a</td>
+       <td>css=a.list-group-item</td>
        <td></td>
 </tr>
 <tr>