@rancher/shell 0.3.23 → 0.3.25

package/components/auth/login/saml.vue

@@ -5,7 +5,18 @@ export default {
 
   methods: {
     async login() {
-      const res = await this.$store.dispatch('auth/login', { provider: this.name, body: { finalRedirectUrl: window.location.origin } });
+      const { requestId, publicKey, responseType } = this.$route.query;
+
+      const res = await this.$store.dispatch('auth/login', {
+        provider: this.name,
+        body:     {
+          finalRedirectUrl: window.location.origin,
+          requestId,
+          publicKey,
+          responseType
+        }
+      });
+
       const { idpRedirectUrl } = res;
 
       window.location.href = idpRedirectUrl;

package/components/form/LabeledSelect.vue

@@ -149,11 +149,10 @@ export default {
         return;
       }
 
-      // Force to update the option label if prop has been changed
-      const isOutdated = !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
-
-      if (isOutdated && this.options) {
-        const newOption = this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt)));
+      // This check is only needed if its possible for an option's label to change without the option's value changing - we can skip this if options are just strings or numbers
+      // HOWEVER even if strings are passed to v-select the 'option' in the slot is normalized to {label: <option>} so we have to check the options prop here instead of the 'option' itself
+      if (typeof this.options[0] === 'object') {
+        const newOption = this.getUpdatedOption(option);
 
         if (newOption) {
           const label = get(newOption, this.optionLabel);
@@ -178,6 +177,14 @@ export default {
       }
     },
 
+    // If the option's label changed in parent but value did not, the label wont be automatically updated here
+    // Ensure that the label being shown is still present in the options prop and find the new one if not
+    getUpdatedOption(option) {
+      const isOutdated = this.options && !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
+
+      return isOutdated ? this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt))) : undefined;
+    },
+
     positionDropdown(dropdownList, component, { width }) {
       calculatePosition(dropdownList, component, width, this.placement);
     },

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -198,7 +198,7 @@ export default {
     async principalProperty() {
       const principal = await this.principal;
 
-      return principal.principalType === 'group' ? 'groupPrincipalId' : 'userPrincipalId';
+      return principal?.principalType === 'group' ? 'groupPrincipalId' : 'userPrincipalId';
     },
 
     onAdd(principalId) {

package/components/form/Members/MembershipEditor.vue

@@ -56,8 +56,13 @@ export default {
   },
 
   async fetch() {
+    const roleBindingRequestParams = { type: this.type, opt: { force: true } };
+
+    if (this.type === NORMAN.PROJECT_ROLE_TEMPLATE_BINDING && this.parentId) {
+      Object.assign(roleBindingRequestParams, { opt: { filter: { projectId: this.parentId.split('/').join(':') } } });
+    }
     const userHydration = [
-      this.schema ? this.$store.dispatch(`rancher/findAll`, { type: this.type, opt: { force: true } }) : [],
+      this.schema ? this.$store.dispatch(`rancher/findAll`, roleBindingRequestParams) : [],
       this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
       this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
       this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER })

package/components/form/SelectOrCreateAuthSecret.vue

@@ -477,6 +477,7 @@ export default {
       <div :class="firstCol">
         <LabeledSelect
           v-model="selected"
+          data-testid="auth-secret-select"
           :mode="mode"
           :label-key="labelKey"
           :loading="$fetchState.pending"
@@ -488,6 +489,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
+            data-testid="auth-secret-ssh-public-key"
             :mode="mode"
             type="multiline"
             label-key="selectOrCreateAuthSecret.ssh.publicKey"
@@ -496,6 +498,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
+            data-testid="auth-secret-ssh-private-key"
             :mode="mode"
             type="multiline"
             label-key="selectOrCreateAuthSecret.ssh.privateKey"
@@ -506,6 +509,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
+            data-testid="auth-secret-basic-public-key"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.basic.username"
           />
@@ -513,6 +517,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
+            data-testid="auth-secret-basic-private-key"
             :mode="mode"
             type="password"
             label-key="selectOrCreateAuthSecret.basic.password"
@@ -523,6 +528,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
+            data-testid="auth-secret-s3-public-key"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.s3.accessKey"
           />
@@ -530,6 +536,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
+            data-testid="auth-secret-s3-private-key"
             :mode="mode"
             type="password"
             label-key="selectOrCreateAuthSecret.s3.secretKey"

package/components/form/__tests__/KeyValue.test.ts

@@ -8,7 +8,8 @@ describe('component: KeyValue', () => {
     const wrapper = mount(KeyValue, {
       propsData:  { value: { value } },
       mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
-      directives: { t }
+      directives: { t },
+      stubs:      { CodeMirror: true }
     });
 
     const inputValue = wrapper.find('textarea').element as HTMLInputElement;
@@ -24,7 +25,8 @@ describe('component: KeyValue', () => {
         valueMarkdownMultiline: true,
       },
       mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
-      directives: { t }
+      directives: { t },
+      stubs:      { CodeMirror: true }
     });
 
     const inputFieldTextArea = wrapper.find('textarea').element;
@@ -41,7 +43,8 @@ describe('component: KeyValue', () => {
         valueMarkdownMultiline: false,
       },
       mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
-      directives: { t }
+      directives: { t },
+      stubs:      { CodeMirror: true }
     });
 
     const inputFieldTextArea = wrapper.find('[data-testid="text-area-auto-grow"]');

package/components/form/__tests__/LabeledSelect.test.ts

@@ -133,6 +133,24 @@ describe('component: LabeledSelect', () => {
         // Component is from a library and class is not going to be changed
         expect(wrapper.find('.vs__selected').text()).toBe(translation);
       });
+
+      it.each([
+        [['a'], 'b', 0],
+        [[{ value: 'a', label: 'A' }], { value: 'a', label: 'B' }, 4]
+      ])('should only check for a new label if options are objects', async(options: any[], newOption, checkUpdateCalled: number) => {
+        const spyUpdatedOption = jest.spyOn(LabeledSelect.methods, 'getUpdatedOption');
+
+        const wrapper = mount(LabeledSelect, {
+          propsData: {
+            value: 'a',
+            options
+          }
+        });
+
+        await wrapper.setProps({ options: [newOption] });
+
+        expect(spyUpdatedOption).toHaveBeenCalledTimes(checkUpdateCalled);
+      });
     });
   });
 });

package/components/formatter/PodsUsage.vue

@@ -1,5 +1,4 @@
 <script>
-import { POD } from '@shell/config/types';
 export default {
   name:  'PodsUsage',
   props: {
@@ -8,47 +7,23 @@ export default {
       required: true
     },
   },
-  data() {
-    return {
-      loading:   true,
-      podsUsage: null
-    };
-  },
-  methods: {
-    async startDelayedLoading() {
-      const id = this.row?.mgmt?.id;
-
-      if (this.row?.isReady && id) {
-        const req = await this.$store.dispatch('management/request', { url: `/k8s/clusters/${ id }/v1/counts` });
+  computed: {
+    podsUsage() {
+      const usedPods = this.row?.mgmt?.status?.requested?.pods;
+      const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
 
-        this.loading = false;
-        const usedPods = req.data?.[0]?.counts[POD]?.summary?.count || 0;
-        const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
-
-        if (totalPods) {
-          this.podsUsage = `${ usedPods }/${ totalPods }`;
-        } else {
-          this.podsUsage = '—';
-        }
-      } else {
-        this.loading = false;
-        this.podsUsage = '—';
+      if (!this.row?.isReady || !totalPods) {
+        return '—';
       }
+
+      return `${ usedPods || 0 }/${ totalPods }`;
     }
-  },
+  }
 };
 </script>
 
 <template>
-  <i
-    v-if="loading"
-    class="icon icon-spinner icon-spin"
-  />
-  <p v-else>
-    {{ podsUsage }}
+  <p>
+    <span>{{ podsUsage }}</span>
   </p>
 </template>
-
-<style lang="scss" scoped>
-
-</style>

package/components/formatter/PrincipalGroupBindings.vue

@@ -11,12 +11,15 @@ export default {
   computed: {
 
     boundRoles() {
-      const principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.value);
+      // need to use getter to fetch all NORMAN.PRINCIPAL, otherwise `rancher/byId` is not reactive...
+      const principals = this.$store.getters['rancher/all'](NORMAN.PRINCIPAL);
       const globalRoleBindings = this.$store.getters['management/all'](MANAGEMENT.GLOBAL_ROLE_BINDING);
 
+      const principal = principals.find((x) => x.id === this.value);
+
       return globalRoleBindings
         // Bindings for this group
-        .filter((globalRoleBinding) => globalRoleBinding.groupPrincipalName === principal.id)
+        .filter((globalRoleBinding) => globalRoleBinding.groupPrincipalName === principal?.id)
         // Display name of role associated with binding
         .map((binding) => {
           const role = this.$store.getters['management/byId'](MANAGEMENT.GLOBAL_ROLE, binding.globalRoleName);
@@ -35,9 +38,9 @@ export default {
 <template>
   <div class="pgb">
     <template v-for="(role, i) in boundRoles">
-      <nuxt-link
-        :key="role.id"
-        :to="role.detailLocation"
+      <nuxt-link
+        :key="role.id"
+        :to="role.detailLocation"
       >
         {{ role.label }}
       </nuxt-link>

package/components/formatter/__tests__/PodsUsage.test.ts

@@ -2,37 +2,54 @@ import { mount } from '@vue/test-utils';
 import PodsUsage from '@shell/components/formatter/PodsUsage.vue';
 
 describe('component: PodsUsage', () => {
-  it('should not display values if data is not ready', () => {
+  it('should display podsUsage value', () => {
     const wrapper = mount(PodsUsage, {
-      propsData: { row: {} },
-      mocks:     { $store: { dispatch: { 'management/request': jest.fn() } } }
+      propsData: {
+        row: {
+          isReady: true,
+          mgmt:    {
+            status: {
+              requested:   { pods: 10 },
+              allocatable: { pods: 20 }
+            }
+          }
+        }
+      },
+      mocks: { $store: { dispatch: { 'management/request': jest.fn() } } }
     });
 
-    const element = wrapper.find('p').element;
+    const { element } = wrapper.find('p');
 
-    expect(element).toBeUndefined();
+    expect(element.textContent).toBeDefined();
+    expect(element.textContent).toBe('10/20');
   });
-
-  it('should display spinning icon', () => {
+  it('should display dash when there are no totalPods', () => {
     const wrapper = mount(PodsUsage, {
-      propsData: { row: {} },
-      mocks:     { $store: { dispatch: { 'management/request': jest.fn() } } }
+      propsData: {
+        row: {
+          isReady: true,
+          mgmt:    {
+            status: {
+              requested:   { pods: 10 },
+              allocatable: { pods: 0 }
+            }
+          }
+        }
+      },
+      mocks: { $store: { dispatch: { 'management/request': jest.fn() } } }
     });
 
-    const element = wrapper.find('i').element;
+    const { element } = wrapper.find('p');
 
-    expect(element).toBeDefined();
+    expect(element.textContent).toBeDefined();
+    expect(element.textContent).toBe('—');
   });
+  it('should display a dash when there is no management cluster ti query for status', () => {
+    const wrapper = mount(PodsUsage, { propsData: { row: { isReady: true } } });
 
-  it('should display podsUsage value', () => {
-    const wrapper = mount(PodsUsage, {
-      propsData: { row: { isReady: true } },
-      data:      () => ({ loading: false }),
-      mocks:     { $store: { dispatch: { 'management/request': jest.fn() } } }
-    });
-
-    const element = wrapper.find('p').element;
+    const { element } = wrapper.find('p');
 
     expect(element.textContent).toBeDefined();
+    expect(element.textContent).toBe('—');
   });
 });

package/components/nav/Group.vue

@@ -49,6 +49,10 @@ export default {
   },
 
   computed: {
+    isGroupActive() {
+      return this.isOverview || (this.hasActiveRoute() && this.isExpanded && this.showHeader);
+    },
+
     hasChildren() {
       return this.group.children?.length > 0;
     },
@@ -69,7 +73,7 @@ export default {
         if (overviewRoute && grp.overview) {
           const route = this.$router.resolve(overviewRoute || {});
 
-          return this.$route.fullPath === route?.route?.fullPath;
+          return this.$route.fullPath.split('#')[0] === route?.route?.fullPath;
         }
       }
 
@@ -96,8 +100,14 @@ export default {
       // Don't auto-select first group entry if we're already expanded and contain the currently-selected nav item
       if (this.hasActiveRoute() && this.isExpanded) {
         return;
-      }
+      } else {
+        // Remove all active class if click on group header and not active route
+        const headerEl = document.querySelectorAll('.header');
 
+        headerEl.forEach((el) => {
+          el.classList.remove('active');
+        });
+      }
       this.expandGroup();
 
       const items = this.group[this.childrenKey];
@@ -132,6 +142,11 @@ export default {
 
     // User clicked on the expander icon, so toggle the expansion so the user can see inside the group
     peek($event) {
+      // Add active class to the current header if click on chevron icon
+      $event.target.parentElement.classList.remove('active');
+      if (this.hasActiveRoute() && this.isExpanded) {
+        $event.target.parentElement.classList.add('active');
+      }
       this.isExpanded = !this.isExpanded;
       $event.stopPropagation();
     },
@@ -188,7 +203,7 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren}"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive}"
   >
     <div
       v-if="showHeader"
@@ -212,7 +227,7 @@ export default {
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle"
-        :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}"
+        :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
         @click="peek($event, true)"
       />
     </div>
@@ -267,8 +282,9 @@ export default {
     position: relative;
     cursor: pointer;
     color: var(--body-text);
+    height: 33px;
 
-    > H6 {
+    H6 {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
@@ -277,39 +293,37 @@ export default {
 
     > A {
       display: block;
-      padding-left: 10px;
+      padding-left: 16px;
       &:hover{
-          text-decoration: none;
-        }
+        text-decoration: none;
+      }
       &:focus{
         outline:none;
       }
       > H6 {
-        font-size: 14px;
         text-transform: none;
       }
     }
-
-    &.active {
-      background-color: var(--nav-active);
-    }
-  }
-
-  .body {
-    margin-left: 10px;
   }
 
   .accordion {
     .header {
-      &:hover:not(.noHover) {
-        background-color: var(--nav-hover);
-      }
+      &.active {
+        color: var(--primary-hover-text);
+        background-color: var(--primary-hover-bg);
+
+        h6 {
+          font-weight: bold;
+          color: var(--primary-hover-text);
+        }
 
-      > I {
         &:hover {
-          background-color: var(--nav-expander-hover);
+          background-color: var(--primary-hover-bg);
         }
       }
+      &:hover:not(.active) {
+        background-color: var(--nav-hover);
+      }
     }
   }
 
@@ -323,16 +337,15 @@ export default {
         }
 
         > H6 {
-          font-size: 14px;
           text-transform: none;
-          padding-left: 10px;
+          padding-left: 16px;
         }
 
         > I {
           position: absolute;
           right: 0;
           top: 0;
-          padding: 10px 7px 9px 7px;
+          padding: 10px 10px 9px 7px;
           user-select: none;
         }
       }
@@ -340,24 +353,27 @@ export default {
       > .body {
         margin-left: 0;
       }
+
+      &.group-highlight {
+        background: var(--nav-active);
+      }
     }
 
     &.depth-1 {
       > .header {
+        padding-left: 20px;
         > H6 {
-          font-size: 13px;
-          line-height: 16px;
+          line-height: 18px;
           padding: 8px 0 7px 5px !important;
         }
         > I {
-          padding: 9px 7px 8px 7px !important;
+          padding: 10px 7px 9px 7px !important;
         }
       }
     }
 
     &:not(.depth-0) {
       > .header {
-        padding-left: 10px;
         > H6 {
           // Child groups that aren't linked themselves
           display: inline-block;
@@ -374,16 +390,18 @@ export default {
     }
   }
 
- .body ::v-deep > .child.nuxt-link-active,
- .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.nuxt-link-active,
+  .header ::v-deep > .child.nuxt-link-exact-active {
     padding: 0;
 
     A, A I {
-      color: var(--body-text);
+      color: var(--primary-hover-text);
     }
 
     A {
-      background-color: var(--nav-active);
+      color: var(--primary-hover-text);
+      background-color: var(--primary-hover-bg);
+      font-weight: bold;
     }
   }
 
@@ -391,11 +409,21 @@ export default {
     A {
       border-left: solid 5px transparent;
       line-height: 16px;
-      font-size: 13px;
+      font-size: 14px;
+      padding-left: 24px;
+      display: flex;
+      justify-content: space-between;
     }
 
     A:focus {
       outline: none;
     }
+
+    &.root {
+      background: transparent;
+      A {
+        padding-left: 14px;
+      }
+    }
   }
 </style>

package/components/nav/Header.vue

@@ -60,8 +60,8 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['clusterReady', 'isExplorer', 'isMultiCluster', 'isRancher', 'currentCluster',
-      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester']),
+    ...mapGetters(['clusterReady', 'isExplorer', 'isRancher', 'currentCluster',
+      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
     ...mapGetters('type-map', ['activeProducts']),
 
     appName() {
@@ -314,7 +314,7 @@ export default {
       const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
 
       if (fn && enabled) {
-        fn.apply(this, [opts, []]);
+        fn.apply(this, [opts, [], { $route: this.$route }]);
       }
     },
 
@@ -338,7 +338,7 @@ export default {
     data-testid="header"
   >
     <div>
-      <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
+      <TopLevelMenu v-if="showTopLevelMenu" />
     </div>
     <div
       class="menu-spacer"
@@ -706,6 +706,10 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  $side-menu-logo-margin-left: 5px;
+  // It would be nice to grab this from `Group.vue`, but there's margin, padding and border, which is overkill to var
+  $side-menu-group-padding-left: 16px;
+
   HEADER {
     display: flex;
     z-index: z-index('mainHeader');
@@ -715,11 +719,14 @@ export default {
     }
 
     > .menu-spacer {
-      flex: 0 0 calc(var(--header-height) + 10px);
+      flex: 0 0 15px;
 
       &.isSingleProduct  {
         display: flex;
         justify-content: center;
+        // Align the icon with the side nav menu items ($side-menu-group-padding-left)
+        // There's margin already in the icon component, so take that in to account ($side-menu-logo-margin-left)
+        margin-left: $side-menu-group-padding-left - $side-menu-logo-margin-left;
       }
     }
 
@@ -808,7 +815,7 @@ export default {
       display: flex;
       margin-right: 8px;
       height: 55px;
-      margin-left: 5px;
+      margin-left: $side-menu-logo-margin-left;
       max-width: 200px;
       padding: 12px 0;
     }