diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx index 1e48a5268..7a0088dfb 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,18 @@ export function ConfigDetailsTabs({ const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary); + const playbooksButton = id ? ( + + ) : null; + + const layoutExtra = + extra || playbooksButton ? ( +
+ {playbooksButton} + {extra} +
+ ) : 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..586535b76 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,17 @@ type PlaybooksDropdownMenuProps = { config_id?: string; check_id?: string; className?: string; + containerClassName?: string; + highlight?: boolean; }; export default function PlaybooksDropdownMenu({ check_id, component_id, config_id, - className = "text-sm btn-white" + className = "", + containerClassName = "my-2 text-right", + highlight = false }: PlaybooksDropdownMenuProps) { const [selectedPlaybookSpec, setSelectedPlaybookSpec] = useState< RunnablePlaybook & { @@ -47,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 diff --git a/src/components/Playbooks/Settings/PlaybookSpecIcon.tsx b/src/components/Playbooks/Settings/PlaybookSpecIcon.tsx index 006b546f4..e6fdcf566 100644 --- a/src/components/Playbooks/Settings/PlaybookSpecIcon.tsx +++ b/src/components/Playbooks/Settings/PlaybookSpecIcon.tsx @@ -20,7 +20,7 @@ export default function PlaybookSpecIcon({ return (
- + {/* fallback to name, when title not there */} {showLabel && {title ?? name}} {showTag && playbook.spec?.category && (