@rancher/shell 0.5.3 → 2.0.0

package/components/GlobalRoleBindings.vue

@@ -8,6 +8,9 @@ import Loading from '@shell/components/Loading';
 import { addObjects, isArray } from '@shell/utils/array';
 import { Card } from '@components/Card';
 
+// i18n-uses rbac.globalRoles.types.*.label
+// i18n-uses rbac.globalRoles.types.*.description
+
 /**
  * Display checkboxes for each global role, checked for given user or principal (group). Can save changes.
  */
@@ -66,6 +69,7 @@ export default {
 
         const sort = (a, b) => a.nameDisplay.localeCompare(b.nameDisplay);
 
+        // global roles are not sorted
         this.sortedRoles.builtin = this.sortedRoles.builtin.sort(sort);
         this.sortedRoles.custom = this.sortedRoles.custom.sort(sort);
 
@@ -73,12 +77,33 @@ export default {
           this.globalRoleBindings = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.GLOBAL_ROLE_BINDING, opt: { force: true } });
         }
 
+        // Sort the global roles - use the order defined in 'globalPermissions' and then add the remaining roles after
+        const globalRoles = [];
+        const globalRolesAdded = {};
+
+        this.globalPermissions.forEach((id) => {
+          const role = this.sortedRoles.global.find((r) => r.id === id);
+
+          if (role) {
+            globalRoles.push(role);
+            globalRolesAdded[id] = true;
+          }
+        });
+
+        // Remaining global roles
+        const remainingGlobalRoles = this.sortedRoles.global.filter((r) => !globalRolesAdded[r.id]);
+
+        this.sortedRoles.global = globalRoles;
+        this.sortedRoles.global.push(...remainingGlobalRoles);
+        // End sort of global roles
+
         this.update();
       }
     } catch (e) { }
   },
   data() {
     return {
+      // This not only identifies global roles but the order here is the order we want to display them in the UI
       globalPermissions: [
         'admin',
         'restricted-admin',
@@ -335,6 +360,7 @@ export default {
                   :label="role.nameDisplay"
                   :description="role.descriptionDisplay"
                   :mode="mode"
+                  :data-testId="'grb-checkbox-' + role.id"
                   @input="checkboxChanged"
                 >
                   <template #label>

package/components/Import.vue

@@ -11,9 +11,7 @@ import SortableTable from '@shell/components/SortableTable';
 import { sortBy } from '@shell/utils/sort';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { NAMESPACE } from '@shell/config/types';
-import {
-  NAME as NAME_COL, STATE, TYPE, NAMESPACE as NAMESPACE_COL, AGE
-} from '@shell/config/table-headers';
+import { NAME as NAME_COL, TYPE, NAMESPACE as NAMESPACE_COL, AGE } from '@shell/config/table-headers';
 
 export default {
   components: {
@@ -41,7 +39,7 @@ export default {
   data() {
     return {
       currentYaml:   '',
-      allNamespaces: null,
+      allNamespaces: [],
       errors:        null,
       rows:          null,
       done:          false,
@@ -64,7 +62,6 @@ export default {
 
     headers() {
       return [
-        STATE,
         TYPE,
         NAME_COL,
         NAMESPACE_COL,
@@ -121,11 +118,14 @@ export default {
   <Card
     v-else
     :show-highlight-border="false"
+    data-testid="import-yaml"
   >
     <template #title>
       <div style="display: block; width: 100%;">
         <template v-if="done">
-          <h4>{{ t('import.success', {count: rows.length}) }}</h4>
+          <h4 data-testid="import-yaml-success">
+            {{ t('import.success', {count: rows.length}) }}
+          </h4>
         </template>
         <template v-else>
           <h4 v-t="'import.title'" />
@@ -162,6 +162,7 @@ export default {
             :paging="true"
             :row-actions="false"
             :table-actions="false"
+            :sub-rows-description="false"
             @rowClick="rowClick"
           />
         </div>
@@ -188,6 +189,7 @@ export default {
         <button
           type="button"
           class="btn role-primary"
+          data-testid="import-yaml-close"
           @click="close"
         >
           {{ t('generic.close') }}
@@ -201,6 +203,7 @@ export default {
         <button
           type="button"
           class="btn role-secondary mr-10"
+          data-testid="import-yaml-cancel"
           @click="close"
         >
           {{ t('generic.cancel') }}
@@ -209,6 +212,7 @@ export default {
           v-if="!done"
           mode="import"
           :disabled="!currentYaml.length"
+          data-testid="import-yaml-import-action"
           @click="importYaml"
         />
       </div>

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

package/components/KeyValueView.vue

@@ -34,10 +34,8 @@ export default {
     },
 
     keyLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.key');
-      },
+      type:    String,
+      default: '',
     },
 
     separatorLabel: {
@@ -52,10 +50,8 @@ export default {
     },
 
     valueLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.value');
-      },
+      type:    String,
+      default: '',
     },
 
     valueBase64: {
@@ -70,6 +66,14 @@ export default {
   },
 
   computed: {
+    _keyLabel() {
+      return this.keyLabel || this.t('generic.key');
+    },
+
+    _valueLabel() {
+      return this.valueLabel || this.t('generic.value');
+    },
+
     threeColumns() {
       return this.showRemove;
     },
@@ -157,10 +161,10 @@ export default {
       :class="{'extra-column':threeColumns}"
     >
       <label class="text-label">
-        {{ keyLabel }}
+        {{ _keyLabel }}
       </label>
       <label class="text-label">
-        {{ valueLabel }}
+        {{ _valueLabel }}
       </label>
       <span v-if="threeColumns" />
 

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>