Add ms teams updates

zeplin · Mar 7, 2024 · e005901 · e005901
1 parent 7338c2c
commit e005901
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 151 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@fluentui/react-northstar": "^0.50.0",
     "@hapi/joi": "^17.1.1",
-    "@microsoft/teams-js": "^1.11.0",
+    "@microsoft/teams-js": "^2.21.0",
     "@newrelic/pino-enricher": "^1.1.1",
     "@sentry/browser": "^5.22.3",
     "@sentry/node": "^5.22.3",

diff --git a/src/client/containers/ConfigurationCreateContainer/hooks/useConfigurationCreate.ts b/src/client/containers/ConfigurationCreateContainer/hooks/useConfigurationCreate.ts
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useMutation } from "react-query";
-import * as microsoftTeams from "@microsoft/teams-js";
+import { app, pages } from "@microsoft/teams-js";
 
 import { requester, url } from "../../../lib";
 import { Resource, WebhookEventType } from "../../../constants";
@@ -59,65 +59,67 @@ export const useConfigurationCreate = ({
         }
     );
 
-    useEffect(() => {
-        if (isInitialized) {
-            microsoftTeams.getContext(({
-                channelId,
-                channelName,
-                tid: tenantId
-            }) => {
-                microsoftTeams.settings.getSettings(settings => {
-                    microsoftTeams.settings.registerOnSaveHandler(async saveEvent => {
-                        if (tenantId === undefined ||
-                            channelId === undefined ||
-                            channelName === undefined ||
-                            resource === undefined ||
-                            events === undefined ||
-                            workspaceId === undefined) {
-                            saveEvent.notifyFailure("params are not defined");
-                            return;
-                        }
-                        const { webhookUrl } = settings as unknown as WebhookSettings;
-                        try {
-                            const configurationId = await createConfiguration(
-                                {
-                                    zeplin: {
-                                        resource: {
-                                            id: resource.id,
-                                            type: resource.type
-                                        },
-                                        workspaceId,
-                                        events
-                                    },
-                                    microsoftTeams: {
-                                        channel: {
-                                            id: channelId,
-                                            name: channelName
-                                        },
-                                        tenantId,
-                                        incomingWebhookUrl: webhookUrl
-                                    }
-                                });
+    async function registerConfiguration() {
+        const { channel, user } = await app.getContext();
+        const tenantId = user?.tenant?.id;
+        const channelName = channel?.displayName;
+        const channelId = channel?.id;
 
-                            microsoftTeams.settings.setSettings({
-                                entityId: configurationId,
-                                configName: resource.name,
-                                contentUrl: decodeURI(`${window.location.origin}${url.getHomeUrl({
-                                    id: configurationId,
-                                    resourceName: resource.name,
-                                    resourceType: resource.type,
-                                    channel: "{channelName}",
-                                    theme: "{theme}"
-                                })}`)
-                            } as microsoftTeams.settings.Settings);
-
-                            saveEvent.notifySuccess();
-                        } catch (error) {
-                            saveEvent.notifyFailure((error as Error)?.message ?? `Unknown error ${error}`);
+        const settings = await pages.getConfig();
+        pages.config.registerOnSaveHandler(async saveEvent => {
+            if (tenantId === undefined ||
+                channelId === undefined ||
+                channelName === undefined ||
+                resource === undefined ||
+                events === undefined ||
+                workspaceId === undefined) {
+                saveEvent.notifyFailure("params are not defined");
+                return;
+            }
+            const { webhookUrl } = settings as unknown as WebhookSettings;
+            try {
+                const configurationId = await createConfiguration(
+                    {
+                        zeplin: {
+                            resource: {
+                                id: resource.id,
+                                type: resource.type
+                            },
+                            workspaceId,
+                            events
+                        },
+                        microsoftTeams: {
+                            channel: {
+                                id: channelId,
+                                name: channelName
+                            },
+                            tenantId,
+                            incomingWebhookUrl: webhookUrl
                         }
                     });
+
+                pages.config.setConfig({
+                    entityId: configurationId,
+                    suggestedDisplayName: resource.name,
+                    contentUrl: decodeURI(`${window.location.origin}${url.getHomeUrl({
+                        id: configurationId,
+                        resourceName: resource.name,
+                        resourceType: resource.type,
+                        channel: "{channelName}",
+                        theme: "{theme}"
+                    })}`)
                 });
-            });
+
+                saveEvent.notifySuccess();
+            } catch (error) {
+                saveEvent.notifyFailure((error as Error)?.message ?? `Unknown error ${error}`);
+            }
+        });
+    }
+
+    useEffect(() => {
+        if (isInitialized) {
+            registerConfiguration();
         }
     }, [resource, events, isInitialized]);
-};
+};
diff --git a/src/client/containers/ConfigurationCreateContainer/hooks/useResources.ts b/src/client/containers/ConfigurationCreateContainer/hooks/useResources.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "react-query";
 import { INTERNAL_SERVER_ERROR, UNAUTHORIZED } from "http-status-codes";
-import * as microsoftTeams from "@microsoft/teams-js";
+import { app } from "@microsoft/teams-js";
 
 import { requester } from "../../../lib";
 import { Project, Styleguide } from "../../../constants";
@@ -25,9 +25,7 @@ interface UseWorkspacesResultParams {
     onStyleguidesSuccess: (styleguides: Styleguide[]) => void;
 }
 
-const getChannelId = (): Promise<string> => new Promise(resolve => {
-    microsoftTeams.getContext(({ channelId }) => resolve(channelId as string));
-});
+const getChannelId = (): Promise<string> => app.getContext().then(context => context.channel!.id);
 
 export const useResources = ({
     workspaceId,

diff --git a/src/client/containers/ConfigurationCreateContainer/hooks/useValidate.ts b/src/client/containers/ConfigurationCreateContainer/hooks/useValidate.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import * as microsoftTeams from "@microsoft/teams-js";
+import { pages } from "@microsoft/teams-js";
 
 import { Resource, resourceBasedEvents, WebhookEventType } from "../../../constants";
 
@@ -24,7 +24,7 @@ export const useValidate = (params: UseValidateParams): void => {
     const valid = isValid(params);
     useEffect(() => {
         if (params.enabled) {
-            microsoftTeams.settings.setValidityState(valid);
+            pages.config.setValidityState(valid);
         }
     }, [valid, params.enabled]);
-};
+};
diff --git a/src/client/containers/ConfigurationUpdateContainer/hooks/useConfigurationDelete.ts b/src/client/containers/ConfigurationUpdateContainer/hooks/useConfigurationDelete.ts
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useMutation } from "react-query";
-import * as microsoftTeams from "@microsoft/teams-js";
+import { pages } from "@microsoft/teams-js";
 
 import { requester } from "../../../lib";
 
@@ -14,7 +14,7 @@ export const useConfigurationDelete = ({ configurationId, isInitialized }: UseCo
 
     useEffect(() => {
         if (isInitialized) {
-            microsoftTeams.settings.registerOnRemoveHandler(async removeEvent => {
+            pages.config.registerOnRemoveHandler(async removeEvent => {
                 try {
                     await deleteConfiguration(configurationId);
                     removeEvent.notifySuccess();

diff --git a/src/client/containers/ConfigurationUpdateContainer/hooks/useConfigurationUpdate.ts b/src/client/containers/ConfigurationUpdateContainer/hooks/useConfigurationUpdate.ts
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useMutation } from "react-query";
-import * as microsoftTeams from "@microsoft/teams-js";
+import { pages, app } from "@microsoft/teams-js";
 
 import { requester, url } from "../../../lib";
 import { Resource, WebhookEventType } from "../../../constants";
@@ -59,55 +59,58 @@ export const useConfigurationUpdate = ({
         }
     );
 
-    useEffect(() => {
-        if (isInitialized) {
-            microsoftTeams.getContext(({
-                channelId,
-                channelName,
-                tid: tenantId
-            }) => {
-                microsoftTeams.settings.registerOnSaveHandler(async saveEvent => {
-                    if (tenantId === undefined ||
-                        channelId === undefined ||
-                        channelName === undefined ||
-                        resource === undefined ||
-                        events === undefined ||
-                        workspaceId === undefined) {
-                        saveEvent.notifyFailure("params are not defined");
-                        return;
-                    }
-                    try {
-                        await updateConfiguration(
-                            {
-                                configurationId,
-                                zeplin: {
-                                    resource: {
-                                        id: resource.id,
-                                        type: resource.type
-                                    },
-                                    workspaceId,
-                                    events
-                                }
-                            });
+    async function updateConfig() {
+        const { channel, user } = await app.getContext();
+        const tenantId = user?.tenant?.id;
+        const channelName = channel?.displayName;
+        const channelId = channel?.id;
 
-                        microsoftTeams.settings.setSettings({
-                            entityId: configurationId,
-                            configName: resource.name,
-                            contentUrl: decodeURI(`${window.location.origin}${url.getHomeUrl({
-                                id: configurationId,
-                                resourceName: resource.name,
-                                resourceType: resource.type,
-                                channel: "{channelName}",
-                                theme: "{theme}"
-                            })}`)
-                        } as microsoftTeams.settings.Settings);
+        pages.config.registerOnSaveHandler(async saveEvent => {
+            if (tenantId === undefined ||
+                channelId === undefined ||
+                channelName === undefined ||
+                resource === undefined ||
+                events === undefined ||
+                workspaceId === undefined) {
+                saveEvent.notifyFailure("params are not defined");
+                return;
+            }
+            try {
+                await updateConfiguration(
+                    {
+                        configurationId,
+                        zeplin: {
+                            resource: {
+                                id: resource.id,
+                                type: resource.type
+                            },
+                            workspaceId,
+                            events
+                        }
+                    });
 
-                        saveEvent.notifySuccess();
-                    } catch (error) {
-                        saveEvent.notifyFailure((error as Error)?.message ?? `Unknown error ${error}`);
-                    }
+                pages.config.setConfig({
+                    entityId: configurationId,
+                    suggestedDisplayName: resource.name,
+                    contentUrl: decodeURI(`${window.location.origin}${url.getHomeUrl({
+                        id: configurationId,
+                        resourceName: resource.name,
+                        resourceType: resource.type,
+                        channel: "{channelName}",
+                        theme: "{theme}"
+                    })}`)
                 });
-            });
+
+                saveEvent.notifySuccess();
+            } catch (error) {
+                saveEvent.notifyFailure((error as Error)?.message ?? `Unknown error ${error}`);
+            }
+        });
+    }
+
+    useEffect(() => {
+        if (isInitialized) {
+            updateConfig();
         }
     }, [resource, events, workspaceId, isInitialized]);
 };
diff --git a/src/client/containers/ConfigurationUpdateContainer/hooks/useValidate.ts b/src/client/containers/ConfigurationUpdateContainer/hooks/useValidate.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import * as microsoftTeams from "@microsoft/teams-js";
+import { pages } from "@microsoft/teams-js";
 import { Resource, resourceBasedEvents, WebhookEventType } from "../../../constants";
 
 interface UseValidateParams {
@@ -30,7 +30,7 @@ export const useValidate = (params: UseValidateParams): void => {
     const valid = isValid(params);
     useEffect(() => {
         if (params.enabled) {
-            microsoftTeams.settings.setValidityState(valid);
+            pages.config.setValidityState(valid);
         }
     }, [valid, params.enabled]);
 };