dashboard-shell-shell 1.0.113 → 1.0.115

package/components/form/NameNsDescription.vue

@@ -1,7 +1,5 @@
 <script>
-import { computed, ref, toRef, watch } from 'vue';
-import { mapActions, useStore } from 'vuex';
-
+import { mapGetters, mapActions } from 'vuex';
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
@@ -10,7 +8,6 @@ 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',
@@ -172,74 +169,81 @@ export default {
   },
 
   data() {
-    return { createNamespace: false };
-  },
+    const v = this.value;
+    const metadata = v.metadata;
+    let namespace, name, description;
 
-  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.nameKey) {
+      name = get(v, this.nameKey);
+    } else {
+      name = metadata?.name;
+    }
 
-    watch(name, (val) => {
-      if (props.normalizeName) {
-        val = normalizeName(val);
+    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;
       }
 
-      if (props.nameKey) {
-        set(props.value, props.nameKey, val);
-      } else {
-        props.value.metadata['name'] = val;
+      if (!namespace && !this.noDefaultNamespace) {
+        namespace = this.$store.getters['defaultNamespace'];
+        if (metadata) {
+          metadata.namespace = namespace;
+        }
       }
-      emit('update:value', props.value);
-    });
+    }
 
-    if (props.nameKey) {
-      name.value = get(v.value, props.nameKey);
+    if (this.descriptionKey) {
+      description = get(v, this.descriptionKey);
     } else {
-      name.value = metadata?.name || '';
+      description = metadata?.annotations?.[DESCRIPTION];
     }
 
-    const isCreate = computed(() => {
-      return props.mode === _CREATE;
-    });
-
-    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);
+    const inStore = this.$store.getters['currentStore']();
+    const nsSchema = this.$store.getters[`${ inStore }/schemaFor`](NAMESPACE);
 
-    const inStore = computed(() => {
-      return store.getters['currentStore']();
-    });
+    return {
+      namespace,
+      name,
+      description,
+      createNamespace: false,
+      nsSchema
+    };
+  },
 
-    const nsSchema = computed(() => {
-      return store.getters[`${ inStore.value }/schemaFor`](NAMESPACE);
-    });
+  computed: {
+    ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
+    ...mapActions('cru-resource', ['setCreateNamespace']),
+    namespaceReallyDisabled() {
+      return (
+        !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
+      ); // namespace is never editable
+    },
 
-    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;
-    });
+    nameReallyDisabled() {
+      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
+    },
 
     /**
      * Map namespaces from the store to options, adding divider and create button
      */
-    const options = computed(() => {
+    options() {
       let namespaces;
 
-      if (props.namespacesOverride) {
+      if (this.namespacesOverride) {
         // Use the resources provided
-        namespaces = props.namespacesOverride;
+        namespaces = this.namespacesOverride;
       } else {
-        if (props.namespaceOptions) {
+        if (this.namespaceOptions) {
           // Use the namespaces provided
-          namespaces = (props.namespaceOptions.map((ns) => ns.name) || []).sort();
+          namespaces = (this.namespaceOptions.map((ns) => ns.name) || []).sort();
         } else {
           // Determine the namespaces
-          const namespaceObjs = isCreate.value ? allowedNamespaces.value : storeNamespaces.value;
+          const namespaceObjs = this.isCreate ? this.allowedNamespaces() : this.namespaces();
 
           namespaces = Object.keys(namespaceObjs);
         }
@@ -247,22 +251,22 @@ export default {
 
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
-        .map(props.namespaceMapper || ((obj) => ({
+        .map(this.namespaceMapper || ((obj) => ({
           label: obj.nameDisplay,
           value: obj.id,
         })));
 
       const sortedByLabel = sortBy(options, 'label');
 
-      if (props.forceNamespace) {
+      if (this.forceNamespace) {
         sortedByLabel.unshift({
-          label: props.forceNamespace,
-          value: props.forceNamespace,
+          label: this.forceNamespace,
+          value: this.forceNamespace,
         });
       }
 
       const createButton = {
-        label: t('namespace.createNamespace'),
+        label: this.t('namespace.createNamespace'),
         value: '',
         kind:  'highlighted'
       };
@@ -272,100 +276,59 @@ export default {
         kind:     'divider'
       };
 
-      // const createOverhead = canCreateNamespace.value || props.createNamespaceOverride ? [createButton, divider] : [];
+      const createOverhead = this.canCreateNamespace || this.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
-    },
-
-    nameReallyDisabled() {
-      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
     },
 
     isView() {
       return this.mode === _VIEW;
     },
 
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
     showCustomize() {
       return this.mode === _CREATE && this.name && this.name.length > 0;
     },
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-6`;
+        return `span-8`;
       }
       // Name and namespace take up two columns.
-      // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
-      let cols = 2;
+      let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
 
       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);
@@ -383,13 +346,29 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
-      if (this.$refs.nameInput) {
-        this.$refs.nameInput.focus();
+      if (this.$refs.name) {
+        this.$refs.name.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;
@@ -410,7 +389,7 @@ export default {
           true,
         );
         this.$emit('isNamespaceNew', true);
-        this.$nextTick(() => this.$refs.namespaceInput.focus());
+        this.$nextTick(() => this.$refs.namespace.focus());
       } else {
         this.createNamespace = false;
         this.$store.dispatch(
@@ -425,14 +404,14 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div class="row mb-20">
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-6"
+      class="col span-3"
     >
       <LabeledInput
-        ref="namespaceInput"
+        ref="namespace"
         v-model:value="namespace"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
@@ -455,7 +434,7 @@ export default {
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      class="col span-6"
+      class="col span-3"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -477,13 +456,12 @@ export default {
     <div
       v-if="!nameNsHidden"
       :data-testid="componentTestid + '-name'"
-      class="col span-6"
+      class="col span-3"
     >
       <LabeledInput
-        ref="nameInput"
+        ref="name"
         key="name"
         v-model:value="name"
-        data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"
         :disabled="nameReallyDisabled"
@@ -495,22 +473,11 @@ export default {
     </div>
 
     <slot name="customize" />
-    <!-- <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>
+    <!-- // TODO: here goes the custom component -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
-       class="col span-6"
+      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
     >
       <LabeledInput
         key="description"
@@ -525,10 +492,11 @@ export default {
     </div>
 
     <div
-      v-if="$slots.bottom"
-      style="width: 100%;"
+      v-for="(slot, i) in extraColumns"
+      :key="i"
+      :class="{ col: true, [colSpan]: true }"
     >
-      <slot name="bottom" />
+      <slot :name="slot" />
     </div>
     <div
       v-if="showSpacer"

package/components/form/Networking.vue

@@ -29,20 +29,6 @@ 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,
@@ -52,12 +38,18 @@ export default {
     const { dnsConfig = {}, hostname, subdomain } = this.value;
     const { nameservers, searches, options } = dnsConfig;
 
-    this.hostAliases = hostAliases;
-    this.nameservers = nameservers;
-    this.searches = searches;
-    this.hostname = hostname;
-    this.subdomain = subdomain;
-    this.options = options;
+    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;
   },
 
   computed: {

package/components/form/NodeAffinity.vue

@@ -42,18 +42,31 @@ 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);
 
-    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)
-    };
+        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)
+      };
+    }
   },
 
   computed: {
@@ -75,27 +88,6 @@ 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,15 +40,6 @@ export default {
   },
 
   data() {
-    return {
-      selectNode:   null,
-      nodeName:     '',
-      nodeAffinity: {},
-      nodeSelector: {},
-    };
-  },
-
-  created() {
     const isHarvester = this.$store.getters['currentProduct'].inStore === VIRTUAL;
 
     let { nodeName = '' } = this.value;
@@ -74,10 +65,9 @@ export default {
       nodeAffinity['preferredDuringSchedulingIgnoredDuringExecution'] = [];
     }
 
-    this.selectNode = selectNode;
-    this.nodeName = nodeName;
-    this.nodeAffinity = nodeAffinity;
-    this.nodeSelector = nodeSelector;
+    return {
+      selectNode, nodeName, nodeAffinity, nodeSelector
+    };
   },
 
   computed: {

package/components/form/Password.vue

@@ -41,10 +41,6 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
-    },
-    placeholder: {
-      type:    String,
-      default: '',
     }
   },
   data() {
@@ -120,7 +116,6 @@ export default {
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
       :mode="mode"
-      :placeholder="placeholder"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
@@ -142,7 +137,6 @@ 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"
           >
@@ -166,20 +160,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 {