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

package/components/fleet/__tests__/FleetClusters.test.ts

@@ -90,36 +90,36 @@ describe('component: FleetClusters', () => {
       const wrapper = createWrapper();
       const reposReady = wrapper.vm.headers.find((h: any) => h.name === 'reposReady');
 
-      expect(reposReady.labelKey).toBe('tableHeaders.reposReady');
-      expect(reposReady.value).toBe('status.readyGitRepos');
-      expect(reposReady.search).toBe(false);
+      expect(reposReady?.labelKey).toBe('tableHeaders.reposReady');
+      expect(reposReady?.value).toBe('status.readyGitRepos');
+      expect(reposReady?.search).toBe(false);
     });
 
     it('should configure helmOpsReady column correctly', () => {
       const wrapper = createWrapper();
       const helmOpsReady = wrapper.vm.headers.find((h: any) => h.name === 'helmOpsReady');
 
-      expect(helmOpsReady.labelKey).toBe('tableHeaders.helmOpsReady');
-      expect(helmOpsReady.value).toBe('status.readyHelmOps');
-      expect(helmOpsReady.search).toBe(false);
+      expect(helmOpsReady?.labelKey).toBe('tableHeaders.helmOpsReady');
+      expect(helmOpsReady?.value).toBe('status.readyHelmOps');
+      expect(helmOpsReady?.search).toBe(false);
     });
 
     it('should configure bundlesReady column correctly', () => {
       const wrapper = createWrapper();
       const bundlesReady = wrapper.vm.headers.find((h: any) => h.name === 'bundlesReady');
 
-      expect(bundlesReady.labelKey).toBe('tableHeaders.bundlesReady');
-      expect(bundlesReady.value).toBe('status.display.readyBundles');
-      expect(bundlesReady.search).toBe(false);
+      expect(bundlesReady?.labelKey).toBe('tableHeaders.bundlesReady');
+      expect(bundlesReady?.value).toBe('status.display.readyBundles');
+      expect(bundlesReady?.search).toBe(false);
     });
 
     it('should configure lastSeen column with LiveDate formatter', () => {
       const wrapper = createWrapper();
       const lastSeen = wrapper.vm.headers.find((h: any) => h.name === 'lastSeen');
 
-      expect(lastSeen.formatter).toBe('LiveDate');
-      expect(lastSeen.formatterOpts).toStrictEqual({ addSuffix: true });
-      expect(lastSeen.width).toBe(120);
+      expect(lastSeen?.formatter).toBe('LiveDate');
+      expect(lastSeen?.formatterOpts).toStrictEqual({ addSuffix: true });
+      expect(lastSeen?.width).toBe(120);
     });
   });
 

package/components/form/LabeledSelect.vue

@@ -12,7 +12,8 @@ import { _VIEW } from '@shell/config/query-params';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
 import { useLabeledSelect } from '@shell/composables/useLabeledSelect';
-import { ref } from 'vue';
+import { ref, toRef } from 'vue';
+import { useVeeValidateField } from '@shell/composables/useVeeValidateField';
 
 export default {
   name: 'LabeledSelect',
@@ -115,6 +116,11 @@ export default {
     noOptionsLabelKey: {
       type:    String,
       default: 'labelSelect.noOptions.empty'
+    },
+
+    name: {
+      type:    String,
+      default: null
     }
   },
 
@@ -161,6 +167,13 @@ export default {
       resizeHandlerFn(select);
     };
 
+    const { effectiveValidationMessage, veeHandleBlur, veeValidate } = useVeeValidateField({
+      name:  toRef(props, 'name'),
+      rules: toRef(props, 'rules'),
+      value: toRef(props, 'value'),
+      validationMessage,
+    });
+
     return {
       isOpen,
       select,
@@ -172,7 +185,7 @@ export default {
       onFocusLabeled,
       onBlurLabeled,
       isDisabled,
-      validationMessage,
+      validationMessage: effectiveValidationMessage,
       requiredField,
       isSearchable,
       isFilterable,
@@ -186,6 +199,8 @@ export default {
       paginating,
       loadMore,
       setPaginationFilter,
+      veeHandleBlur,
+      veeValidate,
     };
   },
 
@@ -221,7 +236,7 @@ export default {
     // update placeholder text to inform user they can add their own opts when none are found
     showTagPrompts() {
       return !this.options.length && this.$attrs.taggable && this.isSearchable;
-    }
+    },
   },
 
   methods: {
@@ -272,6 +287,8 @@ export default {
       this.$emit('on-blur');
       this.selectedVisibility = 'visible';
       this.onBlurLabeled();
+      this.veeHandleBlur(undefined, false);
+      this.veeValidate();
     },
 
     onOpen() {

package/components/form/NameNsDescription.vue

@@ -164,6 +164,14 @@ export default {
       }),
       type: Object,
     },
+    nameFieldName: {
+      type:    String,
+      default: null,
+    },
+    namespaceFieldName: {
+      type:    String,
+      default: null,
+    },
 
     /**
      * Inherited global identifier prefix for tests
@@ -438,6 +446,7 @@ export default {
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
+        :name="namespaceFieldName"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
         :disabled="namespaceReallyDisabled"
@@ -464,6 +473,7 @@ export default {
       <LabeledSelect
         v-show="!createNamespace"
         v-model:value="namespace"
+        :name="namespaceFieldName"
         :clearable="true"
         :options="options"
         :disabled="namespaceReallyDisabled"
@@ -487,6 +497,7 @@ export default {
         ref="nameInput"
         key="name"
         v-model:value="name"
+        :name="nameFieldName"
         data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"

package/components/form/Security.vue

@@ -140,11 +140,12 @@ export default {
         this.afterPrivilegedTickedMessage = this.t('workload.container.security.privileged.afterTick.false');
       }
 
-      if (securityContext.fsGroup === '') {
+      // Drop empty values so we don't send a string for int64 fields.
+      if (securityContext.fsGroup === '' || securityContext.fsGroup === null || securityContext.fsGroup === undefined) {
         delete securityContext.fsGroup;
       }
 
-      if (securityContext.runAsUser === '') {
+      if (securityContext.runAsUser === '' || securityContext.runAsUser === null || securityContext.runAsUser === undefined) {
         delete securityContext.runAsUser;
       }
 
@@ -175,6 +176,7 @@ export default {
             ref="firstFocusable"
             v-model:value.number="securityContext.fsGroup"
             type="number"
+            min="0"
             :mode="mode"
             :label="t('workload.container.security.fsGroup')"
             @update:value="update"
@@ -283,6 +285,8 @@ export default {
           </legend>
           <LabeledInput
             v-model:value.number="securityContext.runAsUser"
+            type="number"
+            min="0"
             :label="t('workload.container.security.runAsUser.label')"
             :mode="mode"
             @update:value="update"

package/components/form/WorkloadPorts.vue

@@ -130,14 +130,11 @@ export default {
       const version = this.provisioningCluster?.kubernetesVersion;
 
       if (this.provisioningCluster?.isRke2) {
+        // This is a candidate for using the prov cluster provisioner (or now the mgmt cluster provisioner directly)
         const machineSelectorConfig = this.provisioningCluster?.spec?.rkeConfig?.machineSelectorConfig || {};
         const agentConfig = (machineSelectorConfig[0] || {}).config;
 
         cloudProvider = agentConfig?.['cloud-provider-name'];
-      } else if (this.provisioningCluster?.isRke1) {
-        const currentCluster = this.$store.getters['currentCluster'];
-
-        cloudProvider = currentCluster?.spec?.rancherKubernetesEngineConfig?.cloudProvider?.name;
       }
 
       return cloudProvider === HARVESTER &&
@@ -145,9 +142,7 @@ export default {
     },
 
     provisioningCluster() {
-      const out = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((c) => c?.status?.clusterName === this.currentCluster.metadata.name);
-
-      return out;
+      return this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.currentCluster.provClusterId);
     },
   },
 

package/components/form/__tests__/Security.test.ts

@@ -79,6 +79,42 @@ describe('component: Security', () => {
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
 
+    // Regression: clearing runAsUser must drop the key from the emitted object.
+    // Otherwise the spec is sent with `runAsUser: ""` and the API rejects with
+    // "cannot unmarshal string ... of type int64". See issue #9601.
+    it('should omit runAsUser from the emitted value when the input is cleared', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, value: { runAsUser: 33 }
+        }
+      });
+      const input = wrapper.find('[data-testid="input-security-runAsUser"]').find('input');
+
+      await input.setValue('');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, 'runAsUser')).toBe(false);
+    });
+
+    it('should omit runAsUser from the emitted value when it is undefined', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, value: {}
+        }
+      });
+
+      const checkbox = wrapper.find('[data-testid="input-security-runasNonRoot"]').find('label');
+
+      await checkbox.trigger('click');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, 'runAsUser')).toBe(false);
+    });
+
     it.each([
       'privileged',
       'allowPrivilegeEscalation',
@@ -139,5 +175,45 @@ describe('component: Security', () => {
 
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
+
+    it.each([
+      'runAsUser',
+      'fsGroup',
+    ])('should omit %p from the emitted value when it is undefined', async(field) => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.POD, value: {}
+        }
+      });
+
+      const checkbox = wrapper.find('[data-testid="input-security-runasNonRoot"]').find('label');
+
+      await checkbox.trigger('click');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, field)).toBe(false);
+    });
+
+    // Regression for #9601 — see equivalent container-level test above.
+    it.each([
+      ['runAsUser', { runAsUser: 33 }],
+      ['fsGroup', { fsGroup: 100 }],
+    ])('should omit %p from the emitted value when the input is cleared', async(field, initial) => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.POD, value: initial
+        }
+      });
+      const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
+
+      await input.setValue('');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, field)).toBe(false);
+    });
   });
 });

package/components/formatter/Autoscaler.vue

@@ -21,8 +21,8 @@ const store = useStore();
 const i18n = useI18n(store);
 
 const checked = computed(() => props.value === true || props.value === 'true');
-const actionIcon = computed(() => props.row.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
-const actionText = computed(() => props.row.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
+const actionIcon = computed(() => props.row.provCluster.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
+const actionText = computed(() => props.row.provCluster.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
 const stopPropagation = (event: Event) => {
   // This is to prevent click events from getting to the table row which ends up selecting the row
   event.stopPropagation();
@@ -45,7 +45,7 @@ const stopPropagation = (event: Event) => {
         #heading-action="{close}"
       >
         <RcButton
-          v-if="row.canPauseResumeAutoscaler"
+          v-if="row.provCluster.canPauseResumeAutoscaler"
           variant="secondary"
           size="small"
           class="action"
@@ -56,7 +56,7 @@ const stopPropagation = (event: Event) => {
         </RcButton>
       </template>
       <template #card-body>
-        <AutoscalerCard :value="props.row" />
+        <AutoscalerCard :value="props.row.provCluster" />
       </template>
     </PopoverCard>
   </span>

package/components/formatter/ClusterKubeVersion.vue

@@ -0,0 +1,27 @@
+<script>
+
+export default {
+  name: 'ClusterKubeVersion',
+
+  props: {
+    row: {
+      type:    Object,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span>
+      {{ row.kubernetesVersion }}
+    </span>
+    <div
+      v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
+      class="text-muted"
+    >
+      {{ row.architecture.label }}
+    </div>
+  </div>
+</template>

package/components/formatter/ClusterLink.vue

@@ -31,7 +31,7 @@ export default {
         return this.getCustomDetailLink(this.row);
       }
 
-      return this.row?.detailLocation;
+      return this.row?.provCluster?.detailLocation;
     },
 
     statusErrorConditions() {
@@ -77,12 +77,6 @@ export default {
       class="conditions-alert-icon icon-alert icon"
       data-testid="unavailable-machines-alert-icon"
     />
-    <i
-      v-if="row.isRke1"
-      v-clean-tooltip="t('cluster.rke1Unsupported')"
-      class="rke1-unsupported-icon icon-warning icon"
-      data-testid="rke1-unsupported-icon"
-    />
     <i
       v-if="row.hasError && statusErrorConditions.length > 0"
       v-clean-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"

package/components/formatter/ClusterProvider.vue

@@ -12,26 +12,22 @@ export default {
 <template>
   <div>
     <template v-if="row.machineProvider">
-      <span v-if="row.isHarvester && row.mgmt && row.mgmt.isReady && !row.hasError">
+      <span v-if="row.isHarvester && row.isReady && !row.hasError">
         <a
-          v-if="row.mgmt.isReady && !row.hasError"
           role="button"
           @click="row.goToHarvesterCluster()"
         >
           {{ row.machineProviderDisplay }}
         </a>
       </span>
-      <span v-else>
+      <span v-else-if="row.machineProviderDisplay">
         {{ row.machineProviderDisplay }}
       </span>
     </template>
-    <template v-else-if="row.isImported">
-      {{ t('cluster.provider.imported') }}
-    </template>
-    <template v-else-if="row.isCustom">
-      {{ t('cluster.provider.custom') }}
-    </template>
-    <div class="text-muted">
+    <div
+      v-if="row.machineProviderDisplay !== row.provisionerDisplay"
+      class="text-muted"
+    >
       {{ row.provisionerDisplay }}
     </div>
   </div>

package/components/formatter/FleetSummaryGraph.vue

@@ -26,9 +26,6 @@ export default {
       if (this.clusterId) {
         return this.row.statusResourceCountsForCluster(this.clusterId);
       }
-      if (this.row.statusResourceCountsForCluster) {
-        return this.row.statusResourceCountsForCluster;
-      }
 
       return this.row.status?.resourceCounts || {};
     },

package/components/formatter/MachineSummaryGraph.vue

@@ -18,7 +18,7 @@ export default {
   computed: {
     ready() {
       // Ensure we never show more ready machines than desired
-      // If w can address in backedn, we could revert this in the future
+      // If we can address in backend, we could revert this in the future
       const ready = this.row?.ready || 0;
       const desired = this.row?.desired || 0;
 

package/components/formatter/PodsUsage.vue

@@ -9,8 +9,8 @@ export default {
   },
   computed: {
     podsUsage() {
-      const usedPods = this.row?.mgmt?.status?.requested?.pods;
-      const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
+      const usedPods = this.row?.status?.requested?.pods;
+      const totalPods = this.row?.status?.allocatable?.pods;
 
       if (!this.row?.isReady || !totalPods) {
         return '—';

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

@@ -30,6 +30,10 @@ describe('component: formatter/Autoscaler.vue', () => {
         stubs:   {
           PopoverCard:    PopoverCardStub,
           RcButton:       { template: '<button><slot /></button>' },
+          // RcButton:    {
+          //   template: '<button><i v-if="icon" :class="icon" /><i v-if="leftIcon" :class="leftIcon" /><slot /></button>',
+          //   props:    ['icon', 'leftIcon']
+          // },
           AutoscalerCard: {
             name:     'AutoscalerCard',
             props:    ['value'],
@@ -88,30 +92,26 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should render AutoscalerCard with correct row data', () => {
-      const rowData = { id: 'test-row' };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { id: 'test-row' };
+      const wrapper = createWrapper({ value: true, row: { provCluster } });
       const card = wrapper.findComponent({ name: 'AutoscalerCard' });
 
       expect(card.exists()).toBe(true);
-      expect(card.props('value')).toStrictEqual(rowData);
+      expect(card.props('value')).toStrictEqual(provCluster);
     });
   });
 
   describe('heading action button', () => {
     it('should NOT render if canExplore is false', () => {
-      const rowData = { canExplore: false };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { canExplore: false };
+      const wrapper = createWrapper({ value: true, row: { provCluster } });
 
       expect(wrapper.find('button').exists()).toBe(false);
     });
 
     it('should render "Pause" button if autoscaler is running', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: false, canPauseResumeAutoscaler: true
-      };
-      const wrapper = createWrapper({
-        value: true, row: rowData, canPauseResumeAutoscaler: true
-      });
+      const provCluster = { isAutoscalerPaused: false, canPauseResumeAutoscaler: true };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(true);
@@ -120,10 +120,8 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should render "Resume" button if autoscaler is paused', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: true
-      };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { isAutoscalerPaused: true, canPauseResumeAutoscaler: true };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(true);
@@ -132,20 +130,19 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should hide "Resume" button if canPauseResumeAutoscaler is false', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: false
-      };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { isAutoscalerPaused: true, canPauseResumeAutoscaler: false };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(false);
     });
 
     it('should call toggleAutoscalerRunner and close on click', async() => {
-      const rowData = {
-        canExplore: true, toggleAutoscalerRunner: mockToggleRunner, canPauseResumeAutoscaler: true
+      const provCluster = { canPauseResumeAutoscaler: true };
+      const mgmtCluster = {
+        toggleAutoscalerRunner: mockToggleRunner, canExplore: true, provCluster
       };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const wrapper = createWrapper({ value: true, row: mgmtCluster });
 
       wrapper.find('button').trigger('click');