feat: show approval step in actions list

Fixes #2380

src/api/services/playbooks.ts

@@ -92,13 +92,32 @@ export async function getPlaybookToRunForResource(
 }
 
 export async function getPlaybookRun(id: string) {
+  const select = [
+    "*",
+    `created_by(${AVATAR_INFO})`,
+    "playbooks(id,name,title,spec)",
+    "component:components(id,name,icon)",
+    "config:config_items(id,name,type,config_class)",
+    "check:checks(id,name,icon)",
+    `playbook_approvals(*, person_id(${AVATAR_INFO}), team_id(*))`
+  ].join(",");
+
   const res = await IncidentCommander.get<PlaybookRunWithActions[] | null>(
     // todo: use playbook names instead
-    `/playbook_runs?id=eq.${id}&select=*,created_by(${AVATAR_INFO}),playbooks(id,name,title,spec),component:components(id,name,icon),config:config_items(id,name,type,config_class),check:checks(id,name,icon)`
+    `/playbook_runs?id=eq.${id}&select=${select}`
   );
 
+  const actionsSelect = [
+    "id",
+    "name",
+    "status",
+    "start_time",
+    "end_time",
+    "scheduled_time"
+  ].join(",");
+
   const resActions = await IncidentCommander.get<PlaybookRunAction[] | null>(
-    `/playbook_run_actions?select=id,name,status,start_time,end_time,scheduled_time&order=start_time.asc&playbook_run_id=eq.${id}`
+    `/playbook_run_actions?select=${actionsSelect}&order=start_time.asc&playbook_run_id=eq.${id}`
   );
 
   const actions = resActions.data ?? [];

src/api/types/playbooks.ts

@@ -3,7 +3,7 @@ import { Agent, Avatar, CreatedAt } from "../traits";
 import { ConfigItem } from "./configs";
 import { HealthCheckSummary } from "./health";
 import { Topology } from "./topology";
-import { User } from "./users";
+import { Team, User } from "./users";
 
 export type PlaybookRunStatus =
   | "scheduled"
@@ -40,8 +40,17 @@ export type PlaybookRunAction = {
   error?: string;
 };
 
+export type PlaybookApproval = {
+  id: string;
+  run_id: string;
+  person_id?: User;
+  team_id?: Team;
+  created_at: string;
+};
+
 export interface PlaybookRunWithActions extends PlaybookRun {
   actions: PlaybookRunAction[];
+  playbook_approvals?: PlaybookApproval[];
 }
 
 export interface PlaybookRun extends CreatedAt, Avatar, Agent {

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

@@ -1,4 +1,5 @@
 import {
+  PlaybookApproval,
   PlaybookRunAction,
   PlaybookRunWithActions
 } from "@flanksource-ui/api/types/playbooks";
@@ -16,6 +17,8 @@ import ReRunPlaybookWithParamsButton from "../Submit/ReRunPlaybookWithParamsButt
 import { PlaybookStatusDescription } from "./../PlaybookRunsStatus";
 import PlaybookRunActionFetch from "./PlaybookRunActionFetch";
 import PlaybookRunsActionItem from "./PlaybookRunsActionItem";
+import PlaybookRunsApprovalActionItem from "./PlaybookRunsApprovalActionItem";
+import PlaybookRunsApprovalActionsResults from "./PlaybookRunsApprovalActionsResults";
 import PlaybooksRunActionsResults from "./PlaybooksActionsResults";
 import ShowPlaybookRunsParams from "./ShowParamaters/ShowPlaybookRunsParams";
 
@@ -29,10 +32,21 @@ export default function PlaybookRunsActions({
   refetch = () => {}
 }: PlaybookRunActionsProps) {
   const [selectedAction, setSelectedAction] = useState<
-    PlaybookRunAction | undefined
+    | {
+        type: "Action";
+        data?: PlaybookRunAction;
+      }
+    | {
+        type: "Approval";
+        data: PlaybookApproval;
+      }
+    | undefined
   >(() => {
     // show the last action by default
-    return data.actions.at(-1);
+    return {
+      type: "Action",
+      data: data.actions.at(-1)
+    };
   });
 
   const resource = getResourceForRun(data);
@@ -151,41 +165,84 @@ export default function PlaybookRunsActions({
             <div className="flex flex-1 flex-col gap-2 overflow-y-auto">
               {initializationAction && (
                 <PlaybookRunsActionItem
-                  isSelected={selectedAction?.id === initializationAction.id}
+                  isSelected={
+                    selectedAction?.type === "Action" &&
+                    selectedAction.data?.id === initializationAction.id
+                  }
                   key={initializationAction.id}
                   action={initializationAction}
-                  onClick={() => setSelectedAction(initializationAction)}
+                  onClick={() =>
+                    setSelectedAction({
+                      type: "Action",
+                      data: initializationAction
+                    })
+                  }
                   stepNumber={0}
                 />
               )}
+              {data.playbook_approvals && (
+                <PlaybookRunsApprovalActionItem
+                  isSelected={selectedAction?.type === "Approval"}
+                  key={data.playbook_approvals[0].id}
+                  stepNumber={1}
+                  onClick={() =>
+                    setSelectedAction({
+                      type: "Approval",
+                      data: data.playbook_approvals?.[0]!
+                    })
+                  }
+                />
+              )}
               {data.actions.map((action, index) => (
                 <PlaybookRunsActionItem
-                  isSelected={selectedAction?.id === action.id}
+                  isSelected={
+                    selectedAction?.type === "Action" &&
+                    selectedAction.data?.id === action.id
+                  }
                   key={action.id}
                   action={action}
-                  onClick={() => setSelectedAction(action)}
-                  stepNumber={index + 1}
+                  onClick={() =>
+                    setSelectedAction({
+                      data: action,
+                      type: "Action"
+                    })
+                  }
+                  stepNumber={index + (data.playbook_approvals ? 2 : 1)}
                 />
               ))}
             </div>
           </div>
           <div className="flex h-full flex-1 flex-col overflow-hidden bg-gray-700 px-4 py-2 font-mono text-white">
             {selectedAction &&
-              (selectedAction.id === "initialization" ? (
+              selectedAction.type === "Action" &&
+              selectedAction.data?.id === "initialization" && (
                 <div className="flex w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all">
                   <PlaybooksRunActionsResults
-                    action={selectedAction}
+                    action={selectedAction.data}
                     playbook={data.playbooks!}
                   />
                 </div>
-              ) : (
+              )}
+
+            {selectedAction &&
+              selectedAction.type === "Action" &&
+              selectedAction.data?.id !== "initialization" && (
                 <div className="flex w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all">
                   <PlaybookRunActionFetch
-                    playbookRunActionId={selectedAction.id}
+                    playbookRunActionId={selectedAction.data?.id!}
                     playbook={data.playbooks!}
                   />
                 </div>
-              ))}
+              )}
+
+            {selectedAction && selectedAction.type === "Approval" && (
+              <div className="flex w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all">
+                <PlaybookRunsApprovalActionsResults
+                  approval={selectedAction.data}
+                  playbook={data.playbooks!}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>

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

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { FaCheckCircle } from "react-icons/fa";
+
+type PlaybookRunsActionItemProps = {
+  onClick?: () => void;
+  isSelected?: boolean;
+  stepNumber: number;
+};
+
+export default function PlaybookRunsApprovalActionItem({
+  onClick = () => {},
+  isSelected = false,
+  stepNumber
+}: PlaybookRunsActionItemProps) {
+  return (
+    <div
+      role="button"
+      className={clsx(
+        `flex flex-row items-center justify-between rounded border border-gray-200 px-4 py-2 hover:bg-gray-200`,
+        isSelected ? "bg-gray-200" : "bg-white"
+      )}
+      onClick={onClick}
+    >
+      <div className="flex flex-col">
+        <div className="flex flex-row items-center gap-2 text-sm text-gray-600">
+          <FaCheckCircle className="text-green-500" />
+          Approval
+        </div>
+        <div className={`flex flex-row items-center gap-1 text-xs`}></div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import {
+  PlaybookApproval,
+  PlaybookSpec
+} from "@flanksource-ui/api/types/playbooks";
+import { Avatar } from "@flanksource-ui/ui/Avatar";
+
+type Props = {
+  approval?: PlaybookApproval;
+  className?: string;
+  playbook: Pick<PlaybookSpec, "name">;
+};
+
+export default function PlaybookRunsApprovalActionsResults({
+  approval,
+  className = "whitespace-pre-wrap break-all",
+  playbook
+}: Props) {
+  if (!approval) {
+    return null;
+  }
+
+  return (
+    <div className="relative flex h-full w-full flex-col">
+      <p className="space-x-2">
+        Approved by{" "}
+        {approval.person_id ? (
+          <Avatar user={approval.person_id} inline showName />
+        ) : (
+          <span className={className}>{approval.team_id?.name}</span>
+        )}
+      </p>
+    </div>
+  );
+}

src/ui/Avatar/index.tsx

@@ -14,6 +14,7 @@ interface IProps {
   imageProps?: React.ComponentPropsWithoutRef<"img">;
   containerProps?: React.ComponentPropsWithoutRef<"div">;
   unload?: boolean;
+  showName?: boolean;
 }
 
 export function Avatar({
@@ -24,7 +25,8 @@ export function Avatar({
   containerProps,
   imageProps,
   inline = false,
-  circular = true
+  circular = true,
+  showName = false
 }: IProps) {
   const [textSize, setTextSize] = useState(() => {
     if (size !== "sm") {
@@ -123,6 +125,7 @@ export function Avatar({
           <BsFillPersonFill className="text-warmer-gray" />
         )}
       </div>
+      {showName && <span>{user?.name}</span>}
       <Tooltip id="user-name" />
     </>
   );