@rancher/shell 0.3.25 → 0.3.27

package/components/nav/TopLevelMenu.vue

@@ -50,7 +50,6 @@ export default {
   computed: {
     ...mapGetters(['clusterId']),
     ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct', 'isRancherInHarvester']),
-    ...mapGetters('type-map', ['activeProducts']),
     ...mapGetters({ features: 'features/get' }),
 
     value: {
@@ -59,9 +58,16 @@ export default {
       },
     },
 
+    sideMenuStyle() {
+      return {
+        marginBottom: this.globalBannerSettings?.footerFont,
+        marginTop:    this.globalBannerSettings?.headerFont
+      };
+    },
+
     globalBannerSettings() {
       const settings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
-      const bannerSettings = settings.find((s) => s.id === SETTING.BANNERS);
+      const bannerSettings = settings?.find((s) => s.id === SETTING.BANNERS);
 
       if (bannerSettings) {
         const parsed = JSON.parse(bannerSettings.value);
@@ -104,8 +110,8 @@ export default {
         kubeClusters = kubeClusters.filter((c) => !!available[c]);
       }
 
-      return kubeClusters.map((x) => {
-        const pCluster = pClusters?.find((c) => c.mgmt.id === x.id);
+      return kubeClusters?.map((x) => {
+        const pCluster = pClusters?.find((c) => c.mgmt?.id === x.id);
 
         return {
           id:              x.id,
@@ -120,14 +126,12 @@ export default {
           pin:             () => x.pin(),
           unpin:           () => x.unpin()
         };
-      });
+      }) || [];
     },
 
     clustersFiltered() {
       const search = (this.clusterFilter || '').toLowerCase();
-
-      const out = search ? this.clusters.filter((item) => item.label.toLowerCase().includes(search)) : this.clusters;
-
+      const out = search ? this.clusters.filter((item) => item.label?.toLowerCase().includes(search)) : this.clusters;
       const sorted = sortBy(out, ['ready:desc', 'label']);
 
       if (search) {
@@ -203,7 +207,7 @@ export default {
       const cluster = this.clusterId || this.$store.getters['defaultClusterId'];
 
       // TODO plugin routes
-      const entries = this.activeProducts.map((p) => {
+      const entries = this.$store.getters['type-map/activeProducts']?.map((p) => {
         // Try product-specific index first
         const to = p.to || {
           name:   `c-cluster-${ p.name }`,
@@ -314,22 +318,22 @@ export default {
 </script>
 <template>
   <div>
+    <!-- Overlay -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
     <transition name="fade">
+      <!-- Side menu -->
       <div
         data-testid="side-menu"
         class="side-menu"
         :class="{'menu-open': shown, 'menu-close':!shown}"
-        :style="{'marginBottom':
-                   globalBannerSettings?.footerFont,
-                 'marginTop':
-                   globalBannerSettings?.headerFont}"
+        :style="sideMenuStyle"
         tabindex="-1"
       >
+        <!-- Logo and name -->
         <div class="title">
           <div
             data-testid="top-level-menu"
@@ -351,8 +355,11 @@ export default {
             <BrandImage file-name="rancher-logo.svg" />
           </div>
         </div>
+
+        <!-- Menu body -->
         <div class="body">
           <div>
+            <!-- Home button -->
             <nuxt-link
               class="option cluster selector home"
               :to="{ name: 'home' }"
@@ -371,6 +378,8 @@ export default {
                 {{ t('nav.home') }}
               </div>
             </nuxt-link>
+
+            <!-- Search bar -->
             <div
               v-if="showClusterSearch"
               class="clusters-search"
@@ -400,6 +409,8 @@ export default {
               </div>
             </div>
           </div>
+
+          <!-- Harvester extras -->
           <template v-if="hciApps.length">
             <div class="category" />
             <div>
@@ -416,7 +427,6 @@ export default {
                 </div>
               </a>
             </div>
-
             <div
               v-for="a in hciApps"
               :key="a.label"
@@ -435,12 +445,14 @@ export default {
             </div>
           </template>
 
+          <!-- Cluster menu -->
           <template v-if="clusters && !!clusters.length">
             <div
               ref="clusterList"
               class="clusters"
               :style="pinnedClustersHeight"
             >
+              <!-- Pinned Clusters -->
               <div
                 v-if="showPinClusters && pinFiltered.length"
                 class="clustersPinned"
@@ -490,10 +502,13 @@ export default {
                   <hr>
                 </div>
               </div>
+
+              <!-- Clusters Search result -->
               <div class="clustersList">
                 <div
-                  v-for="c in clustersFiltered"
+                  v-for="(c, index) in clustersFiltered"
                   :key="c.id"
+                  :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
                   <nuxt-link
@@ -532,14 +547,18 @@ export default {
                   </span>
                 </div>
               </div>
+
+              <!-- No clusters message -->
               <div
                 v-if="(clustersFiltered.length === 0 || pinFiltered.length === 0) && searchActive"
+                data-testid="top-level-menu-no-results"
                 class="none-matching"
               >
                 {{ t('nav.search.noResults') }}
               </div>
             </div>
 
+            <!-- See all clusters -->
             <nuxt-link
               v-if="clusters.length > maxClustersToShow"
               class="clusters-all"
@@ -611,6 +630,8 @@ export default {
                 </nuxt-link>
               </div>
             </template>
+
+            <!-- App menu -->
             <template v-if="configurationApps.length">
               <div
                 class="category-title"
@@ -640,6 +661,8 @@ export default {
             </template>
           </div>
         </div>
+
+        <!-- Footer -->
         <div
           class="footer"
         >

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -0,0 +1,120 @@
+import { mount, Wrapper } from '@vue/test-utils';
+import TopLevelMenu from '@shell/components/nav/TopLevelMenu';
+
+// DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
+const defaultStore = {
+  'management/byId':         jest.fn(),
+  'management/schemaFor':    jest.fn(),
+  'i18n/t':                  jest.fn(),
+  'features/get':            jest.fn(),
+  'prefs/theme':             jest.fn(),
+  defaultClusterId:          jest.fn(),
+  clusterId:                 jest.fn(),
+  'type-map/activeProducts': [],
+};
+
+describe('topLevelMenu', () => {
+  it('should display clusters', () => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      mocks: {
+        $store: {
+          getters: {
+            'management/all': () => [{ name: 'whatever' }],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'nuxt-link']
+    });
+
+    const cluster = wrapper.find('[data-testid="top-level-menu-cluster-0"]');
+
+    expect(cluster.exists()).toBe(true);
+  });
+
+  describe('searching a term', () => {
+    describe('should displays a no results message if have clusters but', () => {
+      it('given no matching clusters', () => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: 'whatever' }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: 'something else' }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(noResults.exists()).toBe(true);
+      });
+
+      it('given no matched pinned clusters', () => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: 'whatever' }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: 'something else', pinned: true }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(noResults.exists()).toBe(true);
+      });
+    });
+
+    describe('should not displays a no results message', () => {
+      it('given matching clusters', () => {
+        const search = 'you found me';
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: search }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: search }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(wrapper.vm.clustersFiltered).toHaveLength(1);
+        expect(noResults.exists()).toBe(false);
+      });
+
+      it('given clusters with status pinned', () => {
+        const search = 'you found me';
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: search }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: search, pinned: true }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(wrapper.vm.pinFiltered).toHaveLength(1);
+        expect(noResults.exists()).toBe(false);
+      });
+    });
+  });
+});

package/components/nav/__tests__/Type.test.ts

@@ -0,0 +1,139 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import Type from '@shell/components/nav/Type.vue';
+
+// Mandatory to mock vue-router in this test
+jest.mock('vue-router');
+
+// Configuration text
+const className = 'nuxt-link-active';
+
+describe('component: Type', () => {
+  describe('should not use highlight class', () => {
+    it('given no hash', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'something else' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route:  { path: 'whatever' },
+          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it('given no path', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'something else' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route:  { hash: 'whatever' },
+          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it('given no matching values', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: {} },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'hash',
+            path: 'path',
+          },
+          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it('given navigation path is bigger than current page route path', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'not empty' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'not empty',
+            path: 'whatever',
+          },
+          $router: { resolve: () => ({ route: { path: 'many/parts' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it.each([
+      // URL with fragments like anchors
+      [
+        '/c/c-m-hzqf4tqt/explorer/members#project-membership',
+        '/c/c-m-hzqf4tqt/explorer/members'
+      ],
+      // Similar paths
+      [
+        '/c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundlenamespacemapping',
+        '/c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundle'
+      ],
+      // paths with same parts, e.g. parents
+      [
+        '/c/c-m-hzqf4tqt/fleet',
+        '/c/c-m-hzqf4tqt/fleet/management.cattle.io.fleetworkspace'
+      ],
+    ])('given different current path %p and menu path %p', (currentPath, menuPath) => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'not empty' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'not empty',
+            path: currentPath,
+          },
+          $router: { resolve: () => ({ route: { path: menuPath } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+  });
+
+  describe('should use highlight class', () => {
+    it.each([
+      [
+        'same',
+        'same'
+      ],
+    ])('given same current path %p and menu path %p (on first load)', (currentPath, menuPath) => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'not empty' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'not empty',
+            path: currentPath,
+          },
+          $router: { resolve: () => ({ route: { path: menuPath } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(true);
+    });
+  });
+});
+
+jest.restoreAllMocks();

package/config/private-label.js

@@ -3,7 +3,7 @@ import { SETTING } from './settings';
 export const ANY = 0;
 export const STANDARD = 1;
 export const CUSTOM = 2;
-export const DOCS_BASE = 'https://rancher.com/docs/rancher/v2.7/en';
+export const DOCS_BASE = 'https://ranchermanager.docs.rancher.com/v2.8';
 
 const STANDARD_VENDOR = 'Rancher';
 const STANDARD_PRODUCT = 'Explorer';

package/config/settings.ts

@@ -42,7 +42,6 @@ export const SETTING = {
   HIDE_LOCAL_CLUSTER:                   'hide-local-cluster',
   AUTH_TOKEN_MAX_TTL_MINUTES:           'auth-token-max-ttl-minutes',
   KUBECONFIG_GENERATE_TOKEN:            'kubeconfig-generate-token',
-  KUBECONFIG_TOKEN_TTL_MINUTES:         'kubeconfig-token-ttl-minutes',
   KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES: 'kubeconfig-default-token-ttl-minutes',
   ENGINE_URL:                           'engine-install-url',
   ENGINE_ISO_URL:                       'engine-iso-url',
@@ -127,7 +126,6 @@ export const ALLOWED_SETTINGS: GlobalSetting = {
   [SETTING.AUTH_USER_SESSION_TTL_MINUTES]:        {},
   [SETTING.AUTH_TOKEN_MAX_TTL_MINUTES]:           {},
   [SETTING.KUBECONFIG_GENERATE_TOKEN]:            { kind: 'boolean' },
-  [SETTING.KUBECONFIG_TOKEN_TTL_MINUTES]:         {},
   [SETTING.KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES]: { kind: 'integer' },
   [SETTING.AUTH_USER_INFO_RESYNC_CRON]:           {},
   [SETTING.SERVER_URL]:                           { kind: 'url', canReset: true },

package/core/types.ts

@@ -323,6 +323,11 @@ export interface ConfigureTypeOptions {
    */
   isRemovable?: boolean;
 
+  /**
+   * Resources of this type can be edited
+   */
+  isEditable?: boolean;
+
   /**
    * This type should be grouped by namespaces when displayed in a table
    */
@@ -343,16 +348,18 @@ export interface ConfigureTypeOptions {
    */
   showState?: boolean;
 
+  /**
+   * Define where this type/page should navigate to (menu entry routing)
+   */
+  customRoute?: Object;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
   // alias
-  // customRoute
-  // customRoute
   // depaginate
   // graphConfig
   // hasGraph
-  // isEditable
   // limit
   // listGroups
   // localOnly
@@ -379,7 +386,7 @@ export interface ConfigureVirtualTypeOptions extends ConfigureTypeOptions {
   /**
    * The route that this type should correspond to {@link PluginRouteConfig} {@link RouteConfig}
    */
-  route: PluginRouteConfig | RouteConfig;
+  route: PluginRouteConfig | RouteConfig | Object;
 }
 
 export interface DSLReturnType {

package/edit/provisioning.cattle.io.cluster/Basics.vue

@@ -377,6 +377,13 @@ export default {
       const canNotEdit = this.clusterIsAlreadyCreated && !this.unsupportedCloudProvider;
 
       return canNotEdit;
+    },
+
+    /**
+     * Display warning about additional configuration needed for cloud provider Amazon if kube >= 1.27
+     */
+    showCloudProviderAmazonAdditionalConfigWarning() {
+      return !!semver.gte(this.value.spec.kubernetesVersion, 'v1.27.0') && this.agentConfig['cloud-provider-name'] === 'aws';
     }
   },
 
@@ -413,6 +420,12 @@ export default {
         v-clean-html="t('cluster.harvester.warning.cloudProvider.incompatible', null, true)"
       />
     </Banner>
+    <Banner
+      v-if="showCloudProviderAmazonAdditionalConfigWarning"
+      color="warning"
+    >
+      <span v-clean-html="t('cluster.banner.cloudProviderAddConfig', {}, true)" />
+    </Banner>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledSelect

package/edit/provisioning.cattle.io.cluster/CustomCommand.vue

@@ -55,7 +55,7 @@ export default {
       this.controlPlane && out.push('--controlplane');
       this.worker && out.push('--worker');
       this.address && out.push(`--address ${ sanitizeIP(this.address) }`);
-      this.internalAddress && out.push(`--internal-address ${ sanitizeValue(this.internalAddress) }`);
+      this.internalAddress && out.push(`--internal-address ${ sanitizeIP(this.internalAddress) }`);
       this.nodeName && out.push(`--node-name ${ sanitizeValue(this.nodeName) }`);
 
       for ( const key in this.labels ) {

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -864,7 +864,7 @@ export default {
   },
 
   created() {
-    this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools');
+    this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools', 1);
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
@@ -1235,7 +1235,23 @@ export default {
 
     async saveMachinePools(hookContext) {
       if (hookContext === CONTEXT_HOOK_EDIT_YAML) {
-        return;
+        await new Promise((resolve, reject) => {
+          this.$store.dispatch('cluster/promptModal', {
+            component:      'GenericPrompt',
+            componentProps: {
+              title:     this.t('cluster.rke2.modal.editYamlMachinePool.title'),
+              body:      this.t('cluster.rke2.modal.editYamlMachinePool.body'),
+              applyMode: 'editAndContinue',
+              confirm:   (confirmed) => {
+                if (confirmed) {
+                  resolve();
+                } else {
+                  reject(new Error('User Cancelled'));
+                }
+              }
+            },
+          });
+        });
       }
 
       const finalPools = [];

package/edit/workload/mixins/workload.js

@@ -146,10 +146,20 @@ export default {
 
   async fetch() {
     // TODO Should remove these lines
-    await allHash({
-      rancherClusters:  this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-      harvesterConfigs: this.$store.dispatch('management/findAll', { type: HCI.HARVESTER_CONFIG }),
-    });
+    // ? The results aren't stored, so don't know why we fetch?
+
+    // User might not have access to these resources - so check before trying to fetch
+    const fetches = {};
+
+    if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
+      fetches.rancherClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+    }
+
+    if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {
+      fetches.harvesterConfigs = this.$store.dispatch('management/findAll', { type: HCI.HARVESTER_CONFIG });
+    }
+
+    await allHash(fetches);
 
     // don't block UI for these resources
     this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);

package/models/fleet.cattle.io.cluster.js

@@ -5,6 +5,7 @@ import SteveModel from '@shell/plugins/steve/steve-class';
 import { escapeHtml } from '@shell/utils/string';
 import { insertAt } from '@shell/utils/array';
 import jsyaml from 'js-yaml';
+import { FLEET_WORKSPACE_BACK } from '@shell/store/features';
 
 export default class FleetCluster extends SteveModel {
   get _availableActions() {
@@ -80,7 +81,16 @@ export default class FleetCluster extends SteveModel {
   }
 
   get canChangeWorkspace() {
-    return !this.isRke2 && !this.isLocal;
+    // https://github.com/rancher/dashboard/issues/7745
+    if (this.isLocal) {
+      return false;
+    }
+    // https://github.com/rancher/dashboard/issues/9730
+    if (this.isRke2) {
+      return this.$rootGetters['features/get'](FLEET_WORKSPACE_BACK);
+    }
+
+    return true;
   }
 
   get isLocal() {

package/models/management.cattle.io.globalrole.js

@@ -144,7 +144,7 @@ export default class GlobalRole extends SteveDescriptionModel {
     const norman = await this.norman;
 
     for (const rule of norman.rules) {
-      if (rule.nonResourceURLs.length) {
+      if (rule.nonResourceURLs && rule.nonResourceURLs.length) {
         delete rule.resources;
         delete rule.apiGroups;
       } else {

package/models/management.cattle.io.roletemplate.js

@@ -192,7 +192,7 @@ export default class RoleTemplate extends SteveDescriptionModel {
     const norman = await this.norman;
 
     for (const rule of norman.rules) {
-      if (rule.nonResourceURLs.length) {
+      if (rule.nonResourceURLs && rule.nonResourceURLs.length) {
         delete rule.resources;
         delete rule.apiGroups;
       } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.25",
+  "version": "0.3.27",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",