@rancher/shell 0.5.3 → 1.2.0

package/components/nav/WindowManager/ContainerLogs.vue

@@ -2,7 +2,7 @@
 import { saveAs } from 'file-saver';
 import AnsiUp from 'ansi_up';
 import { addParams } from '@shell/utils/url';
-import { base64DecodeToBuffer } from '@shell/utils/crypto';
+import { base64Decode } from '@shell/utils/crypto';
 import { LOGS_RANGE, LOGS_TIME, LOGS_WRAP } from '@shell/store/prefs';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -25,61 +25,6 @@ import Window from './Window';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
-// Convert arrayBuffer(Uint8Array) to string
-// ref: https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder
-// ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of
-const ab2str = (input, outputEncoding = 'utf8') => {
-  const decoder = new TextDecoder(outputEncoding);
-
-  return decoder.decode(input);
-};
-
-// The utf-8 encoded messages pushed by websocket may truncate multi-byte utf-8 characters,
-// which causes the front-end to be unable to parse the truncated multi-byte utf-8 characters in the previous and next messages when decoding.
-// Therefore, we need to determine whether the last 4 bytes of the current pushed message contain incomplete utf-8 encoded characters.
-// ref: https://en.wikipedia.org/wiki/UTF-8#Encoding
-const isLogTruncated = (uint8ArrayBuffer) => {
-  const len = uint8ArrayBuffer.length;
-  const count = Math.min(4, len);
-  let isTruncated = false;
-
-  // Parses the last ${count} bytes of the array to determine if there are any truncated utf-8 characters.
-  for ( let i = 0; i < count; i++ ) {
-    const a = uint8ArrayBuffer[len - (1 + i)];
-
-    // 1 byte utf-8 character in binary form: 0xxxxxxxxx
-    if ((a & 0b10000000) === 0b00000000) {
-      break;
-    }
-    // Multi-byte utf-8 character, intermediate binary form: 10xxxxxx
-    if ((a & 0b11000000) === 0b10000000) {
-      continue;
-    }
-    // 2 byte utf-8 character in binary form: 110xxxxx 10xxxxxx
-    if ((a & 0b11100000) === 0b11000000) {
-      if ( i !== 1) {
-        isTruncated = true;
-      }
-      break;
-    }
-    // 3 byte utf-8 character in binary form: 1110xxxx 10xxxxxx 10xxxxxx
-    if ((a & 0b11110000) === 0b11100000) {
-      if (i !== 2) {
-        isTruncated = true;
-      }
-      break;
-    }
-    // 4 byte utf-8 character in binary form: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
-    if ((a & 0b11111000) === 0b11110000) {
-      if (i !== 3) {
-        isTruncated = true;
-      }
-      break;
-    }
-  }
-
-  return isTruncated;
-};
 
 export default {
   components: {
@@ -328,80 +273,34 @@ export default {
         console.error('Connect Error', e); // eslint-disable-line no-console
       });
 
-      let logBuffer = [];
-      let truncatedLog = '';
-
       this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        const decodedData = e.detail?.data || '';
-        const replacedData = decodedData.replace(/[-_]/g, (char) => char === '-' ? '+' : '/');
-        const b = base64DecodeToBuffer(replacedData);
-        const isTruncated = isLogTruncated(b);
+        const line = base64Decode(e.detail.data);
 
-        if (isTruncated === true) {
-          logBuffer.push(...b);
-
-          return;
-        }
+        let msg = line;
+        let time = null;
 
-        let d;
-
-        // If the logBuffer is not empty,
-        // there are truncated utf-8 characters in the previous message
-        // that need to be merged with the current message before decoding.
-        if (logBuffer.length > 0) {
-          // Convert arrayBuffer(Uint8Array) to string
-          // ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of
-          d = ab2str(Uint8Array.of(...logBuffer, ...b));
-          logBuffer = [];
-        } else {
-          d = b.toString();
-        }
-        let data = d;
-
-        if (truncatedLog) {
-          data = `${ truncatedLog }${ d }`;
-          truncatedLog = '';
-        }
+        const idx = line.indexOf(' ');
 
-        if (!d.endsWith('\n')) {
-          const lines = data.split(/\n/);
+        if ( idx > 0 ) {
+          const timeStr = line.substr(0, idx);
+          const date = new Date(timeStr);
 
-          if (lines.length === 1) {
-            truncatedLog = data;
-
-            return;
+          if ( !isNaN(date.getSeconds()) ) {
+            time = date.toISOString();
+            msg = line.substr(idx + 1);
           }
-          data = lines.slice(0, -1).join('\n');
-          truncatedLog = lines.slice(-1);
         }
-        // Websocket message may contain multiple lines - loop through each line, one by one
-        data.split('\n').filter((line) => line).forEach((line) => {
-          let msg = line;
-          let time = null;
-
-          const idx = line.indexOf(' ');
-
-          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);
-            }
-          }
-
-          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/WindowManager/ContainerShell.vue

@@ -79,7 +79,6 @@ export default {
       fitAddon:       null,
       searchAddon:    null,
       webglAddon:     null,
-      canvasAddon:    null,
       isOpen:         false,
       isOpening:      false,
       backlog:        [],
@@ -156,7 +155,6 @@ export default {
         webgl:    import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
         weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
         search:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
-        canvas:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-canvas')
       });
 
       const terminal = new xterm.Terminal({
@@ -173,11 +171,10 @@ export default {
       this.searchAddon = new addons.search.SearchAddon();
 
       try {
-        this.webglAddon = new addons.webgl.WebglAddon();
+        this.webglAddon = new addons.webgl.WebGlAddon();
       } catch (e) {
         // Some browsers (Safari) don't support the webgl renderer, so don't use it.
         this.webglAddon = null;
-        this.canvasAddon = new addons.canvas.CanvasAddon();
       }
 
       terminal.loadAddon(this.fitAddon);
@@ -187,8 +184,6 @@ export default {
 
       if (this.webglAddon) {
         terminal.loadAddon(this.webglAddon);
-      } else {
-        terminal.loadAddon(this.canvasAddon);
       }
 
       this.fit();

package/components/nav/WindowManager/index.vue

@@ -20,6 +20,10 @@ export default {
 
     height: {
       get() {
+        if ( process.server ) {
+          return 0;
+        }
+
         if ( this.userHeight ) {
           return this.userHeight;
         }
@@ -48,6 +52,10 @@ export default {
 
     width: {
       get() {
+        if ( process.server ) {
+          return 0;
+        }
+
         if (this.userWidth) {
           return this.userWidth;
         }
@@ -334,8 +342,7 @@ export default {
         />
         <span class="tab-label"> {{ tab.label }}</span>
         <i
-          data-testid="wm-tab-close-button"
-          class="closer icon icon-fw icon-x wm-closer-button"
+          class="closer icon icon-fw icon-x"
           @click.stop="close(tab.id)"
         />
       </div>
@@ -433,16 +440,9 @@ export default {
           margin-left: 5px;
           border: 1px solid var(--body-text);
           border-radius: var(--border-radius);
-          line-height: 12px;
-          font-size: 10px;
-          width: 14px;
-          align-self: center;
-          display: flex;
-          justify-content: center;
 
           &:hover {
-            border-color: var(--link-border);
-            color: var(--link-border);
+            background-color: var(--wm-closer-hover-bg);
           }
         }
       }
@@ -502,5 +502,4 @@ export default {
       border-right: var(--nav-border-size) solid var(--nav-border);
     }
   }
-
 </style>

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

@@ -1,6 +1,5 @@
-import TopLevelMenu from '@shell/components/nav/TopLevelMenu';
-import { SETTING } from '@shell/config/settings';
 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 = {
@@ -33,38 +32,6 @@ describe('topLevelMenu', () => {
     expect(cluster.exists()).toBe(true);
   });
 
-  it('should not "crash" the component if the structure of banner settings is in an old format', () => {
-    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-      mocks: {
-        $store: {
-          getters: {
-            'management/all': () => [{ name: 'whatever' },
-              // object based on https://github.com/rancher/dashboard/issues/10140#issuecomment-1883252402
-              {
-                id:    SETTING.BANNERS,
-                value: JSON.stringify({
-                  banner: {
-                    color:      '#78c9cf',
-                    background: '#27292e',
-                    text:       'Hello World!'
-                  },
-                  showHeader: 'true',
-                  showFooter: 'true'
-                })
-              }],
-            ...defaultStore
-          },
-        },
-      },
-      stubs: ['BrandImage', 'nuxt-link']
-    });
-
-    expect(wrapper.vm.globalBannerSettings).toStrictEqual({
-      headerFont: '2em',
-      footerFont: '2em'
-    });
-  });
-
   describe('searching a term', () => {
     describe('should displays a no results message if have clusters but', () => {
       it('given no matching clusters', () => {

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

@@ -5,7 +5,7 @@ import Type from '@shell/components/nav/Type.vue';
 jest.mock('vue-router');
 
 // Configuration text
-const className = 'router-link-active';
+const className = 'nuxt-link-active';
 
 describe('component: Type', () => {
   describe('should not use highlight class', () => {
@@ -16,12 +16,6 @@ describe('component: Type', () => {
         mocks:     {
           $route:  { path: 'whatever' },
           $router: { resolve: () => ({ route: { path: 'whatever' } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
         },
       });
 
@@ -37,12 +31,6 @@ describe('component: Type', () => {
         mocks:     {
           $route:  { hash: 'whatever' },
           $router: { resolve: () => ({ route: { path: 'whatever' } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
         },
       });
 
@@ -79,12 +67,6 @@ describe('component: Type', () => {
             path: 'whatever',
           },
           $router: { resolve: () => ({ route: { path: 'many/parts' } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
         },
       });
 
@@ -119,12 +101,6 @@ describe('component: Type', () => {
             path: currentPath,
           },
           $router: { resolve: () => ({ route: { path: menuPath } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
         },
       });
 
@@ -150,12 +126,6 @@ describe('component: Type', () => {
             path: currentPath,
           },
           $router: { resolve: () => ({ route: { path: menuPath } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
         },
       });
 

package/components/nuxt/nuxt-child.js

@@ -18,8 +18,10 @@ export default {
 
     data.nuxtChild = true
     const _parent = parent
-    let depth = 0
+    const transitions = parent.$nuxt.nuxt.transitions
+    const defaultTransition = parent.$nuxt.nuxt.defaultTransition
 
+    let depth = 0
     while (parent) {
       if (parent.$vnode && parent.$vnode.data.nuxtChild) {
         depth++
@@ -27,18 +29,48 @@ export default {
       parent = parent.$parent
     }
     data.nuxtChildDepth = depth
+    const transition = transitions[depth] || defaultTransition
+    const transitionProps = {}
+    transitionsKeys.forEach((key) => {
+      if (typeof transition[key] !== 'undefined') {
+        transitionProps[key] = transition[key]
+      }
+    })
 
     const listeners = {}
-    
-    // Add triggerScroll event on beforeEnter (fix #1376)
-    const beforeEnter = listeners.beforeEnter
-    listeners.beforeEnter = (el) => {
-      // Ensure to trigger scroll event after calling scrollBehavior
-      window.$nuxt.$nextTick(() => {
-        window.$nuxt.$emit('triggerScroll')
-      })
-      if (beforeEnter) {
-        return beforeEnter.call(_parent, el)
+    listenersKeys.forEach((key) => {
+      if (typeof transition[key] === 'function') {
+        listeners[key] = transition[key].bind(_parent)
+      }
+    })
+    if (process.client) {
+      // Add triggerScroll event on beforeEnter (fix #1376)
+      const beforeEnter = listeners.beforeEnter
+      listeners.beforeEnter = (el) => {
+        // Ensure to trigger scroll event after calling scrollBehavior
+        window.$nuxt.$nextTick(() => {
+          window.$nuxt.$emit('triggerScroll')
+        })
+        if (beforeEnter) {
+          return beforeEnter.call(_parent, el)
+        }
+      }
+    }
+
+    // make sure that leave is called asynchronous (fix #5703)
+    if (transition.css === false) {
+      const leave = listeners.leave
+
+      // only add leave listener when user didnt provide one
+      // or when it misses the done argument
+      if (!leave || leave.length < 2) {
+        listeners.leave = (el, done) => {
+          if (leave) {
+            leave.call(_parent, el)
+          }
+
+          _parent.$nextTick(done)
+        }
       }
     }
 
@@ -48,11 +80,43 @@ export default {
       routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
     }
 
-    // this needs to be a "transition" or another non-rendering component, 
-    // otherwise we will break pages like the charts wizard or the extensions main screen (DOM would render an additional element and break CSS)
-    // we can deal with this later once we remove this component and <nuxt /> component
     return h('transition', {
+      props: transitionProps,
       on: listeners
     }, [routerView])
   }
 }
+
+const transitionsKeys = [
+  'name',
+  'mode',
+  'appear',
+  'css',
+  'type',
+  'duration',
+  'enterClass',
+  'leaveClass',
+  'appearClass',
+  'enterActiveClass',
+  'enterActiveClass',
+  'leaveActiveClass',
+  'appearActiveClass',
+  'enterToClass',
+  'leaveToClass',
+  'appearToClass'
+]
+
+const listenersKeys = [
+  'beforeEnter',
+  'enter',
+  'afterEnter',
+  'enterCancelled',
+  'beforeLeave',
+  'leave',
+  'afterLeave',
+  'leaveCancelled',
+  'beforeAppear',
+  'appear',
+  'afterAppear',
+  'appearCancelled'
+]

package/components/nuxt/nuxt.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { compile } from '../../utils/nuxt'
 
-import NuxtError from '../../components/templates/error.vue'
+import NuxtError from '../../layouts/error.vue'
 
 import NuxtChild from './nuxt-child'
 

package/components/user.retention/user-retention-header.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import TabTitle from '@shell/components/TabTitle';
+</script>
+
+<template>
+  <div>
+    <header>
+      <div class="title">
+        <h1
+          data-testid="charts-header-title"
+          class="m-0"
+        >
+          <TabTitle :show-child="false">
+            {{ t('user.retention.edit.title.header') }}
+          </TabTitle>
+          <router-link
+            :to="{
+              name: 'c-cluster-product-resource',
+              params: {
+                cluster: '_',
+                product: 'auth',
+                resource: 'management.cattle.io.user',
+              }
+            }"
+          >
+            {{ t('user.retention.edit.title.pre') }}
+          </router-link>
+          {{ t('user.retention.edit.title.post') }}
+        </h1>
+      </div>
+    </header>
+    <h2>{{ t('user.retention.edit.title.subTitle') }}</h2>
+  </div>
+</template>

package/composables/useI18n.ts

@@ -0,0 +1,26 @@
+import { Store } from 'vuex';
+
+import { stringFor } from '@shell/plugins/i18n';
+
+let store: Store<any> | null = null;
+
+export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
+  store = vuexStore;
+
+  if (!store) {
+    throw new Error('usI18n() must be called from setup()');
+  }
+
+  return { t };
+};
+
+/**
+ * Allows for consuming i18n strings with the Vue composition API.
+ * @param key - The key for the i18n string to translate.
+ * @param args - An object or array containing arguments for the translation function.
+ * @param raw - A boolean determining if the string returned is a raw representation.
+ * @returns A translated string or the raw value if the raw parameter is set to true.
+ */
+const t = (key: string, args?: unknown, raw?: boolean): unknown => {
+  return stringFor(store, key, args, raw);
+};

package/composables/useStore.ts

@@ -0,0 +1,16 @@
+import { getCurrentInstance } from 'vue';
+import { Store } from 'vuex';
+
+/**
+ * useStore allows for accessing Vuex stores from within a setup function. This is a temporary measure for working with
+ * Vuex in Vue2.
+ *
+ * TODO: #9541 Remove for Vue 3 migration
+ */
+export const useStore = ():Store<any> => {
+  const vm = getCurrentInstance();
+
+  if (!vm) throw new Error('useStore() must be called from setup()');
+
+  return vm.proxy.$store;
+};

package/config/harvester-manager-types.js

@@ -1,3 +1 @@
 export const NAME = 'harvesterManager';
-
-export const KIND = { MACHINE_TEMPLATE: 'HarvesterMachineTemplate' };

package/config/home-links.js

@@ -2,6 +2,7 @@ import { DOCS_BASE } from '@shell/config/private-label';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { allHash } from '@shell/utils/promise';
+import { isRancherPrime } from '@shell/config/version';
 
 const DEFAULT_LINKS = [
   {
@@ -26,11 +27,17 @@ const DEFAULT_LINKS = [
   },
   {
     key:     'getStarted',
-    value:   `${ DOCS_BASE }/getting-started/overview`,
+    value:   'https://ranchermanager.docs.rancher.com/getting-started/overview',
     enabled: true,
   },
 ];
 
+const COLLECTIVE_LINK = {
+  key:     'suseCollective',
+  value:   'https://susecollective.suse.com/join/prime',
+  enabled: true,
+};
+
 const SUPPORT_LINK = {
   key:      'commercialSupport',
   value:    '/support',
@@ -47,6 +54,9 @@ const CN_FORUMS_LINK = {
 // We add a version attribute to the setting so we know what has been migrated and which version of the setting we have
 export const CUSTOM_LINKS_VERSION = 'v1';
 
+// Version with collective added (Prime)
+export const CUSTOM_LINKS_COLLECTIVE_VERSION = 'v1.1';
+
 // Fetch the settings required for the links, taking into account legacy settings if we have not migrated
 export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   let uiLinks = {};
@@ -63,11 +73,26 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   }
 
   // If uiLinks is set and has the correct version, then we are okay, otherwise we need to migrate from the old settings
-  if (uiLinks?.version === CUSTOM_LINKS_VERSION) {
+  if (uiLinks?.version?.startsWith(CUSTOM_LINKS_VERSION)) {
+    // v1 > v1.1 migration
+    if (uiLinks?.version === CUSTOM_LINKS_VERSION) {
+      uiLinks.version = CUSTOM_LINKS_COLLECTIVE_VERSION;
+
+      // Add collective link so that it is enabled by default
+      if (!uiLinks.defaults.includes(COLLECTIVE_LINK.key)) {
+        uiLinks.defaults.push(COLLECTIVE_LINK.key);
+      }
+    }
+
     // Map out the default settings, as we only store keys of the ones to show
     if (uiLinks.defaults) {
       const defaults = [...DEFAULT_LINKS];
 
+      // Add prime link if necessary
+      if (isRancherPrime()) {
+        defaults.push(COLLECTIVE_LINK);
+      }
+
       // Map the link name stored to the default link, if it exists
       defaults.forEach((link) => {
         const enabled = uiLinks.defaults.find((linkName) => linkName === link.key);
@@ -89,6 +114,11 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
     custom:   []
   };
 
+  // Add prime link if necessary
+  if (isRancherPrime()) {
+    links.defaults.push(COLLECTIVE_LINK);
+  }
+
   // There are two legacy settings:
   // SETTING.ISSUES - can specify a custom link to use for 'File an issue'
   // SETTING.COMMUNITY_LINKS - can specify whether to hide all of the default links (other than 'File an issue')