@rancher/shell 0.3.24 → 0.3.26

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/ResourceQuota/ProjectRow.vue

@@ -2,6 +2,7 @@
 import Select from '@shell/components/form/Select';
 import UnitInput from '@shell/components/form/UnitInput';
 import { ROW_COMPUTED } from './shared';
+import Vue from 'vue';
 
 export default {
   components: { Select, UnitInput },
@@ -57,10 +58,10 @@ export default {
 
     updateQuotaLimit(prop, type, val) {
       if (!this.value.spec[prop]) {
-        this.value.spec[prop] = { limit: { } };
+        Vue.set(this.value.spec, prop, { limit: { } });
       }
 
-      this.value.spec[prop].limit[type] = val;
+      Vue.set(this.value.spec[prop].limit, type, val);
     }
   },
 };
@@ -75,6 +76,7 @@ export default {
       :mode="mode"
       :value="type"
       :options="types"
+      data-testid="projectrow-type-input"
       @input="updateType($event)"
     />
     <UnitInput
@@ -86,6 +88,7 @@ export default {
       :input-exponent="typeOption.inputExponent"
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
+      data-testid="projectrow-project-quota-input"
       @input="updateQuotaLimit('resourceQuota', type, $event)"
     />
     <UnitInput
@@ -96,6 +99,7 @@ export default {
       :input-exponent="typeOption.inputExponent"
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
+      data-testid="projectrow-namespace-quota-input"
       @input="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
     />
   </div>

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;
     },
@@ -140,7 +144,7 @@ export default {
     peek($event) {
       // Add active class to the current header if click on chevron icon
       $event.target.parentElement.classList.remove('active');
-      if (this.hasActiveRoute()) {
+      if (this.hasActiveRoute() && this.isExpanded) {
         $event.target.parentElement.classList.add('active');
       }
       this.isExpanded = !this.isExpanded;
@@ -199,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"
@@ -284,15 +288,15 @@ export default {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
-      font-size: 16px;
+      font-size: 14px;
     }
 
     > A {
       display: block;
       padding-left: 16px;
       &:hover{
-          text-decoration: none;
-        }
+        text-decoration: none;
+      }
       &:focus{
         outline:none;
       }
@@ -300,22 +304,26 @@ export default {
         text-transform: none;
       }
     }
-    &.active {
-      background-color: var(--nav-active);
-    }
   }
 
   .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);
+      }
     }
   }
 
@@ -340,15 +348,15 @@ export default {
           padding: 10px 10px 9px 7px;
           user-select: none;
         }
-
-        &:has(> a.nuxt-link-active) {
-          background: var(--nav-active);
-        }
       }
 
       > .body {
         margin-left: 0;
       }
+
+      &.group-highlight {
+        background: var(--nav-active);
+      }
     }
 
     &.depth-1 {
@@ -380,15 +388,6 @@ export default {
         }
       }
     }
-
-    &.expanded:has(> .active),
-    &.expanded:has(> ul li.nuxt-link-active) {
-      background: var(--nav-active);
-    }
-
-    &.expanded:has(> ul li.root) {
-      background: transparent;
-    }
   }
 
   .body ::v-deep > .child.nuxt-link-active,
@@ -427,5 +426,4 @@ export default {
       }
     }
   }
-
 </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');
@@ -720,6 +724,9 @@ export default {
       &.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;
     }

package/components/nav/Pinned.vue

@@ -0,0 +1,47 @@
+<script>
+// Allow the user to pin a cluster by clicking it.
+export default {
+  props: {
+    cluster: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    pinned() {
+      return this.cluster.pinned;
+    }
+  },
+
+  methods: {
+    toggle() {
+      if ( this.pinned ) {
+        this.cluster.unpin();
+      } else {
+        this.cluster.pin();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <i
+    :tabindex="0"
+    :aria-checked="!!pinned"
+    class="pin icon"
+    :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
+    aria-role="button"
+    @click.stop.prevent="toggle"
+    @keydown.enter.prevent="toggle"
+    @keydown.space.prevent="toggle"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .icon {
+    font-size: 14px;
+    transform: scaleX(-1);
+  }
+</style>