@rancher/shell 3.0.12-rc.4 → 3.0.12-rc.5

package/pages/c/_cluster/apps/charts/install.vue

@@ -40,9 +40,12 @@ import {
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
+import { addParam } from '@shell/utils/url';
 import { WINDOWS } from '@shell/store/catalog';
 import { SETTING } from '@shell/config/settings';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
+import PrivateRegistry from '@shell/components/form/PrivateRegistry.vue';
+import { PRIVATE_REGISTRY_CONTEXT } from '@shell/components/form/PrivateRegistry.constants';
 import { generateRandomAlphaString } from '@shell/utils/string';
 
 const VALUES_STATE = {
@@ -95,7 +98,8 @@ export default {
     UnitInput,
     YamlEditor,
     Wizard,
-    SelectOrCreateAuthSecret
+    SelectOrCreateAuthSecret,
+    PrivateRegistry
   },
 
   mixins: [
@@ -357,6 +361,15 @@ export default {
         this.showCustomRegistryInput = !!this.customRegistrySetting;
       }
 
+      // On upgrade, pre-select a single existing image pull secret in the dropdown
+      if (this.existing && this.showRegistryPullSecrets) {
+        const existingPullSecrets = this.chartValues?.global?.imagePullSecrets;
+
+        if (Array.isArray(existingPullSecrets) && existingPullSecrets.length === 1) {
+          this.registryPullSecret = existingPullSecrets[0];
+        }
+      }
+
       /* Serializes an object as a YAML document */
       this.valuesYaml = saferDump(this.chartValues);
 
@@ -453,6 +466,9 @@ export default {
       appCoDataFetched:                       false,
       AUTH_TYPE,
       CLUSTER_REPO_APPCO_AUTH_GENERATE_NAME,
+      PRIVATE_REGISTRY_CONTEXT,
+      skipPullSecrets:                        false,
+      registryPullSecret:                     null,
       stepBasic:                              {
         name:           'basics',
         label:          this.t('catalog.install.steps.basics.label'),
@@ -783,6 +799,29 @@ export default {
       return global.systemDefaultRegistry !== undefined || global.cattle?.systemDefaultRegistry !== undefined;
     },
 
+    showRegistryPullSecrets() {
+      return !!this.repo?.spec?.defaultImagePullSecrets?.length;
+    },
+
+    existingValuesPullSecrets() {
+      if (!this.existing) {
+        return [];
+      }
+
+      const pullSecrets = this.chartValues?.global?.imagePullSecrets;
+
+      return Array.isArray(pullSecrets) ? pullSecrets.filter(Boolean) : [];
+    },
+
+    /**
+     * if the system-default-pull-image-secrets global setting is set OR the current cluster has system default registry pull secrets configured
+     * the Rancher cluster repo will automatically be populated with
+     * copies of the secrets referenced in the global setting
+     */
+    repoDefaultPullSecretNames() {
+      return (this.repo?.spec?.defaultImagePullSecrets || []).map((s) => s.name).filter(Boolean);
+    },
+
     setImagePullSecretDataTrigger() {
       return `
         ${ this.defaultImagePullSecret?.name }
@@ -974,11 +1013,30 @@ export default {
         }
       }
     },
+
     async getClusterRegistry() {
+      const mgmCluster = this.$store.getters['currentCluster'];
+
+      // For local, imported, and hosted (AKS, EKS, GKE, ALI) clusters,
+      // the cluster-scoped private registry is on the norman cluster's importedConfig.
+      if (mgmCluster?.isLocal || mgmCluster?.isImported || mgmCluster?.isHostedKubernetesProvider) {
+        try {
+          const normanCluster = await mgmCluster.findNormanCluster();
+          const importedRegistryURL = normanCluster?.importedConfig?.privateRegistryURL;
+
+          if (importedRegistryURL) {
+            return importedRegistryURL;
+          }
+        } catch (e) {
+          console.warn('Unable to fetch norman cluster for registry lookup: ', e); // eslint-disable-line no-console
+        }
+
+        return;
+      }
+
       const hasPermissionToSeeProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
       if (hasPermissionToSeeProvCluster) {
-        const mgmCluster = this.$store.getters['currentCluster'];
         const provClusterId = mgmCluster?.provClusterId;
         let provCluster;
 
@@ -1148,14 +1206,22 @@ export default {
         const isUpgrade = !!this.existing;
 
         this.errors = [];
+        // Create namespace if it doesn't exist
+        // this is done before save hooks so that image pull secrets can be created in the target namespace
+        await this.createNamespaceIfNeeded();
 
-        // Create namespace if it doesn't exist (before hooks run)
-        // And only if it is SUSE APP Collection, overall should just do the same flow
-        if (!isUpgrade && this.isNamespaceNew && this.repo?.isSuseAppCollection) {
-          await this.createNamespaceIfNeeded();
-        }
+        const hookResults = await this.applyHooks(BEFORE_SAVE_HOOKS);
 
-        await this.applyHooks(BEFORE_SAVE_HOOKS);
+        // When a new pull secret is created by SelectOrCreateAuthSecret inside
+        // PrivateRegistry, the emit chain does not propagate the secret name
+        // back to registryPullSecret in time.  Read it from the hook result.
+        if (this.showRegistryPullSecrets && !this.skipPullSecrets && !this.registryPullSecret) {
+          const createdSecret = hookResults?.registerAuthSecret;
+
+          if (createdSecret?.metadata?.name) {
+            this.registryPullSecret = createdSecret.metadata.name;
+          }
+        }
 
         const { errors, input } = this.actionInput(isUpgrade);
 
@@ -1166,7 +1232,16 @@ export default {
           return;
         }
 
-        const res = await this.repo.doAction((isUpgrade ? 'upgrade' : 'install'), input);
+        const actionName = isUpgrade ? 'upgrade' : 'install';
+        const actionOpt = {};
+
+        if (this.skipPullSecrets) {
+          const baseUrl = this.repo.actionLinkFor(actionName);
+
+          actionOpt.url = addParam(baseUrl, 'skipPullSecrets', 'true');
+        }
+
+        const res = await this.repo.doAction(actionName, input, actionOpt);
         const operationId = `${ res.operationNamespace }/${ res.operationName }`;
 
         // Non-admins without a cluster won't be able to fetch operations immediately
@@ -1227,6 +1302,15 @@ export default {
         set(global, 'systemDefaultRegistry', this.customRegistrySetting);
       }
 
+      if (this.showRegistryPullSecrets && this.registryPullSecret) {
+        // User explicitly selected or created a pull secret
+        set(global, 'imagePullSecrets', [this.registryPullSecret]);
+      } else if (this.showRegistryPullSecrets) {
+        // User chose "skip" or "use default" — remove explicit imagePullSecrets
+        // so the backend falls back to the repo/global defaults
+        delete global.imagePullSecrets;
+      }
+
       setIfNotSet(global, 'cattle.systemProjectId', systemProjectId);
       setIfNotSet(cattle, 'url', serverUrl);
       setIfNotSet(cattle, 'rkePathPrefix', pathPrefix);
@@ -1329,7 +1413,6 @@ export default {
       */
 
       this.addGlobalValuesTo(values);
-
       const form = JSON.parse(JSON.stringify(this.value));
 
       /*
@@ -1488,6 +1571,8 @@ export default {
       }
     },
 
+    // not the same as PrivateRegistry pull secrets which are created based off the global/cluster system default registry hostname value not the repo url directly
+    // those secrets will be created in a beforeSaveHook managed by SelectOrCreateAuthSecret
     async createImagePullSecret() {
       if (!this.repo?.isSuseAppCollection) {
         return;
@@ -1753,26 +1838,27 @@ export default {
             :label="t('catalog.install.steps.helmCli.checkbox', { action: action.name, existing: !!existing })"
           />
 
-          <Checkbox
+          <PrivateRegistry
             v-if="showCustomRegistry"
-            v-model:value="showCustomRegistryInput"
-            class="mb-20"
-            data-testid="custom-registry-checkbox"
-            :label="t('catalog.chart.registry.custom.checkBoxLabel')"
-            :tooltip="t('catalog.chart.registry.tooltip')"
+            :context="PRIVATE_REGISTRY_CONTEXT.CHARTS"
+            :value="customRegistrySetting"
+            :enabled="showCustomRegistryInput"
+            :default-registry="defaultRegistrySetting"
+            :namespace="targetNamespace"
+            in-store="cluster"
+            :register-before-hook="registerBeforeHook"
+            :show-pull-secrets="showRegistryPullSecrets"
+            :repo-default-pull-secrets="repoDefaultPullSecretNames"
+            :existing-values-pull-secrets="existingValuesPullSecrets"
+            :pull-secret="registryPullSecret"
+            :skip-pull-secrets="skipPullSecrets"
+            checkbox-test-id="custom-registry-checkbox"
+            input-test-id="custom-registry-input"
+            @update:value="(val) => customRegistrySetting = val"
+            @update:enabled="(val) => showCustomRegistryInput = val"
+            @update:pull-secret="(val) => registryPullSecret = val"
+            @update:skip-pull-secrets="(val) => skipPullSecrets = val"
           />
-          <div class="row">
-            <div class="col span-6">
-              <LabeledInput
-                v-if="showCustomRegistryInput"
-                v-model:value="customRegistrySetting"
-                data-testid="custom-registry-input"
-                label-key="catalog.chart.registry.custom.inputLabel"
-                placeholder-key="catalog.chart.registry.custom.placeholder"
-                :min-height="30"
-              />
-            </div>
-          </div>
           <div
             class="step__values__controls--spacer"
             style="flex:1"

package/pkg/require-asset.lib.js

@@ -0,0 +1,25 @@
+// Stub for extension library builds — prevents require.context() from bundling
+// all shell images into every extension. At runtime, delegates to the host
+// dashboard's asset resolver (exposed on window by the real require-asset.ts).
+
+export function toContextKey(path) {
+  return `./${ path.replace(/^[~@]shell\/assets\//, '') }`;
+}
+
+export function requireAsset(path) {
+  if (typeof window !== 'undefined' && window.__shell_requireAsset) {
+    return window.__shell_requireAsset(path);
+  }
+
+  throw new Error(`Asset context not available for: ${ path }`);
+}
+
+export function requireJson(path) {
+  if (typeof window !== 'undefined' && window.__shell_requireJson) {
+    return window.__shell_requireJson(path);
+  }
+
+  throw new Error(`JSON context not available for: ${ path }`);
+}
+
+export function _setContexts() {}

package/pkg/vue.config.js

@@ -72,11 +72,18 @@ module.exports = function(dir) {
         resource.request = fs.existsSync(pkgModelLoaderRequire) ? pkgModelLoaderRequire : path.join(__dirname, fileName);
       });
 
+      // Prevent require.context('@shell/assets') from bundling all shell images into extensions.
+      // The stub delegates to the host dashboard's asset resolver at runtime via window.__shell_requireAsset.
+      const requireAssetOverride = new webpack.NormalModuleReplacementPlugin(/require-asset$/, (resource) => {
+        resource.request = path.join(__dirname, 'require-asset.lib.js');
+      });
+
       // Auto-generate module to import the types (model, detail, edit etc)
       const autoImportPlugin = new VirtualModulesPlugin({ 'node_modules/@rancher/auto-import': generateTypeImport('@pkg', dir) });
 
       config.plugins.unshift(dynamicImporterOverride);
       config.plugins.unshift(modelLoaderImporterOverride);
+      config.plugins.unshift(requireAssetOverride);
       config.plugins.unshift(autoImportPlugin);
       config.plugins.unshift(new NodePolyfillPlugin()); // required from Webpack 5 to polyfill node modules
       // config.plugins.unshift(debug);

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -678,4 +678,88 @@ describe('class: Resource', () => {
       expect(viewYaml.enabled).toBe(true);
     });
   });
+
+  describe('method: dryRunCreate', () => {
+    const collectionUrl = '/v1/test.resources';
+
+    it('should dispatch a request with dryRun=All query param', async() => {
+      const dispatch = jest.fn().mockResolvedValue({});
+      const resource = new Resource({
+        type:     'test.resource',
+        metadata: {
+          name:      'my-resource',
+          namespace: 'my-ns',
+        },
+      }, {
+        getters: {
+          schemaFor: () => ({
+            linkFor:    (link: string) => (link === 'collection' ? collectionUrl : ''),
+            attributes: { namespaced: true },
+          })
+        },
+        dispatch,
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      await resource.dryRunCreate();
+
+      expect(dispatch).toHaveBeenCalledWith('request', {
+        opt: expect.objectContaining({
+          method: 'post',
+          url:    `${ collectionUrl }/my-ns?dryRun=All`,
+        }),
+        type: 'test.resource'
+      });
+    });
+
+    it('should use provided data instead of resource state when given', async() => {
+      const dispatch = jest.fn().mockResolvedValue({});
+      const resource = new Resource({
+        type:     'test.resource',
+        metadata: { name: 'original', namespace: 'ns' },
+      }, {
+        getters: {
+          schemaFor: () => ({
+            linkFor:    () => collectionUrl,
+            attributes: { namespaced: true },
+          })
+        },
+        dispatch,
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      const customData = {
+        type:     'test.resource',
+        metadata: { name: 'custom' },
+        spec:     {}
+      };
+
+      await resource.dryRunCreate(customData);
+
+      expect(dispatch).toHaveBeenCalledWith('request', {
+        opt:  expect.objectContaining({ data: customData }),
+        type: 'test.resource'
+      });
+    });
+
+    it('should propagate API errors', async() => {
+      const apiError = { _status: 409, message: 'already exists' };
+      const dispatch = jest.fn().mockRejectedValue(apiError);
+      const resource = new Resource({
+        type:     'test.resource',
+        metadata: { name: 'dup', namespace: 'ns' },
+      }, {
+        getters: {
+          schemaFor: () => ({
+            linkFor:    () => collectionUrl,
+            attributes: { namespaced: true },
+          })
+        },
+        dispatch,
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      await expect(resource.dryRunCreate()).rejects.toStrictEqual(apiError);
+    });
+  });
 });

package/plugins/dashboard-store/getters.js

@@ -278,7 +278,6 @@ export default {
     const schemas = state.types[SCHEMA];
 
     type = getters.normalizeType(type);
-
     if ( !schemas ) {
       if ( allowThrow ) {
         throw new Error("Schemas aren't loaded yet");

package/plugins/dashboard-store/resource-class.js

@@ -79,6 +79,7 @@ export const STATES_ENUM = {
   BUILDING:         'building',
   COMPLETED:        'completed',
   CORDONED:         'cordoned',
+  CANCELLED:        'cancelled',
   COUNT:            'count',
   CREATED:          'created',
   CREATING:         'creating',
@@ -207,6 +208,9 @@ export const STATES = {
   [STATES_ENUM.CORDONED]: {
     color: 'info', icon: 'tag', label: 'Cordoned', compoundIcon: 'info'
   },
+  [STATES_ENUM.CANCELLED]: {
+    color: 'warning', icon: 'error', label: 'Cancelled', compoundIcon: 'warning'
+  },
   [STATES_ENUM.COUNT]: {
     color: 'success', icon: 'dot-open', label: 'Count', compoundIcon: 'checkmark'
   },
@@ -1191,6 +1195,46 @@ export default class Resource {
     return this._save(...arguments);
   }
 
+  _collectionUrl() {
+    const schema = this.$getters['schemaFor'](this.type);
+
+    if ( !schema ) {
+      // Schema not found - likely due to lack of permissions to view this resource type
+      throw new Error(`${ this.type }: ${ this.t('validation.createResourceFailed', { type: this.typeDisplay }, true) }`);
+    }
+
+    let url = schema.linkFor('collection');
+
+    if ( schema.attributes && schema.attributes.namespaced && this.metadata && this.metadata.namespace ) {
+      url += `/${ this.metadata.namespace }`;
+    }
+
+    return url;
+  }
+
+  async dryRunCreate(data) {
+    try {
+      const url = this._collectionUrl();
+      const separator = url.includes('?') ? '&' : '?';
+      const body = data || this.cleanForSave(this.toSave() || JSON.parse(JSON.stringify(this)), true);
+
+      return this.$dispatch('request', {
+        opt: {
+          method:  'post',
+          url:     `${ url }${ separator }dryRun=All`,
+          data:    body,
+          headers: {
+            'content-type': 'application/json',
+            accept:         'application/json'
+          }
+        },
+        type: this.type
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }
+
   /**
    * Remove any unwanted properties from the object that will be saved
    */
@@ -1219,20 +1263,16 @@ export default class Resource {
     if ( this.metadata?.resourceVersion ) {
       this.metadata.resourceVersion = `${ this.metadata.resourceVersion }`;
     }
-
-    if ( !opt.url ) {
-      if ( forNew ) {
-        const schema = this.$getters['schemaFor'](this.type);
-        let url = schema.linkFor('collection');
-
-        if ( schema.attributes && schema.attributes.namespaced && this.metadata && this.metadata.namespace ) {
-          url += `/${ this.metadata.namespace }`;
+    try {
+      if ( !opt.url ) {
+        if ( forNew ) {
+          opt.url = this._collectionUrl();
+        } else {
+          opt.url = this.linkFor('update') || this.linkFor('self');
         }
-
-        opt.url = url;
-      } else {
-        opt.url = this.linkFor('update') || this.linkFor('self');
       }
+    } catch (e) {
+      return Promise.reject(e);
     }
 
     if ( !opt.method ) {

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -77,6 +77,16 @@ export default defineComponent({
     disabled: {
       type:    Boolean,
       default: false
+    },
+
+    /**
+     * Recalculate the height when the value is changed programmatically (e.g.
+     * populated from a file) and when the window is resized, not just on user
+     * input. Opt-in to avoid changing the behaviour of existing usages.
+     */
+    resizeOnValueChangeAndResizeWindow: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -117,6 +127,14 @@ export default defineComponent({
   },
 
   watch: {
+    // Recalculate the height when the value is changed programmatically (e.g.
+    // populated from a file), not just on user input. Opt-in via resizeOnValueChangeAndResizeWindow.
+    value() {
+      if (this.resizeOnValueChangeAndResizeWindow) {
+        this.queueResize();
+      }
+    },
+
     $attrs: {
       deep: true,
       handler() {
@@ -134,6 +152,18 @@ export default defineComponent({
     this.$nextTick(() => {
       this.autoSize();
     });
+
+    // Width changes alter text wrapping, so the required height can change when
+    // the window is resized. Opt-in via resizeOnValueChangeAndResizeWindow.
+    if (this.resizeOnValueChangeAndResizeWindow) {
+      window.addEventListener('resize', this.queueResize);
+    }
+  },
+
+  beforeUnmount() {
+    if (this.resizeOnValueChangeAndResizeWindow) {
+      window.removeEventListener('resize', this.queueResize);
+    }
   },
 
   methods: {

package/rancher-components/Form/TextArea/__tests__/TextAreaAutoGrow.test.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils';
+import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
+
+describe('component: TextAreaAutoGrow', () => {
+  it('should recalculate its height when the value changes programmatically and resizeOnValueChangeAndResizeWindow is set', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+
+    // queueResize is the (debounced) entrypoint that triggers autoSize
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.setProps({ value: 'a\nmuch\nlonger\nvalue\nset\nfrom\noutside' });
+
+    expect(queueResize).toHaveBeenCalledWith();
+  });
+
+  it('should not recalculate its height on programmatic value change by default', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial' } });
+
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.setProps({ value: 'a\nmuch\nlonger\nvalue\nset\nfrom\noutside' });
+
+    expect(queueResize).not.toHaveBeenCalled();
+  });
+
+  it('should recalculate its height on user input', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: '' } });
+
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.find('textarea').setValue('typed value');
+
+    expect(queueResize).toHaveBeenCalledWith();
+  });
+
+  it('should register a window resize listener when resizeOnValueChangeAndResizeWindow is set', () => {
+    const addSpy = jest.spyOn(window, 'addEventListener');
+
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+
+    const resizeListener = addSpy.mock.calls.find(([event]) => event === 'resize')?.[1];
+
+    expect(resizeListener).toBe(wrapper.vm.queueResize);
+
+    addSpy.mockRestore();
+  });
+
+  it('should not register a window resize listener by default', () => {
+    const addSpy = jest.spyOn(window, 'addEventListener');
+
+    mount(TextAreaAutoGrow, { props: { value: 'initial' } });
+
+    const resizeListener = addSpy.mock.calls.find(([event]) => event === 'resize')?.[1];
+
+    expect(resizeListener).toBeUndefined();
+
+    addSpy.mockRestore();
+  });
+
+  it('should recalculate its height when a window resize fires and resizeOnValueChangeAndResizeWindow is set', () => {
+    jest.useFakeTimers();
+    const component = TextAreaAutoGrow as unknown as { methods: Record<string, () => void> };
+    const autoSizeSpy = jest.spyOn(component.methods, 'autoSize');
+
+    mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+    autoSizeSpy.mockClear();
+
+    window.dispatchEvent(new Event('resize'));
+    jest.advanceTimersByTime(150); // queueResize is debounced (100ms)
+
+    expect(autoSizeSpy).toHaveBeenCalledWith(expect.any(Event));
+
+    autoSizeSpy.mockRestore();
+    jest.useRealTimers();
+  });
+
+  it('should remove the window resize listener when unmounted', () => {
+    const removeSpy = jest.spyOn(window, 'removeEventListener');
+
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+    const { queueResize } = wrapper.vm;
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', queueResize);
+
+    removeSpy.mockRestore();
+  });
+});

package/rancher-components/RcButton/index.ts

@@ -1,2 +1,2 @@
 export { default as RcButton } from './RcButton.vue';
-export type { RcButtonType } from './types';
+export type { RcButtonType, ButtonSize } from './types';

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -3,9 +3,13 @@
  * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
  */
 import { inject, onMounted, ref } from 'vue';
-import { RcButton, RcButtonType } from '@components/RcButton';
+import { RcButton, RcButtonType, ButtonSize } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';
 
+defineProps<{
+  size?: ButtonSize,
+}>();
+
 const {
   showMenu,
   registerTrigger,
@@ -32,6 +36,7 @@ defineExpose({ focus });
     role="button"
     aria-haspopup="menu"
     :aria-expanded="isMenuOpen"
+    :size="size"
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >