Release v4.1.0 (#310)

## 🎯 Aim

The aim is to prepare new minor release with latest changes added like:
more guidance regarding gulp tasks and in scaffolding form, more gulp
tasks. renamed actions, added support for SPFx 1.20 etc.

## 📷 Result


![GulpTasks1](https://github.com/user-attachments/assets/026e631b-221d-4914-b56b-1896365e328b)


![Upgrade1](https://github.com/user-attachments/assets/3b698065-ba2e-4c98-b217-8e05ecbbd710)


![GuidanceScaffolding](https://github.com/user-attachments/assets/db879bbc-2b9e-4091-9b94-cf8a9402ee3a)


## ✅ What was done

- [X] Added support for SPFx 1.20 ⭐ Upgrade and Validate your SPFx
projects
- [X] Added dedicated step in the walkthrough explaining Gulp Tasks
- [X] Added more Gulp Tasks to the tasks panel
- [X] Added guidance for each project type in scaffolding form
- [X] Refactored action naming
- [X] Refactored to hide features that do not work without login

---------

Co-authored-by: Luccas Castro <[email protected]>

Author: Adam-it

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## [4.1.0] - 2024-09-28
+
+- Added support for SPFx 1.20.0
+- Updated missing scopes in the Entra App Registration
+- Updated error handling in extension init
+- Added guidance in tha scaffolding form for each SPFx project type
+- Added more gulp tasks
+- Added dedicated walkthrough for gulp tasks
+- Updated extension to hide features that require sign in
+- Updated action naming
+
 ## [4.0.0] - 2024-09-08
 
 - Updated Sign in method

assets/images/tasks.png

@@ -1,11 +1,3 @@
-##  Gulp tasks
-
-The extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click.
-
-![Gulp Tasks](../images/tasks.png)
-
-[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.4-Gulp-tasks)
-
 ##  Actions
 
 The actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects.

assets/walkthrough/tasks-and-actions.md assets/walkthrough/actions.md

@@ -0,0 +1,20 @@
+##  Gulp tasks
+
+The SharePoint Framework uses [Gulp](https://gulpjs.com/) as its task runner to handle building, bundling, and packaging of the client-side solution project.
+
+The toolchain consists of the following gulp tasks defined in the @microsoft/sp-build-core-tasks package:
+
+build - Builds the client-side solution project.
+bundle - Bundles the client-side solution project entry point and all its dependencies into a single JavaScript file.
+serve - Serves the client-side solution project and assets from the local machine.
+clean - Cleans the client-side solution project's build artifacts from the previous build and from the build target directories (lib and dist).
+test - Runs unit tests, if available, for the client-side solution project.
+package-solution - Packages the client-side solution into a SharePoint package.
+deploy-azure-storage - Deploys client-side solution project assets to Azure Storage.
+
+
+SPFx Toolkit VS Code extension shows all possible Gulp tasks one may run on an SPFx project. Don't worry about remembering all the commands, just click on the task you want to run and the extension will do the rest.
+
+![Gulp Tasks](../images/tasks.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.4-Gulp-tasks)

assets/walkthrough/tasks.md

@@ -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.0.0",
+	"version": "4.1.0",
 	"publisher": "m365pnp",
 	"preview": false,
 	"homepage": "https://github.com/pnp/vscode-viva",
@@ -109,11 +109,19 @@
 						}
 					},
 					{
-						"id": "tasks-and-actions",
+						"id": "tasks",
+						"title": "Gulp tasks",
+						"description": "Get to know the Gulp tasks that are available in your SharePoint Framework project",
+						"media": {
+							"markdown": "assets/walkthrough/tasks.md"
+						}
+					},
+					{
+						"id": "actions",
 						"title": "Boost your development with actions",
-						"description": "Reduce the amount of context switching and automate your work with Tasks and Actions. \nValidate your project, rename your solution, deploy it to any app catalog, grant API permissions ... and many more all without leaving the context of your work.",
+						"description": "Reduce the amount of context switching and automate your work with Actions. \nValidate your project, rename your solution, deploy it to any app catalog, grant API permissions ... and many more all without leaving the context of your work.",
 						"media": {
-							"markdown": "assets/walkthrough/tasks-and-actions.md"
+							"markdown": "assets/walkthrough/actions.md"
 						}
 					},
 					{
@@ -314,12 +322,12 @@
 			},
 			{
 				"command": "spfx-toolkit.upgradeProject",
-				"title": "Upgrade project to latest SPFx version",
+				"title": "Upgrade project SPFx version",
 				"category": "SharePoint Framework Toolkit"
 			},
 			{
 				"command": "spfx-toolkit.deployProject",
-				"title": "Deploy the project",
+				"title": "Deploy project to app catalog",
 				"category": "SharePoint Framework Toolkit"
 			},
 			{
@@ -329,7 +337,7 @@
 			},
 			{
 				"command": "spfx-toolkit.validateProject",
-				"title": "Validate project",
+				"title": "Validate project correctness",
 				"category": "SharePoint Framework Toolkit"
 			},
 			{
@@ -344,7 +352,7 @@
 			},
 			{
 				"command": "spfx-toolkit.pipeline",
-				"title": "Generate CI/CD workflow",
+				"title": "Scaffold CI/CD Workflow",
 				"category": "SharePoint Framework Toolkit"
 			},
 			{

npm-shrinkwrap.json

@@ -1,5 +1,6 @@
 import * as vscode from 'vscode';
 import { Commands, promptCodeContext, promptContext, promptNewContext, promptSetupContext } from '../constants';
+import { ProjectInformation } from '../services/dataType/ProjectInformation';
 
 const MODEL_SELECTOR: vscode.LanguageModelChatSelector = { vendor: 'copilot', family: 'gpt-4' };
 
@@ -54,23 +55,26 @@ export class PromptHandlers {
           title: vscode.l10n.t('View samples'),
         }];
       case 'code':
-        // TODO: make visible only in context of a project
-        return [{
-          command: Commands.upgradeProject,
-          title: vscode.l10n.t('Get upgrade guidance to latest SPFx version'),
-        },
-        {
-          command: Commands.validateProject,
-          title: vscode.l10n.t('Validate your project'),
-        },
-        {
-          command: Commands.renameProject,
-          title: vscode.l10n.t('Rename your project'),
-        },
-        {
-          command: Commands.pipeline,
-          title: vscode.l10n.t('Create a CI/CD workflow'),
-        }];
+        if(ProjectInformation.isSPFxProject) {
+          return [{
+            command: Commands.upgradeProject,
+            title: vscode.l10n.t('Get upgrade guidance to latest SPFx version'),
+          },
+          {
+            command: Commands.validateProject,
+            title: vscode.l10n.t('Validate your project'),
+          },
+          {
+            command: Commands.renameProject,
+            title: vscode.l10n.t('Rename your project'),
+          },
+          {
+            command: Commands.pipeline,
+            title: vscode.l10n.t('Create a CI/CD workflow'),
+          }];
+        }
+
+        return [];
       default:
         return [];
     }

package.json

@@ -1,14 +1,18 @@
 export const AdaptiveCardTypes = [
   {
     name: 'Generic Card Template',
-    value: 'Generic'
+    value: 'Generic',
+    description: "A flexible template that can be customized for various use cases, displaying general information and content in an adaptive card format."
   },
   {
     name: 'Search Query Modifier',
-    value: 'Search'
+    value: 'Search',
+    description: "A template designed to modify and enhance search queries, improving the relevance and accuracy of search results displayed in adaptive cards."
   },
   {
     name: 'Data Visualization Card Template',
-    value: 'DataVisualization'
+    value: 'DataVisualization',
+    description: "A template focused on presenting data visualizations, such as charts and graphs, within adaptive cards to provide clear and insightful data representations."
+
   }
 ];

src/chat/PromptHandlers.ts

@@ -9,18 +9,27 @@ export enum ComponentType {
 export const ComponentTypes = [
   {
     name: 'Web Part',
-    value: ComponentType.webPart
+    value: ComponentType.webPart,
+    description:
+      'SharePoint Framework (SPFx) client-side web parts are built with modern tools and frameworks, and can be deployed to modern and classic SharePoint pages. They are the building blocks of pages that appear on a SharePoint site. They also enable extending Microsoft Teams tabs, providing powerful ways to enhance both SharePoint and Teams.'
+
   },
   {
     name: 'Extension',
-    value: ComponentType.extension
+    value: ComponentType.extension,
+    description:
+      'SharePoint Framework (SPFx) Extensions let you enhance SharePoint user experience by customizing toolbars, list views, forms, and notifications. They work with frameworks like React and Angular, and include four main types: Application Customizers, Field Customizers, Command Sets, and Form Customizers.'
   },
   {
     name: 'Library',
-    value: ComponentType.library
+    value: ComponentType.library,
+    description:
+      'SharePoint Framework (SPFx) library is a component that allows you to create and share reusable code across multiple components within a tenant, providing a way to manage and reference common functionality.'
   },
   {
     name: 'Adaptive Card Extension',
-    value: ComponentType.adaptiveCardExtension
+    value: ComponentType.adaptiveCardExtension,
+    description:
+      'ACEs are the primary way to extend Viva Connections and SharePoint. They use the Adaptive Card Framework with a JSON schema to create a unified UI, managed by Microsoft, allowing you to focus on business logic.',
   }
 ];

src/constants/AdaptiveCardTypes.ts

@@ -11,26 +11,31 @@ export const ExtensionTypes = [
   {
     name: 'Application Customizer',
     value: ExtensionType.application,
-    templates: []
+    templates: [],
+    description: 'Adds scripts to the page, and accesses well-known HTML element placeholders and extends them with custom renderings.'
   },
   {
     name: 'Field Customizer',
     value: ExtensionType.field,
-    templates: ['No framework', 'React', 'Minimal']
+    templates: ['No framework', 'React', 'Minimal'],
+    description: 'Provides modified views to data for fields within a list.'
   },
   {
     name: 'ListView Command Set',
     value: ExtensionType.listViewCommandSet,
-    templates: []
+    templates: [],
+    description: 'Extends the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement behaviors.'
   },
   {
     name: 'Form Customizer',
     value: ExtensionType.formCustomizer,
-    templates: ['No framework', 'React']
+    templates: ['No framework', 'React'],
+    description: 'Provides a way to associate and override default new, edit and view form experience of list and libraries with custom forms by associating component to content type.'
   },
   {
     name: 'Search Query Modifier',
     value: ExtensionType.searchQueryModifier,
-    templates: []
+    templates: [],
+    description: 'Modifies search queries to enhance search results.'
   }
 ];

src/constants/ComponentTypes.ts

@@ -8,14 +8,20 @@ export enum FrameworkType {
 export const FrameworkTypes = [
   {
     name: 'No framework',
-    value: FrameworkType.none
+    value: FrameworkType.none,
+    description:
+      "Use any library or write pure JavaScript for maximum flexibility."
   },
   {
     name: 'React',
-    value: FrameworkType.react
+    value: FrameworkType.react,
+    description:
+      "Popular library for building dynamic and responsive UI components."
   },
   {
     name: 'Minimal',
-    value: FrameworkType.minimal
+    value: FrameworkType.minimal,
+    description:
+      "Lightweight setup with minimal dependencies for straightforward functionality."
   },
 ];