[Scripting] #1 Script List + Script Editor

[NghiaTranUIT]

Description

It's time to implement the Scripting feature. We're going to break it down into small feasible tickets.

Acceptance Criteria

• [x] Add menu with shortcuts

1. Script List Requirement

• [x] Implement the basic UI of the Scripting List. It's okay to copy and reuse what we've done from the Breakpoint List.

• [x] Able to create a new Script
• [x] Right-Menu Context: Implement the following: New, Edit, Enable Rule, Import Setting / Export Settings, Show in Finder, Duplicate, Delete.

• [x] Verify all menu context shortcuts works
• [x] Able to reorder the scripting -> Make sure it's saved in the Data Source

Menu Action Requirement

• [x] New: Create a default Script. Make sure the ScriptEntry and the ScriptFile are created.
• [x] Duplicate: Duplicate the ScriptEntry and the ScriptFile
• [x] Delete: Delete the ScriptEntry and the ScriptFile
• [x] Import / Export: (Reserve for the future ticket)

[NghiaTranUIT]

2. Scripting Models

• [x] Ping @NghiaTranUIT to get all Scripting models from the macOS
• [x] Implement the ScriptEntry and ScriptService classes to Typescript
• [x] Script Entries are stored at user-data/ScriptService-RuleTree
• [x] One ScriptEntry is created -> Make sure we create a ScriptFile with a default Template. This file is created and saved at ..//scripts/1C2FD611.js -> 1C2FD611 is a random UUID string.

/// This func is called if the Request Checkbox is Enabled. You can modify the Request Data here before the request hits to the server
/// e.g. Add/Update/Remove: host, scheme, port, path, headers, queries, comment, color and body (json, form, plain-text, base64 encoded string)
///
/// Use global object `sharedState` to share data between Requests/Response from different scripts (e.g. sharedState.data = "My-Data")
///
async function onRequest(context, url, request) {
  // console.log(request);
  console.log(url);

  // Update or Add new headers
  // request.headers["X-New-Headers"] = "My-Value";

  // Update or Add new queries
  // request.queries["name"] = "Proxyman";

  // Body
  // var body = request.body;
  // body["new-key"] = "new-value"
  // request.body = body;

  // Done
  return request;
}

/// This func is called if the Response Checkbox is Enabled. You can modify the Response Data here before it goes to the client
/// e.g. Add/Update/Remove: headers, statusCode, comment, color and body (json, plain-text, base64 encoded string)
///
async function onResponse(context, url, request, response) {
  // console.log(response);

  // Update or Add new headers
  // response.headers["Content-Type"] = "application/json";

  // Update status Code
  // response.statusCode = 500;

  // Update Body
  // var body = response.body;
  // body["new-key"] = "Proxyman";
  // response.body = body;

  // Or map a local file as a body
  // response.bodyFilePath = "~/Desktop/myfile.json"

  // Done
  return response;
}

• [x] Implement the Delete, Duplicate and create New Entry: Delete an entry will also delete a ScriptFile, Duplicate will also duplicate a new ScriptFile (new UUID).

[NghiaTranUIT]

3. Script Editor

• [x] Implement the Script Editor view

• [x] Open a Script Editor as a New Tab (like Map Local). The Tab Title is the name of the Script
• [x] Reuse the Name, Rule, Method, Wildcard/Regex, GraphQL, ... from the Map Local
• [x] Two new checkboxes (onRequest and onResponse). Don't implement the Mock API
• [x] Implement the Editor by using the Monaco Editor (When introducing new logic into the Monaco Editor, make sure don't conflict with Map Local). Proxyman macOS is using the CodeEditor (legacy), but we plan to migrate to Monaco Editor

Behavior

• [x] The Script is not auto-saved by default
• [x] command+S (or Control + S) will save the Script -> Verify the content is written into the ScriptFile on disk
• [x] The Status Icon: 🟢 and 🟡 will update properly

4. Monaco Editor

• [x] Introduce a new mode for Monaco Editor for the Scripting

• [x] Define a list of new suggestions:

• Basic suggestion: If the current curse is empty, it should suggest the basic suggestion depends on the current variables. For example: It suggests: request, response, context, url, console, console.log, delete, ... -> Everything from the Javascript mode

• if it's from request, type . will suggest: method, scheme, host, port, path, queries, headers, body

• if it's from response, type . will suggest: statusCode, statusPhrase, httpVersion, headers, body

• if it's from context, type . will suggest: id, remoteDeviceIP, clientIPAddress, clientPort, serverIpAddress, serverPort

5. Menu Context

• [x] Implement the More Button: Beautify, Config and Documentation. Other features are not implemented in this ticket
• [x] I can use Control + B to beautify the Scritpt Content (Javascript Mode)

6. Console Log panel

• [x] Please open the ScriptEntry -> See how the ConsoleLog is implemented -> Implement it on TypeScript
• [x] Make sure the Console Log has many modes: userDebug, Debug, warning, Error, funcExecute, success, ...
• [x] Implement the Console Log Panel UI
• [x] As soon as the Log is updated -> Verify it's rendered on the ConsoleLog Panel.
• [x] Console Log is not saved into the JSON ScriptEntry. It will reset to empty if we quit the app.