diff --git a/CHANGELOG.md b/CHANGELOG.md index 208775e..1095047 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## [3.0.0] - 2024-03-31 + +- Added VS Code extension walkthrough +- Rebrand the extension to SharePoint Framework Toolkit +- Added support for picking either nvm or nvs for Node.js version management + ## [2.6.0] - 2024-03-18 - Refactored and rebuilt the scaffolding process diff --git a/README.md b/README.md index 41ae27f..6ba6844 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@
@@ -18,7 +18,7 @@
-Viva Connections Toolkit (SPFx Toolkit) is a Visual Studio Code extension that 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. With SharePoint Framework, 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.
+SharePoint Framework Toolkit is a Visual Studio Code extension that 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. With SharePoint Framework, 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.
Capabilities |
@@ -210,7 +210,7 @@ And for Azure DevOps👇
[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
-- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - Viva Connections Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project.
+- **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)
@@ -224,7 +224,7 @@ The help and feedback section is a group of links that will direct you to the ri
### 1️⃣0️⃣ Coding Snippets
-The Viva Connections Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/).
+The SharePoint Framework Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/).
It contains snippets for working in:
@@ -246,15 +246,21 @@ Check it out in action 👇
### 1️⃣1️⃣ Teams Toolkit Integration
-[Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. Viva Connection Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Teams Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate.
+[Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. SharePoint Framework Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Teams Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate.
![Teams Toolkit integration](./assets/images/better-together.png)
[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/6-Teams-Toolkit-Integration)
+### 1️⃣2️⃣ Node.js Version Manager Support
+
+By default, the SharePoint Framework Toolkit will use the Node.js version that is installed on your machine. If you want to use a different version, you can use a Node.js Version Manager such as [nvm](https://github.com/nvm-sh/nvm) or [nvs](https://github.com/jasongin/nvs). The SharePoint Framework Toolkit will detect the preferred version of Node.js if a `.nvmrc` file is present in the root of your project, and will use that version for all the actions.
+
+You can use the settings to change which Node.js version manager you want to use. You may choose between `nvm` and `nvs`. If you wish to avoid using a Node.js version manager, you can set the value to `none`
+
## ⚙️ Architecture
-Viva Connections Toolkit for Visual Studio Code is an abstraction layer on top of the [SPFx](https://aka.ms/spfx) Yeoman generator and [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/).
+SharePoint Framework Toolkit for Visual Studio Code is an abstraction layer on top of the [SPFx](https://aka.ms/spfx) Yeoman generator and [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/).
This means that the features and capabilities provided through this tool are available for any solution which has been built with SPFx.
diff --git a/assets/images/better-together.png b/assets/images/better-together.png
index 1ffc6f7..e29986d 100644
Binary files a/assets/images/better-together.png and b/assets/images/better-together.png differ
diff --git a/assets/logo-large.png b/assets/logo-large.png
index ad276db..42bb0f5 100644
Binary files a/assets/logo-large.png and b/assets/logo-large.png differ
diff --git a/assets/walkthrough/cicd-workflow.md b/assets/walkthrough/cicd-workflow.md
new file mode 100644
index 0000000..fa6e323
--- /dev/null
+++ b/assets/walkthrough/cicd-workflow.md
@@ -0,0 +1,17 @@
+## CI/CD Workflow
+
+SharePoint Framework Toolkit extends VS Code with additional UI to present you with a scaffolding form that will allow you to create a CI/CD Workflow in 3 easy steps.
+
+It's important to know that many fields are already prefield and it is possible to hit create without changing any value to get a basic and default YAML workflow file.
+
+![CI CD pipeline](../images/CICD-pipeline.png)
+
+Check it out in action for GitHub👇
+
+![GitHub CI CD workflow](../images/gh-ci-cd.gif)
+
+And for Azure DevOps👇
+
+![Azure DevOps CI CD pipeline](../images/azdo-ci-cd.gif)
+
+[Check out our docs for more details and a step by step guide](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)
\ No newline at end of file
diff --git a/assets/walkthrough/coding-snippets.md b/assets/walkthrough/coding-snippets.md
new file mode 100644
index 0000000..61b9b67
--- /dev/null
+++ b/assets/walkthrough/coding-snippets.md
@@ -0,0 +1,21 @@
+## Coding Snippets
+
+The SharePoint Framework Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/).
+
+It contains snippets for working in:
+
+- JavaScript (resource files)
+- React
+- SASS (SCSS)
+- TypeScript
+- JSON
+
+In order to start using it simply start typing from `spfx-` and you should see a full list of snippets that will inject code into the current file.
+
+![code snippets](../images/code-snippets.png)
+
+Check out the extension [details to find out more](https://github.com/estruyf/vscode-spfx-snippets#usage)
+
+Check it out in action 👇
+
+![code snippets](../images/code-snippets.gif)
\ No newline at end of file
diff --git a/assets/walkthrough/create-new-project.md b/assets/walkthrough/create-new-project.md
new file mode 100644
index 0000000..135b9c3
--- /dev/null
+++ b/assets/walkthrough/create-new-project.md
@@ -0,0 +1,37 @@
+## Create a new project
+
+Creating a new project was never easier. Just use the **create a new project** action, and the extension will guide you through the process with a dedicated scaffolding form.
+
+![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.
+
+![All SPFx project support](../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/).
+
+![Additional dependency step](../images/scaffolding-additional-step.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#1-scaffold-a-new-spfx-project)
+
+## 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/).
+
+![Sample gallery](../images/samples.png)
+
+The extension provides a set of filters to help you find the right sample for your needs. You may search by: author, title, description, SPFx version, and component type. It is also possible browse sample details view directly from VS Code checking all sample details before you create a new project.
+
+Switch between the list and grid view and don't worry about the size of your VS Code as it is fully responsive.
+
+![Sample gallery is responsive](../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](../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)
diff --git a/assets/walkthrough/spfx-intro.md b/assets/walkthrough/spfx-intro.md
new file mode 100644
index 0000000..3aa2740
--- /dev/null
+++ b/assets/walkthrough/spfx-intro.md
@@ -0,0 +1,12 @@
+
+## 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.
+
+Go over the [overview of the SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview) to find out more.
+
+## Set up your Microsoft 365 tenant
+
+To build and deploy client-side web parts, extensions or adaptive cards using the SharePoint Framework, you need a Microsoft 365 tenant. You may join the [developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program) to get a free Microsoft 365 developer tenant.
+
+Go over the [set up instructions](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) to find out more.
\ No newline at end of file
diff --git a/assets/walkthrough/tasks-and-actions.md b/assets/walkthrough/tasks-and-actions.md
new file mode 100644
index 0000000..e142fd3
--- /dev/null
+++ b/assets/walkthrough/tasks-and-actions.md
@@ -0,0 +1,69 @@
+## 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.
+
+![Actions](../images/actions.png)
+
+Currently the extension allows you to:
+
+- **CI/CD Workflow** - This action will allow you to generate yaml CI/CD GitHub Workflow or Azure DevOps Pipeline to bundle, package, and deploy your project to any app catalog on every code push.
+
+![CI CD pipeline](../images/CICD-pipeline.png)
+
+Check it out in action for GitHub👇
+
+![GitHub CI CD workflow](../images/gh-ci-cd.gif)
+
+And for Azure DevOps👇
+
+![Azure DevOps CI CD pipeline](../images/azdo-ci-cd.gif)
+
+[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](../images/upgrade-project.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#upgrade-project)
+
+- **Validate current 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.
+
+![Upgrade project](../images/validate-project.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#validate-current-project)
+
+- **Rename current project** - Forget about manual work and let the extension rename your project and generate a new solution ID.
+
+![Rename](../images/rename.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#rename-current-project)
+
+- **Grant API permissions** - The action will Grant all API permissions specified in the package-solution.json of the current project. This is especially helpful if you just want to debug your SPFx solution using Workbench. No longer do you need to bundle, package, and deploy the project to then go to the SharePoint admin portal and consent to the permissions. All of that is now done with just a single click.
+
+![Grant permissions](../images/grant-permissions.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+
+- **Deploy project** - This action will only work when the user is logged in to tenant and the sppkg file is present. The action will deploy the project to the selected (tenant or site) app catalog.
+
+![Deploy](../images/deploy.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+
+- **Add new component** - Allows scaffolding a new SPFx project as a new component of the currently opened project. The action under the hood uses the same SharePoint Yeoman generator to scaffold a new project and this feature is an abstraction UI layer.
+
+![Add component](../images/add-component.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
+
+- **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)
\ No newline at end of file
diff --git a/assets/walkthrough/tenant-details.md b/assets/walkthrough/tenant-details.md
new file mode 100644
index 0000000..bdeee54
--- /dev/null
+++ b/assets/walkthrough/tenant-details.md
@@ -0,0 +1,29 @@
+## Login 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.
+
+![login](../images/login.png)
+
+Thanks to that the extension will retrieve helpful URLs from your tenant like:
+
+- link to SharePoint main site
+- link to SharePoint admin site
+- link to 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.
+
+![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.
+
+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.
+
+![validate serve](../images/validate-serve-config.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.3-Login-to-your-tenant-&-retrieve-environment-details)
\ No newline at end of file
diff --git a/contributing.md b/contributing.md
index 7a8ade8..0d4afd4 100644
--- a/contributing.md
+++ b/contributing.md
@@ -1,6 +1,6 @@
# Contribution guidelines
-Thank you for your interest in contributing to the Viva Connections Toolkit extension. In this guide, we will walk you through the steps to get started.
+Thank you for your interest in contributing to the SharePoint Framework Toolkit extension. In this guide, we will walk you through the steps to get started.
## Before you start
diff --git a/package-lock.json b/package-lock.json
index bb090ba..dfbccd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "viva-connections-toolkit",
- "version": "2.6.0",
+ "version": "3.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "viva-connections-toolkit",
- "version": "2.6.0",
+ "version": "3.0.0",
"license": "MIT",
"dependencies": {
"@pnp/cli-microsoft365": "6.11.0",
diff --git a/package.json b/package.json
index 963114d..37dae24 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "viva-connections-toolkit",
- "displayName": "Viva Connections Toolkit",
- "description": "Viva Connections 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": "2.6.0",
+ "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.0.0",
"publisher": "m365pnp",
"preview": false,
"homepage": "https://github.com/pnp/vscode-viva",
@@ -45,6 +45,106 @@
"license": "MIT",
"main": "./dist/extension.js",
"contributes": {
+ "walkthroughs": [
+ {
+ "id": "spfx-toolkit-intro",
+ "title": "SharePoint Framework Toolkit Introduction",
+ "description": "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)",
+ "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)",
+ "media": {
+ "image": "assets/images/validate-dependency.png",
+ "altText": "Validate dependencies"
+ }
+ },
+ {
+ "id": "create-new-project",
+ "title": "Create new project",
+ "description": "Use the scaffolding form to create a new project or use one of the existing samples to kick off a new project and boost your development.\n[Create a new project](command:spfx-toolkit.createProject)\n[View samples](command:spfx-toolkit.samplesGallery)",
+ "media": {
+ "markdown": "assets/walkthrough/create-new-project.md"
+ }
+ },
+ {
+ "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)",
+ "media": {
+ "markdown": "assets/walkthrough/tenant-details.md"
+ }
+ },
+ {
+ "id": "tasks-and-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.",
+ "media": {
+ "markdown": "assets/walkthrough/tasks-and-actions.md"
+ }
+ },
+ {
+ "id": "coding-snippets",
+ "title": "Write code faster with coding snippets",
+ "description": "Write more with less using coding snippets",
+ "media": {
+ "markdown": "assets/walkthrough/coding-snippets.md"
+ }
+ },
+ {
+ "id": "cicd-workflow",
+ "title": "Create a CI/CD workflow for your SPFx project",
+ "description": "Create a GitHub Workflow or Azure DevOps pipeline to bundle, package, and deploy your SharePoint Framework project to any App Catalog. \n[Generate CI/CD workflow](command:spfx-toolkit.pipeline)",
+ "media": {
+ "markdown": "assets/walkthrough/cicd-workflow.md"
+ }
+ },
+ {
+ "id": "help",
+ "title": "Continue your learning and get additional tooling",
+ "description": "SharePoint Framework Toolkit is your single point to get to the official Microsoft documentation and learning regarding SharePoint Framework and additional tooling that will help you create apps for Microsoft 365.",
+ "media": {
+ "image": "assets/images/help-and-feedback.png",
+ "altText": "help and feedback section"
+ }
+ },
+ {
+ "id": "Community",
+ "title": "Connect with the Microsoft 365 and Power Platform community",
+ "description": "Stay up to date and connected. \nVisit the [Microsoft 365 and Power Platform community](https://pnp.github.io/) to get more learning materials, guidance, tooling, and engage in community calls. \nJoin the [community Discord server](https://aka.ms/community/discord) to stay connected and help out others. \n Sharing is caring!",
+ "media": {
+ "image": "assets/images/parker-pnp.png",
+ "altText": "PnP Parker"
+ }
+ }
+ ]
+ }
+ ],
+ "configuration": {
+ "title": "SharePoint Framework Toolkit",
+ "properties": {
+ "spfx-toolkit.nodeVersionManager": {
+ "title": "Node.js Version Manager",
+ "type": "string",
+ "default": "nvm",
+ "enum": [
+ "nvm",
+ "nvs",
+ "none"
+ ],
+ "description": "Choose your preferred Node.js version manager. Choose between `nvs`, `nvm`, or `none`."
+ }
+ }
+ },
"icons": {
"spo-m365": {
"description": "Microsoft 365 icon",
@@ -93,7 +193,7 @@
"activitybar": [
{
"id": "pnp-view",
- "title": "Viva Connections Toolkit",
+ "title": "SharePoint Framework Toolkit",
"icon": "assets/logo-light.svg"
}
]
@@ -102,7 +202,7 @@
"pnp-view": [
{
"id": "pnp-view-empty",
- "name": "Viva Connections Toolkit",
+ "name": "SharePoint Framework Toolkit",
"when": "pnp.project.showWelcome"
},
{
@@ -135,136 +235,141 @@
"viewsWelcome": [
{
"view": "pnp-view-empty",
- "contents": "Welcome to Viva Connections Toolkit\n\n\nTo start create a new SharePoint Framework project. \n[Create a new project](command:viva-connections-toolkit.createProject)\n\n\n\n\n\nUse a sample to kick off a new project and boost your development.\n[View samples](command:viva-connections-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:viva-connections-toolkit.checkDependencies)\n\n\n\n\n\nInstall the required dependencies.\n[Install dependencies](command:viva-connections-toolkit.installDependencies)\n\n\n\nIf you need additional help or resources visit the [extension wiki](https://github.com/pnp/vscode-viva/wiki) for more information."
+ "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\nIf you need additional help or resources visit the [extension wiki](https://github.com/pnp/vscode-viva/wiki) for more information or go over the [walkthrough](command:spfx-toolkit.welcome)."
}
],
"commands": [
{
- "command": "viva-connections-toolkit.checkDependencies",
+ "command": "spfx-toolkit.welcome",
+ "title": "Welcome",
+ "category": "SharePoint Framework Toolkit"
+ },
+ {
+ "command": "spfx-toolkit.checkDependencies",
"title": "Check dependencies",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.installDependencies",
+ "command": "spfx-toolkit.installDependencies",
"title": "Install dependencies",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.createProject",
+ "command": "spfx-toolkit.createProject",
"title": "Create new project",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.addToProject",
+ "command": "spfx-toolkit.addToProject",
"title": "Add component to project",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.executeTerminalCommand",
+ "command": "spfx-toolkit.executeTerminalCommand",
"title": "Execute terminal command",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.upgradeProject",
+ "command": "spfx-toolkit.upgradeProject",
"title": "Upgrade project to latest SPFx version",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.deployProject",
+ "command": "spfx-toolkit.deployProject",
"title": "Deploy the project",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.samplesGallery",
+ "command": "spfx-toolkit.samplesGallery",
"title": "Open SharePoint Framework Samples gallery",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.validateProject",
+ "command": "spfx-toolkit.validateProject",
"title": "Validate project",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.renameProject",
+ "command": "spfx-toolkit.renameProject",
"title": "Rename project",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.grantAPIPermissions",
+ "command": "spfx-toolkit.grantAPIPermissions",
"title": "Grant API permissions",
- "category": "Viva Connections Toolkit"
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.pipelineGitHub",
- "title": "Generate GitHub CI/CD workflow",
- "category": "Viva Connections Toolkit"
+ "command": "spfx-toolkit.pipeline",
+ "title": "Generate CI/CD workflow",
+ "category": "SharePoint Framework Toolkit"
},
{
- "command": "viva-connections-toolkit.login",
+ "command": "spfx-toolkit.login",
"title": "Sign in to M365",
- "category": "Viva Connections Toolkit",
+ "category": "SharePoint Framework Toolkit",
"icon": "$(sign-in)"
},
{
- "command": "viva-connections-toolkit.logout",
+ "command": "spfx-toolkit.logout",
"title": "Sign out from M365",
- "category": "Viva Connections Toolkit",
+ "category": "SharePoint Framework Toolkit",
"icon": "$(sign-out)"
},
{
- "command": "viva-connections-toolkit.refreshAppCatalogTreeView",
+ "command": "spfx-toolkit.refreshAppCatalogTreeView",
"title": "Refresh App Catalog list",
- "category": "Viva Connections Toolkit",
+ "category": "SharePoint Framework Toolkit",
"icon": "$(refresh)"
},
{
- "command": "viva-connections-toolkit.refreshAccountTreeView",
+ "command": "spfx-toolkit.refreshAccountTreeView",
"title": "Refresh Account view",
- "category": "Viva Connections Toolkit",
+ "category": "SharePoint Framework Toolkit",
"icon": "$(refresh)"
}
],
"menus": {
"commandPalette": [
{
- "command": "viva-connections-toolkit.executeTerminalCommand",
+ "command": "spfx-toolkit.executeTerminalCommand",
"when": "false"
},
{
- "command": "viva-connections-toolkit.addToProject",
+ "command": "spfx-toolkit.addToProject",
"when": "pnp.project.isSPFxProject"
},
{
- "command": "viva-connections-toolkit.upgradeProject",
+ "command": "spfx-toolkit.upgradeProject",
"when": "pnp.project.isSPFxProject"
},
{
- "command": "viva-connections-toolkit.validateProject",
+ "command": "spfx-toolkit.validateProject",
"when": "pnp.project.isSPFxProject"
}
],
"view/title": [
{
- "command": "viva-connections-toolkit.refreshAppCatalogTreeView",
+ "command": "spfx-toolkit.refreshAppCatalogTreeView",
"when": "view == pnp-view-environment",
"group": "navigation"
},
{
- "command": "viva-connections-toolkit.refreshAccountTreeView",
+ "command": "spfx-toolkit.refreshAccountTreeView",
"when": "view == pnp-view-account",
"group": "navigation"
}
],
"view/item/context": [
{
- "command": "viva-connections-toolkit.logout",
+ "command": "spfx-toolkit.logout",
"when": "view == pnp-view-account && viewItem == m365Account",
"group": "inline@1"
}
],
"explorer/context": [
{
- "command": "viva-connections-toolkit.deployProject",
+ "command": "spfx-toolkit.deployProject",
"group": "pnp.project@1",
"when": "resourceExtname == '.sppkg' && pnp.project.hasAppCatalog"
}
diff --git a/src/constants/Commands.ts b/src/constants/Commands.ts
index af22174..4d3bc78 100644
--- a/src/constants/Commands.ts
+++ b/src/constants/Commands.ts
@@ -47,4 +47,7 @@ export const Commands = {
// TreeViews
refreshAppCatalogTreeView: `${EXTENSION_NAME}.refreshAppCatalogTreeView`,
refreshAccountTreeView: `${EXTENSION_NAME}.refreshAccountTreeView`,
+
+ // Welcome
+ welcome: `${EXTENSION_NAME}.welcome`,
};
\ No newline at end of file
diff --git a/src/constants/General.ts b/src/constants/General.ts
index 80d88f9..654eb19 100644
--- a/src/constants/General.ts
+++ b/src/constants/General.ts
@@ -1 +1 @@
-export const EXTENSION_NAME = 'viva-connections-toolkit';
\ No newline at end of file
+export const EXTENSION_NAME = 'spfx-toolkit';
\ No newline at end of file
diff --git a/src/constants/NodeVersionManagers.ts b/src/constants/NodeVersionManagers.ts
new file mode 100644
index 0000000..65b0c49
--- /dev/null
+++ b/src/constants/NodeVersionManagers.ts
@@ -0,0 +1,7 @@
+/* eslint-disable no-unused-vars */
+// eslint-disable-next-line no-shadow
+export enum NodeVersionManagers {
+ nvm = 'nvm',
+ nvs = 'nvs',
+ none = 'none'
+}
\ No newline at end of file
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 5e25ac6..cb7760c 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -5,6 +5,7 @@ export * from './ContextKeys';
export * from './ExtensionTypes';
export * from './FrameworkTypes';
export * from './General';
+export * from './NodeVersionManagers';
export * from './ProjectFileContent';
export * from './WebviewCommand';
export * from './WebViewTypes';
diff --git a/src/panels/CommandPanel.ts b/src/panels/CommandPanel.ts
index f7f20b8..7691aae 100644
--- a/src/panels/CommandPanel.ts
+++ b/src/panels/CommandPanel.ts
@@ -23,6 +23,9 @@ export class CommandPanel {
subscriptions.push(
commands.registerCommand(Commands.refreshAccountTreeView, CommandPanel.refreshAccountTreeView)
);
+ subscriptions.push(
+ commands.registerCommand(Commands.welcome, () => commands.executeCommand('workbench.action.openWalkthrough', 'm365pnp.viva-connections-toolkit#spfx-toolkit-intro', false))
+ );
CommandPanel.init();
}
@@ -234,7 +237,8 @@ export class CommandPanel {
]),
new ActionTreeItem('Support', '', undefined, undefined, undefined, undefined, undefined, [
new ActionTreeItem('Wiki', '', { name: 'question', custom: false }, undefined, 'vscode.open', Uri.parse('https://github.com/pnp/vscode-viva/wiki')),
- new ActionTreeItem('Report an issue', '', { name: 'github', custom: false }, undefined, 'vscode.open', Uri.parse('https://github.com/pnp/vscode-viva/issues/new/choose'))
+ new ActionTreeItem('Report an issue', '', { name: 'github', custom: false }, undefined, 'vscode.open', Uri.parse('https://github.com/pnp/vscode-viva/issues/new/choose')),
+ new ActionTreeItem('Start Walkthrough', '', { name: 'info', custom: false }, undefined, Commands.welcome)
])
];
diff --git a/src/services/TerminalCommandExecuter.ts b/src/services/TerminalCommandExecuter.ts
index 67c73f7..9ad79ec 100644
--- a/src/services/TerminalCommandExecuter.ts
+++ b/src/services/TerminalCommandExecuter.ts
@@ -1,5 +1,5 @@
import { commands, ThemeIcon, workspace, window, Terminal } from 'vscode';
-import { Commands } from '../constants';
+import { Commands, EXTENSION_NAME, NodeVersionManagers } from '../constants';
import { Subscription } from '../models';
import { Extension } from './Extension';
import { getPlatform } from '../utils';
@@ -74,16 +74,30 @@ export class TerminalCommandExecuter {
iconPath: icon ? new ThemeIcon(icon) : undefined
});
+ // Check the user's settings to see if they want to use nvm or nvs
+ // Get the user's preferred node version manager -- nvm or nvs or none, if they don't want to use either
+ const nodeVersionManager: string = TerminalCommandExecuter.getExtensionSettings('nodeVersionManager', 'nvm');
+
// Check if nvm is used
const nvmFiles = await workspace.findFiles('.nvmrc', '**/node_modules/**');
- if (nvmFiles.length > 0) {
- terminal.sendText('nvm use');
+
+ // If there are .nvmrc files and the user wants to use nvm, then use their preferred node version manager
+ if (nvmFiles.length > 0 && nodeVersionManager !== NodeVersionManagers.none) {
+ if (nodeVersionManager === NodeVersionManagers.nvs) {
+ terminal.sendText('nvs use');
+ } else {
+ terminal.sendText('nvm use');
+ }
}
}
return terminal;
}
+ private static getExtensionSettings