@rancher/shell 3.0.12-rc.3 → 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

@@ -117,6 +117,10 @@ export default {
       type:    String,
       default: 'labelSelect.noOptions.empty'
     },
+    lockedOptions: {
+      type:    Array,
+      default: () => []
+    },
 
     name: {
       type:    String,
@@ -382,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>
@@ -513,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"
@@ -676,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;
@@ -691,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:   [],
@@ -310,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 {
@@ -321,7 +329,7 @@ export default {
       if (!namespace.value && !props.noDefaultNamespace) {
         namespace.value = store.getters['defaultNamespace'];
         if (metadata) {
-          metadata.namespace = namespace;
+          metadata.namespace = namespace.value;
         }
       }
     }
@@ -436,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"
@@ -491,7 +499,7 @@ export default {
     <div
       v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
-      class="col span-3"
+      :class="['col', `span-${nameColSpan}`]"
     >
       <LabeledInput
         ref="nameInput"

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/__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({

package/components/formatter/InternalExternalIP.vue

@@ -1,5 +1,5 @@
 <script>
-import { isV4Format, isV6Format } from 'ip';
+import ipaddr from 'ipaddr.js';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 import { mapGetters } from 'vuex';
 import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge';
@@ -15,10 +15,16 @@ export default {
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
     filteredExternalIps() {
-      return this.row.externalIps?.filter((ip) => this.isIp(ip)) || [];
+      const ips = this.row.externalIps ||
+        (this.row.externalIp && this.row.externalIp !== this.t('generic.none') ? [this.row.externalIp] : []);
+
+      return ips.filter((ip) => this.isIp(ip));
     },
     filteredInternalIps() {
-      return this.row.internalIps?.filter((ip) => this.isIp(ip)) || [];
+      const ips = this.row.internalIps ||
+        (this.row.internalIp ? [this.row.internalIp] : []);
+
+      return ips.filter((ip) => this.isIp(ip));
     },
     internalSameAsExternal() {
       return this.externalIp && this.internalIp && this.externalIp === this.internalIp;
@@ -59,7 +65,7 @@ export default {
   },
   methods: {
     isIp(ip) {
-      return ip && (isV4Format(ip) || isV6Format(ip));
+      return ip && (ipaddr.IPv4.isValidFourPartDecimal(ip) || ipaddr.IPv6.isValid(ip));
     }
   }
 };

package/components/formatter/ServiceTargets.vue

@@ -1,6 +1,6 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
-import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
+import { CATTLE_PUBLIC_ENDPOINTS, SERVICE_LINKS } from '@shell/config/labels-annotations';
 import Endpoints from '@shell/components/formatter/Endpoints';
 import has from 'lodash/has';
 import { isMaybeSecure } from '@shell/utils/url';
@@ -52,6 +52,23 @@ export default {
         return annotations[CATTLE_PUBLIC_ENDPOINTS];
       }
 
+      const serviceLinksAnnotation = annotations[SERVICE_LINKS];
+      const serviceLinksMap = new Map();
+
+      if (serviceLinksAnnotation) {
+        serviceLinksAnnotation.split(',').forEach((entry) => {
+          const [portStr, scheme] = entry.trim().split('/');
+          const port = Number(portStr);
+
+          const validSchemes = ['http', 'https'];
+          const normalizedScheme = scheme?.toLowerCase();
+
+          if (port > 0 && !isNaN(port)) {
+            serviceLinksMap.set(port, validSchemes.includes(normalizedScheme) ? normalizedScheme : null);
+          }
+        });
+      }
+
       // <CLUSTER_IP>:<PORT>/<PROTOCOL> > <TARGET PORT>
       if (isEmpty(ports)) {
         if (!isEmpty(parsedClusterIp)) {
@@ -70,12 +87,14 @@ export default {
 
           const stringPort = p.port.toString();
 
-          if (p?.protocol === 'TCP' && (stringPort.endsWith('80') || stringPort.endsWith('443'))) {
-            if (isMaybeSecure(p.port, p?.protocol)) {
-              proxyUrl = row.proxyUrl('https', p.port);
-            } else {
-              proxyUrl = row.proxyUrl('http', p.port);
-            }
+          const isDefaultPort = stringPort.endsWith('80') || stringPort.endsWith('443');
+          const hasServiceLink = serviceLinksMap.has(p.port);
+
+          if (p?.protocol === 'TCP' && (isDefaultPort || hasServiceLink)) {
+            const explicitScheme = hasServiceLink ? serviceLinksMap.get(p.port) : null;
+            const scheme = explicitScheme || (isMaybeSecure(p.port, p?.protocol) ? 'https' : 'http');
+
+            proxyUrl = row.proxyUrl(scheme, p.port);
           }
 
           const clusterIpAndPort = proxyUrl ? `<a href="${ proxyUrl }" target="_blank" rel="noopener noreferrer nofollow">${ p?.name ? p.name : `${ parsedClusterIp }${ p.port }` }</a>` : `${ parsedClusterIp }${ p.port }`;