Merge pull request rancher#10591 from rak-phillip/feature/8207-modal-…

…replace

Replace `vue-js-modal` with `app-modal`

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

@@ -2,7 +2,6 @@
 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 { VCleanTooltip } from '@shell/plugins/clean-tooltip-directive.js';
 import '@shell/plugins/replaceall';
@@ -14,7 +13,7 @@ global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
 
 Vue.config.productionTip = false;
-Vue.use(VTooltip).use(VModal);
+Vue.use(VTooltip);
 Vue.use(VCleanTooltip);
 Vue.component('v-select', vSelect);
 

package.json

@@ -110,7 +110,6 @@
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
     "vue-codemirror": "4.0.6",
-    "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",
     "vue-router": "3.6.5",
     "vue-select": "3.18.3",

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';
+@import 'node_modules/xterm/css/xterm.css';

shell/components/AppModal.vue

@@ -2,8 +2,9 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-  name:  'AppModal',
-  props: {
+  name:         'AppModal',
+  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.
@@ -20,6 +21,61 @@ export default Vue.extend({
     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) && Number(value) > 0;
+        }
+
+        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() {
@@ -59,12 +115,15 @@ export default Vue.extend({
     >
       <div
         class="modal-overlay"
+        :data-modal="name"
         @click="handleClickOutside"
       >
         <div
+          v-bind="$attrs"
           ref="modalRef"
+          :class="customClass"
           class="modal-container"
-          :style="{ width: width }"
+          :style="modalStyles"
           @click.stop
         >
           <slot><!--Empty content--></slot>

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

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>
@@ -149,7 +152,7 @@ export default {
           </button>
         </div>
       </div>
-    </modal>
+    </app-modal>
   </div>
 </template>
 

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,11 +53,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="!closed"
     :name="name"
     height="auto"
     :scrollable="true"
-    @closed="closeDialog(false)"
+    @close="closeDialog(false)"
     @before-open="beforeOpen"
   >
     <div class="modal-dialog">
@@ -90,7 +91,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

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,29 +15,33 @@ 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');
     },
   }
 };
 </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'>

shell/components/Inactivity.vue

@@ -88,8 +88,6 @@ export default {
         if (now >= endTime) {
           this.isOpen = true;
           this.startCountdown();
-
-          this.$modal.show('inactivityModal');
         } else {
           this.inactivityTimeoutId = setTimeout(checkInactivityTimer, 1000);
         }
@@ -135,8 +133,6 @@ export default {
       this.isOpen = false;
       this.courtesyCountdown = this.courtesyTimer;
       this.clearAllTimeouts();
-
-      this.$modal.hide('inactivityModal');
     },
 
     refresh() {
@@ -179,10 +175,10 @@ export default {
 
 <template>
   <ModalWithCard
+    v-if="isOpen"
     ref="inactivityModal"
     name="inactivityModal"
     save-text="Continue"
-    :v-if="isOpen"
     @finish="resume"
   >
     <template #title>