Release v4.0.0 (#298)

## 🎯 Aim

The aim is to prepare a new major release with the latest changes that
introduced improvements in the welcome experience, filter sample
gallery, settings and new login experience.

## 📷 Result


![sign-in-entra-app-reg-form](https://github.com/user-attachments/assets/bc27ede2-368f-40ff-9222-f9c02cedd857)


![sign-in-options](https://github.com/user-attachments/assets/c36c1886-cfed-44eb-8bb9-c706c9b166eb)


![settings](https://github.com/user-attachments/assets/509653cd-0c38-4c5d-8c63-cfd7a63976e7)

## ✅ What was done

- [X] Updated Sign in method
- [X] Updated SPFx Intro and workspace setup walkthrough steps
- [X] Updated readme assets
- [X] Added form to create Entra App Registration required for sign in
- [X] Added Extension filter dropdown to the sample gallery
- [X] Updated account view to show the Entra App Registration
- [X] Updated terminal usage to unified approach
- [X] Updated release workflows
- [X] Added settings to show and hide health incidents and tenant wide
extensions

## 🔗 Related issue

Closes: #291

---------

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

Author: 5 people

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## [4.0.0] - 2024-09-08
+
+- Updated Sign in method
+- Updated SPFx Intro and workspace setup walkthrough steps
+- Updated readme assets
+- Added form to create Entra App Registration required for sign in
+- Added Extension filter dropdown to the sample gallery
+- Updated account view to show the Entra App Registration
+- Updated terminal usage to unified approach
+- Updated release workflows
+- Added settings to show and hide health incidents and tenant wide extensions
+
 ## [3.4.0] - 2024-07-18
 
 - Improved welcome experience

README.md

@@ -77,7 +77,7 @@ In case you do not have all dependencies installed, or some are incorrect versio
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.1-Validate-and-set-up-a-local-workspace)
 
-### 3️⃣ Don't Start from scratch. Reuse an SPFx (web part or extension) or ACE sample
+### 3️⃣ Don't Start from scratch. Reuse an SPFx web part or extension or ACE sample
 
 You may kick-start your development with a new project based on an existing ACE or SPFx web part or extension with a click of a button. All of the provided samples are powered by [PnP Samples repositories](https://pnp.github.io/sp-dev-fx-webparts/samples/type/).
 
@@ -90,7 +90,6 @@ Switch between the list and grid view and don't worry about the size of your VS
 ![Sample gallery is responsive](./assets/images/samples-responsive.png)
 
 Check out how easy it is to create a new project based on a existing sample 👇. 
-
 ![Create project based on web part sample](./assets/images/sample-gallery.gif)
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#2-dont-start-from-scratch---sample-galleries)
@@ -119,33 +118,45 @@ Install additional dependencies with a single click straight from the scaffoldin
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#1-scaffold-a-new-spfx-project)
 
-### 6️⃣ Login to your tenant & retrieve environment details
-
-![tenant info](./assets/images/tenant-info.png)
+### 6️⃣ Sign in to your tenant & retrieve environment details
 
-The extension allows you to login to your Microsoft 365 tenant using CLI for Microsoft 365.
+The extension allows you to sign in to your Microsoft 365 tenant using CLI for Microsoft 365.
 
 ![login](./assets/images/login.png)
 
-Thanks to that the extension will retrieve helpful URLs from your tenant like: 
+SPFx Toolkit needs and Entra App Registration to be able to sign in to your tenant. You may either use an existing app registration or create a new one with a single click using a dedicated form. 
+
+![sign in options](./assets/images/sign-in-options.png)
+
+SPFx Toolkit will guide you through the process of creating a new app registration either manually by providing step-by-step guidance or automatically by creating the app registration for you.
+
+![entra app reg form](./assets/images/sign-in-entra-app-reg-form.png)
+
+![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.
+
+![app registration](./assets/images/sign-in-existing-app.gif)
+
+Thanks to that the extension will retrieve helpful URLs from your tenant like link to: 
 
-- link to SharePoint main site 
-- link to SharePoint admin site
-- link to SharePoint web API permission management page
+- SharePoint main site 
+- SharePoint admin site
+- SharePoint web API permission management page
 
 Additionally, the extension will check and retrieve tenant service health incidents that are currently happening in your tenant so that you gain quick insights on your tenant health.
 
 ![tenant details](./assets/images/tenant-links.png)
 
-After successful login an additional view is presented that shows list links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. Additionally it will show you all tenant-wide extensions installed on your tenant with.
+After successful sign in an additional view is presented that shows list links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. Additionally it will show you all tenant-wide extensions installed on your tenant with.
 
 ![tenant details](./assets/images/app-catalog-list.png)
 
-Login-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.
+Using the extension settings you may choose show or hide the tenant-wide extensions list and tenant health incidents list.
 
-Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the properties based on the currently logged-in tenant.
+![settings](./assets/images/settings.png)
 
-![validate serve](./assets/images/validate-serve-config.png)
+Sign-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.3-Login-to-your-tenant-&-retrieve-environment-details)
 

assets/fonts/fabric-icons.woff

@@ -1,7 +1,35 @@
 
 ## SharePoint Framework
 
-With SharePoint Framework (SPFx), you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.
+With SharePoint Framework (SPFx), you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com. This extensibility model allows you to write once and reuse your solutions in multiple Microsoft 365 applications with exactly the same code base.
+
+The following are some of the key features included as part of the SPFx:
+
+- It runs in the context of the current user and connection in the browser. There are no iFrames for the customization (JavaScript is - embedded directly to the page).
+- The controls are rendered in the normal page DOM.
+- The controls are responsive and accessible by nature.
+- It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.
+- It's framework-agnostic. You can use any JavaScript framework that you like including, but not limited to, React, Handlebars, Knockout, Angular, and Vue.js.
+- The developer toolchain is based on popular open-source client development tools such as NPM, TypeScript, Yeoman, webpack, and gulp.
+Performance is reliable.
+- End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
+- SPFx web parts can be added to both classic and modern pages.
+- SPFx solutions can be used to extend Microsoft Teams.
+- SPFx can be used to extend Microsoft Viva Connections.
+- SPFx can be use to extend Outlook and Office 365 app (Office)
+
+With SharePoint Framework you may create client-side web parts, extensions, and adaptive cards.
+
+- Web pats are are controls that appear inside a SharePoint page and execute client-side in the browser. They're the building blocks of pages that appear on a SharePoint site. You can build client-side web parts using modern client-side development tools and the SharePoint workbench (a development test surface). You can deploy your client-side web parts to both modern pages and classic web part pages in Microsoft 365 tenants.
+- Extensions allows you to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, list data views, and forms. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.SPFx Extensions enable you to extend the SharePoint user experience within modern pages and document libraries, while using the familiar SPFx tools and libraries for client-side development. Specifically, the SPFx includes four extension types:
+
+    - Application Customizers: Adds scripts to the page, and accesses well-known HTML element placeholders and extends them with custom renderings.
+    - Field Customizers: Provides modified views to data for fields within a list.
+    - Command Sets: Extends the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement behaviors.
+    - Form Customizer: Provides a way to assoicate and override default new, edit and view form experience of list and libraries with custom forms by associating component to content type.
+
+- Library components enables you to have independently versioned and deployed code served automatically for the SharePoint Framework components with a deployment through an app catalog. Library components provide you an alternative option to create shared code, which can be then used and referenced cross all the components in the tenant.
+- Adaptive Cards Extensions allows you to extend Viva Connections dashboard with your own custom functionalities and visualizations 
 
 Go over the [overview of the SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview) to find out more.
 

assets/images/actions.png

@@ -1,29 +1,35 @@
-## Login to your tenant & retrieve environment details
+## Sign in to your tenant & retrieve environment details
 
-![tenant info](../images/tenant-info.png)
-
-The extension allows you to login to your Microsoft 365 tenant using CLI for Microsoft 365.
+The extension allows you to sign in to your Microsoft 365 tenant using CLI for Microsoft 365.
 
 ![login](../images/login.png)
 
-Thanks to that the extension will retrieve helpful URLs from your tenant like: 
+SPFx Toolkit needs and Entra App Registration to be able to sign in to your tenant. You may either use an existing app registration or create a new one with a single click using a dedicated form. SPFx Toolkit will guide you through the process of creating a new app registration either manually by providing step-by-step guidance or automatically by creating the app registration for you.
+
+![app registration](../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.
+
+![app registration](../images/sign-in-existing-app.gif)
+
+Thanks to that the extension will retrieve helpful URLs from your tenant like link to: 
 
-- link to SharePoint main site 
-- link to SharePoint admin site
-- link to SharePoint web API permission management page
+- SharePoint main site 
+- SharePoint admin site
+- SharePoint web API permission management page
 
 Additionally, the extension will check and retrieve tenant service health incidents that are currently happening in your tenant so that you gain quick insights on your tenant health.
 
 ![tenant details](../images/tenant-links.png)
 
-After successful login an additional view is presented that shows list links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. Additionally it will show you all tenant-wide extensions installed on your tenant with.
+After successful sign in an additional view is presented that shows list links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. Additionally it will show you all tenant-wide extensions installed on your tenant with.
 
 ![tenant details](../images/app-catalog-list.png)
 
-Login-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.
+Using the extension settings you may choose show or hide the tenant-wide extensions list and tenant health incidents list.
 
-Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the properties based on the currently logged-in tenant.
+![settings](../images/settings.png)
 
-![validate serve](../images/validate-serve-config.png)
+Sign-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.3-Login-to-your-tenant-&-retrieve-environment-details)

assets/images/add-component.png

@@ -0,0 +1,20 @@
+## Set up your SharePoint Framework development environment
+
+To build and deploy client-side web parts, extensions, or adaptive cards using the SharePoint Framework, you will need to setup your development environment. SPFx requires:
+
+- Node.js 
+- Yeoman
+- Gulp
+- Yeoman SharePoint generator
+
+If you have Node.js you may validate and install these dependencies by running the following commands in your terminal
+    
+```sh
+npm install gulp-cli yo @microsoft/generator-sharepoint --global
+```
+
+or you may use SPFx toolkit to validate and install these dependencies for you.
+
+![setup local workspace](../images/validate-dependency.png)
+
+Check out the [docs for more details](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment) on the required node and dependency versions.

assets/images/app-catalog-list.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": "3.4.0",
+	"version": "4.0.0",
 	"publisher": "m365pnp",
 	"preview": false,
 	"homepage": "https://github.com/pnp/vscode-viva",
@@ -74,23 +74,22 @@
 			{
 				"id": "spfx-toolkit-intro",
 				"title": "SharePoint Framework Toolkit Introduction",
-				"description": "Learn how to boost your productivity in developing and managing SharePoint Framework solutions.",
+				"description": "Start your journey wih SharePoint Framework and learn how to boost your productivity in developing and managing SharePoint Framework solutions.",
 				"steps": [
 					{
 						"id": "intro-to-spfx",
 						"title": "Introduction to SharePoint Framework",
-						"description": "Set up your Microsoft 365 tenant \n[Join the Microsoft 365 Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)",
+						"description": "Learn SharePoint Framework and set up your Microsoft 365 tenant \n[Join the Microsoft 365 Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)",
 						"media": {
 							"markdown": "assets/walkthrough/spfx-intro.md"
 						}
 					},
 					{
 						"id": "set-up-local-workspace",
-						"title": "Check and get required dependencies",
-						"description": "Validate if your local workspace is ready for SharePoint Framework development. \n[Check dependencies](command:spfx-toolkit.checkDependencies)",
+						"title": "Validate your local workspace",
+						"description": "Validate if your local workspace is ready for SharePoint Framework development by checking and installing the required dependencies. \n[Check dependencies](command:spfx-toolkit.checkDependencies)",
 						"media": {
-							"image": "assets/images/validate-dependency.png",
-							"altText": "Validate dependencies"
+							"markdown": "assets/walkthrough/validate-local-setup.md"
 						}
 					},
 					{
@@ -103,8 +102,8 @@
 					},
 					{
 						"id": "tenant-details",
-						"title": "Login to Microsoft 365",
-						"description": "Retrieve tenant helpful information and Manage your SPFx projects. \nLogin to your tenant to get started. \n[Sign in to Microsoft 365](command:spfx-toolkit.login)",
+						"title": "Sign in to Microsoft 365",
+						"description": "Retrieve tenant helpful information and Manage your SPFx projects. \nSign in to your tenant to get started. \n[Sign in to Microsoft 365](command:spfx-toolkit.login)",
 						"media": {
 							"markdown": "assets/walkthrough/tenant-details.md"
 						}
@@ -167,6 +166,18 @@
 						"none"
 					],
 					"description": "Choose your preferred Node.js version manager. Choose between `nvs`, `nvm`, or `none`."
+				},
+				"spfx-toolkit.showServiceIncidentList": {
+					"title": "Show service health incidents",
+					"type": "boolean",
+					"default": "true",
+					"description": "Show the service health incidents in the account view."
+				},
+				"spfx-toolkit.showTenantWideExtensions": {
+					"title": "Show tenant-wide extensions",
+					"type": "boolean",
+					"default": "true",
+					"description": "Show the tenant-wide extensions in the account view."
 				}
 			}
 		},
@@ -212,6 +223,13 @@
 					"fontPath": "./assets/fonts/fabric-icons.woff",
 					"fontCharacter": "\\E95E"
 				}
+			},
+			"entra-id": {
+				"description": "Entra ID icon",
+				"default": {
+					"fontPath": "./assets/fonts/fabric-icons.woff",
+					"fontCharacter": "\\ED68"
+				}
 			}
 		},
 		"viewsContainers": {
@@ -331,16 +349,21 @@
 			},
 			{
 				"command": "spfx-toolkit.login",
-				"title": "Sign in to M365",
+				"title": "Sign in to Microsoft 365",
 				"category": "SharePoint Framework Toolkit",
 				"icon": "$(sign-in)"
 			},
 			{
 				"command": "spfx-toolkit.logout",
-				"title": "Sign out from M365",
+				"title": "Sign out from Microsoft 365",
 				"category": "SharePoint Framework Toolkit",
 				"icon": "$(sign-out)"
 			},
+			{
+				"command": "spfx-toolkit.registerEntraAppRegistration",
+				"title": "Create a new app registration",
+				"category": "SharePoint Framework Toolkit"
+			},
 			{
 				"command": "spfx-toolkit.refreshAppCatalogTreeView",
 				"title": "Refresh App Catalog list",