@rancher/shell 3.0.8 → 3.0.9-rc.2

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

@@ -1,55 +1,143 @@
 import { mount } from '@vue/test-utils';
-import Security from '@shell/components/form/Security.vue';
+import Security, { FORM_TYPES } from '@shell/components/form/Security.vue';
 import { _EDIT } from '@shell/config/query-params';
 
 describe('component: Security', () => {
-  it('should display all the inputs', () => {
-    const wrapper = mount(Security, { props: { mode: _EDIT } });
+  describe('formType: container', () => {
+    it('should display all the container inputs', () => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.CONTAINER } });
 
-    const inputWraps = wrapper.findAll('[data-testid^=input-security-]');
+      const inputWrappers = wrapper.findAll('[data-testid^=input-security-]');
+      const actualIds = inputWrappers.map((wrap) => wrap.attributes('data-testid'));
 
-    expect(inputWraps).toHaveLength(7);
-  });
+      const expectedIds = [
+        'input-security-privileged',
+        'input-security-allowPrivilegeEscalation',
+        'input-security-seccompProfile-type',
+        'input-security-runasNonRoot',
+        'input-security-runAsUser',
+        'input-security-readOnlyRootFilesystem',
+        'input-security-add',
+        'input-security-drop',
+      ];
 
-  it.each([
-    'runAsUser',
-  ])('should emit an update on %p input', (field) => {
-    const wrapper = mount(Security, { props: { mode: _EDIT } });
-    const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
-    const newValue = 123;
+      expect(actualIds).toStrictEqual(expect.arrayContaining(expectedIds));
+    });
 
-    input.setValue(newValue);
+    it('should hide fields when privileged is checked', async() => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.CONTAINER } });
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
-  });
+      // Before: Check that the fields are visible
+      let allowPrivilegeEscalation = wrapper.find('[data-testid="input-security-allowPrivilegeEscalation"]');
+      let seccompProfile = wrapper.find('[data-testid="input-security-seccompProfile-type"]');
+
+      expect(allowPrivilegeEscalation.exists()).toBe(true);
+      expect(seccompProfile.exists()).toBe(true);
+
+      // Action: Click the privileged checkbox
+      const privilegedCheckbox = wrapper
+        .find(`[data-testid="input-security-privileged"]`)
+        .find('label');
+
+      await privilegedCheckbox.trigger('click');
+
+      // After: Check that the fields are hidden
+      allowPrivilegeEscalation = wrapper.find('[data-testid="input-security-allowPrivilegeEscalation"]');
+      seccompProfile = wrapper.find('[data-testid="input-security-seccompProfile-type"]');
+
+      expect(allowPrivilegeEscalation.exists()).toBe(false);
+      expect(seccompProfile.exists()).toBe(false);
+    });
+
+    it('should display localhostProfile when seccompProfile type is Localhost', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, seccompProfileTypes: ['None', 'Unconfined', 'RuntimeDefault', 'Localhost']
+        }
+      });
+
+      // Set seccomp type to 'Localhost'
+      const seccompProfile = wrapper.findComponent({ name: 'SeccompProfile' });
+
+      (seccompProfile.vm as any).type = 'Localhost';
+      await wrapper.vm.$nextTick();
+
+      const localhostInput = wrapper.find('[data-testid="input-security-seccompProfile-localhostProfile"]');
 
-  it.each([
-    'privileged',
-    'allowPrivilegeEscalation',
-    'runasNonRoot',
-    'readOnlyRootFilesystem',
-  ])('should emit an update on %p radio option change', (field) => {
-    const wrapper = mount(Security, { props: { mode: _EDIT } });
-    const radioOption = wrapper
-      .find(`[data-testid="input-security-${ field }"]`)
-      .find('label');
+      expect(localhostInput.exists()).toBe(true);
+    });
 
-    radioOption.trigger('click');
+    it.each([
+      'runAsUser',
+    ])('should emit an update on %p input', (field) => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.CONTAINER } });
+      const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
+      const newValue = 123;
 
-    expect(wrapper.emitted('update:value')).toHaveLength(1);
+      input.setValue(newValue);
+
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
+    });
+
+    it.each([
+      'privileged',
+      'allowPrivilegeEscalation',
+      'runasNonRoot',
+      'readOnlyRootFilesystem',
+    ])('should emit an update on %p checkbox option change', (field) => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.CONTAINER } });
+      const radioOption = wrapper
+        .find(`[data-testid="input-security-${ field }"]`)
+        .find('label');
+
+      radioOption.trigger('click');
+
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
+    });
+
+    it.each([
+      'add',
+      'drop',
+    ])('should emit an update on %p selection change', async(field) => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.CONTAINER } });
+      const select = wrapper.find(`[data-testid="input-security-${ field }"]`);
+
+      select.find('button').trigger('click');
+      await wrapper.trigger('keydown.down');
+      await wrapper.trigger('keydown.enter');
+
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
+    });
   });
 
-  it.each([
-    'add',
-    'drop',
-  ])('should emit an update on %p selection change', async(field) => {
-    const wrapper = mount(Security, { props: { mode: _EDIT } });
-    const select = wrapper.find(`[data-testid="input-security-${ field }"]`);
+  describe('formType: pod', () => {
+    it('should display all the pod inputs', () => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.POD } });
+
+      const inputWrappers = wrapper.findAll('[data-testid^=input-security-]');
+      const actualIds = inputWrappers.map((wrap) => wrap.attributes('data-testid'));
+
+      const expectedIds = [
+        'input-security-fsGroup',
+        'input-security-seccompProfile-type',
+        'input-security-runasNonRoot',
+        'input-security-runAsUser',
+      ];
+
+      expect(actualIds).toStrictEqual(expect.arrayContaining(expectedIds));
+    });
+
+    it.each([
+      'fsGroup',
+      'runAsUser',
+    ])('should emit an update on %p input', (field) => {
+      const wrapper = mount(Security, { props: { mode: _EDIT, formType: FORM_TYPES.POD } });
+      const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
+      const newValue = 123;
 
-    select.find('button').trigger('click');
-    await wrapper.trigger('keydown.down');
-    await wrapper.trigger('keydown.enter');
+      input.setValue(newValue);
 
-    expect(wrapper.emitted('update:value')).toHaveLength(1);
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
+    });
   });
 });

package/components/formatter/Autoscaler.vue

@@ -46,8 +46,8 @@ const stopPropagation = (event: Event) => {
       >
         <RcButton
           v-if="row.canPauseResumeAutoscaler"
-          secondary
-          small
+          variant="secondary"
+          size="small"
           class="action"
           @click="() => {props.row.toggleAutoscalerRunner(); close()}"
         >

package/components/formatter/FleetSummaryGraph.vue

@@ -18,7 +18,7 @@ export default {
       type:     String,
       required: false,
       default:  null,
-    }
+    },
   },
 
   computed: {
@@ -26,6 +26,9 @@ export default {
       if (this.clusterId) {
         return this.row.statusResourceCountsForCluster(this.clusterId);
       }
+      if (this.row.statusResourceCountsForCluster) {
+        return this.row.statusResourceCountsForCluster;
+      }
 
       return this.row.status?.resourceCounts || {};
     },

package/components/nav/Group.vue

@@ -262,6 +262,8 @@ export default {
         role="button"
         :tabindex="fixedOpen ? -1 : 0"
         :aria-label="group.labelDisplay || group.label || ''"
+        :aria-expanded="!canCollapse || isExpanded"
+        :aria-controls="!canCollapse ? null : `group-${id}`"
         @click="groupSelected()"
         @keyup.enter="groupSelected()"
         @keyup.space="groupSelected()"
@@ -291,6 +293,8 @@ export default {
         role="button"
         tabindex="0"
         :aria-label="t('nav.ariaLabel.collapseExpand')"
+        :aria-expanded="isExpanded"
+        :aria-controls="`group-${id}`"
         @click="peek($event, true)"
         @keyup.enter="peek($event, true)"
         @keyup.space="peek($event, true)"
@@ -298,6 +302,7 @@ export default {
     </div>
     <ul
       v-if="isExpanded"
+      :id="`group-${id}`"
       class="list-unstyled body"
       v-bind="$attrs"
     >

package/components/nav/Header.vue

@@ -689,8 +689,8 @@ export default {
           :aria-label="t('nav.userMenu.label')"
         >
           <rc-dropdown-trigger
-            ghost
-            small
+            variant="ghost"
+            size="small"
             data-testid="nav_header_showUserMenu"
             :aria-label="t('nav.userMenu.button.label')"
           >
@@ -949,7 +949,7 @@ export default {
         width: 40px;
       }
 
-      :deep() div .btn.role-tertiary {
+      :deep() div .btn.role-tertiary, :deep() div .rc-button.btn.variant-tertiary  {
         border: 1px solid var(--header-btn-bg);
         border: none;
         background: var(--tertiary-header, var(--header-btn-bg));

package/components/nav/HeaderPageActionMenu.vue

@@ -16,7 +16,7 @@ const pageAction = (_event: Event, action: string) => {
     :button-aria-label="t('nav.actionMenu.label')"
     :dropdown-aria-label="t('nav.actionMenu.button.label')"
     data-testid="page-actions-menu-action-button"
-    button-role="tertiary"
+    button-variant="tertiary"
     @select="pageAction"
   />
 </template>

package/components/nav/NamespaceFilter.vue

@@ -785,8 +785,8 @@ export default {
           <!-- block user from removing the last selection if ns forced filtering is on -->
           <RcButton
             v-if="!namespaceFilterMode || value.length > 1"
-            small
-            ghost
+            size="small"
+            variant="ghost"
             class="ns-chip-button"
             :data-testid="`namespaces-values-close-${j}`"
             :aria-label="t('namespaceFilter.removeNamespace', { name: ns.label })"
@@ -847,8 +847,8 @@ export default {
           >
           <RcButton
             v-if="hasFilter"
-            small
-            ghost
+            size="small"
+            variant="ghost"
             class="ns-filter-clear"
             :aria-label="t('namespaceFilter.button.clearFilter')"
             @click="clearFilter"
@@ -870,8 +870,8 @@ export default {
         </div>
         <RcButton
           v-else
-          small
-          ghost
+          size="small"
+          variant="ghost"
           class="ns-clear"
           :aria-label="t('namespaceFilter.button.clear')"
           @click="clear"

package/components/nav/NotificationCenter/index.vue

@@ -36,7 +36,7 @@ const open = (opened: boolean) => {
     @update:open="open"
   >
     <rc-dropdown-trigger
-      tertiary
+      variant="tertiary"
       data-testid="notifications-center"
       :aria-label="t('nav.notifications.button.label')"
     >

package/components/nav/TopLevelMenu.helper.ts

@@ -28,7 +28,9 @@ interface UpdateArgs {
   searchTerm: string,
   pinnedIds: string[],
   unPinnedMax?: number,
-  forceWatch?: boolean
+  forceWatch?: boolean,
+  mgmtClusterRevision?: string,
+  provClusterRevision?: string,
 }
 
 type MgmtCluster = {
@@ -179,7 +181,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     // No need to monitor for changes, the UNPINNED request will handle it
     this.clustersPinnedWrapper = new PaginationWrapper({
       $store,
-      id:         'tlm-pinned-clusters',
+      id:         'top-level-menu-pinned-clusters',
       enabledFor: {
         store:    STORE.MANAGEMENT,
         resource: {
@@ -192,13 +194,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     // Fetch all UNPINNED clusters capped at 10 (see `clustersOthers` description for details)
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
-      id:       'tlm-unpinned-clusters',
-      onChange: async({ forceWatch }) => {
-        if (this.args) {
+      id:       'top-level-menu-unpinned-clusters',
+      onChange: async({ forceWatch, revision }) => {
+        if (!this.args) {
+          return;
+        }
+        try {
           await this.update({
             ...this.args,
-            forceWatch
+            forceWatch,
+            mgmtClusterRevision: revision,
           });
+        } catch {
+          // Failures should be logged lower down, not much we can do here except catch to prevent whole ui page warnings in dev mode
         }
       },
       enabledFor: {
@@ -213,13 +221,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     // Fetch all prov clusters for the mgmt clusters we have
     this.provClusterWrapper = new PaginationWrapper({
       $store,
-      id:       'tlm-prov-clusters',
-      onChange: async({ forceWatch }) => {
-        if (this.args) {
+      id:       'top-level-menu-prov-clusters',
+      onChange: async({ forceWatch, revision }) => {
+        if (!this.args) {
+          return;
+        }
+        try {
           await this.update({
             ...this.args,
-            forceWatch
+            forceWatch,
+            provClusterRevision: revision,
           });
+        } catch {
+          // Failures should be logged lower down, not much we can do here except catch to prevent whole ui page warnings in dev mode
         }
       },
       enabledFor: {
@@ -251,7 +265,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       pinned: MgmtCluster[],
       notPinned: MgmtCluster[]
     } = await allHash(promises) as any;
-    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args.forceWatch || false);
+
+    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args);
     const provClustersByMgmtId = provClusters.reduce((res: { [mgmtId: string]: ProvCluster}, provCluster: ProvCluster) => {
       if (provCluster.mgmtClusterId) {
         res[provCluster.mgmtClusterId] = provCluster;
@@ -357,7 +372,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-    }).then((r) => r.data);
+      revision: args.mgmtClusterRevision
+    })
+      .then((r) => r.data);
   }
 
   /**
@@ -378,15 +395,17 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-    }).then((r) => r.data);
+      revision: args.mgmtClusterRevision
+    })
+      .then((r) => r.data);
   }
 
   /**
    * Find all provisioning clusters associated with the displayed mgmt clusters
    */
-  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], forceWatch: boolean): Promise<ProvCluster[]> {
+  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], args: UpdateArgs): Promise<ProvCluster[]> {
     return this.provClusterWrapper.request({
-      forceWatch,
+      forceWatch: args.forceWatch,
       pagination: {
         filters: [
           PaginationParamFilter.createMultipleFields(
@@ -400,7 +419,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 [],
         projectsOrNamespaces: []
       },
-    }).then((r) => r.data);
+      revision: args.provClusterRevision
+    })
+      .then((r) => r.data);
   }
 }
 
@@ -585,6 +606,8 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
  */
 class TopLevelMenuHelperService {
   private _helper?: TopLevelMenuHelper;
+  public initialized = false;
+
   public init($store: VuexStore) {
     if (this._helper) {
       return;
@@ -599,6 +622,8 @@ class TopLevelMenuHelperService {
     });
 
     this._helper = canPagination ? new TopLevelMenuHelperPagination({ $store }) : new TopLevelMenuHelperLegacy({ $store });
+
+    this.initialized = true;
   }
 
   public async reset() {

package/components/nav/TopLevelMenu.vue

@@ -27,6 +27,9 @@ export default {
   },
 
   data() {
+    const sideNavServiceInitialized = sideNavService.initialized;
+    const maxClustersToShow = MENU_MAX_CLUSTERS;
+
     sideNavService.init(this.$store);
 
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
@@ -43,26 +46,27 @@ export default {
     const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : [];
     const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : [];
 
-    if (!canPagination) {
-      // Reduce the impact of the initial load, but only if we're not making a request
+    if (!canPagination || !sideNavServiceInitialized) {
+      // Reduce the impact of the initial load, or properly initialised
+      // Doing this here means we don't need an 'immediate' on the watches below
       const args = {
-        pinnedIds:   this.pinnedIds,
-        searchTerm:  this.search,
-        unPinnedMax: this.maxClustersToShow
+        pinnedIds:   this.$store.getters['prefs/get'](PINNED_CLUSTERS),
+        searchTerm:  '',
+        unPinnedMax: maxClustersToShow
       };
 
       helper.update(args);
     }
 
     return {
-      shown:             false,
+      shown:         false,
       displayVersion,
       fullVersion,
-      clusterFilter:     '',
+      clusterFilter: '',
       hasProvCluster,
-      maxClustersToShow: MENU_MAX_CLUSTERS,
-      emptyCluster:      BLANK_CLUSTER,
-      routeCombo:        false,
+      maxClustersToShow,
+      emptyCluster:  BLANK_CLUSTER,
+      routeCombo:    false,
 
       canPagination,
       helper,
@@ -284,7 +288,6 @@ export default {
     // 2. When SSP is disabled (legacy) reduce fn churn (this was a known performance customer issue)
 
     pinnedIds: {
-      immediate: true,
       handler(neu, old) {
         if (sameContents(neu, old)) {
           return;
@@ -302,20 +305,28 @@ export default {
 
     provClusters: {
       handler(neu, old) {
+        if (this.canPagination) {
+          // Shouldn't be doing this at all if pagination is on (updates handled by  TopLevelMenu pagination wrapper)
+          return;
+        }
+
         // Potentially incredibly high throughput. Changes should be at least limited (slow if state change, quick if added/removed). Shouldn't get here if SSP
         this.updateClusters(this.pinnedIds, neu?.length === old?.length ? 'slow' : 'quick');
       },
-      deep:      true,
-      immediate: true,
+      deep: true,
     },
 
     mgmtClusters: {
       handler(neu, old) {
+        if (this.canPagination) {
+          // Shouldn't be doing this at all if pagination is on (updates handled by  TopLevelMenu pagination wrapper)
+          return;
+        }
+
         // Potentially incredibly high throughput. Changes should be at least limited (slow if state change, quick if added/removed). Shouldn't get here if SSP
         this.updateClusters(this.pinnedIds, neu?.length === old?.length ? 'slow' : 'quick');
       },
-      deep:      true,
-      immediate: true,
+      deep: true,
     },
 
     hideLocalCluster() {
@@ -454,16 +465,25 @@ export default {
         unPinnedMax: this.maxClustersToShow
       };
 
-      switch (speed) {
-      case 'slow':
-        this.debouncedHelperUpdateSlow(args);
-        break;
-      case 'medium':
-        this.debouncedHelperUpdateMedium(args);
-        break;
-      case 'quick':
-        this.debouncedHelperUpdateQuick(args);
-        break;
+      try {
+        switch (speed) {
+        case 'slow':
+          this.debouncedHelperUpdateSlow(args);
+          break;
+        case 'medium':
+          this.debouncedHelperUpdateMedium(args);
+          break;
+        case 'quick':
+          this.debouncedHelperUpdateQuick(args);
+          break;
+        }
+      } catch (err) {
+        if (this.canPagination) {
+          // Double bubble up errors here, errors are tracked further down
+          // Note that this won't pick up async errors, further tweaks are required for that
+        } else {
+          throw err;
+        }
       }
     }
   }

package/components/nav/WorkspaceSwitcher.vue

@@ -66,7 +66,7 @@ export default {
   created() {
     // in fleet standard user with just the project owner and global git repo permissions
     // returns 'default'
-    const initValue = !this.workspace ? this.$store.getters['prefs/get'](LAST_NAMESPACE) : '';
+    const initValue = this.workspace || this.$store.getters['prefs/get'](LAST_NAMESPACE) || '';
 
     this.value = (initValue === 'default' || initValue === '') && this.options.length ? this.options[0].value : initValue;
   },