From aef58efe8a2faa39174fe5410b0f8a216faa571a Mon Sep 17 00:00:00 2001
From: Ambroise C <ambroise.christea@sonarsource.com>
Date: Wed, 31 Jan 2024 18:17:34 +0100
Subject: [PATCH] SONAR-21541 Fix borders in QP changelog list

---
 .../design-system/src/components/Table.tsx     |  9 +++++++--
 .../quality-profiles/changelog/Changelog.tsx   | 18 ++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/server/sonar-web/design-system/src/components/Table.tsx b/server/sonar-web/design-system/src/components/Table.tsx
index da6b5d5eb36..44c09e399fe 100644
--- a/server/sonar-web/design-system/src/components/Table.tsx
+++ b/server/sonar-web/design-system/src/components/Table.tsx
@@ -187,9 +187,14 @@ export function CellComponent(props: CellComponentProps) {
   return <CellComponentStyled as={containerType} {...props} />;
 }
 
-export function ContentCell({ children, className, ...props }: CellComponentProps) {
+export function ContentCell({
+  children,
+  cellClassName,
+  className,
+  ...props
+}: CellComponentProps & { cellClassName?: string }) {
   return (
-    <CellComponent {...props}>
+    <CellComponent className={cellClassName} {...props}>
       <div
         className={classNames('sw-text-left sw-justify-start sw-flex sw-items-center', className)}
       >
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
index 6b2444379df..437f10bbcbe 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
@@ -85,7 +85,8 @@ export default function Changelog(props: Props) {
     return (
       <TableRowInteractive key={index}>
         <ContentCell
-          className={classNames('sw-align-top', { 'sw-border-transparent': !shouldDisplayDate })}
+          cellClassName={classNames({ 'sw-border-transparent': !shouldDisplayDate })}
+          className={classNames('sw-align-top')}
         >
           {shouldDisplayDate && (
             <div>
@@ -110,17 +111,15 @@ export default function Changelog(props: Props) {
         </ContentCell>
 
         <ContentCell
-          className={classNames('sw-whitespace-nowrap sw-align-top sw-max-w-[120px]', {
-            'sw-border-transparent': !shouldDisplayDate,
-          })}
+          cellClassName={classNames({ 'sw-border-transparent': !shouldDisplayDate })}
+          className={classNames('sw-whitespace-nowrap sw-align-top sw-max-w-[120px]')}
         >
           {shouldDisplayAuthor && (event.authorName ? event.authorName : <Note>System</Note>)}
         </ContentCell>
 
         <ContentCell
-          className={classNames('sw-whitespace-nowrap sw-align-top', {
-            'sw-border-transparent': !shouldDisplayDate,
-          })}
+          cellClassName={classNames({ 'sw-border-transparent': !shouldDisplayDate })}
+          className={classNames('sw-whitespace-nowrap sw-align-top')}
         >
           {shouldDisplayAction &&
             intl.formatMessage({ id: `quality_profiles.changelog.${event.action}` })}
@@ -143,9 +142,8 @@ export default function Changelog(props: Props) {
         </CellComponent>
 
         <ContentCell
-          className={classNames('sw-align-top sw-max-w-[400px]', {
-            'sw-border-transparent': !shouldDisplayDate,
-          })}
+          cellClassName={classNames({ 'sw-border-transparent': !shouldDisplayDate })}
+          className={classNames('sw-align-top sw-max-w-[400px]')}
         >
           {event.params && <ChangesList changes={event.params} />}
         </ContentCell>
-- 
2.39.5