feat: add guides list to toolbar v2 w/ targeting and archived indicators

packages/client/src/clients/guide/index.ts

@@ -2,8 +2,10 @@ export { KnockGuideClient, DEBUG_QUERY_PARAMS } from "./client";
 export type {
   KnockGuide,
   KnockGuideStep,
+  GuideIneligibilityMarker as KnockGuideIneligibilityMarker,
   TargetParams as KnockGuideTargetParams,
   SelectFilterParams as KnockGuideFilterParams,
   SelectGuideOpts as KnockSelectGuideOpts,
   SelectGuidesOpts as KnockSelectGuidesOpts,
+  StoreState as KnockGuideClientStoreState,
 } from "./types";

packages/react/package.json

@@ -76,10 +76,12 @@
     "@knocklabs/react-core": "workspace:^",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@telegraph/combobox": "^0.1.16",
     "@telegraph/icon": "^0.2.7",
     "@telegraph/layout": "^0.2.3",
     "@telegraph/tokens": "^0.1.2",
+    "@telegraph/tooltip": "0.0.61",
     "@telegraph/typography": "^0.1.25",
     "clsx": "^2.1.1",
     "lodash.debounce": "^4.0.8"

packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx

@@ -0,0 +1,48 @@
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { Box, Stack } from "@telegraph/layout";
+import * as React from "react";
+
+import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore";
+
+type Props = {
+  guide: InspectedGuide | MissingGuide;
+};
+
+export const GuideHoverCard = ({
+  children,
+  guide,
+}: React.PropsWithChildren<Props>) => {
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger>
+        <Stack align="center">{children}</Stack>
+      </HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content sideOffset={44} side="left">
+          <Box
+            px="2"
+            shadow="2"
+            rounded="3"
+            border="px"
+            overflow="auto"
+            backgroundColor="surface-2"
+            style={{
+              width: "450px",
+              maxHeight: "600px",
+            }}
+          >
+            <pre
+              style={{
+                fontSize: "11px",
+              }}
+            >
+              {/* XXX: Prune some details */}
+              <code>{JSON.stringify(guide, null, 2)}</code>
+            </pre>
+          </Box>
+          <HoverCard.Arrow />
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
+  );
+};

packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx

@@ -0,0 +1,103 @@
+import { Button } from "@telegraph/button";
+import { Stack } from "@telegraph/layout";
+import { Tag } from "@telegraph/tag";
+import { Tooltip } from "@telegraph/tooltip";
+import { Text } from "@telegraph/typography";
+import { CheckCircle2, CircleDashed, Eye, UserCircle2 } from "lucide-react";
+import * as React from "react";
+
+import { GuideHoverCard } from "./GuideHoverCard";
+import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore";
+
+const Row = ({ children }: React.PropsWithChildren) => (
+  <Stack h="7" px="2" borderTop="px" justify="space-between" align="center">
+    {children}
+  </Stack>
+);
+
+type Props = {
+  guide: MissingGuide | InspectedGuide;
+  orderIndex: number;
+};
+
+export const GuideRow = ({ guide, orderIndex }: Props) => {
+  return (
+    <Row>
+      <Stack h="6" justify="flex-start" align="center" gap="2">
+        <Tag
+          size="0"
+          variant="soft"
+          color={guide.bypass_global_group_limit ? "blue" : "default"}
+        >
+          {orderIndex + 1}
+        </Tag>
+        <GuideHoverCard guide={guide}>
+          <Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
+            {guide.key}
+          </Text>
+        </GuideHoverCard>
+      </Stack>
+
+      <Stack justify="flex-end">
+        <Stack gap="1">
+          {guide.__typename === "Guide" && (
+            <>
+              <Tooltip
+                label={
+                  guide.inspection.targetable.status
+                    ? "This user is targeted"
+                    : guide.inspection.targetable.message
+                }
+                // enabled={!guide.inspection.targetable.status}
+              >
+                <Button
+                  px="1"
+                  size="1"
+                  variant="soft"
+                  color={guide.inspection.targetable.status ? "green" : "red"}
+                  leadingIcon={{ icon: UserCircle2, alt: "Target" }}
+                />
+              </Tooltip>
+              <Tooltip
+                label={
+                  guide.inspection.archived.status
+                    ? "User has already archived this guide"
+                    : "User has not dismissed this guide"
+                }
+              >
+                <Button
+                  px="1"
+                  size="1"
+                  variant="soft"
+                  color={guide.inspection.archived.status ? "red" : "green"}
+                  leadingIcon={{ icon: Eye, alt: "Not archived" }}
+                />
+              </Tooltip>
+            </>
+          )}
+          <Tooltip
+            label={
+              guide.__typename === "MissingGuide"
+                ? "This guide has never been committed and published yet"
+                : !guide.active
+                  ? "This guide is not active"
+                  : "This guide is active"
+            }
+          >
+            <Button
+              px="1"
+              size="1"
+              variant="soft"
+              color={guide.active ? "green" : "red"}
+              leadingIcon={
+                guide.active
+                  ? { icon: CheckCircle2, alt: "Active" }
+                  : { icon: CircleDashed, alt: "Inactive" }
+              }
+            />
+          </Tooltip>
+        </Stack>
+      </Stack>
+    </Row>
+  );
+};

packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx

@@ -0,0 +1,38 @@
+import { Select } from "@telegraph/select";
+
+import { MAX_Z_INDEX } from "../shared";
+
+export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
+
+type Props = {
+  value: DisplayOption;
+  onChange: (option: DisplayOption) => void;
+};
+
+export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
+  return (
+    <Select.Root
+      size="1"
+      value={value}
+      onValueChange={(value) => {
+        if (!value) return;
+        onChange(value as DisplayOption);
+      }}
+      contentProps={{
+        style: { zIndex: MAX_Z_INDEX },
+      }}
+    >
+      {/*
+        <Select.Option size="1" value="current-page">
+          Displayable on current page
+        </Select.Option>
+      */}
+      <Select.Option size="1" value="all-eligible">
+        All eligible guides for user
+      </Select.Option>
+      <Select.Option size="1" value="all-guides">
+        All existing guides
+      </Select.Option>
+    </Select.Root>
+  );
+};

packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx

@@ -1,36 +1,30 @@
-import { useGuideContext, useStore } from "@knocklabs/react-core";
+import { useGuideContext } from "@knocklabs/react-core";
 import { Button } from "@telegraph/button";
 import { Box, Stack } from "@telegraph/layout";
-import { Text } from "@telegraph/typography";
 import { Minimize2, Undo2 } from "lucide-react";
 import React from "react";
 
 import { KnockButton } from "../KnockButton";
-import { MAX_Z_INDEX } from "../shared";
+// import { MAX_Z_INDEX } from "../shared";
 import "../styles.css";
 
+import { GuideRow } from "./GuideRow";
+import {
+  DisplayOption,
+  GuidesListDisplaySelect,
+} from "./GuidesListDisplaySelect";
 import { detectToolbarParam } from "./helpers";
-
-const useInspectGuideClientStore = () => {
-  const { client } = useGuideContext();
-
-  const snapshot = useStore(client.store, (state) => {
-    return {
-      debug: state.debug,
-    };
-  });
-
-  if (!snapshot.debug?.debugging) {
-    return;
-  }
-
-  // TODO: Transform the raw client state into more useful data for debugging.
-  return {};
-};
+import {
+  checkEligible,
+  useInspectGuideClientStore,
+} from "./useInspectGuideClientStore";
 
 export const V2 = () => {
   const { client } = useGuideContext();
 
+  const [guidesListDisplayed, setGuidesListDisplayed] =
+    React.useState<DisplayOption>("all-eligible");
+
   const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
   const [isCollapsed, setIsCollapsed] = React.useState(true);
 
@@ -53,11 +47,14 @@ export const V2 = () => {
 
   return (
     <Box
+      id="knock-guide-toolbar-v2"
       position="fixed"
       top="4"
       right="4"
       style={{
-        zIndex: MAX_Z_INDEX,
+        // zIndex: MAX_Z_INDEX
+        // Match the hardcoded z-index value in tooltip
+        zIndex: 1800,
       }}
     >
       {isCollapsed ? (
@@ -80,9 +77,10 @@ export const V2 = () => {
             style={{ boxSizing: "border-box" }}
           >
             <Box style={{ width: "220px" }}>
-              <Text as="div" size="1" weight="medium" w="full" maxWidth="40">
-                Toolbar v2 placeholder
-              </Text>
+              <GuidesListDisplaySelect
+                value={guidesListDisplayed}
+                onChange={(selected) => setGuidesListDisplayed(selected)}
+              />
             </Box>
 
             <Stack gap="2">
@@ -102,6 +100,22 @@ export const V2 = () => {
               />
             </Stack>
           </Stack>
+
+          <Box w="full">
+            {data.error && <Box>{data.error}</Box>}
+            {data.guides.map((guide, idx) => {
+              if (
+                guidesListDisplayed === "all-eligible" &&
+                !checkEligible(guide)
+              ) {
+                return null;
+              }
+
+              return (
+                <GuideRow key={guide.key} guide={guide} orderIndex={idx} />
+              );
+            })}
+          </Box>
         </Stack>
       )}
     </Box>