feat(common): create and manage example responses in collections (hoppscotch#5652)

Co-authored-by: James George <[email protected]>

Author: anwarulislam

packages/hoppscotch-common/locales/en.json

@@ -54,6 +54,8 @@
     "retry": "Retry",
     "save": "Save",
     "save_as_example": "Save as example",
+    "add_example": "Add example",
+    "invalid_request": "Invalid request data",
     "scroll_to_bottom": "Scroll to bottom",
     "scroll_to_top": "Scroll to top",
     "search": "Search",
@@ -724,7 +726,8 @@
     "fetching_access_tokens_list": "Something went wrong while fetching the list of tokens",
     "generate_access_token": "Something went wrong while generating the access token",
     "delete_access_token": "Something went wrong while deleting the access token",
-    "extension_not_found": "Extension not found"
+    "extension_not_found": "Extension not found",
+    "invalid_request": "Invalid request data"
   },
   "export": {
     "as_json": "Export as JSON",

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -352,6 +352,14 @@
                 request: node.data.data.data,
               })
             "
+            @add-example="
+              node.data.type === 'requests' &&
+              emit('add-example', {
+                folderPath: node.data.data.parentIndex,
+                request: node.data.data.data,
+                requestIndex: pathToIndex(node.id),
+              })
+            "
             @drag-request="
               dragRequest($event, {
                 folderPath: node.data.data.parentIndex,
@@ -659,6 +667,14 @@ const emit = defineEmits<{
       request: HoppRESTRequest
     }
   ): void
+  (
+    event: "add-example",
+    payload: {
+      folderPath: string
+      request: HoppRESTRequest
+      requestIndex: number
+    }
+  ): void
   (
     event: "drop-request",
     payload: {

packages/hoppscotch-common/src/components/collections/Request.vue

@@ -103,6 +103,7 @@
                 @keyup.delete="deleteAction?.$el.click()"
                 @keyup.s="shareAction?.$el.click()"
                 @keyup.i="documentationAction?.$el.click()"
+                @keyup.a="addExampleAction?.$el.click()"
                 @keyup.escape="hide()"
               >
                 <HoppSmartItem
@@ -131,6 +132,19 @@
                     }
                   "
                 />
+                <HoppSmartItem
+                  v-if="!hasNoTeamAccess"
+                  ref="addExampleAction"
+                  :icon="IconPlusCircle"
+                  :label="t('action.add_example')"
+                  :shortcut="['A']"
+                  @click="
+                    () => {
+                      emit('add-example')
+                      hide()
+                    }
+                  "
+                />
                 <HoppSmartItem
                   v-if="isDocumentationVisible"
                   ref="documentationAction"
@@ -230,6 +244,7 @@ import IconShare2 from "~icons/lucide/share-2"
 import IconArrowRight from "~icons/lucide/chevron-right"
 import IconArrowDown from "~icons/lucide/chevron-down"
 import IconBook from "~icons/lucide/book"
+import IconPlusCircle from "~icons/lucide/plus-circle"
 import { ref, PropType, watch, computed } from "vue"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
@@ -319,6 +334,7 @@ const emit = defineEmits<{
   (event: "remove-request"): void
   (event: "select-request"): void
   (event: "share-request"): void
+  (event: "add-example"): void
   (event: "drag-request", payload: DataTransfer): void
   (event: "update-request-order", payload: DataTransfer): void
   (event: "update-last-request-order", payload: DataTransfer): void
@@ -335,6 +351,7 @@ const options = ref<TippyComponent | null>(null)
 const duplicate = ref<HTMLButtonElement | null>(null)
 const shareAction = ref<HTMLButtonElement | null>(null)
 const documentationAction = ref<HTMLButtonElement | null>(null)
+const addExampleAction = ref<HTMLButtonElement | null>(null)
 
 const { isDocumentationVisible } = useDocumentationVisibility()
 

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -398,6 +398,14 @@
                 request: node.data.data.data.request,
               })
             "
+            @add-example="
+              node.data.type === 'requests' &&
+              emit('add-example', {
+                folderPath: getPath(node.id),
+                request: node.data.data.data.request,
+                requestIndex: node.data.data.data.id,
+              })
+            "
             @drag-request="
               dragRequest($event, {
                 folderPath: node.data.data.parentIndex,
@@ -705,6 +713,14 @@ const emit = defineEmits<{
       request: HoppRESTRequest
     }
   ): void
+  (
+    event: "add-example",
+    payload: {
+      folderPath: string
+      request: HoppRESTRequest
+      requestIndex: string
+    }
+  ): void
   (
     event: "sort-collections",
     payload: {