feat(KNO-9339): enable use of branches with SlackKit (#703)

Author: mattmikolay

.changeset/every-geese-fix.md

@@ -0,0 +1,5 @@
+---
+"slack-connect-example": patch
+---
+
+Add `NEXT_PUBLIC_KNOCK_BRANCH` env var for specifying branch

.changeset/seven-badgers-learn.md

@@ -0,0 +1,11 @@
+---
+"@knocklabs/react-core": patch
+"@knocklabs/react": patch
+---
+
+Enable use of SlackKit with branches
+
+The `useSlackAuth` hook exported by `@knocklabs/react-core` has been updated so
+that it works with branches. You can now use either this hook or the
+`<SlackAuthButton>` component exported by `@knocklabs/react` to test connecting
+Slack workspaces to Knock tenants while working on a branch.

examples/slack-connect-example/.env.sample

@@ -20,3 +20,5 @@ NEXT_PUBLIC_SLACK_CLIENT_ID=<slack client id>
 # the slack channel you want to use and you'll find its ID on the page
 NEXT_PUBLIC_KNOCK_SLACK_CHANNEL_ID=<knock slack channel id>
 NEXT_PUBLIC_REDIRECT_URL=http://localhost:3000/
+
+NEXT_PUBLIC_KNOCK_BRANCH=<optional>

examples/slack-connect-example/pages/index.tsx

@@ -50,6 +50,7 @@ export default function Home() {
       user={{ id: user.id }}
       host={process.env.NEXT_PUBLIC_KNOCK_API_URL}
       userToken={localStorage.getItem("knock-user-token")!}
+      branch={process.env.NEXT_PUBLIC_KNOCK_BRANCH}
     >
       <KnockSlackProvider
         knockSlackChannelId={process.env.NEXT_PUBLIC_KNOCK_SLACK_CHANNEL_ID!}

packages/react-core/src/modules/slack/hooks/useSlackAuth.ts

@@ -93,6 +93,7 @@ function useSlackAuth(
         channel_id: knockSlackChannelId,
         public_key: knock.apiKey,
         user_token: knock.userToken,
+        branch_slug: knock.branch,
       }),
       client_id: slackClientId,
       scope: combinedScopes.join(","),
@@ -104,6 +105,7 @@ function useSlackAuth(
     knockSlackChannelId,
     knock.apiKey,
     knock.userToken,
+    knock.branch,
     slackClientId,
     combinedScopes,
   ]);

packages/react-core/test/slack/useSlackAuth.test.tsx

@@ -3,6 +3,8 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import useSlackAuth from "../../src/modules/slack/hooks/useSlackAuth";
 
+const TEST_BRANCH_SLUG = "lorem-ipsum-branch";
+
 const mockSetConnectionStatus = vi.fn();
 const mockSetActionLabel = vi.fn();
 
@@ -24,6 +26,7 @@ vi.mock("../../src/modules/core", () => ({
     slack: mockSlackClient,
     apiKey: "test_api_key",
     userToken: "test_user_token",
+    branch: TEST_BRANCH_SLUG,
   }),
 }));
 
@@ -53,6 +56,7 @@ describe("useSlackAuth", () => {
       channel_id: "test_channel_id",
       public_key: "test_api_key",
       user_token: "test_user_token",
+      branch_slug: TEST_BRANCH_SLUG,
     });
   });