Vue3 migration - vue-migration.js launch + shell compatibility fixes

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/pages/c/_cluster/airgapupgrade/index.vue

@@ -227,7 +227,7 @@ export default {
       @cancel="done"
     >
       <RadioGroup
-        v-model="imageSource"
+        v-model:value="imageSource"
         class="image-group"
         name="image"
         :options="[
@@ -245,18 +245,18 @@ export default {
       <div v-if="uploadImage">
         <LabeledInput v-model.trim="imageValue.spec.displayName" class="mb-20" label-key="harvester.fields.name" required />
 
-        <LabeledInput v-model="imageValue.spec.checksum" class="mb-10" label-key="harvester.setting.upgrade.checksum" />
+        <LabeledInput v-model:value="imageValue.spec.checksum" class="mb-10" label-key="harvester.setting.upgrade.checksum" />
 
         <Checkbox
           v-if="canEnableLogging"
-          v-model="enableLogging"
+          v-model:value="enableLogging"
           class="check mb-20"
           type="checkbox"
           :label="t('harvester.upgradePage.enableLogging')"
         />
 
         <RadioGroup
-          v-model="sourceType"
+          v-model:value="sourceType"
           class="mb-20 image-group"
           name="sourceType"
           :options="[
@@ -302,7 +302,7 @@ export default {
 
       <LabeledSelect
         v-else
-        v-model="imageId"
+        v-model:value="imageId"
         :options="osImageOptions"
         required
         class="mb-20"
@@ -314,7 +314,7 @@ export default {
 
 <style lang="scss" scoped>
 #air-gap {
-  ::v-deep .image-group .radio-group {
+  :deep() .image-group .radio-group {
     display: flex;
     .radio-container {
       margin-right: 30px;

pkg/harvester/pages/c/_cluster/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -240,7 +240,7 @@ export default {
             v-if="viewOptions && mode === view"
             :value="currentView"
             :options="viewOptions"
-            @input="handleButtonGroupClick"
+            @update:value="handleButtonGroupClick"
           />
 
           <button

pkg/harvester/pages/c/_cluster/brand/index.vue

@@ -166,7 +166,7 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledInput
-            v-model="uiPLSetting.value"
+            v-model:value="uiPLSetting.value"
             :label="t('branding.uiPL.label')"
             :mode="mode"
             :maxlength="100"
@@ -181,7 +181,7 @@ export default {
       </label>
       <div class="row mt-10 mb-20">
         <Checkbox
-          v-model="customizeLogo"
+          v-model:value="customizeLogo"
           :label="t('branding.logos.useCustom')"
           :mode="mode"
         />
@@ -245,7 +245,7 @@ export default {
       </label>
       <div class="row mt-10 mb-20">
         <Checkbox
-          v-model="customizeFavicon"
+          v-model:value="customizeFavicon"
           :label="t('branding.favicon.useCustom')"
           :mode="mode"
         />
@@ -283,7 +283,7 @@ export default {
       </label>
       <div class="row mt-20">
         <Checkbox
-          v-model="customizeColor"
+          v-model:value="customizeColor"
           :label="t('branding.color.useCustom')"
           :mode="mode"
         />
@@ -293,7 +293,7 @@ export default {
         class="row mt-20 mb-20"
       >
         <ColorInput
-          v-model="uiColor"
+          v-model:value="uiColor"
           component-testid="primary"
         />
       </div>
@@ -305,7 +305,7 @@ export default {
       </label>
       <div class="row mt-20">
         <Checkbox
-          v-model="customizeLinkColor"
+          v-model:value="customizeLinkColor"
           :label="t('branding.linkColor.useCustom')"
           :mode="mode"
         />
@@ -315,7 +315,7 @@ export default {
         class="row mt-20 mb-20"
       >
         <ColorInput
-          v-model="uiLinkColor"
+          v-model:value="uiLinkColor"
           class="col"
           component-testid="link"
         />
@@ -326,9 +326,8 @@ export default {
         </span>
       </div>
     </div>
-    <template v-for="err in errors">
+    <template  v-for="(err, i) in errors" :key="i" >
       <Banner
-        :key="err"
         color="error"
         :label="err"
       />
@@ -355,7 +354,7 @@ export default {
   .logo-container {
       display: flex;
       flex-direction: column;
-      ::v-deep.simple-box {
+      :deep().simple-box {
           position: relative;
           flex: 1;
           max-height: 120px;

pkg/harvester/pages/c/_cluster/console/_uid/serial.vue

@@ -42,7 +42,7 @@ export default {
   <SerialConsole
     v-else
     ref="serialConsole"
-    v-model="vmi"
+    v-model:value="vmi"
   />
 </template>
 

pkg/harvester/pages/c/_cluster/console/_uid/vnc.vue

@@ -43,7 +43,7 @@ export default {
   <NovncConsoleWrapper
     v-else
     ref="console"
-    v-model="vmi"
+    v-model:value="vmi"
     class="novnc-wrapper"
   />
 </template>

pkg/harvester/pages/c/_cluster/projectsnamespaces.vue

@@ -1,36 +1,6 @@
-<script lang="ts">
-import Vue from 'vue';
-// eslint-disable-next-line import/named
-import { Location } from 'vue-router';
-import ExplorerProjectsNamespaces from '@shell/components/ExplorerProjectsNamespaces.vue';
-import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
-import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../config/harvester';
-interface Data {
-  createProjectLocation: Location,
-  createNamespaceLocation: Location
-}
-export default Vue.extend<Data, any, any, any>({
-  components: { ExplorerProjectsNamespaces },
-  data() {
-    return {
-      createProjectLocation: {
-        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
-        params: {
-          product:  HARVESTER_PRODUCT,
-          cluster:  this.$store.getters['currentCluster']?.id,
-          resource: MANAGEMENT.PROJECT
-        },
-      },
-      createNamespaceLocation: {
-        name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-create`,
-        params: {
-          product:  HARVESTER_PRODUCT,
-          resource: NAMESPACE
-        },
-      }
-    };
-  }
-});
+<script>
+import ExplorerProjectsNamespaces from '@shell/components/ExplorerProjectsNamespaces';
+export default { components: { ExplorerProjectsNamespaces } };
 </script>
 
-<template><ExplorerProjectsNamespaces v-bind="$attrs" :create-project-location-override="createProjectLocation" :create-namespace-location-override="createNamespaceLocation" /></template>
+<template><ExplorerProjectsNamespaces v-bind="$attrs" /></template>