Merge pull request #10852 from OfficeDev/yiqingzhao/merge-hotfix-to-dev

build(release): merge hotfix to dev

packages/vscode-extension/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 5.4.1 - Feb 07, 2024
+Hotfix version.
+
+We made UI and docs updates to multiple places according to [Latest updates to the Microsoft 365 Developer Program](https://devblogs.microsoft.com/microsoft365dev/stay-ahead-of-the-game-with-the-latest-updates-to-the-microsoft-365-developer-program/).
+
 ## 5.4.0 - Dec 18, 2023
 
 This minor version update of Teams Toolkit includes new features and bug fixes based on your feedback. The new features include the Adaptive Card Previewer, Teams App Test Tool, new project templates for AI Assistant Bot, and a refreshed Sample Gallery. We previously shared these incremental changes in the prerelease version and through a series of blog posts:

packages/vscode-extension/media/itp/itp.md

@@ -1,63 +1,33 @@
-# How to create a free Microsoft 365 test tenant?
+# Prepare a Qualified Microsoft 365 Account for Teams App Development
 
-Microsoft 365 test tenant is to get you an instant sandbox of Microsoft 365 developer environment. Instead of making you provison all your Microsoft 365 apps and install your data packs one by one, it contains pre-installed sample data packs so you can quickly work on this tenant.
+## Account Requirements
 
-## Prequisitives
+The following two conditions are required for Teams app development:
 
-- A personal Microsoft account, or a work or school account.
+1. The Microsoft 365 account should be your work or school account, not your personal account.
+2. The Microsoft 365 account needs permission to upload custom app in Teams.
 
-## Steps to create instant sandbox
+You can contact your tenant administrator to turn on the upload custom app permission for your organization.
 
-- Sign In [Microsoft 365 Dev program](https://developer.microsoft.com/en-us/microsoft-365/dev-program) with your personal Microsoft account or your work or school account.
+Or, if you're a Visual Studio subscriber, create a Microsoft 365 developer account to
+resolve your account issues. [Learn more about Microsoft 365 Developer Program](https://learn.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program).
 
-![Sign in](./m365.png)
+## How
 
-If you don't have a personal Microsoft account, or a work or school account. You can click `Create one` to create an account.
+### Step 1. Create Microsoft 365 Development Account
 
-![Create account](./createone.png)
+[Sign up for Microsoft 365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program) to create an instant sandbox and get your developer account.
 
->Note: Please do not Sign in Microsoft 365 Dev program with a *.onmicrosoft.com account. Otherwise, you will meet the following error in the next step.
+![Join Now](joinnow.png)
 
-![Sign in with wrong account](./joinnowerror.png)
+For more information, visit the [Set up a developer subscription documentation](https://learn.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program-get-started).
 
-- Click `Join now`, this will navigate you to instant sandbox creation page.
+> Use the Administrator account (\*.onmicrosoft.com) email address to log in to your development environment.
 
-![Join now](./joinnow.png)
+### Step 2. Use your development account in Teams Toolkit for Visual Studio Code
 
-- (Optional) If you already have a normal subscription before, you can click `Start` button on dashboard page to setup an instant sandbox.
+Open Teams Toolkit for Visual Studio Code and log into the Teams Toolkit extension using your developer account created in step 1.
 
-![questions](./withnormalsubscription.png)
+The permission to upload custom app is already set up.
 
-- Answer some questions to customize your Developer Program experience
-
-![questions](./m365questions1.png)
-
-![questions2](./m365questions2.png)
-
-- Setup your Microsoft 365 E5 sandbox
-
-![setup Microsoft 365 sandbox](./setupm365.png)
-
-![setup Microsoft 365 sandbox step 2](./setupm3652.png)
-
-- You may need to add a phone number for security verification.
-
-![Phone verification](./phoneverification.png)
-
-## Now you have an instant sandbox.
-
->Note: You can use the newly created *.onmicorosoft.com accounts to log in to Teams Toolkit for VS Code. The custom app upload permission has already been configured.
-
-![Instant sandbox](./m365-dev-program-instant-sandbox.png)
-
-## (Optional) Check whether custom apps upload option is on
-
-- Sign in to [Teams Admin Center](https://admin.teams.microsoft.com) with your admin credentials.
-
-- Navigate to `Teams apps > Setup Policies > Global`.
-
-- Check whether `Upload custom apps` is `On`.
-
-![Instant sandbox](./turn-on-sideload.png)
-
-- Select `Save`.
+![Developer Account](ttk-m365-account.png)

packages/vscode-extension/package.json

@@ -2,7 +2,7 @@
   "name": "ms-teams-vscode-extension",
   "displayName": "Teams Toolkit",
   "description": "Create, debug, and deploy Teams apps with Teams Toolkit",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "publisher": "TeamsDevApp",
   "author": "Microsoft Corporation",
   "private": true,

packages/vscode-extension/package.nls.json

@@ -20,9 +20,9 @@
     "teamstoolkit.accountTree.signingInAzure": "Azure: Signing in...",
     "teamstoolkit.accountTree.signingInM365": "Microsoft 365: Signing in...",
     "teamstoolkit.accountTree.switchingM365": "Microsoft 365: Switching...",
-    "teamstoolkit.appStudioLogin.createM365TestingTenant": "Create a Microsoft 365 Testing Tenant",
-    "teamstoolkit.appStudioLogin.loginCancel": "Sign in canceled. The Teams Toolkit requires a Microsoft 365 (organizational account) with custom app upload option.\nIf your account is not ready, create a free Microsoft 365 testing tenant to start your Teams App development.",
-    "teamstoolkit.appStudioLogin.message": "The Teams Toolkit requires a Microsoft 365 organizational account where Teams is running and has been registered. You can create a free testing account from Microsoft 365 Developer Program if needed.",
+    "teamstoolkit.appStudioLogin.createM365TestingTenant": "Create a Microsoft 365 developer sandbox",
+    "teamstoolkit.appStudioLogin.loginCancel": "Sign-in canceled. Teams Toolkit needs a Microsoft 365 account with custom app upload permission. If you're a Visual Studio subscriber, create a developer sandbox with the Microsoft 365 Developer Program (https://developer.microsoft.com/en-us/microsoft-365/dev-program).",
+    "teamstoolkit.appStudioLogin.message": "Teams Toolkit needs a Microsoft 365 account with custom app upload permission. If you're a Visual Studio subscriber, create a developer sandbox with the Microsoft 365 Developer Program.",
     "teamstoolkit.azureLogin.failToFindSubscription": "Failed to find a subscription.",
     "teamstoolkit.azureLogin.message": "The Teams Toolkit requires an Azure account and subscription to deploy the Azure resources for your project. You will not be charged without further confirmation.",
     "teamstoolkit.azureLogin.subscription": "subscription",
@@ -61,7 +61,8 @@
     "teamstoolkit.commands.azureAccountSettings.title": "Azure Portal",
     "teamstoolkit.commands.createAccount.azure": "Create an Azure account",
     "teamstoolkit.commands.createAccount.free": "Free",
-    "teamstoolkit.commands.createAccount.m365": "Create a Microsoft 365 testing tenant",
+    "teamstoolkit.commands.createAccount.m365": "Create a Microsoft 365 developer sandbox",
+    "teamstoolkit.commands.createAccount.requireSubscription": "Requires Visual Studio Subscription",
     "teamstoolkit.commands.createAccount.title": "Create an Account",
     "teamstoolkit.commands.createEnvironment.title": "Create New Environment",
     "teamstoolkit.commands.createProject.title": "Create a New App",
@@ -398,8 +399,8 @@
     "teamstoolkit.walkthroughs.description": "Jumpstart your Teams app development experience",
     "teamstoolkit.walkthroughs.steps.teamsToolkitBuildApp.description": "Start with [Teams](https://aka.ms/teamsfx-capabilities-overview) or [Outlook add-in](https://aka.ms/teamsfx-outlook-add-in-capabilities) capability to build your first app.\nYou can create it from the scratch or explore our samples to help you quickly get started with the real-world examples and code structures.\n[Create a New App](command:fx-extension.createFromWalkthrough?%5B%22WalkThrough%22%5D)\n[View Samples](command:fx-extension.openSamples?%5B%22WalkThrough%22%5D)",
     "teamstoolkit.walkthroughs.steps.teamsToolkitBuildApp.title": "Build your first app",
-    "teamstoolkit.walkthroughs.steps.teamsToolkitCreateFreeAccount.description": "Create a free Microsoft 365 testing tenant to install and preview your Teams apps in Teams.\n If you already have a Microsoft 365 organizational account, [Sign in to Microsoft 365](command:fx-extension.signinM365?%5B%22WalkThrough%22%5D) and validate [custom app upload](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading) is enabled.\n[Create a Microsoft 365 Testing Tenant](https://developer.microsoft.com/en-us/microsoft-365/dev-program)",
-    "teamstoolkit.walkthroughs.steps.teamsToolkitCreateFreeAccount.title": "Create a Microsoft 365 testing tenant for free",
+    "teamstoolkit.walkthroughs.steps.teamsToolkitCreateFreeAccount.description": "To build app for Teams, you need a Microsoft account with custom app upload permissions. Don't have one? Create a Microsoft developer sandbox with the Microsoft 365 Developer Program.\n Notice that Microsoft 365 Developer Program requires Visual Studio subscriptions. [Learn more about Microsoft 365 Developer Program](https://learn.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program)\n[Join Microsoft 365 Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)",
+    "teamstoolkit.walkthroughs.steps.teamsToolkitCreateFreeAccount.title": "Create Microsoft 365 developer sandbox",
     "teamstoolkit.walkthroughs.steps.teamsToolkitDeploy.description": "You can provision resources in the cloud and deploy your app's code to the provisioned resources. Finally, distribute your first app to Teams.\n[Open Lifecycle Commands](command:fx-extension.openLifecycleTreeview?%5B%22WalkThrough%22%5D)\n__Tip: Learn more about ['Lifecycle'](https://aka.ms/teamsfx-provision).__",
     "teamstoolkit.walkthroughs.steps.teamsToolkitDeploy.title": "Deploy Teams apps",
     "teamstoolkit.walkthroughs.steps.teamsToolkitEnvironment.description": "Developing Teams application with JavaScript or TypeScript requires NPM and Node.js. Check your environment and get ready for your first Teams app development.\n[Run Prerequisite Checker](command:fx-extension.validate-getStarted-prerequisites?%5B%22WalkThrough%22%5D)",

packages/vscode-extension/src/controls/webviewDocs/accountHelp.tsx

@@ -41,20 +41,21 @@ export default function PrepareM365Account() {
             The Microsoft 365 account should be your work or school account, not your personal
             account.
           </li>
-          <li>
-            The Microsoft 365 account should be granted with custom app upload permission to update
-            the Teams app.
-          </li>
+          <li>The Microsoft 365 account needs permission to upload custom app in Teams.</li>
         </ol>
       </p>
       <p>
-        Custom app upload is the permission of your Microsoft 365 account to upload the Teams app to
-        Teams client. You can contact your tenant administrator to turn on the custom app upload
-        permission for your organization.{" "}
+        You can contact your tenant administrator to turn on the upload custom app permission for
+        your organization.{" "}
       </p>
       <p>
-        Or you can create a free qualified Microsoft 365 development account to resolve the above
-        issues you may have.
+        Or, if you're a Visual Studio subscriber, create a Microsoft 365 developer account to
+        resolve your account issues.{" "}
+        <ExternalLink
+          title="Learn more about Microsoft 365 Developer Program"
+          link="https://learn.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program"
+          triggerFrom={TelemetryTriggerFrom.AccountHelp}
+        />
       </p>
 
       <h2 id="how">How</h2>
@@ -88,8 +89,8 @@ export default function PrepareM365Account() {
           </p>
           <blockquote>
             <p>
-              You will use the Administrator (*.onmicrosoft.com) email address created in this step
-              to login to your development environment.
+              Use the Administrator account (*.onmicrosoft.com) email address to log in to your
+              development environment.
             </p>
           </blockquote>
         </CollapsibleStep>
@@ -105,7 +106,7 @@ export default function PrepareM365Account() {
             Open Teams Toolkit for Visual Studio Code and log into the Teams Toolkit extension using
             your developer account created in step 1.
           </p>
-          <p>The custom app upload permission has already been configured.</p>
+          <p>The permission to upload custom app is already set up.</p>
           <p>
             <img src={M365Account} alt="Teams Toolkit Microsoft 365 account" />
           </p>

packages/vscode-extension/src/handlers.ts

@@ -1121,7 +1121,7 @@ export async function createAccountHandler(args: any[]): Promise<void> {
   const m365Option: OptionItem = {
     id: "createAccountM365",
     label: `$(add) ${localize("teamstoolkit.commands.createAccount.m365")}`,
-    description: localize("teamstoolkit.commands.createAccount.free"),
+    description: localize("teamstoolkit.commands.createAccount.requireSubscription"),
   };
   const azureOption: OptionItem = {
     id: "createAccountAzure",