@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/plugins/dashboard-store/actions.js

@@ -660,12 +660,8 @@ export default {
     return getters.all(type);
   },
 
-  // opt:
-  //  filter: Filter by fields, e.g. {field: value, anotherField: anotherValue} (default: none)
-  //  limit: Number of records to return per page (default: 1000)
-  //  sortBy: Sort by field
-  //  sortOrder: asc or desc
-  //  url: Use this specific URL instead of looking up the URL for the type/id.  This should only be used for bootstrapping schemas on startup.
+  // opt: @ActionFindArgs
+  // @returns @ActionFindResponse
   //  @TODO depaginate: If the response is paginated, retrieve all the pages. (default: true)
   async find(ctx, { type, id, opt }) {
     if (!id) {
@@ -697,11 +693,23 @@ export default {
       }
     }
 
+    const havePage = getters.havePage(type);
+
     opt = opt || {};
     opt.url = getters.urlFor(type, id, opt);
 
     const res = await dispatch('request', { opt, type });
 
+    if (!havePage && getters.havePage(type)) {
+      // There may be a super edge case where list --> detail (whilst loading) --> list navigation causes the list's rows to disappear
+      // Somehow the `findPage` from the list page returns before the `find`. The `find` then clears the page state in the cache.
+      // If this has happened silently return (we don't care about result)
+      // https://github.com/rancher/dashboard/issues/17524
+      console.warn(`Prevented \`find\` action from polluting cache for type "${ type }" (currently represents a page).`); // eslint-disable-line no-console
+
+      return;
+    }
+
     if (!opt.transient) {
       await dispatch('load', { data: res, invalidatePageCache: opt.invalidatePageCache });
     }
@@ -830,19 +838,33 @@ export default {
   /**
    * Remove all cached entries for a resource and stop watches
    */
-  forgetType({ commit, dispatch, state }, type, compareWatches) {
-    // Stop all known watches
-    state.started
-      .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
-      .forEach((entry) => dispatch('unwatch', entry));
-
-    // Stop all known back-off watch processes for this type
-    dispatch('resetWatchBackOff', {
-      type, compareWatches, resetStarted: false
-    });
+  forgetType({ commit, dispatch, state }, payload) {
+    let type = payload;
+    let config = {};
+
+    if ( typeof payload === 'object' && payload !== null && payload.type ) {
+      type = payload.type;
+      config = payload;
+    }
+
+    const { compareWatches, unwatch = true, forget = true } = config;
 
-    // Remove entries from store
-    commit('forgetType', type);
+    if (unwatch) {
+      // Stop all known watches
+      state.started
+        .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
+        .forEach((entry) => dispatch('unwatch', entry));
+
+      // Stop all known back-off watch processes for this type
+      dispatch('resetWatchBackOff', {
+        type, compareWatches, resetStarted: false
+      });
+    }
+
+    if (forget) {
+      // Remove entries from store
+      commit('forgetType', type);
+    }
   },
 
   promptRemove({ commit, state }, resources ) {

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

@@ -946,12 +946,15 @@ export default class Resource {
     // where mostly likely extension CRD model is extending from resource-class
     const isResourceDetailDrawerCompatibleWithRancherSystem = semver.satisfies(parsedRancherVersion, '>= 2.13.0');
 
+    // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+    const showConfigEnabled = isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml);
+
     const all = [
       {
         action:  'showConfiguration',
         label:   this.t('action.showConfiguration'),
         icon:    'icon icon-document',
-        enabled: isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml), // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+        enabled: showConfigEnabled,
       },
       { divider: true },
       {
@@ -964,7 +967,7 @@ export default class Resource {
         action:  this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
         label:   this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
         icon:    'icon icon-file',
-        enabled: this.canYaml,
+        enabled: this.canYaml && (this.canEditYaml || !showConfigEnabled), // Hide "View YAML" when "Show Configuration" is available since it already includes YAML viewing
       },
       {
         action:  (this.canCustomEdit ? 'goToClone' : 'cloneYaml'),

package/plugins/steve/__tests__/subscribe.spec.ts

@@ -14,7 +14,8 @@ describe('steve: subscribe', () => {
         schemaFor:       () => null,
         inError:         () => false,
         watchStarted:    () => false,
-        listenerManager: state.listenerManager
+        listenerManager: state.listenerManager,
+        typeRegistered:  () => true,
       };
       const rootGetters = {
         'type-map/isSpoofed': () => false,
@@ -343,7 +344,7 @@ describe('steve: subscribe', () => {
 
         // call watch
         actions.watch({
-          state, dispatch, getters, rootGetters
+          state, dispatch, getters, rootGetters, commit
         }, {
           ...obj,
           revision,
@@ -488,6 +489,7 @@ describe('steve: subscribe', () => {
         const state = {
           started:         [],
           inError:         {},
+          queue:           [],
           listenerManager: new SteveWatchEventListenerManager()
         };
         const _getters = {
@@ -498,7 +500,8 @@ describe('steve: subscribe', () => {
           watchStarted:    (...args) => getters.watchStarted(state)(...args),
           backOffId:       (...args) => getters.backOffId()(...args),
           canBackoff:      () => true,
-          listenerManager: state.listenerManager
+          listenerManager: state.listenerManager,
+          typeRegistered:  () => true,
         };
         const commit = (type, ...args) => mutations[type](state, ...args);
 

package/plugins/steve/steve-pagination-utils.ts

@@ -258,6 +258,11 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'spec.displayName' },
       { field: `status.provider` },
       { field: `status.connected` },
+      { field: `status.info.machineProvider` },
+      { field: `status.driver` },
+      { field: `status.provider` },
+      { field: `status.info.kubernetesVersion` },
+      { field: `spec.fleetWorkspaceName` },
     ],
     [SECRET]: [
       { field: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]` },
@@ -265,7 +270,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [NAMESPACE]: [
     ],
     [CAPI.MACHINE]: [
-      { field: 'spec.clusterName' }
+      { field: 'spec.clusterName' },
+    ],
+    [CAPI.MACHINE_DEPLOYMENT]: [
+      { field: 'spec.clusterName' },
     ],
     [EVENT]: [
       { field: '_type' },
@@ -770,8 +778,8 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
       enableAll:  false,
       enableSome: {
         enabled: [
-          { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar'] },
-          { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+          { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar', 'home', 'cluster-management'] },
+          { resource: MANAGEMENT.CLUSTER, context: ['side-bar', 'home', 'cluster-management'] },
           { resource: CATALOG.APP, context: ['branding'] },
           SECRET
         ],

package/plugins/steve/subscribe.js

@@ -469,8 +469,10 @@ const sharedActions = {
     const worker = (this.$workers || {})[getters.storeName];
 
     if (worker) {
+      const storeName = getters.storeName;
+
       worker.postMessage({ destroyWorker: true }); // we're only passing the boolean here because the key needs to be something truthy to ensure it's passed on the object.
-      cleanupTasks.push(waitFor(() => !this.$workers[getters.storeName], 'Worker is destroyed'));
+      cleanupTasks.push(waitFor(() => !this.$workers?.[storeName], 'Worker to be destroyed', 30000, 10, true));
     }
 
     if ( socket ) {
@@ -553,17 +555,32 @@ const sharedActions = {
    * @param {STEVE_WATCH_PARAMS} params
    */
   watch({
-    state, dispatch, getters, rootGetters
+    state, dispatch, getters, rootGetters, commit
   }, params) {
     state.debugSocket && console.info(`Watch Request [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
     let {
       // eslint-disable-next-line prefer-const
-      type, selector, id, revision, namespace, stop, force, mode, standardWatch = true
+      type, selector, id, revision, namespace, stop, force, mode, standardWatch = true, registerType = false
     } = params;
 
     namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
     type = getters.normalizeType(type);
 
+    if ( !getters.typeRegistered(type) ) {
+      if (registerType) {
+        commit('registerType', type);
+      } else if (mode !== STEVE_WATCH_MODE.RESOURCE_CHANGES) {
+        // - If we continue and open up a watch whenever we receive a `resource.` notification we go to queueChanges (bar resource.changes mode).
+        // - queueChanges ignores any change that's for a type that hasn't been registered
+        // - So here we're just exiting early, avoiding the watch --> queueChanges --> ignore loop
+        //
+        // Interestingly this is hit quite a few times (on cluster create screens there's token, cluster, project, projectRoleTemplateBinding, etc)
+        state.debugSocket && console.info('Will not Watch (type is not registered)', JSON.stringify(params)); // eslint-disable-line no-console
+
+        return;
+      }
+    }
+
     if (rootGetters['type-map/isSpoofed'](type)) {
       state.debugSocket && console.info('Will not Watch (type is spoofed)', JSON.stringify(params)); // eslint-disable-line no-console
 
@@ -620,6 +637,9 @@ const sharedActions = {
         if (debounceMs) {
           msg.debounceMs = debounceMs;
         }
+
+        // Anything in the queue will pollute the result set, so clear (and print to console so we know it's working)
+        commit('clearFromQueue', { type, log: true });
       }
     }
 
@@ -1556,10 +1576,20 @@ const defaultMutations = {
     state.socketListenerManager = new SteveWatchEventListenerManager(state.config.namespace);
   },
 
-  clearFromQueue(state, type) {
+  clearFromQueue(state, args) {
+    const safeArgs = typeof args === 'object' ? args : { type: args };
+    const { type, log } = safeArgs;
+
     // Remove anything in the queue that is a resource update for the given type
     state.queue = state.queue.filter((item) => {
-      return item.body?.type !== type;
+      const keep = item.body?.type !== type;
+
+      if (!keep && log) {
+        // eslint-disable-next-line no-console
+        console.info(`Clearing queued item of type \`${ type }\` from queue`, item);
+      }
+
+      return keep;
     });
   },
 };

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

@@ -1,4 +1,6 @@
-import { mount } from '@vue/test-utils';
+import { defineComponent, nextTick, provide, ref } from 'vue';
+import { mount, flushPromises } from '@vue/test-utils';
+import { useForm } from 'vee-validate';
 import { LabeledInput } from './index';
 
 describe('component: LabeledInput', () => {
@@ -105,4 +107,212 @@ 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';
+      const showAllErrors = ref(false);
+      let triggerFormValidation!: () => Promise<unknown>;
+
+      const TestWrapper = defineComponent({
+        components: { LabeledInput },
+        setup() {
+          provide('vee-show-all-errors', showAllErrors);
+
+          const { validate } = useForm({
+            validationSchema: { username: (v: string) => (!v ? errorMessage : true) },
+            initialValues:    { username: '' },
+          });
+
+          triggerFormValidation = async() => {
+            await validate();
+            showAllErrors.value = true;
+          };
+
+          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,5 @@
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, computed, toRef } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
@@ -8,6 +8,7 @@ import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
 import { useCompactInput } from '@shell/composables/useCompactInput';
+import { useVeeValidateField } from '@shell/composables/useVeeValidateField';
 
 interface NonReactiveProps {
   onInput: (event: Event) => void | ((event: Event) => void);
@@ -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,27 @@ export default defineComponent({
 
     const onInput = inject('onInput', provideProps.onInput);
 
+    const { effectiveValidationMessage, veeHandleBlur, veeValidate } = useVeeValidateField({
+      name:  toRef(props, 'name'),
+      rules: toRef(props, 'rules'),
+      value: toRef(props, 'value'),
+      validationMessage,
+    });
+
+    const effectiveStatus = computed(() => props.status);
+
     return {
       focused,
       onFocusLabeled,
       onBlurLabeled,
       onInput,
       isDisabled,
-      validationMessage,
+      validationMessage: effectiveValidationMessage,
       requiredField,
       isCompact,
+      veeHandleBlur,
+      veeValidate,
+      effectiveStatus,
     };
   },
 
@@ -339,6 +361,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 +380,7 @@ export default defineComponent({
       focused,
       [mode]: true,
       disabled: isDisabled,
-      [status]: status,
+      [effectiveStatus]: effectiveStatus,
       suffix: hasSuffix,
       'has-clean-tooltip': hasTooltip,
       'compact-input': isCompact,
@@ -389,13 +416,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 +438,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 +493,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/rancher-components/RcButton/RcButton.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, RouterLinkStub } from '@vue/test-utils';
 import RcButton from './RcButton.vue';
 
 describe('rcButton.vue', () => {
@@ -138,4 +138,40 @@ describe('rcButton.vue', () => {
       expect(button.classes()).toContain('variant-ghost');
     });
   });
+
+  describe('to prop', () => {
+    it('renders as a <button> when no "to" prop is provided', () => {
+      const wrapper = mount(RcButton);
+
+      expect(wrapper.find('button').exists()).toBe(true);
+      expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(false);
+    });
+
+    it('renders as a RouterLink when "to" prop is provided', () => {
+      const to = { name: 'some-route' };
+      const wrapper = mount(RcButton, {
+        props:  { to },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+
+      expect(link.exists()).toBe(true);
+      expect(wrapper.find('button').exists()).toBe(false);
+      expect(link.props('to')).toStrictEqual(to);
+    });
+
+    it('applies button classes when rendered as a RouterLink', () => {
+      const wrapper = mount(RcButton, {
+        props:  { to: '/foo', variant: 'secondary' },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+
+      expect(link.classes()).toContain('rc-button');
+      expect(link.classes()).toContain('btn');
+      expect(link.classes()).toContain('variant-secondary');
+    });
+  });
 });