@rancher/shell 1.2.3 → 2.0.1

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

@@ -16,24 +16,27 @@ import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
+import TabTitle from '@shell/components/TabTitle';
 
 const Color = require('color');
 
 export default {
-  layout: 'authenticated',
-
   components: {
-    LabeledInput, Checkbox, FileImageSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription
+    LabeledInput, Checkbox, FileImageSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription, TabTitle
   },
 
   async fetch() {
     const hash = await allHash({
-      uiPLSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
-      uiLogoDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
-      uiLogoLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
-      uiColorSetting:     fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
-      uiLinkColorSetting: fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
-      uiFaviconSetting:   fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
+      uiPLSetting:                   this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
+      uiLogoDarkSetting:             fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
+      uiLogoLightSetting:            fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
+      uiBannerDarkSetting:           fetchOrCreateSetting(this.$store, SETTING.BANNER_DARK, ''),
+      uiBannerLightSetting:          fetchOrCreateSetting(this.$store, SETTING.BANNER_LIGHT, ''),
+      uiLoginBackgroundDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGIN_BACKGROUND_DARK, ''),
+      uiLoginBackgroundLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGIN_BACKGROUND_LIGHT, ''),
+      uiColorSetting:                fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
+      uiLinkColorSetting:            fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
+      uiFaviconSetting:              fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
     Object.assign(this, hash);
@@ -51,6 +54,32 @@ export default {
         this.customizeLogo = true;
       } catch {}
     }
+    if (hash.uiBannerDarkSetting.value) {
+      try {
+        this.uiBannerDark = hash.uiBannerDarkSetting.value;
+        this.customizeBanner = true;
+      } catch {}
+    }
+    if (hash.uiBannerLightSetting.value) {
+      try {
+        this.uiBannerLight = hash.uiBannerLightSetting.value;
+
+        this.customizeBanner = true;
+      } catch {}
+    }
+    if (hash.uiLoginBackgroundDarkSetting.value) {
+      try {
+        this.uiLoginBackgroundDark = hash.uiLoginBackgroundDarkSetting.value;
+        this.customizeLoginBackground = true;
+      } catch {}
+    }
+    if (hash.uiLoginBackgroundLightSetting.value) {
+      try {
+        this.uiLoginBackgroundLight = hash.uiLoginBackgroundLightSetting.value;
+
+        this.customizeLoginBackground = true;
+      } catch {}
+    }
     if (hash.uiFaviconSetting.value) {
       try {
         this.uiFavicon = hash.uiFaviconSetting.value;
@@ -79,6 +108,18 @@ export default {
       uiLogoLight:        '',
       customizeLogo:      false,
 
+      uiBannerDarkSetting:  {},
+      uiBannerDark:         '',
+      uiBannerLightSetting: {},
+      uiBannerLight:        '',
+      customizeBanner:      false,
+
+      uiLoginBackgroundDarkSetting:  {},
+      uiLoginBackgroundDark:         '',
+      uiLoginBackgroundLightSetting: {},
+      uiLoginBackgroundLight:        '',
+      customizeLoginBackground:      false,
+
       uiFaviconSetting: {},
       uiFavicon:        '',
       customizeFavicon: false,
@@ -119,7 +160,7 @@ export default {
   },
 
   methods: {
-    updateLogo(img, key) {
+    updateBranding(img, key) {
       this[key] = img;
     },
 
@@ -139,6 +180,22 @@ export default {
         this.uiLogoDarkSetting.value = '';
       }
 
+      if (this.customizeBanner) {
+        this.uiBannerLightSetting.value = this.uiBannerLight;
+        this.uiBannerDarkSetting.value = this.uiBannerDark;
+      } else {
+        this.uiBannerLightSetting.value = '';
+        this.uiBannerDarkSetting.value = '';
+      }
+
+      if (this.customizeLoginBackground) {
+        this.uiLoginBackgroundLightSetting.value = this.uiLoginBackgroundLight;
+        this.uiLoginBackgroundDarkSetting.value = this.uiLoginBackgroundDark;
+      } else {
+        this.uiLoginBackgroundLightSetting.value = '';
+        this.uiLoginBackgroundDarkSetting.value = '';
+      }
+
       if (this.customizeFavicon) {
         this.uiFaviconSetting.value = this.uiFavicon;
       } else {
@@ -164,6 +221,10 @@ export default {
           this.uiPLSetting.save(),
           this.uiLogoDarkSetting.save(),
           this.uiLogoLightSetting.save(),
+          this.uiBannerDarkSetting.save(),
+          this.uiBannerLightSetting.save(),
+          this.uiLoginBackgroundDarkSetting.save(),
+          this.uiLoginBackgroundLightSetting.save(),
           this.uiColorSetting.save(),
           this.uiLinkColorSetting.save(),
           this.uiFaviconSetting.save()
@@ -187,7 +248,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <h1 class="mb-20">
-      {{ t('branding.label') }}
+      <TabTitle>{{ t('branding.label') }}</TabTitle>
     </h1>
     <TypeDescription resource="branding" />
     <div>
@@ -220,7 +281,7 @@ export default {
         v-if="customizeLogo"
         class="row mb-20"
       >
-        <div class="col logo-container span-6">
+        <div class="col preview-container logo span-6">
           <div class="mb-10">
             <FileImageSelector
               :byte-limit="20000"
@@ -230,7 +291,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateLogo($event, 'uiLogoLight')"
+              @input="updateBranding($event, 'uiLogoLight')"
             />
           </div>
           <SimpleBox
@@ -239,12 +300,13 @@ export default {
           >
             <label class="text-muted">{{ t('branding.logos.lightPreview') }}</label>
             <img
-              class="logo-preview"
+              class="img-preview"
+              data-testid="branding-logo-light-preview"
               :src="uiLogoLight ? uiLogoLight : uiLogoDark"
             >
           </SimpleBox>
         </div>
-        <div class="col logo-container span-6">
+        <div class="col preview-container logo span-6">
           <div class="mb-10">
             <FileImageSelector
               :byte-limit="20000"
@@ -254,7 +316,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateLogo($event, 'uiLogoDark')"
+              @input="updateBranding($event, 'uiLogoDark')"
             />
           </div>
           <SimpleBox
@@ -263,13 +325,156 @@ export default {
           >
             <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
             <img
-              class="logo-preview"
+              class="img-preview"
+              data-testid="branding-logo-dark-preview"
               :src="uiLogoDark ? uiLogoDark : uiLogoLight"
             >
           </SimpleBox>
         </div>
       </div>
 
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.banner.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.banner.tip', {}, true) }}
+      </label>
+
+      <div class="row mt-10 mb-20">
+        <Checkbox
+          v-model="customizeBanner"
+          :label="t('branding.banner.useCustom')"
+          :mode="mode"
+        />
+      </div>
+
+      <div
+        v-if="customizeBanner"
+        class="row mb-20"
+      >
+        <div class="col preview-container banner span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.banner.uploadLight')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiBannerLight')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiBannerLight || uiBannerDark"
+            class="theme-light mb-10"
+          >
+            <label class="text-muted">{{ t('branding.banner.lightPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-banner-light-preview"
+              :src="uiBannerLight ? uiBannerLight : uiBannerDark"
+            >
+          </SimpleBox>
+        </div>
+        <div class="col preview-container banner span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.banner.uploadDark')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiBannerDark')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiBannerDark || uiBannerLight"
+            class="theme-dark  mb-10"
+          >
+            <label class="text-muted">{{ t('branding.banner.darkPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-banner-dark-preview"
+              :src="uiBannerDark ? uiBannerDark : uiBannerLight"
+            >
+          </SimpleBox>
+        </div>
+      </div>
+
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.loginBackground.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.loginBackground.tip', {}, true) }}
+      </label>
+
+      <div class="row mt-10 mb-20">
+        <Checkbox
+          v-model="customizeLoginBackground"
+          :label="t('branding.loginBackground.useCustom')"
+          :mode="mode"
+        />
+      </div>
+
+      <div
+        v-if="customizeLoginBackground"
+        class="row mb-20"
+      >
+        <div class="col preview-container login-background span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.loginBackground.uploadLight')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiLoginBackgroundLight')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiLoginBackgroundLight || uiLoginBackgroundDark"
+            class="theme-light mb-10"
+          >
+            <label class="text-muted">{{ t('branding.loginBackground.lightPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-login-background-light-preview"
+              :src="uiLoginBackgroundLight ? uiLoginBackgroundLight : uiLoginBackgroundDark"
+            >
+          </SimpleBox>
+        </div>
+        <div class="col preview-container login-background span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.loginBackground.uploadDark')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiLoginBackgroundDark')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiLoginBackgroundDark || uiLoginBackgroundLight"
+            class="theme-dark  mb-10"
+          >
+            <label class="text-muted">{{ t('branding.loginBackground.darkPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-login-background-dark-preview"
+              :src="uiLoginBackgroundDark ? uiLoginBackgroundDark : uiLoginBackgroundLight"
+            >
+          </SimpleBox>
+        </div>
+      </div>
+
       <h3 class="mt-20 mb-5 pb-5">
         {{ t('branding.favicon.label') }}
       </h3>
@@ -289,7 +494,7 @@ export default {
         v-if="customizeFavicon"
         class="row mb-20"
       >
-        <div class="col logo-container span-12">
+        <div class="col favicon-container span-12">
           <div class="mb-10">
             <FileImageSelector
               :byte-limit="20000"
@@ -299,13 +504,14 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateLogo($event, 'uiFavicon')"
+              @input="updateBranding($event, 'uiFavicon')"
             />
           </div>
           <SimpleBox v-if="uiFavicon">
             <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
             <img
-              class="logo-preview"
+              class="favicon-preview"
+              data-testid="branding-favicon-preview"
               :src="uiFavicon"
             >
           </SimpleBox>
@@ -392,29 +598,46 @@ export default {
   }
 }
 
-.logo-container {
-    display: flex;
-    flex-direction: column;
+::v-deep.preview-container {
+  display: flex;
+  flex-direction: column;
 
-    ::v-deep.simple-box {
-        position: relative;
-        flex: 1;
-        max-height: 120px;
+  .simple-box {
+    position: relative;
+    flex: 1;
 
-        .content {
-          height: 100%;
-          display: flex;
-        }
+    .content {
+      height: 100%;
+      display: flex;
+    }
 
-        .logo-preview {
-          max-width: 100%;
-        }
+    .logo-preview {
+      max-width: 100%;
+    }
+  }
+
+  &.logo {
+    .simple-box {
+      max-height: 120px;
+    }
+  }
+
+  &.banner {
+    .simple-box {
+      max-height: 200px;
     }
+  }
 
-    & LABEL {
-      position: absolute;
-      top: 10px;
-      left: 10px;
+  &.login-background {
+    .simple-box {
+      max-height: 300px;
     }
+  }
+
+  & LABEL {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
 }
 </style>

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

@@ -3,15 +3,13 @@ import { NAME as SETTINGS } from '@shell/config/product/settings';
 import { MANAGEMENT } from '@shell/config/types';
 
 export default {
-  layout: 'plain',
+  beforeCreate() {
+    const hasSettings = !!this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
 
-  middleware({ redirect, route, store } ) {
-    const hasSettings = !!store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
-
-    return redirect({
+    return this.$router.replace({
       name:   'c-cluster-product-resource',
       params: {
-        ...route.params,
+        ...this.$route.params,
         product:  SETTINGS,
         // Will have one or t'other
         resource: hasSettings ? MANAGEMENT.SETTING : MANAGEMENT.FEATURE,

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

@@ -11,15 +11,16 @@ import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import DefaultLinksEditor from './DefaultLinksEditor';
 import { CUSTOM_LINKS_COLLECTIVE_VERSION, fetchLinks } from '@shell/config/home-links';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
-  layout:     'authenticated',
   components: {
     KeyValue,
     Loading,
     AsyncButton,
     Banner,
     DefaultLinksEditor,
+    TabTitle
   },
   async fetch() {
     this.value = await fetchLinks(this.$store, this.hasSupport, false, (str) => this.t(str));
@@ -89,7 +90,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <h1 class="mb-20">
-      {{ t("customLinks.label") }}
+      <TabTitle>{{ t("customLinks.label") }}</TabTitle>
     </h1>
     <div>
       <label class="text-label">

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

@@ -8,21 +8,24 @@ import { MANAGEMENT } from '@shell/config/types';
 import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
+import { STEVE_CACHE } from '@shell/store/features';
+import { NAME as SETTING_PRODUCT } from '@shell/config/product/settings';
 
 const incompatible = {
-  incrementalLoading: ['forceNsFilterV2'],
-  manualRefresh:      ['forceNsFilterV2'],
+  incrementalLoading: ['forceNsFilterV2', 'serverPagination'],
+  manualRefresh:      ['forceNsFilterV2', 'serverPagination'],
   forceNsFilterV2:    ['incrementalLoading', 'manualRefresh'],
+  serverPagination:   ['incrementalLoading', 'manualRefresh'],
 };
 
 const l10n = {
   incrementalLoading: 'incrementalLoad',
   manualRefresh:      'manualRefresh',
   forceNsFilterV2:    'nsFiltering',
+  serverPagination:   'serverPagination'
 };
 
 export default {
-  layout:     'authenticated',
   components: {
     Checkbox,
     Loading,
@@ -65,6 +68,13 @@ export default {
       errors:                     [],
       gcStartedEnabled:           null,
       isInactivityThresholdValid: false,
+      ffUrl:                      this.$router.resolve({
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  SETTING_PRODUCT,
+          resource: MANAGEMENT.FEATURE
+        }
+      }).href
     };
   },
 
@@ -77,6 +87,33 @@ export default {
 
     canSave() {
       return this.value.inactivity.enabled ? this.isInactivityThresholdValid : true;
+    },
+
+    steveCacheEnabled() {
+      return this.$store.getters['features/get'](STEVE_CACHE);
+    },
+
+    steveCacheApplicableResources() {
+      const storeResources = [];
+
+      Object.entries(this.value.serverPagination.stores).forEach(([store, settings]) => {
+        const resources = [];
+
+        if (settings.resources.enableAll) {
+          resources.push(this.t('performance.serverPagination.resources.all'));
+        } else {
+          settings.resources.enableSome.enabled.forEach((resource) => {
+            resources.push(resource);
+          });
+          if (settings.resources.enableSome.generic) {
+            resources.push(this.t('performance.serverPagination.resources.generic', {}, true));
+          }
+        }
+
+        storeResources.push(`${ store }: ${ resources.join(', ') }`);
+      });
+
+      return storeResources.join('. ');
     }
   },
 
@@ -152,6 +189,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
@@ -160,6 +198,35 @@ export default {
     </h1>
     <div>
       <div class="ui-perf-setting">
+        <!-- Server Side Pagination -->
+        <div class="mt-40">
+          <h2>{{ t('performance.serverPagination.label') }}</h2>
+          <p>{{ t('performance.serverPagination.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Banner
+            v-if="!steveCacheEnabled"
+            v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
+            color="warning"
+          />
+          <Checkbox
+            v-model="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)"
+          />
+          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
+            {{ t('performance.serverPagination.applicable') }}
+          </p>
+          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
+            {{ steveCacheApplicableResources }}
+          </p>
+        </div>
         <!-- Inactivity -->
         <div class="mt-20">
           <h2>{{ t('performance.inactivity.title') }}</h2>
@@ -392,6 +459,7 @@ export default {
     </div>
   </div>
 </template>
+
 <style scoped lang='scss'>
 .overlay {
   width: 100%;

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

@@ -46,7 +46,8 @@ export default {
           url:    UI_PLUGINS_PARTNERS_REPO_URL,
           branch: UI_PLUGINS_PARTNERS_REPO_BRANCH,
         }
-      }
+      },
+      isDialogActive: false,
     };
   },
 
@@ -65,7 +66,7 @@ export default {
         official: isRancherPrime() && !this.hasRancherUIPluginsRepo,
         partners: !this.hasRancherUIPartnersPluginsRepo,
       };
-      this.$modal.show('add-extensions-repos');
+      this.isDialogActive = true;
     },
 
     async doAddRepos(btnCb) {
@@ -108,11 +109,13 @@ export default {
 </script>
 <template>
   <Dialog
+    v-if="isDialogActive"
     name="add-extensions-repos"
     :title="t('plugins.addRepos.title')"
     mode="add"
     data-testid="add-extensions-repos-modal"
     @okay="doAddRepos"
+    @closed="isDialogActive = false"
   >
     <template>
       <p class="mb-20">