Merge pull request #693 from microsoft/ddossett/notifications-sample

Add Notification Sample

notifications-sample/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

notifications-sample/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint"
+	]
+}

notifications-sample/.vscode/launch.json

@@ -0,0 +1,34 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		},
+		{
+			"name": "Extension Tests",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/test/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

notifications-sample/.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

notifications-sample/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

notifications-sample/.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

notifications-sample/README.md

@@ -0,0 +1,44 @@
+# Notifications Sample
+
+This sample showcases a handful of basic configurations for notifications in VS Code:
+- Info Notification
+- Info Notification as Modal
+- Warning Notification
+- Warning Notification with Actions
+- Progress Notification
+
+Read the [Notifications UX Guidelines](https://code.visualstudio.com/api/ux-guidelines/notifications) to learn how to effectively use notifications in an extension.
+
+## Demo
+
+![demo](demo.gif)
+
+## VS Code API
+
+### `vscode` module
+
+- [`commands.registerCommand`](https://code.visualstudio.com/api/references/vscode-api#commands.registerCommand)
+- [`window.showInformationMessage`](https://code.visualstudio.com/api/references/vscode-api#window.showInformationMessage)
+- [`window.showWarningMessage`](https://code.visualstudio.com/api/references/vscode-api#window.showWarningMessage)
+- [`window.showErrorMessage`](https://code.visualstudio.com/api/references/vscode-api#window.showErrorMessage)
+- [`window.withProgress`](https://code.visualstudio.com/api/references/vscode-api#window.withProgress)
+
+### Contribution Points
+
+- [`contributes.commands`](https://code.visualstudio.com/api/references/contribution-points#contributes.commands)
+
+## Running the Sample
+
+- Run `npm install` in terminal to install dependencies
+- Press F5 or Run the `Run Extension` target in the Debug View. This will:
+	- Start a task `npm: watch` to compile the code
+	- Run the extension in a new VS Code window
+- Try running the commands to show the notifications:
+
+```
+- Notifications Sample: Show Info Notification
+- Notifications Sample: Show Info Notification as Modal
+- Notifications Sample: Show Warning Notification
+- Notifications Sample: Show Warning Notification with Actions
+- Notifications Sample: Show Progress Notification
+```

notifications-sample/package.json

@@ -0,0 +1,82 @@
+{
+	"name": "notifications-sample",
+	"displayName": "Notifications Sample",
+	"description": "Examples of notification types and various configurations",
+	"version": "0.0.1",
+	"engines": {
+		"vscode": "^1.69.0"
+	},
+	"categories": [
+		"Other"
+	],
+	"activationEvents": [
+		"onCommand:notifications-sample.showInfo",
+		"onCommand:notifications-sample.showInfoAsModal",
+		"onCommand:notifications-sample.showWarning",
+		"onCommand:notifications-sample.showWarningWithActions",
+		"onCommand:notifications-sample.showError",
+		"onCommand:notifications-sample.showProgress",
+		"onCommand:notifications-sample.showAll"
+
+	],
+	"main": "./out/extension.js",
+	"contributes": {
+		"commands": [
+			{
+				"command": "notifications-sample.showInfo",
+				"title": "Show Info Notification",
+				"category": "Notifications Sample"
+			},
+			{
+				"command": "notifications-sample.showInfoAsModal",
+				"title": "Show Info Notification As Modal",
+				"category": "Notifications Sample"
+			},
+			{
+				"command": "notifications-sample.showWarning",
+				"title": "Show Warning Notification",
+				"category": "Notifications Sample"
+			},
+			{
+				"command": "notifications-sample.showWarningWithActions",
+				"title": "Show Warning Notification With Actions",
+				"category": "Notifications Sample"
+			},
+			{
+				"command": "notifications-sample.showError",
+				"title": "Show Error Notification",
+				"category": "Notifications Sample"
+			},
+			{
+				"command": "notifications-sample.showProgress",
+				"title": "Show Progress Notification",
+				"category": "Notifications Sample"
+			},
+			{
+				"command": "notifications-sample.showAll",
+				"title": "Show All Notifications",
+				"category": "Notifications Sample"
+			}
+		]
+	},
+	"scripts": {
+		"vscode:prepublish": "npm run compile",
+		"compile": "tsc -p ./",
+		"watch": "tsc -watch -p ./",
+		"pretest": "npm run compile && npm run lint",
+		"lint": "eslint src --ext ts"
+	},
+	"devDependencies": {
+		"@types/vscode": "^1.69.0",
+		"@types/glob": "^7.2.0",
+		"@types/mocha": "^9.1.1",
+		"@types/node": "16.x",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"eslint": "^8.16.0",
+		"glob": "^8.0.3",
+		"mocha": "^10.0.0",
+		"typescript": "^4.7.2",
+		"@vscode/test-electron": "^2.1.3"
+	}
+}

notifications-sample/src/extension.ts

@@ -0,0 +1,78 @@
+import * as vscode from 'vscode';
+
+export function activate(context: vscode.ExtensionContext) {
+
+	// Simple notifications
+	const showInfoNotification = vscode.commands.registerCommand('notifications-sample.showInfo', () => {
+		vscode.window.showInformationMessage('Info Notification');
+	});
+
+	const showInfoNotificationAsModal = vscode.commands.registerCommand('notifications-sample.showInfoAsModal', () => {
+		vscode.window.showInformationMessage('Info Notification As Modal', { modal: true });
+	});
+
+	const showWarningNotification = vscode.commands.registerCommand('notifications-sample.showWarning', () => {
+		vscode.window.showWarningMessage('Warning Notification');
+	});
+
+	const showErrorNotification = vscode.commands.registerCommand('notifications-sample.showError', () => {
+		vscode.window.showErrorMessage('Error Notification');
+	});
+
+	// Notifcation with actions
+	const showWarningNotificationWithActions = vscode.commands.registerCommand('notifications-sample.showWarningWithActions', async () => {
+		const selection = await vscode.window.showWarningMessage('Warning Notification With Actions', 'Action 1', 'Action 2', 'Action 3');
+		
+		if (selection !== undefined) {
+			vscode.window.showInformationMessage(`You selected: ${selection}`, { modal: true });
+		}
+		
+	});
+
+	// Progress notification with option to cancel
+	const showProgressNotification = vscode.commands.registerCommand('notifications-sample.showProgress', () => {
+		vscode.window.withProgress({
+			location: vscode.ProgressLocation.Notification,
+			title: "Progress Notification",
+			cancellable: true
+		}, (progress, token) => {
+			token.onCancellationRequested(() => {
+				console.log("User canceled the long running operation");
+			});
+
+			progress.report({ increment: 0 });
+
+			setTimeout(() => {
+				progress.report({ increment: 10, message: "Still going..." });
+			}, 1000);
+
+			setTimeout(() => {
+				progress.report({ increment: 40, message: "Still going even more..." });
+			}, 2000);
+
+			setTimeout(() => {
+				progress.report({ increment: 50, message: "I am long running! - almost there..." });
+			}, 3000);
+
+			const p = new Promise<void>(resolve => {
+				setTimeout(() => {
+					resolve();
+				}, 5000);
+			});
+
+			return p;
+		});
+	});
+
+	// Show all notifications to show do not disturb behavior
+	const showAllNotifications = vscode.commands.registerCommand('notifications-sample.showAll', () => {
+		vscode.commands.executeCommand('notifications-sample.showInfo');
+		vscode.commands.executeCommand('notifications-sample.showWarning');
+		vscode.commands.executeCommand('notifications-sample.showWarningWithActions');
+		vscode.commands.executeCommand('notifications-sample.showError');
+		vscode.commands.executeCommand('notifications-sample.showProgress');
+		vscode.commands.executeCommand('notifications-sample.showInfoAsModal');
+	});
+
+	context.subscriptions.push(showInfoNotification, showInfoNotificationAsModal, showWarningNotification, showErrorNotification, showProgressNotification, showWarningNotificationWithActions, showAllNotifications);
+}

notifications-sample/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "ES2020",
+		"outDir": "out",
+		"lib": [
+			"ES2020"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	}
+}