diff --git a/.changeset/every-snails-battle.md b/.changeset/every-snails-battle.md new file mode 100644 index 000000000..dfb3d7368 --- /dev/null +++ b/.changeset/every-snails-battle.md @@ -0,0 +1,5 @@ +--- +"@knocklabs/react": patch +--- + +[Guides] Change filter options to (All,Active,Eligible) in guide toolbar v2 diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx index 4963064c3..142781e3c 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx @@ -19,16 +19,18 @@ export const GuideContextDetails = () => { - - Sandbox engagement - + + + Sandbox engagement + + { - - Ignore throttle - + + + Ignore throttle + + { const { client } = useGuideContext(); const [displayOption, setDisplayOption] = - React.useState("only-eligible"); + React.useState("only-active"); const [runConfig, setRunConfig] = React.useState(() => getRunConfig()); const [isCollapsed, setIsCollapsed] = React.useState(false); const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false); @@ -101,30 +104,18 @@ export const V2 = () => { }; }, [runConfig, client, setDisplayOption]); - // Toggle collapsed state when Ctrl is pressed and released alone - // (without combining with another key), similar to Vercel's toolbar. + // Toggle collapsed state with Ctrl + . React.useEffect(() => { - let ctrlUsedInCombo = false; - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === HOTKEY_TOGGLE_IS_COLLAPSED && !e.repeat) { - ctrlUsedInCombo = false; - } else if (e.ctrlKey) { - ctrlUsedInCombo = true; - } - }; - - const handleKeyUp = (e: KeyboardEvent) => { - if (e.key === HOTKEY_TOGGLE_IS_COLLAPSED && !ctrlUsedInCombo) { + if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) { + e.preventDefault(); setIsCollapsed((prev) => !prev); } }; window.addEventListener("keydown", handleKeyDown); - window.addEventListener("keyup", handleKeyUp); return () => { window.removeEventListener("keydown", handleKeyDown); - window.removeEventListener("keyup", handleKeyUp); }; }, []); @@ -161,7 +152,10 @@ export const V2 = () => { delayDuration={500} label={ - Guide Toolbar ctrl + Guide Toolbar + + ctrl + . + } > @@ -283,15 +277,25 @@ export const V2 = () => { setDisplayOption(val); }} > - - All guides + + All - - Eligible + + Active - - On this page + + Eligible + {/* Note: `only-displayable` is not available for now */} diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts index 443b019d3..99e8b2891 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts +++ b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts @@ -2,7 +2,11 @@ import { KnockGuide } from "@knocklabs/client"; import { checkForWindow } from "../../../../../modules/core"; -export type DisplayOption = "all-guides" | "only-eligible" | "only-displayable"; +export type DisplayOption = + | "all-guides" + | "only-active" + | "only-eligible" + | "only-displayable"; // Use this param to start Toolbar and enter into a debugging session when // it is present and set to true. diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts index edbbdf4ee..c9c044ef3 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts +++ b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts @@ -111,6 +111,9 @@ export type UncommittedGuide = { annotation: { isEligible: false; isQualified: false; + active: { + status: false; + }; selectable: { status: undefined; }; @@ -407,6 +410,9 @@ const newUncommittedGuide = (key: KnockGuide["key"], orderIndex: number) => annotation: { isEligible: false, isQualified: false, + active: { + status: false, + }, selectable: { status: undefined, },