From 3df4e9dd53a4d3033b1644e3a46e507d2b779d99 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <97888974+aalves08@users.noreply.github.com>
Date: Mon, 29 Jan 2024 11:30:50 +0000
Subject: [PATCH 1/5] Reintroduce "Replace `Vue.extend` with `defineComponent`
 in shell"

This reverts commit 1eacbdea401073c6de5bc5858b045fc3843cbb5e.
---
 shell/components/AsyncButton.vue              |  22 +++-
 shell/components/Certificates.vue             |   8 +-
 shell/components/DraggableZone.vue            |   4 +-
 shell/components/PodSecurityAdmission.vue     |   4 +-
 shell/components/form/Error.vue               |   6 +-
 shell/components/form/Footer.vue              |   4 +-
 shell/components/form/GitPicker.vue           | 121 ++++++++++++------
 ...securityadmissionconfigurationtemplate.vue |   4 +-
 shell/mixins/create-edit-view/index.js        |   4 +-
 shell/tsconfig.paths.json                     |   5 +-
 shell/types/vue-shim.d.ts                     |  42 ++++++
 shell/utils/git.ts                            |   2 +-
 12 files changed, 164 insertions(+), 62 deletions(-)
 create mode 100644 shell/types/vue-shim.d.ts

diff --git a/shell/components/AsyncButton.vue b/shell/components/AsyncButton.vue
index 1016e76cfbb..bfecf0ef16e 100644
--- 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
index 43b399f4660..ac829197741 100644
--- 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
index 42f3a82bcdb..f264be071f1 100644
--- 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
index 026133150fe..b3092d9ea53 100644
--- 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
index c37bea9f238..0a0a1fc3adb 100644
--- 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
index 0a27f621ad6..8b56a532ca8 100644
--- 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: {
diff --git a/shell/components/form/GitPicker.vue b/shell/components/form/GitPicker.vue
index 24bf96b610c..0a20b5d0502 100644
--- a/shell/components/form/GitPicker.vue
+++ b/shell/components/form/GitPicker.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, inject } from 'vue';
 import SortableTable from '@shell/components/SortableTable/index.vue';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 import debounce from 'lodash/debounce';
 import { isArray } from '@shell/utils/array';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { GitUtils } from '../../utils/git';
+import { GitUtils, Commit } from '@shell/utils/git';
+import type { DebouncedFunc } from 'lodash';
 
 interface commit {
   [key: string]: any,
@@ -17,21 +18,45 @@ interface Data {
     repo: boolean,
     branch: boolean,
     commits: boolean,
+    branches?: unknown,
   },
 
   repos: object[],
   branches: object[],
   commits: commit[],
 
-  selectedAccOrOrg: string| null,
-  selectedRepo: object| null,
-  selectedBranch: object| null,
-  selectedCommit: object | null,
+  selectedAccOrOrg: string | undefined,
+  selectedRepo: object | undefined,
+  selectedBranch: object | undefined,
+  selectedCommit: Commit | null,
 }
 
-const debounceTime = 1000;
+interface CommitHeader {
+  name: string;
+  label: string;
+  width?: number;
+  formatter?: string;
+  formatterOpts?: { [key: string]: any };
+  value?: string | string[];
+  sort?: string | string[];
+  defaultSort?: boolean;
+}
+
+interface NonReactiveProps {
+  onSearchRepo: DebouncedFunc<(param: any) => Promise<any>> | undefined;
+  onSearchBranch: DebouncedFunc<(param: any) => Promise<any>> | undefined;
+  debounceTime: number;
+}
+
+const debounceTime = 1_000;
 
-export default Vue.extend<Data, any, any, any>({
+const provideProps: NonReactiveProps = {
+  onSearchRepo:   undefined,
+  onSearchBranch: undefined,
+  debounceTime,
+};
+
+export default defineComponent({
 
   components: {
     LabeledSelect,
@@ -52,10 +77,20 @@ export default Vue.extend<Data, any, any, any>({
     }
   },
 
-  data() {
+  setup() {
+    const onSearchRepo = inject('onSearchRepo', provideProps.onSearchRepo);
+    const onSearchBranch = inject('onSearchBranch', provideProps.onSearchBranch);
+    const debounceTime = inject('debounceTime', provideProps.debounceTime);
+
     return {
+      onSearchRepo,
+      onSearchBranch,
       debounceTime,
+    };
+  },
 
+  data(): Data {
+    return {
       hasError: {
         repo:    false,
         branch:  false,
@@ -66,10 +101,10 @@ export default Vue.extend<Data, any, any, any>({
       branches: [],
       commits:  [] as commit[],
 
-      selectedAccOrOrg: null,
-      selectedRepo:     null,
-      selectedBranch:   null,
-      selectedCommit:   {},
+      selectedAccOrOrg: undefined,
+      selectedRepo:     undefined,
+      selectedBranch:   undefined,
+      selectedCommit:   null,
     };
   },
 
@@ -95,13 +130,14 @@ export default Vue.extend<Data, any, any, any>({
   },
 
   computed: {
-    commitHeaders() {
+    commitHeaders(): CommitHeader[] {
       return [
         {
           name:  'index',
           label: this.t(`gitPicker.${ this.type }.tableHeaders.choose.label`),
           width: 60,
-        }, {
+        },
+        {
           name:          'sha',
           label:         this.t(`gitPicker.${ this.type }.tableHeaders.sha.label`),
           width:         90,
@@ -134,17 +170,20 @@ export default Vue.extend<Data, any, any, any>({
       ];
     },
 
-    preparedRepos() {
+    preparedRepos(): unknown {
       return this.normalizeArray(this.repos, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedBranches() {
+    preparedBranches(): unknown {
       return this.normalizeArray(this.branches, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedCommits() {
-      return this.normalizeArray(this.commits, (c: any) => GitUtils[this.type].normalize.commit(c));
+    preparedCommits(): Commit[] {
+      return this.normalizeArray(this.commits, (c) => GitUtils[this.type].normalize.commit(c));
     },
+    selectedCommitId(): string | undefined {
+      return this.selectedCommit?.commitId;
+    }
   },
 
   methods: {
@@ -164,10 +203,10 @@ export default Vue.extend<Data, any, any, any>({
 
     reset() {
       this.repos = [];
-      this.selectedAccOrOrg = null;
-      this.selectedRepo = null;
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedAccOrOrg = undefined;
+      this.selectedRepo = undefined;
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
     },
@@ -217,13 +256,13 @@ export default Vue.extend<Data, any, any, any>({
 
     async fetchRepos() {
       this.repos = [];
-      this.selectedRepo = null;
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedRepo = undefined;
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
 
-      if (this.selectedAccOrOrg.length) {
+      if (this.selectedAccOrOrg?.length) {
         try {
           const res = await this.$store.dispatch(`${ this.type }/fetchRecentRepos`, { username: this.selectedAccOrOrg });
 
@@ -237,8 +276,8 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     async fetchBranches() {
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
 
@@ -253,7 +292,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     async fetchCommits() {
-      this.selectedCommit = {};
+      this.selectedCommit = null;
 
       this.communicateReset();
 
@@ -279,7 +318,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     final(commitId: string) {
-      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId);
+      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId) || null;
 
       if (this.selectedAccOrOrg && this.selectedRepo && this.selectedCommit?.commitId) {
         this.$emit('change', {
@@ -337,7 +376,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     status(value: boolean) {
-      return value ? 'error' : null;
+      return value ? 'error' : undefined;
     },
 
     reposRules() {
@@ -355,11 +394,17 @@ export default Vue.extend<Data, any, any, any>({
       const commitId = this.$route.query?.commit;
 
       if (commitId) {
-        const table = this.$refs.commitsTable;
-        const page = table.getPageByRow(commitId, ({ commitId }: commit) => commitId);
+        const table = this.$refs.commitsTable as unknown as {
+          getPageByRow: (id: string | (string | null)[], callback: (commit: any) => any) => any;
+          setPage: (page: any) => void;
+        };
+        const page = table?.getPageByRow(commitId, ({ commitId }: commit) => commitId);
 
-        table.setPage(page);
+        table?.setPage(page);
       }
+    },
+    selectReduction(e: unknown) {
+      return e;
     }
   },
 });
@@ -393,7 +438,7 @@ export default Vue.extend<Data, any, any, any>({
           :options="preparedRepos"
           :clearable="true"
           :searchable="true"
-          :reduce="(e) => e"
+          :reduce="selectReduction"
           :rules="[reposRules]"
           :status="status(hasError.repo)"
           :option-label="'name'"
@@ -412,7 +457,7 @@ export default Vue.extend<Data, any, any, any>({
           :label="t(`gitPicker.${ type }.branch.inputLabel`)"
           :options="preparedBranches"
           :clearable="false"
-          :reduce="(e) => e"
+          :reduce="selectReduction"
           :searchable="true"
           :rules="[branchesRules]"
           :status="status(hasError.branch)"
@@ -441,7 +486,7 @@ export default Vue.extend<Data, any, any, any>({
         >
           <template #cell:index="{row}">
             <RadioButton
-              :value="selectedCommit.commitId"
+              :value="selectedCommitId"
               :val="row.commitId"
               @input="final($event)"
             />
diff --git a/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue b/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
index 2e8e8160d2e..5c6058947dc 100644
--- a/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
+++ b/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType, VueConstructor } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource.vue';
 import PodSecurityAdmission from '@shell/components/PodSecurityAdmission.vue';
@@ -9,7 +9,7 @@ import { PSA, PSAConfig, PSADefaults, PSAExemptions } from '@shell/types/pod-sec
 import { PSADimensions } from '@shell/config/pod-security-admission';
 import { MANAGEMENT } from '@shell/config/types';
 
-export default (Vue as VueConstructor<Vue & InstanceType<typeof CreateEditView>>).extend({
+export default defineComponent({
   mixins:     [CreateEditView],
   components: {
     CruResource,
diff --git a/shell/mixins/create-edit-view/index.js b/shell/mixins/create-edit-view/index.js
index 463efe9f878..6f7621b1379 100644
--- a/shell/mixins/create-edit-view/index.js
+++ b/shell/mixins/create-edit-view/index.js
@@ -1,9 +1,9 @@
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import impl from './impl';
 
-export default Vue.extend({
+export default defineComponent({
   ...impl,
 
   props: {
diff --git a/shell/tsconfig.paths.json b/shell/tsconfig.paths.json
index 759c1c28f51..72ef53d32c0 100644
--- a/shell/tsconfig.paths.json
+++ b/shell/tsconfig.paths.json
@@ -12,7 +12,10 @@
       ],
       "@pkg/*": [
         "../shell/pkg/*"
+      ],
+      "@components/*": [
+        "../pkg/rancher-components/src/components/*"
       ]
     },
   },
-}
\ No newline at end of file
+}
diff --git a/shell/types/vue-shim.d.ts b/shell/types/vue-shim.d.ts
new file mode 100644
index 00000000000..31176020da9
--- /dev/null
+++ b/shell/types/vue-shim.d.ts
@@ -0,0 +1,42 @@
+// eslint-disable-next-line no-unused-vars
+import Vue, { ComponentCustomProperties } from 'vue';
+declare module '*.vue' {
+  export default Vue;
+}
+
+// This is required to keep typescript from complaining. It is required for
+// our i18n plugin. For more info see:
+// https://v2.vuejs.org/v2/guide/typescript.html?redirect=true#Augmenting-Types-for-Use-with-Plugins
+declare module 'vue/types/vue' {
+  // eslint-disable-next-line no-unused-vars
+  interface Vue {
+      /**
+       * Lookup a given string with the given arguments
+       * @param raw if set, do not do HTML escaping.
+       */
+      t: {
+        (key: string, args?: Record<string, any>, raw?: boolean): string;
+        (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+      };
+  }
+}
+
+declare module '@vue/runtime-core' {
+  // eslint-disable-next-line no-unused-vars
+  interface Vue {
+    t: {
+      (key: string, args?: Record<string, any>, raw?: boolean): string;
+      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+    }
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  interface ComponentCustomProperties {
+    $t: {
+      (key: string, args?: Record<string, any>, raw?: boolean): string;
+      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+    }
+  }
+}
+
+declare module 'js-yaml';
diff --git a/shell/utils/git.ts b/shell/utils/git.ts
index 97e1f64cc0e..60fffbf61ee 100644
--- a/shell/utils/git.ts
+++ b/shell/utils/git.ts
@@ -9,7 +9,7 @@ interface Repo {
   name: string,
 }
 
-interface Commit {
+export interface Commit {
   message: string,
   htmlUrl: string,
   sha?: string,

From 661890dcb4d2da01b451b9d6b243ef15bda2bdb8 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <97888974+aalves08@users.noreply.github.com>
Date: Mon, 29 Jan 2024 11:32:31 +0000
Subject: [PATCH 2/5] Reintroduce "Replace `vue.extend` with `defineComponent`
 in Rancher Components"

This reverts commit fdecd0501bcefc253d8d7f00b6f6c5f186e12bdb.
---
 .../src/components/Accordion/Accordion.vue    |  5 +++--
 ...{BadgeState.spec.ts => BadgeState.test.ts} |  0
 .../src/components/BadgeState/BadgeState.vue  |  6 +++---
 .../src/components/Banner/Banner.vue          |  4 ++--
 .../src/components/Card/Card.vue              |  6 +++---
 .../src/components/Form/Checkbox/Checkbox.vue |  6 +++---
 .../Form/LabeledInput/LabeledInput.test.ts    |  2 +-
 .../src/components/Form/Radio/RadioButton.vue | 20 ++++++++++++-------
 .../src/components/Form/Radio/RadioGroup.vue  |  7 ++++---
 .../Form/TextArea/TextAreaAutoGrow.vue        | 10 ++++++----
 .../Form/ToggleSwitch/ToggleSwitch.vue        | 11 ++++++----
 .../LabeledTooltip/LabeledTooltip.vue         | 13 ++++++++----
 .../src/components/StringList/StringList.vue  | 16 +++++++--------
 pkg/rancher-components/src/shim-vue.d.ts      | 13 +++++++-----
 pkg/rancher-components/tsconfig.json          |  3 ++-
 15 files changed, 72 insertions(+), 50 deletions(-)
 rename pkg/rancher-components/src/components/BadgeState/{BadgeState.spec.ts => BadgeState.test.ts} (100%)

diff --git a/pkg/rancher-components/src/components/Accordion/Accordion.vue b/pkg/rancher-components/src/components/Accordion/Accordion.vue
index 03779d47236..1d192b61dc2 100644
--- a/pkg/rancher-components/src/components/Accordion/Accordion.vue
+++ b/pkg/rancher-components/src/components/Accordion/Accordion.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
-export default Vue.extend({
+
+export default defineComponent({
   props: {
     title: {
       type:    String,
diff --git a/pkg/rancher-components/src/components/BadgeState/BadgeState.spec.ts b/pkg/rancher-components/src/components/BadgeState/BadgeState.test.ts
similarity index 100%
rename from pkg/rancher-components/src/components/BadgeState/BadgeState.spec.ts
rename to pkg/rancher-components/src/components/BadgeState/BadgeState.test.ts
diff --git a/pkg/rancher-components/src/components/BadgeState/BadgeState.vue b/pkg/rancher-components/src/components/BadgeState/BadgeState.vue
index 9274e94e521..87c232e3148 100644
--- a/pkg/rancher-components/src/components/BadgeState/BadgeState.vue
+++ b/pkg/rancher-components/src/components/BadgeState/BadgeState.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 interface Badge {
   stateBackground: string;
@@ -11,7 +11,7 @@ interface Badge {
  * <p>Represents a badge whose label and color is either taken from the value property or
  * from the label and color properties. The state property takes precedence.</p>
  */
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 
 <template>
-  <span :class="{'badge-state': true, [bg]: true}">
+  <span :class="['badge-state', bg]">
     <i
       v-if="icon"
       class="icon"
diff --git a/pkg/rancher-components/src/components/Banner/Banner.vue b/pkg/rancher-components/src/components/Banner/Banner.vue
index 45828d3f544..1c38c0020c9 100644
--- a/pkg/rancher-components/src/components/Banner/Banner.vue
+++ b/pkg/rancher-components/src/components/Banner/Banner.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { nlToBr } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A color class that represents the color of the banner.
diff --git a/pkg/rancher-components/src/components/Card/Card.vue b/pkg/rancher-components/src/components/Card/Card.vue
index 50a67cf762f..0c1b068e9f8 100644
--- a/pkg/rancher-components/src/components/Card/Card.vue
+++ b/pkg/rancher-components/src/components/Card/Card.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name:  'Card',
   props: {
     /**
@@ -22,7 +22,7 @@ export default Vue.extend({
      * The function to invoke when the default action button is clicked.
      */
     buttonAction: {
-      type:    Function,
+      type:    Function as PropType<(event: MouseEvent) => void>,
       default: (): void => { }
     },
     /**
diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index a92837cb211..52d4c05588b 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default Vue.extend({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent): boolean | void {
+    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
       if ((event.target as HTMLLinkElement).tagName === 'A' && (event.target as HTMLLinkElement).href) {
         // Ignore links inside the checkbox label so you can click them
         return true;
diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.test.ts b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.test.ts
index 8c25b326e33..d8d8778bc5e 100644
--- a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.test.ts
+++ b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.test.ts
@@ -5,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput as any, {
+    const wrapper = mount(LabeledInput, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });
diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue b/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
index d75ccf3b132..55fcd2746f8 100644
--- a/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
+++ b/pkg/rancher-components/src/components/Form/Radio/RadioButton.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+import { randomStr } from '@shell/utils/string';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The name of the input, for grouping.
@@ -71,7 +72,10 @@ export default Vue.extend({
   },
 
   data() {
-    return { isChecked: this.value === this.val };
+    return {
+      isChecked:    this.value === this.val,
+      randomString: `${ randomStr() }-radio`,
+    };
   },
 
   computed: {
@@ -115,13 +119,15 @@ export default Vue.extend({
     /**
      * Emits the input event.
      */
-    clicked({ target }: { target?: HTMLElement }) {
-      if (this.isDisabled || target?.tagName === 'A') {
+    clicked(event: MouseEvent | KeyboardEvent) {
+      const target = event.target;
+
+      if (this.isDisabled || (target instanceof HTMLElement && target.tagName === 'A')) {
         return;
       }
 
       this.$emit('input', this.val);
-    }
+    },
   }
 });
 </script>
@@ -134,7 +140,7 @@ export default Vue.extend({
     @click.stop="clicked($event)"
   >
     <input
-      :id="_uid+'-radio'"
+      :id="randomString"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"
diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue b/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
index 67add7254b0..49db4e4b38a 100644
--- a/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
+++ b/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
@@ -1,14 +1,15 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 
 interface Option {
   value: unknown,
-  label: string
+  label: string,
+  description?: string,
 }
 
-export default Vue.extend({
+export default defineComponent({
   components: { RadioButton },
   props:      {
     /**
diff --git a/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue b/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
index 67e7dd6a048..d24957f4385 100644
--- a/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
+++ b/pkg/rancher-components/src/components/Form/TextArea/TextAreaAutoGrow.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
@@ -10,7 +10,7 @@ declare module 'vue/types/vue' {
   }
 }
 
-export default Vue.extend({
+export default defineComponent({
   inheritAttrs: false,
 
   props: {
@@ -115,7 +115,9 @@ export default Vue.extend({
     /**
      * Emits the input event and resizes the Text Area.
     */
-    onInput(val: string): void {
+    onInput(event: Event): void {
+      const val = (event?.target as HTMLInputElement)?.value;
+
       this.$emit('input', val);
       this.queueResize();
     },
@@ -163,7 +165,7 @@ export default Vue.extend({
     v-bind="$attrs"
     :spellcheck="spellcheck"
     @paste="$emit('paste', $event)"
-    @input="onInput($event.target.value)"
+    @input="onInput($event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   />
diff --git a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
index 183af45b378..c76437caf20 100644
--- a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
+++ b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
@@ -1,6 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+
+type StateType = boolean | 'true' | 'false' | undefined;
+
+export default defineComponent({
   props: {
     value: {
       type:    [Boolean, String, Number],
@@ -28,7 +31,7 @@ export default Vue.extend({
     },
   },
   data() {
-    return { state: false as boolean | string | number };
+    return { state: false as StateType };
   },
 
   watch: {
@@ -41,7 +44,7 @@ export default Vue.extend({
   },
 
   methods: {
-    toggle(neu: boolean | string | number) {
+    toggle(neu: StateType | null) {
       this.state = neu === null ? !this.state : neu;
       this.$emit('input', this.state ? this.onValue : this.offValue);
     }
diff --git a/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue b/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
index 42251116fdd..f93a3035fdc 100644
--- a/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
+++ b/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The Labeled Tooltip value.
@@ -29,9 +29,14 @@ export default Vue.extend({
     }
   },
   computed: {
-    iconClass() {
+    iconClass(): string {
       return this.status === 'error' ? 'icon-warning' : 'icon-info';
     }
+  },
+  methods: {
+    isObject(value: string | Record<string, unknown>): value is Record<string, unknown> {
+      return typeof value === 'object' && value !== null && !!value.content;
+    }
   }
 });
 </script>
@@ -44,7 +49,7 @@ export default Vue.extend({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="isObject(value) ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />
diff --git a/pkg/rancher-components/src/components/StringList/StringList.vue b/pkg/rancher-components/src/components/StringList/StringList.vue
index a83c56d1730..49f98c3cabe 100644
--- a/pkg/rancher-components/src/components/StringList/StringList.vue
+++ b/pkg/rancher-components/src/components/StringList/StringList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
@@ -29,7 +29,7 @@ const CLASS = {
 /**
  * Manage a list of strings
  */
-export default Vue.extend({
+export default defineComponent({
 
   name:       'StringList',
   components: { LabeledInput },
@@ -92,9 +92,9 @@ export default Vue.extend({
   },
   data() {
     return {
-      value:        null as string | null,
+      value:        undefined as string | undefined,
       selected:     null as string | null,
-      editedItem:   null as string | null,
+      editedItem:   undefined as string | undefined,
       isCreateItem: false,
       errors:       { duplicate: false } as Record<Error, boolean>
     };
@@ -281,7 +281,7 @@ export default Vue.extend({
         this.isCreateItem = true;
         this.setFocus(INPUT.create);
       } else {
-        this.value = null;
+        this.value = undefined;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
@@ -303,11 +303,11 @@ export default Vue.extend({
         this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
-        this.value = null;
+        this.value = undefined;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = null;
+        this.editedItem = undefined;
       }
     },
 
@@ -502,7 +502,7 @@ export default Vue.extend({
         <button
           data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem || editedItem"
+          :disabled="!!isCreateItem || !!editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />
diff --git a/pkg/rancher-components/src/shim-vue.d.ts b/pkg/rancher-components/src/shim-vue.d.ts
index ee335b2efca..7c30dd2f277 100644
--- a/pkg/rancher-components/src/shim-vue.d.ts
+++ b/pkg/rancher-components/src/shim-vue.d.ts
@@ -9,10 +9,13 @@ declare module '*.vue' {
 // https://v2.vuejs.org/v2/guide/typescript.html?redirect=true#Augmenting-Types-for-Use-with-Plugins
 declare module 'vue/types/vue' {
   interface Vue {
-      /**
-       * Lookup a given string with the given arguments
-       * @param raw if set, do not do HTML escaping.
-       */
-      t: (key: string, args?: Record<string, any>, raw?: boolean) => string,
+    /**
+     * Lookup a given string with the given arguments
+     * @param raw if set, do not do HTML escaping.
+     */
+    t: {
+      (key: string, args?: Record<string, any>, raw?: boolean): string;
+      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+    }
   }
 }
diff --git a/pkg/rancher-components/tsconfig.json b/pkg/rancher-components/tsconfig.json
index a967a25d5ff..d945159f36d 100644
--- a/pkg/rancher-components/tsconfig.json
+++ b/pkg/rancher-components/tsconfig.json
@@ -46,6 +46,7 @@
     "tests/**/*.tsx"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "src/**/*.test.ts"
   ]
 }

From c5d2fe079e5fa132f3a2492d0f5be6b1b60ba9a7 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <97888974+aalves08@users.noreply.github.com>
Date: Mon, 29 Jan 2024 17:22:26 +0000
Subject: [PATCH 3/5] Reintroduce "Replace Vue.extend with defineComponent in
 LabeledInput.vue"

This reverts commit 50ed6e41f7c92b6a9c6351435a614b9d61d6fb4b.
---
 .../Form/LabeledInput/LabeledInput.vue        | 76 +++++++++++++------
 1 file changed, 53 insertions(+), 23 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
index 55f3ba7bb34..df38fca8acc 100644
--- a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
+++ b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -1,21 +1,27 @@
 <script lang="ts">
-import Vue, { VueConstructor } from 'vue';
-import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
+import { defineComponent } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
+import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useCompactInput } from '@shell/composables/useCompactInput';
 
-export default (
-  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
-).extend({
+declare module 'vue/types/vue' {
+  interface Vue {
+    onInput: (event: Event) => void | ((event: Event) => void);
+  }
+}
+
+export default defineComponent({
   components: { LabeledTooltip, TextAreaAutoGrow },
-  mixins:     [LabeledFormElement, CompactInput],
+
+  inheritAttrs: false,
 
   props: {
+    ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
      * @values text, cron, multiline, multiline-password
@@ -93,21 +99,36 @@ export default (
     },
   },
 
+  setup(props, { emit }) {
+    const {
+      focused,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField
+    } = useLabeledFormElement(props, emit);
+    const { isCompact } = useCompactInput(props);
+
+    return {
+      focused,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField,
+      isCompact,
+    };
+  },
+
   data() {
     return {
       updated:          false,
-      validationErrors: ''
+      validationErrors: '',
     };
   },
 
   computed: {
-    /**
-     * Determines if the Labeled Input @input event should be debounced.
-     */
-    onInput(): ((value: string) => void) | void {
-      return this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
-    },
-
     /**
      * Determines if the Labeled Input should display a label.
      */
@@ -122,7 +143,7 @@ export default (
       return !!this.tooltip || !!this.tooltipKey;
     },
 
-    tooltipValue(): string | undefined {
+    tooltipValue(): string | Record<string, unknown> | undefined {
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
       }
@@ -144,7 +165,7 @@ export default (
       if (this.type !== 'cron' || !this.value) {
         return;
       }
-      if (!isValidCron(this.value)) {
+      if (typeof this.value === 'string' && !isValidCron(this.value)) {
         return this.t('generic.invalidCron');
       }
       try {
@@ -173,15 +194,22 @@ export default (
     /**
      * The max length for the Labeled Input.
      */
-    _maxlength(): number | null {
+    _maxlength(): number | undefined {
       if (this.type === 'text' && this.maxlength) {
         return this.maxlength;
       }
 
-      return null;
+      return undefined;
     },
   },
 
+  created() {
+    /**
+     * Determines if the Labeled Input @input event should be debounced.
+    */
+    this.onInput = this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
+  },
+
   methods: {
     /**
      * Attempts to give the Labeled Input focus.
@@ -220,7 +248,9 @@ export default (
      * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
      * https://github.com/rancher/dashboard/issues/10249
      */
-    delayInput(value: string): void {
+    delayInput(val: string | Event): void {
+      const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
+
       this.$emit('input', value);
     },
 
@@ -237,7 +267,7 @@ export default (
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
-    onBlur(event: string): void {
+    onBlur(event: string | FocusEvent): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
     },
@@ -289,7 +319,7 @@ export default (
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput($event)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -306,7 +336,7 @@ export default (
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="onInput($event.target.value)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"

From 49123807b554bef7489d9b7ee82fc5752ac4de62 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <97888974+aalves08@users.noreply.github.com>
Date: Mon, 29 Jan 2024 11:56:22 +0000
Subject: [PATCH 4/5] Reintroduce "Write tests for `useCompactInput` and
 `useLabeledFormElement`"

This reverts commit 8eae0e78f97d6639ab2b5b2eb21cbb2be4e2fb2d.
---
 shell/composables/useCompactInput.test.ts     |  36 +++++
 shell/composables/useCompactInput.ts          |   4 +-
 .../composables/useLabeledFormElement.test.ts | 135 ++++++++++++++++++
 3 files changed, 173 insertions(+), 2 deletions(-)
 create mode 100644 shell/composables/useCompactInput.test.ts
 create mode 100644 shell/composables/useLabeledFormElement.test.ts

diff --git a/shell/composables/useCompactInput.test.ts b/shell/composables/useCompactInput.test.ts
new file mode 100644
index 00000000000..bb20063e467
--- /dev/null
+++ b/shell/composables/useCompactInput.test.ts
@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { useCompactInput } from './useCompactInput';
+
+describe('useCompactInput', () => {
+  it('should compute isCompact correctly when compact is explicitly set', () => {
+    const props = ref({
+      compact:  true,
+      label:    'Test Label',
+      labelKey: 'testLabel',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    expect(isCompact.value).toBe(true);
+
+    // When compact is explicitly set to false, isCompact should be false
+    props.value.compact = false;
+    expect(isCompact.value).toBe(false);
+  });
+
+  it('should compute isCompact correctly when compact is not explicitly set', () => {
+    const props = ref({
+      label:    '',
+      labelKey: '',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    // When there is no label and labelKey is also not present, isCompact should be true
+    expect(isCompact.value).toBe(true);
+
+    // When label is present, isCompact should be false
+    props.value.label = 'Updated Label';
+    expect(isCompact.value).toBe(false);
+  });
+});
diff --git a/shell/composables/useCompactInput.ts b/shell/composables/useCompactInput.ts
index ea9a0929fe5..609faed9ce0 100644
--- a/shell/composables/useCompactInput.ts
+++ b/shell/composables/useCompactInput.ts
@@ -1,7 +1,7 @@
 import { computed, ComputedRef } from 'vue';
 
 interface CompactInputProps {
-  compact?: boolean;
+  compact?: boolean | null;
   label?: string;
   labelKey?: string;
 }
@@ -13,7 +13,7 @@ interface UseCompactInput {
 export const useCompactInput = (props: CompactInputProps): UseCompactInput => {
   const isCompact = computed(() => {
     // Compact if explicitly set - otherwise compact if there is no label
-    return props.compact !== null ? !!props.compact : !(props.label || props.labelKey);
+    return (props.compact !== null && props.compact !== undefined) ? !!props.compact : !(props.label || props.labelKey);
   });
 
   return { isCompact };
diff --git a/shell/composables/useLabeledFormElement.test.ts b/shell/composables/useLabeledFormElement.test.ts
new file mode 100644
index 00000000000..57d110338a5
--- /dev/null
+++ b/shell/composables/useLabeledFormElement.test.ts
@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+import { useLabeledFormElement } from './useLabeledFormElement';
+
+describe('useLabeledFormElement', () => {
+  it('should set raised to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, raised } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(raised.value).toBe(true);
+
+    onBlurLabeled();
+    expect(raised.value).toBe(false);
+  });
+
+  it('should set focused to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, focused } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(focused.value).toBe(true);
+
+    onBlurLabeled();
+    expect(focused.value).toBe(false);
+  });
+
+  it('should set blurred to current timestamp when blurred', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onBlurLabeled, blurred } = useLabeledFormElement(props, emit);
+
+    onBlurLabeled();
+    expect(blurred.value).toBeTruthy();
+  });
+
+  it('should compute isDisabled correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { isDisabled } = useLabeledFormElement(props.value, emit);
+
+    expect(isDisabled.value).toBe(false);
+
+    props.value.disabled = true;
+    expect(isDisabled.value).toBe(true);
+
+    props.value.mode = 'view';
+    expect(isDisabled.value).toBe(true);
+  });
+
+  it('should compute validationMessage correctly for required field', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'This field is required' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('This field is required');
+  });
+
+  it('should compute validationMessage correctly for custom rules', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    'test',
+      required: false,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'Value must be at least 5 characters long' : undefined),
+        (value: string[]) => (value.includes('test') ? 'Value cannot contain the word "test"' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('Value must be at least 5 characters long, Value cannot contain the word "test"');
+  });
+
+  it('should compute requiredField correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { requiredField } = useLabeledFormElement(props.value, emit);
+
+    expect(requiredField.value).toBe(true);
+
+    // When the field is not required, requiredField should be false
+    props.value.required = false;
+    expect(requiredField.value).toBe(false);
+  });
+});

From 57e443074091eb046f0626d1545ed3b11feca884 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Mon, 11 Mar 2024 09:48:18 -0700
Subject: [PATCH 5/5] Use `defineComponent` in `AppModal.vue`

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/AppModal.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/shell/components/AppModal.vue b/shell/components/AppModal.vue
index 5bb8300e24e..42d1e7f32e3 100644
--- a/shell/components/AppModal.vue
+++ b/shell/components/AppModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name:         'AppModal',
   inheritAttrs: false,
   props:        {
@@ -151,7 +151,6 @@ export default Vue.extend({
       border-radius: var(--border-radius);
       max-height: 95vh;
       overflow: scroll;
-      max-height: 100vh;
       border: 2px solid var(--modal-border);
     }
   }