From 9e0d06262a0bb9bc262f228688c7989e92fea486 Mon Sep 17 00:00:00 2001
From: Philippe Perrin <philippe.perrin@sonarsource.com>
Date: Fri, 16 Apr 2021 14:48:03 +0200
Subject: [PATCH] SONAR-12082 Fix broken layout on rules page

---
 .../js/apps/coding-rules/components/App.tsx   |  44 ++---
 .../coding-rules/components/BulkChange.tsx    |   1 -
 .../coding-rules/components/PageActions.tsx   |   2 +-
 .../__tests__/__snapshots__/App-test.tsx.snap | 170 ++++++++++--------
 .../__snapshots__/BulkChange-test.tsx.snap    |   1 -
 .../__snapshots__/PageActions-test.tsx.snap   |   6 +-
 6 files changed, 120 insertions(+), 104 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
index aa85dcf6644..4c4cd01d70e 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
@@ -595,27 +595,29 @@ export class App extends React.PureComponent<Props, State> {
               <div className="layout-page-header-panel-inner layout-page-main-header-inner">
                 <div className="layout-page-main-inner">
                   <A11ySkipTarget anchor="rules_main" />
-                  {this.state.openRule ? (
-                    <a
-                      className="js-back display-inline-flex-center link-no-underline"
-                      href="#"
-                      onClick={this.handleBack}>
-                      <BackIcon className="spacer-right" />
-                      {this.state.usingPermalink
-                        ? translate('coding_rules.see_all')
-                        : translate('coding_rules.return_to_list')}
-                    </a>
-                  ) : (
-                    this.renderBulkButton()
-                  )}
-                  {!this.state.usingPermalink && (
-                    <PageActions
-                      loading={this.state.loading}
-                      onReload={this.handleReload}
-                      paging={paging}
-                      selectedIndex={selectedIndex}
-                    />
-                  )}
+                  <div className="display-flex-space-between">
+                    {this.state.openRule ? (
+                      <a
+                        className="js-back display-inline-flex-center link-no-underline"
+                        href="#"
+                        onClick={this.handleBack}>
+                        <BackIcon className="spacer-right" />
+                        {this.state.usingPermalink
+                          ? translate('coding_rules.see_all')
+                          : translate('coding_rules.return_to_list')}
+                      </a>
+                    ) : (
+                      this.renderBulkButton()
+                    )}
+                    {!this.state.usingPermalink && (
+                      <PageActions
+                        loading={this.state.loading}
+                        onReload={this.handleReload}
+                        paging={paging}
+                        selectedIndex={selectedIndex}
+                      />
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx
index d07f5e43566..a9bd55566d3 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx
@@ -100,7 +100,6 @@ export default class BulkChange extends React.PureComponent<Props, State> {
     return (
       <>
         <Dropdown
-          className="pull-left"
           overlayPlacement={PopupPlacement.BottomLeft}
           overlay={
             <ul className="menu">
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx
index 4c4d8b9ed4d..c8b1ce624c0 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx
@@ -33,7 +33,7 @@ export interface PageActionsProps {
 
 export default function PageActions(props: PageActionsProps) {
   return (
-    <div className="display-flex-center display-flex-justify-end">
+    <div className="display-flex-center">
       <PageShortcutsTooltip
         className="big-spacer-right"
         leftAndRightLabel={translate('issues.to_navigate')}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
index fdf6f2d4442..032ad554504 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -155,53 +155,57 @@ exports[`should render correctly: loaded 1`] = `
             <A11ySkipTarget
               anchor="rules_main"
             />
-            <BulkChange
-              languages={
-                Object {
-                  "js": Object {
-                    "key": "js",
-                    "name": "JavaScript",
-                  },
+            <div
+              className="display-flex-space-between"
+            >
+              <BulkChange
+                languages={
+                  Object {
+                    "js": Object {
+                      "key": "js",
+                      "name": "JavaScript",
+                    },
+                  }
                 }
-              }
-              query={
-                Object {
-                  "activation": undefined,
-                  "activationSeverities": Array [],
-                  "availableSince": undefined,
-                  "compareToProfile": undefined,
-                  "cwe": Array [],
-                  "inheritance": undefined,
-                  "languages": Array [],
-                  "owaspTop10": Array [],
-                  "profile": undefined,
-                  "repositories": Array [],
-                  "ruleKey": undefined,
-                  "sansTop25": Array [],
-                  "searchQuery": undefined,
-                  "severities": Array [],
-                  "sonarsourceSecurity": Array [],
-                  "statuses": Array [],
-                  "tags": Array [],
-                  "template": undefined,
-                  "types": Array [],
+                query={
+                  Object {
+                    "activation": undefined,
+                    "activationSeverities": Array [],
+                    "availableSince": undefined,
+                    "compareToProfile": undefined,
+                    "cwe": Array [],
+                    "inheritance": undefined,
+                    "languages": Array [],
+                    "owaspTop10": Array [],
+                    "profile": undefined,
+                    "repositories": Array [],
+                    "ruleKey": undefined,
+                    "sansTop25": Array [],
+                    "searchQuery": undefined,
+                    "severities": Array [],
+                    "sonarsourceSecurity": Array [],
+                    "statuses": Array [],
+                    "tags": Array [],
+                    "template": undefined,
+                    "types": Array [],
+                  }
                 }
-              }
-              referencedProfiles={Object {}}
-              total={0}
-            />
-            <PageActions
-              loading={false}
-              onReload={[Function]}
-              paging={
-                Object {
-                  "pageIndex": 0,
-                  "pageSize": 100,
-                  "total": 0,
+                referencedProfiles={Object {}}
+                total={0}
+              />
+              <PageActions
+                loading={false}
+                onReload={[Function]}
+                paging={
+                  Object {
+                    "pageIndex": 0,
+                    "pageSize": 100,
+                    "total": 0,
+                  }
                 }
-              }
-              selectedIndex={0}
-            />
+                selectedIndex={0}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -315,10 +319,14 @@ exports[`should render correctly: loading 1`] = `
             <A11ySkipTarget
               anchor="rules_main"
             />
-            <PageActions
-              loading={true}
-              onReload={[Function]}
-            />
+            <div
+              className="display-flex-space-between"
+            >
+              <PageActions
+                loading={true}
+                onReload={[Function]}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -447,28 +455,32 @@ exports[`should render correctly: open rule 1`] = `
             <A11ySkipTarget
               anchor="rules_main"
             />
-            <a
-              className="js-back display-inline-flex-center link-no-underline"
-              href="#"
-              onClick={[Function]}
+            <div
+              className="display-flex-space-between"
             >
-              <BackIcon
-                className="spacer-right"
-              />
-              coding_rules.return_to_list
-            </a>
-            <PageActions
-              loading={false}
-              onReload={[Function]}
-              paging={
-                Object {
-                  "pageIndex": 0,
-                  "pageSize": 100,
-                  "total": 0,
+              <a
+                className="js-back display-inline-flex-center link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <BackIcon
+                  className="spacer-right"
+                />
+                coding_rules.return_to_list
+              </a>
+              <PageActions
+                loading={false}
+                onReload={[Function]}
+                paging={
+                  Object {
+                    "pageIndex": 0,
+                    "pageSize": 100,
+                    "total": 0,
+                  }
                 }
-              }
-              selectedIndex={0}
-            />
+                selectedIndex={0}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -531,16 +543,20 @@ exports[`should render correctly: using permalink 1`] = `
             <A11ySkipTarget
               anchor="rules_main"
             />
-            <a
-              className="js-back display-inline-flex-center link-no-underline"
-              href="#"
-              onClick={[Function]}
+            <div
+              className="display-flex-space-between"
             >
-              <BackIcon
-                className="spacer-right"
-              />
-              coding_rules.see_all
-            </a>
+              <a
+                className="js-back display-inline-flex-center link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <BackIcon
+                  className="spacer-right"
+                />
+                coding_rules.see_all
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/BulkChange-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/BulkChange-test.tsx.snap
index 89150cbd13d..45021122b8d 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/BulkChange-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/BulkChange-test.tsx.snap
@@ -63,7 +63,6 @@ exports[`should not a disabled button when edition is not possible 1`] = `
 exports[`should render correctly 1`] = `
 <Fragment>
   <Dropdown
-    className="pull-left"
     overlay={
       <ul
         className="menu"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/PageActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/PageActions-test.tsx.snap
index d31ccfe18f2..b9407f80f4b 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/PageActions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/PageActions-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly: default 1`] = `
 <div
-  className="display-flex-center display-flex-justify-end"
+  className="display-flex-center"
 >
   <PageShortcutsTooltip
     className="big-spacer-right"
@@ -21,7 +21,7 @@ exports[`should render correctly: default 1`] = `
 
 exports[`should render correctly: loading 1`] = `
 <div
-  className="display-flex-center display-flex-justify-end"
+  className="display-flex-center"
 >
   <PageShortcutsTooltip
     className="big-spacer-right"
@@ -40,7 +40,7 @@ exports[`should render correctly: loading 1`] = `
 
 exports[`should render correctly: with paging 1`] = `
 <div
-  className="display-flex-center display-flex-justify-end"
+  className="display-flex-center"
 >
   <PageShortcutsTooltip
     className="big-spacer-right"
-- 
2.39.5