From bf11cb498b91153d984d3a96ef8cc5d741482021 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Wed, 19 Jul 2017 16:01:54 +0200
Subject: [PATCH] SONAR-9581 Use fixed width layout on Quality Gates page

---
 .../apps/quality-gates/components/Details.js  | 11 +----
 .../components/DetailsContent.js              |  2 +-
 .../quality-gates/components/DetailsHeader.js | 48 +++++++++++--------
 .../js/apps/quality-gates/components/Intro.js | 18 +++----
 .../quality-gates/components/ListHeader.js    |  4 +-
 .../components/QualityGatesApp.js             | 16 ++++---
 .../should_display_quality_gates_page.html    |  4 +-
 7 files changed, 53 insertions(+), 50 deletions(-)

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 60957d01b68..8fd787e3030 100644
--- 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 a2cfd55fb01..3613be4e567 100644
--- 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 e7252e1d9be..4d518e83238 100644
--- 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 e7ccb6c49f3..03b2c9ef28b 100644
--- 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 e7717e0a40f..6c4b912b8df 100644
--- 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 575a9f212e7..ff9d95d7bd7 100644
--- 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 b0975df675d..71a49dc9940 100644
--- 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>
-- 
2.39.5