fix: show error message on click notification job status

Closes #1387
flanksource · Nov 1, 2023 · bb77b2b · bb77b2b
1 parent 203c024
commit bb77b2b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/src/components/JobsHistory/JobHistoryStatusColumn.tsx b/src/components/JobsHistory/JobHistoryStatusColumn.tsx
@@ -4,9 +4,10 @@ import { FaDotCircle } from "react-icons/fa";
 
 type Props = {
   status?: JobHistoryStatus;
+  onClick?: () => void;
 };
 
-export default function JobHistoryStatusColumn({ status }: Props) {
+export default function JobHistoryStatusColumn({ status, onClick }: Props) {
   const className = useMemo(() => {
     if (status) {
       return classNameMaps.get(status);
@@ -18,9 +19,20 @@ export default function JobHistoryStatusColumn({ status }: Props) {
   }
 
   return (
-    <>
-      <FaDotCircle className={`inline ${className}`} />
-      <span className="ml-1">{status}</span>
-    </>
+    <div
+      className="flex flex-row gap-2"
+      role="button"
+      onClick={(e) => {
+        if (!onClick) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      <FaDotCircle className={`${className}`} />
+      <span className="">{status}</span>
+    </div>
   );
 }
diff --git a/src/components/Notifications/notificationsTableColumns.tsx b/src/components/Notifications/notificationsTableColumns.tsx
@@ -1,10 +1,12 @@
 import { CellContext, ColumnDef } from "@tanstack/react-table";
+import { useState } from "react";
 import { Team, User } from "../../api/types/users";
 import { DateCell } from "../../ui/table";
 import { Avatar } from "../Avatar";
 import { Badge } from "../Badge";
 import { Icon } from "../Icon";
 import JobHistoryStatusColumn from "../JobsHistory/JobHistoryStatusColumn";
+import { JobsHistoryDetails } from "../JobsHistory/JobsHistoryDetails";
 import { JobHistoryStatus } from "../JobsHistory/JobsHistoryTable";
 
 export const notificationEvents = [
@@ -90,14 +92,31 @@ export const notificationEvents = [
   }
 ].sort((a, b) => a.label.localeCompare(b.label));
 
-export function JobStatusColumn({ cell }: CellContext<Notification, any>) {
+export function StatusColumn({ cell }: CellContext<Notification, any>) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const value = cell.row.original.job_status;
 
-  return <JobHistoryStatusColumn status={value} />;
+  return (
+    <>
+      <JobHistoryStatusColumn
+        status={value}
+        onClick={() => setIsModalOpen(true)}
+      />
+      <JobsHistoryDetails
+        isModalOpen={isModalOpen}
+        setIsModalOpen={setIsModalOpen}
+        job={{
+          details: cell.row.original.job_details,
+          name: cell.row.original.title
+        }}
+      />
+    </>
+  );
 }
 
 export type Notification = {
   id: string;
+  title: string;
   events: string[];
   template: string;
   filter?: string;
@@ -118,6 +137,9 @@ export type Notification = {
   person?: User;
   team?: Team;
   job_status?: JobHistoryStatus;
+  job_details?: {
+    errors?: string[];
+  };
 };
 
 export type NewNotification = Omit<
@@ -215,7 +237,7 @@ export const notificationsTableColumns: ColumnDef<Notification, any>[] = [
   {
     header: "Status",
     id: "job_status",
-    cell: JobStatusColumn
+    cell: StatusColumn
   },
   {
     header: "Created At",