feat: save api responses (#4382)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/http/SaveResponseName.vue

@@ -0,0 +1,81 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('modal.response_name')"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="flex gap-1">
+        <HoppSmartInput
+          v-model="editingName"
+          class="flex-grow"
+          placeholder=" "
+          :label="t('action.label')"
+          input-styles="floating-input"
+          @submit="editRequest"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          :loading="loadingState"
+          outline
+          @click="editRequest"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+import { useVModel } from "@vueuse/core"
+
+const toast = useToast()
+const t = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    loadingState: boolean
+    modelValue?: string
+  }>(),
+  {
+    show: false,
+    loadingState: false,
+    modelValue: "",
+  }
+)
+
+const emit = defineEmits<{
+  (e: "submit", name: string): void
+  (e: "hide-modal"): void
+  (e: "update:modelValue", value: string): void
+}>()
+
+const editingName = useVModel(props, "modelValue")
+
+const editRequest = () => {
+  if (editingName.value.trim() === "") {
+    toast.error(t("response.invalid_name"))
+    return
+  }
+
+  emit("submit", editingName.value)
+}
+
+const hideModal = () => {
+  editingName.value = ""
+  emit("hide-modal")
+}
+</script>