Bug 1925596: Text overflows Card boundary; Add Commit msg to details

frontend/packages/gitops-plugin/locales/en/gitops-plugin.json

@@ -1,5 +1,5 @@
 {
-  "{{id}} by {{author}}": "{{id}} by {{author}}",
+  "by {{author}}": "by {{author}}",
   "Commit details not available": "Commit details not available",
   "Cluster URL not available": "Cluster URL not available",
   "Environments": "Environments",

frontend/packages/gitops-plugin/src/components/details/CommitDetails.scss

@@ -0,0 +1,9 @@
+.odc-gitops-commit {
+    padding-top: 3px;
+    padding-right: 0px;
+
+    &__item {
+        font-size: 12px;
+        width: 100%;
+    }
+}

frontend/packages/gitops-plugin/src/components/details/CommitDetails.tsx

@@ -10,6 +10,8 @@ import { ImageStreamImportsModel } from '@console/internal/models';
 import { LoadingInline, Timestamp } from '@console/internal/components/utils';
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { CommitData } from '../utils/gitops-types';
+import { Label, Split, SplitItem } from '@patternfly/react-core';
+import './CommitDetails.scss';
 
 interface CommitDetailsProps {
   imageName: string;
@@ -45,7 +47,7 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
     let ignore = false;
 
     const getCommitData = async () => {
-      let lastCommitData: CommitData = { author: '', timestamp: '', id: '' };
+      let lastCommitData: CommitData = { author: '', timestamp: '', id: '', msg: '', ref: '' };
       let imageStreamImport;
       try {
         imageStreamImport = importImage
@@ -61,6 +63,8 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
           author: imageLabels?.['io.openshift.build.commit.author'],
           timestamp: imageLabels?.['io.openshift.build.commit.date'],
           id: imageLabels?.['io.openshift.build.commit.id'],
+          msg: imageLabels?.['io.openshift.build.commit.message'],
+          ref: imageLabels?.['io.openshift.build.commit.ref'],
         };
       }
       setCommitData(lastCommitData);
@@ -80,11 +84,34 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
     <>
       {commitData.id ? (
         <>
-          <Timestamp timestamp={commitData.timestamp} />
-          {t('gitops-plugin~{{id}} by {{author}}', {
-            id: commitData.id,
-            author: commitData.author,
-          })}
+          <Split className="odc-gitops-commit">
+            <SplitItem isFilled>
+              <Label className="odc-gitops-commit__item" isTruncated>
+                <Timestamp timestamp={commitData.timestamp} />
+              </Label>
+            </SplitItem>
+          </Split>
+          <Split className="odc-gitops-commit">
+            <SplitItem isFilled>
+              <Label className="odc-gitops-commit__item" isTruncated>
+                {commitData.id}
+              </Label>
+            </SplitItem>
+          </Split>
+          <Split className="odc-gitops-commit">
+            <SplitItem isFilled>
+              <Label className="odc-gitops-commit__item" isTruncated>
+                {commitData.msg}
+              </Label>
+            </SplitItem>
+          </Split>
+          <Split className="odc-gitops-commit">
+            <SplitItem isFilled>
+              <Label className="odc-gitops-commit__item" isTruncated>
+                {t('gitops-plugin~by {{author}}', { author: commitData.author })}
+              </Label>
+            </SplitItem>
+          </Split>
         </>
       ) : (
         <span>{t('gitops-plugin~Commit details not available')}</span>

frontend/packages/gitops-plugin/src/components/details/GitOpsServiceDetailsSection.scss

@@ -6,18 +6,27 @@
   &__details {
     font-size: 12px;
     color: var(--pf-global--palette--black-600);
+    padding-top: 20px;
+    padding-left: 0px;
   }
   &__pod {
     width: 80px;
-    padding: 10px 13px 10px 0px;
+  }
+  &__image {
+    width: 100%;
+    font-size: 12px;
+    .pf-c-label__text {
+      max-width: 27ch;
+    }
   }
   &__pr {
-    padding-top: 20px;
+    padding-left: 10px;
   }
   &__url {
     display: inline-flex;
     align-items: center;
     font-size: 12px;
+    padding-top: 10px;
   }
   article {
     border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);

frontend/packages/gitops-plugin/src/components/details/GitOpsServiceDetailsSection.tsx

@@ -36,7 +36,7 @@ const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> =
                   )}
                 </CardTitle>
                 <CardBody>
-                  <Label className="co-nowrap" style={{ fontSize: '12px' }} color="cyan">
+                  <Label className="co-nowrap odc-gitops-service__image" color="cyan" isTruncated>
                     {service.image || <div>{t('gitops-plugin~Image not available')}</div>}
                   </Label>
                   <Split className="odc-gitops-service__details">

frontend/packages/gitops-plugin/src/components/utils/gitops-types.ts

@@ -56,4 +56,6 @@ export interface CommitData {
   author: string;
   timestamp: string;
   id: string;
+  msg: string;
+  ref: string;
 }