@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/edit/auth/saml.vue

@@ -1,4 +1,9 @@
 <script>
+import { ref, computed, provide } from 'vue';
+import { useStore } from 'vuex';
+import { useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import * as z from 'zod';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
@@ -12,6 +17,8 @@ import AuthBanner from '@shell/components/auth/AuthBanner';
 import config, { OKTA, SHIBBOLETH } from '@shell/edit/auth/ldap/config';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { RcButton } from '@components/RcButton';
+import { useI18n } from '@shell/composables/useI18n';
 
 // Standard LDAP defaults
 const LDAP_DEFAULTS = {
@@ -47,10 +54,48 @@ export default {
     FileSelector,
     config,
     AuthBanner,
-    AuthProviderWarningBanners
+    AuthProviderWarningBanners,
+    RcButton,
   },
 
   mixins: [CreateEditView, AuthConfig],
+
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    const coerce = (schema) => z.preprocess((v) => v ?? '', schema);
+    const requiredField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })));
+    const requiredUrlField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })).url(t('validation.genericUrl')));
+
+    const validationSchema = computed(() => toTypedSchema(
+      z.object({
+        displayNameField:   requiredField('authConfig.saml.displayName'),
+        userNameField:      requiredField('authConfig.saml.userName'),
+        uidField:           requiredField('authConfig.saml.UID'),
+        groupsField:        requiredField('authConfig.saml.groups'),
+        rancherApiHost:     requiredUrlField('authConfig.saml.api'),
+        spKey:              requiredField('authConfig.saml.key.label'),
+        spCert:             requiredField('authConfig.saml.cert.label'),
+        idpMetadataContent: requiredField('authConfig.saml.metadata.label'),
+      })
+    ));
+
+    const showAllErrors = ref(false);
+
+    provide('vee-show-all-errors', showAllErrors);
+
+    const { errors, validate } = useForm({ validationSchema });
+    const isFormValid = computed(() => Object.keys(errors.value).length === 0);
+
+    const validateAllFields = async() => {
+      await validate();
+      showAllErrors.value = true;
+    };
+
+    return { isFormValid, validateAllFields };
+  },
+
   data() {
     return {
       showLdap:        false,
@@ -58,7 +103,19 @@ export default {
     };
   },
 
+  created() {
+    this.registerBeforeHook(this.validateAllFields, 'willSave');
+  },
+
   computed: {
+    validationPassed() {
+      if (this.model?.enabled && !this.editConfig) {
+        return true;
+      }
+
+      return this.isFormValid;
+    },
+
     tArgs() {
       return {
         baseUrl:  this.serverSetting,
@@ -152,7 +209,7 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="true"
+      :validation-passed="validationPassed"
       :finish-button-mode="model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
@@ -193,13 +250,17 @@ export default {
               >
                 <div>{{ t('authConfig.saml.search.on') }}</div>
                 <div>
-                  <a
-                    class="toggle-btn"
+                  <rc-button
+                    variant="link"
                     @click="showLdapDetails = !showLdapDetails"
                   >
-                    <template v-if="showLdapDetails">{{ t('authConfig.saml.search.hide') }}</template>
-                    <template v-else>{{ t('authConfig.saml.search.show') }}</template>
-                  </a>
+                    <template v-if="showLdapDetails">
+                      {{ t('authConfig.saml.search.hide') }}
+                    </template>
+                    <template v-else>
+                      {{ t('authConfig.saml.search.show') }}
+                    </template>
+                  </rc-button>
                 </div>
               </div>
             </Banner>
@@ -244,6 +305,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.displayNameField"
+              name="displayNameField"
               :label="t(`authConfig.saml.displayName`)"
               :mode="mode"
               required
@@ -252,6 +314,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.userNameField"
+              name="userNameField"
               :label="t(`authConfig.saml.userName`)"
               :mode="mode"
               required
@@ -263,6 +326,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.uidField"
+              name="uidField"
               :label="t(`authConfig.saml.UID`)"
               :mode="mode"
               required
@@ -271,6 +335,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.groupsField"
+              name="groupsField"
               :label="t(`authConfig.saml.groups`)"
               :mode="mode"
               required
@@ -292,6 +357,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.rancherApiHost"
+              name="rancherApiHost"
               :label="t(`authConfig.saml.api`)"
               :mode="mode"
               required
@@ -303,6 +369,7 @@ export default {
           <div class="col span-4">
             <LabeledInput
               v-model:value="model.spKey"
+              name="spKey"
               :label="t(`authConfig.saml.key.label`)"
               :placeholder="t(`authConfig.saml.key.placeholder`)"
               :mode="mode"
@@ -319,6 +386,7 @@ export default {
           <div class="col span-4">
             <LabeledInput
               v-model:value="model.spCert"
+              name="spCert"
               :label="t(`authConfig.saml.cert.label`)"
               :placeholder="t(`authConfig.saml.cert.placeholder`)"
               :mode="mode"
@@ -335,6 +403,7 @@ export default {
           <div class="col span-4">
             <LabeledInput
               v-model:value="model.idpMetadataContent"
+              name="idpMetadataContent"
               :label="t(`authConfig.saml.metadata.label`)"
               :placeholder="t(`authConfig.saml.metadata.placeholder`)"
               :mode="mode"
@@ -423,10 +492,5 @@ export default {
     > :first-child {
       flex: 1;
     }
-
-    .toggle-btn {
-      cursor: pointer;
-      user-select: none;
-    }
   }
 </style>

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
 import CreateEditView from '@shell/mixins/create-edit-view';
 import AsyncButton from '@shell/components/AsyncButton.vue';
-import Footer from '@shell/components/form/Footer';
+import Footer from '@shell/components/form/Footer.vue';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import NameNsDescription from '@shell/components/form/NameNsDescription';
-import Labels from '@shell/components/form/Labels';
-import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+import Labels from '@shell/components/form/Labels.vue';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
 import Banner from '@components/Banner/Banner.vue';
 import { Checkbox } from '@components/Form/Checkbox';
 import {
@@ -13,11 +13,14 @@ import {
   CLUSTER_REPO_APPCO_AUTH_GENERATE_NAME, CLUSTER_REPO_AUTH_GENERATE_NAME
 } from '@shell/config/types';
 import UnitInput from '@shell/components/form/UnitInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { getVersionData } from '@shell/config/version';
+import { SECONDS_PER, secondsToLargestUnit } from '@shell/utils/duration';
 import { RcItemCard } from '@components/RcItemCard';
-import { _CREATE, _EDIT, TARGET, _VIEW } from '@shell/config/query-params';
+import { _CREATE, _EDIT, TARGET, _VIEW } from '@shell/config/query-params.js';
 import { RcIconType } from '@components/RcIcon/types';
 import { requireAsset } from '@shell/utils/require-asset';
+import formRulesGenerator from '@shell/utils/validators/formRules';
 
 export default {
   name: 'CruCatalogRepo',
@@ -34,6 +37,7 @@ export default {
     Banner,
     Checkbox,
     UnitInput,
+    LabeledSelect,
     RcItemCard,
   },
 
@@ -82,6 +86,19 @@ export default {
       });
     }
 
+    const storedInterval = this.value.spec.refreshInterval;
+    const refreshEnabled = storedInterval === undefined || storedInterval >= 0;
+
+    let refreshDisplayValue: number | null = null;
+    let refreshUnit: number = SECONDS_PER.h;
+
+    if (storedInterval && storedInterval > 0) {
+      const parsed = secondsToLargestUnit(storedInterval);
+
+      refreshDisplayValue = parsed.value;
+      refreshUnit = parsed.unit;
+    }
+
     return {
       CLUSTER_REPO_TYPES,
       AUTH_TYPE,
@@ -97,6 +114,9 @@ export default {
       clusterRepoTargets,
       previousName:        '',
       previousDescription: '',
+      refreshEnabled,
+      refreshDisplayValue,
+      refreshUnit,
     };
   },
 
@@ -114,6 +134,27 @@ export default {
     inStore() {
       return this.$store.getters['currentProduct']?.inStore || MANAGEMENT;
     },
+    unitOptions() {
+      return [
+        { label: this.t('unit.sec'), value: SECONDS_PER.s },
+        { label: this.t('unit.min'), value: SECONDS_PER.m },
+        { label: this.t('unit.hour', { count: 2 }), value: SECONDS_PER.h },
+        { label: this.t('unit.day', { count: 2 }), value: SECONDS_PER.d },
+      ];
+    },
+    refreshIntervalRules() {
+      const { isPositive } = formRulesGenerator(this.$store.getters['i18n/t'], {});
+
+      return [isPositive];
+    },
+    refreshIntervalPlaceholder() {
+      const defaultHours = (this.clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL || this.clusterRepoType === CLUSTER_REPO_TYPES.SUSE_APP_COLLECTION) ? 24 : 1;
+
+      return this.t('catalog.repo.refreshInterval.placeholder', {
+        value: defaultHours,
+        unit:  this.t('unit.hour', { count: defaultHours }),
+      });
+    },
     secretNamespace() {
       const tryNames = ['cattle-system', 'default'];
 
@@ -174,34 +215,58 @@ export default {
 
       this.value.spec.exponentialBackOffValues[key] = Number(newVal);
     },
-    updateRefreshInterval(newVal) {
-      // when user removes the value we don't send refreshInterval along with the payload
-      if (newVal === null) {
+    syncRefreshIntervalToSpec() {
+      if (!this.refreshEnabled) {
+        this.value.spec.refreshInterval = -1;
+
+        return;
+      }
+
+      if (this.refreshDisplayValue === null || this.refreshDisplayValue === 0) {
         delete this.value.spec.refreshInterval;
 
         return;
       }
 
-      this.value.spec.refreshInterval = newVal;
+      this.value.spec.refreshInterval = this.refreshDisplayValue * this.refreshUnit;
+    },
+    onRefreshEnabledChange(val: boolean) {
+      this.refreshEnabled = val;
+      this.syncRefreshIntervalToSpec();
+    },
+    onRefreshValueChange(val: string | null) {
+      this.refreshDisplayValue = val === '' || val === null ? null : Number(val);
+      this.syncRefreshIntervalToSpec();
+    },
+    onRefreshUnitChange(val: number) {
+      this.refreshUnit = val;
+      this.syncRefreshIntervalToSpec();
+    },
+    resetRefreshIntervalValues() {
+      delete this.value.spec['refreshInterval'];
+      this.refreshEnabled = true;
+      this.refreshDisplayValue = null;
+      this.refreshUnit = SECONDS_PER.h;
     },
     resetGitRepoValues() {
       delete this.value.spec['gitRepo'];
       delete this.value.spec['gitBranch'];
-      delete this.value.spec['refreshInterval'];
+      this.resetRefreshIntervalValues();
     },
     resetOciValues() {
       delete this.value.spec['url'];
       delete this.value.spec['insecurePlainHttp'];
       delete this.value.spec['insecureSkipTLSVerify'];
       delete this.value.spec['caBundle'];
-      delete this.value.spec['refreshInterval'];
       delete this.value.spec['exponentialBackOffValues'];
       this.ociMinWait = undefined;
       this.ociMaxWait = undefined;
       this.ociMaxRetries = undefined;
+      this.resetRefreshIntervalValues();
     },
     resetHelmValues() {
       delete this.value.spec['url'];
+      this.resetRefreshIntervalValues();
     },
     resetClientSecret() {
       this.value.spec['clientSecret'] = null;
@@ -255,6 +320,7 @@ export default {
       :value="value"
       :mode="mode"
       :namespaced="isNamespaced"
+      :name-col-span="6"
       @update:value="$emit('input', $event)"
     />
 
@@ -264,7 +330,7 @@ export default {
         color="warning"
       />
       <Banner
-        :label="t('catalog.repo.oci.info', null, true)"
+        :label="t('catalog.repo.oci.info', {}, true)"
         color="info"
       />
     </template>
@@ -276,7 +342,7 @@ export default {
             v-model:value.trim="value.spec.gitRepo"
             :required="true"
             :label="t('catalog.repo.gitRepo.label')"
-            :placeholder="t('catalog.repo.gitRepo.placeholder', null, true)"
+            :placeholder="t('catalog.repo.gitRepo.placeholder', {}, true)"
             :mode="mode"
             data-testid="clusterrepo-git-repo-input"
           />
@@ -284,9 +350,9 @@ export default {
         <div class="col span-3">
           <LabeledInput
             v-model:value.trim="value.spec.gitBranch"
-            :sub-label="!value.spec.gitBranch ? t('catalog.repo.gitBranch.defaultMessage', null, true) : undefined"
+            :sub-label="!value.spec.gitBranch ? t('catalog.repo.gitBranch.defaultMessage', {}, true) : undefined"
             :label="t('catalog.repo.gitBranch.label')"
-            :placeholder="t('catalog.repo.gitBranch.placeholder', null, true)"
+            :placeholder="t('catalog.repo.gitBranch.placeholder', {}, true)"
             :mode="mode"
             data-testid="clusterrepo-git-branch-input"
           />
@@ -299,7 +365,7 @@ export default {
             v-model:value.trim="value.spec.url"
             :required="true"
             :label="t('catalog.repo.oci.urlLabel')"
-            :placeholder="t('catalog.repo.oci.placeholder', null, true)"
+            :placeholder="t('catalog.repo.oci.placeholder', {}, true)"
             :mode="mode"
             data-testid="clusterrepo-oci-url-input"
           />
@@ -312,7 +378,7 @@ export default {
             v-model:value.trim="value.spec.url"
             :required="true"
             :label="t('catalog.repo.oci.urlLabel')"
-            :placeholder="t('catalog.repo.oci.placeholder', null, true)"
+            :placeholder="t('catalog.repo.oci.placeholder', {}, true)"
             :mode="mode"
             data-testid="clusterrepo-oci-url-input"
             :disabled="true"
@@ -328,25 +394,52 @@ export default {
           v-model:value.trim="value.spec.url"
           :required="true"
           :label="t('catalog.repo.url.label')"
-          :placeholder="t('catalog.repo.url.placeholder', null, true)"
+          :placeholder="t('catalog.repo.url.placeholder', {}, true)"
           :mode="mode"
           data-testid="clusterrepo-helm-url-input"
         />
       </div>
+    </div>
 
-      <div
-        class="col span-3"
-        data-testid="clusterrepo-refresh-interval"
-      >
-        <UnitInput
-          v-model:value.trim="value.spec.refreshInterval"
-          :label="t('catalog.repo.refreshInterval.label')"
-          :mode="mode"
-          min="0"
-          :suffix="t('unit.hour', { count: value.spec.refreshInterval })"
-          :placeholder="t('catalog.repo.refreshInterval.placeholder', { hours: clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL ? 24 : 6 })"
-          @update:value="updateRefreshInterval($event)"
-        />
+    <div
+      class="mt-20"
+      data-testid="clusterrepo-refresh-interval"
+    >
+      <Checkbox
+        :value="refreshEnabled"
+        class="mb-10"
+        :mode="mode"
+        :label="t('catalog.repo.refreshInterval.enableLabel')"
+        @update:value="onRefreshEnabledChange"
+      />
+      <div class="row mb-10">
+        <div class="col span-6">
+          <div class="refresh-interval-controls">
+            <LabeledInput
+              class="refresh-interval-value"
+              :value="refreshDisplayValue"
+              :label="t('catalog.repo.refreshInterval.label')"
+              :rules="refreshIntervalRules"
+              type="number"
+              min="0"
+              :disabled="!refreshEnabled || isView"
+              :placeholder="refreshIntervalPlaceholder"
+              data-testid="clusterrepo-refresh-interval-input"
+              @update:value="onRefreshValueChange"
+            />
+            <LabeledSelect
+              class="refresh-interval-unit"
+              :value="refreshUnit"
+              :label="t('catalog.repo.refreshInterval.unitLabel')"
+              :mode="mode"
+              :options="unitOptions"
+              :disabled="!refreshEnabled || isView"
+              :clearable="false"
+              :searchable="false"
+              @update:value="onRefreshUnitChange"
+            />
+          </div>
+        </div>
       </div>
     </div>
 
@@ -468,7 +561,7 @@ export default {
   </form>
 </template>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .target-groups {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -477,4 +570,19 @@ export default {
   height: max-content;
   overflow: hidden;
 }
+
+.refresh-interval-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--gap-md);
+}
+
+.refresh-interval-value {
+  flex: 2;
+}
+
+.refresh-interval-unit {
+  flex: 1;
+}
+
 </style>