@rancher/shell 0.5.3 → 2.0.0

package/components/AsyncButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType, inject } from 'vue';
 import typeHelper from '@shell/utils/type-helpers';
 
 export const ASYNC_BUTTON_STATES = {
@@ -14,7 +14,14 @@ const TOOLTIP = 'tooltip';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
-export default Vue.extend<{ phase: string}, any, any, any>({
+interface NonReactiveProps {
+  timer: NodeJS.Timeout | undefined;
+}
+
+const provideProps: NonReactiveProps = { timer: undefined };
+
+// i18n-uses asyncButton.*
+export default defineComponent({
   props: {
     /**
      * Mode maps to keys in asyncButton.* translations
@@ -37,7 +44,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
       default: false,
     },
     type: {
-      type:    String,
+      type:    String as PropType<'button' | 'submit' | 'reset' | undefined>,
       default: 'button'
     },
     tabIndex: {
@@ -113,7 +120,13 @@ export default Vue.extend<{ phase: string}, any, any, any>({
 
   },
 
-  data(): { phase: string, timer?: NodeJS.Timeout} {
+  setup() {
+    const timer = inject('timer', provideProps.timer);
+
+    return { timer };
+  },
+
+  data() {
     return { phase: this.currentPhase };
   },
 
@@ -245,7 +258,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
         this.phase = (success ? ASYNC_BUTTON_STATES.SUCCESS : ASYNC_BUTTON_STATES.ERROR );
         this.timer = setTimeout(() => {
           this.timerDone();
-        }, this.delay );
+        }, this.delay);
       }
     },
 

package/components/BackLink.vue

@@ -9,20 +9,20 @@ export default {
 };
 </script>
 <template>
-  <nuxt-link
+  <router-link
     v-if="link && link.name"
     :to="link"
     class="back-link"
   >
     <i class="icon icon-chevron-left" /> {{ t('generic.back') }}
-  </nuxt-link>
-  <nuxt-link
+  </router-link>
+  <router-link
     v-else
     to="/"
     class="back-link"
   >
     <i class="icon icon-chevron-left" /> {{ t('nav.home') }}
-  </nuxt-link>
+  </router-link>
 </template>
 
 <style lang="scss" scoped>

package/components/BannerGraphic.vue

@@ -33,6 +33,7 @@ export default {
     <div class="graphic">
       <BrandImage
         class="banner"
+        data-testid="banner-brand__img"
         file-name="banner.svg"
         :draggable="false"
       />

package/components/BrandImage.vue

@@ -15,7 +15,21 @@ export default {
     }
   },
   data() {
-    return { managementSettings: this.$store.getters['management/all'](MANAGEMENT.SETTING) };
+    const managementSettings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
+
+    const uiLoginBackgroundLight = managementSettings?.filter((setting) => setting.id === SETTING.LOGIN_BACKGROUND_LIGHT)?.[0]?.value;
+    const uiLoginBackgroundDark = managementSettings?.filter((setting) => setting.id === SETTING.LOGIN_BACKGROUND_DARK)?.[0]?.value;
+
+    return {
+      managementSettings,
+
+      /**
+       * Login settings fields don't require reactivity; the correct value for those fields is the initial one.
+       * This will avoid side effects after the management store is reset when landing on login page.
+       */
+      uiLoginBackgroundLight,
+      uiLoginBackgroundDark,
+    };
   },
   computed: {
     ...mapGetters({ theme: 'prefs/theme' }),
@@ -38,6 +52,18 @@ export default {
       return setting.value;
     },
 
+    uiBannerLight() {
+      const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BANNER_LIGHT)[0] || {};
+
+      return setting.value;
+    },
+
+    uiBannerDark() {
+      const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BANNER_DARK)[0] || {};
+
+      return setting.value;
+    },
+
     defaultPathToBrandedImage() {
       const themePrefix = this.theme === 'dark' ? 'dark/' : '';
 
@@ -59,6 +85,26 @@ export default {
         }
       }
 
+      if (this.fileName === 'banner.svg') {
+        if (this.theme === 'dark' && this.uiBannerDark) {
+          return this.uiBannerDark;
+        }
+
+        if (this.uiBannerLight) {
+          return this.uiBannerLight;
+        }
+      }
+
+      if (this.fileName === 'login-landscape.svg') {
+        if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
+          return this.uiLoginBackgroundDark;
+        }
+
+        if (this.uiLoginBackgroundLight) {
+          return this.uiLoginBackgroundLight;
+        }
+      }
+
       if (!this.brand) {
         return this.defaultPathToBrandedImage;
       } else {

package/components/Carousel.vue

@@ -121,17 +121,23 @@ export default {
     const slideTrack = document.getElementById('slide-track');
 
     if (this.slider.length === 1) {
-      // singleSlide.style = 'width: 100%; max-width: 100%';
       slideTrack.style = 'transform:translateX(0%); width:100%; left:0';
     } else {
       const node = document.getElementById('slide0');
-      const clone = node.cloneNode(true);
+
+      if (node) {
+        const clone = node.cloneNode(true);
+
+        slideTrack.appendChild(clone);
+      }
 
       const nodeLast = document.getElementById(`slide${ this.slider.length - 1 }`);
-      const cloneLast = nodeLast.cloneNode(true);
 
-      slideTrack.appendChild(clone);
-      slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
+      if (nodeLast) {
+        const cloneLast = nodeLast.cloneNode(true);
+
+        slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
+      }
     }
 
     const lastSeenCluster = sessionStorage.getItem(carouselSeenStorageKey);
@@ -142,7 +148,7 @@ export default {
     }
 
     this.autoScrollSlideInterval = setInterval(this.autoScrollSlide, 5000);
-  },
+  }
 
 };
 
@@ -159,7 +165,7 @@ export default {
       :style="trackStyle"
       class="slide-track"
     >
-      <div
+      <component
         :is="asLink ? 'a' : 'div'"
         v-for="(slide, i) in sliders"
         :id="`slide` + i"
@@ -185,7 +191,7 @@ export default {
             <p>{{ slide.chartDescription }}</p>
           </div>
         </div>
-      </div>
+      </component>
     </div>
     <div
       class="controls"

package/components/Certificates.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
-import Vue from 'vue';
-import { mapGetters } from 'vuex';
-import ResourceTable from '@shell/components/ResourceTable';
+import { defineComponent } from 'vue';
+import ResourceTable from '@shell/components/ResourceTable.vue';
 import { SECRET } from '@shell/config/types';
 import { NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, STATE } from '@shell/config/table-headers';
 import Secret, { TYPES } from '@shell/models/secret';
@@ -19,7 +18,7 @@ interface Data {
   }
 }
 
-export default Vue.extend<Data, any, any, any>({
+export default defineComponent({
   components: {
     ResourceTable, Banner, BadgeState
   },
@@ -97,9 +96,7 @@ export default Vue.extend<Data, any, any, any>({
   },
 
   computed: {
-    ...mapGetters(['isAllNamespaces']),
-
-    expiredData() {
+    expiredData(): any {
       let expiring = 0;
       let expired = 0;
 
@@ -114,11 +111,9 @@ export default Vue.extend<Data, any, any, any>({
         }
       }
 
-      const filterWarning = !this.isAllNamespaces ? this.t('secret.certificate.warnings.filtered') : '';
-
       return {
-        expiring: expiring ? this.t('secret.certificate.warnings.expiring', { count: expiring, filtered: !this.isAllNamespaces }) + filterWarning : '',
-        expired:  expired ? this.t('secret.certificate.warnings.expired', { count: expired, filtered: !this.isAllNamespaces }) + filterWarning : '',
+        expiring: expiring ? this.t('secret.certificate.warnings.expiring', { count: expiring }) : '',
+        expired:  expired ? this.t('secret.certificate.warnings.expired', { count: expired }) : '',
       };
     }
   },
@@ -135,6 +130,7 @@ export default Vue.extend<Data, any, any, any>({
   <div>
     <Banner
       v-if="expiredData.expiring"
+      data-testid="cert-expiring-banner"
       color="warning"
       :label="expiredData.expiring"
     />
@@ -150,6 +146,7 @@ export default Vue.extend<Data, any, any, any>({
       :rows="certs"
       :paging-label="'secret.certificate.paging'"
       :paging-params="pagingParams"
+      :ignore-filter="true"
     >
       <template #col:certState="{row}">
         <td>

package/components/ClusterBadge.vue

@@ -6,11 +6,13 @@ export default {
       required: true,
     },
   },
-
   computed: {
     hasBadge() {
-      return !!this.cluster?.badge;
-    }
+      return !!this.cluster?.badge?.text;
+    },
+    showBorders() {
+      return this.cluster?.badge?.color === 'transparent';
+    },
   }
 };
 </script>
@@ -20,6 +22,7 @@ export default {
     v-if="hasBadge"
     :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
     class="cluster-badge"
+    :class="{'cluster-badge-border': showBorders}"
   >
     {{ cluster.badge.text }}
   </div>
@@ -34,5 +37,11 @@ export default {
     max-width: 250px;
     text-overflow: ellipsis;
     overflow: hidden;
+
+     &-border {
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      color: var(--body-text) !important; // !important is needed to override the color set by the badge when there's a transparent background.
+    }
   }
 </style>

package/components/ClusterIconMenu.vue

@@ -7,21 +7,28 @@ export default {
       type:     Object,
       required: true,
     },
+    routeCombo: {
+      type:    Boolean,
+      default: false
+    },
   },
   computed: {
     isEnabled() {
       return !!this.cluster?.ready;
     },
     showLocalIcon() {
+      if (this.cluster.isLocal && this.cluster.removePreviewColor) {
+        return true;
+      }
+
       return this.cluster.isLocal && !this.cluster.isHarvester && !this.cluster.badge?.iconText;
     },
-    hasCustomColor() {
-      return this.cluster.badge?.color;
-    },
+
     customColor() {
-      return this.cluster.badge?.color || '';
-    }
+      return !this.cluster.removePreviewColor && this.cluster.badge?.iconText ? this.cluster.badge?.color : '';
+    },
   },
+
   methods: {
     smallIdentifier(input) {
       if (this.cluster.badge?.iconText) {
@@ -45,9 +52,10 @@ export default {
   >
     <div
       class="cluster-badge-logo"
-      :class="{ 'disabled': !isEnabled, 'custom-color': hasCustomColor }"
+      :class="{ 'disabled': !isEnabled }"
     >
       <span
+        v-if="!showLocalIcon"
         class="cluster-badge-logo-text"
       >
         {{ smallIdentifier(cluster.label) }}
@@ -96,18 +104,26 @@ export default {
       </svg>
     </div>
     <i
-      v-if="cluster.pinned"
+      v-if="!routeCombo && cluster.pinned"
       class="icon icon-pin cluster-pin-icon"
     />
+    <i
+      v-else-if="routeCombo"
+      class="icon icon-keyboard_tab key-combo-icon"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+  .rancher-icon-fill {
+    fill: var(--primary);
+  }
+
   .cluster-icon-menu {
     position: relative;
     align-items: center;
     display: flex;
-    height: 28px;
+    height: 32px;
     justify-content: center;
     width: 42px;
   }
@@ -119,6 +135,16 @@ export default {
     transform: scaleX(-1);
     color: var(--body-text);
   }
+  .key-combo-icon {
+    position: absolute;
+    top: -7px;
+    right: -8px;
+    font-size: 14px;
+    color: var(--body-text);
+    background-color: #dddee6;
+    padding: 2px;
+    border-radius: 2px;
+  }
 
   .cluster-local-logo {
     width: 20px;
@@ -126,33 +152,35 @@ export default {
 
   .cluster-badge-logo {
     width: 42px;
-    height: 28px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--default-active-text);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
-    border: 1px solid var(--default-border);
+    border: 1px solid var(--border);
     border-radius: 5px;
     font-size: 12px;
     text-transform: uppercase;
 
-    &.custom-color {
-      border-bottom: 4px solid transparent;
-    }
-
     .custom-color-decoration {
       height: 4px;
       width: 100%;
+      margin: 0 auto;
       position: absolute;
-      bottom: 0;
+      bottom: 0px;
       border-radius: 0px 0px 5px 5px;
     }
 
     &.disabled {
-      filter: grayscale(1);
       color: var(--muted);
     }
   }
 </style>
+
+<style lang="scss">
+  .theme-dark .key-combo-icon  {
+    color: var(--body-bg);
+  }
+</style>

package/components/ClusterProviderIcon.vue

@@ -14,7 +14,10 @@ export default {
   computed: {
     useForIcon() {
       return !!this.cluster?.badge?.iconText;
-    }
+    },
+    showBorders() {
+      return this.cluster?.badge?.color === 'transparent';
+    },
   }
 };
 </script>
@@ -28,6 +31,7 @@ export default {
     <div
       v-if="useForIcon"
       class="cluster-badge-logo"
+      :class="{ 'cluster-icon-border': showBorders}"
       :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
     >
       {{ cluster.badge.iconText }}
@@ -69,7 +73,13 @@ export default {
     display: flex;
     height: 32px;
     justify-content: center;
-    width: 32px;
+    width: 42px;
+
+    &-border {
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      color: var(--body-text) !important; // !important is needed to override the color set by the badge when there's a transparent background.
+    }
   }
 
   .cluster-icon-small {
@@ -96,8 +106,9 @@ export default {
     width: 25px;
   }
   .cluster-badge-logo {
-    width: 32px;
+    min-width: 42px;
     height: 32px;
+    padding: 0px 5px;
     display: flex;
     align-items: center;
     justify-content: center;

package/components/CodeMirror.vue

@@ -33,10 +33,9 @@ export default {
 
   data() {
     return {
-      codeMirrorRef:       null,
-      loaded:              false,
-      showKeyMapCloseIcon: false,
-      removeKeyMapBox:     false,
+      codeMirrorRef:   null,
+      loaded:          false,
+      removeKeyMapBox: false,
     };
   },
 
@@ -76,9 +75,19 @@ export default {
       return out;
     },
 
-    keyMapText() {
-      return this.combinedOptions?.keyMap ? this.t(`prefs.keymap.${ this.combinedOptions.keyMap }`) : null;
+    keyMapTooltip() {
+      if (this.combinedOptions?.keyMap) {
+        const name = this.t(`prefs.keymap.${ this.combinedOptions.keyMap }`);
+
+        return this.t('codeMirror.keymap.indicatorToolip', { name });
+      }
+
+      return null;
     },
+
+    isNonDefaultKeyMap() {
+      return this.combinedOptions?.keyMap !== 'sublime';
+    }
   },
 
   created() {
@@ -138,10 +147,6 @@ export default {
     closeKeyMapInfo() {
       this.removeKeyMapBox = true;
     },
-
-    onKeyMapMouseOver(v) {
-      this.showKeyMapCloseIcon = v;
-    }
   }
 };
 </script>
@@ -153,24 +158,19 @@ export default {
   >
     <div v-if="loaded">
       <div
-        v-if="showKeyMapBox && !removeKeyMapBox && keyMapText"
+        v-if="showKeyMapBox && !removeKeyMapBox && keyMapTooltip && isNonDefaultKeyMap"
         class="keymap overlay"
       >
         <div
-          v-clean-tooltip="t('codeMirror.keymap.tooltip')"
-          class="label"
+          v-clean-tooltip="keyMapTooltip"
+          class="keymap-indicator"
           data-testid="code-mirror-keymap"
-          @mouseover="onKeyMapMouseOver(true)"
-          @mouseleave="onKeyMapMouseOver(false)"
+          @click="closeKeyMapInfo"
         >
-          <span>
-            {{ keyMapText }}
-          </span>
-          <i
-            v-if="showKeyMapCloseIcon"
-            class="icon icon-close icon-sm"
-            @click="closeKeyMapInfo"
-          />
+          <i class="icon icon-keyboard keymap-icon" />
+          <div class="close-indicator">
+            <i class="icon icon-close icon-sm" />
+          </div>
         </div>
       </div>
       <codemirror
@@ -192,29 +192,64 @@ export default {
 </template>
 
 <style lang="scss">
+  $code-mirror-animation-time: 0.1s;
+
   .code-mirror {
     z-index: 0;
 
-    .overlay {
-      position: sticky;
-      display: grid;
-      top: 0;
-      float: right;
-      height: 0;
+    // Keyboard mapping overlap
+    .keymap.overlay {
+      position: absolute;
+      display: flex;
+      top: 7px;
+      right: 7px;
       z-index: 1;
-
-      .label {
-        border-radius: 2px;
-        border-style: dashed;
-        border-width: 0.1px;
-        margin: 7px 7px 0 0;
-        padding: 7px;
+      cursor: pointer;
+
+      .keymap-indicator {
+        width: 48px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid transparent;
         color: var(--darker);
         background-color: var(--overlay-bg);
         font-size: 12px;
 
-        .icon {
-          cursor: pointer;
+        .close-indicator {
+          width: 0;
+
+          .icon-close {
+            color: var(--primary);
+            opacity: 0;
+          }
+        }
+
+        .keymap-icon {
+          font-size: 24px;
+          opacity: 0.8;
+          transition: margin-right $code-mirror-animation-time ease-in-out;
+        }
+
+        &:hover {
+          border: 1px solid var(--primary);
+          border-radius: var(--border-radius);;
+
+          .close-indicator {
+            margin-left: -6px;
+            width: auto;
+
+            .icon-close {
+              opacity: 1;
+              transition: opacity $code-mirror-animation-time ease-in-out $code-mirror-animation-time; // Only animate when being shown
+            }
+          }
+
+          .keymap-icon {
+            opacity: 0.6;
+            margin-right: 10px;
+          }
         }
       }
     }