@rancher/shell 0.3.16 → 0.3.17

package/components/formatter/ImageName.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  props:
+    {
+      value: {
+        type:    String,
+        default: ''
+      }
+    }
+};
+</script>
+
+<template>
+  <span class="formatter-image">
+    {{ value }}
+  </span>
+</template>
+
+<style scoped>
+  .formatter-image {
+    word-break: break-all;
+  }
+</style>

package/components/formatter/PodImages.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 
 <template>
-  <span>
+  <span class="formatter-pod-images">
     <span>{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
@@ -64,3 +64,9 @@ export default {
     >{{ t('generic.plusMore', {n:images.length-1}) }}</span>
   </span>
 </template>
+
+<style scoped>
+  .formatter-pod-images {
+    word-break: break-all;
+  }
+</style>

package/components/formatter/__tests__/ClusterLink.test.ts

@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import ClusterLink from '@shell/components/formatter/ClusterLink.vue';
+
+describe('component: ClusterLink', () => {
+  const UNAVAILABLE_MACHINES_ICON_SELECTOR = '[data-testid="unavailable-machines-alert-icon"]';
+  const TEMPLATE_UPGRADE_ICON_SELECTOR = '[data-testid="rke-template-upgrade-alert-icon"]';
+  const CONDITION_HAS_ERROR_ICON_SELECTOR = '[data-testid="conditions-has-error-icon"]';
+
+  describe('unavailable machines alert icon', () => {
+    const testCases = [
+      [undefined, false],
+      [0, false],
+      [1, true],
+      [5, true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on on the number of unavailable machines',
+      (unavailableMachines, expected) => {
+        const wrapper = mount(ClusterLink, {
+          propsData: {
+            row: {
+              hasError:           false,
+              status:             {},
+              unavailableMachines,
+              rkeTemplateUpgrade: undefined
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(UNAVAILABLE_MACHINES_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+
+  describe('template upgrade alert icon', () => {
+    const testCases = [
+      [undefined, false],
+      ['any', true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on rkeTemplateUpgrade',
+      (rkeTemplateUpgrade, expected) => {
+        const wrapper = mount(ClusterLink, {
+          propsData: {
+            row: {
+              hasError:            false,
+              status:              {},
+              unavailableMachines: 0,
+              rkeTemplateUpgrade
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(TEMPLATE_UPGRADE_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+
+  describe('conditions has error icon', () => {
+    const MOCKED_CONDITIONS_1 = [{
+      status: '', type: 'Ready', reason: 'Waiting', error: true // When the only existing error has a type "Ready" and reason "Waiting"
+    }];
+    const MOCKED_CONDITIONS_2 = [{
+      status: 'any', type: 'any', error: true
+    }];
+
+    const testCases = [
+      [[], false],
+      [MOCKED_CONDITIONS_1, false],
+      [MOCKED_CONDITIONS_2, true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on the status conditions',
+      (conditions, expected) => {
+        const wrapper = mount(ClusterLink, {
+          propsData: {
+            row: {
+              hasError:            true,
+              status:              { conditions },
+              unavailableMachines: 0
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(CONDITION_HAS_ERROR_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+});

package/components/nav/Header.vue

@@ -181,6 +181,8 @@ export default {
     $route(nue) {
       if (nue) {
         this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+
+        this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
       }
     }
   },
@@ -191,8 +193,6 @@ export default {
     window.addEventListener('resize', this.debouncedLayoutHeader);
 
     this.$nextTick(() => this.layoutHeader(null, true));
-
-    this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
   },
 
   beforeDestroy() {

package/config/__test__/home-links.test.ts

@@ -0,0 +1,62 @@
+import Vuex from 'vuex';
+import { createLocalVue } from '@vue/test-utils';
+import { ensureSupportLink } from '@shell/config/home-links.js';
+import { getters, state, mutations } from '@shell/store/i18n.js';
+
+jest.mock('@shell/assets/translations/en-us.yaml', () => ({
+  locale: {
+    'en-us':   'English',
+    'zh-hans': '简体中文',
+    none:      '(None)',
+  }
+}));
+
+describe('fx: ensureSupportLink', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(Vuex);
+
+  const store = new Vuex.Store({
+    state,
+    getters: {
+      'i18n/selectedLocaleLabel': getters.selectedLocaleLabel,
+      'i18n/t':                   getters.t,
+    },
+    mutations,
+  });
+
+  store.commit('loadTranslations', {
+    locale:       'zh-zhans',
+    translations: {
+      locale: {
+        'en-us':   'English',
+        'zh-hans': '简体中文',
+        none:      '(None)',
+      }
+    }
+  });
+
+  const testCases = [
+    ['en-us', false],
+    ['zh-hans', true],
+    ['none', false],
+    [null, false],
+  ];
+
+  it.each(testCases)('should return cn forum link if the language is zh-hans', (language:String, value) => {
+    store.commit('setSelected', language);
+
+    const links = { defaults: [], custom: [] };
+    const hasSupport = true;
+    const isSupportPage = true;
+
+    const localThis = {
+      $store: store,
+      t:      store.getters['i18n/t'],
+    };
+
+    const result = ensureSupportLink(links, hasSupport, isSupportPage, localThis.t, store);
+
+    expect(!!result.defaults.find((link) => link.key === 'cnforums')).toBe(value);
+  });
+});

package/config/home-links.js

@@ -38,6 +38,12 @@ const SUPPORT_LINK = {
   readonly: true
 };
 
+const CN_FORUMS_LINK = {
+  key:     'cnforums',
+  value:   'https://forums.rancher.cn/',
+  enabled: true,
+};
+
 // 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';
 
@@ -72,7 +78,7 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
       uiLinks.defaults = defaults;
     }
 
-    return ensureSupportLink(uiLinks, hasSupport, isSupportPage, t);
+    return ensureSupportLink(uiLinks, hasSupport, isSupportPage, t, store);
   }
 
   // No new setting, so return the required structure
@@ -117,11 +123,11 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
     console.warn('Could not parse legacy link settings', e); // eslint-disable-line no-console
   }
 
-  return ensureSupportLink(links, hasSupport, isSupportPage, t);
+  return ensureSupportLink(links, hasSupport, isSupportPage, t, store);
 }
 
 // Ensure the support link is added if needed
-function ensureSupportLink(links, hasSupport, isSupportPage, t) {
+export function ensureSupportLink(links, hasSupport, isSupportPage, t, store) {
   if (!hasSupport && !isSupportPage) {
     const supportLink = links.defaults?.find((link) => link.key === 'commercialSupport');
 
@@ -130,6 +136,12 @@ function ensureSupportLink(links, hasSupport, isSupportPage, t) {
     }
   }
 
+  const selectedLocaleLabel = store.getters['i18n/selectedLocaleLabel'];
+
+  if (selectedLocaleLabel === t('locale.zh-hans')) {
+    links.defaults.push(CN_FORUMS_LINK);
+  }
+
   // Localise the default links
   links.defaults = links.defaults.map((link) => {
     return {

package/config/labels-annotations.js

@@ -54,7 +54,11 @@ export const CAPI = {
   DELETE_MACHINE:       'cluster.x-k8s.io/delete-machine',
   PROVIDER:             'provider.cattle.io',
   SECRET_AUTH:          'v2prov-secret-authorized-for-cluster',
-  SECRET_WILL_DELETE:   'v2prov-authorized-secret-deletes-on-cluster-removal'
+  SECRET_WILL_DELETE:   'v2prov-authorized-secret-deletes-on-cluster-removal',
+  /**
+   * Annotation for overriding the cluster provider,
+   */
+  UI_CUSTOM_PROVIDER:   'ui.rancher/provider'
 };
 
 export const CATALOG = {

package/config/router.js

@@ -48,10 +48,6 @@ export const routerOptions = {
     path:      '/prefs',
     component: () => interopDefault(import('../pages/prefs.vue' /* webpackChunkName: "pages/prefs" */)),
     name:      'prefs'
-  }, {
-    path:      '/safeMode',
-    component: () => interopDefault(import('../pages/safeMode.vue' /* webpackChunkName: "pages/safeMode" */)),
-    name:      'safeMode'
   }, {
     path:      '/support',
     component: () => interopDefault(import('../pages/support/index.vue' /* webpackChunkName: "pages/support/index" */)),

package/config/settings.ts

@@ -89,6 +89,10 @@ export const SETTING = {
    */
   CLUSTER_AGENT_DEFAULT_AFFINITY:       'cluster-agent-default-affinity',
   FLEET_AGENT_DEFAULT_AFFINITY:         'fleet-agent-default-affinity',
+  /**
+   * manage rancher repositories in extensions (official, partners repos)
+   */
+  ADD_EXTENSION_REPOS_BANNER_DISPLAY:   'display-add-extension-repos-banner'
 };
 
 // These are the settings that are allowed to be edited via the UI

package/config/table-headers.js

@@ -264,11 +264,12 @@ export const DURATION = {
   formatter: 'LiveDuration',
 };
 
-export const IMAGE = {
-  name:     'image',
-  labelKey: 'tableHeaders.image',
-  value:    'image',
-  sort:     ['image', 'nameSort'],
+export const IMAGE_NAME = {
+  name:      'image',
+  labelKey:  'tableHeaders.image',
+  value:     'image',
+  sort:      ['image', 'nameSort'],
+  formatter: 'ImageName',
 };
 
 export const POD_IMAGES = {

package/config/uiplugins.js

@@ -29,8 +29,21 @@ export const UI_PLUGINS_REPO_NAME = 'rancher-ui-plugins';
 export const UI_PLUGINS_REPO_URL = 'https://github.com/rancher/ui-plugin-charts';
 export const UI_PLUGINS_REPO_BRANCH = 'main';
 
+// Info for the Helm Chart Repo for Partner Extensions
+export const UI_PLUGINS_PARTNERS_REPO_NAME = 'partner-extensions';
+
+export const UI_PLUGINS_PARTNERS_REPO_URL = 'https://github.com/rancher/partner-extensions';
+export const UI_PLUGINS_PARTNERS_REPO_BRANCH = 'main';
+
+// Info for the Helm Chart Repo for Community Extensions
+export const UI_PLUGINS_COMMUNITY_REPO_NAME = 'community-extensions';
+
+export const UI_PLUGINS_COMMUNITY_REPO_URL = 'https://github.com/rancher/community-extensions';
+export const UI_PLUGINS_COMMUNITY_REPO_BRANCH = 'main';
+
 // Chart annotations
 export const UI_PLUGIN_CHART_ANNOTATIONS = {
+  KUBE_VERSION:       'catalog.cattle.io/kube-version',
   RANCHER_VERSION:    'catalog.cattle.io/rancher-version',
   EXTENSIONS_VERSION: 'catalog.cattle.io/ui-extensions-version',
   UI_VERSION:         'catalog.cattle.io/ui-version',
@@ -121,16 +134,18 @@ export function shouldNotLoadPlugin(plugin, rancherVersion, loadedPlugins) {
 }
 
 // Can a chart version be used for this Rancher (based on the annotations on the chart)?
-export function isSupportedChartVersion(chartVersion, rancherVersion) {
+export function isSupportedChartVersion(versionsData) {
+  const { version, rancherVersion, kubeVersion } = versionsData;
+
   // Plugin specified a required extension API version
-  const requiredAPI = chartVersion.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
+  const requiredAPI = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
 
   if (requiredAPI && !semver.satisfies(UI_PLUGIN_API_VERSION, requiredAPI)) {
     return false;
   }
 
   // Host application
-  const requiredHost = chartVersion.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST];
+  const requiredHost = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST];
 
   if (requiredHost && requiredHost !== UI_PLUGIN_HOST_APP) {
     return false;
@@ -138,24 +153,37 @@ export function isSupportedChartVersion(chartVersion, rancherVersion) {
 
   // Rancher version
   if (rancherVersion) {
-    const requiredRancherVersion = chartVersion.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.RANCHER_VERSION];
+    const requiredRancherVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.RANCHER_VERSION];
 
     if (requiredRancherVersion && !semver.satisfies(rancherVersion, requiredRancherVersion)) {
       return false;
     }
   }
 
+  // Kube version
+  if (kubeVersion) {
+    const requiredKubeVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
+
+    if (requiredKubeVersion && !semver.satisfies(kubeVersion, requiredKubeVersion)) {
+      return false;
+    }
+  }
+
   return true;
 }
 
-export function isChartVersionAvailableForInstall(version, rancherVersion, returnObj = false) {
+export function isChartVersionAvailableForInstall(versionsData, returnObj = false) {
+  const { version, rancherVersion, kubeVersion } = versionsData;
+
   const parsedRancherVersion = rancherVersion.split('-')?.[0];
   const regexHashString = new RegExp('^[A-Za-z0-9]{9}$');
   const isRancherVersionHashString = regexHashString.test(rancherVersion);
   const requiredUiVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.UI_VERSION];
+  const requiredKubeVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
   const versionObj = { ...version };
 
   versionObj.isCompatibleWithUi = true;
+  versionObj.isCompatibleWithKubeVersion = true;
 
   // if it's a head version of Rancher, then we skip the validation and enable them all
   if (!isRancherVersionHashString && requiredUiVersion && !semver.satisfies(parsedRancherVersion, requiredUiVersion)) {
@@ -164,6 +192,23 @@ export function isChartVersionAvailableForInstall(version, rancherVersion, retur
     }
     versionObj.isCompatibleWithUi = false;
     versionObj.requiredUiVersion = requiredUiVersion;
+
+    if (returnObj) {
+      return versionObj;
+    }
+  }
+
+  // check kube version
+  if (kubeVersion && requiredKubeVersion && !semver.satisfies(kubeVersion, requiredKubeVersion)) {
+    if (!returnObj) {
+      return false;
+    }
+    versionObj.isCompatibleWithKubeVersion = false;
+    versionObj.requiredKubeVersion = requiredKubeVersion;
+
+    if (returnObj) {
+      return versionObj;
+    }
   }
 
   if (returnObj) {

package/core/plugin-helpers.js

@@ -3,6 +3,7 @@ import { isMac } from '@shell/utils/platform';
 import { ucFirst, randomStr } from '@shell/utils/string';
 import { _EDIT, _CONFIG, _DETAIL, _LIST } from '@shell/config/query-params';
 import { getProductFromRoute } from '@shell/middleware/authenticated';
+import { isEqual } from '@shell/utils/object';
 
 function checkRouteProduct({ name, params, query }, locationConfigParam) {
   const product = getProductFromRoute({
@@ -34,7 +35,7 @@ function checkRouteMode({ name, query }, locationConfigParam) {
   return false;
 }
 
-function checkExtensionRouteBinding($route, locationConfig) {
+function checkExtensionRouteBinding($route, locationConfig, context) {
   // if no configuration is passed, consider it as global
   if (!Object.keys(locationConfig).length) {
     return true;
@@ -43,23 +44,30 @@ function checkExtensionRouteBinding($route, locationConfig) {
   const { params } = $route;
 
   // "params" to be checked based on the locationConfig
+  // This has become overloaded with mode and context
   const paramsToCheck = [
     'product',
     'resource',
     'namespace',
     'cluster',
     'id',
-    'mode'
+    'mode',
+    // url query params
+    'queryParam',
+    // Custom context specific params provided by the extension, not to be confused with location params
+    'context',
   ];
 
-  let res = false;
+  let res = true;
 
   for (let i = 0; i < paramsToCheck.length; i++) {
     const param = paramsToCheck[i];
 
     if (locationConfig[param]) {
-      for (let x = 0; x < locationConfig[param].length; x++) {
-        const locationConfigParam = locationConfig[param][x];
+      const asArray = Array.isArray(locationConfig[param]) ? locationConfig[param] : [locationConfig[param]];
+
+      for (let x = 0; x < asArray.length; x++) {
+        const locationConfigParam = asArray[x];
 
         if (locationConfigParam) {
           // handle "product" in a separate way...
@@ -68,6 +76,11 @@ function checkExtensionRouteBinding($route, locationConfig) {
           // also handle "mode" in a separate way because it mainly depends on query params
           } else if (param === 'mode') {
             res = checkRouteMode($route, locationConfigParam);
+          } else if (param === 'context') {
+            // Need all keys and values to match
+            res = isEqual(locationConfigParam, context);
+          } else if (param === 'queryParam') {
+            res = isEqual(locationConfigParam, $route.query);
           } else if (locationConfigParam === params[param]) {
             res = true;
           } else {
@@ -91,7 +104,7 @@ function checkExtensionRouteBinding($route, locationConfig) {
   return res;
 }
 
-export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea, currRoute, translationCtx = pluginCtx) {
+export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea, currRoute, translationCtx = pluginCtx, context) {
   const extensionEnhancements = [];
 
   // gate it so that we prevent errors on older versions of dashboard
@@ -99,7 +112,7 @@ export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea
     const actions = pluginCtx.$plugin.getUIConfig(actionType, uiArea);
 
     actions.forEach((action, i) => {
-      if (checkExtensionRouteBinding(currRoute, action.locationConfig)) {
+      if (checkExtensionRouteBinding(currRoute, action.locationConfig, context || {})) {
         // ADD CARD PLUGIN UI ENHANCEMENT
         if (actionType === ExtensionPoint.CARD) {
           // intercept to apply translation
@@ -116,11 +129,6 @@ export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea
               actions[i].label = translationCtx.t(action.labelKey);
             }
 
-            // sets the enabled flag to true if omitted on the config
-            if (!Object.keys(action).includes('enabled')) {
-              actions[i].enabled = true;
-            }
-
             // bulkable flag
             actions[i].bulkable = actions[i].multiple || actions[i].bulkable;
 

package/core/plugin.ts

@@ -15,6 +15,7 @@ import {
   PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
+import { registerLayout } from '@shell/initialize/layouts';
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
@@ -267,6 +268,14 @@ export class Plugin implements IPlugin {
       }
 
       this.l10n[name].push(fn);
+    } else if (type === 'layouts') {
+      fn().then((component: any) => {
+        if (component.default) {
+          registerLayout(name, component.default);
+        } else {
+          console.error(`Failed to load layout ${ name } because the file didn't export a default component.`); // eslint-disable-line no-console
+        }
+      });
     } else {
       if (!this.types[type]) {
         this.types[type] = {};

package/core/plugins.js

@@ -182,7 +182,7 @@ export default function({
           console.error('Error removing plugin', e); // eslint-disable-line no-console
         }
 
-        delete plugins[plugin.name];
+        delete plugins[plugin.id];
       }
     },