feat: add playbook approval feature on the UI

Fixes #2304

src/api/services/playbooks.ts

@@ -192,3 +192,10 @@ export async function getPlaybookRuns({
   );
   return res;
 }
+
+export async function approvePlaybookRun(id: string) {
+  const res = await PlaybookAPI.post<{
+    message: string;
+  }>(`/run/approve/${id}`);
+  return res.data;
+}

src/components/Playbooks/Runs/Actions/PlaybookRunsActions.tsx

@@ -20,9 +20,13 @@ import ShowPlaybookRunsParams from "./ShowParamaters/ShowPlaybookRunsParams";
 
 type PlaybookRunActionsProps = {
   data: PlaybookRunWithActions;
+  refetch?: () => void;
 };
 
-export default function PlaybookRunsActions({ data }: PlaybookRunActionsProps) {
+export default function PlaybookRunsActions({
+  data,
+  refetch = () => {}
+}: PlaybookRunActionsProps) {
   const [selectedAction, setSelectedAction] = useState<
     PlaybookRunAction | undefined
   >(() => {
@@ -69,7 +73,15 @@ export default function PlaybookRunsActions({ data }: PlaybookRunActionsProps) {
 
           <VerticalDescription
             label="Status"
-            value={<PlaybookStatusDescription status={data.status} />}
+            value={
+              <PlaybookStatusDescription
+                status={data.status}
+                playbookTitle={data.playbooks?.title ?? data.playbooks?.name!}
+                showApproveButton
+                playbookRunId={data.id}
+                refetch={refetch}
+              />
+            }
           />
           <VerticalDescription
             label="Started"

src/components/Playbooks/Runs/ApprovePlaybookRunModal.tsx

@@ -0,0 +1,48 @@
+import { approvePlaybookRun } from "@flanksource-ui/api/services/playbooks";
+import { toastError } from "@flanksource-ui/components/Toast/toast";
+import { ConfirmationPromptDialog } from "@flanksource-ui/ui/AlertDialog/ConfirmationPromptDialog";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+type ApprovePlaybookRunModalProps = {
+  onClose: () => void;
+  open: boolean;
+  playbookTitle: string;
+  playbookRunId: string;
+  refetch?: () => void;
+};
+
+export default function ApprovePlaybookRunModal({
+  onClose,
+  open,
+  playbookTitle,
+  playbookRunId,
+  refetch = () => {}
+}: ApprovePlaybookRunModalProps) {
+  const { mutate: approve, isLoading } = useMutation({
+    mutationFn: (id: string) => {
+      return approvePlaybookRun(id);
+    },
+    onError: (error: AxiosError) => {
+      console.error("Failed to approve playbook run", error);
+      toastError(`Failed to approve playbook run: ${error.message}`);
+    },
+    onSuccess: () => {
+      onClose();
+      refetch();
+    }
+  });
+
+  return (
+    <ConfirmationPromptDialog
+      title={`Approve Playbook ${playbookTitle} Run`}
+      description={<p>Are you sure you want to approve this playbook run?</p>}
+      onConfirm={() => approve(playbookRunId)}
+      open={open}
+      onClose={onClose}
+      isOpen={open}
+      yesLabel={isLoading ? "Approving..." : "Approve"}
+      closeLabel="Cancel"
+    />
+  );
+}

src/components/Playbooks/Runs/PlaybookRunsList.tsx

@@ -65,9 +65,19 @@ const playbookRunsTableColumns: ColumnDef<PlaybookRun>[] = [
   {
     header: "Status",
     accessorKey: "status",
-    cell: ({ getValue }) => {
+    cell: ({ getValue, row }) => {
       const status = getValue<PlaybookRunStatus>();
-      return <PlaybookStatusDescription status={status} />;
+      const playbookRunId = row.original.id;
+      const title =
+        row.original.playbooks?.title ?? row.original.playbooks?.name!;
+
+      return (
+        <PlaybookStatusDescription
+          status={status}
+          playbookRunId={playbookRunId}
+          playbookTitle={title}
+        />
+      );
     }
   },
   {

src/components/Playbooks/Runs/PlaybookRunsStatus.tsx

@@ -1,9 +1,55 @@
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import { useState } from "react";
+import { Tooltip } from "react-tooltip";
 import {
   PlaybookRunsStatusProps,
   PlaybookStatusIcon
 } from "../../../ui/Icons/PlaybookStatusIcon";
+import ApprovePlaybookRunModal from "./ApprovePlaybookRunModal";
+
+export function PlaybookStatusDescription({
+  status,
+  playbookTitle,
+  showApproveButton = false,
+  playbookRunId,
+  refetch = () => {}
+}: PlaybookRunsStatusProps & {
+  playbookTitle: string;
+  showApproveButton?: boolean;
+  playbookRunId: string;
+  refetch?: () => void;
+}) {
+  const [showApprovalModal, setShowApprovalModal] = useState(false);
+
+  if (status === "pending" && showApproveButton) {
+    return (
+      <>
+        <Button
+          data-tooltip-content={`Approve ${playbookTitle} Run`}
+          id="approve-playbook-run"
+          size="xs"
+          className="btn-white flex flex-row items-center"
+          onClick={() => {
+            setShowApprovalModal(true);
+          }}
+        >
+          <PlaybookStatusIcon status={status} />
+          <span className="capitalize">{status}</span>
+        </Button>
+        <ApprovePlaybookRunModal
+          onClose={() => {
+            setShowApprovalModal(false);
+          }}
+          open={showApprovalModal}
+          playbookTitle={playbookTitle}
+          playbookRunId={playbookRunId}
+          refetch={refetch}
+        />
+        <Tooltip id="approve-playbook-run" />
+      </>
+    );
+  }
 
-export function PlaybookStatusDescription({ status }: PlaybookRunsStatusProps) {
   return (
     <div className="flex flex-row items-center gap-1">
       <PlaybookStatusIcon status={status} />

src/pages/playbooks/PlaybookRunsDetails.tsx

@@ -115,7 +115,7 @@ export default function PlaybookRunsDetailsPage() {
         <TabbedLinks activeTabName={`Runs`} tabLinks={playbookRunsPageTabs}>
           <div className={`mx-auto flex h-full flex-col p-4`}>
             {playbookRun ? (
-              <PlaybookRunsActions data={playbookRun} />
+              <PlaybookRunsActions data={playbookRun} refetch={refetch} />
             ) : (
               <CardsSkeletonLoader />
             )}

src/ui/AlertDialog/ConfirmationPromptDialog.tsx

@@ -1,13 +1,13 @@
 import { Dialog } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/outline";
 import clsx from "clsx";
-import { ComponentProps } from "react";
+import React, { ComponentProps } from "react";
 import { FaCircleNotch } from "react-icons/fa";
 
 type ConfirmationPromptDialogProps = {
   isOpen: boolean;
   title: string;
-  description: string;
+  description: React.ReactNode;
   onClose: () => void;
   onConfirm: () => void;
   yesLabel?: string;