implement event column content correctly

Author: kantord

src/components/AlertsTable.tsx

@@ -16,52 +16,25 @@ import {
 import { Switch } from "@stacklok/ui-kit";
 import { AlertConversation } from "@/api/generated";
 import { Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
-import { getMaliciousPackage } from "@/lib/utils";
+import { sanitizeQuestionPrompt, parsingPromptText } from "@/lib/utils";
 import { Search } from "lucide-react";
 import { useAlertSearch } from "@/hooks/useAlertSearch";
 import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useFilteredAlerts } from "@/hooks/useAlertsData";
 import { useClientSidePagination } from "@/hooks/useClientSidePagination";
 
-const wrapObjectOutput = (input: AlertConversation["trigger_string"]) => {
-  const data = getMaliciousPackage(input);
-  if (data === null) return "N/A";
-  if (typeof data === "string") {
-    return (
-      <div className="p-4 line-clamp-1 text-clip">
-        {data.split("\n")[0] ?? ""}
-      </div>
-    );
-  }
-  if (!data.type || !data.name) return "N/A";
-
-  return (
-    <div className="max-h-40 w-fit overflow-y-auto whitespace-pre-wrap p-2">
-      <label className="font-medium">Package:</label>
-      &nbsp;
-      <a
-        href={`https://www.insight.stacklok.com/report/${data.type}/${data.name}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-brand-500 hover:underline"
-      >
-        {data.type}/{data.name}
-      </a>
-      {data.status && (
-        <>
-          <br />
-          <label className="font-medium">Status:</label> {data.status}
-        </>
-      )}
-      {data.description && (
-        <>
-          <br />
-          <label className="font-medium">Description:</label> {data.description}
-        </>
-      )}
-    </div>
+const getTitle = (alert: AlertConversation) => {
+  const prompt = alert.conversation;
+  const title = parsingPromptText(
+    sanitizeQuestionPrompt({
+      question: prompt.question_answers?.[0]?.question.message ?? "",
+      answer: prompt.question_answers?.[0]?.answer?.message ?? "",
+    }),
+    prompt.conversation_timestamp,
   );
+
+  return title;
 };
 
 export function AlertsTable() {
@@ -184,9 +157,7 @@ export function AlertsTable() {
                     })}
                   </Cell>
                   <Cell className="truncate">{alert.trigger_type}</Cell>
-                  <Cell className="overflow-auto whitespace-nowrap max-w-80">
-                    {wrapObjectOutput(alert.trigger_string)}
-                  </Cell>
+                  <Cell className="truncate">{getTitle(alert)}</Cell>
                 </Row>
               ))}
           </TableBody>

src/routes/__tests__/route-dashboard.test.tsx

@@ -188,19 +188,15 @@ describe("Dashboard", () => {
         /codegate-context-retriever/i,
       ),
     ).toBeVisible();
+  });
 
-    expect(screen.getByText(/package:/i)).toBeVisible();
-    expect(
-      screen.getByRole("link", {
-        name: /pypi\/invokehttp/i,
-      }),
-    ).toHaveAttribute(
-      "href",
-      "https://www.insight.stacklok.com/report/pypi/invokehttp",
-    );
-    expect(
-      screen.getByText(/malicious python http for humans\./i),
-    ).toBeVisible();
+  it("renders event column", async () => {
+    mockAlertsWithMaliciousPkg();
+    render(<RouteDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/are there malicious/i)).toBeVisible();
+    });
   });
 
   it("should filter by malicious pkg", async () => {
@@ -228,16 +224,6 @@ describe("Dashboard", () => {
       expect(screen.getByTestId(/alerts-count/i)).toHaveTextContent("1"),
     );
 
-    expect(screen.getByText(/package:/i)).toBeVisible();
-    expect(
-      screen.getByRole("link", {
-        name: /pypi\/invokehttp/i,
-      }),
-    ).toBeVisible();
-    expect(
-      screen.getByText(/malicious python http for humans\./i),
-    ).toBeVisible();
-
     userEvent.click(
       screen.getByRole("switch", {
         name: /malicious packages/i,