chore: handle (re)subscribe in guide toolbar V2 when entering/exiting (#943)

Author: thomaswhyyou

.changeset/tangy-tools-cross.md

@@ -0,0 +1,7 @@
+---
+"@knocklabs/react-core": patch
+"@knocklabs/client": patch
+"@knocklabs/react": patch
+---
+
+[Guides] Only re-subscribe per listenForUpdates when exiting debugging in guide toolbar v2

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

@@ -629,11 +629,12 @@ export class KnockGuideClient {
         `[Guide] Start debugging, refetching guides and resubscribing to the websocket channel`,
       );
       this.fetch({ force: true });
+      // Always subscribe while debugging.
       this.subscribe();
     }
   }
 
-  unsetDebug() {
+  unsetDebug(opts?: { listenForUpdates?: boolean }) {
     this.knock.log("[Guide] .unsetDebug()");
     const shouldRefetch = this.store.state.debug?.debugging;
 
@@ -653,8 +654,11 @@ export class KnockGuideClient {
         `[Guide] Stop debugging, refetching guides and resubscribing to the websocket channel`,
       );
       this.fetch({ force: true });
-      // TODO: Manage (re)subscribe/unsubscribe in V2 rather than here.
-      this.subscribe();
+      if (opts?.listenForUpdates) {
+        this.subscribe();
+      } else {
+        this.unsubscribe();
+      }
     }
   }
 

packages/client/test/clients/guide/guide.test.ts

@@ -4851,17 +4851,13 @@ describe("KnockGuideClient", () => {
       const fetchSpy = vi
         .spyOn(client, "fetch")
         .mockImplementation(() => Promise.resolve({ status: "ok" }));
-      const subscribeSpy = vi
-        .spyOn(client, "subscribe")
-        .mockImplementation(() => {});
 
       client.unsetDebug();
 
       expect(client.store.state.debug).toBe(undefined);
 
-      // calls fetch and subscribe when was debugging
+      // calls fetch when exiting debugging
       expect(fetchSpy).toHaveBeenCalled();
-      expect(subscribeSpy).toHaveBeenCalled();
     });
 
     test("does not call fetch and subscribe when was not debugging", () => {

packages/react-core/test/guide/KnockGuideProvider.test.tsx

@@ -78,6 +78,20 @@ describe("KnockGuideProvider", () => {
     expect(subscribeMock).toHaveBeenCalled();
   });
 
+  it("does not subscribe when listenForUpdates is false", () => {
+    const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) =>
+      React.createElement(
+        KnockGuideProvider,
+        { channelId: "feed", readyToTarget: true, listenForUpdates: false },
+        children,
+      );
+
+    renderHook(() => useGuideContext(), { wrapper });
+
+    expect(fetchMock).toHaveBeenCalled();
+    expect(subscribeMock).not.toHaveBeenCalled();
+  });
+
   it("defers fetch/subscribe to toolbar v2 when toolbar is visible", () => {
     getToolbarRunConfigFromUrlMock.mockReturnValue({ isVisible: true });
 

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

@@ -87,9 +87,10 @@ const filterGuides = (
 
 type Props = {
   readyToTarget: boolean;
+  listenForUpdates: boolean;
 };
 
-export const V2 = ({ readyToTarget }: Props) => {
+export const V2 = ({ readyToTarget, listenForUpdates }: Props) => {
   const { client } = useGuideContext();
 
   const [displayOption, setDisplayOption] =
@@ -111,6 +112,7 @@ export const V2 = ({ readyToTarget }: Props) => {
   React.useEffect(() => {
     const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};
     const isDebugging = client.store.state.debug?.debugging;
+
     if (isVisible && !isDebugging && readyToTarget) {
       client.setDebug({ focusedGuideKeys });
 
@@ -120,10 +122,16 @@ export const V2 = ({ readyToTarget }: Props) => {
       }
     }
 
+    if (!isVisible && isDebugging) {
+      client.unsetDebug({ listenForUpdates });
+    }
+
     return () => {
-      client.unsetDebug();
+      if (client.store.state.debug?.debugging) {
+        client.unsetDebug({ listenForUpdates });
+      }
     };
-  }, [readyToTarget, runConfig, client, setDisplayOption]);
+  }, [readyToTarget, listenForUpdates, runConfig, client, setDisplayOption]);
 
   // Toggle collapsed state with Ctrl + .
   React.useEffect(() => {
@@ -351,7 +359,6 @@ export const V2 = ({ readyToTarget }: Props) => {
                   leadingIcon={{ icon: LogOut, alt: "Exit" }}
                   onClick={() => {
                     setRunConfig((curr) => ({ ...curr, isVisible: false }));
-                    client.unsetDebug();
                   }}
                 >
                   Exit

packages/react/src/modules/guide/providers/KnockGuideProvider.tsx

@@ -17,18 +17,23 @@ export const KnockGuideProvider: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   toolbar = "v2",
   readyToTarget,
+  listenForUpdates = true,
   ...props
 }) => {
   return (
     <KnockGuideProviderCore
       {...props}
       readyToTarget={readyToTarget}
+      listenForUpdates={listenForUpdates}
       // For backward compatibility with toolbar v1. Remove once v2 ships.
       trackDebugParams={toolbar === "v1"}
     >
       {children}
       {toolbar === "v2" ? (
-        <ToolbarV2 readyToTarget={readyToTarget} />
+        <ToolbarV2
+          readyToTarget={readyToTarget}
+          listenForUpdates={listenForUpdates}
+        />
       ) : (
         <ToolbarV1 />
       )}