@rancher/shell 0.2.5 → 0.3.1

package/components/nav/Jump.vue

@@ -10,8 +10,8 @@ export default {
   data() {
     return {
       isMac,
-      value:       '',
-      groups:      null,
+      value:  '',
+      groups: null,
     };
   },
 
@@ -91,7 +91,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .search, .search:hover, search:focus {
+  .search, .search:hover, .search:focus {
     position: relative;
     background-color: var(--dropdown-bg);
     border-radius: 0;

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;
@@ -87,7 +105,8 @@ export default {
       const t = this.$store.getters['i18n/t'];
       let out = [];
 
-      if (this.currentProduct.customNamespaceFilter) {
+      // TODO: Add return info
+      if (this.currentProduct?.customNamespaceFilter && this.currentProduct?.inStore) {
         // Sometimes the component can show before the 'currentProduct' has caught up, so access the product via the getter rather
         // than caching it in the `fetch`
         return this.$store.getters[`${ this.currentProduct.inStore }/namespaceFilterOptions`]({
@@ -96,6 +115,7 @@ export default {
         });
       }
 
+      // TODO: Add return info
       if (!this.currentProduct?.hideSystemResources) {
         out = [
           {
@@ -129,6 +149,11 @@ export default {
       }
 
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
+
+      if (!inStore) {
+        return out;
+      }
+
       let namespaces = sortBy(
         this.$store.getters[`${ inStore }/all`](NAMESPACE),
         ['nameDisplay']
@@ -249,19 +274,21 @@ export default {
 
     value: {
       get() {
+        // Use last picked filter from user preferences
         const prefs = this.$store.getters['prefs/get'](NAMESPACE_FILTERS);
-        const prefDefault = this.currentProduct.customNamespaceFilter ? [] : [ALL_USER];
-        const values = prefs[this.key] || prefDefault;
+
+        const prefDefault = this.currentProduct?.customNamespaceFilter ? [] : [ALL_USER];
+        const values = prefs && prefs[this.key] ? prefs[this.key] : prefDefault;
         const options = this.options;
 
         // Remove values that are not valid options
-        const out = values
+        const filters = values
           .map((value) => {
             return findBy(options, 'id', value);
           })
           .filter(x => !!x);
 
-        return out;
+        return filters;
       },
 
       set(neu) {
@@ -291,7 +318,7 @@ export default {
         // If there was something selected and you remove it, go back to user by default
         // Unless it was user or all
         if (neu.length === 0 && !hadUser && !hadAll) {
-          ids = this.currentProduct.customNamespaceFilter ? [] : [ALL_USER];
+          ids = this.currentProduct?.customNamespaceFilter ? [] : [ALL_USER];
         } else {
           ids = neu.map(x => x.id);
         }
@@ -317,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;
+      }
     }
   },
 
@@ -418,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);
@@ -426,14 +471,23 @@ export default {
       }
     },
     inputKeyHandler(e) {
-      if (e.keyCode === KEY.DOWN ) {
+      switch (e.keyCode) {
+      case KEY.DOWN:
         e.preventDefault();
         e.stopPropagation();
         this.down(true);
-      } else if (e.keyCode === KEY.TAB) {
+        break;
+      case KEY.TAB:
         // Tab out of the input box
         this.close();
         e.target.blur();
+        break;
+      case KEY.CR:
+        if (this.filtered.length === 1) {
+          this.selectOption(this.filtered[0]);
+          this.filter = '';
+        }
+        break;
       }
     },
     mouseOver(event) {
@@ -527,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;
+      }
+
+      const remove = !this.namespaceFilterMode && optionIsSelected;
 
-      // Remove if it exists, add if it does not
-      if (exists !== -1) {
+      // 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);
@@ -541,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();
@@ -553,6 +628,7 @@ export default {
 <template>
   <div
     class="ns-filter"
+    data-testid="namespaces-filter"
     tabindex="0"
     @focus="open()"
   >
@@ -561,53 +637,70 @@ export default {
       class="ns-glass"
       @click="close()"
     />
-    <!-- Dropdown control -->
+
+    <!-- Select Dropdown control -->
     <div
       ref="dropdown"
       class="ns-dropdown"
+      data-testid="namespaces-dropdown"
       :class="{ 'ns-open': isOpen }"
       @click="toggle()"
     >
+      <!-- No filters found or available -->
       <div
         v-if="value.length === 0"
         ref="values"
+        data-testid="namespaces-values-none"
         class="ns-values"
       >
         {{ t('nav.ns.all') }}
       </div>
+
+      <!-- Filtered by set with custom label E.g. "All namespaces" -->
       <div
         v-else-if="isSingleSpecial"
         ref="values"
+        data-testid="namespaces-values-label"
         class="ns-values"
       >
         {{ value[0].label }}
       </div>
+
+      <!-- All the selected namespaces -->
       <div
         v-else
         ref="values"
         v-tooltip="tooltip"
+        data-testid="namespaces-values"
         class="ns-values"
       >
         <div
           v-if="total"
           ref="total"
+          data-testid="namespaces-values-total"
           class="ns-value ns-abs"
         >
           {{ t('namespaceFilter.selected.label', { total }) }}
         </div>
         <div
-          v-for="ns in value"
+          v-for="(ns, j) in value"
           ref="value"
           :key="ns.id"
+          :data-testid="`namespaces-value-${j}`"
           class="ns-value"
         >
           <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>
+
+      <!-- Inform user if more namespaces are selected -->
       <div
         v-if="hidden > 0"
         ref="more"
@@ -630,9 +723,12 @@ export default {
       class="hide"
       @shortkey="open()"
     />
+
+    <!-- Dropdown menu -->
     <div
       v-if="isOpen"
       class="ns-dropdown-menu"
+      data-testid="namespaces-menu"
     >
       <div class="ns-controls">
         <div class="ns-input">
@@ -649,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()"
@@ -663,14 +771,19 @@ export default {
         role="list"
       >
         <div
-          v-for="opt in filtered"
+          v-for="(opt, i) in cachedFiltered"
           :id="opt.elementId"
           :key="opt.id"
           tabindex="0"
           class="ns-option"
-          :class="{'ns-selected': opt.selected}"
-          @click="selectOption(opt)"
-          @mouseover="mouseOver($event)"
+          :disabled="!opt.enabled"
+          :class="{
+            'ns-selected': opt.selected,
+            'ns-single-match': cachedFiltered.length === 1 && !opt.selected,
+          }"
+          :data-testid="`namespaces-option-${i}`"
+          @click="opt.enabled && selectOption(opt)"
+          @mouseover="opt.enabled && mouseOver($event)"
           @keydown="itemKeyHandler($event, opt)"
         >
           <div
@@ -693,8 +806,9 @@ export default {
           </div>
         </div>
         <div
-          v-if="filtered.length === 0"
+          v-if="cachedFiltered.length === 0"
           class="ns-none"
+          data-testid="namespaces-option-none"
         >
           {{ t('namespaceFilter.noMatchingOptions') }}
         </div>
@@ -733,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;
       }
     }
 
@@ -761,7 +876,6 @@ export default {
       position: absolute;
       right: 10px;
       top: 5px;
-      font-size: 16px;
       line-height: 24px;
       text-align: center;
       width: 24px;
@@ -769,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);
@@ -795,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;
@@ -820,35 +971,17 @@ 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-single-match {
           .ns-item {
+            background-color: var(--dropdown-hover-bg);
             > * {
-              background-color: var(--dropdown-hover-bg);
               color: var(--dropdown-hover-text);
             }
           }
         }
       }
-
-      }
     }
 
     .ns-dropdown {
@@ -866,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 {
@@ -875,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;
@@ -914,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,25 +15,23 @@ 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);
     const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
     return {
-      shown:          false,
+      shown:         false,
       displayVersion,
       fullVersion,
-      uiCommit:       UI_COMMIT,
-      uiVersion:      UI_VERSION,
-      clusterFilter:  '',
+      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);

package/components/nav/Type.vue

@@ -8,7 +8,7 @@ export default {
 
   components: { Favorite },
 
-  props:      {
+  props: {
     type: {
       type:     Object,
       required: true

package/components/nav/WindowManager/ChartReadme.vue

@@ -5,7 +5,7 @@ import Window from './Window';
 export default {
   components: { Window, ChartReadme },
 
-  props:      {
+  props: {
     // The definition of the tab itself
     tab: {
       type:     Object,