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

package/components/form/ArrayList.vue

@@ -1,18 +1,22 @@
 <script>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, toRef } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { clone } from '@shell/utils/object';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import Banner from '@components/Banner/Banner.vue';
+import { useVeeValidateField } from '@shell/composables/useVeeValidateField';
 const DEFAULT_PROTIP = 'Tip: Paste lines into any list field for easy bulk entry';
 
 export default {
   emits: ['add', 'remove', 'update:value'],
 
-  components: { TextAreaAutoGrow, LabeledInput },
-  props:      {
+  components: {
+    TextAreaAutoGrow, LabeledInput, Banner
+  },
+  props: {
     value: {
       type:    Array,
       default: null,
@@ -106,7 +110,17 @@ export default {
     componentTestid: {
       type:    String,
       default: 'array-list',
-    }
+    },
+
+    /**
+     * Field name for vee-validate integration. When provided, the component
+     * registers with a parent form context for schema-level validation.
+     */
+    name: {
+      type:    String,
+      default: null,
+    },
+
   },
 
   setup(props, { emit }) {
@@ -126,6 +140,26 @@ export default {
       return props.mode === _VIEW;
     });
 
+    // vee-validate integration: array-level validation via a parent form schema.
+    // Per-item validation continues to use the existing `rules` prop on
+    // LabeledInput.
+    const arrayValue = computed(() => props.value || []);
+    const { effectiveValidationMessage, veeHandleBlur, veeValidate } = useVeeValidateField({
+      name:              toRef(props, 'name'),
+      rules:             ref([]),
+      value:             arrayValue,
+      validationMessage: ref(null),
+    });
+
+    // Only structural changes (add, delete, paste) mark trigger validation
+    // when invoking update()
+    const isStructuralChange = ref(false);
+
+    const validate = () => {
+      veeHandleBlur(undefined, false);
+      veeValidate();
+    };
+
     /**
      * Cleanup rows and emit input
      */
@@ -144,6 +178,10 @@ export default {
         }
       }
       emit('update:value', out);
+      if (isStructuralChange.value) {
+        validate();
+        isStructuralChange.value = false;
+      }
     };
 
     const lastUpdateWasFromValue = ref(false);
@@ -177,6 +215,9 @@ export default {
       queueUpdate,
       isView,
       update,
+      effectiveValidationMessage,
+      isStructuralChange,
+      validate,
     };
   },
 
@@ -211,6 +252,7 @@ export default {
   },
   methods: {
     add() {
+      this.isStructuralChange = true;
       this.rows.push({ value: clone(this.defaultAddValue) });
       if (this.defaultAddValue) {
         this.queueUpdate();
@@ -229,6 +271,7 @@ export default {
      */
     remove(row, index) {
       this.$emit('remove', { row, index });
+      this.isStructuralChange = true;
       removeAt(this.rows, index);
       this.queueUpdate();
     },
@@ -240,6 +283,7 @@ export default {
       event.preventDefault();
       const text = event.clipboardData.getData('text/plain');
 
+      this.isStructuralChange = true;
       if (this.valueMultiline) {
         // Allow to paste multiple lines
         this.rows[index].value = text;
@@ -285,6 +329,12 @@ export default {
         </h3>
       </slot>
     </div>
+    <Banner
+      v-if="effectiveValidationMessage"
+      class="validation-banner"
+      color="error"
+      :label="effectiveValidationMessage"
+    />
 
     <div>
       <template v-if="rows.length">
@@ -335,6 +385,7 @@ export default {
                   :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
                   @paste="onPaste(idx, $event)"
                   @update:value="queueUpdate"
+                  @blur="validate"
                 />
                 <LabeledInput
                   v-else-if="rules.length > 0"
@@ -348,6 +399,7 @@ export default {
                   :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
                   @paste="onPaste(idx, $event)"
                   @update:value="queueUpdate"
+                  @blur="validate"
                 />
                 <input
                   v-else
@@ -358,6 +410,7 @@ export default {
                   :disabled="isView || disabled"
                   :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
                   @paste="onPaste(idx, $event)"
+                  @blur="validate"
                 >
               </slot>
             </div>
@@ -443,6 +496,10 @@ export default {
     color: var(--error);
   }
 
+  .validation-banner {
+    margin-top: 0;
+  }
+
   .box {
     display: grid;
     grid-template-columns: auto $array-list-remove-margin;

package/components/form/KeyValue.vue

@@ -13,6 +13,7 @@ import { asciiLike } from '@shell/utils/string';
 import CodeMirror from '@shell/components/CodeMirror';
 import isEqual from 'lodash/isEqual';
 import { LabeledTooltip } from '@components/LabeledTooltip';
+import { RcButton } from '@components/RcButton';
 
 export default {
   name: 'KeyValue',
@@ -24,7 +25,8 @@ export default {
     Select,
     TextAreaAutoGrow,
     FileSelector,
-    LabeledTooltip
+    LabeledTooltip,
+    RcButton
   },
   props: {
     value: {
@@ -241,6 +243,10 @@ export default {
     keyErrors: {
       type:    Object,
       default: () => ({})
+    },
+    useRcButton: {
+      type:    Boolean,
+      default: false
     }
   },
   data() {
@@ -879,8 +885,23 @@ export default {
         name="add"
         :add="add"
       >
+        <RcButton
+          v-if="addAllowed && useRcButton"
+          size="small"
+          variant="secondary"
+          :class="[addClass]"
+          data-testid="add_row_item_button"
+          :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
+          :aria-label="t('generic.ariaLabel.addKeyValue')"
+          @click="add()"
+        >
+          <i
+            class="mr-5 icon"
+            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
+          /> {{ _addLabel }}
+        </RcButton>
         <button
-          v-if="addAllowed"
+          v-else-if="addAllowed"
           type="button"
           role="button"
           class="btn role-tertiary add"

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,15 @@ export default {
     noOptionsLabelKey: {
       type:    String,
       default: 'labelSelect.noOptions.empty'
+    },
+    lockedOptions: {
+      type:    Array,
+      default: () => []
+    },
+
+    name: {
+      type:    String,
+      default: null
     }
   },
 
@@ -161,6 +171,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 +189,7 @@ export default {
       onFocusLabeled,
       onBlurLabeled,
       isDisabled,
-      validationMessage,
+      validationMessage: effectiveValidationMessage,
       requiredField,
       isSearchable,
       isFilterable,
@@ -186,6 +203,8 @@ export default {
       paginating,
       loadMore,
       setPaginationFilter,
+      veeHandleBlur,
+      veeValidate,
     };
   },
 
@@ -221,7 +240,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 +291,8 @@ export default {
       this.$emit('on-blur');
       this.selectedVisibility = 'visible';
       this.onBlurLabeled();
+      this.veeHandleBlur(undefined, false);
+      this.veeValidate();
     },
 
     onOpen() {
@@ -365,7 +386,17 @@ export default {
       }
 
       return this.getOptionLabel(opt);
-    }
+    },
+
+    isOptionLocked(option) {
+      if (!this.lockedOptions.length) {
+        return false;
+      }
+
+      const label = this.getOptionLabel(option);
+
+      return this.lockedOptions.includes(typeof label === 'string' ? label.trim() : String(label));
+    },
   },
 };
 </script>
@@ -496,6 +527,14 @@ export default {
           />
         </div>
       </template>
+      <template
+        v-if="lockedOptions.length"
+        #selected-option="option"
+      >
+        <span :data-locked="isOptionLocked(option) || undefined">
+          {{ getOptionLabel(option) }}
+        </span>
+      </template>
       <!-- Pass down templates provided by the caller -->
       <template
         v-for="(_, slot) of $slots"
@@ -659,6 +698,14 @@ export default {
         min-height: unset !important;
         padding: 0 0 0 7px !important;
 
+        &:has([data-locked]) {
+          padding: 0 7px 0 7px !important;
+
+          .vs__deselect {
+            display: none;
+          }
+        }
+
         > button {
           height: 20px;
           line-height: 14px;
@@ -674,6 +721,14 @@ export default {
         }
       }
     }
+
+    :deep() .vs--disabled .vs__selected-options .vs__selected {
+      padding: 0 7px 0 7px !important;
+
+      .vs__deselect {
+        display: none;
+      }
+    }
   }
 
   :deep() .vs__selected-options {

package/components/form/Labels.vue

@@ -126,6 +126,16 @@ export default {
       type:    String,
       default: '',
     },
+
+    compact: {
+      type:    Boolean,
+      default: false
+    },
+
+    useRcButton: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   data(): DataType {
@@ -162,9 +172,12 @@ export default {
     <div :class="defaultSectionClass">
       <div class="labels">
         <div class="labels__header">
-          <h3 v-if="showLabelTitle">
+          <component
+            :is="!compact ? 'h3' : 'h4'"
+            v-if="showLabelTitle"
+          >
             <t k="labels.labels.title" />
-          </h3>
+          </component>
           <ToggleSwitch
             v-if="showToggler"
             v-model:value="toggler"
@@ -186,13 +199,14 @@ export default {
               :read-allowed="false"
               :value-can-be-empty="true"
               :key-errors="labels.keyErrors"
+              :use-rc-button="useRcButton"
               @update:value="labels.update($event, (x) => value.setLabels(x))"
             />
           </slot>
         </div>
       </div>
     </div>
-    <div class="spacer" />
+    <div :class="compact ? 'compact-spacer' : 'spacer'" />
     <div
       v-if="showAnnotations"
       :class="sectionClass"
@@ -208,6 +222,7 @@ export default {
         :read-allowed="false"
         :value-can-be-empty="true"
         :key-errors="annotations.keyErrors"
+        :use-rc-button="useRcButton"
         @update:value="annotations.update($event, (x) => value.setAnnotations(x))"
       />
     </div>
@@ -221,4 +236,8 @@ export default {
     justify-content: space-between;
   }
 }
+
+.compact-spacer {
+  height: 24px;
+}
 </style>

package/components/form/NameNsDescription.vue

@@ -156,6 +156,14 @@ export default {
       type:    Boolean,
       default: true,
     },
+    nameColSpan: {
+      type:    Number,
+      default: 3,
+    },
+    noBottomMargin: {
+      type:    Boolean,
+      default: false,
+    },
     rules: {
       default: () => ({
         namespace:   [],
@@ -164,6 +172,14 @@ export default {
       }),
       type: Object,
     },
+    nameFieldName: {
+      type:    String,
+      default: null,
+    },
+    namespaceFieldName: {
+      type:    String,
+      default: null,
+    },
 
     /**
      * Inherited global identifier prefix for tests
@@ -302,8 +318,8 @@ export default {
 
     if (props.namespaced) {
       if (props.forceNamespace) {
-        namespace.value = toRef(props.forceNamespace);
-        updateNamespace(namespace);
+        namespace.value = props.forceNamespace;
+        updateNamespace(namespace.value);
       } else if (props.namespaceKey) {
         namespace.value = get(v.value, props.namespaceKey);
       } else {
@@ -313,7 +329,7 @@ export default {
       if (!namespace.value && !props.noDefaultNamespace) {
         namespace.value = store.getters['defaultNamespace'];
         if (metadata) {
-          metadata.namespace = namespace;
+          metadata.namespace = namespace.value;
         }
       }
     }
@@ -428,7 +444,7 @@ export default {
 </script>
 
 <template>
-  <div class="row mb-20">
+  <div :class="['row', { 'mb-20': !noBottomMargin }]">
     <slot name="project-selector" />
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
@@ -438,6 +454,7 @@ export default {
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
+        :name="namespaceFieldName"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
         :disabled="namespaceReallyDisabled"
@@ -464,6 +481,7 @@ export default {
       <LabeledSelect
         v-show="!createNamespace"
         v-model:value="namespace"
+        :name="namespaceFieldName"
         :clearable="true"
         :options="options"
         :disabled="namespaceReallyDisabled"
@@ -481,12 +499,13 @@ export default {
     <div
       v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
-      class="col span-3"
+      :class="['col', `span-${nameColSpan}`]"
     >
       <LabeledInput
         ref="nameInput"
         key="name"
         v-model:value="name"
+        :name="nameFieldName"
         data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"

package/components/form/ResourceTabs/index.vue

@@ -244,6 +244,7 @@ export default {
     :default-tab="defaultTab"
     :resource="value"
     :use-hash="useHash"
+    :extension-params="extensionParams"
   >
     <slot />
     <Tab

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__/NameNsDescription.test.ts

@@ -170,6 +170,81 @@ describe('component: NameNsDescription', () => {
     expect(nameInput.element.value).toBe('Default');
   });
 
+  it('should set namespace to a plain string when forceNamespace prop is provided', () => {
+    const forcedNs = 'cert-manager';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
+
+    const wrapper = mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      { namespace: '' }
+        },
+        mode:           'create',
+        forceNamespace: forcedNs,
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces: jest.fn(),
+              'i18n/t':   jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    expect(typeof (wrapper.vm as any).namespace).toBe('string');
+    expect((wrapper.vm as any).namespace).toBe(forcedNs);
+  });
+
+  it('should set metadata.namespace to a plain string when falling back to defaultNamespace', () => {
+    const defaultNs = 'default';
+    const metadata: Record<string, unknown> = {};
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn(),
+        defaultNamespace:    () => defaultNs,
+      }
+    });
+
+    mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata,
+        },
+        mode: 'create',
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces: jest.fn(),
+              'i18n/t':   jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    expect(typeof metadata.namespace).toBe('string');
+    expect(metadata.namespace).toBe(defaultNs);
+  });
+
   it('sets the name using the nameKey prop', () => {
     const namespaceName = 'test';
     const store = createStore({