chore: add warning prompt for same response name (#4699)

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

packages/hoppscotch-common/locales/en.json

@@ -736,6 +736,7 @@
     "preview_html": "Preview HTML",
     "raw": "Raw",
     "renamed": "Response renamed",
+    "same_name_inspector_warning": "Response name already exists for this request, if saved it will overwrite the existing response",
     "size": "Size",
     "status": "Status",
     "time": "Time",

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

@@ -9,7 +9,8 @@
     />
   </div>
   <HttpSaveResponseName
-    v-model="responseName"
+    v-model:response-name="responseName"
+    :has-same-name-response="hasSameNameResponse"
     :show="showSaveResponseName"
     @submit="onSaveAsExample"
     @hide-modal="showSaveResponseName = false"
@@ -56,10 +57,18 @@ const hasResponse = computed(
 const responseName = ref("")
 const showSaveResponseName = ref(false)
 
+const hasSameNameResponse = computed(() => {
+  return responseName.value
+    ? responseName.value in doc.value.request.responses
+    : false
+})
+
 const loading = computed(() => doc.value.response?.type === "loading")
 
 const saveAsExample = () => {
   showSaveResponseName.value = true
+
+  responseName.value = doc.value.request.name
 }
 
 const onSaveAsExample = () => {
@@ -124,8 +133,10 @@ const onSaveAsExample = () => {
         editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, req)
 
         toast.success(`${t("response.saved")}`)
+        responseName.value = ""
       } catch (e) {
         console.error(e)
+        responseName.value = ""
       }
     } else {
       runMutation(UpdateRequestDocument, {
@@ -137,10 +148,12 @@ const onSaveAsExample = () => {
       })().then((result) => {
         if (E.isLeft(result)) {
           toast.error(`${t("profile.no_permission")}`)
+          responseName.value = ""
         } else {
           doc.value.isDirty = false
 
           toast.success(`${t("request.saved")}`)
+          responseName.value = ""
         }
       })
     }

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

@@ -12,9 +12,14 @@
           class="flex-grow"
           placeholder=" "
           :label="t('action.label')"
-          input-styles="floating-input"
+          input-styles="floating-input !border-0"
+          styles="border border-divider rounded"
           @submit="editRequest"
-        />
+        >
+          <template #button>
+            <AppInspection :inspection-results="hasSameNameInspectionResult" />
+          </template>
+        </HoppSmartInput>
       </div>
     </template>
     <template #footer>
@@ -40,6 +45,9 @@
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { useVModel } from "@vueuse/core"
+import { computed, ComputedRef, markRaw } from "vue"
+import { InspectorResult } from "~/services/inspection"
+import IconAlertTriangle from "~icons/lucide/alert-triangle"
 
 const toast = useToast()
 const t = useI18n()
@@ -48,22 +56,50 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     loadingState?: boolean
-    modelValue?: string
+    responseName?: string
+    hasSameNameResponse?: boolean
   }>(),
   {
     show: false,
     loadingState: false,
-    modelValue: "",
+    responseName: "",
+    hasSameNameResponse: false,
   }
 )
 
 const emit = defineEmits<{
   (e: "submit", name: string): void
   (e: "hide-modal"): void
-  (e: "update:modelValue", value: string): void
+  (e: "update:responseName", value: string): void
 }>()
 
-const editingName = useVModel(props, "modelValue")
+const editingName = useVModel(props, "responseName")
+
+const hasSameNameInspectionResult: ComputedRef<InspectorResult[]> = computed(
+  () => {
+    if (!props.hasSameNameResponse) return []
+
+    return [
+      {
+        id: "same-name-response",
+        severity: 2,
+        icon: markRaw(IconAlertTriangle),
+        isApplicable: true,
+        text: {
+          type: "text",
+          text: t("response.same_name_inspector_warning"),
+        },
+        doc: {
+          text: t("action.learn_more"),
+          link: "https://docs.hoppscotch.io/documentation/getting-started/rest/response-handling#save-a-response-as-an-example",
+        },
+        locations: {
+          type: "url",
+        },
+      },
+    ]
+  }
+)
 
 const editRequest = () => {
   if (editingName.value.trim() === "") {