@rancher/shell 0.3.14 → 0.3.15

package/components/form/KeyValue.vue

@@ -167,7 +167,7 @@ export default {
     // you want to preserve but not support editing
     supported: {
       type:    Function,
-      default: v => true,
+      default: (v) => true,
     },
     // For asMap=false, preserve (copy) these keys from the original value into the emitted value.
     // Also useful for valueFrom as above.
@@ -247,6 +247,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    parseValueFromFile: {
+      default: false,
+      type:    Boolean
+    },
     disabled: {
       default: false,
       type:    Boolean
@@ -272,12 +276,12 @@ export default {
       return `grid-template-columns: repeat(${ size }, 1fr)${ gap };`;
     },
     usedKeyOptions() {
-      return this.rows.map(row => row[this.keyName]);
+      return this.rows.map((row) => row[this.keyName]);
     },
     filteredKeyOptions() {
       if (this.keyOptionUnique) {
         return this.keyOptions
-          .filter(option => !this.usedKeyOptions.includes(option.value));
+          .filter((option) => !this.usedKeyOptions.includes(option.value));
       }
 
       return this.keyOptions;
@@ -292,7 +296,7 @@ export default {
      * Filter rows based on toggler, keeping to still emit all the values
      */
     filteredRows() {
-      return this.rows.filter(row => !(this.isProtected(row.key) && !this.toggleFilter));
+      return this.rows.filter((row) => !(this.isProtected(row.key) && !this.toggleFilter));
     }
   },
   created() {
@@ -505,7 +509,7 @@ export default {
         return;
       }
       event.preventDefault();
-      const keyValues = splits.map(split => ({
+      const keyValues = splits.map((split) => ({
         [this.keyName]:   (split[0] || '').trim(),
         [this.valueName]: (split[1] || '').trim(),
         supported:        true,
@@ -517,7 +521,7 @@ export default {
       this.queueUpdate();
     },
     calculateOptions(value) {
-      const valueOption = this.keyOptions.find(o => o.value === value);
+      const valueOption = this.keyOptions.find((o) => o.value === value);
 
       if (valueOption) {
         return [valueOption, ...this.filteredKeyOptions];
@@ -544,6 +548,17 @@ export default {
      */
     onFocusMarkdownMultiline(idx, value) {
       this.$set(this.codeMirrorFocus, idx, value);
+    },
+    onValueFileSelected(idx, file) {
+      const { name, value } = file;
+
+      if (!this.rows[idx][this.keyName]) {
+        this.rows[idx][this.keyName] = name;
+      }
+      this.rows[idx][this.valueName] = value;
+    },
+    isValueFieldEmpty(value) {
+      return !value || value.trim().length === 0;
     }
   }
 };
@@ -662,39 +677,53 @@ export default {
             <div v-else-if="row.binary">
               {{ binaryTextSize(row.value) }}
             </div>
-            <CodeMirror
-              v-else-if="valueMarkdownMultiline"
-              ref="cm"
-              data-testid="code-mirror-multiline-field"
-              :class="{['focus']: codeMirrorFocus[i]}"
-              :value="row[valueName]"
-              :as-text-area="true"
-              :mode="mode"
-              @onInput="onInputMarkdownMultiline(i, $event)"
-              @onFocus="onFocusMarkdownMultiline(i, $event)"
-            />
-            <TextAreaAutoGrow
-              v-else-if="valueMultiline"
-              v-model="row[valueName]"
-              :class="{'conceal': valueConcealed}"
-              :disabled="disabled || isProtected(row.key)"
-              :mode="mode"
-              :placeholder="valuePlaceholder"
-              :min-height="40"
-              :spellcheck="false"
-              @input="queueUpdate"
-            />
-            <input
+            <div
               v-else
-              v-model="row[valueName]"
-              :disabled="isView || disabled || isProtected(row.key)"
-              :type="valueConcealed ? 'password' : 'text'"
-              :placeholder="valuePlaceholder"
-              autocorrect="off"
-              autocapitalize="off"
-              spellcheck="false"
-              @input="queueUpdate"
+              class="value-container"
+              :class="{ 'upload-button': parseValueFromFile }"
             >
+              <CodeMirror
+                v-if="valueMarkdownMultiline"
+                ref="cm"
+                data-testid="code-mirror-multiline-field"
+                :class="{['focus']: codeMirrorFocus[i]}"
+                :value="row[valueName]"
+                :as-text-area="true"
+                :mode="mode"
+                @onInput="onInputMarkdownMultiline(i, $event)"
+                @onFocus="onFocusMarkdownMultiline(i, $event)"
+              />
+              <TextAreaAutoGrow
+                v-else-if="valueMultiline"
+                v-model="row[valueName]"
+                data-testid="value-multiline"
+                :class="{'conceal': valueConcealed}"
+                :disabled="disabled || isProtected(row.key)"
+                :mode="mode"
+                :placeholder="valuePlaceholder"
+                :min-height="40"
+                :spellcheck="false"
+                @input="queueUpdate"
+              />
+              <input
+                v-else
+                v-model="row[valueName]"
+                :disabled="isView || disabled || isProtected(row.key)"
+                :type="valueConcealed ? 'password' : 'text'"
+                :placeholder="valuePlaceholder"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                @input="queueUpdate"
+              >
+              <FileSelector
+                v-if="parseValueFromFile && readAllowed && !isView && isValueFieldEmpty(row[valueName])"
+                class="btn btn-sm role-secondary file-selector"
+                :label="t('generic.upload')"
+                :include-file-name="true"
+                @selected="onValueFileSelected(i, $event)"
+              />
+            </div>
           </slot>
         </div>
         <div
@@ -772,7 +801,7 @@ export default {
     text-transform: initial;
     padding: 0;
   }
-  .kv-container{
+  .kv-container {
     display: grid;
     align-items: center;
     column-gap: 20px;
@@ -785,7 +814,19 @@ export default {
       &.key, &.extra {
         align-self: flex-start;
       }
-      &.value textarea{
+      &.value .value-container {
+        &.upload-button {
+          position: relative;
+          display: flex;
+          justify-content: right;
+          align-items: center;
+        }
+        .file-selector {
+          position: absolute;
+          margin-right: 5px;
+        }
+      }
+      &.value textarea {
         padding: 10px 10px 10px 10px;
       }
 
@@ -796,7 +837,7 @@ export default {
   }
   .remove {
     text-align: center;
-    BUTTON{
+    BUTTON {
       padding: 0px;
     }
   }
@@ -819,7 +860,7 @@ export default {
   .download {
     text-align: right;
   }
-  .copy-value{
+  .copy-value {
     padding: 0px 0px 0px 10px;
   }
 }

package/components/form/LabeledSelect.vue

@@ -150,10 +150,10 @@ export default {
       }
 
       // Force to update the option label if prop has been changed
-      const isOutdated = !this.options.find(opt => option[this.optionLabel] === opt[this.optionLabel]);
+      const isOutdated = !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
 
       if (isOutdated && this.options) {
-        const newOption = this.options.find(opt => isEqual(this.reduce(option), this.reduce(opt)));
+        const newOption = this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt)));
 
         if (newOption) {
           const label = get(newOption, this.optionLabel);

package/components/form/MatchExpressions.vue

@@ -223,11 +223,11 @@ export default {
           }
 
           if ( val !== null ) {
-            expression.values = val.split(/\s*,\s*/).filter(x => !!x);
+            expression.values = val.split(/\s*,\s*/).filter((x) => !!x);
           }
 
           return expression;
-        }).filter(x => !!x);
+        }).filter((x) => !!x);
 
         if ( isArray(this.value) || this.matchingSelectorDisplay ) {
           this.$emit('input', out);

package/components/form/Members/ClusterMembershipEditor.vue

@@ -1,8 +1,7 @@
 <script>
 import { NORMAN } from '@shell/config/types';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
-import MembershipEditor from '@shell/components/form/Members/MembershipEditor';
-import { canViewMembershipEditor } from '@shell/components/form/Members/MembershipEditor.vue';
+import MembershipEditor, { canViewMembershipEditor } from '@shell/components/form/Members/MembershipEditor';
 
 export function canViewClusterMembershipEditor(store) {
   return canViewMembershipEditor(store);

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -134,14 +134,14 @@ export default {
 
       if (this.permissionGroup === 'custom') {
         return this.customPermissions
-          .filter(permission => permission.value)
-          .map(permission => permission.key);
+          .filter((permission) => permission.value)
+          .map((permission) => permission.key);
       }
 
       return [this.permissionGroup];
     },
     options() {
-      const customRoles = this.customRoles.map(role => ({
+      const customRoles = this.customRoles.map((role) => ({
         label:       role.nameDisplay,
         description: role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('members.clusterPermissions.noDescription'),
         value:       role.id
@@ -177,7 +177,7 @@ export default {
     },
     customPermissionsUpdate() {
       return this.customPermissions.reduce((acc, customPermissionsItem) => {
-        const lockedExist = this.roleTemplates.find(roleTemplateItem => roleTemplateItem.displayName === customPermissionsItem.label);
+        const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.displayName === customPermissionsItem.label);
 
         if (lockedExist.locked) {
           customPermissionsItem['locked'] = true;
@@ -209,7 +209,7 @@ export default {
     async updateBindings() {
       if (this.principalId) {
         const principalProperty = await this.principalProperty();
-        const bindingPromises = this.roleTemplateIds.map(id => this.$store.dispatch(`rancher/create`, {
+        const bindingPromises = this.roleTemplateIds.map((id) => this.$store.dispatch(`rancher/create`, {
           type:                NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING,
           clusterId:           this.clusterName,
           roleTemplateId:      id,
@@ -237,6 +237,7 @@ export default {
           class="mb-20"
           :mode="mode"
           :retain-selection="true"
+          data-testid="cluster-member-select"
           @add="onAdd"
         />
       </div>

package/components/form/Members/MembershipEditor.vue

@@ -65,7 +65,7 @@ export default {
     const [allBindings] = await Promise.all(userHydration);
 
     const bindings = allBindings
-      .filter(b => normalizeId(get(b, this.parentKey)) === normalizeId(this.parentId));
+      .filter((b) => normalizeId(get(b, this.parentKey)) === normalizeId(this.parentId));
 
     this.$set(this, 'lastSavedBindings', [...bindings]);
 
@@ -91,11 +91,11 @@ export default {
   computed: {
     newBindings() {
       return this.bindings
-        .filter(binding => !binding.id && !this.lastSavedBindings.includes(binding) && !binding.isDefaultBinding);
+        .filter((binding) => !binding.id && !this.lastSavedBindings.includes(binding) && !binding.isDefaultBinding);
     },
     removedBindings() {
       return this.lastSavedBindings
-        .filter(binding => !this.bindings.includes(binding));
+        .filter((binding) => !this.bindings.includes(binding));
     },
     membershipUpdate() {
       const newBindings = this.newBindings;
@@ -111,7 +111,7 @@ export default {
             return binding.save();
           });
 
-          const removedPromises = removedBindings.map(binding => binding.remove());
+          const removedPromises = removedBindings.map((binding) => binding.remove());
 
           return Promise.all([...savedPromises, ...removedPromises]);
         }

package/components/form/Members/ProjectMembershipEditor.vue

@@ -1,8 +1,7 @@
 <script>
 import { NORMAN } from '@shell/config/types';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
-import MembershipEditor from '@shell/components/form/Members/MembershipEditor';
-import { canViewMembershipEditor } from '@shell/components/form/Members/MembershipEditor.vue';
+import MembershipEditor, { canViewMembershipEditor } from '@shell/components/form/Members/MembershipEditor';
 
 export function canViewProjectMembershipEditor(store) {
   return canViewMembershipEditor(store, true);

package/components/form/NameNsDescription.vue

@@ -105,6 +105,10 @@ export default {
       type:    Array,
       default: null,
     },
+    createNamespaceOverride: {
+      type:    Boolean,
+      default: false,
+    },
     descriptionLabel: {
       type:    String,
       default: 'nameNsDescription.description.label',
@@ -224,9 +228,11 @@ export default {
      * Map namespaces from the store to options, adding divider and create button
      */
     options() {
-      const options = Object.keys(this.isCreate ? this.allowedNamespaces() : this.namespaces())
-        .map(namespace => ({ nameDisplay: namespace, id: namespace }))
-        .map(this.namespaceMapper || (obj => ({
+      const namespaces = this.namespacesOverride ||
+        (Object.keys(this.isCreate ? this.allowedNamespaces() : this.namespaces()));
+      const options = namespaces
+        .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
+        .map(this.namespaceMapper || ((obj) => ({
           label: obj.nameDisplay,
           value: obj.id,
         })));
@@ -251,7 +257,7 @@ export default {
         kind:     'divider'
       };
 
-      const createOverhead = this.canCreateNamespace ? [createButton, divider] : [];
+      const createOverhead = this.canCreateNamespace || this.createNamespaceOverride ? [createButton, divider] : [];
 
       return [
         ...createOverhead,
@@ -330,7 +336,7 @@ export default {
       }
 
       if (this.namespaced) {
-        this.$emit('isNamespaceNew', !val || (this.options && !this.options.find(n => n.value === val)));
+        this.$emit('isNamespaceNew', !val || (this.options && !this.options.find((n) => n.value === val)));
       }
 
       if (this.namespaceKey) {
@@ -348,7 +354,8 @@ export default {
     cancelCreateNamespace(e) {
       this.createNamespace = false;
       this.$parent.$emit('createNamespace', false);
-      this.namespace = this.$store.getters['defaultNamespace'];
+      // In practise we should always have a defaultNamespace... unless we're in non-kube extension world,  so fall back on options
+      this.namespace = this.$store.getters['defaultNamespace'] || this.options.find((o) => !!o.value)?.value ;
     },
 
     selectNamespace(e) {

package/components/form/Networking.vue

@@ -113,10 +113,10 @@ export default {
     updateHostAliases(neu) {
       this.hostAliases = neu.map((entry) => {
         const ip = entry.ip.trim();
-        const hostnames = entry.hostnames.trim().split(/[\s,]+/).filter(x => !!x);
+        const hostnames = entry.hostnames.trim().split(/[\s,]+/).filter((x) => !!x);
 
         return { ip, hostnames };
-      }).filter(entry => entry.ip && entry.hostnames.length);
+      }).filter((entry) => entry.ip && entry.hostnames.length);
       this.update();
     },
 

package/components/form/NodeScheduling.vue

@@ -142,7 +142,7 @@ export default {
 
           this.nodeName = nodeName;
 
-          const array = this.nodes.map(n => n.value);
+          const array = this.nodes.map((n) => n.value);
 
           if (nodeName && !array.includes(nodeName)) {
             this.$store.dispatch('growl/error', {

package/components/form/PodAffinity.vue

@@ -333,7 +333,7 @@ export default {
 
       // namespaces would be String if there is no namespace
       if (typeof namespaces === 'string') {
-        nsArray = namespaces.split(',').map(ns => ns.trim()).filter(ns => ns?.length);
+        nsArray = namespaces.split(',').map((ns) => ns.trim()).filter((ns) => ns?.length);
       }
 
       this.$set(term, 'namespaces', nsArray);

package/components/form/ProjectMemberEditor.vue

@@ -160,7 +160,7 @@ export default {
     },
 
     options() {
-      const customRoles = this.customRoles.map(role => ({
+      const customRoles = this.customRoles.map((role) => ({
         label:       this.purifyOption(role.nameDisplay),
         description: this.purifyOption(role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('projectMembers.projectPermissions.noDescription')),
         value:       this.purifyOption(role.id),
@@ -192,7 +192,7 @@ export default {
     },
     customPermissionsUpdate() {
       return this.customPermissions.reduce((acc, customPermissionsItem) => {
-        const lockedExist = this.roleTemplates.find(roleTemplateItem => roleTemplateItem.displayName === customPermissionsItem.label);
+        const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.displayName === customPermissionsItem.label);
 
         if (lockedExist.locked) {
           customPermissionsItem['locked'] = true;
@@ -241,8 +241,8 @@ export default {
 
       if (permissionGroup === 'custom') {
         return this.customPermissions
-          .filter(permission => permission.value)
-          .map(permission => permission.key);
+          .filter((permission) => permission.value)
+          .map((permission) => permission.key);
       }
 
       return [permissionGroup];

package/components/form/ResourceQuota/Namespace.vue

@@ -38,7 +38,7 @@ export default {
       return this.project?.spec?.resourceQuota?.limit || {};
     },
     namespaceResourceQuotaLimits() {
-      return this.project.namespaces.map(namespace => ({
+      return this.project.namespaces.map((namespace) => ({
         ...namespace.resourceQuota.limit,
         id: namespace.id
       }));
@@ -54,7 +54,7 @@ export default {
   methods: {
     remainingTypes(currentType) {
       return this.mappedTypes
-        .filter(type => !this.types.includes(type.value) || type.value === currentType);
+        .filter((type) => !this.types.includes(type.value) || type.value === currentType);
     },
     update(key, value) {
       const resourceQuota = {

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -83,8 +83,8 @@ export default {
     },
     namespaceLimits() {
       return this.namespaceResourceQuotaLimits
-        .filter(resourceQuota => resourceQuota[this.type] && resourceQuota.id !== this.namespace.id)
-        .map(resourceQuota => parseSi(resourceQuota[this.type], this.siOptions));
+        .filter((resourceQuota) => resourceQuota[this.type] && resourceQuota.id !== this.namespace.id)
+        .map((resourceQuota) => parseSi(resourceQuota[this.type], this.siOptions));
     },
     namespaceContribution() {
       return this.namespaceLimits.reduce((sum, limit) => sum + limit, 0);

package/components/form/ResourceQuota/Project.vue

@@ -41,7 +41,7 @@ export default {
     },
     remainingTypes(currentType) {
       return this.mappedTypes
-        .filter(mappedType => !this.typeValues.includes(mappedType.value) || mappedType.value === currentType);
+        .filter((mappedType) => !this.typeValues.includes(mappedType.value) || mappedType.value === currentType);
     },
     emitRemove(data) {
       this.$emit('remove', data.row?.value);

package/components/form/ResourceQuota/shared.js

@@ -130,14 +130,14 @@ export const HARVESTER_TYPES = [
 
 export const ROW_COMPUTED = {
   typeOption() {
-    return this.types.find(type => type.value === this.type);
+    return this.types.find((type) => type.value === this.type);
   }
 };
 
 export const QUOTA_COMPUTED = {
   mappedTypes() {
     return this.types
-      .map(type => ({
+      .map((type) => ({
         label:       this.t(type.labelKey),
         baseUnit:    type.baseUnitKey ? this.t(type.baseUnitKey) : undefined,
         placeholder: this.t(type.placeholderKey),

package/components/form/ResourceSelector.vue

@@ -90,7 +90,7 @@ export default {
 
   methods: {
     updateMatchingResources: throttle(function() {
-      this.allResourcesInScope = this.namespace ? this.allResources.filter(res => res.metadata.namespace === this.namespace) : this.allResources;
+      this.allResourcesInScope = this.namespace ? this.allResources.filter((res) => res.metadata.namespace === this.namespace) : this.allResources;
       const match = matching(this.allResourcesInScope, this.selectorExpressions);
       const matched = match.length || 0;
       const sample = match[0]?.nameDisplay;

package/components/form/ResourceTabs/index.vue

@@ -140,7 +140,7 @@ export default {
     },
     conditionsHaveIssues() {
       if (this.showConditions) {
-        return this.value.status?.conditions?.some(cond => cond.error);
+        return this.value.status?.conditions?.some((cond) => cond.error);
       }
 
       return false;

package/components/form/RuleSelector.vue

@@ -96,7 +96,7 @@ export default {
     },
     onValueInput(scope, rawValue) {
       scope.row.value.values = rawValue.split(',')
-        .map(entry => entry.trim());
+        .map((entry) => entry.trim());
       scope.queueUpdate();
     }
   },

package/components/form/SecretSelector.vue

@@ -93,10 +93,10 @@ export default {
       const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
       return allSecrets
-        .filter(secret => this.types.includes(secret._type) && secret.namespace === this.namespace);
+        .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
     },
     secretNames() {
-      const mappedSecrets = this.secrets.map(secret => ({
+      const mappedSecrets = this.secrets.map((secret) => ({
         label: secret.name,
         value: secret.name
       })).sort();
@@ -104,9 +104,9 @@ export default {
       return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
     },
     keys() {
-      const secret = this.secrets.find(secret => secret.name === this.name) || {};
+      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
 
-      return Object.keys(secret.data || {}).map(key => ({
+      return Object.keys(secret.data || {}).map((key) => ({
         label: key,
         value: key
       }));

package/components/form/Select.vue

@@ -155,11 +155,11 @@ export default {
   computed: {
     requiredField() {
       // using "any" for a type on "rule" here is dirty but the use of the optional chaining operator makes it safe for what we're doing here.
-      return (this.required || this.rules.some(rule => rule?.name === 'required'));
+      return (this.required || this.rules.some((rule) => rule?.name === 'required'));
     },
     validationMessage() {
       // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
-      const requiredRule = this.rules.find(rule => rule?.name === 'required');
+      const requiredRule = this.rules.find((rule) => rule?.name === 'required');
       const ruleMessages = [];
       const value = this?.value;
 

package/components/form/SelectOrCreateAuthSecret.vue

@@ -208,7 +208,7 @@ export default {
       }
 
       const out = this.allSecrets
-        .filter(x => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
+        .filter((x) => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
         .filter((x) => {
           // Must match one of the types if given
           if ( types.length && !types.includes(x._type) ) {
@@ -219,7 +219,7 @@ export default {
           if ( keys.length ) {
             const dataKeys = Object.keys(x.data || {});
 
-            if ( !keys.every(key => dataKeys.includes(key)) ) {
+            if ( !keys.every((key) => dataKeys.includes(key)) ) {
               return false;
             }
           }
@@ -235,7 +235,7 @@ export default {
 
       if ( this.allowS3 ) {
         const more = this.allCloudCreds
-          .filter(x => ['aws', 's3'].includes(x.provider) )
+          .filter((x) => ['aws', 's3'].includes(x.provider) )
           .map((x) => {
             return {
               label: `${ x.nameDisplay } (${ x.providerDisplay })`,

package/components/form/ServiceNameSelect.vue

@@ -80,7 +80,7 @@ export default {
         return false;
       }
 
-      return !this.options.find(o => this.reduce(o) === this.serviceName);
+      return !this.options.find((o) => this.reduce(o) === this.serviceName);
     },
 
     serviceName() {

package/components/form/ServicePorts.vue

@@ -33,7 +33,7 @@ export default {
       default:   () => [],
       type:      Array,
       // we only want functions in the rules array
-      validator: rules => rules.every(rule => ['function'].includes(typeof rule))
+      validator: (rules) => rules.every((rule) => ['function'].includes(typeof rule))
     }
   },
 

package/components/form/ShellInput.vue

@@ -42,7 +42,7 @@ export default {
       let out = null;
 
       if ( userValue ) {
-        out = userValue.match(/('[^']+')|("[^"]+")|\S+/g).map(string => string.replace(/^'|'$|^"|"$/g, ''));
+        out = userValue.match(/('[^']+')|("[^"]+")|\S+/g).map((string) => string.replace(/^'|'$|^"|"$/g, ''));
       }
       this.$emit('input', out);
     },