@rancher/shell 2.0.0 → 3.0.0-rc.1

package/pages/c/_cluster/apps/charts/install.vue

@@ -34,9 +34,9 @@ import { exceptionToErrorsArray } from '@shell/utils/error';
 import { clone, diff, get, set } from '@shell/utils/object';
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
-import Vue from 'vue';
 import { saferDump } from '@shell/utils/create-yaml';
 import { LINUX, WINDOWS } from '@shell/store/catalog';
+import { SETTING } from '@shell/config/settings';
 
 const VALUES_STATE = {
   FORM: 'FORM',
@@ -126,7 +126,7 @@ export default {
     try {
       this.serverUrlSetting = await this.$store.dispatch('management/find', {
         type: MANAGEMENT.SETTING,
-        id:   'server-url'
+        id:   SETTING.SERVER_URL,
       });
     } catch (e) {
       console.error('Unable to fetch `server-url` setting: ', e); // eslint-disable-line no-console
@@ -255,7 +255,7 @@ export default {
         chart values. If so, load that component.
 
         This will set this.valuesComponent,
-        this.componentHasTabs and this.showValuesComponent.
+        this.showValuesComponent.
       */
       await this.loadValuesComponent();
     }
@@ -414,7 +414,6 @@ export default {
       showQuestions:           true,
       showSlideIn:             false,
       shownReadmeWindows:      [],
-      componentHasTabs:        false,
       showCommandStep:         false,
       showCustomRegistryInput: false,
       isNamespaceNew:          false,
@@ -834,7 +833,7 @@ export default {
     this.preFormYamlOption = this.valuesComponent || this.hasQuestions ? VALUES_STATE.FORM : VALUES_STATE.YAML;
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.shownReadmeWindows.forEach((name) => this.$store.dispatch('wm/close', name, { root: true }));
   },
 
@@ -888,7 +887,7 @@ export default {
       // runtime will pull images from docker.io.
       const globalRegistry = await this.$store.dispatch('management/find', {
         type: MANAGEMENT.SETTING,
-        id:   'system-default-registry'
+        id:   SETTING.SYSTEM_DEFAULT_REGISTRY,
       });
 
       return globalRegistry.value;
@@ -910,18 +909,13 @@ export default {
 
         if ( hasChartComponent ) {
           this.valuesComponent = this.$store.getters['type-map/importChart'](component);
-          const loaded = await this.valuesComponent();
-
           this.showValuesComponent = true;
-          this.componentHasTabs = loaded?.default?.hasTabs || false;
         } else {
           this.valuesComponent = null;
-          this.componentHasTabs = false;
           this.showValuesComponent = false;
         }
       } else {
         this.valuesComponent = null;
-        this.componentHasTabs = false;
         this.showValuesComponent = false;
       }
     },
@@ -1322,7 +1316,7 @@ export default {
 
       if (step) {
         for (const prop in update) {
-          Vue.set(step, prop, update[prop]);
+          step[prop] = update[prop];
         }
       }
     }
@@ -1354,10 +1348,10 @@ export default {
       <template
         v-for="customStep of customSteps"
         v-slot:[customStep.name]
+        :key="customStep.name"
       >
         <component
           :is="customStep.component"
-          :key="customStep.name"
           @update="updateStep(customStep.name, $event)"
           @errors="e=>errors.push(...e)"
         />
@@ -1400,16 +1394,16 @@ export default {
             class="mb-15"
           >
             <Banner
-              v-for="msg in requires"
-              :key="msg"
+              v-for="(msg, i) in requires"
+              :key="i"
               color="error"
             >
               <span v-clean-html="msg" />
             </Banner>
 
             <Banner
-              v-for="msg in warnings"
-              :key="msg"
+              v-for="(msg, i) in warnings"
+              :key="i"
               color="warning"
             >
               <span v-clean-html="msg" />
@@ -1427,7 +1421,7 @@ export default {
                 :value="query.versionName"
                 :options="filteredVersions"
                 :selectable="version => !version.disabled"
-                @input="selectVersion"
+                @update:value="selectVersion"
               />
               <!-- Can't find the chart for the app, let the user try to select one -->
               <LabeledSelect
@@ -1438,7 +1432,7 @@ export default {
                 :selectable="option => !option.disabled"
                 :get-option-label="opt => getOptionLabel(opt)"
                 option-key="key"
-                @input="selectChart($event)"
+                @update:value="selectChart($event)"
               >
                 <template v-slot:option="opt">
                   <template v-if="opt.kind === 'divider'">
@@ -1452,7 +1446,7 @@ export default {
             </div>
           </div>
           <NameNsDescription
-            v-model="value"
+            v-model:value="value"
             :description-hidden="true"
             :mode="mode"
             :name-disabled="nameDisabled"
@@ -1470,7 +1464,7 @@ export default {
               #project
             >
               <LabeledSelect
-                v-model="project"
+                v-model:value="project"
                 :disabled="!namespaceIsNew"
                 :label="t('catalog.install.project')"
                 option-key="id"
@@ -1482,14 +1476,14 @@ export default {
             </template>
           </NameNsDescription>
           <Checkbox
-            v-model="showCommandStep"
+            v-model:value="showCommandStep"
             class="mb-20"
             :label="t('catalog.install.steps.helmCli.checkbox', { action, existing: !!existing })"
           />
 
           <Checkbox
             v-if="showCustomRegistry"
-            v-model="showCustomRegistryInput"
+            v-model:value="showCustomRegistryInput"
             class="mb-20"
             :label="t('catalog.chart.registry.custom.checkBoxLabel')"
             :tooltip="t('catalog.chart.registry.tooltip')"
@@ -1498,7 +1492,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-if="showCustomRegistryInput"
-                v-model="customRegistrySetting"
+                v-model:value="customRegistrySetting"
                 label-key="catalog.chart.registry.custom.inputLabel"
                 placeholder-key="catalog.chart.registry.custom.placeholder"
                 :min-height="30"
@@ -1534,7 +1528,7 @@ export default {
               :value="query.versionName"
               :options="filteredVersions"
               :selectable="version => !version.disabled"
-              @input="selectVersion"
+              @update:value="selectVersion"
             />
           </div>
           <div class="step__values__controls--spacer">
@@ -1562,7 +1556,7 @@ export default {
         </Banner>
         <div class="step__values__controls">
           <ButtonGroup
-            v-model="preFormYamlOption"
+            v-model:value="preFormYamlOption"
             data-testid="btn-group-options-view"
             :options="formYamlOptions"
             inactive-class="bg-disabled btn-sm"
@@ -1574,7 +1568,7 @@ export default {
           </div>
           <ButtonGroup
             v-if="showDiff"
-            v-model="diffMode"
+            v-model:value="diffMode"
             :options="yamlDiffModeOptions"
             inactive-class="bg-disabled btn-sm"
             active-class="bg-primary btn-sm"
@@ -1597,48 +1591,21 @@ export default {
           <div class="scroll__content">
             <!-- Values (as Custom Component in ./shell/charts/) -->
             <template v-if="valuesComponent && showValuesComponent">
-              <Tabbed
-                v-if="componentHasTabs"
-                ref="tabs"
-                :side-tabs="true"
-                :hide-single-tab="true"
-                :class="{'with-name': showNameEditor}"
+              <component
+                :is="valuesComponent"
+                v-if="valuesComponent"
+                v-model:value="chartValues"
+                :mode="mode"
+                :chart="chart"
                 class="step__values__content"
-                @changed="tabChanged($event)"
-              >
-                <component
-                  :is="valuesComponent"
-                  v-model="chartValues"
-                  :mode="mode"
-                  :chart="chart"
-                  class="step__values__content"
-                  :existing="existing"
-                  :version="version"
-                  :version-info="versionInfo"
-                  :auto-install-info="autoInstallInfo"
-                  @warn="e=>errors.push(e)"
-                  @register-before-hook="registerBeforeHook"
-                  @register-after-hook="registerAfterHook"
-                  @valid="updateStepTwoReady($event)"
-                />
-              </Tabbed>
-              <template v-else>
-                <component
-                  :is="valuesComponent"
-                  v-if="valuesComponent"
-                  v-model="chartValues"
-                  :mode="mode"
-                  :chart="chart"
-                  class="step__values__content"
-                  :existing="existing"
-                  :version="version"
-                  :version-info="versionInfo"
-                  :auto-install-info="autoInstallInfo"
-                  @warn="e=>errors.push(e)"
-                  @register-before-hook="registerBeforeHook"
-                  @register-after-hook="registerAfterHook"
-                />
-              </template>
+                :existing="existing"
+                :version="version"
+                :version-info="versionInfo"
+                :auto-install-info="autoInstallInfo"
+                @warn="e=>errors.push(e)"
+                @register-before-hook="registerBeforeHook"
+                @register-after-hook="registerAfterHook"
+              />
             </template>
 
             <!-- Values (as Questions, abstracted component based on question.yaml configuration from repositories)  -->
@@ -1652,7 +1619,7 @@ export default {
               @changed="tabChanged($event)"
             >
               <Questions
-                v-model="chartValues"
+                v-model:value="chartValues"
                 :in-store="inStore"
                 :mode="mode"
                 :source="versionInfo"
@@ -1665,7 +1632,7 @@ export default {
             <template v-else>
               <YamlEditor
                 ref="yaml"
-                v-model="valuesYaml"
+                v-model:value="valuesYaml"
                 class="step__values__content"
                 :scrolling="true"
                 :initial-yaml-values="originalYamlValues"
@@ -1696,47 +1663,47 @@ export default {
         <div>
           <Checkbox
             v-if="existing"
-            v-model="customCmdOpts.cleanupOnFail"
+            v-model:value="customCmdOpts.cleanupOnFail"
             :label="t('catalog.install.helm.cleanupOnFail')"
           />
         </div>
         <div>
           <Checkbox
             v-if="!existing"
-            v-model="customCmdOpts.crds"
+            v-model:value="customCmdOpts.crds"
             :label="t('catalog.install.helm.crds')"
           />
         </div>
         <div>
           <Checkbox
-            v-model="customCmdOpts.hooks"
+            v-model:value="customCmdOpts.hooks"
             :label="t('catalog.install.helm.hooks')"
           />
         </div>
         <div>
           <Checkbox
             v-if="existing"
-            v-model="customCmdOpts.force"
+            v-model:value="customCmdOpts.force"
             :label="t('catalog.install.helm.force')"
           />
         </div>
         <div>
           <Checkbox
             v-if="existing"
-            v-model="customCmdOpts.resetValues"
+            v-model:value="customCmdOpts.resetValues"
             :label="t('catalog.install.helm.resetValues')"
           />
         </div>
         <div>
           <Checkbox
             v-if="!existing"
-            v-model="customCmdOpts.openApi"
+            v-model:value="customCmdOpts.openApi"
             :label="t('catalog.install.helm.openapi')"
           />
         </div>
         <div>
           <Checkbox
-            v-model="customCmdOpts.wait"
+            v-model:value="customCmdOpts.wait"
             :label="t('catalog.install.helm.wait')"
           />
         </div>
@@ -1766,7 +1733,7 @@ export default {
           class="mt-10"
         >
           <LabeledInput
-            v-model="customCmdOpts.description"
+            v-model:value="customCmdOpts.description"
             label-key="catalog.install.helm.description.label"
             placeholder-key="catalog.install.helm.description.placeholder"
             :min-height="30"
@@ -1913,7 +1880,7 @@ export default {
     // Hack - We're adding an absolute tag under the logo that we want to consume space without breaking vertical alignment of row.
     // W  ith the slots available this isn't possible without adding tag specific styles to the root wizard classes
     &.windowsIncompatible {
-      ::v-deep .header {
+      :deep() .header {
         padding-bottom: 15px;
       }
     }
@@ -1955,7 +1922,7 @@ export default {
       &__content {
         flex: 1;
 
-        ::v-deep .tab-container {
+        :deep() .tab-container {
           overflow: auto;
         }
       }
@@ -2015,7 +1982,7 @@ export default {
 
       padding-bottom: 10px;
 
-      ::v-deep .chart-readmes {
+      :deep() .chart-readmes {
         flex: 1;
         overflow: auto;
       }
@@ -2043,7 +2010,7 @@ export default {
     }
   }
 
-  ::v-deep .yaml-editor {
+  :deep() .yaml-editor {
     flex: 1
   }
 

package/pages/c/_cluster/auth/config/index.vue

@@ -19,8 +19,8 @@ export default {
       return this.$router.replace(authProvs.enabledLocation);
     }
 
-    this.$set(this, 'enabled', authProvs.enabled);
-    this.$set(this, 'nonLocal', authProvs.nonLocal);
+    this['enabled'] = authProvs.enabled;
+    this['nonLocal'] = authProvs.nonLocal;
   },
 
   data() {

package/pages/c/_cluster/auth/roles/index.vue

@@ -40,8 +40,8 @@ export default {
     const globalRoleSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
     const roleTemplatesSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
 
-    this.$set(this, 'globalRoles', globalRoleSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : []);
-    this.$set(this, 'roleTemplates', roleTemplatesSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : []);
+    this['globalRoles'] = globalRoleSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : [];
+    this['roleTemplates'] = roleTemplatesSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : [];
   },
 
   data() {

package/pages/c/_cluster/auth/user.retention/index.vue

@@ -1,77 +1,25 @@
 <script lang="ts" setup>
 import { ref, reactive, watch, onMounted } from 'vue';
-import { useRouter, onBeforeRouteUpdate } from 'vue-router/composables';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
 
 import UserRetentionHeader from '@shell/components/user.retention/user-retention-header.vue';
 import Footer from '@shell/components/form/Footer.vue';
 import { useStore } from '@shell/composables/useStore';
 import { useI18n } from '@shell/composables/useI18n';
+import { useUserRetentionValidation } from '@shell/composables/useUserRetentionValidation';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { isAdminUser } from '@shell/store/type-map';
 
+import type { Setting } from '@shell/types/resources/settings';
+
 import Banner from '@components/Banner/Banner.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 
-import { isValidCron } from 'cron-validator';
 import dayjs from 'dayjs';
 
-type Links = {
-  remove: string;
-  self: string;
-  update: string;
-  view: string;
-};
-
-type FieldsV1 = {
-  'f:customized': {};
-  'f:default': {};
-  'f:source': {};
-  'f:value': {};
-};
-
-type ManagedFields = {
-  apiVersion: string;
-  fieldsType: string;
-  fieldsV1: FieldsV1;
-  manager: string;
-  operation: string;
-  time: string;
-};
-
-type Metadata = {
-  creationTimestamp: string;
-  fields: string[];
-  generation: number;
-  managedFields: ManagedFields[];
-  name: string;
-  relationships: null;
-  resourceVersion: string;
-  state: {
-    error: boolean;
-    message: string;
-    name: string;
-    transitioning: boolean;
-  };
-  uid: string;
-};
-
-type Setting = {
-  id: string;
-  type: string;
-  links: Links;
-  apiVersion: string;
-  customized: boolean;
-  default: string;
-  kind: string;
-  metadata: Metadata;
-  source: string;
-  value: string | null;
-  save: () => void;
-};
-
 const store = useStore();
 const userRetentionSettings = reactive<{[id: string]: string | null }>({
   [SETTING.DISABLE_INACTIVE_USER_AFTER]: null,
@@ -80,9 +28,21 @@ const userRetentionSettings = reactive<{[id: string]: string | null }>({
   [SETTING.USER_RETENTION_DRY_RUN]:      null,
   [SETTING.USER_LAST_LOGIN_DEFAULT]:     null,
 });
+const authUserSessionTtlMinutes = ref<Setting | null>(null);
 const disableAfterPeriod = ref(false);
 const deleteAfterPeriod = ref(false);
 const loading = ref(true);
+const {
+  validateUserRetentionCron,
+  validateDisableInactiveUserAfterDuration,
+  validateDeleteInactiveUserAfterDuration,
+  validateDeleteInactiveUserAfter,
+  validateDurationAgainstAuthUserSession,
+  setValidation,
+  removeValidation,
+  addValidation,
+  isFormValid,
+} = useUserRetentionValidation(disableAfterPeriod, deleteAfterPeriod, authUserSessionTtlMinutes);
 let settings: { [id: string]: Setting } = {};
 
 /**
@@ -124,7 +84,7 @@ watch([disableAfterPeriod, deleteAfterPeriod], ([newDisableAfterPeriod, newDelet
       userRetentionSettings[key] = null;
     });
 
-    validateUserRetentionCron();
+    removeValidation(SETTING.USER_RETENTION_CRON);
 
     return;
   }
@@ -132,7 +92,7 @@ watch([disableAfterPeriod, deleteAfterPeriod], ([newDisableAfterPeriod, newDelet
   ids.filter((id) => ![SETTING.DISABLE_INACTIVE_USER_AFTER, SETTING.DELETE_INACTIVE_USER_AFTER].includes(id))
     .forEach(assignSettings);
 
-  validateUserRetentionCron();
+  addValidation(SETTING.USER_RETENTION_CRON);
 });
 
 const assignSettings = (key: string) => {
@@ -166,40 +126,14 @@ onMounted(async() => {
 
   ids.forEach(assignSettings);
 
+  authUserSessionTtlMinutes.value = await fetchSetting(SETTING.AUTH_USER_SESSION_TTL_MINUTES);
+
   disableAfterPeriod.value = !!userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER];
   deleteAfterPeriod.value = !!userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER];
   loading.value = false;
-
-  validateUserRetentionCron();
 });
 
-const isFormValid = ref(false);
 const { t } = useI18n(store);
-const validateUserRetentionCron = () => {
-  const { [SETTING.USER_RETENTION_CRON]: cronSetting } = userRetentionSettings;
-
-  // Only require user retention cron when disable or delete after are active
-  if (!disableAfterPeriod.value && !deleteAfterPeriod.value) {
-    isFormValid.value = true;
-
-    return;
-  }
-
-  if (!cronSetting) {
-    isFormValid.value = false;
-
-    return;
-  }
-
-  if (typeof cronSetting === 'string' && !isValidCron(cronSetting)) {
-    isFormValid.value = false;
-
-    return t('user.retention.edit.form.cron.errorMessage');
-  }
-
-  isFormValid.value = true;
-};
-
 const error = ref<string | null>(null);
 const save = async(btnCB: (arg: boolean) => void) => {
   try {
@@ -257,33 +191,37 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
       </banner>
       <div class="input-fieldset">
         <checkbox
-          v-model="disableAfterPeriod"
+          v-model:value="disableAfterPeriod"
           data-testid="disableAfterPeriod"
           :label="t('user.retention.edit.form.disableAfter.checkbox')"
         />
         <labeled-input
-          v-model="userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER]"
+          v-model:value="userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER]"
           data-testid="disableAfterPeriodInput"
           :tooltip="t('user.retention.edit.form.disableAfter.input.tooltip')"
           class="input-field"
           :label="t('user.retention.edit.form.disableAfter.input.label')"
           :disabled="!disableAfterPeriod"
+          :rules="[validateDisableInactiveUserAfterDuration, validateDurationAgainstAuthUserSession]"
+          @update:validation="e => setValidation(SETTING.DISABLE_INACTIVE_USER_AFTER, e)"
         />
       </div>
       <div class="input-fieldset">
         <checkbox
-          v-model="deleteAfterPeriod"
+          v-model:value="deleteAfterPeriod"
           data-testid="deleteAfterPeriod"
           :label="t('user.retention.edit.form.deleteAfter.checkbox')"
         />
         <labeled-input
-          v-model="userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER]"
+          v-model:value="userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER]"
           data-testid="deleteAfterPeriodInput"
           :tooltip="t('user.retention.edit.form.deleteAfter.input.tooltip')"
           class="input-field"
           :label="t('user.retention.edit.form.deleteAfter.input.label')"
           :sub-label="t('user.retention.edit.form.deleteAfter.input.subLabel')"
           :disabled="!deleteAfterPeriod"
+          :rules="[validateDeleteInactiveUserAfterDuration, validateDurationAgainstAuthUserSession, validateDeleteInactiveUserAfter]"
+          @update:validation="e => setValidation(SETTING.DELETE_INACTIVE_USER_AFTER, e)"
         />
       </div>
       <template
@@ -291,7 +229,7 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
       >
         <div class="input-fieldset pt-12">
           <labeled-input
-            v-model="userRetentionSettings[SETTING.USER_RETENTION_CRON]"
+            v-model:value="userRetentionSettings[SETTING.USER_RETENTION_CRON]"
             data-testid="userRetentionCron"
             class="input-field"
             required
@@ -299,12 +237,13 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
             :tooltip="t('user.retention.edit.form.cron.subLabel')"
             :rules="[validateUserRetentionCron]"
             :label="t('user.retention.edit.form.cron.label')"
-            @input="validateUserRetentionCron"
+            :require-dirty="false"
+            @update:validation="e => setValidation(SETTING.USER_RETENTION_CRON, e)"
           />
         </div>
         <div class="input-fieldset condensed pt-12">
           <toggle-switch
-            v-model="userRetentionSettings[SETTING.USER_RETENTION_DRY_RUN]"
+            v-model:value="userRetentionSettings[SETTING.USER_RETENTION_DRY_RUN]"
             data-testid="userRetentionDryRun"
             :onValue="'true'"
             :offValue="'false'"
@@ -314,7 +253,7 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
         </div>
         <div class="input-fieldset condensed">
           <labeled-input
-            v-model="userRetentionSettings[SETTING.USER_LAST_LOGIN_DEFAULT]"
+            v-model:value="userRetentionSettings[SETTING.USER_LAST_LOGIN_DEFAULT]"
             data-testid="userLastLoginDefault"
             class="input-field"
             :label="t('user.retention.edit.form.defaultLastLogin.label')"
@@ -354,7 +293,7 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
     margin-top: 20px;
     padding: 10px 20px;
 
-    ::v-deep .spacer-small {
+    :deep() .spacer-small {
       padding: 0;
     }
   }

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -56,7 +56,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.dismissRouteHandler();
   }
 };