🎉 Add vscode extension to find ETL step files more easily (#3365)

* Add prototype of VSCode extension to better search for ETL step files

* Update gitignore to ignore node_modules

* Move to a non-hidden folder

* Remove dist folder

* Ignore dist folder

* Revert to original version and allow for easy debugging

* Ignore etl/data explicitly

* Show relative path

* Show only latest version

* Allow for latest steps

* Fix bug and hide unnecessary part of the path in display

* Show only path, without date

* Ignore backports and archive files

* Fix bug

* Package new version

* Add documentation

.gitignore

@@ -56,3 +56,5 @@ site/
 notebooks/
 
 zpop/
+node_modules/
+dist/

vscode_extensions/README.md

@@ -0,0 +1,50 @@
+# Creating a new extension
+
+## Initialize code
+
+Install the tool to create all the boilerplate code:
+```
+npm install -g yo generator-code
+```
+
+Run the tool:
+```
+yo code
+```
+
+At this stage you may need to add some code to `src/extension.ts`, `package.json`, and elsewhere.
+
+## Set up debug mode
+
+Go to the root folder of the extension, and run
+```
+npm run install
+```
+
+Open a VSCode on that folder. On the terminal, run
+````
+npm run watch
+````
+(and keep this terminal open).
+
+Then go to the debug pane, and hit the play button to "Run Extension". This will open a new VSCode window.
+
+On the new window, hit cmd+shift+p and type the name of the extension (or its shortcut).
+
+You can now make changes in the code, then go to the new window, and hit `cmd+r` to refresh.
+Then, rerun the extension and it should reflect the latest changes.
+
+## Package the extension
+
+Once you are happy with the result, bump up the version in package.json, go to the terminal, ensure the extension compiles, and package it.
+```
+npm run compile
+vsce package
+```
+
+This creates a new .vsix file for the new version.
+
+
+## Install an extension
+
+Press `cmd+shift+p` and select "Extensions: Install from VSIX". Select the `*.vsix` file of the extension you want to install. Restart VSCode to ensure the new version is installed (although it may not be necessary).

vscode_extensions/find-latest-etl-step/.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

vscode_extensions/find-latest-etl-step/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers", "ms-vscode.extension-test-runner"]
+}

vscode_extensions/find-latest-etl-step/.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+	  {
+		"name": "Run Extension",
+		"type": "node",
+		"request": "launch",
+		"program": "${workspaceFolder}/dist/extension.js",  // Launch the built extension
+		"args": ["--extensionDevelopmentPath=${workspaceFolder}"],  // Run in dev mode
+		"outFiles": ["${workspaceFolder}/dist/**/*.js"],  // The output files to track
+		"runtimeExecutable": "${execPath}",  // Use the current VSCode executable
+		"stopOnEntry": false,
+		"sourceMaps": true,
+		"smartStep": true,
+		"internalConsoleOptions": "openOnSessionStart"
+	  }
+	]
+  }

vscode_extensions/find-latest-etl-step/.vscode/settings.json

@@ -0,0 +1,13 @@
+// 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
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

vscode_extensions/find-latest-etl-step/.vscode/tasks.json

@@ -0,0 +1,34 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+      {
+          "label": "watch",
+          "type": "npm",
+          "script": "esbuild-watch",
+          "isBackground": true,
+          "problemMatcher": {
+              "owner": "typescript",
+              "fileLocation": [
+                  "relative",
+                  "${workspaceFolder}"
+              ],
+              "pattern": {
+                  "regexp": "^.*\\((\\d+,\\d+)\\):\\s*(error|warning)\\s+(TS\\d+):\\s*(.*)$",
+                  "file": 1,
+                  "line": 2,
+                  "severity": 3,
+                  "code": 4
+              },
+              "background": {
+                  "activeOnStart": true,
+                  "beginsPattern": "Entering watch mode...",
+                  "endsPattern": "Build completed."
+              }
+          },
+          "group": {
+              "kind": "build",
+              "isDefault": true
+          }
+      }
+  ]
+}

vscode_extensions/find-latest-etl-step/.vscodeignore

@@ -0,0 +1,14 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+esbuild.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/eslint.config.mjs
+**/*.map
+**/*.ts
+**/.vscode-test.*

vscode_extensions/find-latest-etl-step/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "find-latest-etl-step" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

vscode_extensions/find-latest-etl-step/README.md

@@ -0,0 +1,16 @@
+# Find Latest ETL Step Extension
+
+This VSCode extension allows you to search for files in your ETL project by name.
+Only the steps corresponding to the latest existing version will be shown.
+
+## Usage
+
+1. Press `Ctrl+Shift+L` to invoke the extension.
+2. Start typing the name of the file you want to search for.
+3. Select the file from the list (moving up and down with the cursor), and press enter to open.
+
+## Installation
+
+- Press `cmd+shift+p` and select "Extensions: Install from VSIX".
+- Select the latest version of the packaged extension, e.g. `find-latest-etl-step-0.0.2.vsix`.
+- Restart VSCode to ensure the new version is installed (although it may not be necessary).

vscode_extensions/find-latest-etl-step/esbuild.config.js

@@ -0,0 +1,34 @@
+const esbuild = require('esbuild');
+
+// Common build options
+const buildOptions = {
+  entryPoints: ['src/extension.ts'],
+  bundle: true,
+  outfile: 'dist/extension.js',
+  external: ['vscode'],
+  platform: 'node',
+  format: 'cjs',
+  sourcemap: true,
+  target: 'node12'
+};
+
+// Start the build
+async function startBuild() {
+  try {
+    // If watch mode is enabled, create a context and start watching for changes
+    if (process.argv.includes('--watch')) {
+      const ctx = await esbuild.context(buildOptions);
+      console.log('Entering watch mode...');
+      await ctx.watch();
+    } else {
+      // Otherwise, just run the build once
+      await esbuild.build(buildOptions);
+      console.log('Build complete.');
+    }
+  } catch (error) {
+    console.error('Build failed:', error);
+    process.exit(1);
+  }
+}
+
+startBuild();

vscode_extensions/find-latest-etl-step/esbuild.js

@@ -0,0 +1,56 @@
+const esbuild = require("esbuild");
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(`    ${location.file}:${location.line}:${location.column}:`);
+			});
+			console.log('[watch] build finished');
+		});
+	},
+};
+
+async function main() {
+	const ctx = await esbuild.context({
+		entryPoints: [
+			'src/extension.ts'
+		],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production,
+		sourcesContent: false,
+		platform: 'node',
+		outfile: 'dist/extension.js',
+		external: ['vscode'],
+		logLevel: 'silent',
+		plugins: [
+			/* add to the end of plugins array */
+			esbuildProblemMatcherPlugin,
+		],
+	});
+	if (watch) {
+		await ctx.watch();
+	} else {
+		await ctx.rebuild();
+		await ctx.dispose();
+	}
+}
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});

vscode_extensions/find-latest-etl-step/eslint.config.mjs

@@ -0,0 +1,28 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [{
+    files: ["**/*.ts"],
+}, {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 2022,
+        sourceType: "module",
+    },
+
+    rules: {
+        "@typescript-eslint/naming-convention": ["warn", {
+            selector: "import",
+            format: ["camelCase", "PascalCase"],
+        }],
+
+        curly: "warn",
+        eqeqeq: "warn",
+        "no-throw-literal": "warn",
+        semi: "warn",
+    },
+}];