🐛 Add a fallback for issue title (#1273)

- In the event of a blank ruleReport.description, fallback to use the
name or a hardcoded string to prevent an app crash

Signed-off-by: ibolton336 <[email protected]>

Author: ibolton336

client/src/app/pages/issues/helpers.ts

@@ -1,5 +1,9 @@
 import { Location, LocationDescriptor } from "history";
-import { AnalysisIssueReport, AnalysisRuleReport } from "@app/api/models";
+import {
+  AnalysisIssue,
+  AnalysisIssueReport,
+  AnalysisRuleReport,
+} from "@app/api/models";
 import {
   FilterCategory,
   FilterType,
@@ -113,11 +117,12 @@ export const getAffectedAppsUrl = ({
     .replace("/:rule/", `/${encodeURIComponent(ruleReport.rule)}/`);
   const prefix = (key: string) =>
     `${TableURLParamKeyPrefix.issuesAffectedApps}:${key}`;
+
   return `${baseUrl}?${trimAndStringifyUrlParams({
     newPrefixedSerializedParams: {
       [prefix("filters")]: serializeFilterUrlParams(toFilterValues).filters,
       [FROM_ISSUES_PARAMS_KEY]: fromIssuesParams,
-      issueTitle: ruleReport.description.split("\n")[0],
+      issueTitle: getIssueTitle(ruleReport),
     },
   })}`;
 };
@@ -195,3 +200,10 @@ export const parseReportLabels = (
   });
   return { sources, targets, otherLabels };
 };
+
+export const getIssueTitle = (
+  issueReport: AnalysisRuleReport | AnalysisIssue | AnalysisIssueReport
+) =>
+  issueReport?.description?.split("\n")[0] ||
+  issueReport?.name?.split("\n")[0] ||
+  "*Unnamed*";

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

@@ -22,6 +22,7 @@ import { useFetchIncidents } from "@app/queries/issues";
 import { IncidentCodeSnipViewer } from "./incident-code-snip-viewer";
 import { FileAllIncidentsTable } from "./file-all-incidents-table";
 import { IssueDescriptionAndLinks } from "../../components/issue-description-and-links";
+import { getIssueTitle } from "../../helpers";
 
 export interface IFileIncidentsDetailModalProps {
   issue: AnalysisIssue;
@@ -58,7 +59,7 @@ export const FileIncidentsDetailModal: React.FC<
     isFetching ||
     (firstFiveIncidents.length > 0 && activeTabIncidentId === undefined);
 
-  const issueTitle = issue.description.split("\n")[0];
+  const issueTitle = getIssueTitle(issue);
 
   return (
     <Modal

client/src/app/pages/issues/issue-detail-drawer/issue-detail-drawer.tsx

@@ -17,6 +17,7 @@ import { IssueAffectedFilesTable } from "./issue-affected-files-table";
 import { useFetchIssue } from "@app/queries/issues";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { StateNoData } from "@app/components/StateNoData";
+import { getIssueTitle } from "../helpers";
 
 export interface IIssueDetailDrawerProps
   extends Pick<IPageDrawerContentProps, "onCloseClick"> {
@@ -61,7 +62,7 @@ export const IssueDetailDrawer: React.FC<IIssueDetailDrawerProps> = ({
               {applicationName}
             </Text>
             <Title headingLevel="h2" size="lg" className={spacing.mtXs}>
-              <Truncate content={issue.description.split("\n")[0]} />
+              <Truncate content={getIssueTitle(issue)} />
             </Title>
           </TextContent>
           <Tabs

client/src/app/pages/issues/issues-table.tsx

@@ -56,6 +56,7 @@ import {
   parseReportLabels,
   getIssuesSingleAppSelectedLocation,
   useSharedAffectedApplicationFilterCategories,
+  getIssueTitle,
 } from "./helpers";
 import { IssueFilterGroups } from "./issues";
 import {
@@ -354,7 +355,7 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
                       {...getTdProps({ columnKey: "description" })}
                       modifier="truncate"
                     >
-                      {report.description.split("\n")[0]}
+                      {getIssueTitle(report)}
                     </Td>
                     <Td width={20} {...getTdProps({ columnKey: "category" })}>
                       {report.category}