@rancher/shell 0.3.0 → 0.3.2

package/components/nav/Header.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import debounce from 'lodash/debounce';
 import { NORMAN, STEVE } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
-import { isMac } from '@shell/utils/platform';
+import { isAlternate, isMac } from '@shell/utils/platform';
 import Import from '@shell/components/Import';
 import BrandImage from '@shell/components/BrandImage';
 import { getProduct } from '@shell/config/private-label';
@@ -15,6 +15,9 @@ import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
 import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
+import { ActionLocation, ExtensionPoint } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import IconOrSvg from '@shell/components/IconOrSvg';
 
 const PAGE_HEADER_ACTION = 'page-action';
 
@@ -29,6 +32,7 @@ export default {
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
+    IconOrSvg
   },
 
   props: {
@@ -43,13 +47,15 @@ export default {
     const shellShortcut = '(Ctrl+`)';
 
     return {
-      show:              false,
-      showTooltip:       false,
-      kubeConfigCopying: false,
+      show:                   false,
+      showTooltip:            false,
+      kubeConfigCopying:      false,
       searchShortcut,
       shellShortcut,
       LOGGED_OUT,
-      navHeaderRight:    null
+      navHeaderRight:         null,
+      extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
+      ctx:                    this
     };
   },
 
@@ -170,6 +176,12 @@ export default {
       if (nue && old && nue.id !== old.id) {
         this.checkClusterName();
       }
+    },
+    // since the Header is a "persistent component" we need to update it at every route change...
+    $route(nue) {
+      if (nue) {
+        this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+      }
     }
   },
 
@@ -288,6 +300,33 @@ export default {
           button.classList.remove('header-btn-active');
         }
       });
+    },
+
+    handleExtensionAction(action, event) {
+      const fn = action.invoke;
+      const opts = {
+        event,
+        action,
+        isAlt:   isAlternate(event),
+        product: this.currentProduct.name,
+        cluster: this.currentCluster,
+      };
+      const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
+
+      if (fn && enabled) {
+        fn.apply(this, [opts, []]);
+      }
+    },
+
+    handleExtensionTooltip(action) {
+      if (action.tooltipKey || action.tooltip) {
+        const tooltip = action.tooltipKey ? this.t(action.tooltipKey) : action.tooltip;
+        const shortcut = action.shortcutLabel ? action.shortcutLabel() : '';
+
+        return `${ tooltip } ${ shortcut }`;
+      }
+
+      return null;
     }
   }
 };
@@ -502,6 +541,31 @@ export default {
         </modal>
       </div>
 
+      <!-- Extension header actions -->
+      <div
+        v-if="extensionHeaderActions.length"
+        class="header-buttons"
+      >
+        <button
+          v-for="action, i in extensionHeaderActions"
+          :key="`${action.label}${i}`"
+          v-tooltip="handleExtensionTooltip(action)"
+          v-shortkey="action.shortcutKey"
+          :disabled="action.enabled ? !action.enabled(ctx) : false"
+          type="button"
+          class="btn header-btn role-tertiary"
+          @shortkey="handleExtensionAction(action, $event)"
+          @click="handleExtensionAction(action, $event)"
+        >
+          <IconOrSvg
+            class="icon icon-lg"
+            :icon="action.icon"
+            :src="action.svg"
+            color="header"
+          />
+        </button>
+      </div>
+
       <div
         v-if="showPageActions"
         id="page-actions"
@@ -671,8 +735,6 @@ export default {
 
         .vs__dropdown-toggle .vs__actions:after {
           color: var(--body-text) !important;
-          font-size: 1.5rem;
-          padding-right: 4px;
         }
 
         .vs__dropdown-toggle {
@@ -816,6 +878,11 @@ export default {
             background-color: var(--success);
             color: var(--success-text);
           }
+
+          img {
+            height: 20px;
+            width: 20px;
+          }
         }
       }
 

package/components/nav/NamespaceFilter.vue

@@ -19,16 +19,17 @@ import { KEY } from '@shell/utils/platform';
 export default {
   data() {
     return {
-      isOpen:        false,
-      filter:        '',
-      hidden:        0,
-      total:         0,
-      activeElement: null,
+      isOpen:         false,
+      filter:         '',
+      hidden:         0,
+      total:          0,
+      activeElement:  null,
+      cachedFiltered: [],
     };
   },
 
   computed: {
-    ...mapGetters(['currentProduct']),
+    ...mapGetters(['currentProduct', 'namespaceFilterMode']),
 
     hasFilter() {
       return this.filter.length > 0;
@@ -37,11 +38,26 @@ export default {
     filtered() {
       let out = this.options;
 
-      // Filter by the current filter
-      if (this.hasFilter) {
-        out = out.filter((item) => {
+      out = out.filter((item) => {
+        // Filter out anything not applicable to singleton selection
+        if (this.namespaceFilterMode) {
+          // We always show dividers, projects and namespaces
+          if (!['divider', 'project', this.namespaceFilterMode].includes(item.kind)) {
+            // Hide any invalid option that's not selected
+            return this.value.findIndex(v => v.id === item.id) >= 0;
+          }
+        }
+
+        // Filter by the current filter
+        if (this.hasFilter) {
           return item.kind !== SPECIAL && item.label.toLowerCase().includes(this.filter.toLowerCase());
-        });
+        }
+
+        return true;
+      });
+
+      if (out?.[0]?.kind === 'divider') {
+        out.splice(0, 1);
       }
 
       const mapped = this.value.reduce((m, v) => {
@@ -54,6 +70,8 @@ export default {
       out.forEach((i) => {
         i.selected = !!mapped[i.id] || (i.id === ALL && this.value && this.value.length === 0);
         i.elementId = (i.id || '').replace('://', '_');
+        // Are we in singleton resource type mode, if so is this an allowed type?
+        i.enabled = !this.namespaceFilterMode || i.kind === this.namespaceFilterMode;
       });
 
       return out;
@@ -326,6 +344,21 @@ export default {
   watch: {
     value(neu) {
       this.layout();
+    },
+
+    /**
+     * When there are thousands of entries certain actions (drop down opened, selection changed, etc) take a long time to complete (upwards
+     * of 5 seconds)
+     *
+     * This is caused by churn of the filtered and options computed properties causing multiple renders for each action.
+     *
+     * To break this multiple-render per cycle behaviour detatch `filtered` from the value used in `v-for`.
+     *
+     */
+    filtered(neu) {
+      if (!!neu) {
+        this.cachedFiltered = neu;
+      }
     }
   },
 
@@ -427,7 +460,10 @@ export default {
         e.preventDefault();
         e.stopPropagation();
         this.up();
-      } else if (e.keyCode === KEY.SPACE) {
+      } else if (e.keyCode === KEY.SPACE || e.keyCode === KEY.CR) {
+        if (this.namespaceFilterMode && !opt.enabled) {
+          return;
+        }
         e.preventDefault();
         e.stopPropagation();
         this.selectOption(opt);
@@ -545,9 +581,22 @@ export default {
 
       const current = this.value;
       const exists = current.findIndex(v => v.id === option.id);
+      const optionIsSelected = exists !== -1;
+
+      // Any type of mode means only a single resource can be selected. So clear out any stale
+      // values (multiple selected in another context OR a single one selected in this context)
+      if (this.namespaceFilterMode) {
+        if (current.length === 1 && optionIsSelected) {
+          // Don't deselect the only selected option
+          return;
+        }
+        current.length = 0;
+      }
 
-      // Remove if it exists, add if it does not
-      if (exists !== -1) {
+      const remove = !this.namespaceFilterMode && optionIsSelected;
+
+      // Remove if it exists (or always add if in singleton mode - we've reset the list above)
+      if (remove) {
         current.splice(exists, 1);
       } else {
         current.push(option);
@@ -559,6 +608,14 @@ export default {
         document.activeElement.blur();
       }
     },
+    handleValueMouseDown(ns, event) {
+      this.removeOption(ns, event);
+
+      if (this.value.length === 0) {
+        this.open();
+      }
+    },
+
     removeOption(ns, event) {
       this.selectOption(ns);
       event.preventDefault();
@@ -634,9 +691,11 @@ export default {
         >
           <div>{{ ns.label }}</div>
           <i
+            v-if="!namespaceFilterMode"
             class="icon icon-close"
             :data-testid="`namespaces-values-close-${j}`"
             @click="removeOption(ns, $event)"
+            @mousedown="handleValueMouseDown(ns, $event)"
           />
         </div>
       </div>
@@ -686,7 +745,19 @@ export default {
             @click="filter = ''"
           />
         </div>
-        <div class="ns-clear">
+        <div
+          v-if="namespaceFilterMode"
+          class="ns-singleton-info"
+        >
+          <i
+            v-tooltip="t('resourceList.nsFilterToolTip', { mode: namespaceFilterMode})"
+            class="icon icon-info"
+          />
+        </div>
+        <div
+          v-else
+          class="ns-clear"
+        >
           <i
             class="icon icon-close"
             @click="clear()"
@@ -700,18 +771,19 @@ export default {
         role="list"
       >
         <div
-          v-for="(opt, i) in filtered"
+          v-for="(opt, i) in cachedFiltered"
           :id="opt.elementId"
           :key="opt.id"
           tabindex="0"
           class="ns-option"
+          :disabled="!opt.enabled"
           :class="{
             'ns-selected': opt.selected,
-            'ns-single-match': filtered.length === 1 && !opt.selected,
+            'ns-single-match': cachedFiltered.length === 1 && !opt.selected,
           }"
           :data-testid="`namespaces-option-${i}`"
-          @click="selectOption(opt)"
-          @mouseover="mouseOver($event)"
+          @click="opt.enabled && selectOption(opt)"
+          @mouseover="opt.enabled && mouseOver($event)"
           @keydown="itemKeyHandler($event, opt)"
         >
           <div
@@ -734,7 +806,7 @@ export default {
           </div>
         </div>
         <div
-          v-if="filtered.length === 0"
+          v-if="cachedFiltered.length === 0"
           class="ns-none"
           data-testid="namespaces-option-none"
         >
@@ -775,16 +847,17 @@ export default {
     }
 
     .ns-clear {
+      &:hover {
+        color: var(--primary);
+        cursor: pointer;
+      }
+    }
+
+    .ns-singleton-info, .ns-clear {
       align-items: center;
       display: flex;
       > i {
-        font-size: 24px;
-        padding: 0 5px;
-      }
-
-      &:hover {
-        color: var(--link);
-        cursor: pointer;
+        padding-right: 5px;
       }
     }
 
@@ -803,7 +876,6 @@ export default {
       position: absolute;
       right: 10px;
       top: 5px;
-      font-size: 16px;
       line-height: 24px;
       text-align: center;
       width: 24px;
@@ -811,7 +883,7 @@ export default {
 
     .ns-dropdown-menu {
       background-color: var(--header-bg);
-      border: 1px solid var(--link-border);
+      border: 1px solid var(--primary-border);
       border-bottom-left-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
       color: var(--header-btn-text);
@@ -837,12 +909,49 @@ export default {
         padding-bottom: 10px;
       }
 
-      .ns-option:focus {
-        background-color: var(--dropdown-hover-bg);
-        color: var(--dropdown-hover-text);
-      }
-
       .ns-option {
+
+        &[disabled] {
+          cursor: default;
+        }
+
+        &:not([disabled]) {
+          &:focus {
+            background-color: var(--dropdown-hover-bg);
+            color: var(--dropdown-hover-text);
+          }
+          .ns-item {
+             &:hover, &:focus {
+              background-color: var(--dropdown-hover-bg);
+              color: var(--dropdown-hover-text);
+              cursor: pointer;
+
+              > i {
+                color: var(--dropdown-hover-text);
+              }
+            }
+          }
+
+          &.ns-selected {
+            &:hover,&:focus {
+              .ns-item {
+                > * {
+                  background-color: var(--dropdown-hover-bg);
+                  color: var(--dropdown-hover-text);
+                }
+              }
+            }
+          }
+
+          &.ns-selected:not(:hover) {
+            .ns-item {
+              > * {
+                color: var(--dropdown-hover-bg);
+              }
+            }
+          }
+        }
+
         .ns-item {
           align-items: center;
           display: flex;
@@ -862,33 +971,8 @@ export default {
             white-space: nowrap;
           }
 
-          &:hover, &:focus {
-            background-color: var(--dropdown-hover-bg);
-            color: var(--dropdown-hover-text);
-            cursor: pointer;
-
-            > i {
-              color: var(--dropdown-hover-text);
-            }
-          }
-        }
-        &.ns-selected:not(:hover) {
-          .ns-item {
-            > * {
-              color: var(--dropdown-hover-bg);
-            }
-          }
-        }
-        &.ns-selected {
-          &:hover,&:focus {
-            .ns-item {
-              > * {
-                background-color: var(--dropdown-hover-bg);
-                color: var(--dropdown-hover-text);
-              }
-            }
-          }
         }
+
         &.ns-single-match {
           .ns-item {
             background-color: var(--dropdown-hover-bg);
@@ -915,7 +999,7 @@ export default {
       &.ns-open {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        border-color: var(--link-border);
+        border-color: var(--primary-border);
       }
 
       > .ns-values {
@@ -924,14 +1008,13 @@ export default {
 
       &:hover {
         > i {
-          color: var(--link);
+          color: var(--primary);
         }
       }
 
       > i {
         height: $ns_dropdown_size;
         width: $ns_dropdown_size;
-        font-size: 20px;
         cursor: pointer;
         text-align: center;
         line-height: $ns_dropdown_size;
@@ -963,7 +1046,7 @@ export default {
             margin-left: 5px;
 
             &:hover {
-              color: var(--link);
+              color: var(--primary);
             };
           }
 

package/components/nav/TopLevelMenu.vue

@@ -1,6 +1,7 @@
 <script>
 import BrandImage from '@shell/components/BrandImage';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
+import IconOrSvg from '../IconOrSvg';
 import { mapGetters } from 'vuex';
 import $ from 'jquery';
 import { CAPI, MANAGEMENT } from '@shell/config/types';
@@ -14,13 +15,13 @@ import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { isRancherPrime } from '@shell/config/version';
 
-const UNKNOWN = 'unknown';
-const UI_VERSION = process.env.VERSION || UNKNOWN;
-const UI_COMMIT = process.env.COMMIT || UNKNOWN;
-
 export default {
 
-  components: { BrandImage, ClusterProviderIcon },
+  components: {
+    BrandImage,
+    ClusterProviderIcon,
+    IconOrSvg
+  },
 
   data() {
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
@@ -30,8 +31,6 @@ export default {
       shown:         false,
       displayVersion,
       fullVersion,
-      uiCommit:      UI_COMMIT,
-      uiVersion:     UI_VERSION,
       clusterFilter: '',
       hasProvCluster,
     };
@@ -145,6 +144,7 @@ export default {
         return {
           label:             this.$store.getters['i18n/withFallback'](`product."${ p.name }"`, null, ucFirst(p.name)),
           icon:              `icon-${ p.icon || 'copy' }`,
+          svg:               p.svg,
           value:             p.name,
           removable:         p.removable !== false,
           inStore:           p.inStore || 'cluster',
@@ -347,9 +347,9 @@ export default {
                 class="option"
                 :to="a.to"
               >
-                <i
-                  class="icon group-icon"
-                  :class="a.icon"
+                <IconOrSvg
+                  :icon="a.icon"
+                  :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
               </nuxt-link>
@@ -368,9 +368,9 @@ export default {
                 class="option"
                 :to="a.to"
               >
-                <i
-                  class="icon group-icon"
-                  :class="a.icon"
+                <IconOrSvg
+                  :icon="a.icon"
+                  :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
               </nuxt-link>
@@ -389,9 +389,9 @@ export default {
                 class="option"
                 :to="a.to"
               >
-                <i
-                  class="icon group-icon"
-                  :class="a.icon"
+                <IconOrSvg
+                  :icon="a.icon"
+                  :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
               </nuxt-link>
@@ -410,11 +410,11 @@ export default {
           </div>
           <div @click="hide()">
             <nuxt-link
-              v-tooltip="{ content: fullVersion, classes: 'footer-tooltip' }"
               :to="{ name: 'about' }"
               class="version"
-              v-html="displayVersion"
-            />
+            >
+              {{ t('about.title') }}
+            </nuxt-link>
           </div>
         </div>
       </div>
@@ -505,6 +505,9 @@ export default {
       margin-right: 8px;
       fill: var(--link);
     }
+    img {
+      margin-right: 8px;
+    }
 
     > div {
       color: var(--link);