@rancher/shell 0.2.5 → 0.3.1

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
@@ -31,7 +39,7 @@ export default {
     },
   },
 
-  computed:   {
+  computed: {
     isView() {
       return this.mode === _VIEW;
     }
@@ -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

@@ -10,8 +10,8 @@ export default {
       required: true
     },
     options: {
-      default:   null,
-      type:      Array
+      default: null,
+      type:    Array
     },
     selectProps: {
       type:    Object,
@@ -26,7 +26,7 @@ export default {
       default: false
     }
   },
-  computed:   {
+  computed: {
     filteredOptions() {
       return this.options
         .filter(option => !this.value.includes(option.value));
@@ -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/BannerSettings.vue

@@ -81,16 +81,16 @@ export default ({
     textDecorationOptions() {
       const options = [
         {
-          style:  'fontWeight',
-          label:  this.t('banner.bannerDecoration.bannerBold')
+          style: 'fontWeight',
+          label: this.t('banner.bannerDecoration.bannerBold')
         },
         {
-          style:  'fontStyle',
-          label:  this.t('banner.bannerDecoration.bannerItalic')
+          style: 'fontStyle',
+          label: this.t('banner.bannerDecoration.bannerItalic')
         },
         {
-          style:  'textDecoration',
-          label:  this.t('banner.bannerDecoration.bannerUnderline')
+          style: 'textDecoration',
+          label: this.t('banner.bannerDecoration.bannerUnderline')
         }
       ];
 

package/components/form/ChangePassword.vue

@@ -53,7 +53,7 @@ export default {
       },
     };
   },
-  computed:   {
+  computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
     isRandomGenerated: {
@@ -242,7 +242,7 @@ export default {
         type:       NORMAN.USER,
         actionName: 'setpassword',
         resource:   user,
-        body:          { newPassword: this.isRandomGenerated ? this.form.genP : this.form.newP },
+        body:       { newPassword: this.isRandomGenerated ? this.form.genP : this.form.newP },
       });
     },
 
@@ -251,7 +251,7 @@ export default {
         await this.$store.dispatch('rancher/collectionAction', {
           type:       NORMAN.USER,
           actionName: 'changepassword',
-          body:          {
+          body:       {
             currentPassword: this.form.currentP,
             newPassword:     this.isRandomGenerated ? this.form.genP : this.form.newP
           },

package/components/form/Error.vue

@@ -12,8 +12,15 @@ export default Vue.extend<any, any, any, any>({
       type:    [String, Object, Number, Array]
     },
     rules: {
-      default:   () => [],
-      type:       Array as PropType<Rule[]>,
+      default: () => [],
+      type:    Array as PropType<Rule[]>,
+    },
+    /**
+     * Add icon for the banner
+     */
+    icon: {
+      type:    String,
+      default: null
     },
     asBanner: {
       default: false,
@@ -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/FileSelector.vue

@@ -47,17 +47,17 @@ export default {
 
     readAsDataUrl: {
       type:    Boolean,
-      default:    false
+      default: false
     },
 
     directory: {
       type:    Boolean,
-      default:    false
+      default: false
     },
 
     rawData: {
       type:    Boolean,
-      default:    false
+      default: false
     }
   },
 

package/components/form/Footer.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
     },
 
     disableSave: {
-      type:     Boolean,
+      type:    Boolean,
       default: false,
     }
   },

package/components/form/GithubPicker.vue

@@ -38,9 +38,9 @@ export default {
 
   data() {
     return {
-      repos:       [],
-      branches:    [],
-      files:       [],
+      repos:    [],
+      branches: [],
+      files:    [],
 
       loadingRecentRepos: true,
       loadingBranches:    true,
@@ -52,7 +52,7 @@ export default {
     };
   },
 
-  computed:   {
+  computed: {
     ...mapState({
       scopes:      state => state.github.scopes,
       recentRepos: state => state.github.repos,

package/components/form/KeyValue.vue

@@ -21,11 +21,11 @@ export default {
   },
   props: {
     value: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: null,
     },
     defaultValue: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: null,
     },
     // If the user supplies this array, then it indicates which keys should be shown as binary
@@ -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;
     }
   }