From e00590123dd3b616c0a42dd44868b14d6ec44b32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Doruk=20G=C3=BCne=C5=9F?= Date: Thu, 7 Mar 2024 15:08:09 +0000 Subject: [PATCH] Add ms teams updates --- package-lock.json | 20 +-- package.json | 2 +- .../hooks/useConfigurationCreate.ts | 116 +++++++++--------- .../hooks/useResources.ts | 6 +- .../hooks/useValidate.ts | 6 +- .../hooks/useConfigurationDelete.ts | 4 +- .../hooks/useConfigurationUpdate.ts | 97 ++++++++------- .../hooks/useValidate.ts | 4 +- .../LoginContainer/hooks/useLogin.ts | 24 +--- .../ZeplinAuthEndContainer.tsx | 10 +- src/client/hooks/useInitialize.ts | 6 +- 11 files changed, 144 insertions(+), 151 deletions(-) diff --git a/package-lock.json b/package-lock.json index 74e81c7e..3a358018 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -2512,9 +2512,12 @@ } }, "node_modules/@microsoft/teams-js": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-1.11.0.tgz", - "integrity": "sha512-5utMOMWXdNq0cV8hGIZEUpUVChoasoYjBOItgFIKE2a4vavmzlhra+GNXMdpvlYlv6/r7ORtVCQUDFJvPTVj2Q==" + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-2.21.0.tgz", + "integrity": "sha512-Q27kpuaqQZsBzHfBTudNLLraMfIn49PZuVXZo1TRMmo1AmJ+4BZ50q4VpiCe4r2Kk5xdbI3ZeTkO14Myh0U2kQ==", + "dependencies": { + "debug": "^4.3.3" + } }, "node_modules/@mongodb-js/saslprep": { "version": "1.1.1", @@ -18385,9 +18388,12 @@ } }, "@microsoft/teams-js": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-1.11.0.tgz", - "integrity": "sha512-5utMOMWXdNq0cV8hGIZEUpUVChoasoYjBOItgFIKE2a4vavmzlhra+GNXMdpvlYlv6/r7ORtVCQUDFJvPTVj2Q==" + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-2.21.0.tgz", + "integrity": "sha512-Q27kpuaqQZsBzHfBTudNLLraMfIn49PZuVXZo1TRMmo1AmJ+4BZ50q4VpiCe4r2Kk5xdbI3ZeTkO14Myh0U2kQ==", + "requires": { + "debug": "^4.3.3" + } }, "@mongodb-js/saslprep": { "version": "1.1.1", diff --git a/package.json b/package.json index b7228422..afe39c0b 100644 --- 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 index 707854ef..34c72b19 100644 --- 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]); -}; +}; \ No newline at end of file diff --git a/src/client/containers/ConfigurationCreateContainer/hooks/useResources.ts b/src/client/containers/ConfigurationCreateContainer/hooks/useResources.ts index ecd21adc..3485adc2 100644 --- 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 => new Promise(resolve => { - microsoftTeams.getContext(({ channelId }) => resolve(channelId as string)); -}); +const getChannelId = (): Promise => 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 index 474aeb0c..8d634206 100644 --- 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]); -}; +}; \ No newline at end of file diff --git a/src/client/containers/ConfigurationUpdateContainer/hooks/useConfigurationDelete.ts b/src/client/containers/ConfigurationUpdateContainer/hooks/useConfigurationDelete.ts index e4bf7b17..33585d1b 100644 --- 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 index a04302c3..f69ebdb5 100644 --- 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 index 4e5e5f63..43de2b3c 100644 --- 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]); }; diff --git a/src/client/containers/LoginContainer/hooks/useLogin.ts b/src/client/containers/LoginContainer/hooks/useLogin.ts index 87645546..c85e7cc3 100644 --- a/src/client/containers/LoginContainer/hooks/useLogin.ts +++ b/src/client/containers/LoginContainer/hooks/useLogin.ts @@ -1,10 +1,6 @@ -import * as microsoftTeams from "@microsoft/teams-js"; +import { authentication } from "@microsoft/teams-js"; import { useCallback, useState } from "react"; -interface UseLoginParams { - onSuccess: () => void; -} - type UseLoginResult = [ () => void, { @@ -12,24 +8,12 @@ type UseLoginResult = [ } ] -const errorToText = (error?: string): string => { - switch (error) { - case "CancelledByUser": - case "access_denied": - return "You need to authorize Microsoft Teams app to connect your Zeplin projects and styleguides."; - default: - return "Authorization failed due to an API related connectivity issue. Please retry logging in."; - } -}; - -export const useLogin = ({ onSuccess }: UseLoginParams): UseLoginResult => { - const [loginError, setError] = useState(); +export const useLogin = (): UseLoginResult => { + const [loginError] = useState(); const login = useCallback( - () => microsoftTeams.authentication.authenticate({ + () => authentication.authenticate({ height: 476, - successCallback: onSuccess, - failureCallback: value => setError(errorToText(value)), url: "/api/auth/authorize" }), [] diff --git a/src/client/containers/ZeplinAuthEndContainer/ZeplinAuthEndContainer.tsx b/src/client/containers/ZeplinAuthEndContainer/ZeplinAuthEndContainer.tsx index 7f38cc0f..67c66a93 100644 --- a/src/client/containers/ZeplinAuthEndContainer/ZeplinAuthEndContainer.tsx +++ b/src/client/containers/ZeplinAuthEndContainer/ZeplinAuthEndContainer.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent, useEffect } from "react"; import { useRouter } from "next/router"; -import * as microsoftTeams from "@microsoft/teams-js"; +import { app, authentication } from "@microsoft/teams-js"; import { Loader } from "@fluentui/react-northstar"; import { requester, storage } from "../../lib"; @@ -14,9 +14,9 @@ export const ZeplinAuthEndContainer: FunctionComponent = () => { } = useRouter(); useEffect(() => { - microsoftTeams.initialize(async () => { + app.initialize().then(async () => { if (error) { - microsoftTeams.authentication.notifyFailure(String(error)); + authentication.notifyFailure(String(error)); return; } @@ -24,9 +24,9 @@ export const ZeplinAuthEndContainer: FunctionComponent = () => { const { accessToken, refreshToken } = await requester.createAuthToken(String(code)); storage.setAccessToken(accessToken); storage.setRefreshToken(refreshToken); - microsoftTeams.authentication.notifySuccess(); + authentication.notifySuccess(); } catch (tokenError) { - microsoftTeams.authentication.notifyFailure((tokenError as Error)?.message ?? `Unknown error ${tokenError}`); + authentication.notifyFailure((tokenError as Error)?.message ?? `Unknown error ${tokenError}`); } }); }, []); diff --git a/src/client/hooks/useInitialize.ts b/src/client/hooks/useInitialize.ts index 58c5b228..eddc2c1d 100644 --- a/src/client/hooks/useInitialize.ts +++ b/src/client/hooks/useInitialize.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import * as microsoftTeams from "@microsoft/teams-js"; +import { app } from "@microsoft/teams-js"; interface UseInitializeParams { onSuccess?: () => void; @@ -12,8 +12,8 @@ interface UseInitializeResult { export const useInitialize = ({ onSuccess }: UseInitializeParams = {}): UseInitializeResult => { const [isInitializeLoading, setIsInitializeLoading] = useState(true); useEffect(() => { - microsoftTeams.initialize(() => { - microsoftTeams.appInitialization.notifySuccess(); + app.initialize().then(() => { + app.notifySuccess(); setIsInitializeLoading(false); onSuccess?.(); });