@rancher/shell 0.3.0 → 0.3.2

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;
     }
   }

package/components/form/Labels.vue

@@ -1,8 +1,12 @@
 <script>
 import KeyValue from '@shell/components/form/KeyValue';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 
 export default {
-  components: { KeyValue },
+  components: {
+    ToggleSwitch,
+    KeyValue
+  },
 
   props: {
     value: {
@@ -41,6 +45,10 @@ export default {
     }
   },
 
+  data() {
+    return { toggler: false };
+  },
+
   computed: {
     containerClass() {
       return `${ this.displaySideBySide ? 'row' : '' } ${ this.defaultContainerClass }`.trim();
@@ -48,24 +56,41 @@ export default {
 
     sectionClass() {
       return `${ this.displaySideBySide ? 'col span-6' : 'row' } ${ this.defaultSectionClass }`.trim();
-    }
+    },
+
   }
 };
 </script>
 <template>
   <div :class="containerClass">
-    <div :class="sectionClass">
-      <KeyValue
-        key="labels"
-        :value="value.labels"
-        :add-label="t('labels.addLabel')"
-        :mode="mode"
-        :title="t('labels.labels.title')"
-        :title-protip="labelTitleTooltip"
-        :read-allowed="false"
-        :value-can-be-empty="true"
-        @input="value.setLabels($event)"
-      />
+    <div class="labels">
+      <div class="labels__header">
+        <h3>
+          <t k="labels.labels.title" />
+        </h3>
+        <ToggleSwitch
+          v-if="value.hasSystemLabels"
+          v-model="toggler"
+          name="label-system-toggle"
+          :on-label="t('labels.labels.show')"
+        />
+      </div>
+      <p class="mt-10 mb-10">
+        <t k="labels.labels.description" />
+      </p>
+      <div :class="sectionClass">
+        <KeyValue
+          key="labels"
+          :value="value.labels"
+          :protected-keys="value.systemLabels || []"
+          :toggle-filter="toggler"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :read-allowed="false"
+          :value-can-be-empty="true"
+          @input="value.setLabels($event)"
+        />
+      </div>
     </div>
     <div class="spacer" />
     <div :class="sectionClass">
@@ -84,6 +109,11 @@ export default {
   </div>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.labels {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -213,9 +213,9 @@ export default {
 </script>
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="cluster-permissions-editor"
+  <div
+    v-else
+    class="cluster-permissions-editor"
   >
     <div class="row mt-10">
       <div class="col span-12">
@@ -229,10 +229,10 @@ export default {
       </div>
     </div>
 
-    <Card
-      class="m-0"
-      :show-highlight-border="false"
-      :show-actions="false"
+    <Card
+      class="m-0"
+      :show-highlight-border="false"
+      :show-actions="false"
     >
       <template v-slot:title>
         <div class="type-title">
@@ -248,17 +248,17 @@ export default {
           :options="options"
           name="permission-group"
         />
-        <div
-          v-if="permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
+        <div
+          v-if="permissionGroup === 'custom'"
+          class="custom-permissions ml-20 mt-10"
+          :class="{'two-column': useTwoColumnsForCustom}"
         >
-          <Checkbox
-            v-for="permission in customPermissions"
-            :key="permission.key"
-            v-model="permission.value"
-            class="mb-5"
-            :label="permission.label"
+          <Checkbox
+            v-for="permission in customPermissions"
+            :key="permission.key"
+            v-model="permission.value"
+            class="mb-5"
+            :label="permission.label"
           />
         </div>
       </template>

package/components/form/Members/MembershipEditor.vue

@@ -138,9 +138,9 @@ export default {
   methods: {
     addMember() {
       this.$store.dispatch('cluster/promptModal', {
-        component:   this.addMemberDialogName,
-        resources:   [this.onAddMember],
-        modalSticky: this.modalSticky
+        component:      this.addMemberDialogName,
+        componentProps: { onAdd: this.onAddMember },
+        modalSticky:    this.modalSticky
       });
     },
 
@@ -173,9 +173,9 @@ export default {
     <template #columns="{row}">
       <div class="columns row">
         <div class="col span-6">
-          <Principal
-            :key="row.value.principalId"
-            :value="row.value.principalId"
+          <Principal
+            :key="row.value.principalId"
+            :value="row.value.principalId"
           />
         </div>
         <div class="col span-6 role">
@@ -194,12 +194,12 @@ export default {
     </template>
     <template #remove-button="{remove, i}">
       <span v-if="(isCreate && i === 0) || isView" />
-      <button
-        v-else
-        type="button"
-        :disabled="isView"
-        class="btn role-link"
-        @click="remove"
+      <button
+        v-else
+        type="button"
+        :disabled="isView"
+        class="btn role-link"
+        @click="remove"
       >
         {{ t('generic.remove') }}
       </button>

package/components/form/NameNsDescription.vue

@@ -405,7 +405,7 @@ export default {
       >
         <i
           v-tooltip="t('generic.cancel')"
-          class="icon icon-lg icon-close align-value"
+          class="icon icon-close align-value"
         />
       </button>
     </div>