Release v4.3.0 (#380)

## 🎯 Aim

The aim is to create a new minor release that adds more manage capabilities to the SPFx solutions view for every app catalog. It also includes a new `/manage` GitHub Copilot Chat command that allows to retrieve data from SharePoint Online. Improvements to the upgrade and validate actions which now allow to generate a code tour with guidance and added support for SPFx Fast Serve as an optional dependency.

## 📷 Result

![spfx-chat2](https://github.com/user-attachments/assets/ff86b85b-82eb-4b8c-87db-7b555a5bce41)

![sign-in-cache](https://github.com/user-attachments/assets/737d0b29-87a0-4821-a425-ae91f66fd9a6)

![spfx-fast-serve](https://github.com/user-attachments/assets/33e9373b-a304-4dbf-9b05-8b83aa4f5536)

![app-catalog-list](https://github.com/user-attachments/assets/46739b9f-da48-4905-8588-9c82a4a8d528)

## ✅ What was done

- [x] Added remove confirmation prompt when removing SPFx solution from app catalog
- [x] Added /manage GitHub Chat command
- [x] Added generating code tour for upgrade and validate SPFx solution actions
- [x] Added upgrade SPFx project action
- [x] Added SPFx Fast Serve optional dependency to the scaffolding form
- [x] Improved sign in experience with caching of Client ID and Tenant ID

---------

Co-authored-by: Saurabh Tripathi <[email protected]>
Co-authored-by: Nico De Cleyre <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log
 
+## [4.3.0] - 2024-12-11
+
+- Added remove confirmation prompt when removing SPFx solution from app catalog
+- Added /manage GitHub Chat command
+- Added generating code tour for upgrade and validate SPFx solution actions
+- Added upgrade SPFx project action
+- Added SPFx Fast Serve optional dependency to the scaffolding form
+- Improved sign in experience with caching of Client ID and Tenant ID
+
 ## [4.2.0] - 2024-10-19
 
-- Include m365 prefix and log passed CLI command options
-- Refactors to ensure types for settings
+- Included m365 prefix and log passed CLI command options
+- Refactored to ensure types for settings
 - Added a new project additional step to create or not the node version manager configuration file
 - Added new VSCode setting createNodeVersionFileDefaultValue to define the default value of the new project additional step
 - Added new VSCode setting nodeVersionManagerFile to specify which configuration file to be created

README.md

@@ -104,22 +104,14 @@ Creating a new project was never easier. Just use the **create a new project** a
 
 ![Create new project](./assets/images/scaffolding.png)
 
-Check it out in action 👇.
-
-![Create new project](./assets/images/scaffolding-form.gif)
-
 It's possible to scaffold any kind of SPFx project.
 
 ![All SPFx project support](./assets/images/scaffolding-support.png)
 
-Install additional dependencies with a single click straight from the scaffolding form. Currently we support installing [PnP reusable property pane controls](https://pnp.github.io/sp-dev-fx-property-controls/), [PnP reusable React controls](https://pnp.github.io/sp-dev-fx-controls-react/), and [PnPjs](https://pnp.github.io/pnpjs/).
+Install additional dependencies with a single click straight from the scaffolding form. Currently we support installing [PnP reusable property pane controls](https://pnp.github.io/sp-dev-fx-property-controls/), [PnP reusable React controls](https://pnp.github.io/sp-dev-fx-controls-react/), [PnPjs](https://pnp.github.io/pnpjs/). Add and preconfigure [SPFx Fast Serve](https://github.com/s-KaiNet/spfx-fast-serve) and add a Node Version Manager configuration file either for NVM or NVS.
 
 ![Additional dependency step](./assets/images/scaffolding-additional-step.png)
 
-When you can set the additional dependencies it's also possible to automatically create the node version manager file with the version of Node.js used when creating the project. These settings are available in the extension settings.
-
-![Additional dependency step node version](./assets/images/scaffolding-additional-step-node-version.png)
-
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#1-scaffold-a-new-spfx-project)
 
 ### 6️⃣ Sign in to your tenant & retrieve environment details
@@ -136,6 +128,8 @@ SPFx Toolkit will guide you through the process of creating a new app registrati
 
 ![entra app reg form](./assets/images/sign-in-entra-app-reg-form.png)
 
+Check it out in action 👇
+
 ![app registration](./assets/images/sign-in.gif)
 
 If you already have an Entra App Registration you may use it to sign in to your tenant by providing the Client Id and Tenant Id.
@@ -159,6 +153,7 @@ After successful sign in, an additional view is presented that shows a list of l
 - **Remove**: Removes the app from the app catalog.
 - **Enable**: Allows end users to add the solution to their SharePoint sites.
 - **Disable**: Hides the solution from end users, preventing them from adding it to sites.
+- **Upgrade**: Upgrades the solution to the latest version available in the app catalog for the specified site.
 
 Additionally, it will show you all tenant-wide extensions installed on your tenant.
 
@@ -202,13 +197,17 @@ And for Azure DevOps👇
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)
 
-- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md report with upgrade guidance to the latest supported SPFx version by the extension. 
+- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md and/or code tour report with upgrade guidance to the latest supported SPFx version by the extension. The upgrade guidance provides optional as well as required steps a user needs to take manually in order to upgrade the project. At the end of the guidance file, the user may find a summary of the steps in a single script and a couple of manual steps that need to be taken.
 
 ![Upgrade project](./assets/images/upgrade-project.png)
 
+And the code tour guidance will provide you upgrade tips directly in your code!
+
+![Upgrade project](./assets/images/upgrade-project-code-tour.png)
+
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#upgrade-project)
 
-- **Validate project** - Creates a validation .md report against the currently used SPFx version in the project. The action will automatically detect the SPFx version used and will validate if the project is properly set up. 
+- **Validate project** - Creates a validation .md report and/or code tour validation guidance for the currently open SPFx project. The action will automatically detect the SPFx version used and will validate if the project is properly set up.
 
 ![Upgrade project](./assets/images/validate-project.png)
 
@@ -315,7 +314,8 @@ Now you may use SPFx Toolkit as a chat participant in GitHub Copilot chat extens
 Currently, we support the following commands:
 - `/setup` - that is dedicated to providing information on how to setup your local workspace for SharePoint Framework development
 - `/new` - that may be used to get guidance on how to create a new solution or find and reuse an existing sample from the PnP SPFx sample gallery
-- `/code` - that is fine-tuned to provide help in coding your SharePoint Framework project and provides additional boosters like validating the correctness of your SPFx project, scaffolding a CI/CD workflow, or renaming your project, and many more.
+- `/code` - [beta] this command is fine-tuned to provide help in coding your SharePoint Framework project and provides additional boosters like validating the correctness of your SPFx project, scaffolding a CI/CD workflow, or renaming your project, and many more.
+- `/manage` - [beta] this command will allow you to ask and retrieve any kind of data from you SharePoint Online tenant. This command will only work if your are signed in to your tenant. It uses CLI for Microsoft 365 commands under the hood to retrieve and explain data and assets from your SharePoint Online tenant. Currently it does support only retrieving information, it will not support you in creating, updating or removing any resources. For example, you want to check if some list item or file exists. Or how many items with specific metadata do you have on a list? Or ask for content type columns to generate an interface based on the response quickly.
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/8.-SPFx-Toolkit-GitHub-Chat-Participant)
 

assets/images/actions.png

@@ -20,13 +20,17 @@ And for Azure DevOps👇
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)
 
-- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md report with upgrade guidance to the latest supported SPFx version by the extension. 
+- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md and/or code tour report with upgrade guidance to the latest supported SPFx version by the extension. The upgrade guidance provides optional as well as required steps a user needs to take manually in order to upgrade the project. At the end of the guidance file, the user may find a summary of the steps in a single script and a couple of manual steps that need to be taken.
 
 ![Upgrade project](../images/upgrade-project.png)
 
+And the code tour guidance will provide you upgrade tips directly in your code!
+
+![Upgrade project](./assets/images/upgrade-project-code-tour.png)
+
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#upgrade-project)
 
-- **Validate project** - Creates a validation .md report against the currently used SPFx version in the project. The action will automatically detect the SPFx version used and will validate if the project is properly set up. 
+- **Validate project** - Creates a validation .md report and/or code tour validation guidance for the currently open SPFx project. The action will automatically detect the SPFx version used and will validate if the project is properly set up.
 
 ![Upgrade project](../images/validate-project.png)
 

assets/images/app-catalog-list.png

@@ -4,10 +4,6 @@ Creating a new project was never easier. Just use the **create a new project** a
 
 ![Create new project](../images/scaffolding.png)
 
-Check it out in action 👇.
-
-![Create new project](../images/scaffolding-form.gif)
-
 It's possible to scaffold any kind of SPFx project including web parts, extensions, library components, and adaptive card extensions.
 
 ![All SPFx project support](../images/scaffolding-support.png)
@@ -17,7 +13,7 @@ It's possible to scaffold any kind of SPFx project including web parts, extensio
 - **Library components** are reusable code elements that can be shared across all the components in the tenant.
 - **Adaptive Card Extensions (ACEs)** allow you to build rich, native extensions for Viva Connections Dashboards and SharePoint Pages.
 
-Install additional dependencies with a single click straight from the scaffolding form. Currently we support installing [PnP reusable property pane controls](https://pnp.github.io/sp-dev-fx-property-controls/), [PnP reusable React controls](https://pnp.github.io/sp-dev-fx-controls-react/), and [PnPjs](https://pnp.github.io/pnpjs/).
+Install additional dependencies with a single click straight from the scaffolding form. Currently we support installing [PnP reusable property pane controls](https://pnp.github.io/sp-dev-fx-property-controls/), [PnP reusable React controls](https://pnp.github.io/sp-dev-fx-controls-react/), [PnPjs](https://pnp.github.io/pnpjs/). Add and preconfigure [SPFx Fast Serve](https://github.com/s-KaiNet/spfx-fast-serve) and add a Node Version Manager configuration file either for NVM or NVS.
 
 ![Additional dependency step](../images/scaffolding-additional-step.png)
 

assets/images/chat-in-action-menage.gif

@@ -29,6 +29,7 @@ After successful sign in, an additional view is presented that shows a list of l
 - **Remove**: Removes the app from the app catalog.
 - **Enable**: Allows end users to add the solution to their SharePoint sites.
 - **Disable**: Hides the solution from end users, preventing them from adding it to sites.
+- **Upgrade**: Upgrades the solution to the latest version available in the app catalog for the specified site.
 
 Additionally, it will show you all tenant-wide extensions installed on your tenant.
 

assets/images/scaffolding-additional-step.png

@@ -2,7 +2,7 @@
 	"name": "viva-connections-toolkit",
 	"displayName": "SharePoint Framework Toolkit",
 	"description": "SharePoint Framework Toolkit aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code and now even create a CI/CD pipeline to introduce automate deployment of your app. This toolkit is provided by the community.",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"publisher": "m365pnp",
 	"preview": false,
 	"homepage": "https://github.com/pnp/vscode-viva",
@@ -63,12 +63,17 @@
 					{
 						"name": "new",
 						"isSticky": true,
-						"description": "Create a new SharePoint Framework project."
+						"description": "Create a new SharePoint Framework project"
+					},
+					{
+						"name": "manage",
+						"isSticky": true,
+						"description": "[beta] Manage your SharePoint Online tenant"
 					},
 					{
 						"name": "code",
 						"isSticky": true,
-						"description": "Let's write some SPFx code (I am still learning this, please consider this as beta)"
+						"description": "[beta] Let's write some SPFx code"
 					}
 				]
 			}
@@ -205,6 +210,28 @@
 						".node-version"
 					],
 					"description": "The file to be used to store the Node version for the selected Node version manager. Remember that the .node-version file is supported only while using nvs."
+				},
+				"spfx-toolkit.projectUpgradeOutputMode": {
+					"title": "Project upgrade output mode",
+					"type": "string",
+					"default": "both",
+					"enum": [
+						"both",
+						"markdown",
+						"code tour"
+					],
+					"description": "Choose the output mode for the project upgrade. You can choose between `both`, `markdown`, or `code tour`."
+				},
+				"spfx-toolkit.projectValidateOutputMode": {
+					"title": "Project validate output mode",
+					"type": "string",
+					"default": "both",
+					"enum": [
+						"both",
+						"markdown",
+						"code tour"
+					],
+					"description": "Choose the output mode for the project validation. You can choose between `both`, `markdown`, or `code tour`."
 				}
 			}
 		},
@@ -433,6 +460,12 @@
 				"category": "SharePoint Framework Toolkit",
 				"icon": "$(circle-slash)"
 			},
+			{
+				"command": "spfx-toolkit.upgradeAppCatalogApp",
+				"title": "Upgrade",
+				"category": "SharePoint Framework Toolkit",
+				"icon": "$(sync)"
+			},
 			{
 				"command": "spfx-toolkit.showMoreActions",
 				"title": "...",
@@ -504,6 +537,10 @@
 				{
 					"command": "spfx-toolkit.disableAppCatalogApp",
 					"group": "actions.more@4"
+				},
+				{
+					"command": "spfx-toolkit.upgradeAppCatalogApp",
+					"group": "actions.more@5"
 				}
 			],
 			"explorer/context": [

assets/images/scaffolding.png

@@ -0,0 +1,81 @@
+param ([string[]]$workspacePath)
+
+$cliLocalProjectPath = "$workspacePath\cli-microsoft365"
+
+if (-not (Test-Path -Path $cliLocalProjectPath -PathType Container)) {
+    return
+}
+
+[hashtable]$commandsData = @{}
+
+$allSpoCommands = Get-ChildItem -Path "$workspacePath\cli-microsoft365\docs\docs\cmd\spo\*.mdx" -Recurse -Force -Exclude "_global*"
+
+foreach ($command in $allSpoCommands) {
+    $commandDocs = ConvertFrom-Markdown -Path $command
+    $html = New-Object -Com 'HTMLFile'
+    $html.write([ref]$commandDocs.Html)
+
+    $title = $html.all.tags('h1')[0]
+    $commandTitle = $title.innerText
+
+    if (-not ($commandTitle -match "\b(list|get)$")) {
+        continue
+    }
+
+    $titleIndex = @($html.all).IndexOf($title)
+
+    $usage = $html.all.tags('h2') | Where-Object { $_.tagName -eq 'H2' } | Select-Object -First 1
+    $usageIndex = @($html.all).IndexOf($usage)
+
+    $commandDescription = @($html.all)[($titleIndex + 1)..($usageIndex - 1)]
+    $commandDescription = $commandDescription | ForEach-Object { $_.innerText }
+
+    $subTitles = $html.all.tags('h2') | Where-Object { $_.tagName -eq 'H2' } | Select-Object -First 5
+    $optionsStartIndex = @($html.all).IndexOf($subTitles[1])
+    $optionsEndIndex = @($html.all).IndexOf($subTitles[2])
+    $commandOptions = @($html.all)[($optionsStartIndex + 1)..($optionsEndIndex - 1)]
+    $commandOptions = $commandOptions | Where-Object { $_.nodeName -eq 'CODE' } | ForEach-Object { $_.innerText }
+    $commandOptions = $commandOptions | ForEach-Object { $_.Replace("`r`n", '') }
+
+    $examples = $subTitles[2].innerText
+    $examplesStartIndex = @($html.all).IndexOf($subTitles[2])
+    $examplesEndIndex = @($html.all).IndexOf($subTitles[3])
+    if (-not ($examples -match "Example")) {
+        $examples = $subTitles[3].innerText
+        $examplesStartIndex = @($html.all).IndexOf($subTitles[3])
+        $examplesEndIndex = @($html.all).IndexOf($subTitles[4])
+    }
+    $commandExamples = @($html.all)[($examplesStartIndex + 1)..($examplesEndIndex - 1)]
+    $commandExamples = $commandExamples | Where-Object { $_.nodeName -match  'CODE|P' } | ForEach-Object { $_.innerText }
+    $commandExamples = $commandExamples | Select-Object -Unique
+    $commandExamples = $commandExamples  -split '\r?\n'
+    $commandExamplesObjects = @()
+    for ($i = 0; $i -lt $commandExamples.Length; $i += 2) {
+        $example = $commandExamples[$i]
+        $description = $commandExamples[$i + 1]
+        $commandExamplesObject = @{
+            Example = $example
+            Description = $description
+        }
+        $commandExamplesObjects += $commandExamplesObject
+    }
+
+    $commandsData["m365 $commandTitle"] = @{
+        Description = $commandDescription
+        Options = $commandOptions
+        Examples = $commandExamplesObjects
+    }
+}
+
+$dataArray = @()
+foreach ($key in $commandsData.Keys) {
+    $orderedHashtable = [ordered]@{
+        Command = $key
+        Description = $commandsData[$key].Description
+        Options = $commandsData[$key].Options
+        Examples = $commandsData[$key].Examples
+    }
+    $dataArray += $orderedHashtable
+}
+
+$dataArray | ConvertTo-Json -Depth 3 | Out-File "$workspacePath\vscode-viva\src\chat\CliForMicrosoft365SpoCommands.ts"