From bba3f812ac83de5956ad93b317788c45974bf9c7 Mon Sep 17 00:00:00 2001
From: "andy.lee" <andy.lee@suse.com>
Date: Fri, 20 Sep 2024 14:33:34 +0800
Subject: [PATCH 1/3] Port app-modal into harvester shell

Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit 85b311da38e6ea8a9c3041727de022014f7cf7d8)
---
 cypress/e2e/po/prompts/promptRemove.po.ts     |   2 +-
 jest.setup.js                                 |   3 +-
 package.json                                  |   1 -
 pkg/harvester/components/HarvesterUpgrade.vue |  13 +-
 .../novnc/NovncConsoleCustomKeys.vue          |  14 +-
 .../components/novnc/NovncConsoleWrapper.vue  |  10 +-
 .../dialog/HarvesterSupportBundle.vue         | 147 +++++++--------
 pkg/harvester/dialog/RestartVMDialog.vue      |  20 ++-
 .../harvesterhci.io.host/HarvesterSeeder.vue  |   6 +-
 .../AccessCredentialsUsers.vue                |   6 +-
 .../VirtualMachineCloudConfig/index.vue       |   8 +-
 .../VirtualMachineSSHKey.vue                  |   8 +-
 .../VirtualMachineVolume/index.vue            |  13 +-
 .../edit/kubevirt.io.virtualmachine/index.vue |  12 +-
 pkg/harvester/l10n/en-us.yaml                 |   2 +-
 shell/assets/styles/app.scss                  |   1 -
 shell/assets/styles/vendor/vue-js-modal.scss  |  16 --
 shell/components/AppModal.vue                 | 170 ++++++++++++++++++
 shell/components/AssignTo.vue                 |  11 +-
 shell/components/CommunityLinks.vue           |  15 +-
 shell/components/Dialog.vue                   |  10 +-
 shell/components/DisableAuthProviderModal.vue |  22 ++-
 shell/components/Inactivity.vue               |   6 +-
 shell/components/ModalWithCard.vue            |  13 +-
 shell/components/MoveModal.vue                |  71 ++++----
 shell/components/PromptChangePassword.vue     |  66 +++----
 shell/components/PromptModal.vue              |  36 ++--
 shell/components/PromptRemove.vue             |  38 ++--
 shell/components/PromptRestore.vue            |  35 ++--
 shell/components/ResourceCancelModal.vue      |  23 ++-
 shell/components/nav/Header.vue               |  30 ++--
 shell/initialize/index.js                     |   1 -
 shell/list/management.cattle.io.feature.vue   |  16 +-
 shell/package.json                            |   1 -
 .../CatalogList/CatalogLoadDialog.vue         |  18 +-
 .../uiplugins/DeveloperInstallDialog.vue      |  13 +-
 .../c/_cluster/uiplugins/InstallDialog.vue    |  13 +-
 .../c/_cluster/uiplugins/RemoveUIPlugins.vue  |   5 +-
 .../c/_cluster/uiplugins/SetupUIPlugins.vue   |   6 +-
 .../c/_cluster/uiplugins/UninstallDialog.vue  |  14 +-
 shell/plugins/vue-js-modal.js                 |   4 -
 shell/public/index.html                       |   1 +
 .../stories/components/AppModal.stories.mdx   |  49 +++++
 yarn.lock                                     |   5 -
 44 files changed, 628 insertions(+), 346 deletions(-)
 delete mode 100644 shell/assets/styles/vendor/vue-js-modal.scss
 create mode 100644 shell/components/AppModal.vue
 delete mode 100644 shell/plugins/vue-js-modal.js
 create mode 100644 storybook/stories/components/AppModal.stories.mdx

diff --git a/cypress/e2e/po/prompts/promptRemove.po.ts b/cypress/e2e/po/prompts/promptRemove.po.ts
index d4c44045abc..ff5fe1b3dc8 100644
--- a/cypress/e2e/po/prompts/promptRemove.po.ts
+++ b/cypress/e2e/po/prompts/promptRemove.po.ts
@@ -3,7 +3,7 @@ import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
 
 export default class PromptRemove extends ComponentPo {
   constructor() {
-    super(cy.get('main > .remove-modal'));
+    super(cy.get('body > #modals > .vue-portal-target > .modal-overlay > .remove-modal'));
   }
 
   confirmField() {
diff --git a/jest.setup.js b/jest.setup.js
index 1f686b4341e..21a6fc1f363 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,13 +1,12 @@
 import { config } from '@vue/test-utils';
 import { directiveSsr as t } from '@shell/plugins/i18n';
 import VTooltip from 'v-tooltip';
-import VModal from 'vue-js-modal';
 import vSelect from 'vue-select';
 
 import Vue from 'vue';
 
 Vue.config.productionTip = false;
-Vue.use(VTooltip).use(VModal);
+Vue.use(VTooltip);
 Vue.component('v-select', vSelect);
 
 /**
diff --git a/package.json b/package.json
index 89baadf1633..bc5fef76fcb 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,6 @@
     "v-tooltip": "2.0.3",
     "vue-client-only": "2.1.0",
     "vue-codemirror": "4.0.6",
-    "vue-js-modal": "1.3.35",
     "vue-meta": "2.4.0",
     "vue-no-ssr": "1.1.1",
     "vue-resize": "0.4.5",
diff --git a/pkg/harvester/components/HarvesterUpgrade.vue b/pkg/harvester/components/HarvesterUpgrade.vue
index 7f174648ae6..9996a6e1dc8 100644
--- a/pkg/harvester/components/HarvesterUpgrade.vue
+++ b/pkg/harvester/components/HarvesterUpgrade.vue
@@ -34,7 +34,8 @@ export default {
       selectMode:       true,
       version:          '',
       enableLogging:    true,
-      readyReleaseNote: false
+      readyReleaseNote: false,
+      showModal:        false,
     };
   },
 
@@ -121,12 +122,12 @@ export default {
     },
 
     cancel() {
-      this.$refs.deleteTip.hide();
+      this.showModal = false;
       this.errors = '';
     },
 
     open() {
-      this.$refs.deleteTip.open();
+      this.showModal = true;
     },
   }
 };
@@ -151,7 +152,11 @@ export default {
       </button>
     </header>
 
-    <ModalWithCard ref="deleteTip" name="deleteTip" :width="850">
+    <ModalWithCard
+      v-if="showModal"
+      name="deleteTip"
+      :width="850"
+    >
       <template #title>
         <t k="harvester.upgradePage.upgradeApp" />
       </template>
diff --git a/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue b/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
index ae393537388..94cadd99c76 100644
--- a/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
+++ b/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
@@ -7,6 +7,7 @@ import ModalWithCard from '@shell/components/ModalWithCard';
 const PREFERED_SHORTCUT_KEYS = 'prefered-shortcut-keys';
 
 export default {
+  name:       'NovncConsoleCustomKeys',
   components: {
     ModalWithCard, Banner, AsyncButton
   },
@@ -100,9 +101,11 @@ export default {
   },
 
   methods: {
-    show() {
-      this.$refs.recordShortcutKeys.open();
-    },
+    // show() {
+    //   // console.log('🚀 ~ NoVNCconsoleCustomKeys ~ show:');
+    //   // this.showModal = true;
+    //   // this.$refs.recordShortcutKeys.open();
+    // },
 
     closeRecordingModal() {
       window.removeEventListener('keydown', this.handleShortcut);
@@ -170,7 +173,10 @@ export default {
 </script>
 
 <template>
-  <ModalWithCard ref="recordShortcutKeys" name="recordShortcutKeys" :width="550">
+  <ModalWithCard
+    name="recordShortcutKeys"
+    :width="550"
+  >
     <template #title>
       <t k="harvester.virtualMachine.detail.console.customShortcutKeys" />
     </template>
diff --git a/pkg/harvester/components/novnc/NovncConsoleWrapper.vue b/pkg/harvester/components/novnc/NovncConsoleWrapper.vue
index 668a07f64bc..ee4f70abc17 100644
--- a/pkg/harvester/components/novnc/NovncConsoleWrapper.vue
+++ b/pkg/harvester/components/novnc/NovncConsoleWrapper.vue
@@ -104,6 +104,7 @@ const F_KEYS = {
 };
 
 export default {
+  name:       'NovncConsoleWrapper',
   components: {
     NovncConsole, NovncConsoleItem, NovncConsoleCustomKeys
   },
@@ -261,9 +262,6 @@ export default {
 
     showKeysModal() {
       this.renderKeysModal = true;
-      this.$nextTick(() => {
-        this.$refs.keysModal.show();
-      });
     },
 
     hideKeysModal() {
@@ -325,7 +323,11 @@ export default {
           </template>
         </v-popover>
 
-        <NovncConsoleCustomKeys v-if="renderKeysModal" ref="keysModal" :current-user="currentUser" @close="hideKeysModal" />
+        <NovncConsoleCustomKeys
+          v-if="renderKeysModal"
+          :current-user="currentUser"
+          @close="hideKeysModal"
+        />
       </div>
       <NovncConsole v-if="url && !isDown" ref="novncConsole" :url="url" />
       <p v-if="isDown">
diff --git a/pkg/harvester/dialog/HarvesterSupportBundle.vue b/pkg/harvester/dialog/HarvesterSupportBundle.vue
index 29b226d072e..af905c80e54 100644
--- a/pkg/harvester/dialog/HarvesterSupportBundle.vue
+++ b/pkg/harvester/dialog/HarvesterSupportBundle.vue
@@ -6,6 +6,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import AsyncButton from '@shell/components/AsyncButton';
 import GraphCircle from '@shell/components/graph/Circle';
 import { Banner } from '@components/Banner';
+import AppModal from '@shell/components/AppModal';
 
 export default {
   name: 'SupportBundle',
@@ -15,6 +16,7 @@ export default {
     GraphCircle,
     AsyncButton,
     Banner,
+    AppModal
   },
 
   data() {
@@ -22,6 +24,7 @@ export default {
       url:         '',
       description: '',
       errors:      [],
+      showModal:   false
     };
   },
 
@@ -44,10 +47,10 @@ export default {
       handler(show) {
         if (show) {
           this.$nextTick(() => {
-            this.$modal.show('bundle-modal');
+            this.showModal = true;
           });
         } else {
-          this.$modal.hide('bundle-modal');
+          this.showModal = false;
           this.url = '';
           this.description = '';
         }
@@ -60,6 +63,7 @@ export default {
     stringify,
 
     close() {
+      this.showModal = false;
       this.$store.commit('harvester-common/toggleBundleModal', false);
       this.backUpName = '';
     },
@@ -102,82 +106,83 @@ export default {
 </script>
 
 <template>
-  <div class="bundleModal">
-    <modal
-      name="bundle-modal"
-      :click-to-close="false"
-      :width="550"
-      :height="390"
-      class="remove-modal support-modal"
-    >
-      <div class="p-20">
-        <h2>
-          {{ t('harvester.modal.bundle.title') }}
-        </h2>
-
-        <div
-          v-if="!bundlePending"
-          class="content"
-        >
-          <LabeledInput
-            v-model="url"
-            :label="t('harvester.modal.bundle.url')"
-            class="mb-20"
-          />
+  <app-modal
+    v-if="showModal"
+    custom-class="bundleModal"
+    name="bundle-modal andy"
+    :click-to-close="false"
+    :width="550"
+    :height="390"
+    class="remove-modal support-modal"
+    @close="close"
+  >
+    <div class="p-20">
+      <h2>
+        {{ t('harvester.modal.bundle.title') }}
+      </h2>
+
+      <div
+        v-if="!bundlePending"
+        class="content"
+      >
+        <LabeledInput
+          v-model="url"
+          :label="t('harvester.modal.bundle.url')"
+          class="mb-20"
+        />
+
+        <LabeledInput
+          v-model="description"
+          :label="t('harvester.modal.bundle.description')"
+          type="multiline"
+          :min-height="120"
+          required
+        />
+      </div>
 
-          <LabeledInput
-            v-model="description"
-            :label="t('harvester.modal.bundle.description')"
-            type="multiline"
-            :min-height="120"
-            required
+      <div
+        v-else
+        class="content"
+      >
+        <div class="circle">
+          <GraphCircle
+            primary-stroke-color="green"
+            secondary-stroke-color="white"
+            :stroke-width="6"
+            :percentage="percentage"
+            :show-text="true"
           />
         </div>
+      </div>
 
-        <div
-          v-else
-          class="content"
-        >
-          <div class="circle">
-            <GraphCircle
-              primary-stroke-color="green"
-              secondary-stroke-color="white"
-              :stroke-width="6"
-              :percentage="percentage"
-              :show-text="true"
-            />
-          </div>
-        </div>
+      <div
+        v-for="(err, idx) in errors"
+        :key="idx"
+      >
+        <Banner
+          color="error"
+          :label="stringify(err)"
+        />
+      </div>
 
-        <div
-          v-for="(err, idx) in errors"
-          :key="idx"
+      <div class="footer mt-20">
+        <button
+          class="btn btn-sm role-secondary mr-10"
+          @click="close"
         >
-          <Banner
-            color="error"
-            :label="stringify(err)"
-          />
-        </div>
-
-        <div class="footer mt-20">
-          <button
-            class="btn btn-sm role-secondary mr-10"
-            @click="close"
-          >
-            {{ t('generic.close') }}
-          </button>
-
-          <AsyncButton
-            type="submit"
-            mode="generate"
-            class="btn btn-sm bg-primary"
-            :disabled="bundlePending"
-            @click="save"
-          />
-        </div>
+          {{ t('generic.close') }}
+        </button>
+
+        <AsyncButton
+          type="submit"
+          mode="generate"
+          class="btn btn-sm bg-primary"
+          :disabled="bundlePending"
+          @click="save"
+        />
       </div>
-    </modal>
-  </div>
+    </div>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/pkg/harvester/dialog/RestartVMDialog.vue b/pkg/harvester/dialog/RestartVMDialog.vue
index 4268e3848de..1f4ee8d0b35 100644
--- a/pkg/harvester/dialog/RestartVMDialog.vue
+++ b/pkg/harvester/dialog/RestartVMDialog.vue
@@ -1,14 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
+
 export default {
   components: {
     Card,
     AsyncButton,
     Banner,
+    AppModal
   },
   props: {
     vm: {
@@ -17,11 +20,19 @@ export default {
     },
   },
   data() {
-    return { errors: [], resolve: null };
+    return {
+      errors:  [],
+      resolve: null,
+      isOpen:  false
+    };
   },
   computed: { ...mapGetters({ t: 'i18n/t' }) },
   methods:  {
+    open() {
+      this.isOpen = true;
+    },
     close() {
+      this.isOpen = false;
       this.resolve();
       this.$emit('close');
     },
@@ -42,13 +53,14 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="isOpen"
     class="restart-modal"
     name="restartDialog"
     :width="600"
     height="auto"
     :click-to-close="false"
-    @closed="close"
+    @close="close"
   >
     <Card class="prompt-restart" :show-highlight-border="false">
       <h4 slot="title" v-clean-html="t('harvester.modal.restart.title')" class="text-default-text" />
@@ -74,7 +86,7 @@ export default {
         </div>
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 <style lang='scss' scoped>
   .restart-modal {
diff --git a/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue b/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue
index 5ad90021cbd..f995d1a79a0 100644
--- a/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue
+++ b/pkg/harvester/edit/harvesterhci.io.host/HarvesterSeeder.vue
@@ -57,6 +57,7 @@ export default {
       secret:            {},
       errors:            [],
       newSecretSelected: false,
+      showModal:         false,
     };
   },
 
@@ -185,11 +186,11 @@ export default {
     },
 
     show() {
-      this.$modal.show('secretModal');
+      this.showModal = true;
     },
 
     hide() {
-      this.$modal.hide('secretModal');
+      this.showModal = false;
       this.newSecretSelected = false;
     },
 
@@ -330,6 +331,7 @@ export default {
       </div>
 
       <ModalWithCard
+        v-if="showModal"
         ref="secretModal"
         width="80%"
         :errors="errors"
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue
index d53d28bf99e..56062c35d17 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue
@@ -60,6 +60,7 @@ export default {
       newUsername:  '',
       randomStr:    randomStr(5).toLowerCase(),
       errors:       [],
+      showModal:    false
     };
   },
 
@@ -121,11 +122,11 @@ export default {
     },
 
     show() {
-      this.$modal.show(this.randomStr);
+      this.showModal = true;
     },
 
     hide() {
-      this.$modal.hide(this.randomStr);
+      this.showModal = false;
     },
 
     cancel() {
@@ -153,6 +154,7 @@ export default {
     />
 
     <ModalWithCard
+      v-if="showModal"
       :ref="randomStr"
       :name="randomStr"
       width="40%"
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue
index fac58b8bc3e..cf318c1b51d 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue
@@ -49,7 +49,8 @@ export default {
       configUserId:      '',
       configNetworkId:   '',
       optionUser:        [],
-      optionNetwork:     []
+      optionNetwork:     [],
+      showModal:         false
     };
   },
 
@@ -128,7 +129,7 @@ export default {
 
     show(templateType) {
       this.templateType = templateType;
-      this.$modal.show('createCloudTemplate');
+      this.showModal = true;
     },
 
     async save(buttonCb) {
@@ -179,7 +180,7 @@ export default {
       this.cloudTemplate = '';
       this.cloudTemplateName = '';
       this.$set(this, 'errors', []);
-      this.$modal.hide('createCloudTemplate');
+      this.showModal = false;
     },
 
     refresh() {
@@ -226,6 +227,7 @@ export default {
     </div>
 
     <ModalWithCard
+      v-if="showModal"
       ref="createCloudTemplate"
       name="createCloudTemplate"
       width="40%"
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue
index d3131b51e14..4f79832c354 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue
@@ -68,7 +68,8 @@ export default {
       randomStr:  randomStr(5).toLowerCase(),
       errors:     [],
       isAll:      false,
-      checkAll:   false
+      checkAll:   false,
+      showModal:  false
     };
   },
 
@@ -134,11 +135,11 @@ export default {
 
   methods: {
     show() {
-      this.$modal.show(this.randomStr);
+      this.showModal = true;
     },
 
     hide() {
-      this.$modal.hide(this.randomStr);
+      this.showModal = false;
     },
 
     async createNamespaceIfNeeded() {
@@ -250,6 +251,7 @@ export default {
     />
 
     <ModalWithCard
+      v-if="showModal"
       :ref="randomStr"
       :name="randomStr"
       width="40%"
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index b507c8c1231..e94d4cd065a 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -83,7 +83,8 @@ export default {
       SOURCE_TYPE,
       rows:    clone(this.value),
       nameIdx: 1,
-      vol:     null
+      vol:     null,
+      isOpen:  false
     };
   },
 
@@ -195,7 +196,7 @@ export default {
     removeVolume(vol) {
       this.vol = vol;
       if (!vol.newCreateId && this.isEdit && this.isVirtualType) {
-        this.$refs.deleteTip.open();
+        this.isOpen = true;
       } else {
         removeObject(this.rows, vol);
         this.update();
@@ -241,7 +242,7 @@ export default {
     },
 
     cancel() {
-      this.$refs.deleteTip.hide();
+      this.isOpen = false;
     },
 
     changeSort(idx, type) {
@@ -360,7 +361,11 @@ export default {
       </button>
     </div>
 
-    <ModalWithCard ref="deleteTip" name="deleteTip" :width="400">
+    <ModalWithCard
+      v-if="isOpen"
+      name="deleteTip"
+      :width="400"
+    >
       <template #title>
         {{ t('harvester.virtualMachine.volume.unmount.title') }}
       </template>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
index f15aeb2746d..85a7f5ef20e 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -98,6 +98,7 @@ export default {
       useTemplate:       false,
       hostname,
       isRestartImmediately,
+      // isOpen:            false,
     };
   },
 
@@ -409,8 +410,10 @@ export default {
       }
 
       return new Promise((resolve) => {
-        this.$modal.show('restartDialog');
-        this.$refs.restartDialog.resolve = resolve;
+        if (this.$refs.restartDialog) {
+          this.$refs.restartDialog.open();
+          this.$refs.restartDialog.resolve = resolve;
+        }
       });
     },
 
@@ -811,7 +814,10 @@ export default {
       </Tab>
     </Tabbed>
 
-    <RestartVMDialog ref="restartDialog" :vm="value" />
+    <RestartVMDialog
+      ref="restartDialog"
+      :vm="value"
+    />
   </CruResource>
 </template>
 
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index 603bfda1056..bb9c9188a54 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -171,7 +171,7 @@ harvester:
     cancelExpand: Cancel Expand
     snapshot: Take Snapshot
     pvcClone: Clone Volume
-    vmSnapshot: Take Virtual Machine Snapshot
+    vmSnapshot: Take Snapshot
     shutdown: Shut Down
     powerOn: Power On
     reboot: Reboot
diff --git a/shell/assets/styles/app.scss b/shell/assets/styles/app.scss
index 135a7f76975..68db64e0593 100644
--- a/shell/assets/styles/app.scss
+++ b/shell/assets/styles/app.scss
@@ -31,6 +31,5 @@
 @import "./global/layout";
 
 @import "./vendor/vue-select";
-@import "./vendor/vue-js-modal";
 @import "./vendor/code-mirror";
 @import 'node_modules/xterm/css/xterm.css';
\ No newline at end of file
diff --git a/shell/assets/styles/vendor/vue-js-modal.scss b/shell/assets/styles/vendor/vue-js-modal.scss
deleted file mode 100644
index 8868b3859d0..00000000000
--- a/shell/assets/styles/vendor/vue-js-modal.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import 'node_modules/vue-js-modal/dist/styles.css';
-
-.v--modal-overlay {
-  background-color: var(--overlay-bg);
-  z-index: z-index('modalOverlay');
-
-  .v--modal-box {
-    overflow-y: auto;
-  }
-}
-
-.v--modal {
-  background-color: var(--modal-bg) !important;
-  box-shadow: none;
-  border: 2px solid var(--modal-border);
-}
\ No newline at end of file
diff --git a/shell/components/AppModal.vue b/shell/components/AppModal.vue
new file mode 100644
index 00000000000..b820ee10949
--- /dev/null
+++ b/shell/components/AppModal.vue
@@ -0,0 +1,170 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'AppModal',
+
+  // emits: ['close'],
+
+  inheritAttrs: false,
+  props:        {
+    /**
+     * If set to false, it will not be possible to close modal by clicking on
+     * the background or by pressing Esc key.
+     */
+    clickToClose: {
+      type:    Boolean,
+      default: true,
+    },
+    /**
+     * Width in pixels or percents (50, "50px", "50%").
+     *
+     * Supported string values are <number>% and <number>px
+     */
+    width: {
+      type:    [Number, String],
+      default: 600,
+      validator(value) {
+        if (typeof value === 'number') {
+          return value > 0;
+        }
+
+        if (typeof value === 'string') {
+          return /^(0*(?:[1-9][0-9]*|0)\.?\d*)+(px|%)$/.test(value);
+        }
+
+        return false;
+      }
+    },
+    /**
+     * List of class that will be applied to the modal window
+     */
+    customClass: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * Style that will be applied to the modal window
+     */
+    styles: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * Name of the modal
+     */
+    name: {
+      type:    String,
+      default: '',
+    }
+  },
+  computed: {
+    modalWidth(): string {
+      const uom = typeof (this.width) === 'number' ? 'px' : '';
+
+      return `${ this.width }${ uom }`;
+    },
+    stylesPropToObj(): object {
+      return this.styles.split(';')
+        .map(line => line.trim().split(':'))
+        .reduce((lines, [key, val]) => {
+          return {
+            ...lines,
+            [key]: val
+          };
+        }, { });
+    },
+    modalStyles(): object {
+      return {
+        width: this.modalWidth,
+        ...this.stylesPropToObj,
+      };
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleEscapeKey);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleEscapeKey);
+  },
+  methods: {
+    handleClickOutside(event: MouseEvent) {
+      if (
+        this.clickToClose &&
+        this.$refs.modalRef &&
+        !(this.$refs.modalRef as HTMLElement).contains(event.target as Node)
+      ) {
+        this.$emit('close');
+      }
+    },
+    handleEscapeKey(event: KeyboardEvent) {
+      if (this.clickToClose && event.key === 'Escape') {
+        this.$emit('close');
+      }
+    }
+  }
+});
+</script>
+
+<template>
+  <mounting-portal
+    mountTo="#modals"
+    name="source"
+    append
+  >
+    <transition
+      name="modal-fade"
+      appear
+    >
+      <div
+        class="modal-overlay"
+        :data-modal="name"
+        @click="handleClickOutside"
+      >
+        <div
+          v-bind="$attrs"
+          ref="modalRef"
+          :class="customClass"
+          class="modal-container"
+          :style="modalStyles"
+          @click.stop
+        >
+          <slot><!--Empty content--></slot>
+        </div>
+      </div>
+    </transition>
+  </mounting-portal>
+</template>
+
+<style lang="scss">
+  .modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--overlay-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 20;
+
+    .modal-container {
+      background-color: var(--modal-bg);
+      border-radius: var(--border-radius);
+      max-height: 95vh;
+      overflow: auto;
+      border: 2px solid var(--modal-border);
+    }
+  }
+
+  .modal-fade-enter-active,
+  .modal-fade-leave-active {
+    transition: opacity 200ms;
+  }
+
+  .modal-fade-enter,
+  .modal-fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/shell/components/AssignTo.vue b/shell/components/AssignTo.vue
index 7165fd2a903..dfb137ffe38 100644
--- a/shell/components/AssignTo.vue
+++ b/shell/components/AssignTo.vue
@@ -25,6 +25,7 @@ export default {
       moveTo:        this.workspace,
       loaded:        false,
       allWorkspaces: [],
+      showModal:     false
     };
   },
 
@@ -51,9 +52,9 @@ export default {
         this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
         this.moveTo = this.workspace;
         this.loaded = true;
-        this.$modal.show('assignTo');
+        this.showModal = true;
       } else {
-        this.$modal.hide('assignTo');
+        this.showModal = false;
       }
     }
   },
@@ -105,12 +106,14 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     class="assign-modal"
     name="assignTo"
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    @close="close"
   >
     <Card
       v-if="loaded"
@@ -165,7 +168,7 @@ export default {
         />
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
diff --git a/shell/components/CommunityLinks.vue b/shell/components/CommunityLinks.vue
index 19dad03bfc7..c098e944b9e 100644
--- a/shell/components/CommunityLinks.vue
+++ b/shell/components/CommunityLinks.vue
@@ -1,5 +1,6 @@
 <script>
 import SimpleBox from '@shell/components/SimpleBox';
+import AppModal from '@shell/components/AppModal.vue';
 import Closeable from '@shell/mixins/closeable';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -10,7 +11,7 @@ import { fetchLinks } from '@shell/config/home-links';
 export default {
   name: 'CommunityLinks',
 
-  components: { SimpleBox },
+  components: { SimpleBox, AppModal },
 
   props: {
     linkOptions: {
@@ -32,7 +33,7 @@ export default {
   },
 
   data() {
-    return { links: {} };
+    return { links: {}, showWeChatModal: false };
   },
 
   computed: {
@@ -80,10 +81,10 @@ export default {
   },
   methods: {
     show() {
-      this.$modal.show('wechat-modal');
+      this.showWeChatModal = true;
     },
     close() {
-      this.$modal.hide('wechat-modal');
+      this.showWeChatModal = false;
     }
   },
 };
@@ -131,10 +132,12 @@ export default {
         </a>
       </div>
     </SimpleBox>
-    <modal
+    <app-modal
+      v-if="showWeChatModal"
       name="wechat-modal"
       height="auto"
       :width="640"
+      @close="close"
     >
       <div class="wechat-modal">
         <h1>{{ t('footer.wechat.modalText') }}</h1>
@@ -148,7 +151,7 @@ export default {
           </button>
         </div>
       </div>
-    </modal>
+    </app-modal>
   </div>
 </template>
 
diff --git a/shell/components/Dialog.vue b/shell/components/Dialog.vue
index 645057c3608..53dad2e5f83 100644
--- a/shell/components/Dialog.vue
+++ b/shell/components/Dialog.vue
@@ -1,8 +1,9 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
-  components: { AsyncButton },
+  components: { AsyncButton, AppModal },
 
   props: {
     name: {
@@ -43,7 +44,6 @@ export default {
 
     closeDialog(result) {
       if (!this.closed) {
-        this.$modal.hide(this.name);
         this.$emit('closed', result);
         this.closed = true;
       }
@@ -53,12 +53,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
     :name="name"
     height="auto"
     :scrollable="true"
-    @closed="closeDialog(false)"
     @before-open="beforeOpen"
+    @close="closeDialog(false)"
   >
     <div class="modal-dialog">
       <h4>
@@ -90,7 +90,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/shell/components/DisableAuthProviderModal.vue b/shell/components/DisableAuthProviderModal.vue
index 7af8bf49076..00fccb85d02 100644
--- a/shell/components/DisableAuthProviderModal.vue
+++ b/shell/components/DisableAuthProviderModal.vue
@@ -1,8 +1,10 @@
 <script>
 import { Card } from '@components/Card';
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
   name:       'PromptRemove',
-  components: { Card },
+  components: { Card, AppModal },
   props:      {
     /**
      * Inherited global identifier prefix for tests
@@ -13,15 +15,18 @@ export default {
       default: 'disable-auth-provider'
     }
   },
+  data() {
+    return { showModal: false };
+  },
   methods: {
     show() {
-      this.$modal.show('disableAuthProviderModal');
+      this.showModal = true;
     },
     close() {
-      this.$modal.hide('disableAuthProviderModal');
+      this.showModal = false;
     },
     disable() {
-      this.$modal.hide('disableAuthProviderModal');
+      this.showModal = false;
       this.$emit('disable');
     },
   }
@@ -29,13 +34,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="remove-modal"
+  <app-modal
+    v-if="showModal"
+    custom-class="remove-modal"
     name="disableAuthProviderModal"
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    @closed="close"
+    @close="close"
   >
     <Card
       class="disable-auth-provider"
@@ -69,7 +75,7 @@ export default {
         </button>
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
diff --git a/shell/components/Inactivity.vue b/shell/components/Inactivity.vue
index be8ade2c461..c543d4657bf 100644
--- a/shell/components/Inactivity.vue
+++ b/shell/components/Inactivity.vue
@@ -78,8 +78,6 @@ export default {
         if (now >= endTime) {
           this.isOpen = true;
           this.startCountdown();
-
-          this.$modal.show('inactivityModal');
         } else {
           this.inactivityTimeoutId = setTimeout(checkInactivityTimer, 1000);
         }
@@ -125,8 +123,6 @@ export default {
       this.isOpen = false;
       this.courtesyCountdown = this.courtesyTimer;
       this.clearAllTimeouts();
-
-      this.$modal.hide('inactivityModal');
     },
 
     refresh() {
@@ -169,10 +165,10 @@ export default {
 
 <template>
   <ModalWithCard
+    v-if="isOpen"
     ref="inactivityModal"
     name="inactivityModal"
     save-text="Continue"
-    :v-if="isOpen"
     @finish="resume"
   >
     <template #title>
diff --git a/shell/components/ModalWithCard.vue b/shell/components/ModalWithCard.vue
index 0ddef8a4f97..c273094afb6 100644
--- a/shell/components/ModalWithCard.vue
+++ b/shell/components/ModalWithCard.vue
@@ -2,12 +2,13 @@
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   name: 'ModalWithCard',
 
   components: {
-    Card, Banner, AsyncButton
+    Card, Banner, AsyncButton, AppModal
   },
 
   props: {
@@ -46,20 +47,15 @@ export default {
 
   methods: {
     hide() {
-      this.$modal.hide(this.name);
       this.$emit('close');
     },
-
-    open() {
-      this.$modal.show(this.name);
-    },
   }
 };
 
 </script>
 
 <template>
-  <modal
+  <app-modal
     :name="name"
     :width="width"
     :click-to-close="false"
@@ -67,6 +63,7 @@ export default {
     v-bind="$attrs"
     class="modal"
     data-testid="mvc__card"
+    @close="$emit('finish', $event)"
   >
     <Card
       class="modal"
@@ -114,7 +111,7 @@ export default {
         </slot>
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/shell/components/MoveModal.vue b/shell/components/MoveModal.vue
index 695d7ef827e..23fe5e44964 100644
--- a/shell/components/MoveModal.vue
+++ b/shell/components/MoveModal.vue
@@ -2,6 +2,7 @@
 import { mapState, mapGetters } from 'vuex';
 import { Card } from '@components/Card';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { MANAGEMENT } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
@@ -9,7 +10,7 @@ import { PROJECT } from '@shell/config/labels-annotations';
 
 export default {
   components: {
-    AsyncButton, Card, LabeledSelect, Loading
+    AsyncButton, Card, LabeledSelect, Loading, AppModal
   },
 
   async fetch() {
@@ -18,7 +19,10 @@ export default {
 
   data() {
     return {
-      modalName: 'move-modal', projects: [], targetProject: null
+      modalName:     'move-modal',
+      projects:      [],
+      targetProject: null,
+      showModal:     false
     };
   },
 
@@ -47,9 +51,9 @@ export default {
   watch: {
     showPromptMove(show) {
       if (show) {
-        this.$modal.show(this.modalName);
+        this.showModal = true;
       } else {
-        this.$modal.hide(this.modalName);
+        this.showModal = false;
       }
     }
   },
@@ -84,22 +88,23 @@ export default {
 };
 </script>
 <template>
-  <modal
-    class="move-modal"
-    :name="modalName"
-    :width="440"
-    height="auto"
-    @closed="close"
+  <app-modal
+    v-if="showModal"
+    class="move-modal"
+    :name="modalName"
+    :width="440"
+    height="auto"
+    @close="close"
   >
     <Loading v-if="$fetchState.pending" />
-    <Card
-      v-else
-      class="move-modal-card"
-      :show-highlight-border="false"
+    <Card
+      v-else
+      class="move-modal-card"
+      :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        class="text-default-text"
+      <h4
+        slot="title"
+        class="text-default-text"
       >
         {{ t('moveModal.title') }}
       </h4>
@@ -107,36 +112,36 @@ export default {
         <div>
           {{ t('moveModal.description') }}
           <ul class="namespaces">
-            <li
-              v-for="namespace in toMove"
-              :key="namespace.id"
+            <li
+              v-for="namespace in toMove"
+              :key="namespace.id"
             >
               {{ namespace.nameDisplay }}
             </li>
           </ul>
         </div>
-        <LabeledSelect
-          v-model="targetProject"
-          :options="projectOptions"
-          :label="t('moveModal.targetProject')"
+        <LabeledSelect
+          v-model="targetProject"
+          :options="projectOptions"
+          :label="t('moveModal.targetProject')"
         />
       </div>
       <template #actions>
-        <button
-          class="btn role-secondary"
-          @click="close"
+        <button
+          class="btn role-secondary"
+          @click="close"
         >
           {{ t('generic.cancel') }}
         </button>
-        <AsyncButton
-          :action-label="t('moveModal.moveButtonLabel')"
-          class="btn bg-primary ml-10"
-          :disabled="!targetProject"
-          @click="move"
+        <AsyncButton
+          :action-label="t('moveModal.moveButtonLabel')"
+          class="btn bg-primary ml-10"
+          :disabled="!targetProject"
+          @click="move"
         />
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
diff --git a/shell/components/PromptChangePassword.vue b/shell/components/PromptChangePassword.vue
index 46ece26ce56..d7259a75157 100644
--- a/shell/components/PromptChangePassword.vue
+++ b/shell/components/PromptChangePassword.vue
@@ -3,21 +3,24 @@ import { mapGetters } from 'vuex';
 import ChangePassword from '@shell/components/form/ChangePassword';
 import { Card } from '@components/Card';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   components: {
-    Card, AsyncButton, ChangePassword
+    Card, AsyncButton, ChangePassword, AppModal
   },
   data() {
-    return { valid: false, password: '' };
+    return {
+      valid: false, password: '', showModal: false
+    };
   },
   computed: { ...mapGetters({ t: 'i18n/t' }) },
   methods:  {
     show(show) {
       if (show) {
-        this.$modal.show('password-modal');
+        this.showModal = true;
       } else {
-        this.$modal.hide('password-modal');
+        this.showModal = false;
       }
     },
     async submit(buttonCb) {
@@ -34,11 +37,13 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="change-password-modal"
+  <app-modal
+    v-if="showModal"
+    custom-class="change-password-modal"
     name="password-modal"
     :width="500"
     :height="465"
+    @close="show(false)"
   >
     <Card
       class="prompt-password"
@@ -78,42 +83,37 @@ export default {
         />
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
-    .change-password-modal {
-      ::v-deep .v--modal {
-        display: flex;
+  .prompt-password {
+    ::v-deep .card-wrap {
+      display: flex;
+      flex-direction: column;
 
-        .card-wrap {
+      .card-body {
+        flex: 1;
+        justify-content: start;
+        & > div {
+          flex: 1;
           display: flex;
-          flex-direction: column;
-
-          .card-body {
-            flex: 1;
-            justify-content: start;
-            & > div {
-              flex: 1;
-              display: flex;
-            }
-          }
-
-          .card-actions {
-            display: flex;
-            justify-content: flex-end;
-            width: 100%;
-          }
         }
       }
-    }
 
-    .prompt-password {
-      flex: 1;
-      display: flex;
-      form {
-        flex: 1;
+      .card-actions {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
       }
     }
+  }
 
+  .prompt-password {
+    flex: 1;
+    display: flex;
+    form {
+      flex: 1;
+    }
+  }
 </style>
diff --git a/shell/components/PromptModal.vue b/shell/components/PromptModal.vue
index e8ce71ebe3d..e23358d9591 100644
--- a/shell/components/PromptModal.vue
+++ b/shell/components/PromptModal.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState } from 'vuex';
 import { isArray } from '@shell/utils/array';
+import AppModal from '@shell/components/AppModal.vue';
 
 /**
  * @name PromptModal
@@ -9,6 +10,8 @@ import { isArray } from '@shell/utils/array';
 export default {
   name: 'PromptModal',
 
+  components: { AppModal },
+
   data() {
     return { opened: false, backgroundClosing: null };
   },
@@ -42,18 +45,15 @@ export default {
       const isSticky = !!this.modalData?.modalSticky;
 
       return !isSticky ? '' : 'display: flex; flex-direction: column; ';
+    },
+    closeOnClickOutside() {
+      return this.modalData?.closeOnClickOutside;
     }
   },
 
   watch: {
     showModal(show) {
-      if (show) {
-        this.opened = true;
-        this.$modal.show('promptModal');
-      } else {
-        this.opened = false;
-        this.$modal.hide('promptModal');
-      }
+      this.opened = show;
     },
   },
 
@@ -68,6 +68,8 @@ export default {
       if (this.backgroundClosing) {
         this.backgroundClosing();
       }
+
+      this.opened = false;
     },
 
     // We're using register instead of just making use of $refs because the $refs is always undefined when referencing the component
@@ -79,23 +81,20 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="promptModal-modal"
-    name="promptModal"
-    :styles="`background-color: var(--nav-bg); border-radius: var(--border-radius); ${stickyProps} max-height: 95vh; ${cssProps}`"
-    height="auto"
-    :scrollable="true"
-    @closed="close()"
+  <app-modal
+    v-if="opened && component"
+    :click-to-close="closeOnClickOutside"
+    :width="modalWidth"
+    @close="close()"
   >
     <component
       v-bind="modalData.componentProps || {}"
       :is="component"
-      v-if="opened && component"
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
       @close="close()"
     />
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
@@ -106,10 +105,5 @@ export default {
     & ::-webkit-scrollbar-corner {
       background: rgba(0,0,0,0);
     }
-    & .v--modal-box.v--modal {
-      width: var(--prompt-modal-width) !important;
-      left: unset !important;
-      margin: auto !important;
-    }
   }
 </style>
diff --git a/shell/components/PromptRemove.vue b/shell/components/PromptRemove.vue
index 4207d279c41..72cf71eedeb 100644
--- a/shell/components/PromptRemove.vue
+++ b/shell/components/PromptRemove.vue
@@ -9,11 +9,13 @@ import { uniq } from '@shell/utils/array';
 import AsyncButton from '@shell/components/AsyncButton';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CATALOG } from '@shell/config/types';
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
   name: 'PromptRemove',
 
   components: {
-    Card, Checkbox, AsyncButton
+    Card, Checkbox, AsyncButton, AppModal
   },
   props: {
     /**
@@ -37,7 +39,8 @@ export default {
       preventDelete:       false,
       removeComponent:     this.$store.getters['type-map/importCustomPromptRemove'](resource),
       chartsToRemoveIsApp: false,
-      chartsDeleteCrd:     false
+      chartsDeleteCrd:     false,
+      showModal:           false,
     };
   },
   computed: {
@@ -164,7 +167,7 @@ export default {
           this.chartsToRemoveIsApp = true;
         }
 
-        this.$modal.show('promptRemove');
+        this.showModal = true;
 
         let { resource } = this.$route.params;
 
@@ -176,7 +179,7 @@ export default {
 
         this.removeComponent = this.$store.getters['type-map/importCustomPromptRemove'](resource);
       } else {
-        this.$modal.hide('promptRemove');
+        this.showModal = false;
       }
     },
 
@@ -244,6 +247,8 @@ export default {
         // where the custom dialog needs to delete additional resources - it handles those and retrurns false to get us
         // to delete the main resource
         if (handled === undefined || handled) {
+          this.close();
+
           return;
         }
       }
@@ -272,9 +277,14 @@ export default {
     },
     async parallelRemove(btnCB) {
       try {
+        if (typeof this.toRemove[0].bulkRemove !== 'undefined') {
+          await this.toRemove[0].bulkRemove(this.toRemove, {});
+        } else {
+          await Promise.all(this.toRemove.map(resource => resource.remove()));
+        }
+
         const spoofedTypes = this.getSpoofedTypes(this.toRemove);
 
-        await Promise.all(this.toRemove.map(resource => resource.remove()));
         await this.refreshSpoofedTypes(spoofedTypes);
         this.done();
       } catch (err) {
@@ -321,13 +331,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="remove-modal"
+  <app-modal
+    v-if="showModal"
+    custom-class="remove-modal"
     name="promptRemove"
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    @closed="close"
+    @close="close"
   >
     <Card
       class="prompt-remove"
@@ -416,7 +427,7 @@ export default {
         />
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
@@ -429,15 +440,6 @@ export default {
       margin-left: 3px;
     }
 
-    .remove-modal {
-        border-radius: var(--border-radius);
-        overflow: scroll;
-        max-height: 100vh;
-        & ::-webkit-scrollbar-corner {
-          background: rgba(0,0,0,0);
-        }
-    }
-
     .actions {
       text-align: right;
     }
diff --git a/shell/components/PromptRestore.vue b/shell/components/PromptRestore.vue
index 346057dd333..268d91351f4 100644
--- a/shell/components/PromptRestore.vue
+++ b/shell/components/PromptRestore.vue
@@ -14,6 +14,7 @@ import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import day from 'dayjs';
 import { sortBy } from '@shell/utils/sort';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   components: {
@@ -28,7 +29,7 @@ export default {
   name: 'PromptRestore',
 
   mixins: [
-    ChildHook,
+    ChildHook, AppModal
   ],
 
   data() {
@@ -86,12 +87,10 @@ export default {
     async showPromptRestore(show) {
       if (show) {
         this.loaded = true;
-        this.$modal.show('promptRestore');
         await this.fetchSnapshots();
         this.selectDefaultSnapshot();
       } else {
         this.loaded = false;
-        this.$modal.hide('promptRestore');
       }
     }
   },
@@ -204,12 +203,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="promptrestore-modal"
+  <app-modal
+    v-if="loaded"
+    custom-class="promptrestore-modal"
     name="promptRestore"
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    @close="close"
   >
     <Card
       v-if="loaded"
@@ -287,7 +288,7 @@ export default {
         />
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss' scoped>
@@ -303,22 +304,22 @@ export default {
       min-height: 16px;
     }
 
-    ::v-deep .card-container .card-actions {
-      display: block;
+    // Position dialog buttons on the right-hand side of the dialog
+    .dialog-actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 
-      button:not(:last-child) {
-        margin-right: 10px;
-      }
+  .prompt-restore ::v-deep .card-wrap .card-actions {
+    display: block;
 
-      .banner {
-        display: flex;
-      }
+    button:not(:last-child) {
+      margin-right: 10px;
     }
 
-    // Position dialog buttons on the right-hand side of the dialog
-    .dialog-actions {
+    .banner {
       display: flex;
-      justify-content: flex-end;
     }
   }
 </style>
diff --git a/shell/components/ResourceCancelModal.vue b/shell/components/ResourceCancelModal.vue
index d9f4267cc2c..22741c37ad1 100644
--- a/shell/components/ResourceCancelModal.vue
+++ b/shell/components/ResourceCancelModal.vue
@@ -1,6 +1,9 @@
 <script>
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
-  props: {
+  components: { AppModal },
+  props:      {
     isCancelModal: {
       type:    Boolean,
       default: false
@@ -11,19 +14,22 @@ export default {
     },
   },
 
+  data() {
+    return { showModal: false };
+  },
+
   watch: {},
 
   methods: {
     show() {
-      this.$modal.show('cancel-modal');
+      this.showModal = true;
     },
 
     /**
      * Close the modal, no op
      */
     cancelCancel() {
-      this.$modal.hide('cancel-modal');
-
+      this.showModal = false;
       this.$emit('cancel-cancel');
     },
 
@@ -31,8 +37,7 @@ export default {
      * Close the modal, cancel has been confirmed
      */
     confirmCancel() {
-      this.$modal.hide('cancel-modal');
-
+      this.showModal = false;
       this.$emit('confirm-cancel', this.isCancelModal);
     },
   }
@@ -40,11 +45,13 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     class="confirm-modal"
     name="cancel-modal"
     :width="440"
     height="auto"
+    @close="cancelCancel"
   >
     <div class="header">
       <h4 class="text-default-text">
@@ -80,7 +87,7 @@ export default {
         <span v-else>{{ t("cruResource.confirmBack") }}</span>
       </button>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss' scoped>
diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index 321913b1068..8ed298c1a8a 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -9,7 +9,7 @@ import BrandImage from '@shell/components/BrandImage';
 import { getProduct, getVendor } from '@shell/config/private-label';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
 import ClusterBadge from '@shell/components/ClusterBadge';
-
+import AppModal from '@shell/components/AppModal';
 import { LOGGED_OUT } from '@shell/config/query-params';
 import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
@@ -34,7 +34,8 @@ export default {
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
-    IconOrSvg
+    IconOrSvg,
+    AppModal,
   },
 
   props: {
@@ -57,7 +58,9 @@ export default {
       LOGGED_OUT,
       navHeaderRight:         null,
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
-      ctx:                    this
+      ctx:                    this,
+      showImportModal:        false,
+      showSearchModal:        false,
     };
   },
 
@@ -247,19 +250,19 @@ export default {
     },
 
     openImport() {
-      this.$modal.show('importModal');
+      this.showImportModal = true;
     },
 
     closeImport() {
-      this.$modal.hide('importModal');
+      this.showImportModal = false;
     },
 
     openSearch() {
-      this.$modal.show('searchModal');
+      this.showSearchModal = true;
     },
 
     hideSearch() {
-      this.$modal.hide('searchModal');
+      this.showSearchModal = false;
     },
 
     showPageActionsMenu(show) {
@@ -483,18 +486,20 @@ export default {
           >
             <i class="icon icon-upload icon-lg" />
           </button>
-          <modal
+          <app-modal
+            v-if="showImportModal"
             class="import-modal"
             name="importModal"
             width="75%"
             height="auto"
             styles="max-height: 90vh;"
+            @close="closeImport"
           >
             <Import
               :cluster="currentCluster"
               @close="closeImport"
             />
-          </modal>
+          </app-modal>
 
           <button
             v-if="showKubeShell"
@@ -551,15 +556,16 @@ export default {
         >
           <i class="icon icon-search icon-lg" />
         </button>
-        <modal
-          v-if="showSearch"
+        <app-modal
+          v-if="showSearch && showSearchModal"
           class="search-modal"
           name="searchModal"
           width="50%"
           height="auto"
+          @close="hideSearch()"
         >
           <Jump @closeSearch="hideSearch()" />
-        </modal>
+        </app-modal>
       </div>
 
       <!-- Extension header actions -->
diff --git a/shell/initialize/index.js b/shell/initialize/index.js
index a755f3c01f0..516e6690d05 100644
--- a/shell/initialize/index.js
+++ b/shell/initialize/index.js
@@ -24,7 +24,6 @@ import '../plugins/v-select';
 import '../plugins/directives';
 import '../plugins/clean-html-directive';
 import '../plugins/transitions';
-import '../plugins/vue-js-modal';
 import '../plugins/js-yaml';
 import '../plugins/resize';
 import '../plugins/shortkey';
diff --git a/shell/list/management.cattle.io.feature.vue b/shell/list/management.cattle.io.feature.vue
index 8de1f2f7dda..9dca408b567 100644
--- a/shell/list/management.cattle.io.feature.vue
+++ b/shell/list/management.cattle.io.feature.vue
@@ -8,6 +8,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import AppModal from '@shell/components/AppModal';
 
 export default {
   components: {
@@ -15,7 +16,8 @@ export default {
     Banner,
     Card,
     ResourceTable,
-    LabeledInput
+    LabeledInput,
+    AppModal
   },
   mixins: [ResourceFetch],
   props:  {
@@ -66,6 +68,7 @@ export default {
       serverUrlSetting: {},
       serverUrl:        '',
       noUrlSet:         false,
+      showModal:        false,
     };
   },
 
@@ -96,9 +99,9 @@ export default {
   watch: {
     showPromptUpdate(show) {
       if (show) {
-        this.$modal.show('toggleFlag');
+        this.showModal = true;
       } else {
-        this.$modal.hide('toggleFlag');
+        this.showModal = false;
       }
     },
 
@@ -214,14 +217,15 @@ export default {
         </div>
       </template>
     </ResourceTable>
-    <modal
+    <app-modal
+      v-if="showModal"
       class="update-modal"
       name="toggleFlag"
       :width="350"
       height="auto"
       styles="max-height: 100vh;"
       :click-to-close="!restart || !waiting"
-      @closed="close"
+      @close="close"
     >
       <Card
         v-if="!waiting"
@@ -319,7 +323,7 @@ export default {
           </button>
         </template>
       </Card>
-    </modal>
+    </app-modal>
   </div>
 </template>
 
diff --git a/shell/package.json b/shell/package.json
index 0aca2c6dab0..b5ce1d0eaae 100644
--- a/shell/package.json
+++ b/shell/package.json
@@ -124,7 +124,6 @@
     "v-tooltip": "2.0.3",
     "vue": "2.7.14",
     "vue-codemirror": "4.0.6",
-    "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",
     "vue-select": "3.18.3",
     "vue-server-renderer": "2.7.14",
diff --git a/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue b/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue
index e71908a1a05..53550d2d633 100644
--- a/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue
@@ -10,7 +10,7 @@ import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 import { allHash } from '@shell/utils/promise';
 
 import ResourceManager from '@shell/mixins/resource-manager';
-
+import AppModal from '@shell/components/AppModal';
 import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading.vue';
@@ -100,7 +100,7 @@ const initialState = () => {
 
 export default {
   components: {
-    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect
+    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect, AppModal
   },
 
   mixins: [ResourceManager],
@@ -125,7 +125,8 @@ export default {
   data() {
     return {
       ...initialState(),
-      secondaryResourceData: null
+      secondaryResourceData: null,
+      showModal:             false,
     };
   },
 
@@ -161,11 +162,11 @@ export default {
     },
 
     showDialog() {
-      this.$modal.show('catalogLoadDialog');
+      this.showModal = true;
     },
 
     closeDialog(result) {
-      this.$modal.hide('catalogLoadDialog');
+      this.showModal = false;
       this.$emit('closed', result);
 
       // Reset state
@@ -482,11 +483,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
-    @closed="closeDialog()"
+    @close="closeDialog()"
   >
     <Loading
       v-if="$fetchState.loading"
@@ -563,7 +565,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue b/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue
index 5bfc5df2c80..aba401a2c40 100644
--- a/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue
@@ -4,12 +4,14 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   components: {
     AsyncButton,
     Checkbox,
     LabeledInput,
+    AppModal
   },
 
   data() {
@@ -19,6 +21,7 @@ export default {
       persist:           false,
       canModifyName:     true,
       canModifyLocation: true,
+      showModal:         false,
     };
   },
 
@@ -50,10 +53,10 @@ export default {
 
   methods: {
     showDialog() {
-      this.$modal.show('developerInstallPluginDialog');
+      this.showModal = true;
     },
     closeDialog(result) {
-      this.$modal.hide('developerInstallPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
 
@@ -142,10 +145,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog()"
   >
     <div class="plugin-install-dialog">
       <h4>
@@ -194,7 +199,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/shell/pages/c/_cluster/uiplugins/InstallDialog.vue b/shell/pages/c/_cluster/uiplugins/InstallDialog.vue
index d075998806b..8726a31491b 100644
--- a/shell/pages/c/_cluster/uiplugins/InstallDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/InstallDialog.vue
@@ -5,6 +5,7 @@ import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import Banner from '@components/Banner/Banner.vue';
+import AppModal from '@shell/components/AppModal.vue';
 
 // Note: This dialog handles installation and update of a plugin
 
@@ -13,6 +14,7 @@ export default {
     AsyncButton,
     Banner,
     LabeledSelect,
+    AppModal
   },
 
   async fetch() {
@@ -31,6 +33,7 @@ export default {
       version:                '',
       update:                 false,
       mode:                   '',
+      showModal:              false,
     };
   },
 
@@ -101,11 +104,11 @@ export default {
 
       this.busy = false;
       this.update = mode !== 'install';
-      this.$modal.show('installPluginDialog');
+      this.showModal = true;
     },
 
     closeDialog(result) {
-      this.$modal.hide('installPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
 
@@ -215,10 +218,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog(false)"
   >
     <div
       v-if="plugin"
@@ -266,7 +271,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/shell/pages/c/_cluster/uiplugins/RemoveUIPlugins.vue b/shell/pages/c/_cluster/uiplugins/RemoveUIPlugins.vue
index a4c8faa3806..7563710a034 100644
--- a/shell/pages/c/_cluster/uiplugins/RemoveUIPlugins.vue
+++ b/shell/pages/c/_cluster/uiplugins/RemoveUIPlugins.vue
@@ -39,6 +39,7 @@ export default {
       removeRepo:          false,
       removeCRD:           true,
       hasPluginsInstalled: false,
+      isDialogActive:      false,
     };
   },
 
@@ -59,7 +60,7 @@ export default {
 
     showDialog() {
       this.removeRepo = !!this.defaultRepo;
-      this.$modal.show('confirm-uiplugins-remove');
+      this.isDialogActive = true;
     },
 
     async doRemove(btnCb) {
@@ -104,11 +105,13 @@ export default {
 </script>
 <template>
   <Dialog
+    v-if="isDialogActive"
     name="confirm-uiplugins-remove"
     :title="t('plugins.setup.remove.title')"
     mode="disable"
     data-testid="disable-ext-modal"
     @okay="doRemove"
+    @closed="isDialogActive = false"
   >
     <template>
       <p>
diff --git a/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue b/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue
index c479b427fbe..c0c7b0f9603 100644
--- a/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue
+++ b/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue
@@ -64,6 +64,7 @@ export default {
       addRepo:                true,
       buttonState:            ASYNC_BUTTON_STATES.ACTION,
       defaultRegistrySetting: null,
+      showDialog:             false,
     };
   },
 
@@ -127,12 +128,12 @@ export default {
       // Reset checkbox bsed on if the repo is already installed
       this.addRepo = !this.hasRancherUIPluginsRepo;
 
-      this.$modal.show('confirm-uiplugins-setup');
+      this.showDialog = true;
     },
 
     async dialogClosed(ok) {
       this.errors = [];
-
+      this.showDialog = false;
       // User wants to proceed
       if (ok) {
         this.buttonState = ASYNC_BUTTON_STATES.WAITING;
@@ -229,6 +230,7 @@ export default {
       </template>
     </IconMessage>
     <Dialog
+      v-if="showDialog"
       name="confirm-uiplugins-setup"
       :title="t('plugins.setup.install.title')"
       @closed="dialogClosed"
diff --git a/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue b/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue
index b8049e66a6b..f8c6f3d446d 100644
--- a/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue
@@ -1,13 +1,13 @@
 <script>
 import { mapGetters } from 'vuex';
-
+import AppModal from '@shell/components/AppModal.vue';
 import AsyncButton from '@shell/components/AsyncButton';
 import { CATALOG, SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
 import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import { allHash } from '@shell/utils/promise';
 
 export default {
-  components: { AsyncButton },
+  components: { AsyncButton, AppModal },
 
   data() {
     return { plugin: undefined, busy: false };
@@ -19,10 +19,10 @@ export default {
     showDialog(plugin) {
       this.plugin = plugin;
       this.busy = false;
-      this.$modal.show('uninstallPluginDialog');
+      this.showModal = true;
     },
     closeDialog(result) {
-      this.$modal.hide('uninstallPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
     async uninstall() {
@@ -103,10 +103,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="uninstallPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog(false)"
   >
     <div
       v-if="plugin"
@@ -138,7 +140,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/shell/plugins/vue-js-modal.js b/shell/plugins/vue-js-modal.js
deleted file mode 100644
index f058e8fb017..00000000000
--- a/shell/plugins/vue-js-modal.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue';
-import VModal from 'vue-js-modal/dist/ssr.index';
-
-Vue.use(VModal);
diff --git a/shell/public/index.html b/shell/public/index.html
index 34ecb04dec1..879392457e0 100644
--- a/shell/public/index.html
+++ b/shell/public/index.html
@@ -65,6 +65,7 @@
             <i class="initial-load-spinner"></i>
         </div>
     </div>
+    <div id="modals"><!--Portal content here--></div>
 </body>
 
 </html>
diff --git a/storybook/stories/components/AppModal.stories.mdx b/storybook/stories/components/AppModal.stories.mdx
new file mode 100644
index 00000000000..c70c0e6916e
--- /dev/null
+++ b/storybook/stories/components/AppModal.stories.mdx
@@ -0,0 +1,49 @@
+import { Canvas, Meta, Story, ArgsTable, Source } from '@storybook/addon-docs';
+import AppModal from '@shell/components/AppModal';
+
+<Meta 
+  title="Components/AppModal" 
+  component={AppModal}
+/>
+
+export const Template = (args, { argTypes }) => ({
+  components: { AppModal },
+  props:      Object.keys(argTypes),
+  template:   '<app-modal v-bind="$props">Modal content goes here</app-modal>',
+})
+
+# Modal 
+The <code>AppModal</code> component is a reusable Vue modal component that provides a simple way to display content in a modal overlay.
+
+<br/>
+
+### Description
+
+<strong>Note:</strong> AppModal renders modal content outside of the control of Vue, via <code>&lt;div id="modals" /&gt;</code> located within <code>index.html</code>. This allows Dashboard to position the modal as the very last node in the page's <code>body</code>, making styling and positioning much easier and less error-prone. 
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      clickToClose: true,
+      width: 800,
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Import
+
+<Source
+  language='js'
+  light
+  format={false}
+  code={`
+     import AppModal from '@shell/components/AppModal';
+  `}
+/>
+
+### Props table
+
+<ArgsTable of={AppModal} />
+
diff --git a/yarn.lock b/yarn.lock
index e78ffe132fd..ffa9e6fc9ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15186,11 +15186,6 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-js-modal@1.3.35:
-  version "1.3.35"
-  resolved "https://registry.yarnpkg.com/vue-js-modal/-/vue-js-modal-1.3.35.tgz#5f54de1a30a5f977121bfe6b2a1a5498bce2752a"
-  integrity sha512-DKtxUCW/oprM/ndn9h/cnVgsmqjQ/ARy5rH4q/11Pas04og2td+sltl91H/rlwXTwJIqWyt+lJizK5o4ErjWIQ==
-
 "vue-loader-v16@npm:vue-loader@^16.1.0":
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"

From cbec2f50e7f6066db358349550fba55da38cc27b Mon Sep 17 00:00:00 2001
From: "andy.lee" <andy.lee@suse.com>
Date: Thu, 3 Oct 2024 15:37:23 +0800
Subject: [PATCH 2/3] revert: take vm snapshot wording

Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit 5f6559533a08e44ac8d7264a3610b6c5211224ad)
---
 pkg/harvester/l10n/en-us.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index bb9c9188a54..603bfda1056 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -171,7 +171,7 @@ harvester:
     cancelExpand: Cancel Expand
     snapshot: Take Snapshot
     pvcClone: Clone Volume
-    vmSnapshot: Take Snapshot
+    vmSnapshot: Take Virtual Machine Snapshot
     shutdown: Shut Down
     powerOn: Power On
     reboot: Reboot

From 1cb986e44ece1d479720d1e199be563f702b4961 Mon Sep 17 00:00:00 2001
From: "andy.lee" <andy.lee@suse.com>
Date: Thu, 3 Oct 2024 15:50:26 +0800
Subject: [PATCH 3/3] remove this. in HarvesterDisk.vue

Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit 874e19146b06794627e03440ca383e34db85bb9a)
---
 pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue | 6 ------
 pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue | 7 +++++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue b/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
index 94cadd99c76..cc2c91effda 100644
--- a/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
+++ b/pkg/harvester/components/novnc/NovncConsoleCustomKeys.vue
@@ -101,12 +101,6 @@ export default {
   },
 
   methods: {
-    // show() {
-    //   // console.log('🚀 ~ NoVNCconsoleCustomKeys ~ show:');
-    //   // this.showModal = true;
-    //   // this.$refs.recordShortcutKeys.open();
-    // },
-
     closeRecordingModal() {
       window.removeEventListener('keydown', this.handleShortcut);
       this.$emit('close');
diff --git a/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue b/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
index 92c4947f5a6..f236fb35c15 100644
--- a/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
+++ b/pkg/harvester/edit/harvesterhci.io.host/HarvesterDisk.vue
@@ -81,6 +81,7 @@ export default {
       provisioner,
       volumeGroupDialog: null,
       randomStr:         randomStr(10).toLowerCase(),
+      isOpen:            false
     };
   },
 
@@ -308,11 +309,11 @@ export default {
   methods: {
     showCreateVolumeGroup() {
       this.volumeGroupDialog = null;
-      this.$modal.show(this.randomStr);
+      this.isOpen = true;
     },
 
     hideCreateVolumeGroup() {
-      this.$modal.hide(this.randomStr);
+      this.isOpen = false;
     },
 
     saveCreateVolumeGroup(buttonCb) {
@@ -476,10 +477,12 @@ export default {
       </div>
     </div>
     <ModalWithCard
+      v-if="isOpen"
       :ref="randomStr"
       :name="randomStr"
       width="30%"
       @finish="saveCreateVolumeGroup"
+      @close="hideCreateVolumeGroup"
     >
       <template #title>
         {{ t('harvester.host.disk.lvmVolumeGroup.label') }}