Adds a webview template engine for easily creating webviews

packages/language-support/src/index.ts

@@ -4,7 +4,7 @@ export type { DbSchema } from './dbSchema';
 export { _internalFeatureFlags } from './featureFlags';
 export { antlrUtils } from './helpers';
 export { CypherTokenType, lexerSymbols } from './lexerSymbols';
-export { parse, parserWrapper } from './parserWrapper';
+export { parse, parserWrapper, parseStatementsStrs } from './parserWrapper';
 export { signatureHelp, toSignatureInformation } from './signatureHelp';
 export {
   applySyntaxColouring,

packages/language-support/src/parserWrapper.ts

@@ -20,6 +20,7 @@ import {
 import {
   findParent,
   findStopNode,
+  getTokens,
   inNodeLabel,
   inRelationshipType,
   isDefined,
@@ -130,6 +131,28 @@ export function createParsingScaffolding(query: string): ParsingScaffolding {
   };
 }
 
+export function parseStatementsStrs(query: string): string[] {
+  const statements = parse(query);
+  const result: string[] = [];
+
+  for (const statement of statements) {
+    const tokenStream = statement.parser?.getTokenStream() ?? [];
+    const tokens = getTokens(tokenStream as CommonTokenStream);
+    const statementStr = tokens
+      .filter((token) => token.type !== CypherLexer.EOF)
+      .map((token) => token.text)
+      .join('');
+
+    // Do not return empty statements
+    if (statementStr.trimLeft().length != 0) {
+      result.push(statementStr);
+    }
+  }
+
+  return result;
+}
+
+/* Parses a query without storing it in the cache */
 export function parse(query: string): StatementOrCommandContext[] {
   const statementScaffolding =
     createParsingScaffolding(query).statementsScaffolding;

packages/vscode-extension/.gitignore

@@ -1,3 +1,4 @@
 tests/fixtures/.env.test
 webview_tests/fixtures/.env.test
-.wdio-vscode-service
+.wdio-vscode-service
+resources/styles/ndl.css

packages/vscode-extension/package.json

@@ -6,7 +6,7 @@
   "publisher": "neo4j-extensions",
   "author": "Neo4j Inc.",
   "license": "Apache-2.0",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "preview": true,
   "categories": [
     "Programming Languages",
@@ -64,6 +64,17 @@
       {
         "command": "neo4j.switchDatabase",
         "title": "Switch to database"
+      },
+      {
+        "command": "neo4j.runCypherFile",
+        "title": "Neo4j: Run Cypher Statements in a file"
+      }
+    ],
+    "keybindings": [
+      {
+        "command": "neo4j.runCypherFile",
+        "key": "ctrl+alt+space",
+        "mac": "ctrl+cmd+space"
       }
     ],
     "viewsWelcome": [
@@ -272,17 +283,20 @@
     "vscode:prepublish": "npm run build",
     "bundle-language-server": "cd ../language-server && npm run bundle && cp dist/cypher-language-server.js ../vscode-extension/dist/ && npm run bundle-worker && cp dist/lintWorker.js ../vscode-extension/dist/",
     "bundle-extension": "node ./esbuild.js --production",
+    "bundle-ndl": "esbuild src/ndl.ts --outfile=resources/styles/ndl.js --bundle --loader:.woff2=dataurl && rm resources/styles/ndl.js",
     "bundle-extension:dev": "node ./esbuild.js",
-    "bundle-webview-controller": "esbuild ./src/webviews/controllers/connectionPanelController.ts --bundle --outfile=dist/webviews/connectionPanelController.js --platform=browser",
-    "build": "tsc -b && npm run gen-textmate && npm run bundle-extension && npm run bundle-language-server && npm run bundle-webview-controller",
-    "build:dev": "tsc -b && npm run gen-textmate && npm run bundle-extension:dev && npm run bundle-language-server && npm run bundle-webview-controller",
+    "bundle-webview-controllers": "esbuild ./src/webviews/controllers/* --bundle --outdir=dist/webviews/ --platform=browser",
+    "build": "tsc -b && npm run gen-textmate && npm run bundle-extension && npm run bundle-language-server && npm run bundle-webview-controllers && npm run bundle-ndl",
+    "build:dev": "tsc -b && npm run gen-textmate && npm run bundle-extension:dev && npm run bundle-language-server && npm run bundle-webview-controllers",
     "clean": "rm -rf dist",
     "test:e2e": "npm run build && npm run test:apiAndUnit && npm run test:webviews",
     "test:apiAndUnit": "rm -rf .vscode-test/user-data && node ./dist/tests/runApiAndUnitTests.js",
     "test:webviews": "wdio run ./dist/tests/runWebviewTests.js"
   },
   "dependencies": {
     "@neo4j-cypher/language-server": "2.0.0-next.8",
+    "@neo4j-ndl/base": "^2.12.3",
+    "@neo4j-ndl/react": "^2.16.5",
     "neo4j-driver": "^5.12.0",
     "vscode-languageclient": "^8.1.0"
   },

packages/vscode-extension/resources/styles/resultPanel.css

@@ -0,0 +1,43 @@
+:root {
+  --background: #f2f2f2;
+  --border: #ccc;
+  --text: #000;
+  --error: #ff0000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: transparent;
+    --border: #ddd;
+    --text: #ccc;
+    --error: #bbb;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+table,
+td,
+th {
+  border: 1px solid var(--border);
+  padding: 5px;
+  vertical-align: top;
+}
+th {
+  font-weight: bold;
+}
+details {
+  margin-bottom: 24px;
+  padding: 12px;
+  border: 1px solid var(--border);
+}
+details summary {
+  border-bottom: 1px solid var(--border);
+  padding: 6px;
+}
+pre {
+  max-height: 280px;
+  overflow: auto;
+}

packages/vscode-extension/resources/styles/vscode.css

@@ -44,7 +44,7 @@ code {
   font-family: var(--vscode-editor-font-family);
 }
 
-button,
+button:not([class^='ndl-']),
 input[type='submit'] {
   border: none;
   padding: var(--input-padding-vertical) var(--input-padding-horizontal);
@@ -56,13 +56,13 @@ input[type='submit'] {
   background: var(--vscode-button-background);
 }
 
-button:hover,
+button:not([class^='ndl-']):hover,
 input[type='submit']:hover {
   cursor: pointer;
   background: var(--vscode-button-hoverBackground);
 }
 
-button:focus,
+button:not([class^='ndl-']):focus,
 input[type='submit']:focus {
   outline-color: var(--vscode-focusBorder);
 }

packages/vscode-extension/src/constants.ts

@@ -7,6 +7,7 @@ export const CONSTANTS = {
     CONNECT_COMMAND: 'neo4j.connect',
     DISCONNECT_COMMAND: 'neo4j.disconnect',
     SWITCH_DATABASE_COMMAND: 'neo4j.switchDatabase',
+    RUN_CYPHER_FILE: 'neo4j.runCypherFile',
   },
   MESSAGES: {
     CONNECTED_MESSAGE: 'Connected to Neo4j.',

packages/vscode-extension/src/contextService.ts

@@ -8,6 +8,7 @@ import {
 import EventEmitter from 'events';
 import { Config } from 'neo4j-driver';
 import { ExtensionContext } from 'vscode';
+import CypherRunner from './cypherRunner';
 
 type LanguageClient = {
   sendNotification: (method: string, settings?: Neo4jSettings) => Promise<void>;
@@ -47,6 +48,7 @@ type SchemaPoller = {
 let _context: ExtensionContext | undefined;
 let _languageClient: LanguageClient | undefined;
 let _schemaPoller: SchemaPoller | undefined;
+let _queryRunner: CypherRunner | undefined;
 
 /**
  * Sets global context/singletons for the extension.
@@ -60,6 +62,7 @@ export function setContext(
   _context = context;
   _languageClient = languageClient;
   _schemaPoller = new Neo4jSchemaPoller();
+  _queryRunner = new CypherRunner();
 }
 
 /**
@@ -92,3 +95,14 @@ export function getSchemaPoller(): SchemaPoller {
 
   return _schemaPoller;
 }
+
+/**
+ * @returns The global query runner.
+ */
+export function getQueryRunner(): CypherRunner {
+  if (!_queryRunner) {
+    _queryRunner = new CypherRunner();
+  }
+
+  return _queryRunner;
+}

packages/vscode-extension/src/cypherRunner.ts

@@ -0,0 +1,42 @@
+import { parseStatementsStrs } from '@neo4j-cypher/language-support';
+import { Uri } from 'vscode';
+import { Connection } from './connectionService';
+import ResultWindow from './webviews/resultPanel';
+
+export default class CypherRunner {
+  private results: Map<string, ResultWindow> = new Map();
+
+  constructor() {}
+
+  async run(connection: Connection, uri: Uri, input: string) {
+    const statements = parseStatementsStrs(input);
+
+    const filePath = uri.toString();
+
+    if (this.results.has(filePath)) {
+      const resultWindow = this.results.get(filePath);
+      /* We have to update the connection and the statements
+         to be able to reuse the window, as any of those
+         could have changed 
+      */
+      resultWindow.statements = statements;
+      resultWindow.connection = connection;
+      await resultWindow.executeStatements();
+    } else {
+      // This path is platfom independent according to VSCode documentation
+      const shortFileName = uri.path.split('/').pop();
+
+      const resultWindow = new ResultWindow(
+        shortFileName,
+        connection,
+        statements,
+      );
+      // Add to map
+      this.results.set(filePath, resultWindow);
+      // Remove on close
+      resultWindow.panel.onDidDispose(() => this.results.delete(filePath));
+
+      return resultWindow.run();
+    }
+  }
+}

packages/vscode-extension/src/executionService.ts

@@ -0,0 +1,26 @@
+import { window } from 'vscode';
+import { getActiveConnection } from './connectionService';
+import { getQueryRunner } from './contextService';
+
+export default async function runCypher(): Promise<void> {
+  const cypherRunner = getQueryRunner();
+
+  // Get the active text editor
+  const editor = window.activeTextEditor;
+
+  if (editor) {
+    const activeConnection = getActiveConnection();
+
+    if (!activeConnection) {
+      await window.showErrorMessage(
+        `You need to be connected to Neo4j to run queries`,
+      );
+
+      return;
+    }
+
+    const documentText = editor.document.getText();
+    const documentUri = editor.document.uri;
+    await cypherRunner.run(activeConnection, documentUri, documentText);
+  }
+}

packages/vscode-extension/src/ndl.ts

@@ -0,0 +1 @@
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

packages/vscode-extension/src/registrationService.ts

@@ -8,6 +8,7 @@ import {
   toggleConnectionItemsConnectionState,
 } from './commandHandlers';
 import { CONSTANTS } from './constants';
+import runCypher from './executionService';
 import {
   ConnectionItem,
   connectionTreeDataProvider,
@@ -62,6 +63,7 @@ export function registerDisposables(): Disposable[] {
         databaseInformationTreeDataProvider.refresh();
       },
     ),
+    commands.registerCommand(CONSTANTS.COMMANDS.RUN_CYPHER_FILE, runCypher),
     commands.registerCommand(
       CONSTANTS.COMMANDS.SWITCH_DATABASE_COMMAND,
       (connectionItem: ConnectionItem) => switchToDatabase(connectionItem),