1387-notification-table-cannot-see-error

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>
   );
 }

src/components/JobsHistory/JobsHistoryDetails.tsx

@@ -2,12 +2,6 @@ import { Modal } from "../Modal";
 import { JobHistory } from "./JobsHistoryTable";
 import clsx from "clsx";
 
-type JobsHistoryDetailsProps = {
-  job?: JobHistory;
-  isModalOpen: boolean;
-  setIsModalOpen: (value: boolean) => void;
-};
-
 interface CellProps {
   children: React.ReactNode;
   className?: string;
@@ -25,6 +19,12 @@ function Cell({ children, className }: CellProps) {
   );
 }
 
+type JobsHistoryDetailsProps = {
+  job?: Pick<JobHistory, "details" | "name">;
+  isModalOpen: boolean;
+  setIsModalOpen: (value: boolean) => void;
+};
+
 export function JobsHistoryDetails({
   job,
   isModalOpen,
@@ -56,7 +56,10 @@ export function JobsHistoryDetails({
             </thead>
             <tbody>
               {job.details?.errors?.map((error, index) => (
-                <tr className="last:border-b-0 border-b cursor-pointer">
+                <tr
+                  key={error}
+                  className="last:border-b-0 border-b cursor-pointer"
+                >
                   <Cell className="leading-5 text-gray-900 font-medium">
                     {error}
                   </Cell>

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.job_name ?? cell.row.original.title
+        }}
+      />
+    </>
+  );
 }
 
 export type Notification = {
   id: string;
+  title: string;
   events: string[];
   template: string;
   filter?: string;
@@ -118,6 +137,10 @@ export type Notification = {
   person?: User;
   team?: Team;
   job_status?: JobHistoryStatus;
+  job_name?: string;
+  job_details?: {
+    errors?: string[];
+  };
 };
 
 export type NewNotification = Omit<
@@ -156,17 +179,15 @@ export const notificationsTableColumns: ColumnDef<Notification, any>[] = [
 
           {custom_services &&
             custom_services.length > 0 &&
-            custom_services.map(
-              ({ connection, name, filters, properties, url }) => (
-                <div className="flex flex-row gap-2 items-center">
-                  <Icon
-                    className="inline-block h-6"
-                    name={connection ?? name}
-                  />
-                  {name}
-                </div>
-              )
-            )}
+            custom_services.map(({ connection, name }) => (
+              <div
+                className="flex flex-row gap-2 items-center"
+                key={connection ?? name}
+              >
+                <Icon className="inline-block h-6" name={connection ?? name} />
+                {name}
+              </div>
+            ))}
         </div>
       );
     }
@@ -182,7 +203,7 @@ export const notificationsTableColumns: ColumnDef<Notification, any>[] = [
       return (
         <div className="w-full flex flex-col">
           {value.map((event) => (
-            <div className="block p-1">
+            <div className="block p-1" key={event}>
               <Badge text={event} className="w-auto text-sm" />
             </div>
           ))}
@@ -217,7 +238,7 @@ export const notificationsTableColumns: ColumnDef<Notification, any>[] = [
   {
     header: "Status",
     id: "job_status",
-    cell: JobStatusColumn
+    cell: StatusColumn
   },
   {
     header: "Created At",