From ddf2308f12399b4f0823e0f9f1d6d16870506052 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Tue, 16 Jan 2024 13:24:43 +0100
Subject: [PATCH] SONAR-21394 Fix column alignment on rule details page

---
 .../src/main/js/api/mocks/data/ids.ts         |  1 +
 .../main/js/api/mocks/data/qualityProfiles.ts |  9 +++-
 .../src/main/js/api/mocks/data/rules.ts       |  2 +
 .../components/RuleDetailsProfiles.tsx        | 47 ++++++++++++-------
 4 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/server/sonar-web/src/main/js/api/mocks/data/ids.ts b/server/sonar-web/src/main/js/api/mocks/data/ids.ts
index cd52cfb80ad..53e23bf638e 100644
--- a/server/sonar-web/src/main/js/api/mocks/data/ids.ts
+++ b/server/sonar-web/src/main/js/api/mocks/data/ids.ts
@@ -57,6 +57,7 @@ export const QP_2 = 'p2';
 export const QP_3 = 'p3';
 export const QP_4 = 'p4';
 export const QP_5 = 'p5';
+export const QP_6 = 'p6';
 
 // Issues.
 export const ISSUE_0 = 'issue0';
diff --git a/server/sonar-web/src/main/js/api/mocks/data/qualityProfiles.ts b/server/sonar-web/src/main/js/api/mocks/data/qualityProfiles.ts
index 45bd063dffe..48c31a14b94 100644
--- a/server/sonar-web/src/main/js/api/mocks/data/qualityProfiles.ts
+++ b/server/sonar-web/src/main/js/api/mocks/data/qualityProfiles.ts
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { mockQualityProfile } from '../../../helpers/testMocks';
-import { QP_1, QP_2, QP_3, QP_4, QP_5 } from './ids';
+import { QP_1, QP_2, QP_3, QP_4, QP_5, QP_6 } from './ids';
 
 export function mockQualityProfilesList() {
   return [
@@ -46,5 +46,12 @@ export function mockQualityProfilesList() {
       parentKey: QP_4,
       parentName: 'QP FooBarBaz',
     }),
+    mockQualityProfile({
+      key: QP_6,
+      isBuiltIn: true,
+      name: 'QP Qux',
+      language: 'java',
+      languageName: 'Java',
+    }),
   ];
 }
diff --git a/server/sonar-web/src/main/js/api/mocks/data/rules.ts b/server/sonar-web/src/main/js/api/mocks/data/rules.ts
index 316f21bd1e5..0d20ca629ff 100644
--- a/server/sonar-web/src/main/js/api/mocks/data/rules.ts
+++ b/server/sonar-web/src/main/js/api/mocks/data/rules.ts
@@ -31,6 +31,7 @@ import {
   QP_2,
   QP_4,
   QP_5,
+  QP_6,
   RULE_1,
   RULE_10,
   RULE_11,
@@ -263,6 +264,7 @@ export function mockRulesActivationsInQP() {
       mockRuleActivation({ qProfile: QP_1 }),
       mockRuleActivation({ qProfile: QP_4 }),
       mockRuleActivation({ qProfile: QP_5, inherit: 'INHERITED' }),
+      mockRuleActivation({ qProfile: QP_6 }),
     ],
     [RULE_7]: [mockRuleActivation({ qProfile: QP_2 })],
     [RULE_8]: [mockRuleActivation({ qProfile: QP_2 })],
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
index b7d33863925..6738761cea0 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
 import {
   ActionCell,
@@ -112,16 +113,16 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
               <ConfirmButton
                 confirmButtonText={translate('yes')}
                 confirmData={profile.key}
+                isDestructive
                 modalBody={translateWithParameters(
                   'coding_rules.revert_to_parent_definition.confirm',
                   profile.parentName,
                 )}
-                isDestructive
                 modalHeader={translate('coding_rules.revert_to_parent_definition')}
                 onConfirm={handleRevert}
               >
                 {({ onClick }) => (
-                  <DangerButtonSecondary className="sw-ml-2" onClick={onClick}>
+                  <DangerButtonSecondary className="sw-ml-2 sw-whitespace-nowrap" onClick={onClick}>
                     {translate('coding_rules.revert_to_parent_definition')}
                   </DangerButtonSecondary>
                 )}
@@ -138,7 +139,7 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
               >
                 {({ onClick }) => (
                   <DangerButtonSecondary
-                    className="sw-ml-2"
+                    className="sw-ml-2 sw-whitespace-nowrap"
                     aria-label={translateWithParameters(
                       'coding_rules.deactivate_in_quality_profile_x',
                       profile.name,
@@ -167,13 +168,15 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
 
     const inheritedProfileSection = profile.parentName
       ? (activation.inherit === 'OVERRIDES' || activation.inherit === 'INHERITED') && (
-          <Note as="div" className="sw-flex sw-items-center sw-mt-2">
+          <Note as="div" className="sw-flex sw-items-center sw-w-full">
             <InheritanceIcon
               fill={activation.inherit === 'OVERRIDES' ? 'destructiveIconFocus' : 'currentColor'}
             />
+
             <DiscreetLink
-              className="sw-ml-1"
               aria-label={`${translate('quality_profiles.parent')} ${profile.parentName}`}
+              className="sw-ml-1 sw-truncate"
+              title={profile.parentName}
               to={getQualityProfileUrl(profile.parentName, profile.language)}
             >
               {profile.parentName}
@@ -184,19 +187,24 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
 
     return (
       <TableRowInteractive key={profile.key}>
-        <ContentCell className="coding-rules-detail-quality-profile-name">
-          <div className="sw-flex sw-flex-col">
-            <div>
-              <Link
-                aria-label={profile.name}
-                to={getQualityProfileUrl(profile.name, profile.language)}
-              >
-                {profile.name}
-              </Link>
-              {profile.isBuiltIn && <BuiltInQualityProfileBadge className="sw-ml-2" />}
-            </div>
-            {inheritedProfileSection}
+        <ContentCell className="sw-flex sw-flex-col sw-gap-2 sw-w-64">
+          <div
+            className="sw-truncate sw-w-full"
+            title={`${profile.name}${
+              profile.isBuiltIn ? ` (${translate('quality_profiles.built_in')})` : ''
+            }`}
+          >
+            <Link
+              aria-label={profile.name}
+              to={getQualityProfileUrl(profile.name, profile.language)}
+            >
+              {profile.name}
+            </Link>
+
+            {profile.isBuiltIn && <BuiltInQualityProfileBadge className="sw-ml-2" />}
           </div>
+
+          {inheritedProfileSection}
         </ContentCell>
 
         {!ruleDetails.templateKey && (
@@ -208,13 +216,17 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
               return (
                 <StyledParameter className="sw-my-4" key={param.key}>
                   <span className="key">{param.key}</span>
+
                   <span className="sep sw-mr-1">: </span>
+
                   <span className="value" title={param.value}>
                     {param.value}
                   </span>
+
                   {parentActivation && param.value !== originalValue && (
                     <div className="sw-flex sw-ml-4">
                       {translate('coding_rules.original')}
+
                       <span className="value sw-ml-1" title={originalValue}>
                         {originalValue}
                       </span>
@@ -225,6 +237,7 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
             })}
           </CellComponent>
         )}
+
         {renderRowActions(activation, profile)}
       </TableRowInteractive>
     );
-- 
2.39.5