Port app-modal to harvester shell (backport #1163)

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() {

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);
 
 /**

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",

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>

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,10 +101,6 @@ export default {
   },
 
   methods: {
-    show() {
-      this.$refs.recordShortcutKeys.open();
-    },
-
     closeRecordingModal() {
       window.removeEventListener('keydown', this.handleShortcut);
       this.$emit('close');
@@ -170,7 +167,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>

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">

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,13 +16,15 @@ export default {
     GraphCircle,
     AsyncButton,
     Banner,
+    AppModal
   },
 
   data() {
     return {
       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>

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 {