feat(KNO-9332): enable use of branches with TeamsKit (#705)

Author: mattmikolay

.changeset/ready-swans-occur.md

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

.changeset/some-bats-lick.md

@@ -0,0 +1,12 @@
+---
+"@knocklabs/react-core": patch
+"@knocklabs/react": patch
+---
+
+Enable use of TeamsKit with branches
+
+The `useMsTeamsAuth` hook exported by `@knocklabs/react-core` has been updated
+so that it works with branches. You can now use either this hook or the
+`<MsTeamsAuthButton>` component exported by `@knocklabs/react` to test
+connecting Microsoft Teams organizations to Knock tenants while working on a
+branch.

examples/ms-teams-connect-example/.env.sample

@@ -16,3 +16,5 @@ NEXT_PUBLIC_GRAPH_API_CLIENT_ID=<graph api client id>
 # the MS Teams channel you want to use and you'll find its ID on the page
 NEXT_PUBLIC_KNOCK_MS_TEAMS_CHANNEL_ID=<knock ms teams channel id>
 NEXT_PUBLIC_REDIRECT_URL=http://localhost:3000/
+
+NEXT_PUBLIC_KNOCK_BRANCH=<optional>

examples/ms-teams-connect-example/pages/index.tsx

@@ -49,6 +49,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}
     >
       <KnockMsTeamsProvider
         knockMsTeamsChannelId={

packages/react-core/src/modules/ms-teams/hooks/useMsTeamsAuth.ts

@@ -42,6 +42,7 @@ function useMsTeamsAuth(
         channel_id: knockMsTeamsChannelId,
         public_key: knock.apiKey,
         user_token: knock.userToken,
+        branch_slug: knock.branch,
       }),
       client_id: graphApiClientId,
       redirect_uri: authRedirectUri,
@@ -53,6 +54,7 @@ function useMsTeamsAuth(
     knockMsTeamsChannelId,
     knock.apiKey,
     knock.userToken,
+    knock.branch,
     graphApiClientId,
     authRedirectUri,
   ]);

packages/react-core/test/ms-teams/useMsTeamsAuth.test.tsx

@@ -4,6 +4,8 @@ import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import type UseMsTeamsAuth from "../../src/modules/ms-teams/hooks/useMsTeamsAuth";
 import { mockMsTeamsContext, mockTranslations } from "../test-utils/mocks";
 
+const TEST_BRANCH_SLUG = "lorem-ipsum-branch";
+
 // -----------------------------------------------------------------------------
 // Stubs & Mocks
 // -----------------------------------------------------------------------------
@@ -29,6 +31,7 @@ vi.mock("../../src/modules/core", () => ({
     apiKey: "test_api_key",
     userToken: "test_user_token",
     host: "https://example.com",
+    branch: TEST_BRANCH_SLUG,
   }),
 }));
 
@@ -75,6 +78,7 @@ describe("useMsTeamsAuth", () => {
       channel_id: "test_channel_id",
       public_key: "test_api_key",
       user_token: "test_user_token",
+      branch_slug: TEST_BRANCH_SLUG,
     });
   });