Request body json editor

package.json

@@ -27,6 +27,7 @@
     "express": "^4.21.0",
     "express-session": "^1.17.3",
     "highlight.js": "^11.8.0",
+    "json-editor-vue": "^0.17.3",
     "jsonwebtoken": "^9.0.2",
     "markdown-it": "^14.1.0",
     "oauth": "^0.10.0",
@@ -40,6 +41,7 @@
     "socket.io-client": "^4.7.5",
     "typedi": "^0.10.0",
     "uuid": "^9.0.1",
+    "vanilla-jsoneditor": "^2.3.3",
     "vue": "^3.5.1",
     "vue-i18n": "^9.4.0",
     "vue-router": "^4.2.2",

src/components/Preview.vue

@@ -32,6 +32,9 @@ import { getOperationDetails } from '../obp/resource-docs'
 import { ElNotification, FormInstance } from 'element-plus'
 import { OBP_API_VERSION, get, create, update, discard, createEntitlement, getCurrentUser } from '../obp'
 import { obpResourceDocsKey } from '@/obp/keys'
+import JsonEditorVue from 'json-editor-vue'
+import { Mode } from 'vanilla-jsoneditor'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import * as cheerio from 'cheerio'
 
 const elMessageDuration = 5500
@@ -41,6 +44,8 @@ const roleName = ref('')
 const method = ref('')
 const header = ref('')
 const responseHeaderTitle = ref('TYPICAL SUCCESSFUL RESPONSE')
+const exampleBodyTitle = ref('REQUEST BODY')
+const oldExampleBodyContent = ref('')
 const successResponseBody = ref('')
 const exampleRequestBody = ref('')
 const requiredRoles = ref([])
@@ -71,7 +76,7 @@ const setOperationDetails = (id: string, version: string): void => {
   const operation = getOperationDetails(version, id, resourceDocs)
   url.value = operation?.specified_url
   method.value = operation?.request_verb
-  exampleRequestBody.value = JSON.stringify(operation.example_request_body)
+  exampleRequestBody.value = operation.example_request_body
   requiredRoles.value = operation.roles || []
   possibleErrors.value = operation.error_response_bodies
   connectorMethods.value = operation.connector_methods
@@ -120,11 +125,11 @@ const submitRequest = async () => {
   if (url.value) {
     switch (method.value) {
       case 'POST': {
-        highlightCode(await create(url.value, exampleRequestBody.value))
+        highlightCode(await create(url.value, JSON.stringify(exampleRequestBody.value)))
         break
       }
       case 'PUT': {
-        highlightCode(await update(url.value, exampleRequestBody.value))
+        highlightCode(await update(url.value, JSON.stringify(exampleRequestBody.value)))
         break
       }
       case 'DELETE': {
@@ -234,6 +239,26 @@ const copyToClipboard = () => {
   });
 };
 
+const onJsonEditorChange = (updatedContent) => {
+  oldExampleBodyContent.value = exampleRequestBody.value;
+  try {
+    updatedContent = JSON.parse(JSON.stringify(updatedContent))
+    exampleRequestBody.value = updatedContent;
+  } catch (e) {
+    exampleRequestBody.value = oldExampleBodyContent.value;
+    console.log(`JSON not valid: ${e}`);
+  }
+
+}
+
+const onError = (error) => {
+  console.error(error)
+  try {
+    exampleRequestBody.value = oldExampleBodyContent.value
+  } catch (e) {
+    console.error(e)
+  }
+}
 
 </script>
 
@@ -259,13 +284,27 @@ const copyToClipboard = () => {
         placeholder="Request Header (Header1:Value1::Header2:Value2)"
       />
     </div>
-    <div class="flex-preview-panel">
-      <input type="text" v-model="exampleRequestBody" />
+    <div class="json-editor-container" v-show="exampleRequestBody">
+      <p v-show="exampleRequestBody" class="header-container request-body-header">{{ exampleBodyTitle }}:</p>
+      <div class="json-editor jse-theme-dark">
+        <JsonEditorVue
+          v-model="exampleRequestBody"
+          :stringified="true"
+          :mode="Mode.tree"
+          v-bind="{/* local props & attrs */}"
+          :onChange="onJsonEditorChange"
+        />
+      </div>
+
     </div>
-    <div v-show="successResponseBody">
-      <p class="header-container">{{ responseHeaderTitle }}:</p>
-      <pre><button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
-        <code><div id="code" v-html="successResponseBody"></div></code></pre>
+    <div v-show="successResponseBody" class="success-response-container">
+      <div class="success-response-header-container">
+        <p class="header-container success-response-header">{{ responseHeaderTitle }}:</p>
+        <button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
+      </div>
+      <pre>
+        <code><div id="code" v-html="successResponseBody"></div></code>
+      </pre>
     </div>
     <el-form ref="roleFormRef" :model="roleForm">
       <div v-show="showRequiredRoles">
@@ -358,12 +397,11 @@ span {
   font-size: 28px;
 }
 pre {
-  margin-left: -25px;
-  margin-right: -25px;
-  padding: 30px 30px 10px 30px;
+  padding: 0px 30px 0px 30px;
   max-height: 340px;
   background-color: #253047;
   font-size: 14px;
+  margin: 0;
   font-family: 'Roboto';
   font-weight: normal;
 }
@@ -403,6 +441,40 @@ li {
   background-color: var(--el-border-color-light);
   z-index: var(--el-index-normal);
 }
+.request-body-header {
+  background-color: #010B20;
+  margin-right: auto;
+  margin-top: 0;
+}
+.json-editor-container {
+  display: flex;
+  flex-direction: column;
+  margin-left: -25px;
+  margin-right: -25px;
+  background-color: #010B20;
+  padding: 25px 25px 25px 25px;
+}
+.json-editor {
+  /* the list of default vars to change can be found here: https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss */
+  width: 100%;
+  margin-left: -5px;
+  margin-right: -5px;
+  --jse-theme-color: #010B20;
+  --jse-key-color: #ffffff;
+  --jse-value-color: #6a8759;
+  --jse-value-color-string: #6a8759;
+  --jse-background-color: #010B20;
+  --jse-context-menu-background: #010B20;
+  --jse-theme-color-highlight: #010B20;
+  --jse-context-menu-pointer-hover-background: #253047;
+  --jse-context-menu-background-highlight: #253047;
+  --jse-context-menu-pointer-background: #253047;
+  --jse-context-menu-tip-background: #253047;
+  --jse-modal-background: #010B20;
+  --jse-panel-background: #010B20;
+  --jse-font-family-mono: 'Roboto', 'Courier New', monospace;
+  --jse-main-border: none;
+}
 .flex-preview-panel {
   display: flex;
   flex-direction: row;
@@ -454,6 +526,22 @@ li {
 #conector-method-link {
   color: white !important;
 }
+.success-response-header-container {
+  margin-left: 25px;
+  margin-right: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #253047;
+}
+.success-response-header {
+  margin-top: 25px;
+}
+.success-response-container{
+  background-color: #253047;
+  margin-right: -25px;
+  margin-left: -25px;
+}
 .copy-button {
   background: none;
   border: none;

src/stores/connection.ts

@@ -44,13 +44,33 @@ export const useConnectionStore = defineStore("connection", {
      */
     bindEvents() {
       socket.on("connect", () => {
-        console.log("websocket connection established")
+        console.log("connectionStore says: websocket connection established")
         this.isConnected = true;
       });
 
-      socket.on("disconnect", () => {
+      socket.on("reconnecting", (reconnectionNo) => {
+        console.log(`connectionStore says: attempting recconnection... tried ${reconnectionNo} time(s) `)
+        this.isConnected = true;
+      });
+
+      // Handle errors and disconnections
+      socket.on("disconnect", (error) => {
         this.isConnected = false;
+        console.error("connectionStore says: socket disconnected", error)
+      });
+
+      socket.on("connect_timeout", (error) => {
+        console.error("connectionStore says: socket connection timeout", error)
       });
+
+      socket.on("connect_error", (error) => {
+        console.error("connectionStore says: websocket connection error", error)
+      });
+
+      socket.on("connect_failed", (error) => {
+        console.error("connectionStore says: websocket connection failed", error)
+      });
+
     },
 
     /**