Integrate Angular Rule Editor (intersystems-community#1014)

Author: isc-bsaviano

docs/LowCode.md

@@ -0,0 +1,40 @@
+---
+layout: default
+title: Low-Code Editors
+permalink: /low-code/
+nav_order: 11
+---
+
+# Low-Code Editors
+
+VS Code contains support for low-code editors via its [Custom Editors API](https://code.visualstudio.com/api/extension-guides/custom-editors). As InterSystems redevelops its suite of low-code editors for Interoperability components, support for integration with this extension will be included. This page lists the currently supported low-code editors and describes how to use them in VS Code.
+
+## Supported Editors
+
+The following list contains all InterSystems low-code editors that support integration with VS Code, along with the earliest version of InterSystems IRIS that contains the support:
+
+* Rule Editor (2023.1)
+
+## Opening a Low-Code Editor
+
+To open a low-code editor, first open the class that contains the Interoperability component that you want to edit, right-click on the editor tab and select the `Reopen Editor With...` option:
+
+![Reopen Editor With](../assets/images/reopen-editor-with.png "reopen editor with")
+
+You will then be prompted with a list of editors to choose from:
+
+![Select Editor](../assets/images/low-code-select.png "select editor")
+
+Once you select the editor, it will replace the text editor for the selected class. If the editor cannot be loaded, a modal dialog will be shown that contains the reason and the class will be automatically reopened in the default text editor. A low-code [editor tab](https://code.visualstudio.com/docs/getstarted/userinterface#_tabs) will behave the same as a text editor tab.
+
+## How They Work
+
+This section describes how the low-code editors are integrated in VS Code to create a hassle-free editing experience. Note that while low-code editors are supported for both client-side and server-side workflows, an active server connection is required even when working client-side.
+
+* VS Code sends your credentials to the editor so you don't have to log in again.
+* A save, undo, redo or revert action triggered by VS Code (via keyboard shortcuts, for example) will trigger the corresponding action in the editor.
+* When the state of the class changes from clean to dirty (or vice versa) in the editor, the underlying text document will also be made dirty/clean.
+* When the class is saved or compiled by the editor, VS Code will pull the changes from the server and update the text document.
+* If the `objectscript.compileOnSave` setting is enabled and the class was saved by the editor, the class will also be compiled by the editor.
+
+Note that the changes you make in the low-code editor are only synced to the underlying text document when you save them in the editor. Therefore, it is ***strongly*** recommended that you only open and edit the document in one editor (text or low-code) at once to avoid overwriting changes. The low-code editors provide support for server-side source control natively. The underlying text document is kept in sync after saves so changes can be stored in client-side source control.

docs/assets/images/low-code-select.png

@@ -15,3 +15,4 @@ nav_exclude: true
 * [Reporting Issues](./feedback)
 * [Working with Projects](./projects)
 * [Migrating from Studio](./studio)
+* [Low-Code Editors](./low-code)

docs/assets/images/reopen-editor-with.png

@@ -98,7 +98,8 @@
     "onFileSystem:isfs",
     "onFileSystem:isfs-readonly",
     "onFileSystem:objectscript",
-    "onDebugInitialConfigurations"
+    "onDebugInitialConfigurations",
+    "onCustomEditor:vscode-objectscript.rule"
   ],
   "main": "./dist/extension",
   "browser": "./dist/web-extension",
@@ -264,7 +265,7 @@
         },
         {
           "command": "vscode-objectscript.showClassDocumentationPreview",
-          "when": "editorLangId == objectscript-class"
+          "when": "editorLangId == objectscript-class && activeCustomEditorId == ''"
         },
         {
           "command": "vscode-objectscript.exportCurrentFile",
@@ -328,7 +329,7 @@
         },
         {
           "command": "vscode-objectscript.showRESTDebugWebview",
-          "when": "editorLangId =~ /^objectscript/ && vscode-objectscript.connectActive"
+          "when": "editorLangId =~ /^objectscript/ && vscode-objectscript.connectActive && activeCustomEditorId == ''"
         },
         {
           "command": "vscode-objectscript.modifyWsFolder",
@@ -506,7 +507,7 @@
         },
         {
           "command": "vscode-objectscript.showRESTDebugWebview",
-          "when": "editorLangId =~ /^objectscript/ && vscode-objectscript.connectActive",
+          "when": "editorLangId =~ /^objectscript/ && vscode-objectscript.connectActive && activeCustomEditorId == ''",
           "group": "objectscript@9"
         }
       ],
@@ -524,19 +525,19 @@
         {
           "command": "vscode-objectscript.showClassDocumentationPreview",
           "group": "navigation@3",
-          "when": "editorLangId == objectscript-class"
+          "when": "editorLangId == objectscript-class && activeCustomEditorId == ''"
         }
       ],
       "editor/title/context": [
         {
           "command": "vscode-objectscript.showClassDocumentationPreview",
           "group": "1_open",
-          "when": "resourceLangId == objectscript-class"
+          "when": "resourceLangId == objectscript-class && activeCustomEditorId == ''"
         },
         {
           "command": "vscode-objectscript.showRESTDebugWebview",
           "group": "1_open",
-          "when": "resourceLangId =~ /^objectscript/ && vscode-objectscript.connectActive"
+          "when": "resourceLangId =~ /^objectscript/ && vscode-objectscript.connectActive && activeCustomEditorId == ''"
         }
       ],
       "touchBar": [
@@ -1596,6 +1597,18 @@
           "separator": "/"
         }
       }
+    ],
+    "customEditors": [
+      {
+        "viewType": "vscode-objectscript.rule",
+        "displayName": "Rule Editor",
+        "selector": [
+          {
+            "filenamePattern": "*.cls"
+          }
+        ],
+        "priority": "option"
+      }
     ]
   },
   "scripts": {

docs/index.md

@@ -336,7 +336,7 @@ export class AtelierAPI {
         throw {
           statusCode: response.status,
           message: response.statusText,
-          errorText: `The server at ${host}:${port} is unavailable. Check License Usage.`,
+          errorText: `The server at ${host}:${port}${pathPrefix} is unavailable. Check License Usage.`,
         };
       }
       if (response.status === 401) {
@@ -609,11 +609,11 @@ export class AtelierAPI {
   }
 
   // v1+
-  public getCSPApps(detail = false): Promise<Atelier.Response> {
+  public getCSPApps(detail = false, nsOverride?: string): Promise<Atelier.Response> {
     const params = {
       detail: detail ? 1 : 0,
     };
-    return this.request(1, "GET", `%SYS/cspapps/${this.ns || ""}`, null, params);
+    return this.request(1, "GET", `%SYS/cspapps/${nsOverride || this.ns || ""}`, null, params);
   }
 
   // v1+

package.json

@@ -266,7 +266,7 @@ export async function loadChanges(files: (CurrentTextFile | CurrentBinaryFile)[]
   );
 }
 
-async function compile(docs: CurrentFile[], flags?: string): Promise<any> {
+export async function compile(docs: CurrentFile[], flags?: string): Promise<any> {
   flags = flags || config("compileFlags");
   const api = new AtelierAPI(docs[0].uri);
   return vscode.window

src/api/index.ts

@@ -9,6 +9,7 @@ import { RoutineNode } from "../explorer/models/routineNode";
 import { NodeBase } from "../explorer/models/nodeBase";
 import { importAndCompile } from "./compile";
 import { ProjectNode } from "../explorer/models/projectNode";
+import { openCustomEditors } from "../providers/RuleEditorProvider";
 
 export let documentBeingProcessed: vscode.TextDocument = null;
 
@@ -63,7 +64,7 @@ function getOtherStudioActionLabel(action: OtherStudioAction): string {
 // Used to avoid triggering the edit listener when files are reloaded by an extension
 const suppressEditListenerMap = new Map<string, boolean>();
 
-class StudioActions {
+export class StudioActions {
   private uri: vscode.Uri;
   private api: AtelierAPI;
   private name: string;
@@ -84,6 +85,7 @@ class StudioActions {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   public processUserAction(userAction): Thenable<any> {
     const serverAction = parseInt(userAction.action || 0, 10);
     const { target, errorText } = userAction;
@@ -389,7 +391,8 @@ class StudioActions {
       .then((action) => this.userAction(action));
   }
 
-  public fireOtherStudioAction(action: OtherStudioAction, userAction?) {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  public fireOtherStudioAction(action: OtherStudioAction, userAction?): void {
     const actionObject = {
       id: action.toString(),
       label: getOtherStudioActionLabel(action),
@@ -454,7 +457,7 @@ class StudioActions {
       .then((content) => (content && content.length ? content[0].Enabled : false));
   }
 
-  public getServerInfo() {
+  public getServerInfo(): { server: string; namespace: string } {
     return {
       server: `${this.api.config.host}:${this.api.config.port}${this.api.config.pathPrefix}`,
       namespace: this.api.config.ns,
@@ -527,6 +530,7 @@ export async function fireOtherStudioAction(action: OtherStudioAction, uri?: vsc
   return (
     studioActions &&
     (await studioActions.isSourceControlEnabled()) &&
+    !openCustomEditors.includes(uri.toString()) && // The custom editor will handle all server-side source control interactions
     studioActions.fireOtherStudioAction(action, userAction)
   );
 }

src/commands/compile.ts

@@ -113,6 +113,7 @@ import {
 } from "./commands/project";
 import { NodeBase } from "./explorer/models/nodeBase";
 import { loadStudioColors, loadStudioSnippets } from "./commands/studioMigration";
+import { openCustomEditors, RuleEditorProvider } from "./providers/RuleEditorProvider";
 import { newFile, NewFileType } from "./commands/newFile";
 import { FileDecorationProvider } from "./providers/FileDecorationProvider";
 import { RESTDebugPanel } from "./commands/restDebugPanel";
@@ -1047,6 +1048,12 @@ export async function activate(context: vscode.ExtensionContext): Promise<any> {
     vscode.commands.registerCommand("vscode-objectscript.explorer.project.addWorkspaceFolderForProject", (node) =>
       addWorkspaceFolderForProject(node)
     ),
+    vscode.window.registerCustomEditorProvider("vscode-objectscript.rule", new RuleEditorProvider(), {
+      webviewOptions: {
+        retainContextWhenHidden: true,
+      },
+      supportsMultipleEditorsPerDocument: false,
+    }),
     vscode.workspace.onDidChangeWorkspaceFolders(async ({ added, removed }) => {
       const folders = vscode.workspace.workspaceFolders;
 
@@ -1116,6 +1123,10 @@ export async function activate(context: vscode.ExtensionContext): Promise<any> {
       }
     }),
     vscode.workspace.onDidSaveTextDocument((file) => {
+      if (openCustomEditors.includes(file.uri.toString())) {
+        // Saving is handled by a different event listener
+        return;
+      }
       if (!schemas.includes(file.uri.scheme) && !config("importOnSave")) {
         // Don't save this local file on the server
         return;