@rancher/shell 1.2.3 → 2.0.1

package/components/MessageLink.vue

@@ -54,7 +54,7 @@ export default {
       />
       {{ prefix }}
     </slot>
-    <nuxt-link
+    <router-link
       :to="to"
       :target="target"
     >
@@ -66,7 +66,7 @@ export default {
         />
         {{ middle }}
       </slot>
-    </nuxt-link>
+    </router-link>
     <slot name="suffix">
       <t
         v-if="suffixLabel"

package/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>

package/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,7 @@ export default {
 
   data() {
     return {
-      modalName: 'move-modal', projects: [], targetProject: null
+      modalName: 'move-modal', projects: [], targetProject: null, showModal: false
     };
   },
 
@@ -47,9 +48,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 +85,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 +109,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'>

package/components/PodSecurityAdmission.vue

@@ -1,10 +1,10 @@
 <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';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { PSADimension, PSAMode } from '@shell/types/pod-security-admission';
+import { PSADimension, PSAMode } from '@shell/types/resources/pod-security-admission';
 import {
   PSADefaultLevel,
   PSADefaultVersion, PSADimensions, PSALevels, PSAModes
@@ -25,7 +25,7 @@ const getExemptionControl = (): PSAExemptionControl => ({
   value:  ''
 });
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     Checkbox, LabeledSelect, LabeledInput
   },

package/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>

package/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 };
   },
@@ -50,13 +53,7 @@ export default {
 
   watch: {
     showModal(show) {
-      if (show) {
-        this.opened = true;
-        this.$modal.show('promptModal');
-      } else {
-        this.opened = false;
-        this.$modal.hide('promptModal');
-      }
+      this.opened = show;
     },
   },
 
@@ -71,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
@@ -82,24 +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"
+  <app-modal
+    v-if="opened && component"
     :click-to-close="closeOnClickOutside"
-    @closed="close()"
+    :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'>
@@ -110,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>

package/components/PromptRemove.vue

@@ -10,12 +10,13 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CATALOG } from '@shell/config/types';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   name: 'PromptRemove',
 
   components: {
-    Card, Checkbox, AsyncButton, LabeledInput
+    Card, Checkbox, AsyncButton, LabeledInput, AppModal
   },
   props: {
     /**
@@ -39,7 +40,8 @@ export default {
       preventDelete:       false,
       removeComponent:     this.$store.getters['type-map/importCustomPromptRemove'](resource),
       chartsToRemoveIsApp: false,
-      chartsDeleteCrd:     false
+      chartsDeleteCrd:     false,
+      showModal:           false,
     };
   },
   computed: {
@@ -171,7 +173,7 @@ export default {
           this.chartsToRemoveIsApp = true;
         }
 
-        this.$modal.show('promptRemove');
+        this.showModal = true;
 
         let { resource } = this.$route.params;
 
@@ -183,7 +185,7 @@ export default {
 
         this.removeComponent = this.$store.getters['type-map/importCustomPromptRemove'](resource);
       } else {
-        this.$modal.hide('promptRemove');
+        this.showModal = false;
       }
     },
 
@@ -335,13 +337,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"
@@ -373,6 +376,7 @@ export default {
               :value="toRemove"
               :names="names"
               :type="type"
+              :done-location="doneLocation"
               @errors="e => error = e"
               @done="done"
             />
@@ -440,7 +444,7 @@ export default {
         />
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>
@@ -453,15 +457,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;
     }

package/components/PromptRestore.vue

@@ -15,6 +15,7 @@ import { escapeHtml } from '@shell/utils/string';
 import day from 'dayjs';
 import { sortBy } from '@shell/utils/sort';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
   components: {
@@ -24,6 +25,7 @@ export default {
     Date,
     LabeledSelect,
     RadioGroup,
+    AppModal,
   },
 
   name: 'PromptRestore',
@@ -87,12 +89,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');
       }
     }
   },
@@ -206,12 +206,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"
@@ -289,7 +291,7 @@ export default {
         />
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss' scoped>
@@ -305,22 +307,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>

package/components/Questions/__tests__/Boolean.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the Boolean Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"] input[type=checkbox]');
@@ -56,8 +46,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');