feat(plugin-select): enable scrolling to anchor

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' },

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')

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>
 

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"