From 891e05a219a5ae4037ae4c5c32af0ad29e922f81 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 13 Oct 2023 23:12:04 +0200
Subject: [PATCH] [Execute UI] Added syntax highlight to JSON and shell
 snippets.

---
 .../backend/http/webapp/package-lock.json     | 19 +++++++++++----
 platypush/backend/http/webapp/package.json    |  1 +
 .../src/components/panels/Execute/Index.vue   | 16 +++++++++++--
 .../components/panels/Execute/Response.vue    | 24 ++++++++++++++++++-
 .../src/components/panels/Execute/common.scss | 18 ++++++++++++++
 platypush/plugins/http/webpage/__init__.py    |  6 ++---
 6 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/platypush/backend/http/webapp/package-lock.json b/platypush/backend/http/webapp/package-lock.json
index bdec4bbeb6..26758904c8 100644
--- a/platypush/backend/http/webapp/package-lock.json
+++ b/platypush/backend/http/webapp/package-lock.json
@@ -11,6 +11,7 @@
         "@fortawesome/fontawesome-free": "^6.1.1",
         "axios": "^0.21.4",
         "core-js": "^3.23.4",
+        "highlight.js": "^11.9.0",
         "lato-font": "^3.0.0",
         "mitt": "^2.1.0",
         "register-service-worker": "^1.7.2",
@@ -4339,6 +4340,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/cli-highlight/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/cli-highlight/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6917,12 +6927,11 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true,
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
       "engines": {
-        "node": "*"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/hosted-git-info": {
diff --git a/platypush/backend/http/webapp/package.json b/platypush/backend/http/webapp/package.json
index 9c305a7beb..5df1c319e7 100644
--- a/platypush/backend/http/webapp/package.json
+++ b/platypush/backend/http/webapp/package.json
@@ -11,6 +11,7 @@
     "@fortawesome/fontawesome-free": "^6.1.1",
     "axios": "^0.21.4",
     "core-js": "^3.23.4",
+    "highlight.js": "^11.9.0",
     "lato-font": "^3.0.0",
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.2",
diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue b/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
index 795a69ffd0..3f347314ad 100644
--- a/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
@@ -8,8 +8,9 @@
 
       <!-- cURL snippet modal -->
       <Modal ref="curlModal" title="curl request" v-if="curlSnippet?.length">
-        <textarea class="output curl-snippet" readonly :value="curlSnippet"
-          @click="copyToClipboard(curlSnippet)" />
+        <div class="output curl-snippet" @click="copyToClipboard(curlSnippet)" >
+          <pre><code v-html="highlightedCurlSnippet" /></pre>
+        </div>
       </Modal>
 
       <!-- Execute panel views -->
@@ -101,6 +102,9 @@
 </template>
 
 <script>
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/stackoverflow-dark.css'
+import hljs from "highlight.js"
 import ActionArgs from "./ActionArgs"
 import ActionDoc from "./ActionDoc"
 import Autocomplete from "@/components/elements/Autocomplete"
@@ -231,6 +235,14 @@ export default {
         `'${this.curlURL}'`
       )
     },
+
+    highlightedCurlSnippet() {
+      return hljs.highlight(
+        'bash',
+        '# Note: Replace the cookie with a JWT token for production cases\n' +
+        this.curlSnippet
+      ).value
+    },
   },
 
   methods: {
diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue b/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue
index 5309a6d487..6c920166e2 100644
--- a/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue
@@ -10,8 +10,9 @@
         </button>
       </span>
     </h2>
+
     <div class="output response" v-if="response != null">
-      <pre v-text="response" />
+      <pre><code v-html="jsonResponse" v-if="jsonResponse != null" /><code v-text="response" v-else /></pre>
     </div>
 
     <div class="output error" v-else-if="error != null">
@@ -21,6 +22,9 @@
 </template>
 
 <script>
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/stackoverflow-dark.css'
+import hljs from "highlight.js"
 import Utils from "@/Utils"
 
 export default {
@@ -30,6 +34,24 @@ export default {
     response: String,
     error: String,
   },
+
+  computed: {
+    isJSON() {
+      try {
+        return JSON.parse(this.response) != null
+      } catch (e) {
+        return false
+      }
+    },
+
+    jsonResponse() {
+      if (this.isJSON) {
+        return hljs.highlight('json', this.response).value
+      }
+
+      return null
+    }
+  },
 }
 </script>
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/common.scss b/platypush/backend/http/webapp/src/components/panels/Execute/common.scss
index 4b1dfcd380..d05f2720ce 100644
--- a/platypush/backend/http/webapp/src/components/panels/Execute/common.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/common.scss
@@ -1,5 +1,9 @@
 @import "vars.scss";
 
+main {
+  min-height: calc(100vh - 2em);
+}
+
 button {
   background: none;
   border: none;
@@ -40,6 +44,15 @@ section {
     margin-top: .5em;
     padding-top: .5em;
   }
+
+  &.response {
+    flex-grow: 1;
+    max-height: 40em;
+
+    .output {
+      overflow: auto;
+    }
+  }
 }
 
 .buttons {
@@ -58,6 +71,10 @@ header {
   .autocomplete-container {
     width: calc(100% - $request-headers-btn-width);
     flex-grow: 1;
+
+    .items {
+      background: $background-color;
+    }
   }
 
   .buttons {
@@ -105,6 +122,7 @@ textarea {
 
 form {
   background: $default-bg-2;
+  flex-grow: 1;
   margin: 0;
   border-radius: 0;
   border: none;
diff --git a/platypush/plugins/http/webpage/__init__.py b/platypush/plugins/http/webpage/__init__.py
index 20b07bb06a..8aea5cc237 100644
--- a/platypush/plugins/http/webpage/__init__.py
+++ b/platypush/plugins/http/webpage/__init__.py
@@ -142,22 +142,20 @@ class HttpWebpagePlugin(Plugin):
             and PDF.
         :return: dict
 
-        Example if outfile is not specified::
+        Example return payload outfile is not specified::
 
             {
                 "url": <url>,
                 "title": <page title>,
                 "content": <page parsed content>
-
             }
 
-        Example if outfile is specified::
+        Example return payload if outfile is specified::
 
             {
                 "url": <url>,
                 "title": <page title>,
                 "outfile": <output file absolute path>
-
             }
 
         """