From df3ad7acb607a48836d5b367c33540e37908bfde Mon Sep 17 00:00:00 2001 From: Aditya Thebe Date: Tue, 13 Jan 2026 13:36:41 +0545 Subject: [PATCH 1/3] feat: Move playbooks button from config panel to header --- src/components/Configs/ConfigDetailsTabs.tsx | 20 +++++++++++++++++-- .../Configs/Sidebar/ConfigActionBar.tsx | 2 -- .../Runs/Submit/PlaybooksDropdownMenu.tsx | 9 ++++++--- .../Playbooks/Settings/PlaybookSpecIcon.tsx | 2 +- 4 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx index 1e48a5268..9df731af3 100644 --- a/src/components/Configs/ConfigDetailsTabs.tsx +++ b/src/components/Configs/ConfigDetailsTabs.tsx @@ -8,6 +8,7 @@ import { ConfigsDetailsBreadcrumbNav } from "../../ui/BreadcrumbNav/ConfigsDetai import { Head } from "../../ui/Head"; import { refreshButtonClickedTrigger } from "../../ui/SlidingSideBar/SlidingSideBar"; import TabbedLinks from "../../ui/Tabs/TabbedLinks"; +import PlaybooksDropdownMenu from "../Playbooks/Runs/Submit/PlaybooksDropdownMenu"; import { ErrorBoundary } from "../ErrorBoundary"; import { useConfigDetailsTabs } from "./ConfigTabsLinks"; import ConfigSidebar from "./Sidebar/ConfigSidebar"; @@ -50,6 +51,21 @@ export function ConfigDetailsTabs({ const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary); + const playbooksButton = id ? ( + + ) : null; + const layoutExtra = + extra || playbooksButton ? ( +
+ {extra} + {playbooksButton} +
+ ) : undefined; + return ( <>
diff --git a/src/components/Configs/Sidebar/ConfigActionBar.tsx b/src/components/Configs/Sidebar/ConfigActionBar.tsx index 68756d703..f0769d49b 100644 --- a/src/components/Configs/Sidebar/ConfigActionBar.tsx +++ b/src/components/Configs/Sidebar/ConfigActionBar.tsx @@ -6,7 +6,6 @@ import clsx from "clsx"; import React, { useEffect, useMemo, useState } from "react"; import { MdAlarmAdd } from "react-icons/md"; import AttachAsEvidenceButton from "../../Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton"; -import PlaybooksDropdownMenu from "../../Playbooks/Runs/Submit/PlaybooksDropdownMenu"; type ConfigActionBarProps = { configId: string; @@ -78,7 +77,6 @@ export default function ConfigActionBar({ setChecked({}); }} /> -
); } diff --git a/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx b/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx index 996890123..e3c117a67 100644 --- a/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx +++ b/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx @@ -8,6 +8,7 @@ import { Transition } from "@headlessui/react"; import { ChevronDownIcon } from "@heroicons/react/solid"; +import clsx from "clsx"; import { Fragment, useState } from "react"; import { useGetPlaybooksToRun } from "../../../../api/query-hooks/playbooks"; import { RunnablePlaybook } from "../../../../api/types/playbooks"; @@ -19,13 +20,15 @@ type PlaybooksDropdownMenuProps = { config_id?: string; check_id?: string; className?: string; + containerClassName?: string; }; export default function PlaybooksDropdownMenu({ check_id, component_id, config_id, - className = "text-sm btn-white" + className = "", + containerClassName = "my-2 text-right" }: PlaybooksDropdownMenuProps) { const [selectedPlaybookSpec, setSelectedPlaybookSpec] = useState< RunnablePlaybook & { @@ -49,9 +52,9 @@ export default function PlaybooksDropdownMenu({ return ( -
+
- + Playbooks - + {/* fallback to name, when title not there */} {showLabel && {title ?? name}} {showTag && playbook.spec?.category && ( From 9865e0eac19712a3b73e09f8df2e91efee0bf039 Mon Sep 17 00:00:00 2001 From: Aditya Thebe Date: Wed, 10 Dec 2025 12:44:55 +0545 Subject: [PATCH 2/3] feat: highlight the button --- src/components/Configs/ConfigDetailsTabs.tsx | 6 +----- .../Runs/Submit/PlaybooksDropdownMenu.tsx | 21 +++++++++++++++---- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx index 9df731af3..7418b5961 100644 --- a/src/components/Configs/ConfigDetailsTabs.tsx +++ b/src/components/Configs/ConfigDetailsTabs.tsx @@ -52,11 +52,7 @@ export function ConfigDetailsTabs({ const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary); const playbooksButton = id ? ( - + ) : null; const layoutExtra = extra || playbooksButton ? ( diff --git a/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx b/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx index e3c117a67..586535b76 100644 --- a/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx +++ b/src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx @@ -21,6 +21,7 @@ type PlaybooksDropdownMenuProps = { check_id?: string; className?: string; containerClassName?: string; + highlight?: boolean; }; export default function PlaybooksDropdownMenu({ @@ -28,7 +29,8 @@ export default function PlaybooksDropdownMenu({ component_id, config_id, className = "", - containerClassName = "my-2 text-right" + containerClassName = "my-2 text-right", + highlight = false }: PlaybooksDropdownMenuProps) { const [selectedPlaybookSpec, setSelectedPlaybookSpec] = useState< RunnablePlaybook & { @@ -50,15 +52,26 @@ export default function PlaybooksDropdownMenu({ return null; } + const buttonClassName = clsx( + "inline-flex items-center rounded-md px-2 py-1 text-sm font-medium shadow-sm focus:outline-none transition-colors", + highlight + ? "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 focus:ring-2 focus:ring-blue-100" + : "btn-white px-2 py-1", + className + ); + return (
- + - Playbooks + Playbooks From 913e8e51eb324b031a686acdf132e5e7fae1acec Mon Sep 17 00:00:00 2001 From: Aditya Thebe Date: Wed, 14 Jan 2026 13:03:49 +0545 Subject: [PATCH 3/3] fix: remove the highlight --- src/components/Configs/ConfigDetailsTabs.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx index 7418b5961..7a0088dfb 100644 --- a/src/components/Configs/ConfigDetailsTabs.tsx +++ b/src/components/Configs/ConfigDetailsTabs.tsx @@ -52,13 +52,14 @@ export function ConfigDetailsTabs({ const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary); const playbooksButton = id ? ( - + ) : null; + const layoutExtra = extra || playbooksButton ? (
- {extra} {playbooksButton} + {extra}
) : undefined;