chore: adding response JSON text format

Signed-off-by: Pawel Psztyc <[email protected]>

Author: jarrodek

.vscode/settings.json

@@ -3,6 +3,7 @@
     "Renderable",
     "advancedrestclient",
     "appresources",
+    "arccontextmenu",
     "autoupdate",
     "camelcase",
     "codemirror",

package-lock.json

@@ -67,7 +67,7 @@
     "@types/pouchdb": "^6.4.0",
     "api-console": "^6.4.0",
     "babel-eslint": "^10.1.0",
-    "chai": "^4.2.0",
+    "chai": "^4.3.0",
     "chance": "^1.1.7",
     "dotenv": "^8.2.0",
     "electron": "^11.2.2",
@@ -91,7 +91,7 @@
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "dependencies": {
-    "@advanced-rest-client/arc-events": "^0.2.13",
+    "@advanced-rest-client/arc-events": "^0.2.14",
     "@advanced-rest-client/arc-types": "^0.2.49",
     "@advanced-rest-client/electron-amf-service": "^5.0.0",
     "@advanced-rest-client/electron-oauth2": "^5.0.1",

package.json

@@ -60,6 +60,20 @@ const commands = /** @type ContextMenuCommand[] */ ([
       const itemTarget = /** @type HTMLElement */ (target.closest('.request-list-item'));
       ArcModelEvents.Request.delete(root, type, itemTarget.dataset.id);
     },
+  },
+
+  // response view manipulation
+  {
+    selector: 'response-highlighter',
+    group: "main",
+    label: "Format",
+    title: 'Format the response',
+    icon: 'code',
+    execute: (args) => {
+      const { target } = args;
+      // @ts-ignore
+      target.format();
+    }
   }
 ]);
 

src/app/scripts/arc/ArcContextMenuCommands.js

@@ -1,6 +1,7 @@
 import '../../../../web_modules/@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
 import '../../../../web_modules/@anypoint-web-components/anypoint-item/anypoint-icon-item.js';
 import '../../../../web_modules/@advanced-rest-client/arc-icons/arc-icon.js';
+import { UiEventTypes } from '../../../../web_modules/@advanced-rest-client/arc-events/index.js';
 import { ContextMenuStore } from './ContextMenuStore.js';
 
 /** @typedef {import('./interfaces').RegisteredCommand} RegisteredCommand */
@@ -65,6 +66,11 @@ export class ContextMenu {
    */
   currentMenu = undefined;
 
+  /**
+   * @type {any}
+   */
+  customArgs = undefined;
+
   /**
    * @type {ClickVector}
    */
@@ -85,6 +91,7 @@ export class ContextMenu {
     this.menuClickHandler = this.menuClickHandler.bind(this);
     this.clickHandler = this.clickHandler.bind(this);
     this.keydownHandler = this.keydownHandler.bind(this);
+    this.customHandler = this.customHandler.bind(this);
   }
 
   /**
@@ -104,6 +111,7 @@ export class ContextMenu {
     this.workspace.addEventListener('contextmenu', this.contextHandler);
     window.addEventListener('click', this.clickHandler);
     window.addEventListener('keydown', this.keydownHandler);
+    window.addEventListener(UiEventTypes.contextMenu, this.customHandler);
     this.connectedValue = true;
   }
 
@@ -115,6 +123,7 @@ export class ContextMenu {
     this.workspace.removeEventListener('contextmenu', this.contextHandler);
     window.removeEventListener('click', this.clickHandler);
     window.removeEventListener('keydown', this.keydownHandler);
+    window.removeEventListener(UiEventTypes.contextMenu, this.customHandler);
     this.connectedValue = false;
   }
 
@@ -141,6 +150,34 @@ export class ContextMenu {
     this.build(e, target, clickVector, targetVector);
   }
 
+  /**
+   * A handler for the `arccontextmenu` event that triggers the menu for given target passed in the 
+   * event's detail object.
+   * @param {CustomEvent} e
+   */
+  customHandler(e) {
+    const { target, mouseEvent, selector, args } = e.detail;
+    const commands = this.listCustomCommands(selector);
+    if (!commands.length) {
+      return;
+    }
+    mouseEvent.preventDefault();
+    mouseEvent.stopPropagation();
+    const clickVector = {
+      x: mouseEvent.clientX, 
+      y: mouseEvent.clientY,
+    }
+    const targetVector = this.readClickPosition(mouseEvent);
+
+    this.targetVector = targetVector;
+    this.customArgs = args;
+    const groups = this.groupCommands(commands);
+    this.currentCommands = commands;
+    this.currentTarget = target;
+    this.render(target, clickVector, groups);
+    target.setAttribute('active', '');
+  }
+
   /**
    * Reads {x,y} vector of the click from the pointer event.
    * @param {MouseEvent} e
@@ -292,6 +329,23 @@ export class ContextMenu {
     return result;
   }
 
+  /**
+   * Lists all custom commands where the command's selector matches passed `selector`.
+   *
+   * @param {string} selector The build target
+   * @returns {RegisteredCommand[]}
+   */
+  listCustomCommands(selector) {
+    const { commands } = this;
+    const result =/** @type RegisteredCommand[] */ ([]);
+    commands.forEach((cmd) => {
+      if (cmd.selector === '*' || cmd.selector === selector) {
+        result.push(cmd);
+      }
+    });
+    return result;
+  }
+
   /**
    * Creates an ordered grouped list of commands
    *
@@ -422,6 +476,9 @@ export class ContextMenu {
       vector: targetVector,
       command: command.command,
     };
+    if (this.customArgs) {
+      opts.customArgs = this.customArgs;
+    }
     if (this.#callback && command.command) {
       this.#callback(opts);
     } else {

src/app/scripts/context-menu/ContextMenu.js

@@ -18,6 +18,7 @@ export declare interface EnabledOptions {
    * The element with which this context menu was initialized with.
    */
   root: HTMLElement;
+  customArgs?: any;
 }
 
 export declare interface ExecuteOptions {
@@ -41,6 +42,7 @@ export declare interface ExecuteOptions {
    * The value of the `command` set on the command.
    */
   command?: string;
+  customArgs?: any;
 }
 
 export declare interface ContextMenuCommand {