Merge pull request rancher#10239 from rak-phillip/chore/10104-defineC…

…omponent-shell Replace `Vue.extend` with `defineComponent` in shell
momesgin · Jan 10, 2024 · 464b799 · 464b799
2 parents 0b1a331 + 455fd39
commit 464b799
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 62 deletions.
diff --git a/shell/components/AsyncButton.vue b/shell/components/AsyncButton.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType, inject } from 'vue';
 import typeHelper from '@shell/utils/type-helpers';
 
 export const ASYNC_BUTTON_STATES = {
@@ -14,7 +14,13 @@ const TOOLTIP = 'tooltip';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
-export default Vue.extend<{ phase: string}, any, any, any>({
+interface NonReactiveProps {
+  timer: NodeJS.Timeout | undefined;
+}
+
+const provideProps: NonReactiveProps = { timer: undefined };
+
+export default defineComponent({
   props: {
     /**
      * Mode maps to keys in asyncButton.* translations
@@ -37,7 +43,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
       default: false,
     },
     type: {
-      type:    String,
+      type:    String as PropType<'button' | 'submit' | 'reset' | undefined>,
       default: 'button'
     },
     tabIndex: {
@@ -113,7 +119,13 @@ export default Vue.extend<{ phase: string}, any, any, any>({
 
   },
 
-  data(): { phase: string, timer?: NodeJS.Timeout} {
+  setup() {
+    const timer = inject('timer', provideProps.timer);
+
+    return { timer };
+  },
+
+  data() {
     return { phase: this.currentPhase };
   },
 
@@ -245,7 +257,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
         this.phase = (success ? ASYNC_BUTTON_STATES.SUCCESS : ASYNC_BUTTON_STATES.ERROR );
         this.timer = setTimeout(() => {
           this.timerDone();
-        }, this.delay );
+        }, this.delay);
       }
     },
 

diff --git a/shell/components/Certificates.vue b/shell/components/Certificates.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
-import ResourceTable from '@shell/components/ResourceTable';
+import ResourceTable from '@shell/components/ResourceTable.vue';
 import { SECRET } from '@shell/config/types';
 import { NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, STATE } from '@shell/config/table-headers';
 import Secret, { TYPES } from '@shell/models/secret';
@@ -19,7 +19,7 @@ interface Data {
   }
 }
 
-export default Vue.extend<Data, any, any, any>({
+export default defineComponent({
   components: {
     ResourceTable, Banner, BadgeState
   },
@@ -99,7 +99,7 @@ export default Vue.extend<Data, any, any, any>({
   computed: {
     ...mapGetters(['isAllNamespaces']),
 
-    expiredData() {
+    expiredData(): any {
       let expiring = 0;
       let expired = 0;
 

diff --git a/shell/components/DraggableZone.vue b/shell/components/DraggableZone.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
 
@@ -14,7 +14,7 @@ interface Data {
   drag: Drag;
 }
 
-export default Vue.extend({
+export default defineComponent({
   data(): Data {
     return {
       drag: {

diff --git a/shell/components/PodSecurityAdmission.vue b/shell/components/PodSecurityAdmission.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
@@ -25,7 +25,7 @@ const getExemptionControl = (): PSAExemptionControl => ({
   value:  ''
 });
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     Checkbox, LabeledSelect, LabeledInput
   },

diff --git a/shell/components/form/Error.vue b/shell/components/form/Error.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import Banner from '@components/Banner/Banner.vue';
 
-type Rule = (v?: string) => undefined | string;
+type Rule = (v?: string | number | Record<string, any> | unknown[]) => undefined | string;
 
-export default Vue.extend<any, any, any, any>({
+export default defineComponent({
   components: { Banner },
   props:      {
     value: {

diff --git a/shell/components/form/Footer.vue b/shell/components/form/Footer.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
 import Banner from '@components/Banner/Banner.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { AsyncButton, Banner },
 
   props: {