@rancher/shell 0.1.0 → 0.1.1

package/components/form/Security.vue

@@ -1,6 +1,6 @@
 <script>
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { _VIEW } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
@@ -62,12 +62,27 @@ export default {
       'WAKE_ALARM'];
 
     const {
-      capabilities = {}, runAsRoot = true, readOnlyRootFilesystem = false, privileged = false, allowPrivilegeEscalation = true, runAsUser
+      capabilities = {},
+      runAsRoot = true,
+      readOnlyRootFilesystem = false,
+      privileged = false,
+      allowPrivilegeEscalation = true,
+      runAsUser
     } = this.value;
-    const { add = [], drop = [] } = capabilities;
+    const {
+      add = [],
+      drop = []
+    } = capabilities;
 
     return {
-      privileged, allowPrivilegeEscalation, allCapabilities, runAsRoot, readOnlyRootFilesystem, add, drop, runAsUser
+      privileged,
+      allowPrivilegeEscalation,
+      allCapabilities,
+      runAsRoot,
+      readOnlyRootFilesystem,
+      add,
+      drop,
+      runAsUser
     };
   },
 
@@ -105,10 +120,13 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <div>
       <div class="row">
-        <div class="col span-6">
+        <div
+          data-testid="input-security-privileged"
+          class="col span-6"
+        >
           <RadioGroup
             v-model="privileged"
             name="privileged"
@@ -119,7 +137,11 @@ export default {
             @input="update"
           />
         </div>
-        <div v-if="!privileged" class="col span-6">
+        <div
+          v-if="!privileged"
+          data-testid="input-security-allowPrivilegeEscalation"
+          class="col span-6"
+        >
           <RadioGroup
             v-model="allowPrivilegeEscalation"
             name="allowPrivilegeEscalation"
@@ -137,7 +159,10 @@ export default {
 
     <div>
       <div class="row">
-        <div class="col span-6">
+        <div
+          data-testid="input-security-runasNonRoot"
+          class="col span-6"
+        >
           <RadioGroup
             name="runasNonRoot"
             :label="t('workload.container.security.runAsNonRoot.label')"
@@ -148,7 +173,10 @@ export default {
             @input="e=>{runAsRoot = !e; update()}"
           />
         </div>
-        <div class="col span-6">
+        <div
+          data-testid="input-security-readOnlyRootFilesystem"
+          class="col span-6"
+        >
           <RadioGroup
             v-model="readOnlyRootFilesystem"
             name="readOnlyRootFilesystem"
@@ -163,14 +191,25 @@ export default {
     </div>
     <div class="spacer"></div>
 
-    <div class="row mb-10">
+    <div
+      data-testid="input-security-runAsUser"
+      class="row mb-10"
+    >
       <div class="col span-6">
-        <LabeledInput v-model.number="runAsUser" :label="t('workload.container.security.runAsUser')" :mode="mode" />
+        <LabeledInput
+          v-model.number="runAsUser"
+          :label="t('workload.container.security.runAsUser')"
+          :mode="mode"
+          @input="update"
+        />
       </div>
     </div>
 
     <div class="row">
-      <div class="col span-6">
+      <div
+        data-testid="input-security-add"
+        class="col span-6"
+      >
         <LabeledSelect
           v-model="add"
           :taggable="true"
@@ -183,7 +222,10 @@ export default {
           @input="update"
         />
       </div>
-      <div class="col span-6">
+      <div
+        data-testid="input-security-drop"
+        class="col span-6"
+      >
         <LabeledSelect
           v-model="drop"
           :close-on-select="false"

package/components/form/Select.vue

@@ -2,7 +2,7 @@
 import { get } from '@shell/utils/object';
 import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
-import LabeledTooltip from '@shell/components/form/LabeledTooltip';
+import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 
 export default {
@@ -33,10 +33,6 @@ export default {
       default: 'label',
       type:    String,
     },
-    options: {
-      default:   null,
-      type:      Array,
-    },
     placement: {
       default: null,
       type:    String,
@@ -69,10 +65,6 @@ export default {
       default: true,
     },
 
-    searchable: {
-      default: false,
-      type:    Boolean,
-    },
     status: {
       type:    String,
       default: null,
@@ -147,11 +139,51 @@ export default {
         return get(opt, opt.optionKey);
       }
 
-      return this.getOptionLabel(opt);
+      const label = this.getOptionLabel(opt);
+
+      // label may be type of object
+      if (typeof label === 'string' || typeof label === 'number') {
+        return label;
+      } else {
+        return Math.random(100000);
+      }
     },
     report(e) {
       alert(e);
     }
+  },
+  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'));
+    },
+    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 ruleMessages = [];
+      const value = this?.value;
+
+      if (requiredRule && this.blurred && !this.focused) {
+        const message = requiredRule(value);
+
+        if (!!message) {
+          return message;
+        }
+      }
+
+      for (const rule of this.rules) {
+        const message = rule(value);
+
+        if (!!message && rule.name !== 'required') { // we're catching 'required' above so we can ignore it here
+          ruleMessages.push(message);
+        }
+      }
+      if (ruleMessages.length > 0 && (this.blurred || this.focused)) {
+        return ruleMessages.join(', ');
+      } else {
+        return undefined;
+      }
+    }
   }
 };
 </script>
@@ -213,6 +245,11 @@ export default {
       :value="tooltip"
       :status="status"
     />
+    <LabeledTooltip
+      v-if="!!validationMessage"
+      :hover="hoverTooltip"
+      :value="validationMessage"
+    />
   </div>
 </template>
 
@@ -226,6 +263,11 @@ export default {
       }
     }
 
+    ::v-deep .labeled-tooltip.error .status-icon {
+      top: 7px;
+      right: 2px;
+    }
+
     ::v-deep .vs__selected-options {
       display: flex;
 

package/components/form/SelectOrCreateAuthSecret.vue

@@ -1,20 +1,17 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
 import Loading from '@shell/components/Loading';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { NORMAN, SECRET } from '@shell/config/types';
+import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
 import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 
-const _NONE = '_none';
-const _BASIC = '_basic';
-const _SSH = '_ssh';
-const _S3 = '_S3';
-
 export default {
+  name: 'SelectOrCreateAuthSecret',
+
   components: {
     Loading,
     LabeledInput,
@@ -27,6 +24,11 @@ export default {
       default: _EDIT,
     },
 
+    preSelect: {
+      type:    Object,
+      default: null,
+    },
+
     value: {
       type:    [String, Object],
       default: null,
@@ -106,6 +108,19 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    /**
+     * This component is used in MultiStep Priocess
+     * So when user click through to final step and submit the form
+     * This component get recreated therefore register `doCreate` as a hook each time
+     * Also, the parent step component is not aware that credential is created
+     *
+     * This property is implement to prevent this issue and delegate it to parent component.
+     */
+    delegateCreateToParent: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   async fetch() {
@@ -131,7 +146,12 @@ export default {
       this.allCloudCreds = [];
     }
 
-    let selected = _NONE;
+    let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
+
+    if ( !this.value ) {
+      this.publicKey = this.preSelect?.publicKey || '';
+      this.privateKey = this.preSelect?.privateKey || '';
+    }
 
     if ( this.value ) {
       if ( typeof this.value === 'object' ) {
@@ -164,15 +184,15 @@ export default {
 
   computed: {
     _SSH() {
-      return _SSH;
+      return AUTH_TYPE._SSH;
     },
 
     _BASIC() {
-      return _BASIC;
+      return AUTH_TYPE._BASIC;
     },
 
     _S3() {
-      return _S3;
+      return AUTH_TYPE._S3;
     },
 
     options() {
@@ -211,7 +231,7 @@ export default {
           return true;
         }).map((x) => {
           return {
-            label: `${ x.metadata.name } (${ x.subTypeDisplay })`,
+            label: `${ x.metadata.name } (${ x.subTypeDisplay }: ${ x.dataPreview })`,
             group: x.metadata.namespace,
             value: x.id,
           };
@@ -263,28 +283,28 @@ export default {
       if ( this.allowSsh ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
-          value: _SSH,
+          value: AUTH_TYPE._SSH,
         });
       }
 
       if ( this.allowS3 ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createS3'),
-          value: _S3,
+          value: AUTH_TYPE._S3,
         });
       }
 
       if ( this.allowBasic ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createBasic'),
-          value: _BASIC,
+          value: AUTH_TYPE._BASIC,
         });
       }
 
       if ( this.allowNone ) {
         out.unshift({
           label: this.t('generic.none'),
-          value: _NONE,
+          value: AUTH_TYPE._NONE,
         });
       }
 
@@ -296,7 +316,7 @@ export default {
         return '';
       }
 
-      if ( this.selected === _SSH || this.selected === _BASIC || this.selected === _S3 ) {
+      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._S3 ) {
         return 'col span-4';
       }
 
@@ -313,11 +333,13 @@ export default {
   },
 
   watch: {
-    selected: 'update',
+    selected:   'update',
+    publicKey:  'updateKeyVal',
+    privateKey: 'updateKeyVal',
 
     namespace(ns) {
       if ( ns && !this.selected.startsWith(`${ ns }/`) ) {
-        this.selected = _NONE;
+        this.selected = AUTH_TYPE._NONE;
       }
     }
   },
@@ -326,15 +348,30 @@ export default {
     if (this.registerBeforeHook) {
       const hookName = this.appendUniqueIdToHook ? this.hookName + this.uniqueId : this.hookName;
 
-      this.registerBeforeHook(this.doCreate, hookName, this.hookPriority);
+      if (!this.delegateCreateToParent) {
+        this.registerBeforeHook(this.doCreate, hookName, this.hookPriority);
+      }
     } else {
       throw new Error('Before Hook is missing');
     }
   },
 
   methods: {
+    updateKeyVal() {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected)) {
+        this.privateKey = '';
+        this.publicKey = '';
+      }
+
+      this.$emit('inputauthval', {
+        selected:   this.selected,
+        privateKey: this.privateKey,
+        publicKey:  this.publicKey
+      });
+    },
+
     update() {
-      if ( !this.selected || [_SSH, _BASIC, _S3, _NONE].includes(this.selected) ) {
+      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._NONE].includes(this.selected))) {
         this.$emit('input', null);
       } else if ( this.selected.includes(':') ) {
         // Cloud creds
@@ -353,16 +390,18 @@ export default {
           this.$emit('input', out);
         }
       }
+
+      this.updateKeyVal();
     },
 
     async doCreate() {
-      if ( ![_SSH, _BASIC, _S3].includes(this.selected) ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) || this.delegateCreateToParent ) {
         return;
       }
 
       let secret;
 
-      if ( this.selected === _S3 ) {
+      if ( this.selected === AUTH_TYPE._S3 ) {
         secret = await this.$store.dispatch(`rancher/create`, {
           type:               NORMAN.CLOUD_CREDENTIAL,
           s3credentialConfig: {
@@ -382,12 +421,12 @@ export default {
         let type, publicField, privateField;
 
         switch ( this.selected ) {
-        case _SSH:
+        case AUTH_TYPE._SSH:
           type = SECRET_TYPES.SSH;
           publicField = 'ssh-publickey';
           privateField = 'ssh-privatekey';
           break;
-        case _BASIC:
+        case AUTH_TYPE._BASIC:
           type = SECRET_TYPES.BASIC;
           publicField = 'username';
           privateField = 'password';
@@ -442,26 +481,26 @@ export default {
       </div>
       <template v-if="selected === _SSH">
         <div :class="moreCols">
-          <LabeledInput v-model="publicKey" type="multiline" label-key="selectOrCreateAuthSecret.ssh.publicKey" />
+          <LabeledInput v-model="publicKey" :mode="mode" type="multiline" label-key="selectOrCreateAuthSecret.ssh.publicKey" />
         </div>
         <div :class="moreCols">
-          <LabeledInput v-model="privateKey" type="multiline" label-key="selectOrCreateAuthSecret.ssh.privateKey" />
+          <LabeledInput v-model="privateKey" :mode="mode" type="multiline" label-key="selectOrCreateAuthSecret.ssh.privateKey" />
         </div>
       </template>
       <template v-else-if="selected === _BASIC">
         <div :class="moreCols">
-          <LabeledInput v-model="publicKey" label-key="selectOrCreateAuthSecret.basic.username" />
+          <LabeledInput v-model="publicKey" :mode="mode" label-key="selectOrCreateAuthSecret.basic.username" />
         </div>
         <div :class="moreCols">
-          <LabeledInput v-model="privateKey" type="password" label-key="selectOrCreateAuthSecret.basic.password" />
+          <LabeledInput v-model="privateKey" :mode="mode" type="password" label-key="selectOrCreateAuthSecret.basic.password" />
         </div>
       </template>
       <template v-else-if="selected === _S3">
         <div :class="moreCols">
-          <LabeledInput v-model="publicKey" label-key="selectOrCreateAuthSecret.s3.accessKey" />
+          <LabeledInput v-model="publicKey" :mode="mode" label-key="selectOrCreateAuthSecret.s3.accessKey" />
         </div>
         <div :class="moreCols">
-          <LabeledInput v-model="privateKey" type="password" label-key="selectOrCreateAuthSecret.s3.secretKey" />
+          <LabeledInput v-model="privateKey" :mode="mode" type="password" label-key="selectOrCreateAuthSecret.s3.secretKey" />
         </div>
       </template>
     </div>

package/components/form/ServiceNameSelect.vue

@@ -1,7 +1,7 @@
 <script>
 import labeledFormElement from '@shell/mixins/labeled-form-element';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {

package/components/form/ServicePorts.vue

@@ -4,9 +4,10 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
 import Select from '@shell/components/form/Select';
+import Error from '@shell/components/form/Error';
 
 export default {
-  components: { Select },
+  components: { Select, Error },
   props:      {
     value: {
       type:    Array,
@@ -27,6 +28,12 @@ export default {
     autoAddIfEmpty: {
       type:    Boolean,
       default: true,
+    },
+    rules: {
+      default:   () => [],
+      type:      Array,
+      // we only want functions in the rules array
+      validator: rules => rules.every(rule => ['function'].includes(typeof rule))
     }
   },
 
@@ -182,7 +189,7 @@ export default {
           <span v-if="isView">{{ row.targetPort }}</span>
           <input
             v-else
-            v-model.number="row.targetPort"
+            v-model="row.targetPort"
             :placeholder="t('servicePorts.rules.target.placeholder')"
             @input="queueUpdate"
           />
@@ -204,6 +211,7 @@ export default {
             <t k="generic.remove" />
           </button>
         </div>
+        <Error :value="{...row, idx}" :rules="rules" />
       </div>
     </div>
     <div v-if="showAdd" class="footer">

package/components/form/ShellInput.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/components/form/SimpleSecretSelector.vue

@@ -135,7 +135,7 @@ export default {
         :options="secretNames"
         :label="secretNameLabel"
         :mode="mode"
-        @input="updateSecretName(name)"
+        @selecting="updateSecretName(name)"
       />
       <LabeledSelect
         v-model="key"
@@ -144,7 +144,7 @@ export default {
         :options="keys"
         :label="keyNameLabel"
         :mode="mode"
-        @input="updateSecretKey(key)"
+        @selecting="updateSecretKey(key)"
       />
     </div>
   </div>

package/components/form/Tolerations.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Select from '@shell/components/form/Select';
 import UnitInput from '@shell/components/form/UnitInput';
 import { _VIEW } from '@shell/config/query-params';

package/components/form/UnitInput.vue

@@ -1,6 +1,6 @@
 <script>
 import { parseSi, formatSi, UNITS, FRACTIONAL } from '@shell/utils/units';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { _EDIT } from '@shell/config/query-params';
 
 export default {
@@ -125,7 +125,7 @@ export default {
      */
     delay: {
       type:    Number,
-      default: 500
+      default: 0
     }
   },
 
@@ -183,6 +183,14 @@ export default {
   },
 
   methods: {
+    focus() {
+      const comp = this.$refs.value;
+
+      if (comp) {
+        comp.focus();
+      }
+    },
+
     update(inputValue) {
       let out = inputValue === '' ? null : inputValue;
 
@@ -202,6 +210,7 @@ export default {
 
 <template>
   <LabeledInput
+    ref="value"
     :value="displayValue"
     v-bind="$attrs"
     type="number"
@@ -215,7 +224,7 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
-    @input="update($event)"
+    @blur="update($event.target.value)"
   >
     <template #suffix>
       <div

package/components/form/ValueFromResource.vue

@@ -3,7 +3,7 @@ import { CONFIG_MAP, SECRET, NAMESPACE } from '@shell/config/types';
 import { get } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: {

package/components/form/WorkloadPorts.vue

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt, findBy } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';