From 994e0f6b57ca223f80df391d92f1e7e6d4008e76 Mon Sep 17 00:00:00 2001
From: Tian Tan <tian.tan@konghq.com>
Date: Thu, 26 Dec 2024 17:41:34 +0800
Subject: [PATCH] feat(plugin-select): enable scrolling to anchor

---
 .../sandbox/pages/PluginSelectPage.vue                |  8 ++++++++
 .../entities-plugins/src/components/PluginForm.vue    |  8 ++++++--
 .../entities-plugins/src/components/PluginSelect.vue  | 11 ++++++++++-
 .../src/components/select/PluginSelectCard.vue        |  5 ++++-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue b/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue
index 0749368b81..b07aa92160 100644
--- a/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue
+++ b/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue
@@ -37,6 +37,14 @@ const konnectConfig = ref<KonnectPluginSelectConfig>({
       control_plane_id: controlPlaneId.value,
       plugin,
     },
+    query: {
+      cancelRoute: JSON.stringify({
+        name: 'select-plugin',
+        query: {
+          anchor: plugin,
+        },
+      }),
+    },
   }),
   // custom plugins
   createCustomRoute: { name: 'create-custom-plugin' },
diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue
index 1be426bd32..17581d70b7 100644
--- a/packages/entities/entities-plugins/src/components/PluginForm.vue
+++ b/packages/entities/entities-plugins/src/components/PluginForm.vue
@@ -150,7 +150,7 @@ import type { Tab } from '@kong/kongponents'
 import type { AxiosError, AxiosResponse } from 'axios'
 import { marked, type MarkedOptions } from 'marked'
 import { computed, onBeforeMount, reactive, ref, watch, type PropType } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import composables from '../composables'
 import { CREDENTIAL_METADATA, CREDENTIAL_SCHEMAS, PLUGIN_METADATA } from '../definitions/metadata'
 import { ArrayInputFieldSchema } from '../definitions/schemas/ArrayInputFieldSchema'
@@ -276,6 +276,7 @@ const props = defineProps({
 })
 
 const router = useRouter()
+const route = useRoute()
 const { i18n: { t } } = composables.useI18n()
 const { customSchemas, typedefs } = composables.useSchemas({ app: props.config.app, credential: props.credential })
 const { formatPluginFieldLabel } = composables.usePluginHelpers()
@@ -1101,7 +1102,10 @@ watch([entityMap, initialized], (newData, oldData) => {
  * ---------------
  */
 const handleClickCancel = (): void => {
-  if (props.config.cancelRoute) {
+  if (route.query.cancelRoute) {
+    const cancelRoute = JSON.parse(route.query.cancelRoute as string)
+    router.push(cancelRoute)
+  } else if (props.config.cancelRoute) {
     router.push(props.config.cancelRoute)
   } else {
     emit('cancel')
diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.vue b/packages/entities/entities-plugins/src/components/PluginSelect.vue
index 1acee0519a..ccd5e68b16 100644
--- a/packages/entities/entities-plugins/src/components/PluginSelect.vue
+++ b/packages/entities/entities-plugins/src/components/PluginSelect.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeMount, onMounted, type PropType } from 'vue'
+import { computed, ref, watch, onBeforeMount, onMounted, type PropType, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
   PluginGroup,
@@ -525,6 +525,15 @@ onMounted(async () => {
   }
 
   isLoading.value = false
+
+  nextTick(() => {
+    if (route.query.anchor) {
+      const card = document.getElementById(route.query.anchor as string)
+      if (card) {
+        card.scrollIntoView()
+      }
+    }
+  })
 })
 </script>
 
diff --git a/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue b/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue
index d5f94b3a6f..60aa785701 100644
--- a/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue
+++ b/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="plugin-select-card-wrapper">
+  <div
+    :id="plugin.id"
+    class="plugin-select-card-wrapper"
+  >
     <KTooltip :text="plugin.disabledMessage">
       <a
         class="plugin-select-card"