@rancher/shell 3.0.11 → 3.0.12-rc.2

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,4 +1,6 @@
-import { mount } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
+import { mount, flushPromises } from '@vue/test-utils';
+import { useForm } from 'vee-validate';
 import { LabeledInput } from './index';
 
 describe('component: LabeledInput', () => {
@@ -105,4 +107,206 @@ describe('component: LabeledInput', () => {
     expect(mainInput.attributes('aria-label')).toBeUndefined();
     expect(wrapper.find('label').text()).toBe(label);
   });
+
+  describe('vee-validate integration', () => {
+    const i18nMock = { $store: { getters: { 'i18n/t': jest.fn() } } };
+
+    it('without name prop: existing rules-based validation message is shown after blur', async() => {
+      const errorMessage = 'This field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await nextTick();
+
+      expect(wrapper.vm.validationMessage).toBe(errorMessage);
+    });
+
+    it('without name prop: error CSS class is not applied automatically', async() => {
+      const notEmptyRule = (v: string) => (!v ? 'Error' : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await nextTick();
+
+      expect(wrapper.find('.labeled-input').classes()).not.toContain('error');
+    });
+
+    it('with name prop: name attribute is set on the input element', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { name: 'myField' },
+        mocks:     i18nMock
+      });
+
+      expect(wrapper.find('input').attributes('name')).toStrictEqual('myField');
+    });
+
+    it('with name prop: existing rules run through vee-validate and show error message after blur', async() => {
+      const errorMessage = 'Field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          name:  'testField',
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await flushPromises();
+
+      expect(wrapper.vm.validationMessage).toStrictEqual(errorMessage);
+    });
+
+    it('with name prop: no error class when validation passes', async() => {
+      const notEmptyRule = (v: string) => (!v ? 'Error' : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          name:  'testField',
+          rules: [notEmptyRule],
+          value: 'valid value',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await flushPromises();
+
+      expect(wrapper.find('.labeled-input').classes()).not.toContain('error');
+      expect(wrapper.vm.validationMessage).toBeUndefined();
+    });
+
+    it('with name prop: form-level validation schema error is shown when the form validates', async() => {
+      const errorMessage = 'Username is required';
+      let triggerFormValidation!: () => Promise<unknown>;
+
+      const TestWrapper = defineComponent({
+        components: { LabeledInput },
+        setup() {
+          const { validate } = useForm({
+            validationSchema: { username: (v: string) => (!v ? errorMessage : true) },
+            initialValues:    { username: '' }
+          });
+
+          triggerFormValidation = validate;
+
+          return {};
+        },
+        template: '<LabeledInput name="username" value="" />'
+      });
+
+      const wrapper = mount(TestWrapper, { global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } } });
+
+      await triggerFormValidation();
+      await flushPromises();
+
+      const labeledInput = wrapper.findComponent(LabeledInput);
+
+      expect(labeledInput.vm.validationMessage).toStrictEqual(errorMessage);
+    });
+
+    it('without name prop: error clears when a previously invalid value becomes valid', async() => {
+      const errorMessage = 'This field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await nextTick();
+
+      expect(wrapper.vm.validationMessage).toBe(errorMessage);
+
+      await wrapper.setProps({ value: 'valid value' });
+      await nextTick();
+
+      expect(wrapper.vm.validationMessage).toBeUndefined();
+    });
+
+    it('with name prop: error clears when a previously invalid value becomes valid', async() => {
+      const errorMessage = 'Field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          name:  'testField',
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await flushPromises();
+
+      expect(wrapper.vm.validationMessage).toStrictEqual(errorMessage);
+
+      await wrapper.setProps({ value: 'valid value' });
+      await flushPromises();
+
+      expect(wrapper.vm.validationMessage).toBeUndefined();
+    });
+
+    describe('with both name and rules provided', () => {
+      it('shows the error message exactly once when invalid (not duplicated across both validation paths)', async() => {
+        const errorMessage = 'Field cannot be empty';
+        const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+        const wrapper = mount(LabeledInput, {
+          propsData: {
+            name:  'testField',
+            rules: [notEmptyRule],
+            value: '',
+          },
+          mocks: i18nMock
+        });
+
+        await wrapper.find('input').trigger('blur');
+        await flushPromises();
+
+        expect(wrapper.vm.validationMessage).toStrictEqual(errorMessage);
+        expect(wrapper.vm.validationMessage).not.toContain(`${ errorMessage }, ${ errorMessage }`);
+      });
+
+      it('shows no error when the value satisfies the rules', async() => {
+        const notEmptyRule = (v: string) => (!v ? 'Field cannot be empty' : undefined);
+
+        const wrapper = mount(LabeledInput, {
+          propsData: {
+            name:  'testField',
+            rules: [notEmptyRule],
+            value: 'valid value',
+          },
+          mocks: i18nMock
+        });
+
+        await wrapper.find('input').trigger('blur');
+        await flushPromises();
+
+        expect(wrapper.vm.validationMessage).toBeUndefined();
+      });
+    });
+  });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, computed, watch } from 'vue';
+import { useField } from 'vee-validate';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
@@ -114,6 +115,15 @@ export default defineComponent({
     ariaLabel: {
       type:    String,
       default: ''
+    },
+
+    /**
+     * The field name used for vee-validate integration. When provided, the
+     * component registers with a parent vee-validate form context
+     */
+    name: {
+      type:    String,
+      default: null
     }
   },
 
@@ -132,15 +142,72 @@ export default defineComponent({
 
     const onInput = inject('onInput', provideProps.onInput);
 
+    // Stable fallback name so useField is always called unconditionally.
+    // When no name prop is given the field won't match any form-schema path.
+    const standaloneFieldId = `__field__${ generateRandomAlphaString(12) }`;
+    const veeFieldName = computed(() => props.name || standaloneFieldId);
+
+    // Pass existing rules to vee-validate so field-level validation still runs
+    const veeValidator = (value: unknown): boolean | string => {
+      // Return true when name is absent to avoid duplicating
+      // useLabeledFormElement validation
+      if (!props.name) {
+        return true;
+      }
+      for (const rule of props.rules as Array<(v: unknown) => string | undefined>) {
+        const msg = rule(value);
+
+        if (msg) {
+          return msg;
+        }
+      }
+
+      return true;
+    };
+
+    const {
+      errorMessage: veeError,
+      handleBlur:   veeHandleBlur,
+      validate:     veeValidate,
+      value:        veeValue,
+    } = useField<string | number | Record<string, unknown>>(
+      veeFieldName,
+      veeValidator,
+      {
+        initialValue:          props.value as string | number,
+        validateOnValueUpdate: true,
+      }
+    );
+
+    // Keep vee-validate's internal value in sync with the controlled prop value.
+    watch(() => props.value, (v) => {
+      if (veeValue.value !== v) {
+        veeValue.value = v as string | number;
+      }
+    });
+
+    const effectiveValidationMessage = computed(() => {
+      if (props.name && veeError.value) {
+        return veeError.value;
+      }
+
+      return validationMessage.value;
+    });
+
+    const effectiveStatus = computed(() => props.status);
+
     return {
       focused,
       onFocusLabeled,
       onBlurLabeled,
       onInput,
       isDisabled,
-      validationMessage,
+      validationMessage: effectiveValidationMessage,
       requiredField,
       isCompact,
+      veeHandleBlur,
+      veeValidate,
+      effectiveStatus,
     };
   },
 
@@ -339,6 +406,11 @@ export default defineComponent({
     onBlur(event: string | FocusEvent): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
+      // Mark the field as touched in vee-validate without relying on its
+      // 'validated-only' guard, then run validation unconditionally so
+      // errors surface on the first blur (matching useLabeledFormElement behavior).
+      this.veeHandleBlur(event instanceof FocusEvent ? event : undefined, false);
+      this.veeValidate();
     },
 
     escapeHtml
@@ -353,7 +425,7 @@ export default defineComponent({
       focused,
       [mode]: true,
       disabled: isDisabled,
-      [status]: status,
+      [effectiveStatus]: effectiveStatus,
       suffix: hasSuffix,
       'has-clean-tooltip': hasTooltip,
       'compact-input': isCompact,
@@ -389,13 +461,14 @@ export default defineComponent({
         ref="value"
         v-bind="$attrs"
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
+        :name="name || undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :aria-disabled="isDisabled"
         :value="value || ''"
         :placeholder="_placeholder"
         autocapitalize="off"
-        :class="{ conceal: type === 'multiline-password' }"
+        :class="{ 'multiline-password': type === 'multiline-password' }"
         :aria-describedby="ariaDescribedBy"
         :aria-required="requiredField"
         @update:value="onInput"
@@ -410,6 +483,7 @@ export default defineComponent({
         :role="type === 'number' ? undefined : 'textbox'"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
+        :name="name || undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :aria-disabled="isDisabled"
@@ -464,6 +538,10 @@ export default defineComponent({
   </div>
 </template>
 <style scoped lang="scss">
+.multiline-password:not(:focus) {
+  -webkit-text-security: disc;
+}
+
 .labeled-input.view {
   input {
     text-overflow: ellipsis;

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -6,7 +6,7 @@ type StateType = boolean | 'true' | 'false' | undefined;
 export default defineComponent({
   props: {
     value: {
-      type:    [Boolean, String, Number],
+      type:    [Boolean, String, Number, null],
       default: false
     },
 

package/scripts/test-plugins-build.sh

@@ -236,10 +236,13 @@ function clone_repo_test_extension_build() {
 # Here we just add the extension that we want to include as a check (all our official extensions should be included here)
 # Don't forget to add the unit tests exception to clone_repo_test_extension_build function if a new extension has those
 # TODO: ISSUE #16858 - Reenable the tests as packages migrate to node version 24
-# clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
+clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
 # clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
 clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
 # clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
-# clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+clone_repo_test_extension_build "rancher" "ali-ui" "ali"
+clone_repo_test_extension_build "rancher" "virtual-clusters-ui" "virtual-clusters"
+# clone_repo_test_extension_build "rancher" "rancher-ai-ui" "rancher-ai-ui"
 
 echo "All done"

package/scripts/typegen.sh

@@ -22,11 +22,13 @@ ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/table-headers.js --declara
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/types.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/labels-annotations.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/version.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/product/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config/product > /dev/null
 
 # # store
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/features.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
-${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/prefs.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/plugins.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/prefs.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/store-types.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
 
 # # plugins
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/i18n.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/ > /dev/null
@@ -93,6 +95,16 @@ function processDir() {
         echo "declare module '${module}' {" >> ${INDEX}
         cat $entry >> ${INDEX}
         echo -e "}" >> ${INDEX}
+
+        # Also generate a module declaration with .js extension for JS source files
+        # TypeScript imports use .js extensions for JS files
+        if [ "${name}" != "index" ]; then
+          local moduleWithJs=${basePkg}/${name}.js
+          echo -e "\n// ${moduleWithJs}\n" >> ${INDEX}
+          echo "declare module '${moduleWithJs}' {" >> ${INDEX}
+          cat $entry >> ${INDEX}
+          echo -e "}" >> ${INDEX}
+        fi
       fi
     fi
   done

package/server/server-middleware.js

@@ -1,6 +1,6 @@
 module.exports = function(req, res, next) {
-  // We do this redirect so that /verify-auth can work with both standalone and
-  // while dashboard is nested under ember.
+  // We do this redirect so that /verify-auth can work with both standalone
+  // and hosted configurations.
   if (req.url.includes('/verify-auth') || req.url.includes('/verify-auth-azure')) {
     res.writeHead(301, { Location: req.url.replace(/verify-auth(-azure)?/, 'auth/verify') });
     res.end();

package/static/humans.txt

@@ -0,0 +1 @@
+This product was created by the inspirational people at Rancher by SUSE.

package/static/robots.txt

@@ -0,0 +1,34 @@
+# ::::::::::::::::::::::::::::::;;;;;;;:::::::::::::::::::;:::::::::::::::::::
+# ::::::::::::::::::::::;+xxxxxxxxxxxxxxxxxxxx+;:::::::::+xxx+::::::::::::::::
+# :::::::::::::::::;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;::::+xxxxxxx+::::::::::::
+# ::::::::::::::+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;+xxxxxxxxxxx+::::::::
+# :::::::::::+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;::;++;:::::
+# :::::::::+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+::::::;+;::::
+# :::::::;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx::::;++:++::::
+# ::::::+xxxxxxxxxx++xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+::::;:;xx::::
+# :::::+xxxxxx+;:::::::::;;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+;;;+xxx;:::
+# ::::;xxxxx+:::::::::::::::;+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+;;+xxxxxxxx;:::
+# ::::xxxxx;::::;+xxxxxx++::::;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx++++++++;::::
+# ::::xxxx+::::;xxx+;;;+xxx;::::xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+;;::::::
+# ::::xxxx+::::+xx;:::::;+xx;::::xxxxxxxxxxxxxxxxxxxxxxx;:::;;;;;;;:::::::::::
+# ::::xxxxx;:::+xx+::::::;xxx;::::xxxxxx;:::::::;;+xxxxx;:::::::::::::::::::::
+# ::::;xxxx+;:::;++::::::;xxx;::::;xxxxx+;:::::::::;+xxxx;::::::::::::::::::::
+# :::::+xxxx+;::::::::::;xxxx;:::::;+xxxxxx+;:::::::;+xxxxx+;:::::::::::::::::
+# ::::::;xxxxx++;;:::;;+xxxx;:::::::::::::::::::::::::::::::::::::::::::::::::
+# :::::::;+xxxxxxxxxxxxxxxx;::::::::::::::::::::::::::::::::::::::::::::::::::
+# :::::::::;++xxxxxxxxxx++::::::::::::::::::::::::::::::::::::::::::::::::::::
+# ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+# ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+# ::::::::;;;;;::::::::::;;:::::::::;;:::::::::;;;;;::::::::::::;;;;;;;;;:::::
+# :::::+X&&$$$$&$+::::::x&$+:::::::X&X;:::::;X$&$$$$&$x;::::::x&&$$$$$$$$x::::
+# ::::x&$X;::::x$&X:::::x&$+:::::::X&X;::::+$&$;::::+$$X;::::;&$;:::::::::::::
+# :::;$&X;::::::::::::::x&$+:::::::X&X;::::X&$;::::::::::::::+&$::::::::::::::
+# ::::x&&$X;;:::::::::::x&$+:::::::X&X;::::+$&&X+;:::::::::::+&$;:::::::::::::
+# :::::;X$&&&&&&$;::::::x&$+:::::::X&X;::::::x$&&&&&&$+::::::+&&&&&&&&&&+:::::
+# :::::::::::;x$&&$:::::x&$+:::::::X&X;::::::::::::+$&&$+::::+&$::::::::::::::
+# :::::;::::::::X$&;::::+$$x:::::::$&X;:::::;::::::::x$$+::::+&$::::::::::::::
+# :::;$&$X;:::;X$&$:::::;X&$X;:::x$&$+::::;X&$X;:::;x$&$+::::;&$x;;;;;;;;:::::
+# :::::+X&&&&&&&X;::::::::+X$&&&&&$x;:::::::;X$&&&&&&$+:::::::;$&&&&&&&&&x::::
+# :::::::::;;;::::::::::::::::;;:::::::::::::::::;;::::::::::::::::::::::::::;
+User-Agent: *
+Disallow: /

package/static/welcome-cow.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 305.3 143.2" style="enable-background:new 0 0 305.3 143.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0876A9;}
+</style>
+<g>
+	<path class="st0" d="M305.2,31.5l-3.3-19.9C300.8,5.2,298.3,0,296.4,0c-2,0-3.6,5.3-3.6,11.8v5.2c0,6.5-5.3,11.8-11.8,11.8h-5.2
+		c-0.4,0-0.7,0-1.1,0V43c0.4,0,0.7,0,1.1,0h19.5C301.8,43.1,306.2,37.8,305.2,31.5"/>
+	<path class="st0" d="M258.3,14.6h-31.7c-0.3,0-0.5,0-0.8,0h-32.5c-0.4,0-0.8,0-1.1,0.1v-3c0-6.5-1.6-11.8-3.6-11.8
+		s-4.5,5.2-5.5,11.6l-3.3,19.9c-1.1,6.4,3.4,11.6,9.8,11.6h19.5c2,0,3.9-0.3,5.6-0.9c-0.6,3.3-3.5,5.9-7,5.9h-27.4
+		c-4.4,0-7.8-4-7.1-8.4L176,23c0.7-4.4-2.6-8.4-7.1-8.4H32.5c-2.9,0-5.4,1.7-6.5,4.2L0.3,58c-0.4,0.7-0.4,1.5,0.1,2.1l5,5.9
+		c0.6,0.7,1.7,0.8,2.5,0.2l17.5-13.8v83.6c0,4,3.2,7.2,7.2,7.2h38.7c4,0,7.2-3.2,7.2-7.2V107c0-4,3.2-7.2,7.2-7.2h96.7
+		c4,0,7.2,3.2,7.2,7.2v29.1c0,4,3.2,7.2,7.2,7.2h38.7c4,0,7.2-3.2,7.2-7.2v-31.3h-20.6c-6.5,0-11.8-5.3-11.8-11.8V72.9
+		c0-3.8,1.9-7.2,4.7-9.4v24c0,6.5,5.3,11.8,11.8,11.8h31.7c6.5,0,11.8-5.3,11.8-11.8V26.4C270.1,19.9,264.8,14.6,258.3,14.6"/>
+</g>
+</svg>