chore: replace old interceptor component with new one (#4887)

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

packages/hoppscotch-common/locales/en.json

@@ -1223,6 +1223,7 @@
     "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
     "published_message": "Published message: {message} to topic: {topic}",
     "reconnection_error": "Failed to reconnect",
+    "saved": "Saved",
     "show": "Show",
     "subscribed_failed": "Failed to subscribe to topic: {topic}",
     "subscribed_success": "Successfully subscribed to topic: {topic}",

packages/hoppscotch-common/src/components.d.ts

@@ -23,7 +23,6 @@ declare module 'vue' {
     AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
     AppHeader: typeof import('./components/app/Header.vue')['default']
     AppInspection: typeof import('./components/app/Inspection.vue')['default']
-    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
     AppKernelInterceptor: typeof import('./components/app/KernelInterceptor.vue')['default']
     AppLogo: typeof import('./components/app/Logo.vue')['default']
     AppMarkdown: typeof import('./components/app/Markdown.vue')['default']

packages/hoppscotch-common/src/components/app/Interceptor.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="flex flex-col space-y-2">
-    <div v-if="isTooltipComponent" class="flex flex-col px-4 pt-2">
-      <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
-        {{ t("settings.interceptor") }}
-      </h2>
-      <p class="inline-flex text-tiny">
-        {{ t("settings.interceptor_description") }}
-      </p>
-    </div>
-
-    <div>
-      <div
-        v-for="interceptor in interceptors"
-        :key="interceptor.interceptorID"
-        class="flex flex-col"
-      >
-        <HoppSmartRadio
-          :value="interceptor.interceptorID"
-          :label="unref(interceptor.name(t))"
-          :selected="interceptorSelection === interceptor.interceptorID"
-          :class="{
-            '!px-0 hover:bg-transparent': !isTooltipComponent,
-          }"
-          @change="interceptorSelection = interceptor.interceptorID"
-        />
-
-        <component
-          :is="interceptor.selectorSubtitle"
-          v-if="interceptor.selectorSubtitle"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useService } from "dioc/vue"
-import { Ref, unref } from "vue"
-import { InterceptorService } from "~/services/interceptor.service"
-
-const t = useI18n()
-
-withDefaults(
-  defineProps<{
-    isTooltipComponent?: boolean
-  }>(),
-  {
-    isTooltipComponent: true,
-  }
-)
-
-const interceptorService = useService(InterceptorService)
-
-const interceptorSelection =
-  interceptorService.currentInterceptorID as Ref<string>
-
-const interceptors = interceptorService.availableInterceptors
-</script>

packages/hoppscotch-common/src/components/cookies/AllModal.vue

@@ -14,7 +14,9 @@
         :text="t('cookies.modal.interceptor_no_support')"
       >
         <template #body>
-          <AppInterceptor class="rounded border border-dividerLight p-2" />
+          <AppKernelInterceptor
+            class="rounded border border-dividerLight p-2"
+          />
         </template>
       </HoppSmartPlaceholder>
       <div v-else class="flex flex-col">

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

@@ -57,7 +57,9 @@
         :text="t('helpers.network_fail')"
       >
         <template #body>
-          <AppInterceptor class="rounded border border-dividerLight p-2" />
+          <AppKernelInterceptor
+            class="rounded border border-dividerLight p-2"
+          />
         </template>
       </HoppSmartPlaceholder>
       <HoppSmartPlaceholder