Skip to content

fix/playbooks on header #2779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
moshloop merged 3 commits into from
Jan 14, 2026
Merged

fix/playbooks on header #2779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df3ad7a
feat: Move playbooks button from config panel to header
adityathebe Jan 13, 2026
9865e0e
feat: highlight the button
adityathebe Dec 10, 2025
913e8e5
fix: remove the highlight
adityathebe Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions src/components/Configs/ConfigDetailsTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -50,6 +51,18 @@ export function ConfigDetailsTabs({

const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary);

const playbooksButton = id ? (
<PlaybooksDropdownMenu config_id={id} containerClassName="my-0" />
) : null;

const layoutExtra =
extra || playbooksButton ? (
<div className="flex items-center gap-2">
{playbooksButton}
{extra}
</div>
) : undefined;

return (
<>
<Head
Expand All @@ -71,8 +84,8 @@ export function ConfigDetailsTabs({
refetch();
}}
loading={isLoading}
extra={extra}
contentClass="p-0 flex flex-1"
extra={layoutExtra}
contentClass="p-0 h-full overflow-y-hidden"
>
<div className="flex min-h-0 min-w-0 flex-1 flex-row overflow-y-hidden">
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
Expand Down
2 changes: 0 additions & 2 deletions src/components/Configs/Sidebar/ConfigActionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -78,7 +77,6 @@ export default function ConfigActionBar({
setChecked({});
}}
/>
<PlaybooksDropdownMenu config_id={configId} />
</div>
);
}
26 changes: 21 additions & 5 deletions src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 & {
Expand All @@ -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 (
<AuthorizationAccessCheck resource={"playbook_runs"} action={"write"}>
<div className="my-2 text-right">
<div className={containerClassName}>
<Menu as="div" className="relative inline-block text-left">
<MenuButton className="btn-white px-2 py-1">
<MenuButton className={buttonClassName}>
<Icon name="playbook" className="mr-2 mt-0.5 h-5 w-5" />
Playbooks
<span>Playbooks</span>
<ChevronDownIcon
className="-mr-1 ml-2 h-5 w-5 text-gray-400"
className={clsx(
"-mr-1 ml-2 h-5 w-5",
highlight ? "text-blue-500" : "text-gray-400"
)}
aria-hidden="true"
/>
</MenuButton>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Playbooks/Settings/PlaybookSpecIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function PlaybookSpecIcon({

return (
<div className="flex min-w-min flex-row items-center gap-1">
<Icon name={spec?.icon} className="h-auto w-5" />
<Icon name={spec?.icon || "playbook"} className="h-auto w-5" />
{/* fallback to name, when title not there */}
{showLabel && <span>{title ?? name}</span>}
{showTag && playbook.spec?.category && (
Expand Down
Loading