@rancher/shell 0.5.3 → 2.0.0

package/components/nav/TopLevelMenu.vue

@@ -13,9 +13,10 @@ import { getVersionInfo } from '@shell/utils/version';
 import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
-import { getProductFromRoute } from '@shell/middleware/authenticated';
+import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
+import { getGlobalBannerFontSizes } from '@shell/utils/banners';
 
 export default {
   components: {
@@ -39,6 +40,7 @@ export default {
       emptyCluster:      BLANK_CLUSTER,
       showPinClusters:   false,
       searchActive:      false,
+      routeCombo:        false,
     };
   },
 
@@ -58,35 +60,14 @@ export default {
       },
     },
     sideMenuStyle() {
+      const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
+
       return {
-        marginBottom: this.globalBannerSettings?.footerFont,
-        marginTop:    this.globalBannerSettings?.headerFont
+        marginBottom: globalBannerSettings?.footerFont,
+        marginTop:    globalBannerSettings?.headerFont
       };
     },
 
-    globalBannerSettings() {
-      const settings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
-      const bannerSettings = settings?.find((s) => s.id === SETTING.BANNERS);
-
-      if (bannerSettings) {
-        const parsed = JSON.parse(bannerSettings.value);
-        const {
-          showFooter, showHeader, bannerFooter, bannerHeader, banner
-        } = parsed;
-
-        // add defaults to accomodate older JSON structures for banner definitions without breaking the UI
-        // https://github.com/rancher/dashboard/issues/10140
-        const bannerHeaderFontSize = bannerHeader?.fontSize || banner?.fontSize || '14px';
-        const bannerFooterFontSize = bannerFooter?.fontSize || banner?.fontSize || '14px';
-
-        return {
-          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeaderFontSize) : '0px',
-          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooterFontSize) : '0px'
-        };
-      }
-
-      return undefined;
-    },
     legacyEnabled() {
       return this.features(LEGACY);
     },
@@ -127,8 +108,10 @@ export default {
           isLocal:         x.isLocal,
           isHarvester:     x.isHarvester,
           pinned:          x.pinned,
+          description:     pCluster?.description || x.description,
           pin:             () => x.pin(),
-          unpin:           () => x.unpin()
+          unpin:           () => x.unpin(),
+          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: x.id } }
         };
       }) || [];
     },
@@ -138,6 +121,16 @@ export default {
       const out = search ? this.clusters.filter((item) => item.label?.toLowerCase().includes(search)) : this.clusters;
       const sorted = sortBy(out, ['ready:desc', 'label']);
 
+      // put local cluster on top of list always
+      // https://github.com/rancher/dashboard/issues/10975
+      if (sorted.findIndex((c) => c.id === 'local') > 0) {
+        const localCluster = sorted.find((c) => c.id === 'local');
+        const localIndex = sorted.findIndex((c) => c.id === 'local');
+
+        sorted.splice(localIndex, 1);
+        sorted.unshift(localCluster);
+      }
+
       if (search) {
         this.showPinClusters = false;
         this.searchActive = !sorted.length > 0;
@@ -160,6 +153,16 @@ export default {
       const out = this.clusters.filter((item) => item.pinned);
       const sorted = sortBy(out, ['ready:desc', 'label']);
 
+      // put local cluster on top of list always
+      // https://github.com/rancher/dashboard/issues/10975
+      if (sorted.findIndex((c) => c.id === 'local') > 0) {
+        const localCluster = sorted.find((c) => c.id === 'local');
+        const localIndex = sorted.findIndex((c) => c.id === 'local');
+
+        sorted.splice(localIndex, 1);
+        sorted.unshift(localCluster);
+      }
+
       return sorted;
     },
 
@@ -217,7 +220,9 @@ export default {
           params: { cluster }
         };
 
-        if ( !this.$router.getMatchedComponents(to).length ) {
+        const matched = this.$router.getRoutes().filter((route) => route.name === to.name);
+
+        if ( !matched.length ) {
           to.name = 'c-cluster-product';
           to.params.product = p.name;
         }
@@ -254,6 +259,53 @@ export default {
     productFromRoute() {
       return getProductFromRoute(this.$route);
     },
+
+    aboutText() {
+      // If a version number (starts with 'v') then use that
+      if (this.displayVersion.startsWith('v')) {
+        // Don't show the '.0' for a minor release (e.g. 2.8.0, 2.9.0 etc)
+        return !this.displayVersion.endsWith('.0') ? this.displayVersion : this.displayVersion.substr(0, this.displayVersion.length - 2);
+      }
+
+      // Default fallback to 'About'
+      return this.t('about.title');
+    },
+
+    largeAboutText() {
+      return this.aboutText.length > 6;
+    },
+
+    appBar() {
+      let activeFound = false;
+
+      // order is important for the object keys here
+      // since we want to check last pinFiltered and clustersFiltered
+      const appBar = {
+        hciApps:           this.hciApps,
+        multiClusterApps:  this.multiClusterApps,
+        legacyApps:        this.legacyApps,
+        configurationApps: this.configurationApps,
+        pinFiltered:       this.pinFiltered,
+        clustersFiltered:  this.clustersFiltered,
+      };
+
+      Object.keys(appBar).forEach((menuSection) => {
+        const menuSectionItems = appBar[menuSection];
+        const isClusterCheck = menuSection === 'pinFiltered' || menuSection === 'clustersFiltered';
+
+        // need to reset active state on other menu items
+        menuSectionItems.forEach((item) => {
+          item.isMenuActive = false;
+
+          if (!activeFound && this.checkActiveRoute(item, isClusterCheck)) {
+            activeFound = true;
+            item.isMenuActive = true;
+          }
+        });
+      });
+
+      return appBar;
+    }
   },
 
   watch: {
@@ -271,19 +323,6 @@ export default {
   },
 
   methods: {
-    /**
-     * Converts a pixel value to an em value based on the default font size.
-     * @param {number} elementFontSize - The font size of the element in pixels.
-     * @param {number} [defaultFontSize=14] - The default font size in pixels.
-     * @returns {string} The converted value in em units.
-     */
-    pxToEm(elementFontSize, defaultFontSize = 14) {
-      const lineHeightInPx = 2 * parseInt(elementFontSize);
-      const lineHeightInEm = lineHeightInPx / defaultFontSize;
-
-      return `${ lineHeightInEm }em`;
-    },
-
     checkActiveRoute(obj, isClusterRoute) {
       // for Cluster links in main nav: check if route is a cluster explorer one + check if route cluster matches cluster obj id + check if curr product matches route product
       if (isClusterRoute) {
@@ -294,6 +333,30 @@ export default {
       return this.productFromRoute === obj?.value;
     },
 
+    handleKeyComboClick() {
+      this.routeCombo = !this.routeCombo;
+    },
+
+    clusterMenuClick(ev, cluster) {
+      if (this.routeCombo) {
+        ev.preventDefault();
+
+        if (this.isCurrRouteClusterExplorer && this.productFromRoute === this.currentProduct?.name) {
+          const clusterRoute = {
+            name:   this.$route.name,
+            params: { ...this.$route.params },
+            query:  { ...this.$route.query }
+          };
+
+          clusterRoute.params.cluster = cluster.id;
+
+          return this.$router.push(clusterRoute);
+        }
+      }
+
+      return this.$router.push(cluster.clusterRoute);
+    },
+
     handler(e) {
       if (e.keyCode === KEY.ESCAPE ) {
         this.hide();
@@ -319,20 +382,61 @@ export default {
       } catch {
       }
     },
-    getTooltipConfig(item) {
-      if (!this.shown && !item) {
+
+    getTooltipConfig(item, showWhenClosed = false) {
+      if (!item) {
         return;
       }
 
-      if (!this.shown) {
-        return {
-          content:       this.shown ? null : item,
-          placement:     'right',
-          popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } }
-        };
+      let contentText = '';
+      let content;
+      let classes = '';
+
+      // this is the normal tooltip scenario where we are just passing a string
+      if (typeof item === 'string') {
+        contentText = item;
+        content = this.shown ? null : contentText;
+
+      // if key combo is pressed, then we update the tooltip as well
+      } else if (this.routeCombo &&
+        typeof item === 'object' &&
+        !Array.isArray(item) &&
+        item !== null &&
+        item.ready) {
+        contentText = this.t('nav.keyComboTooltip');
+
+        if (showWhenClosed) {
+          content = !this.shown ? contentText : null;
+        } else {
+          content = this.shown ? contentText : null;
+        }
+
+      // this is scenario where we show a tooltip when we are on the expanded menu to show full description
       } else {
-        return { content: undefined };
+        contentText = item.label;
+        // this adds a class to the tooltip container so that we can control the max width
+        classes = 'menu-description-tooltip';
+
+        if (item.description) {
+          contentText += `<br><br>${ item.description }`;
+        }
+
+        if (showWhenClosed) {
+          content = !this.shown ? contentText : null;
+        } else {
+          content = this.shown ? contentText : null;
+
+          // this adds a class to adjust tooltip position so it doesn't overlap the cluster pinning action
+          classes += ' description-tooltip-pos-adjustment';
+        }
       }
+
+      return {
+        content,
+        placement:     'right',
+        popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } },
+        classes
+      };
     },
   }
 };
@@ -384,25 +488,26 @@ export default {
         <div class="body">
           <div>
             <!-- Home button -->
-            <nuxt-link
-              class="option cluster selector home"
-              :to="{ name: 'home' }"
-            >
-              <svg
-                v-tooltip="getTooltipConfig(t('nav.home'))"
-                xmlns="http://www.w3.org/2000/svg"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-              ><path
-                d="M0 0h24v24H0z"
-                fill="none"
-              /><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
-              <div class="home-text">
-                {{ t('nav.home') }}
-              </div>
-            </nuxt-link>
-
+            <div @click="hide()">
+              <router-link
+                class="option cluster selector home"
+                :to="{ name: 'home' }"
+              >
+                <svg
+                  v-tooltip="getTooltipConfig(t('nav.home'))"
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                ><path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                /><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
+                <div class="home-text">
+                  {{ t('nav.home') }}
+                </div>
+              </router-link>
+            </div>
             <!-- Search bar -->
             <div
               v-if="showClusterSearch"
@@ -456,21 +561,21 @@ export default {
               </a>
             </div>
             <div
-              v-for="a in hciApps"
+              v-for="a in appBar.hciApps"
               :key="a.label"
               @click="hide()"
             >
-              <nuxt-link
+              <router-link
                 class="option"
                 :to="a.to"
-                :class="{'active-menu-link': checkActiveRoute(a) }"
+                :class="{'active-menu-link': a.isMenuActive }"
               >
                 <IconOrSvg
                   :icon="a.icon"
                   :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
-              </nuxt-link>
+              </router-link>
             </div>
           </template>
 
@@ -487,39 +592,65 @@ export default {
                 class="clustersPinned"
               >
                 <div
-                  v-for="c in pinFiltered"
+                  v-for="(c, index) in appBar.pinFiltered"
                   :key="c.id"
+                  :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
-                  <nuxt-link
+                  <button
                     v-if="c.ready"
-                    :data-testid="`menu-cluster-${ c.id }`"
+                    v-shortkey.push="{windows: ['alt'], mac: ['option']}"
+                    :data-testid="`pinned-menu-cluster-${ c.id }`"
                     class="cluster selector option"
-                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
-                    :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                    :class="{'active-menu-link': c.isMenuActive }"
+                    :to="c.clusterRoute"
+                    @click.prevent="clusterMenuClick($event, c)"
+                    @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c.label)"
+                      v-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
+                      :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
-                    <div class="cluster-name">
-                      {{ c.label }}
+                    <div
+                      v-tooltip="getTooltipConfig(c)"
+                      class="cluster-name"
+                    >
+                      <p>{{ c.label }}</p>
+                      <p
+                        v-if="c.description"
+                        class="description"
+                      >
+                        {{ c.description }}
+                      </p>
                     </div>
                     <Pinned
                       :cluster="c"
                     />
-                  </nuxt-link>
+                  </button>
                   <span
                     v-else
                     class="option cluster selector disabled"
+                    :data-testid="`pinned-menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c.label)"
+                      v-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
-                    <div class="cluster-name">{{ c.label }}</div>
+                    <div
+                      v-tooltip="getTooltipConfig(c)"
+                      class="cluster-name"
+                    >
+                      <p>{{ c.label }}</p>
+                      <p
+                        v-if="c.description"
+                        class="description"
+                      >
+                        {{ c.description }}
+                      </p>
+                    </div>
                     <Pinned
                       :cluster="c"
                     />
@@ -536,41 +667,66 @@ export default {
               <!-- Clusters Search result -->
               <div class="clustersList">
                 <div
-                  v-for="(c, index) in clustersFiltered"
+                  v-for="(c, index) in appBar.clustersFiltered"
                   :key="c.id"
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
-                  <nuxt-link
+                  <button
                     v-if="c.ready"
+                    v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
-                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
-                    :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                    :class="{'active-menu-link': c.isMenuActive }"
+                    :to="c.clusterRoute"
+                    @click="clusterMenuClick($event, c)"
+                    @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c.label)"
+                      v-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
+                      :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
-                    <div class="cluster-name">
-                      {{ c.label }}
+                    <div
+                      v-tooltip="getTooltipConfig(c)"
+                      class="cluster-name"
+                    >
+                      <p>{{ c.label }}</p>
+                      <p
+                        v-if="c.description"
+                        class="description"
+                      >
+                        {{ c.description }}
+                      </p>
                     </div>
                     <Pinned
                       :class="{'showPin': c.pinned}"
                       :cluster="c"
                     />
-                  </nuxt-link>
+                  </button>
                   <span
                     v-else
                     class="option cluster selector disabled"
+                    :data-testid="`menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c.label)"
+                      v-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
-                    <div class="cluster-name">{{ c.label }}</div>
+                    <div
+                      v-tooltip="getTooltipConfig(c)"
+                      class="cluster-name"
+                    >
+                      <p>{{ c.label }}</p>
+                      <p
+                        v-if="c.description"
+                        class="description"
+                      >
+                        {{ c.description }}
+                      </p>
+                    </div>
                     <Pinned
                       :class="{'showPin': c.pinned}"
                       :cluster="c"
@@ -590,7 +746,7 @@ export default {
             </div>
 
             <!-- See all clusters -->
-            <nuxt-link
+            <router-link
               v-if="clusters.length > maxClustersToShow"
               class="clusters-all"
               :to="{name: 'c-cluster-product-resource', params: {
@@ -603,7 +759,7 @@ export default {
                 {{ shown ? t('nav.seeAllClusters') : t('nav.seeAllClustersCollapsed') }}
                 <i class="icon icon-chevron-right" />
               </span>
-            </nuxt-link>
+            </router-link>
           </template>
 
           <div class="category">
@@ -617,13 +773,13 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in multiClusterApps"
+                v-for="a in appBar.multiClusterApps"
                 :key="a.label"
                 @click="hide()"
               >
-                <nuxt-link
+                <router-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
+                  :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -632,7 +788,7 @@ export default {
                     :src="a.svg"
                   />
                   <span class="option-link">{{ a.label }}</span>
-                </nuxt-link>
+                </router-link>
               </div>
             </template>
             <template v-if="legacyEnabled">
@@ -645,13 +801,13 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in legacyApps"
+                v-for="a in appBar.legacyApps"
                 :key="a.label"
                 @click="hide()"
               >
-                <nuxt-link
+                <router-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
+                  :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -660,7 +816,7 @@ export default {
                     :src="a.svg"
                   />
                   <div>{{ a.label }}</div>
-                </nuxt-link>
+                </router-link>
               </div>
             </template>
 
@@ -675,13 +831,13 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in configurationApps"
+                v-for="a in appBar.configurationApps"
                 :key="a.label"
                 @click="hide()"
               >
-                <nuxt-link
+                <router-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
+                  :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -690,7 +846,7 @@ export default {
                     :src="a.svg"
                   />
                   <div>{{ a.label }}</div>
-                </nuxt-link>
+                </router-link>
               </div>
             </template>
           </div>
@@ -705,21 +861,22 @@ export default {
             class="support"
             @click="hide()"
           >
-            <nuxt-link
+            <router-link
               :to="{name: 'support'}"
             >
               {{ t('nav.support', {hasSupport}) }}
-            </nuxt-link>
+            </router-link>
           </div>
           <div
             class="version"
+            :class="{'version-small': largeAboutText}"
             @click="hide()"
           >
-            <nuxt-link
+            <router-link
               :to="{ name: 'about' }"
             >
-              {{ t('about.title') }}
-            </nuxt-link>
+              {{ aboutText }}
+            </router-link>
           </div>
         </div>
       </div>
@@ -728,6 +885,19 @@ export default {
 </template>
 
 <style lang="scss">
+  .menu-description-tooltip {
+    max-width: 200px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .description-tooltip-pos-adjustment {
+    // needs !important so that we can
+    // offset the tooltip a bit so it doesn't
+    // overlap the pin icon and cause bad UX
+    left: 35px !important;
+  }
+
   .localeSelector, .footer-tooltip {
     z-index: 1000;
   }
@@ -745,6 +915,17 @@ export default {
       outline: 0;
     }
   }
+
+  .theme-dark .cluster-name .description {
+    color: var(--input-label) !important;
+  }
+  .theme-dark .body .option  {
+    &:hover .cluster-name .description,
+    &.router-link-active .cluster-name .description,
+    &.active-menu-link .cluster-name .description {
+      color: var(--side-menu-desc) !important;
+  }
+  }
 </style>
 
 <style lang="scss" scoped>
@@ -785,7 +966,7 @@ export default {
     flex-direction: column;
     padding: 0;
     overflow: hidden;
-    transition: width 500ms;
+    transition: width 250ms;
 
     &:focus {
       outline: 0;
@@ -839,6 +1020,10 @@ export default {
         font-size: 14px;
         height: $option-height;
         white-space: nowrap;
+        background-color: transparent;
+        width: 100%;
+        border-radius: 0;
+        border: none;
 
         .cluster-badge-logo-text {
           color: var(--default-active-text);
@@ -855,6 +1040,24 @@ export default {
           }
         }
 
+        .cluster-name {
+          line-height: normal;
+
+          & > p {
+            width: 195px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+
+            &.description {
+              font-size: 12px;
+              padding-right: 8px;
+              color: var(--darker);
+            }
+          }
+        }
+
         &:hover {
           text-decoration: none;
 
@@ -868,9 +1071,9 @@ export default {
           cursor: not-allowed;
 
           .rancher-provider-icon,
-          .cluster-name {
+          .cluster-name p {
             filter: grayscale(1);
-            color: var(--muted);
+            color: var(--muted) !important;
           }
 
           .pin {
@@ -880,6 +1083,8 @@ export default {
 
         &:focus {
           outline: 0;
+          box-shadow: none;
+
           > div {
             text-decoration: underline;
           }
@@ -912,6 +1117,10 @@ export default {
           i {
             color: var(--primary-hover-text);
           }
+
+          div .description {
+            color: var(--default);
+          }
         }
 
         &:hover {
@@ -919,6 +1128,10 @@ export default {
           background: var(--primary-hover-bg);
           > div {
             color: var(--primary-hover-text);
+
+            .description {
+              color: var(--default);
+            }
           }
           svg {
             fill: var(--primary-hover-text);
@@ -936,13 +1149,6 @@ export default {
             }
           }
         }
-
-        .cluster-name {
-          max-width: 220px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
       }
 
       .option, .option-disabled {
@@ -1156,14 +1362,19 @@ export default {
       }
 
       .footer {
-        margin: 20px 15px;
+        margin: 20px 10px;
+        width: 50px;
 
         .support {
           display: none;
         }
 
         .version{
-          text-align: left;
+          text-align: center;
+
+          &.version-small {
+            font-size: 12px;
+          }
         }
       }
     }