dashboard-shell-shell 1.0.111 → 1.0.113

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',
@@ -169,81 +172,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 +247,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 +272,78 @@ export default {
         kind:     'divider'
       };
 
-      const createOverhead = this.canCreateNamespace || this.createNamespaceOverride ? [createButton, divider] : [];
+      // const createOverhead = canCreateNamespace.value || props.createNamespaceOverride ? [createButton, divider] : [];
 
       return [
-        ...createOverhead,
+        // ...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() {
@@ -298,37 +352,20 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-8`;
+        return `span-6`;
       }
       // Name and namespace take up two columns.
-      let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
+      // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
+      let cols = 2;
 
       cols = Math.max(2, cols); // If there's only one column, make it render half-width as if there were two
       const span = 12 / cols; // If there's 5, 7, or more columns this will break; don't do that.
 
       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 +383,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 +410,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(
@@ -404,14 +425,14 @@ export default {
 </script>
 
 <template>
-  <div class="row mb-20">
+  <div class="row">
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-3"
+      class="col span-6"
     >
       <LabeledInput
-        ref="namespace"
+        ref="namespaceInput"
         v-model:value="namespace"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
@@ -434,7 +455,7 @@ export default {
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      class="col span-3"
+      class="col span-6"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -456,12 +477,13 @@ export default {
     <div
       v-if="!nameNsHidden"
       :data-testid="componentTestid + '-name'"
-      class="col span-3"
+      class="col span-6"
     >
       <LabeledInput
-        ref="name"
+        ref="nameInput"
         key="name"
         v-model:value="name"
+        data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"
         :disabled="nameReallyDisabled"
@@ -473,11 +495,22 @@ export default {
     </div>
 
     <slot name="customize" />
-    <!-- // TODO: here goes the custom component -->
-    <div
+    <!-- <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
       :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
+    > -->
+    <div
+      v-for="(slot, i) in extraColumns"
+      :key="i"
+      :class="{ col: true, [colSpan]: true }"
+    >
+      <slot :name="slot" />
+    </div>
+    <div
+      v-show="!descriptionHidden"
+      :data-testid="componentTestid + '-description'"
+       class="col span-6"
     >
       <LabeledInput
         key="description"
@@ -492,11 +525,10 @@ export default {
     </div>
 
     <div
-      v-for="(slot, i) in extraColumns"
-      :key="i"
-      :class="{ col: true, [colSpan]: true }"
+      v-if="$slots.bottom"
+      style="width: 100%;"
     >
-      <slot :name="slot" />
+      <slot name="bottom" />
     </div>
     <div
       v-if="showSpacer"

package/components/form/Networking.vue

@@ -29,6 +29,20 @@ export default {
 
   data() {
     const t = this.$store.getters['i18n/t'];
+
+    return {
+      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
+      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
+      hostAliases: [],
+      nameservers: null,
+      searches:    null,
+      hostname:    null,
+      subdomain:   null,
+      options:     null,
+    };
+  },
+
+  created() {
     const hostAliases = (this.value.hostAliases || []).map((entry) => {
       return {
         ip:        entry.ip,
@@ -38,18 +52,12 @@ export default {
     const { dnsConfig = {}, hostname, subdomain } = this.value;
     const { nameservers, searches, options } = dnsConfig;
 
-    const out = {
-      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
-      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
-      hostAliases,
-      nameservers,
-      searches,
-      hostname,
-      subdomain,
-      options
-    };
-
-    return out;
+    this.hostAliases = hostAliases;
+    this.nameservers = nameservers;
+    this.searches = searches;
+    this.hostname = hostname;
+    this.subdomain = subdomain;
+    this.options = options;
   },
 
   computed: {

package/components/form/NodeAffinity.vue

@@ -42,31 +42,18 @@ export default {
   data() {
     // VolumeNodeAffinity only has 'required' field
     if (this.value.required) {
-      return { nodeSelectorTerms: this.value.required.nodeSelectorTerms };
     } else {
-      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
-      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
-      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
-        const neu = clone(term);
-
-        neu._id = randomStr(4);
-        if (term.preference) {
-          Object.assign(neu, term.preference);
-          delete neu.preference;
-        }
-
-        return neu;
-      });
-
-      return {
-        allSelectorTerms,
-        weightedNodeSelectorTerms: preferredDuringSchedulingIgnoredDuringExecution,
-        defaultWeight:             1,
-        // rules in MatchExpressions.vue can not catch changes what happens on parent component
-        // we need re-render it via key changing
-        rerenderNums:              randomStr(4)
-      };
     }
+
+    return {
+      nodeSelectorTerms:         null,
+      allSelectorTerms:          null,
+      weightedNodeSelectorTerms: null,
+      defaultWeight:             1,
+      // rules in MatchExpressions.vue can not catch changes what happens on parent component
+      // we need re-render it via key changing
+      rerenderNums:              randomStr(4)
+    };
   },
 
   computed: {
@@ -88,6 +75,27 @@ export default {
   },
 
   created() {
+    if (this.value.required) {
+      this.nodeSelectorTerms = this.value.required.nodeSelectorTerms;
+    } else {
+      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
+      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
+      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
+        const neu = clone(term);
+
+        neu._id = randomStr(4);
+        if (term.preference) {
+          Object.assign(neu, term.preference);
+          delete neu.preference;
+        }
+
+        return neu;
+      });
+
+      this.allSelectorTerms = allSelectorTerms;
+      this.weightedNodeSelectorTerms = preferredDuringSchedulingIgnoredDuringExecution;
+    }
+
     this.queueUpdate = debounce(this.update, 500);
   },
 

package/components/form/NodeScheduling.vue

@@ -40,6 +40,15 @@ export default {
   },
 
   data() {
+    return {
+      selectNode:   null,
+      nodeName:     '',
+      nodeAffinity: {},
+      nodeSelector: {},
+    };
+  },
+
+  created() {
     const isHarvester = this.$store.getters['currentProduct'].inStore === VIRTUAL;
 
     let { nodeName = '' } = this.value;
@@ -65,9 +74,10 @@ export default {
       nodeAffinity['preferredDuringSchedulingIgnoredDuringExecution'] = [];
     }
 
-    return {
-      selectNode, nodeName, nodeAffinity, nodeSelector
-    };
+    this.selectNode = selectNode;
+    this.nodeName = nodeName;
+    this.nodeAffinity = nodeAffinity;
+    this.nodeSelector = nodeSelector;
   },
 
   computed: {

package/components/form/Password.vue

@@ -41,6 +41,10 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
+    },
+    placeholder: {
+      type:    String,
+      default: '',
     }
   },
   data() {
@@ -116,6 +120,7 @@ export default {
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
       :mode="mode"
+      :placeholder="placeholder"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
@@ -137,6 +142,7 @@ export default {
             tabindex="0"
             class="hide-show"
             role="button"
+            :aria-label="reveal ? t('action.ariaLabel.hidePass', { area: label }) : t('action.ariaLabel.showPass', { area: label })"
             @click.prevent.stop="hideShowFn"
             @keyup.space.prevent.stop="hideShowFn"
           >
@@ -160,20 +166,20 @@ export default {
 <style lang="scss" scoped>
   .password {
     display: flex;
-    flex-direction: column;
+    /* flex-direction: column; */
 
     .labeled-input {
       .addon {
-        display: flex;
+        /* display: flex;
         align-items: center;
         justify-content: center;
         padding-left: 12px;
-        min-width: 65px;
+        min-width: 65px; */
 
-        .hide-show:focus-visible {
+        /* .hide-show:focus-visible {
           @include focus-outline;
           outline-offset: 4px;
-        }
+        } */
       }
     }
     .genPassword {