From b3c230fda4a6cd92c72f79c29e89f8e3d277b08b Mon Sep 17 00:00:00 2001
From: Eswaraiahsapram <esapram@redhat.com>
Date: Tue, 9 Jul 2024 12:06:18 +0530
Subject: [PATCH] fix(argocd): fix argocd commit message visibility

---
 .../DeploymentLifecycleCard.tsx               | 25 +++++++++++++++++--
 .../DeploymentLifecycleDrawer.tsx             | 20 ++++++++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleCard.tsx b/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleCard.tsx
index e09222d680..a8b3d34713 100644
--- a/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleCard.tsx
+++ b/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleCard.tsx
@@ -33,6 +33,11 @@ const useCardStyles = makeStyles<Theme>(theme =>
       marginRight: theme.spacing(2.5),
       maxWidth: '300px',
     },
+    commitMessage: {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+    },
   }),
 );
 
@@ -147,9 +152,25 @@ const DeploymentLifecycleCard: React.FC<DeploymentLifecycleCardProps> = ({
                     color="primary"
                     label={latestRevision?.revision.slice(0, 7)}
                   />
-                  <Typography variant="body2" color="textSecondary">
+                  <Typography
+                    variant="body2"
+                    color="textSecondary"
+                    className={classes.commitMessage}
+                  >
                     {revisionsMap?.[latestRevision?.revision] ? (
-                      <>{revisionsMap?.[latestRevision?.revision]?.message}</>
+                      <Tooltip
+                        data-testid={`${latestRevision?.revision?.slice(
+                          0,
+                          5,
+                        )}-commit-message`}
+                        title={
+                          revisionsMap?.[latestRevision?.revision]?.message
+                        }
+                      >
+                        <span>
+                          {revisionsMap?.[latestRevision?.revision]?.message}
+                        </span>
+                      </Tooltip>
                     ) : (
                       <Skeleton />
                     )}
diff --git a/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleDrawer.tsx b/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleDrawer.tsx
index 1ac137e8d9..895f12d029 100644
--- a/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleDrawer.tsx
+++ b/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleDrawer.tsx
@@ -51,6 +51,9 @@ const useDrawerStyles = makeStyles<Theme>(theme =>
       justifyContent: 'space-between',
       alignItems: 'baseline',
     },
+    commitMessage: {
+      wordBreak: 'break-word',
+    },
   }),
 );
 const DeploymentLifecycleDrawer: React.FC<DeploymentLifecycleDrawerProps> = ({
@@ -167,7 +170,10 @@ const DeploymentLifecycleDrawer: React.FC<DeploymentLifecycleDrawerProps> = ({
                     }}
                     label={latestRevision?.revision.slice(0, 7)}
                   />
-                  <Typography color="textSecondary">
+                  <Typography
+                    color="textSecondary"
+                    className={classes.commitMessage}
+                  >
                     {revisionsMap?.[latestRevision?.revision] ? (
                       <>
                         {revisionsMap?.[latestRevision?.revision]?.message} by{' '}
@@ -193,7 +199,11 @@ const DeploymentLifecycleDrawer: React.FC<DeploymentLifecycleDrawerProps> = ({
                     Deployment
                   </Typography>
 
-                  <Typography variant="body2" color="textSecondary">
+                  <Typography
+                    variant="body2"
+                    color="textSecondary"
+                    className={classes.commitMessage}
+                  >
                     Image{' '}
                     <Link
                       href={`https://${app?.status?.summary?.images?.[0]}`}
@@ -257,7 +267,11 @@ const DeploymentLifecycleDrawer: React.FC<DeploymentLifecycleDrawerProps> = ({
                             Deployment
                           </Typography>
 
-                          <Typography variant="body2" color="textSecondary">
+                          <Typography
+                            variant="body2"
+                            color="textSecondary"
+                            className={classes.commitMessage}
+                          >
                             {revisionsMap[dep.revision]?.message}{' '}
                             <Link
                               aria-disabled={!!commitUrl}