Release v4.4.0 (#405)

## 🎯 Aim

The aim is to create a new minor release with the latest enhancements. 

## 📷 Result

![image](https://github.com/user-attachments/assets/e85c35d6-95bf-4a02-9a9b-0602127472e1)

![image](https://github.com/user-attachments/assets/51fca868-2dbe-4e6f-93fa-9bdea0144f02)

![image](https://github.com/user-attachments/assets/272ed119-91d6-43d7-bcf1-fa711f55fb79)

![image](https://github.com/user-attachments/assets/c16adfdf-6674-45a6-95ba-7bfe50f1a602)

## ✅ What was done

- [X] Unfied the gulp bundle local and production to a single task with
an additional prompt
- [X] Unfied the gulp package-solution local and production to a single
task with an additional prompt
- [X] Fixed warning message regarding installed Node.js version in
validate dependency action
- [X] Added conditional logic to scaffolding form additional
dependencies to show them based on project type
- [X] Added install react additional dependency to the scaffolding form
visible for Application customizer
- [X] Added Install, and Uninstall apps to a specified site action to
app view
- [X] Enhanced progress notifications with output window links for
better user guidance to every CLI action
- [X] Added action which allows to set form customizer 
- [X] Enhanced error handling in GitHub Copilot Chat participant
- [X] Updated welcome view
- [X] Updated VS Code typings and engine to latest

---------

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

Author: 5 people

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## [4.4.0] - 2025-02-04
+
+- Updated the gulp bundle local and production to a single task with an additional prompt
+- Updated the gulp package-solution local and production to a single task with an additional prompt
+- Fixed warning message regarding installed Node.js version in validate dependency action
+- Added conditional logic to scaffolding form additional dependencies to show them based on project type
+- Added install react additional dependency to the scaffolding form visible for Application customizer
+- Added Install, and Uninstall apps to a specified site action to app view
+- Enhanced progress notifications with output window links for better user guidance to every CLI action
+- Added action which allows to set form customizer
+- Enhanced error handling in GitHub Copilot Chat participant
+- Updated welcome view
+- Updated VS Code typings and engine to latest
+
 ## [4.3.0] - 2024-12-11
 
 - Added remove confirmation prompt when removing SPFx solution from app catalog

README.md

@@ -153,6 +153,8 @@ 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.
+- **Install**: Install the solution from tenant or site collection app catalog to a site.
+- **Uninstall**: Uninstall the solution from a site.
 - **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.
@@ -237,6 +239,12 @@ And the code tour guidance will provide you upgrade tips directly in your code!
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
 
+- **Set Form Customizer** - Allows to update the New, Edit or View from of any SharePoint List to a given SPFx Form Customizer based on provided GUID. 
+
+![Set Form Customizer](./assets/images/set-form-customizer-action.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#set-form-customizer)
+
 - **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - SharePoint Framework Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. 
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#open-samplescenario-galleries-of-the-spfx-web-part-extensions-or-aces-projects)

assets/images/actions.png

@@ -30,6 +30,8 @@ After successful sign in, an additional view is presented that shows a list of l
 - **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.
+- **Install**: Install the solution from tenant or site collection app catalog to a site.
+- **Uninstall**: Uninstall the solution from a site.
 
 Additionally, it will show you all tenant-wide extensions installed on your tenant.
 

assets/images/app-catalog-list.png

@@ -2,13 +2,13 @@
 	"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.3.0",
+	"version": "4.4.0",
 	"publisher": "m365pnp",
 	"preview": false,
 	"homepage": "https://github.com/pnp/vscode-viva",
 	"icon": "assets/logo-large.png",
 	"engines": {
-		"vscode": "^1.90.0"
+		"vscode": "^1.93.0"
 	},
 	"categories": [
 		"Snippets",
@@ -52,7 +52,7 @@
 				"id": "spfx-toolkit.pnp",
 				"fullName": "SPFx Toolkit",
 				"name": "spfx",
-				"description": "How can I help you with SPFx development?",
+				"description": "How can I help you with SPFx development? Use /setup, /new, /manage, /code commands for job specific support.",
 				"isSticky": true,
 				"commands": [
 					{
@@ -332,7 +332,7 @@
 		"viewsWelcome": [
 			{
 				"view": "pnp-view-empty",
-				"contents": "Welcome to SharePoint Framework Toolkit\n\n\nTo start create a new SharePoint Framework project. \n[Create a new project](command:spfx-toolkit.createProject)\n\n\n\n\n\nUse a sample to kick off a new project and boost your development.\n[View samples](command:spfx-toolkit.samplesGallery)\n\n\n\n\n\nYou can also open an existing app.\n[Open folder](command:vscode.openFolder)\n\n\n\n\n\nValidate your local workspace and check if you have the required dependencies.\n[Check dependencies](command:spfx-toolkit.checkDependencies)\n\n\n\n\n\nInstall the required dependencies.\n[Install dependencies](command:spfx-toolkit.installDependencies)\n\n\n\nLearn more about SharePoint Framework and this toolkit.\n[Walkthrough](command:spfx-toolkit.welcome)\n\n\n\nFor additional help or resources visit the [extension wiki](https://github.com/pnp/vscode-viva/wiki)."
+				"contents": "Welcome to SharePoint Framework Toolkit\n\n\nTo start create a new SharePoint Framework project. \n[Create a new project](command:spfx-toolkit.createProject)\n\n\n\n\n\nUse a sample to kick off a new project and boost your development.\n[View samples](command:spfx-toolkit.samplesGallery)\n\n\n\n\n\nYou can also open an existing app.\n[Open folder](command:vscode.openFolder)\n\n\n\n\n\nValidate your local workspace and check if you have the required dependencies.\n[Check dependencies](command:spfx-toolkit.checkDependencies)\n\n\n\n\n\nInstall the required dependencies.\n[Install dependencies](command:spfx-toolkit.installDependencies)\n\n\n\nLearn more about SharePoint Framework and this toolkit.\n[Walkthrough](command:spfx-toolkit.welcome)\n\n\n\nStart effortlessly with GitHub Copilot. Get SPFx tailored support in setting up your local workspace, creating a new project, or managing your tenant.\n[Use @SPFx in GitHib Copilot](command:spfx-toolkit.openCopilot) \n\n\n\n\n\nFor additional help or resources visit the [extension wiki](https://github.com/pnp/vscode-viva/wiki)."
 			}
 		],
 		"commands": [
@@ -466,6 +466,23 @@
 				"category": "SharePoint Framework Toolkit",
 				"icon": "$(sync)"
 			},
+			{
+				"command": "spfx-toolkit.installAppCatalogApp",
+				"title": "Install",
+				"category": "SharePoint Framework Toolkit",
+				"icon": "$(package)"
+			},
+			{
+				"command": "spfx-toolkit.uninstallAppCatalogApp",
+				"title": "Uninstall",
+				"category": "SharePoint Framework Toolkit",
+				"icon": "$(remove)"
+			},
+			{
+				"command": "spfx-toolkit.setFormCustomizer",
+				"title": "Set Form Customizer",
+				"category": "SharePoint Framework Toolkit"
+			},
 			{
 				"command": "spfx-toolkit.showMoreActions",
 				"title": "...",
@@ -541,6 +558,14 @@
 				{
 					"command": "spfx-toolkit.upgradeAppCatalogApp",
 					"group": "actions.more@5"
+				},
+				{
+					"command": "spfx-toolkit.installAppCatalogApp",
+					"group": "actions.more@5"
+				},
+				{
+					"command": "spfx-toolkit.uninstallAppCatalogApp",
+					"group": "actions.more@5"
 				}
 			],
 			"explorer/context": [
@@ -594,7 +619,7 @@
 		"@types/react": "^18.0.8",
 		"@types/react-dom": "^18.0.3",
 		"@types/react-router-dom": "^5.3.3",
-		"@types/vscode": "^1.90.0",
+		"@types/vscode": "^1.93.0",
 		"@typescript-eslint/eslint-plugin": "^5.9.1",
 		"@typescript-eslint/parser": "^5.9.1",
 		"@vscode/prompt-tsx": "^0.2.3-alpha",

assets/images/scaffolding.png

@@ -25,7 +25,6 @@ export class PromptHandlers {
       }
     }
 
-    // TODO: in near future we may retrieve chat history like const previousMessages = context.history.filter((h) => h instanceof vscode.ChatResponseTurn );. currently it is only insiders
     const messages: vscode.LanguageModelChatMessage[] = [];
     messages.push(vscode.LanguageModelChatMessage.Assistant(promptContext));
     messages.push(vscode.LanguageModelChatMessage.Assistant(PromptHandlers.getChatCommandPrompt(chatCommand)));
@@ -39,7 +38,7 @@ export class PromptHandlers {
 
     messages.push(vscode.LanguageModelChatMessage.User(request.prompt));
     PromptHandlers.history.push(request.prompt);
-    // TODO: in near future it will be possible to use user selected model like `await request.model.sendRequest(messages, {}, token);` now it is only available in insiders
+
     const [model] = await vscode.lm.selectChatModels({ vendor: 'copilot', family: PromptHandlers.modelFamily });
     try {
       const chatResponse = await model.sendRequest(messages, {}, token);
@@ -66,8 +65,14 @@ export class PromptHandlers {
           }
         } catch (err: any) {
           Logger.getInstance();
-          Logger.error(err!.error ? err!.error.message.toString() : err.toString());
+          const errorText = err!.error ? err!.error.message.toString() : err.toString();
+          Logger.error(errorText);
           stream.markdown('\n\nI was not able to retrieve the data from SharePoint. Please check the logs in output window for more information.');
+
+          const markdownString = new vscode.MarkdownString();
+          markdownString.supportHtml = true;
+          markdownString.appendMarkdown(`<span style="color:#f00;">${errorText}</span>`);
+          stream.markdown(markdownString);
         }
       }
 

assets/images/set-form-customizer-action.png

@@ -43,6 +43,12 @@ export const Commands = {
   // Webviews
   samplesGallery: `${EXTENSION_NAME}.samplesGallery`,
 
+  // Bundle
+  bundleProject: `${EXTENSION_NAME}.bundleProject`,
+
+  // Package
+  packageProject: `${EXTENSION_NAME}.packageProject`,
+
   // Serving
   serveProject: `${EXTENSION_NAME}.serveProject`,
 
@@ -53,12 +59,20 @@ export const Commands = {
   // Welcome
   welcome: `${EXTENSION_NAME}.welcome`,
 
+  //Copilot
+  openCopilot: `${EXTENSION_NAME}.openCopilot`,
+
   // App actions
   deployAppCatalogApp: `${EXTENSION_NAME}.deployAppCatalogApp`,
   retractAppCatalogApp: `${EXTENSION_NAME}.retractAppCatalogApp`,
   removeAppCatalogApp: `${EXTENSION_NAME}.removeAppCatalogApp`,
   enableAppCatalogApp: `${EXTENSION_NAME}.enableAppCatalogApp`,
   disableAppCatalogApp: `${EXTENSION_NAME}.disableAppCatalogApp`,
   upgradeAppCatalogApp: `${EXTENSION_NAME}.upgradeAppCatalogApp`,
-  showMoreActions: `${EXTENSION_NAME}.showMoreActions`
+  installAppCatalogApp: `${EXTENSION_NAME}.installAppCatalogApp`,
+  uninstallAppCatalogApp: `${EXTENSION_NAME}.uninstallAppCatalogApp`,
+  showMoreActions: `${EXTENSION_NAME}.showMoreActions`,
+
+  // Set form customizer
+  setFormCustomizer: `${EXTENSION_NAME}.setFormCustomizer`
 };

assets/images/tasks.png

@@ -9,5 +9,7 @@ export const ContextKeys = {
   removeApp: 'pnp.etv.app.remove',
   enableApp: 'pnp.etv.app.enable',
   disableApp: 'pnp.etv.app.disable',
-  upgradeApp: 'pnp.etv.app.upgrade'
+  upgradeApp: 'pnp.etv.app.upgrade',
+  installApp: 'pnp.etv.app.install',
+  uninstallApp: 'pnp.etv.app.uninstall'
 };

assets/images/validate-dependency.png

@@ -6,6 +6,7 @@ export enum ProjectFileContent {
   installReusableReactControls = 'install-spfx-controls-react',
   installPnPJs = 'install-pnpjs',
   installSPFxFastServe = 'install-spfx-fast-serve',
+  installReact = 'install-react',
   createNVMRCFile = 'create-nvmrc-file',
   createNodeVersionFile = 'create-node-version-file',
 }

assets/images/walkthrough.png

@@ -12,6 +12,7 @@ import { CliActions } from './services/actions/CliActions';
 import { PromptHandlers } from './chat/PromptHandlers';
 import { CHAT_PARTICIPANT_NAME, ProjectFileContent } from './constants';
 import { EntraAppRegistration } from './services/actions/EntraAppRegistration';
+import { CopilotActions } from './services/actions/CopilotActions';
 
 
 export async function activate(context: vscode.ExtensionContext) {
@@ -29,6 +30,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	Scaffolder.registerCommands();
 	CliActions.registerCommands();
 	EntraAppRegistration.registerCommands(context);
+	CopilotActions.registerCommands();
 
 	CommandPanel.register();
 
@@ -68,6 +70,10 @@ export async function activate(context: vscode.ExtensionContext) {
 					await TerminalCommandExecuter.runCommand('spfx-fast-serve --force-install', terminalTitle, terminalIcon);
 				}
 
+				if (fileContents.indexOf(ProjectFileContent.installReact) > -1) {
+					await TerminalCommandExecuter.runCommand('npm install [email protected] [email protected]', terminalTitle, terminalIcon);
+				}
+
 				// If either of the following strings are found in the project file, run the command to get the node version
 				if (fileContents.indexOf(ProjectFileContent.createNVMRCFile) > -1 || fileContents.indexOf(ProjectFileContent.createNodeVersionFile) > -1) {
 					let nodeVersionCommand = 'node --version > ';

assets/images/welcome-experience.png

@@ -7,6 +7,7 @@ export interface SpfxScaffoldCommandInput extends SpfxAddComponentCommandInput {
   shouldRunInit: boolean;
   shouldInstallReusablePropertyPaneControls: boolean;
   shouldInstallReusableReactControls: boolean;
+  shouldInstallReact: boolean;
   shouldInstallPnPJs: boolean;
   shouldInstallSPFxFastServe: boolean;
   shouldCreateNodeVersionFile: boolean;

assets/walkthrough/tenant-details.md

@@ -212,7 +212,9 @@ export class CommandPanel {
                     new ActionTreeItem('Remove', '', undefined, undefined, Commands.removeAppCatalogApp, [app.ID, app.Title], ContextKeys.removeApp),
                     new ActionTreeItem('Enable', '', undefined, undefined, Commands.enableAppCatalogApp, [app.Title, tenantAppCatalogUrl, app.Enabled], ContextKeys.enableApp),
                     new ActionTreeItem('Disable', '', undefined, undefined, Commands.disableAppCatalogApp, [app.Title, tenantAppCatalogUrl, app.Enabled], ContextKeys.disableApp),
-                    new ActionTreeItem('Upgrade', '', undefined, undefined, Commands.upgradeAppCatalogApp, [app.ID, app.Title, tenantAppCatalogUrl, true], ContextKeys.upgradeApp)
+                    new ActionTreeItem('Upgrade', '', undefined, undefined, Commands.upgradeAppCatalogApp, [app.ID, app.Title, tenantAppCatalogUrl, true], ContextKeys.upgradeApp),
+                    new ActionTreeItem('Install', '', undefined, undefined, Commands.installAppCatalogApp, [app.ID, app.Title], ContextKeys.installApp),
+                    new ActionTreeItem('Uninstall', '', undefined, undefined, Commands.uninstallAppCatalogApp, [app.ID, app.Title], ContextKeys.uninstallApp)
                   ]
                 )
               );
@@ -252,7 +254,9 @@ export class CommandPanel {
                       new ActionTreeItem('Remove', '', undefined, undefined, Commands.removeAppCatalogApp, [app.ID, app.Title, siteAppCatalogUrl], ContextKeys.removeApp),
                       new ActionTreeItem('Enable', '', undefined, undefined, Commands.enableAppCatalogApp, [app.Title, siteAppCatalogUrl, app.Enabled], ContextKeys.enableApp),
                       new ActionTreeItem('Disable', '', undefined, undefined, Commands.disableAppCatalogApp, [app.Title, siteAppCatalogUrl, app.Enabled], ContextKeys.disableApp),
-                      new ActionTreeItem('Upgrade', '', undefined, undefined, Commands.upgradeAppCatalogApp, [app.ID, app.Title, siteAppCatalogUrl, false], ContextKeys.upgradeApp)
+                      new ActionTreeItem('Upgrade', '', undefined, undefined, Commands.upgradeAppCatalogApp, [app.ID, app.Title, siteAppCatalogUrl, false], ContextKeys.upgradeApp),
+                      new ActionTreeItem('Install', '', undefined, undefined, Commands.installAppCatalogApp, [app.ID, app.Title, siteAppCatalogUrl], ContextKeys.installApp),
+                      new ActionTreeItem('Uninstall', '', undefined, undefined, Commands.uninstallAppCatalogApp, [app.ID, app.Title, siteAppCatalogUrl], ContextKeys.uninstallApp)
                     ]
                   )
                 );
@@ -281,12 +285,10 @@ export class CommandPanel {
   private static taskTreeView() {
     const taskCommands: ActionTreeItem[] = [
       new ActionTreeItem('Build project', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp build'),
-      new ActionTreeItem('Bundle project (local)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp bundle'),
-      new ActionTreeItem('Bundle project (production)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp bundle --ship'),
+      new ActionTreeItem('Bundle project', '', { name: 'debug-start', custom: false }, undefined, Commands.bundleProject),
       new ActionTreeItem('Clean project', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp clean'),
       new ActionTreeItem('Deploy project assets to Azure Storage', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp deploy-azure-storage'),
-      new ActionTreeItem('Package (local)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp package-solution'),
-      new ActionTreeItem('Package (production)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp package-solution --ship'),
+      new ActionTreeItem('Package', '', { name: 'debug-start', custom: false }, undefined, Commands.packageProject),
       new ActionTreeItem('Serve', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp serve'),
       new ActionTreeItem('Serve (nobrowser)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp serve --nobrowser'),
       new ActionTreeItem('Serve from configuration', '', { name: 'debug-start', custom: false }, undefined, Commands.serveProject),
@@ -310,6 +312,7 @@ export class CommandPanel {
 
     actionCommands.push(new ActionTreeItem('Add new component', '', { name: 'add', custom: false }, undefined, Commands.addToProject));
     actionCommands.push(new ActionTreeItem('Scaffold CI/CD Workflow', '', { name: 'rocket', custom: false }, undefined, Commands.pipeline));
+    actionCommands.push(new ActionTreeItem('Set Form Customizer', '', { name: 'checklist', custom: false }, undefined, Commands.setFormCustomizer));
     actionCommands.push(new ActionTreeItem('View samples', '', { name: 'library', custom: false }, undefined, Commands.samplesGallery));
 
     window.registerTreeDataProvider('pnp-view-actions', new ActionTreeDataProvider(actionCommands));