From bf01a9dc4361fa9241a9e44c52ab527fb9db284a Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 12 May 2026 18:52:47 +0200
Subject: [PATCH] feat(forklift): route and router doesnt work properly on
 extensions

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
---
 .../_cluster/forklift/configure-mappings.vue  | 14 ++++++-------
 .../_cluster/forklift/configure-provider.vue  | 10 +++++-----
 .../c/_cluster/forklift/review-migration.vue  | 20 +++++++++----------
 .../pages/c/_cluster/forklift/select-vms.vue  | 12 +++++------
 pkg/harvester/utils/router.js                 | 11 ++++++++++
 5 files changed, 36 insertions(+), 31 deletions(-)
 create mode 100644 pkg/harvester/utils/router.js

diff --git a/pkg/harvester/pages/c/_cluster/forklift/configure-mappings.vue b/pkg/harvester/pages/c/_cluster/forklift/configure-mappings.vue
index b5fe8541..5aea40f7 100644
--- a/pkg/harvester/pages/c/_cluster/forklift/configure-mappings.vue
+++ b/pkg/harvester/pages/c/_cluster/forklift/configure-mappings.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
 import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import AsyncButton from '@shell/components/AsyncButton';
@@ -11,6 +10,7 @@ import { SCHEMA, STORAGE_CLASS, NETWORK_ATTACHMENT } from '@shell/config/types';
 import { useI18n } from '@shell/composables/useI18n';
 import { HCI } from '../../../../types';
 import { PRODUCT_NAME } from '../../../../config/harvester';
+import { currentRouter, currentRoute } from '../../../../utils/router';
 
 const schema = {
   id:         HCI.FORKLIFT_NETWORK_MAP,
@@ -23,8 +23,6 @@ const schema = {
 };
 
 const store = useStore();
-const route = useRoute();
-const router = useRouter();
 const { t } = useI18n(store);
 
 const vms = ref([]);
@@ -36,7 +34,7 @@ const errors = ref([]);
 const loading = ref(true);
 
 const NAMESPACE = 'forklift';
-const providerName = computed(() => route.query.provider || 'vsphere');
+const providerName = computed(() => currentRoute().query.provider || 'vsphere');
 
 const harvesterNetworkOptions = computed(() => {
   const options = [
@@ -170,7 +168,7 @@ const cancel = async() => {
     await provider.remove();
   }
 
-  router.push({
+  currentRouter().push({
     name:   `${ PRODUCT_NAME }-c-cluster-forklift`,
     params: {
       product: store.getters['productId'],
@@ -289,7 +287,7 @@ const saveMappings = async(buttonCb) => {
       usedBy: entry.usedBy,
     }));
 
-    router.push({
+    currentRouter().push({
       name:   `${ PRODUCT_NAME }-c-cluster-forklift-review-migration`,
       params: {
         product: store.getters['productId'],
@@ -297,7 +295,7 @@ const saveMappings = async(buttonCb) => {
       },
       query: {
         provider:        providerName.value,
-        vms:             route.query.vms,
+        vms:             currentRoute().query.vms,
         networkMap:      networkMap.metadata.name,
         storageMap:      storageMap.metadata.name,
         networkMappings: JSON.stringify(networkMappingsData),
@@ -336,7 +334,7 @@ const init = async() => {
   const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
   const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
 
-  const vmsParam = route.query.vms;
+  const vmsParam = currentRoute().query.vms;
 
   if (vmsParam) {
     try {
diff --git a/pkg/harvester/pages/c/_cluster/forklift/configure-provider.vue b/pkg/harvester/pages/c/_cluster/forklift/configure-provider.vue
index dbef545d..bc72023d 100644
--- a/pkg/harvester/pages/c/_cluster/forklift/configure-provider.vue
+++ b/pkg/harvester/pages/c/_cluster/forklift/configure-provider.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
+
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import { Banner } from '@components/Banner';
@@ -12,6 +12,7 @@ import { randomStr } from '@shell/utils/string';
 import { useI18n } from '@shell/composables/useI18n';
 import { HCI } from '../../../../types';
 import { PRODUCT_NAME } from '../../../../config/harvester';
+import { currentRouter } from '../../../../utils/router';
 
 const schema = {
   id:         HCI.FORKLIFT_PROVIDER,
@@ -24,7 +25,6 @@ const schema = {
 };
 
 const store = useStore();
-const router = useRouter();
 const { t } = useI18n(store);
 
 const allSecrets = ref([]);
@@ -59,7 +59,7 @@ const cancel = async() => {
     createdSecret.value = null;
   }
 
-  router.push({
+  currentRouter().push({
     name:   `${ PRODUCT_NAME }-c-cluster-forklift`,
     params: {
       product: store.getters['productId'],
@@ -235,7 +235,7 @@ const saveProvider = async(buttonCb) => {
     // Test hasn't passed yet — run it first
     await testConnection((success) => {
       if (success) {
-        router.push({
+        currentRouter().push({
           name:   `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`,
           params: {
             product: store.getters['productId'],
@@ -251,7 +251,7 @@ const saveProvider = async(buttonCb) => {
     return;
   }
 
-  router.push({
+  currentRouter().push({
     name:   `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`,
     params: {
       product: store.getters['productId'],
diff --git a/pkg/harvester/pages/c/_cluster/forklift/review-migration.vue b/pkg/harvester/pages/c/_cluster/forklift/review-migration.vue
index c25e1f03..31308cfe 100644
--- a/pkg/harvester/pages/c/_cluster/forklift/review-migration.vue
+++ b/pkg/harvester/pages/c/_cluster/forklift/review-migration.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
 import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import AsyncButton from '@shell/components/AsyncButton';
@@ -12,6 +11,7 @@ import { SCHEMA } from '@shell/config/types';
 import { useI18n } from '@shell/composables/useI18n';
 import { HCI } from '../../../../types';
 import { PRODUCT_NAME } from '../../../../config/harvester';
+import { currentRouter, currentRoute } from '../../../../utils/router';
 
 const schema = {
   id:         HCI.FORKLIFT_PLAN,
@@ -24,8 +24,6 @@ const schema = {
 };
 
 const store = useStore();
-const route = useRoute();
-const router = useRouter();
 const { t } = useI18n(store);
 
 const vms = ref([]);
@@ -36,9 +34,9 @@ const loading = ref(true);
 
 const NAMESPACE = 'forklift';
 const TARGET_NAMESPACE = 'default';
-const providerName = computed(() => route.query.provider || 'vsphere');
-const networkMapName = computed(() => route.query.networkMap || '');
-const storageMapName = computed(() => route.query.storageMap || '');
+const providerName = computed(() => currentRoute().query.provider || 'vsphere');
+const networkMapName = computed(() => currentRoute().query.networkMap || '');
+const storageMapName = computed(() => currentRoute().query.storageMap || '');
 
 const totalVCpu = computed(() => vms.value.reduce((sum, vm) => sum + (vm.cpuCount || vm.numCPU || 0), 0));
 
@@ -100,7 +98,7 @@ const cancel = async() => {
     await provider.remove();
   }
 
-  router.push({
+  currentRouter().push({
     name:   `${ PRODUCT_NAME }-c-cluster-forklift`,
     params: {
       product: store.getters['productId'],
@@ -206,7 +204,7 @@ const startMigration = async(buttonCb) => {
       await provider.save();
     }
 
-    router.push({
+    currentRouter().push({
       name:   `${ PRODUCT_NAME }-c-cluster-forklift`,
       params: {
         product: store.getters['productId'],
@@ -229,7 +227,7 @@ const init = async() => {
   const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
   const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
 
-  const vmsParam = route.query.vms;
+  const vmsParam = currentRoute().query.vms;
 
   if (vmsParam) {
     try {
@@ -252,7 +250,7 @@ const init = async() => {
     }
   }
 
-  const networkMappingsParam = route.query.networkMappings;
+  const networkMappingsParam = currentRoute().query.networkMappings;
 
   if (networkMappingsParam) {
     try {
@@ -262,7 +260,7 @@ const init = async() => {
     }
   }
 
-  const storageMappingsParam = route.query.storageMappings;
+  const storageMappingsParam = currentRoute().query.storageMappings;
 
   if (storageMappingsParam) {
     try {
diff --git a/pkg/harvester/pages/c/_cluster/forklift/select-vms.vue b/pkg/harvester/pages/c/_cluster/forklift/select-vms.vue
index c1f42043..d9d5fcd4 100644
--- a/pkg/harvester/pages/c/_cluster/forklift/select-vms.vue
+++ b/pkg/harvester/pages/c/_cluster/forklift/select-vms.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
 import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import SortableTable from '@shell/components/SortableTable';
@@ -10,6 +9,7 @@ import { SCHEMA } from '@shell/config/types';
 import { useI18n } from '@shell/composables/useI18n';
 import { HCI } from '../../../../types';
 import { PRODUCT_NAME } from '../../../../config/harvester';
+import { currentRouter, currentRoute } from '../../../../utils/router';
 
 const schema = {
   id:         HCI.FORKLIFT_PROVIDER,
@@ -22,8 +22,6 @@ const schema = {
 };
 
 const store = useStore();
-const route = useRoute();
-const router = useRouter();
 const { t } = useI18n(store);
 
 const allProviders = ref([]);
@@ -35,7 +33,7 @@ const loading = ref(true);
 const networkMap = ref({});
 const datastoreMap = ref({});
 
-const providerName = computed(() => provider.value?.metadata?.name || route.query.provider || '');
+const providerName = computed(() => provider.value?.metadata?.name || currentRoute().query.provider || '');
 const vmCount = computed(() => discoveredVMs.value.length);
 const selectedCount = computed(() => selectedVMs.value.length);
 
@@ -158,7 +156,7 @@ const cancel = async() => {
     await found.remove();
   }
 
-  router.push({
+  currentRouter().push({
     name:   `${ PRODUCT_NAME }-c-cluster-forklift`,
     params: {
       product: store.getters['productId'],
@@ -170,7 +168,7 @@ const cancel = async() => {
 const saveSelection = () => {
   const vmIds = selectedVMs.value.map((vm) => vm.id || vm.vmId || vm.metadata?.name);
 
-  router.push({
+  currentRouter().push({
     name:   `${ PRODUCT_NAME }-c-cluster-forklift-configure-mappings`,
     params: {
       product: store.getters['productId'],
@@ -188,7 +186,7 @@ const init = async() => {
 
   allProviders.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
 
-  const queryProvider = route.query.provider;
+  const queryProvider = currentRoute().query.provider;
 
   if (queryProvider) {
     provider.value = allProviders.value.find(
diff --git a/pkg/harvester/utils/router.js b/pkg/harvester/utils/router.js
new file mode 100644
index 00000000..5e12e1a3
--- /dev/null
+++ b/pkg/harvester/utils/router.js
@@ -0,0 +1,11 @@
+// Mirrors Resource class methods from @shell/plugins/dashboard-store/resource-class.js
+// useRouter()/useRoute() from vue-router don't work in extension mode,
+// so we use the same global access pattern the shell uses internally.
+
+export function currentRouter() {
+  return window.$globalApp.$router;
+}
+
+export function currentRoute() {
+  return window.$globalApp.$route;
+}