feat(KNO-7528): add MsTeamsAuthButton

.changeset/khaki-ways-protect.md

@@ -0,0 +1,7 @@
+---
+"@knocklabs/react-core": minor
+"@knocklabs/client": minor
+"@knocklabs/react": minor
+---
+
+feat: add MsTeamsAuthButton

package.json

@@ -9,6 +9,7 @@
     "build:packages": "turbo build --filter=\"./packages/*\"",
     "dev": "turbo dev",
     "dev:next-example": "turbo dev --filter=\"./packages/*\" --filter=nextjs-example",
+    "dev:packages": "turbo dev --filter=\"./packages/*\"",
     "lint": "turbo lint",
     "format": "turbo format",
     "format:check": "turbo format:check",

packages/client/src/clients/ms-teams/index.ts

@@ -0,0 +1,60 @@
+import { ApiResponse } from "../../api";
+import { AuthCheckInput, RevokeAccessTokenInput } from "../../interfaces";
+import Knock from "../../knock";
+import { TENANT_OBJECT_COLLECTION } from "../objects/constants";
+
+class MsTeamsClient {
+  private instance: Knock;
+
+  constructor(instance: Knock) {
+    this.instance = instance;
+  }
+
+  async authCheck({ tenant: tenantId, knockChannelId }: AuthCheckInput) {
+    const result = await this.instance.client().makeRequest({
+      method: "GET",
+      url: `/v1/providers/ms-teams/${knockChannelId}/auth_check`,
+      params: {
+        ms_teams_tenant_object: {
+          object_id: tenantId,
+          collection: TENANT_OBJECT_COLLECTION,
+        },
+        channel_id: knockChannelId,
+      },
+    });
+
+    return this.handleResponse(result);
+  }
+
+  async revokeAccessToken({
+    tenant: tenantId,
+    knockChannelId,
+  }: RevokeAccessTokenInput) {
+    const result = await this.instance.client().makeRequest({
+      method: "PUT",
+      url: `/v1/providers/ms-teams/${knockChannelId}/revoke_access`,
+      params: {
+        ms_teams_tenant_object: {
+          object_id: tenantId,
+          collection: TENANT_OBJECT_COLLECTION,
+        },
+        channel_id: knockChannelId,
+      },
+    });
+
+    return this.handleResponse(result);
+  }
+
+  private handleResponse(response: ApiResponse) {
+    if (response.statusCode === "error") {
+      if (response.error?.response?.status < 500) {
+        return response.error || response.body;
+      }
+      throw new Error(response.error || response.body);
+    }
+
+    return response.body;
+  }
+}
+
+export default MsTeamsClient;

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

@@ -1,14 +1,9 @@
 import { ApiResponse } from "../../api";
+import { AuthCheckInput, RevokeAccessTokenInput } from "../../interfaces";
 import Knock from "../../knock";
+import { TENANT_OBJECT_COLLECTION } from "../objects/constants";
 
-import {
-  AuthCheckInput,
-  GetSlackChannelsInput,
-  GetSlackChannelsResponse,
-  RevokeAccessTokenInput,
-} from "./interfaces";
-
-const TENANT_COLLECTION = "$tenants";
+import { GetSlackChannelsInput, GetSlackChannelsResponse } from "./interfaces";
 
 class SlackClient {
   private instance: Knock;
@@ -24,7 +19,7 @@ class SlackClient {
       params: {
         access_token_object: {
           object_id: tenant,
-          collection: TENANT_COLLECTION,
+          collection: TENANT_OBJECT_COLLECTION,
         },
         channel_id: knockChannelId,
       },
@@ -45,7 +40,7 @@ class SlackClient {
       params: {
         access_token_object: {
           object_id: tenant,
-          collection: TENANT_COLLECTION,
+          collection: TENANT_OBJECT_COLLECTION,
         },
         channel_id: knockChannelId,
         query_options: {
@@ -68,7 +63,7 @@ class SlackClient {
       params: {
         access_token_object: {
           object_id: tenant,
-          collection: TENANT_COLLECTION,
+          collection: TENANT_OBJECT_COLLECTION,
         },
         channel_id: knockChannelId,
       },

packages/client/src/clients/slack/interfaces.ts

@@ -17,16 +17,6 @@ export type GetSlackChannelsInput = {
   };
 };
 
-export type AuthCheckInput = {
-  tenant: string;
-  knockChannelId: string;
-};
-
-export type RevokeAccessTokenInput = {
-  tenant: string;
-  knockChannelId: string;
-};
-
 export type GetSlackChannelsResponse = {
   slack_channels: SlackChannel[];
   next_cursor: string | null;

packages/client/src/index.ts

@@ -9,6 +9,7 @@ export * from "./clients/objects/constants";
 export * from "./clients/preferences/interfaces";
 export * from "./clients/slack";
 export * from "./clients/slack/interfaces";
+export * from "./clients/ms-teams";
 export * from "./clients/users";
 export * from "./clients/users/interfaces";
 export * from "./clients/messages";

packages/client/src/interfaces.ts

@@ -66,3 +66,13 @@ export interface BulkOperation {
   inserted_at: string;
   updated_at: string;
 }
+
+export type AuthCheckInput = {
+  tenant: string;
+  knockChannelId: string;
+};
+
+export type RevokeAccessTokenInput = {
+  tenant: string;
+  knockChannelId: string;
+};

packages/client/src/knock.ts

@@ -3,6 +3,7 @@ import { jwtDecode } from "jwt-decode";
 import ApiClient from "./api";
 import FeedClient from "./clients/feed";
 import MessageClient from "./clients/messages";
+import MsTeamsClient from "./clients/ms-teams";
 import ObjectClient from "./clients/objects";
 import Preferences from "./clients/preferences";
 import SlackClient from "./clients/slack";
@@ -27,6 +28,7 @@ class Knock {
   readonly objects = new ObjectClient(this);
   readonly preferences = new Preferences(this);
   readonly slack = new SlackClient(this);
+  readonly msTeams = new MsTeamsClient(this);
   readonly user = new UserClient(this);
   readonly messages = new MessageClient(this);
 

packages/react-core/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./modules/core";
 export * from "./modules/feed";
+export * from "./modules/ms-teams";
 export * from "./modules/slack";
 export * from "./modules/i18n";

packages/react-core/src/modules/core/utils.ts

@@ -74,3 +74,23 @@ export function slackProviderKey({
     .filter((f) => f !== null && f !== undefined)
     .join("-");
 }
+
+/*
+  Used to build a consistent key for the KnockMsTeamsProvider so that React knows when
+  to trigger a re-render of the context when a key property changes.
+*/
+export function msTeamsProviderKey({
+  knockMsTeamsChannelId,
+  tenantId,
+  connectionStatus,
+  errorLabel,
+}: {
+  knockMsTeamsChannelId: string;
+  tenantId: string;
+  connectionStatus: string;
+  errorLabel: string | null;
+}) {
+  return [knockMsTeamsChannelId, tenantId, connectionStatus, errorLabel]
+    .filter((f) => f !== null && f !== undefined)
+    .join("-");
+}

packages/react-core/src/modules/i18n/languages/en.ts

@@ -12,6 +12,16 @@ const en: I18nContent = {
     unread: "Unread",
     read: "Read",
     unseen: "Unseen",
+    msTeamsConnect: "Connect to Microsoft Teams",
+    msTeamsConnected: "Connected",
+    msTeamsConnecting: "Connecting to Microsoft Teams…",
+    msTeamsConnectContainerDescription:
+      "Connect to get notifications in Microsoft Teams",
+    msTeamsDisconnect: "Disconnect",
+    msTeamsDisconnecting: "Disconnecting from Microsoft Teams…",
+    msTeamsError: "Error",
+    msTeamsReconnect: "Reconnect",
+    msTeamsTenantIdNotSet: "Microsoft Teams tenant ID not set.",
     slackConnectChannel: "Connect channel",
     slackChannelId: "Slack channel ID",
     slackConnecting: "Connecting to Slack...",

packages/react-core/src/modules/i18n/languages/index.ts

@@ -13,6 +13,15 @@ export interface Translations {
   readonly unread: string;
   readonly read: string;
   readonly unseen: string;
+  readonly msTeamsConnect: string;
+  readonly msTeamsConnected: string;
+  readonly msTeamsConnecting: string;
+  readonly msTeamsConnectContainerDescription: string;
+  readonly msTeamsDisconnect: string;
+  readonly msTeamsDisconnecting: string;
+  readonly msTeamsError: string;
+  readonly msTeamsReconnect: string;
+  readonly msTeamsTenantIdNotSet: string;
   readonly slackConnectChannel: string;
   readonly slackChannelId: string;
   readonly slackConnecting: string;

packages/react-core/src/modules/ms-teams/context/KnockMsTeamsProvider.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { PropsWithChildren } from "react";
+
+import { useKnockClient } from "../../core";
+import { msTeamsProviderKey } from "../../core/utils";
+import { useMsTeamsConnectionStatus } from "../hooks";
+import { ConnectionStatus } from "../hooks/useMsTeamsConnectionStatus";
+
+export interface KnockMsTeamsProviderState {
+  knockMsTeamsChannelId: string;
+  tenantId: string;
+  connectionStatus: ConnectionStatus;
+  setConnectionStatus: (connectionStatus: ConnectionStatus) => void;
+  errorLabel: string | null;
+  setErrorLabel: (label: string) => void;
+  actionLabel: string | null;
+  setActionLabel: (label: string | null) => void;
+}
+
+const MsTeamsProviderStateContext =
+  React.createContext<KnockMsTeamsProviderState | null>(null);
+
+export interface KnockMsTeamsProviderProps {
+  knockMsTeamsChannelId: string;
+  tenantId: string;
+}
+
+export const KnockMsTeamsProvider: React.FC<
+  PropsWithChildren<KnockMsTeamsProviderProps>
+> = ({ knockMsTeamsChannelId, tenantId, children }) => {
+  const knock = useKnockClient();
+
+  const {
+    connectionStatus,
+    setConnectionStatus,
+    errorLabel,
+    setErrorLabel,
+    actionLabel,
+    setActionLabel,
+  } = useMsTeamsConnectionStatus(knock, knockMsTeamsChannelId, tenantId);
+
+  return (
+    <MsTeamsProviderStateContext.Provider
+      key={msTeamsProviderKey({
+        knockMsTeamsChannelId,
+        tenantId,
+        connectionStatus,
+        errorLabel,
+      })}
+      value={{
+        connectionStatus,
+        setConnectionStatus,
+        errorLabel,
+        setErrorLabel,
+        actionLabel,
+        setActionLabel,
+        knockMsTeamsChannelId,
+        tenantId,
+      }}
+    >
+      {children}
+    </MsTeamsProviderStateContext.Provider>
+  );
+};
+
+export const useKnockMsTeamsClient = (): KnockMsTeamsProviderState => {
+  const context = React.useContext(MsTeamsProviderStateContext);
+  if (!context) {
+    throw new Error(
+      "useKnockMsTeamsClient must be used within a KnockMsTeamsProvider",
+    );
+  }
+  return context;
+};

packages/react-core/src/modules/ms-teams/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockMsTeamsProvider";

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

@@ -0,0 +1,2 @@
+export { default as useMsTeamsConnectionStatus } from "./useMsTeamsConnectionStatus";
+export { default as useMsTeamsAuth } from "./useMsTeamsAuth";