@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/form/Command.vue

@@ -43,23 +43,14 @@ export default {
   },
 
   data() {
-    const {
-      command,
-      args,
-      workingDir,
-      stdin = false,
-      stdinOnce = false,
-      tty = false,
-    } = this.value;
-
     return {
-      args,
-      command,
+      args:           this.value.args,
+      command:        this.value.command,
       commandOptions: ['No', 'Once', 'Yes'],
-      stdin,
-      stdinOnce,
-      tty,
-      workingDir,
+      stdin:          this.value.stdin || false,
+      stdinOnce:      this.value.stdin || false,
+      tty:            this.value.tty || false,
+      workingDir:     this.value.workingDir,
     };
   },
 

package/components/form/EnvVars.vue

@@ -39,14 +39,10 @@ export default {
   },
 
   data() {
-    const { env = [], envFrom = [] } = this.value;
-
-    const allEnv = [...env, ...envFrom].map((row) => {
-      return { value: row, id: randomStr(4) };
-    });
-
     return {
-      env, envFrom, allEnv
+      env:     [],
+      envFrom: [],
+      allEnv:  [],
     };
   },
 
@@ -63,7 +59,18 @@ export default {
       }
     }
   },
+
   created() {
+    const { env = [], envFrom = [] } = this.value;
+
+    const allEnv = [...env, ...envFrom].map((row) => {
+      return { value: row, id: randomStr(4) };
+    });
+
+    this.env = env;
+    this.envFrom = envFrom;
+    this.allEnv = allEnv;
+
     this.queueUpdate = debounce(this.update, 500);
   },
 
@@ -107,7 +114,8 @@ export default {
   <div :style="{'width':'100%'}">
     <div
       v-for="(row, i) in allEnv"
-      :key="i"
+      :key="row.id"
+      :data-testid="`env-var-row-${i}`"
     >
       <ValueFromResource
         v-model:value="row.value"

package/components/form/HealthCheck.vue

@@ -18,10 +18,10 @@ export default {
   },
 
   data() {
-    const { readinessProbe, livenessProbe, startupProbe } = this.value;
-
     return {
-      readinessProbe, livenessProbe, startupProbe
+      readinessProbe: this.value.readinessProbe,
+      livenessProbe:  this.value.livenessProbe,
+      startupProbe:   this.value.startupProbe,
     };
   },
 

package/components/form/HookOption.vue

@@ -28,23 +28,18 @@ export default {
   },
 
   data() {
-    const selectHook = null;
-
-    const defaultExec = { exec: { command: [] } };
-    const defaultHttpGet = {
-      httpGet: {
-        host:        '',
-        path:        '',
-        port:        null,
-        scheme:      '',
-        httpHeaders: null
-      }
-    };
-
     return {
-      selectHook,
-      defaultExec,
-      defaultHttpGet,
+      selectHook:     null,
+      defaultExec:    { exec: { command: [] } },
+      defaultHttpGet: {
+        httpGet: {
+          host:        '',
+          path:        '',
+          port:        null,
+          scheme:      '',
+          httpHeaders: null
+        }
+      },
       schemeOptions: ['HTTP', 'HTTPS']
     };
   },

package/components/form/LabeledSelect.vue

@@ -116,9 +116,11 @@ export default {
 
   data() {
     return {
-      selectedVisibility: 'visible',
-      shouldOpen:         true,
-      uid:                generateRandomAlphaString(10)
+      selectedVisibility:   'visible',
+      shouldOpen:           true,
+      labeledSelectLabelId: `ls-label-id-${ generateRandomAlphaString(12) }`,
+      isOpen:               false,
+      generatedUid:         `ls-uid-${ generateRandomAlphaString(12) }`
     };
   },
 
@@ -160,21 +162,6 @@ export default {
         return;
       }
 
-      // we need this override as in a "closeOnSelect" type of component
-      // if we don't have this override, it would open again
-      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
-        this.$nextTick(() => {
-          const el = this.$refs['select'];
-
-          if ( el ) {
-            el.focus();
-          }
-
-          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
-        });
-
-        return;
-      }
       this.$refs['select-input'].open = true;
 
       this.$nextTick(() => {
@@ -197,11 +184,13 @@ export default {
     },
 
     onOpen() {
+      this.isOpen = true;
       this.$emit('on-open');
       this.resizeHandler();
     },
 
     onClose() {
+      this.isOpen = false;
       this.$emit('on-close');
     },
 
@@ -279,6 +268,7 @@ export default {
 
 <template>
   <div
+    :id="hasLabel ? labeledSelectLabelId : undefined"
     ref="select"
     class="labeled-select"
     :class="[
@@ -296,6 +286,10 @@ export default {
       }
     ]"
     :tabindex="isView || disabled ? -1 : 0"
+    role="combobox"
+    :aria-expanded="isOpen"
+    :aria-describedby="$attrs['aria-describedby'] || undefined"
+    :aria-required="requiredField"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
@@ -307,7 +301,7 @@ export default {
     >
       <label
         v-if="hasLabel"
-        :id="`labeled-select-uid-${uid}`"
+        :for="labeledSelectLabelId"
       >
         <t
           v-if="labelKey"
@@ -318,12 +312,12 @@ export default {
         <span
           v-if="requiredField"
           class="required"
+          :aria-hidden="true"
         >*</span>
       </label>
     </div>
     <v-select
       ref="select-input"
-      :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
       v-bind="filteredAttrs"
       class="inline"
       :append-to-body="appendToBody"
@@ -344,7 +338,8 @@ export default {
       :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
       :tabindex="-1"
-      role="listbox"
+      :uid="generatedUid"
+      :aria-label="'-'"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
@@ -353,6 +348,7 @@ export default {
       @close="onClose"
       @option:selecting="$emit('selecting', $event)"
       @option:deselecting="$emit('deselecting', $event)"
+      @keydown.enter.stop
     >
       <template #option="option">
         <template v-if="showTagPrompts">
@@ -374,7 +370,7 @@ export default {
           </div>
         </template>
         <template v-else-if="option.kind === 'divider'">
-          <hr>
+          <hr role="none">
         </template>
         <template v-else-if="option.kind === 'highlighted'">
           <div class="option-kind-highlighted">

package/components/form/LifecycleHooks.vue

@@ -24,10 +24,10 @@ export default {
   },
 
   data() {
-    const { postStart, preStop } = this.value;
-
     return {
-      postStart, preStop, hookOptions: ['postStart', 'preStop']
+      postStart:   this.value.postStart,
+      preStop:     this.value.preStop,
+      hookOptions: ['postStart', 'preStop']
     };
   },
 

package/components/form/MatchExpressions.vue

@@ -70,6 +70,14 @@ export default {
   },
 
   data() {
+    return {
+      ops:    [],
+      rules:  [],
+      custom: []
+    };
+  },
+
+  created() {
     const t = this.$store.getters['i18n/t'];
 
     const podOptions = [
@@ -88,8 +96,6 @@ export default {
       { label: t('workload.scheduling.affinity.matchExpressions.greaterThan'), value: 'Gt' },
     ];
 
-    const ops = this.type === NODE ? nodeOptions : podOptions;
-
     let rules;
 
     // special case for matchFields and matchExpressions
@@ -127,11 +133,8 @@ export default {
       rules.push(newRule);
     }
 
-    return {
-      ops,
-      rules,
-      custom: []
-    };
+    this.rules = rules;
+    this.ops = this.type === NODE ? nodeOptions : podOptions;
   },
 
   computed: {
@@ -210,7 +213,10 @@ export default {
     update() {
       this.$nextTick(() => {
         const out = this.rules.map((rule) => {
-          const expression = { key: rule.key, operator: rule.operator };
+          const expression = {
+            key:      rule.key.trim(),
+            operator: rule.operator
+          };
 
           if (this.matchingSelectorDisplay) {
             expression.matching = rule.matching;

package/components/form/NameNsDescription.vue

@@ -1,5 +1,7 @@
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { computed, ref, toRef, watch } from 'vue';
+import { mapActions, useStore } from 'vuex';
+
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
@@ -8,6 +10,7 @@ import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { normalizeName } from '@shell/utils/kube';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   name: 'NameNsDescription',
@@ -28,6 +31,10 @@ export default {
       type:     String,
       required: true,
     },
+    nameHidden: {
+      type:    Boolean,
+      default: false,
+    },
     nameNsHidden: {
       type:    Boolean,
       default: false,
@@ -169,81 +176,74 @@ export default {
   },
 
   data() {
-    const v = this.value;
-    const metadata = v.metadata;
-    let namespace, name, description;
+    return { createNamespace: false };
+  },
 
-    if (this.nameKey) {
-      name = get(v, this.nameKey);
-    } else {
-      name = metadata?.name;
-    }
+  setup(props, { emit }) {
+    const v = toRef(props.value);
+    const metadata = v.value.metadata;
+    const namespace = ref(null);
+    const name = ref(null);
+    const description = ref(null);
 
-    if (this.namespaced) {
-      if (this.forceNamespace) {
-        namespace = this.forceNamespace;
-        this.updateNamespace(namespace);
-      } else if (this.namespaceKey) {
-        namespace = get(v, this.namespaceKey);
-      } else {
-        namespace = metadata?.namespace;
+    watch(name, (val) => {
+      if (props.normalizeName) {
+        val = normalizeName(val);
       }
 
-      if (!namespace && !this.noDefaultNamespace) {
-        namespace = this.$store.getters['defaultNamespace'];
-        if (metadata) {
-          metadata.namespace = namespace;
-        }
+      if (props.nameKey) {
+        set(props.value, props.nameKey, val);
+      } else {
+        props.value.metadata['name'] = val;
       }
-    }
+      emit('update:value', props.value);
+    });
 
-    if (this.descriptionKey) {
-      description = get(v, this.descriptionKey);
+    if (props.nameKey) {
+      name.value = get(v.value, props.nameKey);
     } else {
-      description = metadata?.annotations?.[DESCRIPTION];
+      name.value = metadata?.name || '';
     }
 
-    const inStore = this.$store.getters['currentStore']();
-    const nsSchema = this.$store.getters[`${ inStore }/schemaFor`](NAMESPACE);
+    const isCreate = computed(() => {
+      return props.mode === _CREATE;
+    });
 
-    return {
-      namespace,
-      name,
-      description,
-      createNamespace: false,
-      nsSchema
-    };
-  },
+    const store = useStore();
+    const { t } = useI18n(store);
+    const allowedNamespaces = computed(() => store.getters.allowedNamespaces());
+    const storeNamespaces = computed(() => store.getters.namespaces());
+    const currentCluster = computed(() => store.getters.currentCluster);
 
-  computed: {
-    ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
-    ...mapActions('cru-resource', ['setCreateNamespace']),
-    namespaceReallyDisabled() {
-      return (
-        !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
-      ); // namespace is never editable
-    },
+    const inStore = computed(() => {
+      return store.getters['currentStore']();
+    });
 
-    nameReallyDisabled() {
-      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
-    },
+    const nsSchema = computed(() => {
+      return store.getters[`${ inStore.value }/schemaFor`](NAMESPACE);
+    });
+
+    const canCreateNamespace = computed(() => {
+      // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
+      return (nsSchema.value?.collectionMethods || []).includes('POST') && currentCluster.value?.canUpdate;
+    });
 
     /**
      * Map namespaces from the store to options, adding divider and create button
      */
-    options() {
+    const options = computed(() => {
       let namespaces;
 
-      if (this.namespacesOverride) {
+      if (props.namespacesOverride) {
         // Use the resources provided
-        namespaces = this.namespacesOverride;
+        namespaces = props.namespacesOverride;
       } else {
-        if (this.namespaceOptions) {
+        if (props.namespaceOptions) {
           // Use the namespaces provided
-          namespaces = (this.namespaceOptions.map((ns) => ns.name) || []).sort();
+          namespaces = (props.namespaceOptions.map((ns) => ns.name) || []).sort();
         } else {
           // Determine the namespaces
-          const namespaceObjs = this.isCreate ? this.allowedNamespaces() : this.namespaces();
+          const namespaceObjs = isCreate.value ? allowedNamespaces.value : storeNamespaces.value;
 
           namespaces = Object.keys(namespaceObjs);
         }
@@ -251,22 +251,22 @@ export default {
 
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
-        .map(this.namespaceMapper || ((obj) => ({
+        .map(props.namespaceMapper || ((obj) => ({
           label: obj.nameDisplay,
           value: obj.id,
         })));
 
       const sortedByLabel = sortBy(options, 'label');
 
-      if (this.forceNamespace) {
+      if (props.forceNamespace) {
         sortedByLabel.unshift({
-          label: this.forceNamespace,
-          value: this.forceNamespace,
+          label: props.forceNamespace,
+          value: props.forceNamespace,
         });
       }
 
       const createButton = {
-        label: this.t('namespace.createNamespace'),
+        label: t('namespace.createNamespace'),
         value: '',
         kind:  'highlighted'
       };
@@ -276,20 +276,78 @@ export default {
         kind:     'divider'
       };
 
-      const createOverhead = this.canCreateNamespace || this.createNamespaceOverride ? [createButton, divider] : [];
+      const createOverhead = canCreateNamespace.value || props.createNamespaceOverride ? [createButton, divider] : [];
 
       return [
         ...createOverhead,
         ...sortedByLabel
       ];
+    });
+
+    const updateNamespace = (val) => {
+      if (props.forceNamespace) {
+        val = props.forceNamespace;
+      }
+
+      if (props.namespaced) {
+        emit('isNamespaceNew', !val || (options.value && !options.value.find((n) => n.value === val)));
+      }
+
+      if (props.namespaceKey) {
+        set(props.value, props.namespaceKey, val);
+      } else {
+        props.value.metadata.namespace = val;
+      }
+    };
+
+    if (props.namespaced) {
+      if (props.forceNamespace) {
+        namespace.value = toRef(props.forceNamespace);
+        updateNamespace(namespace);
+      } else if (props.namespaceKey) {
+        namespace.value = get(v, props.namespaceKey);
+      } else {
+        namespace.value = metadata?.namespace;
+      }
+
+      if (!namespace.value && !props.noDefaultNamespace) {
+        namespace.value = store.getters['defaultNamespace'];
+        if (metadata) {
+          metadata.namespace = namespace;
+        }
+      }
+    }
+
+    if (props.descriptionKey) {
+      description.value = get(v, props.descriptionKey);
+    } else {
+      description.value = metadata?.annotations?.[DESCRIPTION];
+    }
+
+    return {
+      namespace,
+      name,
+      description,
+      isCreate,
+      options,
+      updateNamespace,
+    };
+  },
+
+  computed: {
+    ...mapActions('cru-resource', ['setCreateNamespace']),
+    namespaceReallyDisabled() {
+      return (
+        !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
+      ); // namespace is never editable
     },
 
-    isView() {
-      return this.mode === _VIEW;
+    nameReallyDisabled() {
+      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
     },
 
-    isCreate() {
-      return this.mode === _CREATE;
+    isView() {
+      return this.mode === _VIEW;
     },
 
     showCustomize() {
@@ -308,27 +366,9 @@ export default {
 
       return `span-${ span }`;
     },
-
-    canCreateNamespace() {
-      // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
-      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster?.canUpdate;
-    }
   },
 
   watch: {
-    name(val) {
-      if (this.normalizeName) {
-        val = normalizeName(val);
-      }
-
-      if (this.nameKey) {
-        set(this.value, this.nameKey, val);
-      } else {
-        this.value.metadata['name'] = val;
-      }
-      this.$emit('update:value', this.value);
-    },
-
     namespace(val) {
       this.updateNamespace(val);
       this.$emit('update:value', this.value);
@@ -346,29 +386,13 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
-      if (this.$refs.name) {
-        this.$refs.name.focus();
+      if (this.$refs.nameInput) {
+        this.$refs.nameInput.focus();
       }
     });
   },
 
   methods: {
-    updateNamespace(val) {
-      if (this.forceNamespace) {
-        val = this.forceNamespace;
-      }
-
-      if (this.namespaced) {
-        this.$emit('isNamespaceNew', !val || (this.options && !this.options.find((n) => n.value === val)));
-      }
-
-      if (this.namespaceKey) {
-        set(this.value, this.namespaceKey, val);
-      } else {
-        this.value.metadata.namespace = val;
-      }
-    },
-
     changeNameAndNamespace(e) {
       this.name = (e.text || '').toLowerCase();
       this.namespace = e.selected;
@@ -389,7 +413,7 @@ export default {
           true,
         );
         this.$emit('isNamespaceNew', true);
-        this.$nextTick(() => this.$refs.namespace.focus());
+        this.$nextTick(() => this.$refs.namespaceInput.focus());
       } else {
         this.createNamespace = false;
         this.$store.dispatch(
@@ -411,7 +435,7 @@ export default {
       class="col span-3"
     >
       <LabeledInput
-        ref="namespace"
+        ref="namespaceInput"
         v-model:value="namespace"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
@@ -454,14 +478,15 @@ export default {
     </div>
 
     <div
-      v-if="!nameNsHidden"
+      v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
       class="col span-3"
     >
       <LabeledInput
-        ref="name"
+        ref="nameInput"
         key="name"
         v-model:value="name"
+        data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"
         :disabled="nameReallyDisabled"
@@ -473,7 +498,6 @@ export default {
     </div>
 
     <slot name="customize" />
-    <!-- // TODO: here goes the custom component -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"