From efec7dc067ae6abcdb201a05a2b0bb0bdc4885cb Mon Sep 17 00:00:00 2001 From: Bernhard Wittmann Date: Thu, 1 Oct 2026 14:54:14 +0000 Subject: [PATCH] feat(editor): Align the Microsoft Teams manual setup with the new design (no-changelog) (#39798) Co-authored-by: Elias Meire --- .../src/components/N8nIcon/custom/azure.svg | 1 + .../src/components/N8nIcon/custom/entra.svg | 1 + .../src/components/N8nIcon/custom/teams.svg | 2 +- .../src/components/N8nIcon/icons.ts | 4 + .../frontend/@n8n/i18n/src/locales/en.json | 83 +-- .../__tests__/AgentChannelModal.test.ts | 11 +- .../teams/AgentChannelTeamsAvailability.vue | 306 +++------ .../teams/AgentChannelTeamsSetup.test.ts | 615 ++++++++++++------ .../channels/teams/AgentChannelTeamsSetup.vue | 456 +++++++++---- .../src/features/agents/channels/types.ts | 3 + .../components/AgentBuilderEditorColumn.vue | 1 + .../agents/components/AgentChannelModal.vue | 6 +- .../components/AgentTriggersSection.vue | 9 +- 13 files changed, 915 insertions(+), 583 deletions(-) create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/azure.svg create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/entra.svg diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/azure.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/azure.svg new file mode 100644 index 00000000000..bab55728974 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/azure.svg @@ -0,0 +1 @@ + diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/entra.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/entra.svg new file mode 100644 index 00000000000..ae03836dd83 --- /dev/null +++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/entra.svg @@ -0,0 +1 @@ + diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/teams.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/teams.svg index 98d3ab7326b..c58bf666fb5 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/teams.svg +++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/teams.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts index c5bbf8eb6f5..870ad604212 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts @@ -1,9 +1,11 @@ import Anthropic from './custom/anthropic.svg'; +import Azure from './custom/azure.svg'; import Binary from './custom/binary.svg'; import BoltFilled from './custom/bolt-filled.svg'; import Continue from './custom/continue.svg'; import Discord from './custom/discord.svg'; import EmptyOutput from './custom/empty-output.svg'; +import Entra from './custom/entra.svg'; import FilledSquare from './custom/filled-square.svg'; import Form from './custom/form.svg'; import GripLinesVertical from './custom/grip-lines-vertical.svg'; @@ -539,6 +541,8 @@ export const updatedIconSet = { telegram: Telegram, discord: Discord, teams: Teams, + azure: Azure, + entra: Entra, spinner: Spinner, 'node-dirty': NodeDirty, 'node-ellipsis': NodeEllipsis, diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json index 693ecc26440..7fd4a9d9af6 100644 --- a/packages/frontend/@n8n/i18n/src/locales/en.json +++ b/packages/frontend/@n8n/i18n/src/locales/en.json @@ -8888,44 +8888,41 @@ "agents.channels.discord.setup.interactionsEndpoint.hint": "Save it as the Interactions Endpoint URL on the application's General Information page after the agent is connected and published.", "agents.channels.setup.publishNotice": "Publish this agent before adding the Interactions Endpoint URL in Discord.", "agents.channels.teams.messagingEndpointUrl.label": "Messaging endpoint URL", - "agents.channels.teams.setup.createBot.title": "Create an Azure Bot", - "agents.channels.teams.setup.createBot.description": "In the Azure portal, create a single-tenant Azure Bot with this endpoint, then turn on the Microsoft Teams channel. Already have a bot? Paste the endpoint into its Configuration page instead.", + "agents.channels.teams.setup.createBot.title": "Deploy Azure Bot", + "agents.channels.teams.setup.createBot.description": "Prefilled from your credential. You choose the subscription and resource group.", "agents.channels.teams.setup.createBot.button": "Deploy to Azure", - "agents.channels.teams.setup.createBot.portalButton": "Open Azure portal", - "agents.channels.teams.setup.createBot.hint": "The deployment fills in the endpoint and turns the Teams channel on. Paste your app registration's Application and Directory IDs into it, then pick a subscription and resource group.", - "agents.channels.teams.setup.createBot.prerequisites": "You need a work or school account with an Azure subscription, and permission to register an app in Microsoft Entra. If either is missing, ask an administrator to create the bot and send you its Application and Directory IDs.", - "agents.channels.teams.setup.connectBot.title": "Connect the bot", - "agents.channels.teams.setup.connectBot.description": "In your bot's Azure page, open Test in Web Chat and send any message. We'll pick the bot up from it.", - "agents.channels.teams.setup.connectBot.listening": "Listening for a message from your bot…", - "agents.channels.teams.setup.connectBot.slow": "Taking long? Check the endpoint was saved and the Teams channel is on, or enter the values yourself.", - "agents.channels.teams.setup.connectBot.manualLink": "enter the values yourself", - "agents.channels.teams.setup.connectBot.expired": "We stopped listening. Start again when your bot is ready.", - "agents.channels.teams.setup.connectBot.found": "Found your bot. Add its client secret to finish.", - "agents.channels.teams.setup.connectBot.foundExisting": "Found your bot, and a credential that already has its details.", - "agents.channels.teams.setup.connectBot.clientIdLabel": "Application (client) ID", - "agents.channels.teams.setup.connectBot.tenantIdLabel": "Directory (tenant) ID", - "agents.channels.teams.setup.connectBot.tenantMissing": "This message carried no tenant, which Web Chat does not send. Add your Directory (tenant) ID to the credential.", - "agents.channels.teams.setup.availability.title": "Choose where it's available", - "agents.channels.teams.setup.availability.description": "Set which conversations the agent can join. Changing these later means downloading and uploading the app again.", + "agents.channels.teams.setup.createBot.hint": "You need an Azure subscription.", + "agents.channels.teams.setup.availability.title": "Choose where it works", + "agents.channels.teams.setup.availability.description": "Changing these later means downloading and uploading the app again.", "agents.channels.teams.setup.availability.directChat": "Direct chat", - "agents.channels.teams.setup.availability.directChatHint": "Always on, so we can confirm the connection works.", + "agents.channels.teams.setup.availability.directChatOnly": "Direct chat always on", "agents.channels.teams.setup.availability.teamChannels": "Team channels", - "agents.channels.teams.setup.availability.teamChannelsHint": "Members can add and @mention the agent in a channel.", + "agents.channels.teams.setup.availability.teamChannelsHint": "Members can add and {'@'}mention the agent in a channel", "agents.channels.teams.setup.availability.groupChats": "Group and meeting chats", - "agents.channels.teams.setup.availability.groupChatsHint": "The agent can join multi-person and meeting conversations.", - "agents.channels.teams.setup.availability.readingTitle": "What can it see?", + "agents.channels.teams.setup.availability.groupChatsHint": "Anyone in the chat can add the agent and message it", "agents.channels.teams.setup.availability.readAllChannelMessages": "Read all channel messages", - "agents.channels.teams.setup.availability.readAllChannelMessagesHint": "Otherwise it only sees messages that @mention it. Turn on team channels first.", + "agents.channels.teams.setup.availability.readAllChannelMessagesHint": "Team owners approve this when they add the app", "agents.channels.teams.setup.availability.readAllGroupMessages": "Read all group-chat messages", - "agents.channels.teams.setup.availability.readAllGroupMessagesHint": "Otherwise it only sees messages that @mention it. Turn on group and meeting chats first.", - "agents.channels.teams.setup.availability.untested": "Team channels and group chats are not covered by tests yet. Direct chat is.", - "agents.channels.teams.setup.install.title": "Install for me", - "agents.channels.teams.setup.install.description": "Upload the app package in Teams: Apps, then Manage your apps, then Upload an app.", + "agents.channels.teams.setup.availability.readAllGroupMessagesHint": "Approved by the person who adds the app to the chat", + "agents.channels.teams.setup.registerApp.title": "Register application", + "agents.channels.teams.setup.registerApp.description": "Go to Microsoft Entra and register a new application. Skip this step if you already have a credential.", + "agents.channels.teams.setup.registerApp.hint": "Copy the Directory (tenant) ID and Application (client) ID. Then add a client secret and copy its value.", + "agents.channels.teams.setup.registerApp.button": "Open Microsoft Entra", + "agents.channels.teams.setup.availability.readsChannels": "Reads channels", + "agents.channels.teams.setup.availability.readsGroupChats": "Reads group chats", + "agents.channels.teams.setup.availability.summarySeparator": " · ", + "agents.channels.teams.setup.install.identityTooltip": "Name and avatar come from the agent. Teams needs a description, so this default is used. To change any of it, edit the agent and download the package again.", + "agents.channels.teams.setup.install.downloaded": "App package downloaded. Upload it in Teams under Apps › Manage your apps › Upload an app.", + "agents.channels.teams.setup.createBot.needsCredential": "Pick a verified credential first. The deployment uses its Application and Directory IDs.", + "agents.channels.teams.setup.createBot.needsFreeCredential": "Pick a credential that no other agent uses before you deploy.", + "agents.channels.teams.setup.install.needsReady": "Pick a verified credential in step 2 first. The package uses its Application (client) ID.", + "agents.channels.teams.setup.createBot.loadFailed": "Could not load the Teams setup for this agent.", + "agents.channels.teams.setup.install.connectFailed": "The package downloaded, but the channel is not connected: {error}", + "agents.channels.teams.setup.install.staleDownload": "The credential changed during the download, so that package is for the previous bot. Download it again.", + "agents.channels.teams.setup.install.title": "Connect Microsoft Teams", + "agents.channels.teams.setup.install.description": "Download the zip and upload it in Teams under Apps › Manage your apps › Upload an app.", "agents.channels.teams.setup.install.button": "Download app package", - "agents.channels.teams.setup.install.needsBot": "Connect the bot first. The package needs its Application (client) ID.", - "agents.channels.teams.setup.install.hint": "Upload the zip exactly as downloaded. If the option is missing, a Teams administrator must allow custom app uploads for your organisation.", - "agents.channels.teams.setup.install.connectButton": "Connect", - "agents.channels.teams.setup.install.needsCredential": "Add the credential in step 2 before connecting.", + "agents.channels.teams.setup.install.hint": "No Upload an app option? Ask your Teams admin to allow custom app uploads.", "agents.channels.teams.setup.install.downloadFailed": "Could not download the app package. Try again.", "agents.channels.teams.setup.publishNotice": "Publish this agent before you message it in Teams.", "agents.channels.telegram.setup.credential.title": "Add credential", @@ -9180,36 +9177,24 @@ "promotions.bindings.editorClosed": "The editor closed. Open it again to continue.", "credentialEdit.typeUnavailable": "This credential type isn't available. Install it and try again.", "credentialEdit.savedLoadFailed": "The credential was saved, but its details couldn't be loaded. Retry to continue editing.", - "agents.channels.teams.setup.connectBot.openBotHint": "Your bot is called {botName}. Open it, then choose Test in Web Chat.", "agents.channels.teams.setup.install.checking": "Checking the credential can reach Microsoft…", - "agents.channels.teams.setup.install.verified": "The credential works. Microsoft issued a token for this bot.", + "agents.channels.teams.setup.install.verified": "Credential verified with Microsoft Entra.", "agents.channels.teams.setup.install.failed.certificate": "This credential uses certificate authentication, which Teams channels cannot use. Switch it to Client Secret.", "agents.channels.teams.setup.install.failed.incomplete": "This credential is missing its tenant ID, client ID or client secret.", "agents.channels.teams.setup.install.failed.rejected": "Microsoft rejected these details. Check the client secret has not expired, and that the tenant and client IDs match the app registration.", "agents.channels.teams.setup.install.failed.unreachable": "Could not reach Microsoft to check the credential. Check this instance has outbound internet access, then try again.", "agents.channels.teams.setup.install.recheck": "Check again", - "agents.channels.teams.setup.createBot.entraButton": "Register an app in Entra", - "agents.channels.teams.setup.connectBot.openBotButton": "Open Azure Bot Services", - "agents.channels.teams.setup.createCredential.title": "Register the app and add the credential", - "agents.channels.teams.setup.createCredential.description": "Register an app in Microsoft Entra, add a client secret, then put its Directory (tenant) ID, Application (client) ID and secret into a credential here. Everything after this is built from it.", - "agents.channels.teams.setup.createCredential.button": "Register an app in Microsoft Entra", - "agents.channels.teams.setup.createCredential.prerequisites": "The three values come from a Microsoft Entra app registration. If you do not have one, create it first — you need a work or school account with permission to register apps, and an Azure subscription for the next step.", - "agents.channels.teams.setup.createBot.needsCredential": "Add the credential first. The deployment needs its Application and Directory IDs.", - "agents.channels.teams.setup.connectBot.mismatch": "A bot reached n8n, but it is not the one this credential describes. Check the endpoint is on the right bot.", - "agents.channels.teams.setup.connectBot.skipped": "Check skipped. You can still finish, but nothing has confirmed the endpoint yet.", - "agents.channels.teams.setup.createBot.existingBot": "Already have an Azure bot?", - "agents.channels.teams.setup.createBot.existingBotHint": "Paste this into your bot's Configuration page as the messaging endpoint, and turn on the Microsoft Teams channel.", - "agents.channels.teams.setup.install.openChat": "Open the chat in Teams", + "agents.channels.teams.setup.createCredential.title": "Create credential", + "agents.channels.teams.setup.createCredential.description": "Use the tenant ID, client ID and client secret.", + "agents.channels.teams.setup.createBot.existingBot": "Use an existing Azure Bot", + "agents.channels.teams.setup.createBot.existingBotHint": "Paste this into the bot’s Configuration page and turn on the Microsoft Teams channel.", "agents.channels.teams.setup.availability.whereTitle": "Where can people use the agent?", - "agents.channels.teams.setup.availability.readingSummaryNone": "Only messages addressed to it", - "agents.channels.teams.setup.availability.readingNote": "Team owners approve read access when they install the app.", "agents.channels.teams.settings.updateNotice": "Changes here update the app in Teams. Download the package again and upload it to apply them.", "agents.channels.teams.settings.displayName": "Agent name in Teams", "agents.channels.teams.settings.displayNamePlaceholder": "Uses the agent's name", "agents.channels.teams.settings.description": "Description", "agents.channels.teams.settings.descriptionPlaceholder": "What this agent helps with", "agents.channels.teams.settings.descriptionDefault": "Chat with {name}, an agent powered by n8n.", - "agents.channels.teams.setup.createCredential.claimed": "{agent} already uses this credential for Teams. Microsoft allows one bot for each app registration, so pick a different credential or register another app in Entra.", - "agents.channels.teams.setup.createBot.needsFreeCredential": "Pick a credential no other agent uses before deploying.", + "agents.channels.teams.setup.createCredential.claimed": "Already connected to {agent}. Register a new app for this agent, or disconnect it there first.", "agents.channels.teams.setup.install.failed.cloud": "Teams channels only reach the global Microsoft cloud. Set the credential's Microsoft Graph API base URL back to https://graph.microsoft.com." } diff --git a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChannelModal.test.ts b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChannelModal.test.ts index 597f9b0e70c..8a2c797854c 100644 --- a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChannelModal.test.ts +++ b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChannelModal.test.ts @@ -66,7 +66,7 @@ vi.mock('../composables/useAgentTelemetry', () => ({ vi.mock('../channels/registry', async () => { const { ref, defineComponent } = await import('vue'); const platformView = { - props: ['modelValue', 'mode', 'isPublished', 'runtime'], + props: ['modelValue', 'mode', 'isPublished', 'runtime', 'ensureAgentPersisted'], emits: ['update:modelValue', 'connect', 'connected'], setup: () => { // Platforms that drive their own flow (Slack) report `connected` while @@ -91,6 +91,7 @@ vi.mock('../channels/registry', async () => { >