From 080035f776ddf0bd1813b9afdd991038f8bb2061 Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 26 Mar 2026 10:22:51 -0400 Subject: [PATCH 1/5] flip the status Not Archived -> Archived --- .../src/modules/guide/components/Toolbar/V2/GuideRow.tsx | 4 ++-- .../modules/guide/components/Toolbar/V2/GuideRowDetails.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx index 2222f3122..f0982c589 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx @@ -156,8 +156,8 @@ const getStatusDots = ( }; const archived: StatusDot = { - color: !annotation.archived.status ? "blue" : "red", - tooltip: `Not archived: ${!annotation.archived.status ? "Yes" : "No"}`, + color: annotation.archived.status ? "red" : "blue", + tooltip: `Archived: ${annotation.archived.status ? "Yes" : "No"}`, }; const targetable: StatusDot = { diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx index f4ce5efaa..210e0d366 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx @@ -101,9 +101,9 @@ export const GuideRowDetails = ({ color={annotation.active.status ? "blue" : "red"} /> Date: Thu, 26 Mar 2026 16:29:19 -0400 Subject: [PATCH 2/5] streamline tooltips for various statuses --- .../guide/components/Toolbar/V2/GuideRow.tsx | 72 +++++++---------- .../components/Toolbar/V2/GuideRowDetails.tsx | 80 ++++++++++++++----- .../guide/components/Toolbar/V2/helpers.ts | 2 +- 3 files changed, 90 insertions(+), 64 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx index f0982c589..6b3eb1fa2 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx @@ -12,7 +12,11 @@ import { StatusColor, GuideAnnotatedStatusDot as StatusDot, } from "./GuideAnnotatedStatusDot"; -import { GuideRowDetails } from "./GuideRowDetails"; +import { + GuideRowDetails, + StatusSummary, + getSelectableStatusSummary, +} from "./GuideRowDetails"; import { ERROR_MESSAGE } from "./helpers"; import { AnnotatedGuide, @@ -50,12 +54,6 @@ const Pill = ({ ); }; -type StatusSummary = { - color: StatusColor; - label: string; - tooltip: string; -}; - const getStatusSummary = ( guide: AnnotatedGuide | UncommittedGuide, ): StatusSummary => { @@ -63,7 +61,7 @@ const getStatusSummary = ( return { color: "red", label: "Inactive", - tooltip: "This guide has never been committed and published yet", + description: "This guide has never been committed and published yet", }; } @@ -73,61 +71,49 @@ const getStatusSummary = ( return { color: "red", label: "Inactive", - tooltip: "This guide is inactive", + description: "This guide is inactive", }; } if (annotation.archived.status) { return { color: "red", label: "Archived", - tooltip: "User has already dismissed this guide", + description: "User has already dismissed this guide", }; } if (!annotation.targetable.status) { return { color: "red", label: "Not targeted", - tooltip: annotation.targetable.message, + description: annotation.targetable.message, }; } + + const selectableStatusSummary = getSelectableStatusSummary( + annotation.selectable.status, + ); + + // Prioritize an undefined selectable status ahead of activatable status. if (annotation.selectable.status === undefined) { - return { - color: "red", - label: "Not found", - tooltip: "No component that can query this guide was found", - }; + return selectableStatusSummary; } + if (!annotation.activatable.status) { return { color: "red", label: "Not activated", - tooltip: "This guide cannot be activated in the current location", + description: "This guide cannot be activated in the current location", }; } - if (annotation.selectable.status === "queried") { - return { - color: "gray", - label: "Queued", - tooltip: "This guide is queried but is not ready to display", - }; - } - if (annotation.selectable.status === "throttled") { - return { - color: "yellow", - label: "Throttled", - tooltip: - "This guide is queried and ready to display, but throttled currently", - }; - } - if (annotation.selectable.status === "returned") { - return { - color: "blue", - label: "Display", - tooltip: "This guide is queried and ready to display", - }; - } - // Should never happen though. - return { color: "red", label: "Unknown status", tooltip: "Unknown status" }; + + return { + ...selectableStatusSummary, + + // Shorten the label we display here for space. + ...(annotation.selectable.status === "returned" + ? { label: "Display" } + : undefined), + }; }; type StatusDot = { @@ -162,7 +148,7 @@ const getStatusDots = ( const targetable: StatusDot = { color: annotation.targetable.status ? "blue" : "red", - tooltip: `Targeted: ${annotation.targetable.status ? "Yes" : "No"}`, + tooltip: `Targeting: ${annotation.targetable.status ? "Yes" : "No"}`, }; const activatable: StatusDot = { @@ -302,7 +288,7 @@ export const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => { {/* Right section: verdict + pills + focus */} {!hasFocus && ( - + {summary.label} diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx index 210e0d366..f9fcd62f7 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx @@ -1,4 +1,5 @@ import { Box, Stack } from "@telegraph/layout"; +import { Tooltip } from "@telegraph/tooltip"; import { Text } from "@telegraph/typography"; import { @@ -43,34 +44,66 @@ const StatusRow = ({ label, value, color, + tooltip, }: { label: string; value: string; color: StatusColor; -}) => ( - - - - {label}: - - - {value} - - -); + tooltip?: string; +}) => { + return ( + + + + + + {label}: + + + {value} + + + + + ); +}; -const getDisplayValue = ( +export type StatusSummary = { + color: StatusColor; + label: string; + description: string; +}; + +export const getSelectableStatusSummary = ( status: "returned" | "throttled" | "queried" | undefined, -): { value: string; color: StatusColor } => { +): StatusSummary => { switch (status) { case "returned": - return { value: "Ready to display", color: "blue" }; + return { + label: "Ready to display", + color: "blue", + description: "This guide is queried and ready to display", + }; case "throttled": - return { value: "Throttled", color: "yellow" }; + return { + label: "Throttled", + color: "yellow", + description: + "This guide is queried and ready to display, but throttled currently", + }; case "queried": - return { value: "Queued", color: "gray" }; + return { + label: "Queued", + color: "gray", + description: "This guide is queried but is not ready to display", + }; default: - return { value: "Not found", color: "red" }; + return { + label: "Not queried", + color: "red", + description: + "This guide is not queried, no component that can display this guide is present", + }; } }; @@ -90,7 +123,9 @@ export const GuideRowDetails = ({ } const { annotation } = guide; - const display = getDisplayValue(annotation.selectable.status); + const selectableStatusSummary = getSelectableStatusSummary( + annotation.selectable.status, + ); return ( @@ -99,16 +134,19 @@ export const GuideRowDetails = ({ label="Active" value={annotation.active.status ? "Yes" : "No"} color={annotation.active.status ? "blue" : "red"} + tooltip="Eligible if the guide is currently active" /> @@ -117,11 +155,13 @@ export const GuideRowDetails = ({ label="Activation" value={annotation.activatable.status ? "Yes" : "No"} color={annotation.activatable.status ? "blue" : "red"} + tooltip="Visible when the user's current location matches the guide's activation rules" /> 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 8d096af1a..6547a26d5 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts +++ b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts @@ -88,5 +88,5 @@ export const clearRunConfigLS = () => { export const ERROR_MESSAGE = { focusUnknownGuide: "No such guide exists", focusUncommittedGuide: "This guide has not been committed", - focusUnselectableGuide: "No component that can render this guide is present", + focusUnselectableGuide: "No component that can display this guide is present", }; From e551075f841546fd09969a3190cdb4809d5626c2 Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 26 Mar 2026 17:45:06 -0400 Subject: [PATCH 3/5] streamline some more --- .../guide/components/Toolbar/V2/GuideRow.tsx | 25 ++++++------------- 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx index 6b3eb1fa2..a55daf8ac 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx @@ -156,25 +156,14 @@ const getStatusDots = ( tooltip: `Activated: ${annotation.activatable.status ? "Yes" : "No"}`, }; - let selectable: StatusDot; - switch (annotation.selectable.status) { - case "returned": - selectable = { color: "blue", tooltip: "Ready for display" }; - break; - - case "throttled": - selectable = { color: "yellow", tooltip: "Throttled" }; - break; - - case "queried": - selectable = { color: "gray", tooltip: "Queued" }; - break; + const selectableStatusSummary = getSelectableStatusSummary( + annotation.selectable.status, + ); - case undefined: - default: - selectable = { color: "red", tooltip: "Not found" }; - break; - } + const selectable = { + color: selectableStatusSummary.color, + tooltip: selectableStatusSummary.label, + }; return { active, archived, targetable, activatable, selectable }; }; From fc5ed326b51491ff8883a38727c0b6b4335ac0ea Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 26 Mar 2026 18:22:32 -0400 Subject: [PATCH 4/5] more tooltip edits --- .../components/Toolbar/V2/GuideRowDetails.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx index f9fcd62f7..b7385548a 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx @@ -6,6 +6,7 @@ import { StatusColor, GuideAnnotatedStatusDot as StatusDot, } from "./GuideAnnotatedStatusDot"; +import { ERROR_MESSAGE } from "./helpers"; import { AnnotatedGuide, UncommittedGuide, @@ -49,7 +50,7 @@ const StatusRow = ({ label: string; value: string; color: StatusColor; - tooltip?: string; + tooltip?: React.ReactNode; }) => { return ( @@ -101,8 +102,7 @@ export const getSelectableStatusSummary = ( return { label: "Not queried", color: "red", - description: - "This guide is not queried, no component that can display this guide is present", + description: `This guide is not queried (${ERROR_MESSAGE.focusUnselectableGuide.toLowerCase()})`, }; } }; @@ -161,7 +161,16 @@ export const GuideRowDetails = ({ label="Display" value={selectableStatusSummary.label} color={selectableStatusSummary.color} - tooltip="Visible when the guide is queried on the current page via `useGuide(s)`, and ready to display per its position in the display pipeline" + tooltip={ + + Visible when the guide is queried via `useGuide(s)` in the current + page, +
+ and ready to display per its position in the display pipeline: +
+ {selectableStatusSummary.description} + + } /> From fb1c683710fb74fbf7ed9a8a0acf52d4f9271858 Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 26 Mar 2026 18:49:14 -0400 Subject: [PATCH 5/5] more tooltip --- .../Toolbar/V2/GuideContextDetails.tsx | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) 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 37f64777d..d78633d81 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx @@ -1,5 +1,6 @@ import { useGuideContext } from "@knocklabs/react-core"; import { Box, Stack } from "@telegraph/layout"; +import { Tooltip } from "@telegraph/tooltip"; import { Text } from "@telegraph/typography"; export const GuideContextDetails = () => { @@ -7,9 +8,30 @@ export const GuideContextDetails = () => { return ( - - Target params - + + The tenant and data payload passed to the guide client that are used + for targeting +
+ (via the `targetParams` prop to `KnockGuideProvider`) + + } + delayDuration={500} + > + + Target params + +