@rancher/shell 0.2.3 → 0.2.4

package/edit/management.cattle.io.fleetworkspace.vue

@@ -68,9 +68,16 @@ export default {
     @finish="save"
     @cancel="done"
   >
-    <NameNsDescription v-model="value" :mode="mode" :namespaced="false" />
+    <NameNsDescription
+      v-model="value"
+      :mode="mode"
+      :namespaced="false"
+    />
 
-    <Tabbed :side-tabs="true" default-tab="members">
+    <Tabbed
+      :side-tabs="true"
+      default-tab="members"
+    >
       <!-- <Tab name="members" label-key="generic.members" :weight="2">
         <RoleBindings
           ref="rb"
@@ -84,8 +91,14 @@ export default {
         />
       </Tab> -->
 
-      <Tab name="labels" label-key="generic.labelsAndAnnotations">
-        <Labels v-model="value" :mode="mode" />
+      <Tab
+        name="labels"
+        label-key="generic.labelsAndAnnotations"
+      >
+        <Labels
+          v-model="value"
+          :mode="mode"
+        />
       </Tab>
     </Tabbed>
   </CruResource>

package/edit/management.cattle.io.project.vue

@@ -201,6 +201,7 @@ export default {
   >
     <NameNsDescription
       v-model="value"
+      :name-editable="true"
       :mode="mode"
       :namespaced="false"
       description-key="spec.description"
@@ -257,7 +258,12 @@ export default {
         :label="resourceQuotaLabel"
         :weight="8"
       >
-        <ContainerResourceLimit v-model="value.spec.containerDefaultResourceLimit" :mode="canEditTabElements" :show-tip="false" :register-before-hook="registerBeforeHook" />
+        <ContainerResourceLimit
+          v-model="value.spec.containerDefaultResourceLimit"
+          :mode="canEditTabElements"
+          :show-tip="false"
+          :register-before-hook="registerBeforeHook"
+        />
       </Tab>
       <Tab
         name="labels-and-annotations"

package/edit/management.cattle.io.roletemplate.vue

@@ -4,5 +4,8 @@ import RoleDetailEdit from '@shell/components/auth/RoleDetailEdit';
 export default { components: { RoleDetailEdit } };
 </script>
 <template>
-  <RoleDetailEdit v-bind="$attrs" @set-subtype="$emit('set-subtype', $event)" />
+  <RoleDetailEdit
+    v-bind="$attrs"
+    @set-subtype="$emit('set-subtype', $event)"
+  />
 </template>

package/edit/management.cattle.io.setting.vue

@@ -4,10 +4,13 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
+import formRulesGenerator from '@shell/utils/validators/formRules/index';
 
 import { ALLOWED_SETTINGS, SETTING } from '@shell/config/settings';
 import { RadioGroup } from '@components/Form/Radio';
+import FormValidation from '@shell/mixins/form-validation';
 import { setBrand } from '@shell/config/private-label';
+import { keyBy, mapValues } from 'lodash';
 
 export default {
   components: {
@@ -18,39 +21,53 @@ export default {
     TextAreaAutoGrow
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   data() {
     const t = this.$store.getters['i18n/t'];
-    const setting = ALLOWED_SETTINGS[this.value.id];
 
-    let enumOptions = [];
-
-    if (setting.kind === 'enum' ) {
-      enumOptions = setting.options.map(id => ({
-        label: `advancedSettings.enum.${ this.value.id }.${ id }`,
-        value: id,
-      }));
-    }
-
-    const canReset = setting.canReset || !!this.value.default;
+    return {
+      setting:        ALLOWED_SETTINGS[this.value.id],
+      description:    t(`advancedSettings.descriptions.${ this.value.id }`),
+      editHelp:       t(`advancedSettings.editHelp.${ this.value.id }`),
+      enumOptions:    [],
+      canReset:       false,
+      errors:         [],
+      fvFormRuleSets: [],
+    };
+  },
 
+  created() {
     this.value.value = this.value.value || this.value.default;
+    this.enumOptions = this.setting?.kind === 'enum' ? this.setting.options.map(id => ({
+      label: `advancedSettings.enum.${ this.value.id }.${ id }`,
+      value: id,
+    })) : [];
+    this.canReset = this.setting?.canReset || !!this.value.default;
+    this.fvFormRuleSets = this.setting?.ruleSet ? [{
+      path:  'value',
+      rules: this.setting.ruleSet.map(({ name }) => name)
+    }] : [];
+  },
 
-    return {
-      setting,
-      description: t(`advancedSettings.descriptions.${ this.value.id }`),
-      editHelp:    t(`advancedSettings.editHelp.${ this.value.id }`),
-      enumOptions,
-      canReset,
-      errors:      [],
-    };
+  computed: {
+    fvExtraRules() {
+      const t = this.$store.getters['i18n/t'];
+
+      // We map the setting rulesets to use values to define validation from factory
+      return this.setting?.ruleSet ? mapValues(
+        keyBy(this.setting.ruleSet, 'name'),
+        ({ key, name, arg }) => {
+          return formRulesGenerator(t, key ? { key } : {})[name](arg);
+        }) : {};
+    }
   },
 
-  methods: {
+  methods:  {
     convertToString(event) {
       this.value.value = `${ event.target.value }`;
     },
+
     saveSettings(done) {
       const t = this.$store.getters['i18n/t'];
 
@@ -88,22 +105,32 @@ export default {
   <CruResource
     class="route"
     :done-route="'c-cluster-product-resource'"
-    :errors="errors"
+    :errors="fvUnreportedValidationErrors"
     :mode="mode"
     :resource="value"
     :subtypes="[]"
     :can-yaml="false"
+    :validation-passed="fvFormIsValid"
     @error="e=>errors = e"
     @finish="saveSettings"
     @cancel="done"
   >
     <h4>{{ description }}</h4>
 
-    <h5 v-if="editHelp" class="edit-help" v-html="editHelp" />
+    <h5
+      v-if="editHelp"
+      class="edit-help"
+      v-html="editHelp"
+    />
 
     <div class="edit-change mt-20">
       <h5 v-t="'advancedSettings.edit.changeSetting'" />
-      <button :disabled="!canReset" type="button" class="btn role-primary" @click="useDefault">
+      <button
+        :disabled="!canReset"
+        type="button"
+        class="btn role-primary"
+        @click="useDefault"
+      >
         {{ t('advancedSettings.edit.useDefault') }}
       </button>
     </div>
@@ -112,16 +139,21 @@ export default {
       <div v-if="setting.kind === 'enum'">
         <LabeledSelect
           v-model="value.value"
+          data-testid="input-setting-enum"
           :label="t('advancedSettings.edit.value')"
+          :rules="fvGetAndReportPathRules('value')"
           :localized-label="true"
           :mode="mode"
+          :required="true"
           :options="enumOptions"
         />
       </div>
       <div v-else-if="setting.kind === 'boolean'">
         <RadioGroup
           v-model="value.value"
+          data-testid="input-setting-boolean"
           name="settings_value"
+          :rules="fvGetAndReportPathRules('value')"
           :labels="[t('advancedSettings.edit.trueOption'), t('advancedSettings.edit.falseOption')]"
           :options="['true', 'false']"
         />
@@ -129,22 +161,31 @@ export default {
       <div v-else-if="setting.kind === 'multiline' || setting.kind === 'json'">
         <TextAreaAutoGrow
           v-model="value.value"
-          v-focus
+          data-testid="input-setting-json"
+          :required="true"
+          :rules="fvGetAndReportPathRules('value')"
           :min-height="254"
         />
       </div>
       <div v-else-if="setting.kind === 'integer'">
-        <input
-          :value="parseInt(value.value, 10)"
+        <LabeledInput
+          v-model="value.value"
+          data-testid="input-setting-integer"
+          :label="t('advancedSettings.edit.value')"
+          :mode="mode"
           type="number"
-          min="0"
-          @input="convertToString($event)"
+          :rules="fvGetAndReportPathRules('value')"
+          :required="true"
         />
       </div>
       <div v-else>
         <LabeledInput
           v-model="value.value"
-          v-focus
+          data-testid="input-setting-generic"
+          :localized-label="true"
+          :required="true"
+          :mode="mode"
+          :rules="fvGetAndReportPathRules('value')"
           :label="t('advancedSettings.edit.value')"
         />
       </div>

package/edit/management.cattle.io.user.vue

@@ -236,7 +236,10 @@ export default {
         @valid="validation.password = $event"
       />
     </div>
-    <div v-if="showGlobalRoles" class="global-permissions">
+    <div
+      v-if="showGlobalRoles"
+      class="global-permissions"
+    >
       <GlobalRoleBindings
         ref="grb"
         :user-id="value.id || liveValue.id"

package/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue

@@ -252,7 +252,10 @@ export default {
         />
       </div>
     </div>
-    <div v-if="authType === 'basicAuth'" class="row mb-20">
+    <div
+      v-if="authType === 'basicAuth'"
+      class="row mb-20"
+    >
       <SimpleSecretSelector
         v-if="namespace"
         :initial-key="initialBasicAuthUsernameSecretKey"
@@ -266,11 +269,17 @@ export default {
         @updateSecretName="updateBasicAuthUsernameSecretName"
         @updateSecretKey="updateBasicAuthUsernameSecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
-    <div v-if="authType === 'basicAuth'" class="row mb-20">
+    <div
+      v-if="authType === 'basicAuth'"
+      class="row mb-20"
+    >
       <SimpleSecretSelector
         v-if="namespace"
         :initial-key="initialBasicAuthPasswordSecretKey"
@@ -284,11 +293,17 @@ export default {
         @updateSecretName="updateBasicAuthPasswordSecretName"
         @updateSecretKey="updateBasicAuthPasswordSecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
-    <div v-if="authType === 'bearerTokenSecret'" class="row mb-20">
+    <div
+      v-if="authType === 'bearerTokenSecret'"
+      class="row mb-20"
+    >
       <SimpleSecretSelector
         v-if="namespace"
         :initial-key="initialBearerTokenSecretKey"
@@ -302,7 +317,10 @@ export default {
         @updateSecretName="updateBearerTokenSecretName"
         @updateSecretKey="updateBearerTokenSecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -191,13 +191,29 @@ export default {
     @finish="save"
     @cancel="done"
   >
-    <NameNsDescription v-model="value" :mode="mode" :namespaced="isNamespaced" />
+    <NameNsDescription
+      v-model="value"
+      :mode="mode"
+      :namespaced="isNamespaced"
+    />
 
     <Tabbed>
-      <Tab :label="t('monitoring.route.label')" :weight="1" name="route">
-        <RouteConfig :value="value.spec.route" :mode="mode" :receiver-options="receiverOptions" />
+      <Tab
+        :label="t('monitoring.route.label')"
+        :weight="1"
+        name="route"
+      >
+        <RouteConfig
+          :value="value.spec.route"
+          :mode="mode"
+          :receiver-options="receiverOptions"
+        />
       </Tab>
-      <Tab :label="t('alertmanagerConfigReceiver.receivers')" :weight="2" name="receivers">
+      <Tab
+        :label="t('alertmanagerConfigReceiver.receivers')"
+        :weight="2"
+        name="receivers"
+      >
         <ResourceTable
           :headers="receiverTableHeaders"
           :schema="receiverSchema"
@@ -208,7 +224,10 @@ export default {
           @clickedActionButton="setActionMenuState"
         >
           <template #header-button>
-            <nuxt-link v-if="createReceiverLink && createReceiverLink.name" :to="createReceiverLink">
+            <nuxt-link
+              v-if="createReceiverLink && createReceiverLink.name"
+              :to="mode !== create ? createReceiverLink : {}"
+            >
               <button
                 class="btn role-primary"
                 :disabled="mode === create"

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -255,22 +255,45 @@ export default {
   >
     <div class="row mb-10">
       <div class="col span-6">
-        <LabeledInput v-model="value.name" :is-disabled="receiverNameDisabled" :label="t('generic.name')" :mode="mode" />
+        <LabeledInput
+          v-model="value.name"
+          :is-disabled="receiverNameDisabled"
+          :label="t('generic.name')"
+          :mode="mode"
+        />
       </div>
     </div>
-    <Tabbed ref="tabbed" :side-tabs="true" default-tab="overview" @changed="tabChanged">
-      <Tab :label="t('generic.overview')" :weight="receiverTypes.length" name="overview">
+    <Tabbed
+      ref="tabbed"
+      :side-tabs="true"
+      default-tab="overview"
+      @changed="tabChanged"
+    >
+      <Tab
+        :label="t('generic.overview')"
+        :weight="receiverTypes.length"
+        name="overview"
+      >
         <div class="box-container create-resource-container ">
-          <div v-for="(receiverType, i) in receiverTypes" :key="i" class="mb-10 subtype-banner" primary-color-var="--primary-color" @click="navigateTo(receiverType)">
+          <div
+            v-for="(receiverType, i) in receiverTypes"
+            :key="i"
+            class="mb-10 subtype-banner"
+            primary-color-var="--primary-color"
+            @click="navigateTo(receiverType)"
+          >
             <div class="left">
               <div class="logo">
-                <img :src="receiverType.logo" />
+                <img :src="receiverType.logo">
               </div>
               <h4 class="name ml-10">
                 <t :k="receiverType.label" />
               </h4>
             </div>
-            <div v-if="receiverType.name !== 'custom'" class="right">
+            <div
+              v-if="receiverType.name !== 'custom'"
+              class="right"
+            >
               {{ getCount(receiverType) }}
             </div>
           </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/tls.vue

@@ -206,7 +206,10 @@ export default {
         @updateSecretName="updateCaSecretName"
         @updateSecretKey="updateCaSecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
@@ -225,7 +228,10 @@ export default {
         @updateSecretName="updateClientCertSecretName"
         @updateSecretKey="updateClientCertSecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
@@ -244,7 +250,10 @@ export default {
         @updateSecretName="updateClientKeySecretName"
         @updateSecretKey="updateClientKeySecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/types/email.vue

@@ -83,10 +83,20 @@ export default {
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput v-model="value.to" :mode="mode" label="Default Recipient Address" placeholder="e.g. admin@example.com" />
+        <LabeledInput
+          v-model="value.to"
+          :mode="mode"
+          label="Default Recipient Address"
+          placeholder="e.g. admin@example.com"
+        />
       </div>
       <div class="col span-6">
-        <Checkbox v-model="value.sendResolved" :mode="mode" class="mt-20" label="Enable send resolved alerts" />
+        <Checkbox
+          v-model="value.sendResolved"
+          :mode="mode"
+          class="mt-20"
+          label="Enable send resolved alerts"
+        />
       </div>
     </div>
     <h2 class="mb-10">
@@ -94,20 +104,43 @@ export default {
     </h2>
     <div class="row mb-20">
       <div class="col span-12">
-        <LabeledInput v-model="value.from" :mode="mode" label="Sender" placeholder="e.g. admin@example.com" />
+        <LabeledInput
+          v-model="value.from"
+          :mode="mode"
+          label="Sender"
+          placeholder="e.g. admin@example.com"
+        />
       </div>
     </div>
     <div class="row mb-20">
       <div class="col span-6">
-        <LabeledInput v-model="value.smarthost" :mode="mode" label="Host" placeholder="e.g. 192.168.1.121:587" />
+        <LabeledInput
+          v-model="value.smarthost"
+          :mode="mode"
+          label="Host"
+          placeholder="e.g. 192.168.1.121:587"
+        />
       </div>
       <div class="col span-6">
-        <Checkbox v-model="value.requireTls" :mode="mode" class="mt-20" label="Use TLS" />
+        <Checkbox
+          v-model="value.requireTls"
+          :mode="mode"
+          class="mt-20"
+          label="Use TLS"
+        />
       </div>
     </div>
-    <div v-if="namespace" class="row mb-20">
+    <div
+      v-if="namespace"
+      class="row mb-20"
+    >
       <div class="col span-6">
-        <LabeledInput v-model="value.authUsername" :mode="mode" :label="t('monitoring.alertmanagerConfig.email.username')" placeholder="e.g. John" />
+        <LabeledInput
+          v-model="value.authUsername"
+          :mode="mode"
+          :label="t('monitoring.alertmanagerConfig.email.username')"
+          placeholder="e.g. John"
+        />
       </div>
     </div>
     <div class="row mb-20">
@@ -122,10 +155,18 @@ export default {
         @updateSecretName="updateAuthPasswordSecretName"
         @updateSecretKey="updateAuthPasswordSecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t('alertmanagerConfigReceiver.namespaceWarning') }}
       </Banner>
     </div>
-    <TLS v-model="value" class="mb-20" :mode="mode" :namespace="namespace" />
+    <TLS
+      v-model="value"
+      class="mb-20"
+      :mode="mode"
+      :namespace="namespace"
+    />
   </div>
 </template>

package/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue

@@ -180,25 +180,45 @@ export default {
         @updateSecretName="updateApiKeySecretName"
         @updateSecretKey="updateApiKeySecretKey"
       />
-      <Banner v-else color="error">
+      <Banner
+        v-else
+        color="error"
+      >
         {{ t('alertmanagerConfigReceiver.namespaceWarning') }}
       </Banner>
     </div>
     <div class="row mb-20">
       <div class="col span-12">
-        <LabeledInput v-model="value.httpConfig.proxyUrl" :mode="mode" label="Proxy URL" placeholder="e.g. http://my-proxy/" />
+        <LabeledInput
+          v-model="value.httpConfig.proxyUrl"
+          :mode="mode"
+          label="Proxy URL"
+          placeholder="e.g. http://my-proxy/"
+        />
       </div>
     </div>
     <div class="row mb-20">
-      <Checkbox v-model="value.sendResolved" :mode="mode" label="Enable send resolved alerts" />
+      <Checkbox
+        v-model="value.sendResolved"
+        :mode="mode"
+        label="Enable send resolved alerts"
+      />
     </div>
     <div class="row">
       <div class="col span-12">
         <h3>Responders</h3>
-        <ArrayList v-model="responders" :mode="mode" :default-add-value="defaultResponder" :show-header="true">
+        <ArrayList
+          v-model="responders"
+          :mode="mode"
+          :default-add-value="defaultResponder"
+          :show-header="true"
+        >
           <template v-slot:column-headers>
             <div class="responders-heading">
-              <div class="row" :class="{'mb-15': isView, 'mb-10': !isView}">
+              <div
+                class="row"
+                :class="{'mb-15': isView, 'mb-10': !isView}"
+              >
                 <div class="col span-6">
                   <span class="text-label">Type</span>
                 </div>
@@ -212,7 +232,12 @@ export default {
             <div class="row responder">
               <div class="col span-6">
                 <span v-if="isView">{{ typeLabel(scope.row.value.type) }}</span>
-                <Select v-else v-model="scope.row.value.type" :mode="mode" :options="TYPES" />
+                <Select
+                  v-else
+                  v-model="scope.row.value.type"
+                  :mode="mode"
+                  :options="TYPES"
+                />
               </div>
               <div class="col-span-6 target-container">
                 <span v-if="isView">{{ targetLabel(scope.row.value.target) }}: {{ scope.row.value.value }}</span>