@rancher/shell 0.3.0 → 0.3.1

package/components/auth/RoleDetailEdit.vue

@@ -380,28 +380,27 @@ export default {
       // - resourceNames
       // - resources
       // - verbs
-      const value = event.label ? event.label : event;
 
       switch (key) {
       case 'apiGroups':
 
-        if (value || (value === '')) {
-          this.$set(rule, 'apiGroups', [value]);
+        if (event || (event === '')) {
+          this.$set(rule, 'apiGroups', [event]);
         }
 
         break;
 
       case 'verbs':
 
-        if (value) {
-          this.$set(rule, 'verbs', [value]);
+        if (event) {
+          this.$set(rule, 'verbs', [event]);
         } else {
           this.$set(rule, 'verbs', []);
         }
         break;
 
       case 'resources':
-        if (event.resourceName) {
+        if (event?.resourceName) {
           // If we are updating the resources defined in a rule,
           // the event will be an object with the
           // properties apiGroupValue and resourceName.
@@ -409,7 +408,7 @@ export default {
           // Automatically fill in the API group of the
           // selected resource.
           this.$set(rule, 'apiGroups', [event.apiGroupValue]);
-        } else if (event.label) {
+        } else if (event?.label) {
           // When the user creates a new resource name in the resource
           // field instead of selecting an existing one,
           // we have to treat that differently because the incoming event
@@ -424,8 +423,8 @@ export default {
         break;
 
       case 'nonResourceURLs':
-        if (value) {
-          this.$set(rule, 'nonResourceURLs', [value]);
+        if (event) {
+          this.$set(rule, 'nonResourceURLs', [event]);
         } else {
           this.$set(rule, 'nonResourceURLs', []);
         }
@@ -447,6 +446,21 @@ export default {
       this.done();
     },
     async actuallySave(url) {
+      // Go through all of the grules and replace double quote apiGroups
+      // k8S documentation shows using empty rules as "" - we change this to empty string when used
+      this.value.rules?.forEach((rule) => {
+        if (rule.apiGroups) {
+          rule.apiGroups = rule.apiGroups.map((group) => {
+            // If the group is two double quotes ("") replace if with empty string
+            if (group.trim() === '\"\"') {
+              group = '';
+            }
+
+            return group;
+          });
+        }
+      });
+
       if ( this.isCreate ) {
         url = url || this.schema.linkFor('collection');
         await this.value.save({ url, redirectUnauthorized: false });
@@ -623,12 +637,7 @@ export default {
                   </span>
                 </div>
                 <div :class="ruleClass">
-                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}
-                    <span
-                      v-if="isNamespaced"
-                      class="required"
-                    >*</span>
-                  </span>
+                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}</span>
                 </div>
                 <div
                   v-if="!isNamespaced"
@@ -670,7 +679,7 @@ export default {
                     :value="getRule('apiGroups', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
-                    @input="setRule('apiGroups', props.row.value, $event)"
+                    @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   >
                 </div>
                 <div
@@ -681,7 +690,7 @@ export default {
                     :value="getRule('nonResourceURLs', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
-                    @input="setRule('nonResourceURLs', props.row.value, $event)"
+                    @input="setRule('nonResourceURLs', props.row.value, $event.target.value)"
                   >
                 </div>
               </div>

package/components/auth/SelectPrincipal.vue

@@ -40,7 +40,7 @@ export default {
     project: {
       type:    Boolean,
       default: false
-    },
+    }
   },
 
   async fetch() {
@@ -54,10 +54,11 @@ export default {
 
   data() {
     return {
-      principals: null,
-      searchStr:  '',
-      options:    [],
-      newValue:   '',
+      principals:     null,
+      searchStr:      '',
+      options:        [],
+      newValue:       '',
+      tooltipContent: null,
     };
   },
 
@@ -94,6 +95,24 @@ export default {
   },
 
   methods: {
+    setTooltipContent() {
+      if (!this.retainSelection) {
+        return;
+      }
+      if (this.principals) {
+        const selected = this.principals.find(p => p.id === this.newValue);
+
+        this.tooltipContent = selected?.name;
+      } else {
+        this.tooltipContent = null;
+      }
+    },
+    resetTooltipContent() {
+      if (!this.retainSelection) {
+        return;
+      }
+      this.tooltipContent = null;
+    },
     add(id) {
       if (!id) {
         // Ignore attempts to select an invalid principal
@@ -156,6 +175,11 @@ export default {
   <LabeledSelect
     ref="labeled-select"
     v-model="newValue"
+    v-tooltip="{
+      content: tooltipContent,
+      placement: 'bottom',
+      classes: ['select-principal-tooltip']
+    }"
     :mode="mode"
     :label="label"
     :placeholder="placeholder"
@@ -166,6 +190,8 @@ export default {
     :class="{'retain-selection': retainSelection}"
     @input="add"
     @search="onSearch"
+    @on-open="resetTooltipContent()"
+    @on-close="setTooltipContent()"
   >
     <template v-slot:no-options="{ searching }">
       <template v-if="searching">
@@ -226,4 +252,9 @@ export default {
       text-overflow: ellipsis;
     }
   }
+
+  .select-principal-tooltip {
+    max-width: 580px;
+    word-wrap: break-word;
+  }
 </style>

package/components/form/ArrayList.vue

@@ -5,13 +5,11 @@ import { removeAt } from '@shell/utils/array';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { clone } from '@shell/utils/object';
 import { LabeledInput } from '@components/Form/LabeledInput';
-
 const DEFAULT_PROTIP = 'Tip: Paste lines into any list field for easy bulk entry';
 
 export default {
   components: { TextAreaAutoGrow, LabeledInput },
-
-  props: {
+  props:      {
     value: {
       type:    Array,
       default: null,
@@ -24,7 +22,6 @@ export default {
       type:    Boolean,
       default: false,
     },
-
     title: {
       type:    String,
       default: ''
@@ -37,7 +34,6 @@ export default {
       type:    Boolean,
       default: false,
     },
-
     valueLabel: {
       type:    String,
       default: 'Value',
@@ -50,7 +46,6 @@ export default {
       type:    Boolean,
       default: false,
     },
-
     addLabel: {
       type: String,
       default() {
@@ -61,7 +56,6 @@ export default {
       type:    Boolean,
       default: true,
     },
-
     removeLabel: {
       type: String,
       default() {
@@ -72,22 +66,18 @@ export default {
       type:    Boolean,
       default: true,
     },
-
     defaultAddValue: {
       type:    [String, Number, Object, Array],
       default: ''
     },
-
     loading: {
       type:    Boolean,
       default: false
     },
-
     disabled: {
       type:    Boolean,
       default: false,
     },
-
     rules: {
       default:   () => [],
       type:      Array,
@@ -95,7 +85,6 @@ export default {
       validator: rules => rules.every(rule => ['function'].includes(typeof rule))
     }
   },
-
   data() {
     const input = (this.value || []).slice();
     const rows = [];
@@ -103,7 +92,6 @@ export default {
     for ( const value of input ) {
       rows.push({ value });
     }
-
     if ( !rows.length && this.initialEmptyRow ) {
       const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
 
@@ -112,24 +100,19 @@ export default {
 
     return { rows, lastUpdateWasFromValue: false };
   },
-
   computed: {
     isView() {
       return this.mode === _VIEW;
     },
-
     showAdd() {
       return this.addAllowed;
     },
-
     showRemove() {
       return this.removeAllowed;
     },
-
     isDefaultProtip() {
       return this.protip === DEFAULT_PROTIP;
     },
-
     showProtip() {
       if (this.protip && !this.isDefaultProtip) {
         return true;
@@ -138,7 +121,6 @@ export default {
       return !this.valueMultiline && this.protip;
     }
   },
-
   watch: {
     value() {
       this.lastUpdateWasFromValue = true;
@@ -156,29 +138,24 @@ export default {
       }
     }
   },
-
   created() {
     this.queueUpdate = debounce(this.update, 50);
   },
-
   methods: {
     add() {
       this.rows.push({ value: clone(this.defaultAddValue) });
       if (this.defaultAddValue) {
         this.queueUpdate();
       }
-
       this.$nextTick(() => {
         const inputs = this.$refs.value;
 
         if ( inputs && inputs.length > 0 ) {
           inputs[inputs.length - 1].focus();
         }
-
         this.$emit('add');
       });
     },
-
     /**
      * Remove item and emits removed row and its own index value
      */
@@ -187,12 +164,10 @@ export default {
       removeAt(this.rows, index);
       this.queueUpdate();
     },
-
     update() {
       if ( this.isView ) {
         return;
       }
-
       const out = [];
 
       for ( const row of this.rows ) {
@@ -203,15 +178,12 @@ export default {
           out.push(value);
         }
       }
-
       this.$emit('input', out);
     },
-
     onPaste(index, event) {
       if (this.valueMultiline) {
         return;
       }
-
       event.preventDefault();
       const text = event.clipboardData.getData('text/plain');
       const split = text.split('\n').map(value => ({ value }));
@@ -252,6 +224,7 @@ export default {
       <div
         v-for="(row, idx) in rows"
         :key="idx"
+        data-testid="array-list-box"
         class="box"
       >
         <slot
@@ -349,7 +322,7 @@ export default {
           type="button"
           class="btn role-tertiary add"
           :disabled="loading"
-          data-testid="add-item"
+          data-testid="array-list-button"
           @click="add()"
         >
           <i
@@ -366,14 +339,11 @@ export default {
 <style lang="scss" scoped>
   .title {
     margin-bottom: 10px;
-
   }
-
   .box {
     display: grid;
     grid-template-columns: auto $array-list-remove-margin;
     align-items: center;
-
     margin-bottom: 10px;
     .value {
       flex: 1;
@@ -382,11 +352,9 @@ export default {
       }
     }
   }
-
   .remove {
     text-align: right;
   }
-
   .footer {
     .protip {
       float: right;

package/components/form/ArrayListGrouped.vue

@@ -4,6 +4,7 @@ import InfoBox from '@shell/components/InfoBox';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default {
+  name:       'ArrayListGrouped',
   components: { ArrayList, InfoBox },
   props:      {
     /**
@@ -21,6 +22,13 @@ export default {
       type:    Boolean,
       default: true,
     },
+    /**
+     * Start with empty row
+     */
+    initialEmptyRow: {
+      type:    Boolean,
+      default: false,
+    },
 
     /**
      * Form mode for the component
@@ -51,7 +59,7 @@ export default {
       }
 
       return this.canRemove;
-    }
+    },
   }
 };
 </script>
@@ -62,6 +70,7 @@ export default {
     v-bind="$attrs"
     :add-allowed="canAdd && !isView"
     :mode="mode"
+    :initial-empty-row="initialEmptyRow"
     @input="$emit('input', $event)"
     @add="$emit('add')"
     @remove="$emit('remove', $event)"
@@ -79,7 +88,7 @@ export default {
         :data-testid="`remove-item-${scope.i}`"
         @click="scope.remove"
       >
-        <i class="icon icon-2x icon-x" />
+        <i class="icon icon-x" />
       </button>
       <span v-else />
     </template>
@@ -105,15 +114,15 @@ export default {
       & > .remove {
         position: absolute;
 
-        padding: 0px;
-
         top: 0;
         right: 0;
       }
 
       & > .info-box {
         margin-bottom: 0;
+        padding-right: 25px;
       }
     }
 }
+
 </style>

package/components/form/ArrayListSelect.vue

@@ -65,11 +65,11 @@ export default {
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">
-      <Select
-        :value="scope.row.value"
-        v-bind="selectProps"
-        :options="calculateOptions(scope.row.value)"
-        @input="updateRow(scope.i, $event)"
+      <Select
+        :value="scope.row.value"
+        v-bind="selectProps"
+        :options="calculateOptions(scope.row.value)"
+        @input="updateRow(scope.i, $event)"
       />
     </template>
   </ArrayList>

package/components/form/Error.vue

@@ -15,6 +15,13 @@ export default Vue.extend<any, any, any, any>({
       default: () => [],
       type:    Array as PropType<Rule[]>,
     },
+    /**
+     * Add icon for the banner
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
     asBanner: {
       default: false,
       type:    Boolean
@@ -49,6 +56,7 @@ export default Vue.extend<any, any, any, any>({
     v-if="!!asBanner && !!validationMessage"
     color="error"
     :label="validationMessage"
+    :icon="icon"
   />
   <span
     v-else-if="!!validationMessage"

package/components/form/KeyValue.vue

@@ -96,6 +96,20 @@ export default {
         return this.$store.getters['i18n/t']('keyValue.keyPlaceholder');
       },
     },
+    /**
+     * List of keys which needs to be disabled and hidden based on toggler
+     */
+    protectedKeys: {
+      type:    Array,
+      default: () => [],
+    },
+    /**
+     * Conditionally display protected keys, if any
+     */
+    toggleFilter: {
+      type:    Boolean,
+      default: false,
+    },
     separatorLabel: {
       type:    String,
       default: '',
@@ -235,7 +249,6 @@ export default {
   },
 
   computed: {
-
     isView() {
       return this.mode === _VIEW;
     },
@@ -261,6 +274,12 @@ export default {
      */
     canRemove() {
       return !this.isView && this.removeAllowed;
+    },
+    /**
+     * Filter rows based on toggler, keeping to still emit all the values
+     */
+    filteredRows() {
+      return this.rows.filter(row => !(this.isProtected(row.key) && !this.toggleFilter));
     }
   },
   created() {
@@ -275,6 +294,10 @@ export default {
     }
   },
   methods: {
+    isProtected(key) {
+      return this.protectedKeys && this.protectedKeys.includes(key);
+    },
+
     getRows(value) {
       const rows = [];
 
@@ -325,7 +348,7 @@ export default {
           rows.push(entry);
         }
       }
-      if ( !rows.length && this.initialEmptyRow ) {
+      if ( rows && !rows.length && this.initialEmptyRow ) {
         rows.push({
           [this.keyName]:   '',
           [this.valueName]: '',
@@ -389,6 +412,10 @@ export default {
             this.add(key, value);
           }
         });
+
+        if (lines.length > 0) {
+          this.removeEmptyRows();
+        }
       }
     },
     download(idx, ev) {
@@ -550,9 +577,10 @@ export default {
         </div>
       </template>
       <template
-        v-for="(row,i) in rows"
+        v-for="(row,i) in filteredRows"
         v-else
       >
+        <!-- Key -->
         <div
           :key="i+'key'"
           class="kv-item key"
@@ -570,6 +598,7 @@ export default {
               ref="key"
               v-model="row[keyName]"
               :searchable="true"
+              :disabled="isProtected(row.key)"
               :clearable="false"
               :taggable="keyTaggable"
               :options="calculateOptions(row[keyName])"
@@ -579,13 +608,15 @@ export default {
               v-else
               ref="key"
               v-model="row[keyName]"
-              :disabled="isView || !keyEditable"
+              :disabled="isView || !keyEditable || isProtected(row.key)"
               :placeholder="keyPlaceholder"
               @input="queueUpdate"
               @paste="onPaste(i, $event)"
             >
           </slot>
         </div>
+
+        <!-- Value -->
         <div
           :key="i+'value'"
           class="kv-item value"
@@ -608,6 +639,7 @@ export default {
               v-else-if="valueMultiline"
               v-model="row[valueName]"
               :class="{'conceal': valueConcealed}"
+              :disabled="isProtected(row.key)"
               :mode="mode"
               :placeholder="valuePlaceholder"
               :min-height="40"
@@ -617,7 +649,7 @@ export default {
             <input
               v-else
               v-model="row[valueName]"
-              :disabled="isView"
+              :disabled="isView || isProtected(row.key)"
               :type="valueConcealed ? 'password' : 'text'"
               :placeholder="valuePlaceholder"
               autocorrect="off"
@@ -652,7 +684,7 @@ export default {
           >
             <button
               type="button"
-              :disabled="isView"
+              :disabled="isView || isProtected(row.key)"
               class="btn role-link"
               @click="remove(i)"
             >
@@ -664,7 +696,7 @@ export default {
     </div>
     <div
       v-if="(addAllowed || readAllowed) && !isView"
-      class="footer"
+      class="footer mt-20"
     >
       <slot
         name="add"

package/components/form/LabeledSelect.vue

@@ -150,6 +150,10 @@ export default {
       this.resizeHandler();
     },
 
+    onClose() {
+      this.$emit('on-close');
+    },
+
     getOptionLabel(option) {
       if (!option) {
         return;
@@ -277,6 +281,7 @@ export default {
       @search:focus="onFocus"
       @search="onSearch"
       @open="onOpen"
+      @close="onClose"
       @option:selected="$emit('selecting', $event)"
     >
       <template #option="option">
@@ -456,9 +461,7 @@ export default {
 
   ::v-deep .vs__actions {
     &:after {
-      line-height: 1.85rem;
       position: relative;
-      right: 3px;
       top: -10px;
     }
   }