@rancher/shell 3.0.10 → 3.0.11

package/rancher-components/RcButtonSplit/RcButtonSplit.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+/**
+ * A split button that combines a primary action button with a dropdown trigger
+ * for secondary actions.
+ *
+ * Example:
+ *
+ *  <rc-button-split variant="primary" @click="doAction" @update:open="onOpen">
+ *    Save
+ *    <template #dropdownCollection>
+ *      <rc-dropdown-item @click="doOtherAction">Save as Draft</rc-dropdown-item>
+ *    </template>
+ *  </rc-button-split>
+ */
+import { RcButton } from '@components/RcButton';
+import { RcDropdown, RcDropdownItem, RcDropdownTrigger } from '@components/RcDropdown';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { ButtonVariant, ButtonSize, IconProps } from '@components/RcButton/types';
+import type { Placement } from 'floating-vue';
+
+type RcButtonSplitVariant = Exclude<ButtonVariant, 'link' | 'ghost' | 'multiAction'>;
+
+type RcButtonSplitItem = {
+  id: string;
+  label: string;
+};
+
+type RcButtonSplitProps = {
+  disabled?: boolean;
+  variant?: RcButtonSplitVariant;
+  size?: ButtonSize;
+  ariaLabel?: string;
+  ariaLabelTrigger?: string;
+  ariaLabelDropdown?: string;
+  placement?: Placement;
+  distance?: number;
+  items?: RcButtonSplitItem[];
+} & IconProps;
+
+withDefaults(
+  defineProps<RcButtonSplitProps>(),
+  {
+    disabled:          false,
+    variant:           'primary',
+    size:              'medium',
+    ariaLabel:         undefined,
+    ariaLabelTrigger:  undefined,
+    ariaLabelDropdown: undefined,
+    placement:         'bottom-end',
+    distance:          undefined,
+    items:             undefined,
+  });
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  'update:open': [open: boolean];
+  select: [id: string];
+}>();
+</script>
+
+<template>
+  <RcDropdown
+    :aria-label="ariaLabelDropdown"
+    :placement="placement"
+    :distance="distance"
+    @update:open="emit('update:open', $event)"
+  >
+    <div class="rc-button-split">
+      <RcButton
+        class="rc-button-split-action"
+        :aria-label="ariaLabel"
+        :disabled="disabled"
+        :variant="variant"
+        :size="size"
+        :left-icon="leftIcon"
+        :right-icon="rightIcon"
+        @click="emit('click', $event)"
+      >
+        <template
+          v-if="$slots.before"
+          #before
+        >
+          <slot name="before" />
+        </template>
+        <slot />
+        <template
+          v-if="$slots.after"
+          #after
+        >
+          <slot name="after" />
+        </template>
+      </RcButton>
+
+      <RcDropdownTrigger
+        class="rc-button-split-trigger"
+        :aria-label="ariaLabelTrigger"
+        :disabled="disabled"
+        :variant="variant"
+        :size="size"
+      >
+        <RcIcon
+          type="chevron-down"
+          size="inherit"
+        />
+      </RcDropdownTrigger>
+    </div>
+
+    <template #dropdownCollection>
+      <RcDropdownItem
+        v-for="item in items"
+        :key="item.id"
+        @click="emit('select', item.id)"
+      >
+        {{ item.label }}
+      </RcDropdownItem>
+      <slot name="dropdownCollection" />
+    </template>
+  </RcDropdown>
+</template>
+
+<style lang="scss" scoped>
+.rc-button-split {
+  display: inline-flex;
+
+  // Round only the outer left edge of the main button
+  :deep(.rc-button-split-action) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // Round only the outer right edge of the trigger button; narrow padding
+  :deep(button.rc-button-split-trigger) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    min-width: unset;
+  }
+
+  :deep(button.btn-small.rc-button-split-trigger) {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  // Primary: semi-transparent right border as separator
+  :deep(.rc-button-split-trigger.variant-primary),
+  :deep(.rc-button-split-trigger.variant-secondary),
+  :deep(.rc-button-split-trigger.variant-tertiary) {
+    border-left: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  // Link/Ghost: subtle separator
+  :deep(.rc-button-split-action.variant-link),
+  :deep(.rc-button-split-action.variant-ghost) {
+    border-right: 1px solid var(--border);
+  }
+}
+</style>

package/rancher-components/RcButtonSplit/index.ts

@@ -0,0 +1 @@
+export { default as RcButtonSplit } from './RcButtonSplit.vue';

package/scripts/test-plugins-build.sh

@@ -107,7 +107,7 @@ createTestComponent() {
 
 # Publish shell pkg (tag is needed as publish-shell is optimized to work with release-shell-pkg workflow)
 echo "Publishing Shell package to local registry"
-yarn install
+yarn install --frozen-lockfile
 export TAG="shell-pkg-v${SHELL_VERSION}"
 ${SHELL_DIR}/scripts/publish-shell.sh
 
@@ -139,7 +139,7 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
 
   pushd test-app > /dev/null
 
-  yarn install
+  yarn install --frozen-lockfile
   # this is the "same" as doing a yarn dev (in a build sense)
   # it's to make sure the dev environment is running properly
   FORCE_COLOR=true yarn build | cat
@@ -165,7 +165,7 @@ pushd $BASE_DIR
 # Now try a plugin within the dashboard codebase
 echo "Validating in-tree package"
 
-yarn install
+yarn install --frozen-lockfile
 
 if [ "${TEST_PERSIST_BUILD}" != "true" ]; then
   echo "Removing folder ./pkg/test-pkg"
@@ -202,7 +202,7 @@ function clone_repo_test_extension_build() {
   pushd ${BASE_DIR}/$REPO_NAME
 
   echo -e "\nInstalling dependencies for $REPO_NAME\n"
-  yarn install
+  yarn install --frozen-lockfile
 
   # set registry to local verdaccio (to install new shell)
   yarn config set registry ${VERDACCIO_NPM_REGISTRY}

package/types/shell/index.d.ts

@@ -2818,6 +2818,7 @@ export default class ClusterRepo {
     get isSuseAppCollection(): any;
     get typeDisplay(): "oci" | "SUSE AppCo" | "git" | "http" | "?";
     get nameDisplay(): any;
+    detailPageHeaderActionOverride(realMode: any): any;
     get urlDisplay(): any;
     get branchDisplay(): any;
     get details(): ({

package/utils/__tests__/require-asset.test.ts

@@ -0,0 +1,98 @@
+import { toContextKey, requireAsset, requireJson, _setContexts } from '@shell/utils/require-asset';
+
+describe('fx: toContextKey', () => {
+  it.each([
+    ['~shell/assets/images/providers/aws.svg', './images/providers/aws.svg'],
+    ['@shell/assets/images/providers/aws.svg', './images/providers/aws.svg'],
+    ['~shell/assets/brand/suse/metadata.json', './brand/suse/metadata.json'],
+    ['@shell/assets/images/pl/dark/logo.svg', './images/pl/dark/logo.svg'],
+  ])('should convert %s to %s', (input, expected) => {
+    expect(toContextKey(input)).toStrictEqual(expected);
+  });
+
+  it('should prepend ./ to paths without shell prefix', () => {
+    expect(toContextKey('images/providers/aws.svg')).toStrictEqual('./images/providers/aws.svg');
+  });
+});
+
+describe('fx: requireAsset', () => {
+  afterEach(() => {
+    _setContexts(null, null);
+  });
+
+  it('should return the resolved asset URL from the image context', () => {
+    const mockImgCtx = jest.fn().mockReturnValue('/static/images/aws.svg');
+
+    _setContexts(mockImgCtx, null);
+
+    const result = requireAsset('~shell/assets/images/providers/aws.svg');
+
+    expect(result).toStrictEqual('/static/images/aws.svg');
+    expect(mockImgCtx).toHaveBeenCalledWith('./images/providers/aws.svg');
+  });
+
+  it('should throw when the image context is not available', () => {
+    _setContexts(null, null);
+
+    expect(() => requireAsset('~shell/assets/images/foo.svg'))
+      .toThrow('Asset context not available for: ~shell/assets/images/foo.svg');
+  });
+
+  it('should propagate errors from the context function for missing assets', () => {
+    const mockImgCtx = jest.fn().mockImplementation(() => {
+      throw new Error('Cannot find module');
+    });
+
+    _setContexts(mockImgCtx, null);
+
+    expect(() => requireAsset('~shell/assets/images/missing.svg'))
+      .toThrow('Cannot find module');
+  });
+});
+
+describe('fx: requireJson', () => {
+  afterEach(() => {
+    _setContexts(null, null);
+  });
+
+  it('should return mod.default when available', () => {
+    const jsonData = { vendor: 'suse' };
+    const mockJsonCtx = jest.fn().mockReturnValue({ default: jsonData });
+
+    _setContexts(null, mockJsonCtx);
+
+    const result = requireJson('~shell/assets/brand/suse/metadata.json');
+
+    expect(result).toStrictEqual(jsonData);
+    expect(mockJsonCtx).toHaveBeenCalledWith('./brand/suse/metadata.json');
+  });
+
+  it('should return mod directly when no default export', () => {
+    const jsonData = { vendor: 'rancher' };
+    const mockJsonCtx = jest.fn().mockReturnValue(jsonData);
+
+    _setContexts(null, mockJsonCtx);
+
+    const result = requireJson('~shell/assets/brand/rancher/metadata.json');
+
+    expect(result).toStrictEqual(jsonData);
+  });
+
+  it('should throw when the JSON context is not available', () => {
+    _setContexts(null, null);
+
+    expect(() => requireJson('~shell/assets/brand/suse/metadata.json'))
+      .toThrow('JSON context not available for: ~shell/assets/brand/suse/metadata.json');
+  });
+
+  it('should propagate errors from the context function for missing files', () => {
+    const mockJsonCtx = jest.fn().mockImplementation(() => {
+      throw new Error('Cannot find module');
+    });
+
+    _setContexts(null, mockJsonCtx);
+
+    expect(() => requireJson('~shell/assets/brand/missing/metadata.json'))
+      .toThrow('Cannot find module');
+  });
+});

package/utils/async.ts

@@ -10,11 +10,7 @@ export const waitFor = (testFn: Function, msg = '', timeoutMs = 3000000, interva
       gatedLog('Wait for', msg, 'timed out');
       clearInterval(interval);
       clearTimeout(timeout);
-      if (msg) {
-        reject(new Error(`Failed waiting for: ${ msg }`));
-      } else {
-        throw new Error(`waitFor timed out after ${ timeoutMs / 1000 } seconds`);
-      }
+      reject(new Error(msg ? `Failed waiting for: ${ msg }` : `waitFor timed out after ${ timeoutMs / 1000 } seconds`));
     }, timeoutMs);
     const interval = setInterval(() => {
       if ( testFn() ) {

package/utils/brand.ts

@@ -1,3 +1,5 @@
+import { requireJson } from '@shell/utils/require-asset';
+
 /**
  * Brand/Theme metadata
  */
@@ -21,7 +23,7 @@ export function getBrandMeta(brand: string): BrandMeta {
 
   if (brand) {
     try {
-      brandMeta = require(`~shell/assets/brand/${ brand }/metadata.json`);
+      brandMeta = requireJson(`~shell/assets/brand/${ brand }/metadata.json`) as BrandMeta;
     } catch {}
   }
 

package/utils/favicon.js

@@ -1,5 +1,6 @@
 import { SETTING } from '@shell/config/settings';
 import { MANAGEMENT } from '@shell/config/types';
+import { requireAsset } from '@shell/utils/require-asset';
 
 let favIconSet = false;
 
@@ -16,11 +17,11 @@ export function setFavIcon(store) {
     let brandImage;
 
     if (brandSetting === 'suse') {
-      brandImage = require('~shell/assets/brand/suse/favicon.png');
+      brandImage = requireAsset('~shell/assets/brand/suse/favicon.png');
     } else if (brandSetting === 'csp') {
-      brandImage = require('~shell/assets/brand/csp/favicon.png');
+      brandImage = requireAsset('~shell/assets/brand/csp/favicon.png');
     } else if (brandSetting === 'harvester') {
-      brandImage = require('~shell/assets/brand/harvester/favicon.png');
+      brandImage = requireAsset('~shell/assets/brand/harvester/favicon.png');
     }
 
     link.href = res?.value || brandImage || defaultFavIcon;

package/utils/require-asset.ts

@@ -0,0 +1,95 @@
+/**
+ * Utility to replace dynamic require() calls for image/asset imports.
+ *
+ * Uses webpack's require.context to resolve assets at compile time,
+ * then provides lookup functions by path.
+ *
+ * When migrating to Vite, replace the require.context calls below with:
+ *
+ *   const imgCtx = import.meta.glob(
+ *     '@shell/assets/**\/*.{svg,png,jpg,jpeg,gif,ico,webp}',
+ *     { eager: true, query: '?url', import: 'default' }
+ *   );
+ *
+ *   const jsonCtx = import.meta.glob(
+ *     '@shell/assets/**\/*.json',
+ *     { eager: true }
+ *   );
+ */
+
+// --- Webpack: require.context type declarations ---
+
+interface WebpackRequireContext {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (key: string): any;
+  keys(): string[];
+  resolve(key: string): string;
+  id: string;
+}
+
+// --- Webpack: require.context (compile-time transform) ---
+
+let imgCtx: WebpackRequireContext | null = null;
+let jsonCtx: WebpackRequireContext | null = null;
+
+try {
+  // @ts-expect-error — require.context is a webpack compile-time transform, not visible to TypeScript
+  imgCtx = require.context('@shell/assets', true, /\.(svg|png|jpe?g|gif|ico|webp)$/);
+} catch (e) {}
+
+try {
+  // @ts-expect-error — require.context is a webpack compile-time transform, not visible to TypeScript
+  jsonCtx = require.context('@shell/assets', true, /\.json$/);
+} catch (e) {}
+
+/**
+ * Convert an asset path to a require.context key.
+ *
+ * Input:  '~shell/assets/images/providers/aws.svg' or '@shell/assets/images/providers/aws.svg'
+ * Output: './images/providers/aws.svg'
+ */
+export function toContextKey(path: string): string {
+  return `./${ path.replace(/^[~@]shell\/assets\//, '') }`;
+}
+
+/**
+ * Look up an image asset URL by path, similar to Webpack's require() for images.
+ *
+ * Accepts paths with ~shell/ or @shell/ prefix.
+ * Throws if the asset is not found (matching the original require() behavior),
+ * so callers can use try/catch for fallback logic.
+ */
+export function requireAsset(path: string): string {
+  if (!imgCtx) {
+    // Throw to match original require() behavior — callers rely on try/catch for fallback logic
+    throw new Error(`Asset context not available for: ${ path }`);
+  }
+
+  const key = toContextKey(path);
+
+  return imgCtx(key);
+}
+
+/**
+ * Load a JSON file from @shell/assets.
+ *
+ * Throws if the JSON file is not found (matching the original require() behavior),
+ * so callers can use try/catch for fallback logic.
+ */
+export function requireJson(path: string): object {
+  if (!jsonCtx) {
+    // Throw to match original require() behavior — callers rely on try/catch for fallback logic
+    throw new Error(`JSON context not available for: ${ path }`);
+  }
+
+  const key = toContextKey(path);
+  const mod = jsonCtx(key);
+
+  return mod.default || mod;
+}
+
+// Exported for testing — allows injecting mock contexts
+export function _setContexts(img: WebpackRequireContext | null, json: WebpackRequireContext | null): void {
+  imgCtx = img;
+  jsonCtx = json;
+}

package/vue.config.js

@@ -143,7 +143,7 @@ const instrumentCode = (config) => {
   }
 };
 
-const getLoaders = (SHELL_ABS) => [
+const getLoaders = (SHELL_ABS, dir) => [
   // no fallback for pre-2013 browsers https://caniuse.com/webworkers
   {
     test:    /web-worker.[a-z-]+.js/i,
@@ -199,7 +199,8 @@ const getLoaders = (SHELL_ABS) => [
           appendTsxSuffixTo: [
             '\\.vue$'
           ],
-          configFile: path.join(SHELL_ABS, 'tsconfig.json')
+          configFile:      path.join(SHELL_ABS, 'tsconfig.json'),
+          compilerOptions: { rootDir: dir }
         }
       }
     ]
@@ -580,7 +581,7 @@ module.exports = function(dir, appConfig = {}) {
 
       config.resolve.symlinks = false;
       processShellFiles(config, SHELL_ABS);
-      config.module.rules.push(...getLoaders(SHELL_ABS));
+      config.module.rules.push(...getLoaders(SHELL_ABS, dir));
       instrumentCode(config);
       preserveWhitespace(config);
     },

package/components/HarvesterServiceAddOnConfig.vue

@@ -1,207 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import semver from 'semver';
-
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { _CREATE } from '@shell/config/query-params';
-import { get } from '@shell/utils/object';
-import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { SERVICE } from '@shell/config/types';
-import { allHash } from '@shell/utils/promise';
-
-const HARVESTER_ADD_ON_CONFIG = [{
-  variableName: 'ipam',
-  key:          HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM,
-  default:      'dhcp'
-}, {
-  variableName: 'sharedService',
-  key:          HCI_LABELS_ANNOTATIONS.PRIMARY_SERVICE,
-  default:      ''
-}];
-
-export default {
-  components: { LabeledSelect },
-
-  props: {
-    mode: {
-      type:    String,
-      default: _CREATE,
-    },
-
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    },
-
-    registerBeforeHook: {
-      type:    Function,
-      default: null
-    },
-  },
-
-  created() {
-    if (this.registerBeforeHook) {
-      this.registerBeforeHook(this.willSave, 'harvesterWillSave');
-    }
-  },
-
-  async fetch() {
-    const inStore = this.$store.getters['currentProduct'].inStore;
-
-    const hash = {
-      rke2Versions: this.$store.dispatch('management/request', { url: '/v1-rke2-release/releases' }),
-      services:     this.$store.dispatch(`${ inStore }/findAll`, { type: SERVICE }),
-    };
-
-    const res = await allHash(hash);
-
-    this.rke2Versions = res.rke2Versions;
-  },
-
-  data() {
-    const harvesterAddOnConfig = {};
-
-    HARVESTER_ADD_ON_CONFIG.forEach((c) => {
-      harvesterAddOnConfig[c.variableName] = this.value.metadata.annotations[c.key] || c.default;
-    });
-
-    let showShareIP;
-
-    if (this.value.metadata.annotations[HCI_LABELS_ANNOTATIONS.PRIMARY_SERVICE]) {
-      showShareIP = true;
-    } else {
-      showShareIP = false;
-    }
-
-    return {
-      ...harvesterAddOnConfig,
-      showShareIP,
-      rke2Versions: {},
-    };
-  },
-
-  computed: {
-    ...mapGetters(['allowedNamespaces', 'namespaces', 'currentCluster']),
-
-    ipamOptions() {
-      return [{
-        label: 'DHCP',
-        value: 'dhcp',
-      }, {
-        label: 'Pool',
-        value: 'pool',
-      }];
-    },
-
-    portOptions() {
-      const ports = this.value?.spec?.ports || [];
-
-      return ports.filter((p) => p.port && p.protocol === 'TCP').map((p) => p.port) || [];
-    },
-
-    serviceOptions() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const services = this.$store.getters[`${ inStore }/all`](SERVICE);
-
-      const namespaces = this.namespaces();
-
-      const out = services.filter((s) => {
-        const ingress = s?.status?.loadBalancer?.ingress || [];
-
-        return ingress.length > 0 &&
-                !s?.metadata?.annotations?.['cloudprovider.harvesterhci.io/primary-service'] &&
-                s.spec?.type === 'LoadBalancer' &&
-                namespaces[s.metadata.namespace];
-      });
-
-      return out.map((s) => s.id);
-    },
-
-    shareIPEnabled() {
-      const kubernetesVersion = this.currentCluster.kubernetesVersion || '';
-      const kubernetesVersionExtension = this.currentCluster.kubernetesVersionExtension;
-
-      if (kubernetesVersionExtension.startsWith('+rke2')) {
-        const charts = ((this.rke2Versions?.data || []).find((v) => v.id === kubernetesVersion) || {}).charts;
-        let ccmVersion = charts?.['harvester-cloud-provider']?.version || '';
-
-        if (ccmVersion.endsWith('00')) {
-          ccmVersion = ccmVersion.slice(0, -2);
-        }
-
-        return semver.satisfies(ccmVersion, '>=0.2.0');
-      } else {
-        return true;
-      }
-    },
-  },
-
-  methods: {
-    willSave() {
-      const errors = [];
-
-      if (this.showShareIP) {
-        if (!this.sharedService) {
-          errors.push(this.t('validation.required', { key: this.t('servicesPage.harvester.shareIP.label') }, true));
-        }
-      }
-
-      if (errors.length > 0) {
-        return Promise.reject(errors);
-      }
-
-      HARVESTER_ADD_ON_CONFIG.forEach((c) => {
-        this.value.metadata.annotations[c.key] = String(get(this, c.variableName));
-      });
-
-      if (this.showShareIP) {
-        delete this.value.metadata.annotations[HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM];
-      } else {
-        delete this.value.metadata.annotations[HCI_LABELS_ANNOTATIONS.PRIMARY_SERVICE];
-      }
-    },
-
-    toggleShareIP() {
-      this.showShareIP = !this.showShareIP;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="row mt-30">
-      <div class="col span-6">
-        <LabeledSelect
-          v-if="showShareIP"
-          v-model:value="sharedService"
-          :mode="mode"
-          :options="serviceOptions"
-          :label="t('servicesPage.harvester.shareIP.label')"
-          :disabled="mode === 'edit'"
-        />
-        <LabeledSelect
-          v-else
-          v-model:value="ipam"
-          :mode="mode"
-          :options="ipamOptions"
-          :label="t('servicesPage.harvester.ipam.label')"
-          :disabled="mode === 'edit'"
-        />
-        <div
-          v-if="mode === 'create'"
-          class="mt-10"
-        >
-          <a
-            role="button"
-            @click="toggleShareIP"
-          >
-            {{ showShareIP ? t('servicesPage.harvester.useIpam.label') : t('servicesPage.harvester.useShareIP.label') }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>