From e760f8e23a5be510d758417254981fbe7a7c13be Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Wed, 11 Oct 2023 16:57:04 +0200
Subject: [PATCH] [Execute panel] Introduced a common `Response` component.

---
 .../src/components/panels/Execute/Index.vue   | 36 +++----------------
 .../components/panels/Execute/Response.vue    | 35 ++++++++++++++++++
 2 files changed, 39 insertions(+), 32 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Execute/Response.vue

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 ec2f89c54..c7adfd8de 100644
--- a/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
@@ -137,25 +137,7 @@
             </div>
           </section>
 
-          <section class="response">
-            <h2 v-if="error != null || response != null">
-              <span class="title">
-                {{ error != null ? 'Error' : 'Output' }}
-              </span>
-              <span class="buttons">
-                <button type="button" title="Copy to clipboard" @click="copyToClipboard(response)">
-                  <i class="fas fa-clipboard" />
-                </button>
-              </span>
-            </h2>
-            <div class="output response" v-if="response != null">
-              <pre v-text="response" />
-            </div>
-
-            <div class="output error" v-else-if="error != null">
-              <pre v-text="error" />
-            </div>
-          </section>
+          <Response :response="response" :error="error" />
         </div>
 
         <!-- Raw request container -->
@@ -169,18 +151,7 @@
             </button>
           </div>
 
-          <section class="response" v-if="response != null || error != null">
-            <hgroup v-if="error != null || response != null">
-              <h2 v-text="error != null ? 'Error' : 'Output'" />
-              <div class="buttons">
-                <button type="button" title="Copy to clipboard" @click="copyToClipboard(error)">
-                  <i class="fas fa-clipboard" />
-                </button>
-              </div>
-            </hgroup>
-            <div class="error" v-html="error" v-if="error != null" />
-            <div class="response" v-html="response" v-else-if="response != null" />
-          </section>
+          <Response :response="response" :error="error" />
         </div>
       </form>
     </main>
@@ -222,13 +193,14 @@ import Argdoc from "./Argdoc"
 import Autocomplete from "@/components/elements/Autocomplete"
 import Loading from "@/components/Loading"
 import Modal from "@/components/Modal";
+import Response from "./Response"
 import Tab from "@/components/elements/Tab"
 import Tabs from "@/components/elements/Tabs"
 import Utils from "@/Utils"
 
 export default {
   name: "Execute",
-  components: {Argdoc, Autocomplete, Loading, Modal, Tab, Tabs},
+  components: {Argdoc, Autocomplete, Loading, Modal, Response, Tab, Tabs},
   mixins: [Utils],
 
   data() {
diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue b/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue
new file mode 100644
index 000000000..efe7fb998
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/Response.vue
@@ -0,0 +1,35 @@
+<template>
+  <section class="response">
+    <h2 v-if="error != null || response != null">
+      <span class="title">
+        {{ error != null ? 'Error' : 'Output' }}
+      </span>
+      <span class="buttons">
+        <button type="button" title="Copy to clipboard" @click="copyToClipboard(response)">
+          <i class="fas fa-clipboard" />
+        </button>
+      </span>
+    </h2>
+    <div class="output response" v-if="response != null">
+      <pre v-text="response" />
+    </div>
+
+    <div class="output error" v-else-if="error != null">
+      <pre v-text="error" />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'Response',
+  props: {
+    response: String,
+    error: String,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+</style>