fix(argocd): fix argocd commit message visibility (janus-idp#1874)

kim-tsao · Nov 13, 2024 · 7492a68 · 7492a68
1 parent 74d5f33
commit 7492a68
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git 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
@@ -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}