🐛 Show first non-empty line in incident message overflow tab (#1841) (#…

…1851)

Resolves https://issues.redhat.com/browse/MTA-1959

---------
Backport-of: #1841
Signed-off-by: Ian Bolton <[email protected]>
Signed-off-by: Cherry Picker <[email protected]>
Co-authored-by: Scott Dickerson <[email protected]>

client/src/app/pages/issues/issue-detail-drawer/file-incidents-detail-modal/file-all-incidents-table.css

@@ -0,0 +1,4 @@
+.empty-cell {
+  color: #6a6e73;
+  font-style: italic;
+}

client/src/app/pages/issues/issue-detail-drawer/file-incidents-detail-modal/file-all-incidents-table.tsx

@@ -1,3 +1,4 @@
+import "./file-all-incidents-table.css";
 import * as React from "react";
 import { Table, Thead, Tr, Th, Tbody, Td } from "@patternfly/react-table";
 import { useSelectionState } from "@migtools/lib-ui";
@@ -122,9 +123,7 @@ export const FileAllIncidentsTable: React.FC<
                     colSpan={2}
                     {...getTdProps({ columnKey: "message" })}
                   >
-                    <ReactMarkdown components={markdownPFComponents}>
-                      {`${incident.message.split("\n")[0]} ...`}
-                    </ReactMarkdown>
+                    {messageDisplayComponent(incident.message)}
                   </Td>
                 </TableRowContentWithControls>
               </Tr>
@@ -142,3 +141,19 @@ export const FileAllIncidentsTable: React.FC<
     </>
   );
 };
+
+const getFirstNonEmptyLine = (message: string): string | null => {
+  const lines = message.split("\n");
+  const nonEmptyLine = lines.find((line) => line.trim() !== "");
+  return nonEmptyLine || null;
+};
+
+const messageDisplayComponent = (message: string) => {
+  const content = getFirstNonEmptyLine(message);
+  if (content === null) {
+    return <div className="empty-cell">No content available.</div>;
+  }
+  return (
+    <ReactMarkdown components={markdownPFComponents}>{content}</ReactMarkdown>
+  );
+};