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

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/FileSelector.vue

@@ -1,6 +1,7 @@
 <script>
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { set } from '@shell/utils/object';
+import { RcButton } from '@components/RcButton';
 
 export function createOnSelected(field) {
   return function(contents) {
@@ -11,6 +12,8 @@ export function createOnSelected(field) {
 export default {
   emits: ['error', 'selected'],
 
+  components: { RcButton },
+
   props: {
     label: {
       type:     String,
@@ -70,6 +73,15 @@ export default {
     class: {
       type:    [String, Array],
       default: () => [],
+    },
+
+    /**
+     * Render the trigger as a small, secondary RcButton instead of the default
+     * plain button.
+     */
+    asRcButton: {
+      type:    Boolean,
+      default: false,
     }
 
   },
@@ -82,6 +94,11 @@ export default {
     customClass() {
       return ['file-selector', 'btn', ...(Array.isArray(this.class) ? this.class : [this.class])];
     },
+
+    // RcButton provides its own `btn` class, so we omit it here to avoid clashing styles
+    rcButtonClass() {
+      return ['file-selector', ...(Array.isArray(this.class) ? this.class : [this.class])];
+    },
   },
 
   methods: {
@@ -154,8 +171,29 @@ export default {
 </script>
 
 <template>
+  <RcButton
+    v-if="!isView && asRcButton"
+    variant="secondary"
+    size="small"
+    :disabled="disabled"
+    :aria-label="label"
+    :class="rcButtonClass"
+    data-testid="file-selector__uploader-button"
+    @click="selectFile"
+  >
+    <span>{{ label }}</span>
+    <input
+      ref="uploader"
+      type="file"
+      class="hide"
+      :multiple="multiple"
+      :webkitdirectory="directory"
+      :accept="accept"
+      @change="fileChange"
+    >
+  </RcButton>
   <button
-    v-if="!isView"
+    v-else-if="!isView"
     :disabled="disabled"
     :aria-label="label"
     type="button"

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/PrivateRegistry.constants.ts

@@ -0,0 +1,7 @@
+export const PRIVATE_REGISTRY_CONTEXT = {
+  PROVISIONING: 'provisioning',
+  IMPORTING:    'importing',
+  CHARTS:       'charts',
+} as const;
+
+export type PrivateRegistryContext = typeof PRIVATE_REGISTRY_CONTEXT[keyof typeof PRIVATE_REGISTRY_CONTEXT];