@rancher/shell 0.3.26 → 0.3.28

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

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
 import ArrayList from '@shell/components/form/ArrayList.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
 
 describe('the ArrayList', () => {
   it('is empty', () => {
@@ -71,4 +73,46 @@ describe('the ArrayList', () => {
 
     expect(arrayListButtons).toHaveLength(0);
   });
+
+  describe('onPaste', () => {
+    it('should emit value with updated row text', () => {
+      const text = 'test';
+      const expectation = [text];
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { value: [''] } });
+      const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
+
+      wrapper.vm.onPaste(0, event);
+
+      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+    });
+
+    it('should emit value with multiple rows', () => {
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { value: [''] } });
+      const text = `multiline
+      rows`;
+      const expectation = ['multiline', 'rows'];
+      const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
+
+      wrapper.vm.onPaste(0, event);
+
+      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+    });
+
+    it('should allow emit multiline pasted values if enabled', () => {
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+        propsData: {
+          value:          [''],
+          valueMultiline: true,
+        }
+      });
+      const text = `multiline
+      text`;
+      const expectation = [text];
+      const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
+
+      wrapper.vm.onPaste(0, event);
+
+      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+    });
+  });
 });

package/components/formatter/ClusterProvider.vue

@@ -6,23 +6,6 @@ export default {
       required: true
     },
   },
-  data(props) {
-    const mgmt = props.row?.mgmt;
-
-    return {
-      // The isImported getter on the provisioning cluster
-      // model doesn't work for imported K3s clusters, in
-      // which case it returns 'k3s' instead of 'imported.'
-      // This is the workaround.
-      isImported: mgmt?.providerForEmberParam === 'import' ||
-        // when imported cluster is GKE
-        !!mgmt?.spec?.gkeConfig?.imported ||
-        // or AKS
-        !!mgmt?.spec?.aksConfig?.imported ||
-        // or EKS
-        !!mgmt?.spec?.eksConfig?.imported
-    };
-  },
 };
 </script>
 
@@ -45,7 +28,7 @@ export default {
     <template v-else-if="row.isCustom">
       {{ t('cluster.provider.custom') }}
     </template>
-    <template v-else-if="isImported">
+    <template v-else-if="row.isImported">
       {{ t('cluster.provider.imported') }}
     </template>
     <div class="text-muted">

package/components/nav/Header.vue

@@ -706,7 +706,6 @@ 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;
 
@@ -724,9 +723,11 @@ 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;
+        .side-menu-logo {
+          margin-left: $side-menu-group-padding-left;
+        }
       }
     }
 
@@ -815,7 +816,7 @@ export default {
       display: flex;
       margin-right: 8px;
       height: 55px;
-      margin-left: $side-menu-logo-margin-left;
+      margin-left: 5px;
       max-width: 200px;
       padding: 12px 0;
     }

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/WindowManager/ContainerLogs.vue

@@ -274,33 +274,36 @@ export default {
       });
 
       this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        const line = base64Decode(e.detail.data);
+        const data = base64Decode(e.detail.data);
 
-        let msg = line;
-        let time = null;
+        // Websocket message may contain multiple lines - loop through each line, one by one
+        data.split('\n').forEach((line) => {
+          let msg = line;
+          let time = null;
 
-        const idx = line.indexOf(' ');
+          const idx = line.indexOf(' ');
 
-        if ( idx > 0 ) {
-          const timeStr = line.substr(0, idx);
-          const date = new Date(timeStr);
+          if ( idx > 0 ) {
+            const timeStr = line.substr(0, idx);
+            const date = new Date(timeStr);
 
-          if ( !isNaN(date.getSeconds()) ) {
-            time = date.toISOString();
-            msg = line.substr(idx + 1);
+            if ( !isNaN(date.getSeconds()) ) {
+              time = date.toISOString();
+              msg = line.substr(idx + 1);
+            }
           }
-        }
 
-        const parsedLine = {
-          id:     lastId++,
-          msg:    ansiup.ansi_to_html(msg),
-          rawMsg: msg,
-          time,
-        };
+          const parsedLine = {
+            id:     lastId++,
+            msg:    ansiup.ansi_to_html(msg),
+            rawMsg: msg,
+            time,
+          };
 
-        Object.freeze(parsedLine);
+          Object.freeze(parsedLine);
 
-        this.backlog.push(parsedLine);
+          this.backlog.push(parsedLine);
+        });
       });
 
       this.socket.connect();

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/product/manager.js

@@ -54,22 +54,10 @@ export function init(store) {
     route:      { name: 'c-cluster-manager-cloudCredential' },
   });
 
-  virtualType({
-    labelKey:   'legacy.psps',
-    name:       'pod-security-policies',
-    group:      'Root',
-    namespaced: false,
-    weight:     5,
-    icon:       'folder',
-    route:      { name: 'c-cluster-manager-pages-page', params: { cluster: 'local', page: 'pod-security-policies' } },
-    exact:      true
-  });
-
   basicType([
     CAPI.RANCHER_CLUSTER,
     'cloud-credentials',
     'drivers',
-    'pod-security-policies',
   ]);
 
   configureType(CAPI.RANCHER_CLUSTER, {
@@ -131,7 +119,6 @@ export function init(store) {
     CAPI.MACHINE_SET,
     CAPI.MACHINE,
     CATALOG.CLUSTER_REPO,
-    'pod-security-policies',
     MANAGEMENT.PSA
   ], 'advanced');
 

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 },