@rancher/shell 2.0.0 → 3.0.0-rc.1

package/pages/c/_cluster/settings/DefaultLinksEditor.vue

@@ -1,6 +1,4 @@
 <script>
-import Vue from 'vue';
-
 import { _VIEW } from '@shell/config/query-params';
 import { Checkbox } from '@components/Form/Checkbox';
 
@@ -32,8 +30,8 @@ export default {
     showhide(row, i, e) {
       const value = this.value[i];
 
-      Vue.set(value, 'enabled', !!value.enabled);
-      this.$emit('input', this.value);
+      value['enabled'] = !!value.enabled;
+      this.$emit('update:value', this.value);
     },
   }
 };
@@ -56,9 +54,11 @@ export default {
       </label>
       <label class="text-label" />
 
-      <template v-for="(row,i) in value">
+      <template
+        v-for="(row,i) in value"
+        :key="i"
+      >
         <div
-          :key="i+'key'"
           class="kv-item key"
           :class="{'link-hidden': !row.enabled}"
         >
@@ -66,7 +66,6 @@ export default {
         </div>
 
         <div
-          :key="i+'value'"
           class="kv-item value"
           :class="{'link-hidden': !row.enabled}"
         >
@@ -80,7 +79,7 @@ export default {
         >
           <Checkbox
             v-if="!isView"
-            v-model="row.enabled"
+            v-model:value="row.enabled"
             label-key="customLinks.settings.showLabel"
             :data-testid="`custom-links__checkbox-${i}`"
             @input="showhide(row, i, $event)"
@@ -88,7 +87,6 @@ export default {
         </div>
         <div
           v-else
-          :key="i+'show'"
         />
       </template>
     </div>

package/pages/c/_cluster/settings/banners.vue

@@ -205,77 +205,75 @@ export default {
         {{ t(`advancedSettings.descriptions.${ 'ui-banners' }`, {}, true) }}
       </label>
 
-      <template>
-        <!-- Header Settings -->
-        <h2 class="mt-40 mb-10 setting-title">
-          {{ t('banner.headerBanner') }}
-          <i
-            v-if="!!uiBannerIndividual.bannerHeader"
-            class="icon icon-lock"
-          />
-        </h2>
-        <div
+      <!-- Header Settings -->
+      <h2 class="mt-40 mb-10 setting-title">
+        {{ t('banner.headerBanner') }}
+        <i
           v-if="!!uiBannerIndividual.bannerHeader"
-          class="row mb-10"
-        >
-          <Banner
-            color="warning"
-            class="mt-0"
-            :label="t('banner.individualSetting', {name: 'ui-banner-header'}, true)"
+          class="icon icon-lock"
+        />
+      </h2>
+      <div
+        v-if="!!uiBannerIndividual.bannerHeader"
+        class="row mb-10"
+      >
+        <Banner
+          color="warning"
+          class="mt-0"
+          :label="t('banner.individualSetting', {name: 'ui-banner-header'}, true)"
+        />
+      </div>
+      <div class="row mb-20">
+        <div class="col span-6">
+          <Checkbox
+            :disabled="!!uiBannerIndividual.bannerHeader"
+            :value="bannerVal.showHeader === 'true'"
+            :label="t('banner.showHeader')"
+            :mode="mode"
+            @update:value="e=> bannerVal.showHeader=e.toString()"
           />
         </div>
-        <div class="row mb-20">
-          <div class="col span-6">
-            <Checkbox
-              :disabled="!!uiBannerIndividual.bannerHeader"
-              :value="bannerVal.showHeader === 'true'"
-              :label="t('banner.showHeader')"
-              :mode="mode"
-              @input="e=>$set(bannerVal, 'showHeader', e.toString())"
-            />
-          </div>
-        </div>
-        <BannerSettings
-          v-model="bannerVal"
-          banner-type="bannerHeader"
-          :mode="headerMode"
-        />
+      </div>
+      <BannerSettings
+        v-model:value="bannerVal"
+        banner-type="bannerHeader"
+        :mode="headerMode"
+      />
 
-        <!-- Footer settings -->
-        <h2 class="mt-40 mb-10 setting-title">
-          {{ t('banner.footerBanner') }}
-          <i
-            v-if="!!uiBannerIndividual.bannerFooter"
-            class="icon icon-lock"
-          />
-        </h2>
-        <div
+      <!-- Footer settings -->
+      <h2 class="mt-40 mb-10 setting-title">
+        {{ t('banner.footerBanner') }}
+        <i
           v-if="!!uiBannerIndividual.bannerFooter"
-          class="row mb-10"
-        >
-          <Banner
-            color="warning"
-            class="mt-0"
-            :label="t('banner.individualSetting', {name: 'ui-banner-footer'}, true)"
+          class="icon icon-lock"
+        />
+      </h2>
+      <div
+        v-if="!!uiBannerIndividual.bannerFooter"
+        class="row mb-10"
+      >
+        <Banner
+          color="warning"
+          class="mt-0"
+          :label="t('banner.individualSetting', {name: 'ui-banner-footer'}, true)"
+        />
+      </div>
+      <div class="row mb-20">
+        <div class="col span-6">
+          <Checkbox
+            :disabled="!!uiBannerIndividual.bannerFooter"
+            :value="bannerVal.showFooter === 'true'"
+            :label="t('banner.showFooter')"
+            :mode="mode"
+            @update:value="e=>bannerVal.showFooter = e.toString()"
           />
         </div>
-        <div class="row mb-20">
-          <div class="col span-6">
-            <Checkbox
-              :disabled="!!uiBannerIndividual.bannerFooter"
-              :value="bannerVal.showFooter === 'true'"
-              :label="t('banner.showFooter')"
-              :mode="mode"
-              @input="e=>$set(bannerVal, 'showFooter', e.toString())"
-            />
-          </div>
-        </div>
-        <BannerSettings
-          v-model="bannerVal"
-          banner-type="bannerFooter"
-          :mode="footerMode"
-        />
-      </template>
+      </div>
+      <BannerSettings
+        v-model:value="bannerVal"
+        banner-type="bannerFooter"
+        :mode="footerMode"
+      />
 
       <!-- Consent settings -->
       <h2 class="mt-40 mb-10 setting-title">
@@ -295,36 +293,36 @@ export default {
           :label="t('banner.individualSetting', {name: 'ui-banner-login-consent'}, true)"
         />
       </div>
-      <template>
-        <div class="row mb-20">
-          <div class="col span-6">
-            <Checkbox
-              :disabled="!!uiBannerIndividual.bannerConsent"
-              :value="bannerVal.showConsent === 'true'"
-              :label="t('banner.showConsent')"
-              :mode="mode"
-              @input="e => $set(bannerVal, 'showConsent', e.toString())"
-            />
-          </div>
+      <div class="row mb-20">
+        <div class="col span-6">
+          <Checkbox
+            :disabled="!!uiBannerIndividual.bannerConsent"
+            :value="bannerVal.showConsent === 'true'"
+            :label="t('banner.showConsent')"
+            :mode="mode"
+            @update:value="e => bannerVal.showConsent = e.toString()"
+          />
         </div>
-        <BannerSettings
-          v-model="bannerVal"
-          banner-type="bannerConsent"
-          :mode="consentMode"
-        />
-      </template>
+      </div>
+      <BannerSettings
+        v-model:value="bannerVal"
+        banner-type="bannerConsent"
+        :mode="consentMode"
+      />
       <h2 class="mt-40 mb-40">
         {{ t('notifications.loginError.header') }}
       </h2>
       <NotificationSettings
-        v-model="bannerVal.loginError"
+        v-model:value="bannerVal.loginError"
         :mode="mode"
         :label="t('notifications.loginError.messageLabel')"
       />
     </div>
-    <template v-for="err in errors">
+    <template
+      v-for="(err, i) in errors"
+      :key="i"
+    >
       <Banner
-        :key="err"
         color="error"
         :label="err"
       />

package/pages/c/_cluster/settings/brand.vue

@@ -255,7 +255,7 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledInput
-            v-model="uiPLSetting.value"
+            v-model:value="uiPLSetting.value"
             :label="t('branding.uiPL.label')"
             :mode="mode"
             :maxlength="100"
@@ -271,7 +271,7 @@ export default {
 
       <div class="row mt-10 mb-20">
         <Checkbox
-          v-model="customizeLogo"
+          v-model:value="customizeLogo"
           :label="t('branding.logos.useCustom')"
           :mode="mode"
         />
@@ -291,7 +291,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiLogoLight')"
+              @update:value="updateBranding($event, 'uiLogoLight')"
             />
           </div>
           <SimpleBox
@@ -316,7 +316,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiLogoDark')"
+              @update:value="updateBranding($event, 'uiLogoDark')"
             />
           </div>
           <SimpleBox
@@ -342,7 +342,7 @@ export default {
 
       <div class="row mt-10 mb-20">
         <Checkbox
-          v-model="customizeBanner"
+          v-model:value="customizeBanner"
           :label="t('branding.banner.useCustom')"
           :mode="mode"
         />
@@ -362,7 +362,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiBannerLight')"
+              @update:value="updateBranding($event, 'uiBannerLight')"
             />
           </div>
           <SimpleBox
@@ -387,7 +387,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiBannerDark')"
+              @update:value="updateBranding($event, 'uiBannerDark')"
             />
           </div>
           <SimpleBox
@@ -413,7 +413,7 @@ export default {
 
       <div class="row mt-10 mb-20">
         <Checkbox
-          v-model="customizeLoginBackground"
+          v-model:value="customizeLoginBackground"
           :label="t('branding.loginBackground.useCustom')"
           :mode="mode"
         />
@@ -433,7 +433,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiLoginBackgroundLight')"
+              @update:value="updateBranding($event, 'uiLoginBackgroundLight')"
             />
           </div>
           <SimpleBox
@@ -458,7 +458,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiLoginBackgroundDark')"
+              @update:value="updateBranding($event, 'uiLoginBackgroundDark')"
             />
           </div>
           <SimpleBox
@@ -484,7 +484,7 @@ export default {
 
       <div class="row mt-10 mb-20">
         <Checkbox
-          v-model="customizeFavicon"
+          v-model:value="customizeFavicon"
           :label="t('branding.favicon.useCustom')"
           :mode="mode"
         />
@@ -504,7 +504,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateBranding($event, 'uiFavicon')"
+              @update:value="updateBranding($event, 'uiFavicon')"
             />
           </div>
           <SimpleBox v-if="uiFavicon">
@@ -526,7 +526,7 @@ export default {
       </label>
       <div class="row mt-20">
         <Checkbox
-          v-model="customizeColor"
+          v-model:value="customizeColor"
           :label="t('branding.color.useCustom')"
           :mode="mode"
         />
@@ -536,7 +536,7 @@ export default {
         class="row mt-20 mb-20"
       >
         <ColorInput
-          v-model="uiColor"
+          v-model:value="uiColor"
           component-testid="primary"
         />
       </div>
@@ -549,7 +549,7 @@ export default {
       </label>
       <div class="row mt-20">
         <Checkbox
-          v-model="customizeLinkColor"
+          v-model:value="customizeLinkColor"
           :label="t('branding.linkColor.useCustom')"
           :mode="mode"
         />
@@ -559,7 +559,7 @@ export default {
         class="row mt-20 mb-20"
       >
         <ColorInput
-          v-model="uiLinkColor"
+          v-model:value="uiLinkColor"
           class="col"
           component-testid="link"
         />
@@ -570,9 +570,11 @@ export default {
         </span>
       </div>
     </div>
-    <template v-for="err in errors">
+    <template
+      v-for="(err, i) in errors"
+      :key="i"
+    >
       <Banner
-        :key="err"
         color="error"
         :label="err"
       />
@@ -598,7 +600,7 @@ export default {
   }
 }
 
-::v-deep.preview-container {
+:deep().preview-container {
   display: flex;
   flex-direction: column;
 

package/pages/c/_cluster/settings/links.vue

@@ -99,7 +99,7 @@ export default {
     </div>
     <div class="mt-20">
       <KeyValue
-        v-model="value.custom"
+        v-model:value="value.custom"
         :title="'Custom Links'"
         :as-map="false"
         key-name="label"
@@ -113,13 +113,15 @@ export default {
     </div>
     <div class="ui-links-setting mt-20">
       <DefaultLinksEditor
-        v-model="value.defaults"
+        v-model:value="value.defaults"
         :mode="mode"
       />
     </div>
-    <template v-for="err in errors">
+    <template
+      v-for="(err, i) in errors"
+      :key="i"
+    >
       <Banner
-        :key="err"
         color="error"
         :label="err"
       />

package/pages/c/_cluster/settings/performance.vue

@@ -61,7 +61,7 @@ export default {
 
   data() {
     return {
-      uiPerfSetting:              DEFAULT_PERF_SETTING,
+      uiPerfSetting:              null,
       authUserTTL:                null,
       bannerVal:                  {},
       value:                      {},
@@ -161,7 +161,7 @@ export default {
         return;
       }
 
-      // We're enabling a preference. Are there any incomaptible preferences?
+      // We're enabling a preference. Are there any incompatible preferences?
       if ((incompatible[property] || []).every((p) => !this.value[p].enabled)) {
         // No, just set and exit
         this.value[property].enabled = true;
@@ -173,9 +173,11 @@ export default {
       this.$store.dispatch('cluster/promptModal', {
         component:      'GenericPrompt',
         componentProps: {
-          applyMode:   'enable',
+          applyMode: 'enable',
+          confirm:   (confirmed) => {
+            this.value[property].enabled = confirmed;
+          },
           applyAction: (buttonDone) => {
-            this.value[property].enabled = true;
             (incompatible[property] || []).forEach((incompatible) => {
               this.value[incompatible].enabled = false;
             });
@@ -212,13 +214,13 @@ export default {
             color="warning"
           />
           <Checkbox
-            v-model="value.serverPagination.enabled"
+            v-model:value="value.serverPagination.enabled"
             :mode="mode"
             :label="t('performance.serverPagination.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
             :disabled="(!steveCacheEnabled && !value.serverPagination.enabled)"
-            @input="compatibleWarning('serverPagination', $event)"
+            @update:value="compatibleWarning('serverPagination', $event)"
           />
           <p :class="{ 'text-muted': !value.serverPagination.enabled }">
             {{ t('performance.serverPagination.applicable') }}
@@ -232,7 +234,7 @@ export default {
           <h2>{{ t('performance.inactivity.title') }}</h2>
           <p>{{ t('performance.inactivity.description') }}</p>
           <Checkbox
-            v-model="value.inactivity.enabled"
+            v-model:value="value.inactivity.enabled"
             :mode="mode"
             :label="t('performance.inactivity.checkboxLabel')"
             class="mt-10 mb-20"
@@ -240,7 +242,7 @@ export default {
           />
           <div class="ml-20">
             <LabeledInput
-              v-model="value.inactivity.threshold"
+              v-model:value="value.inactivity.threshold"
               data-testid="inactivity-threshold"
               :mode="mode"
               :label="t('performance.inactivity.inputLabel')"
@@ -261,7 +263,7 @@ export default {
           <h2>{{ t('performance.websocketNotification.label') }}</h2>
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
-            v-model="value.disableWebsocketNotification"
+            v-model:value="value.disableWebsocketNotification"
             :mode="mode"
             :label="t('performance.websocketNotification.checkboxLabel')"
             class="mt-10 mb-20"
@@ -278,14 +280,14 @@ export default {
             :label="t('performance.incrementalLoad.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
-            @input="compatibleWarning('incrementalLoading', $event)"
+            @update:value="compatibleWarning('incrementalLoading', $event)"
           />
           <div class="ml-20">
             <p :class="{ 'text-muted': !value.incrementalLoading.enabled }">
               {{ t('performance.incrementalLoad.setting') }}
             </p>
             <LabeledInput
-              v-model="value.incrementalLoading.threshold"
+              v-model:value="value.incrementalLoading.threshold"
               :mode="mode"
               :label="t('performance.incrementalLoad.inputLabel')"
               :disabled="!value.incrementalLoading.enabled"
@@ -309,7 +311,7 @@ export default {
             :label="t('performance.manualRefresh.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
-            @input="compatibleWarning('manualRefresh', $event)"
+            @update:value="compatibleWarning('manualRefresh', $event)"
           />
           <div class="ml-20">
             <p :class="{ 'text-muted': !value.manualRefresh.enabled }">
@@ -335,7 +337,7 @@ export default {
             label-key="performance.experimental"
           />
           <Checkbox
-            v-model="value.garbageCollection.enabled"
+            v-model:value="value.garbageCollection.enabled"
             :mode="mode"
             :label="t('performance.gc.checkboxLabel')"
             class="mt-10 mb-20"
@@ -345,7 +347,7 @@ export default {
             <h3>{{ t('performance.gc.whenRun.description') }}</h3>
             <div class="ml-20 mb-10">
               <Checkbox
-                v-model="value.garbageCollection.enabledInterval"
+                v-model:value="value.garbageCollection.enabledInterval"
                 :mode="mode"
                 :class="{ 'text-muted': !value.garbageCollection.enabled }"
                 :label="t('performance.gc.whenRun.intervalCheckBox.label')"
@@ -355,7 +357,7 @@ export default {
               />
               <div class="ml-20">
                 <UnitInput
-                  v-model="value.garbageCollection.interval"
+                  v-model:value="value.garbageCollection.interval"
                   :mode="mode"
                   :suffix="t('suffix.seconds', { count: value.garbageCollection.interval })"
                   :label="t('performance.gc.whenRun.interval.inputLabel')"
@@ -365,7 +367,7 @@ export default {
                 />
               </div>
               <Checkbox
-                v-model="value.garbageCollection.enabledOnNavigate"
+                v-model:value="value.garbageCollection.enabledOnNavigate"
                 :mode="mode"
                 :class="{ 'text-muted': !value.garbageCollection.enabled }"
                 :label="t('performance.gc.whenRun.route.description')"
@@ -380,7 +382,7 @@ export default {
                 {{ t('performance.gc.howRun.age.description', {}, true) }}
               </p>
               <UnitInput
-                v-model="value.garbageCollection.ageThreshold"
+                v-model:value="value.garbageCollection.ageThreshold"
                 :mode="mode"
                 :suffix="t('suffix.seconds', { count: value.garbageCollection.ageThreshold })"
                 :label="t('performance.gc.howRun.age.inputLabel')"
@@ -420,7 +422,7 @@ export default {
             :label="t('performance.nsFiltering.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
-            @input="compatibleWarning('forceNsFilterV2', $event)"
+            @update:value="compatibleWarning('forceNsFilterV2', $event)"
           />
         </div>
         <!-- Advanced Websocket Worker -->
@@ -432,7 +434,7 @@ export default {
             label-key="performance.experimental"
           />
           <Checkbox
-            v-model="value.advancedWorker.enabled"
+            v-model:value="value.advancedWorker.enabled"
             :mode="mode"
             :label="t('performance.advancedWorker.checkboxLabel')"
             class="mt-10 mb-20"
@@ -441,9 +443,11 @@ export default {
         </div>
       </div>
     </div>
-    <template v-for="err in errors">
+    <template
+      v-for="(err, i) in errors"
+      :key="i"
+    >
       <Banner
-        :key="err"
         color="error"
         :label="err"
       />

package/pages/c/_cluster/uiplugins/AddExtensionRepos.vue

@@ -127,7 +127,7 @@ export default {
         class="mb-15"
       >
         <Checkbox
-          v-model="addRepos.official"
+          v-model:value="addRepos.official"
           :disabled="hasRancherUIPluginsRepo"
           :primary="true"
           label-key="plugins.setup.install.addRancherRepo"
@@ -145,7 +145,7 @@ export default {
         class="mb-15"
       >
         <Checkbox
-          v-model="addRepos.partners"
+          v-model:value="addRepos.partners"
           :disabled="hasRancherUIPartnersPluginsRepo"
           :primary="true"
           label-key="plugins.setup.install.addPartnersRancherRepo"