@rancher/shell 0.5.2 → 0.5.3

package/assets/translations/en-us.yaml

@@ -185,7 +185,7 @@ nav:
     configuration: Configuration
     hci: HCI
   search:
-    placeholder: Type to search clusters
+    placeholder: Filter clusters by...
     noResults: No matching clusters
     clusters: clusters
   resourceSearch:
@@ -1862,6 +1862,7 @@ cluster:
       header: System Services
     cni:
       label: Container Network
+      cniNoneBanner: When CNI is set to 'none' an <a href="https://ranchermanager.docs.rancher.com/reference-guides/cluster-configuration/rancher-server-configuration/rke2-cluster-configuration#additionalmanifest" target="_blank" rel="noopener noreferrer nofollow">Additional Manifest</a> deploying an alternate CNI must be specified for successful cluster provisioning.
       cilium:
         BandwidthManager:
           enable: Enable Bandwidth Manager
@@ -1870,7 +1871,6 @@ cluster:
       header: Cloud Provider Config
       defaultValue:
         label: Default - RKE2 Embedded
-      unsupported: The current Cloud Provider is not supported by this version of Kubernetes. The Cloud Provider has been changed to External. Please use the Cloud Provider Config to supply an out-of-tree configuration as needed.
     security:
       header: Security
     cis:
@@ -1903,8 +1903,8 @@ cluster:
       toolTip: "This can be either a fixed number of nodes (e.g. 1) at a time or a percentage (e.g. 10%)"
     drain:
       label: Drain Nodes
-      toolTip: Draining preemptively removes the pods on each node so there are no running workloads on the nodes being upgraded.  Upgrading without draining is faster and causes less shuffling around, but pods may still be restarted depending on the upgrade being performed. 
-      deleteEmptyDir: 
+      toolTip: Draining preemptively removes the pods on each node so there are no running workloads on the nodes being upgraded.  Upgrading without draining is faster and causes less shuffling around, but pods may still be restarted depending on the upgrade being performed.
+      deleteEmptyDir:
         warning: "By default, pods using emptyDir volumes will be deleted on upgrade. Operations reliant on emptyDir volumes persisting through the pod's lifecycle may be impacted."
         label: Delete pods using emptyDir volumes
         tooltip: emptyDir volumes are often used for ephemeral data, but the data will be permanently deleted.  Draining will fail if this is not set and there are pods using emptyDir.
@@ -2078,6 +2078,10 @@ resource:
   errors:
     update: "Error updating {name}"
 
+codeMirror:
+  keymap:
+    tooltip: Key mapping preference.
+
 cruResource:
   backToForm: Back to Form
   backBody: You will lose any changes made to the YAML.

package/components/ClusterIconMenu.vue

@@ -15,10 +15,11 @@ export default {
     showLocalIcon() {
       return this.cluster.isLocal && !this.cluster.isHarvester && !this.cluster.badge?.iconText;
     },
-    badgeLogoBorderBottom() {
-      const color = this.cluster.badge?.color;
-
-      return color ? `4px solid ${ color }` : '';
+    hasCustomColor() {
+      return this.cluster.badge?.color;
+    },
+    customColor() {
+      return this.cluster.badge?.color || '';
     }
   },
   methods: {
@@ -44,14 +45,17 @@ export default {
   >
     <div
       class="cluster-badge-logo"
-      :class="{ 'disabled': !isEnabled }"
-      :style="{ borderBottom: badgeLogoBorderBottom }"
+      :class="{ 'disabled': !isEnabled, 'custom-color': hasCustomColor }"
     >
       <span
         class="cluster-badge-logo-text"
       >
         {{ smallIdentifier(cluster.label) }}
       </span>
+      <span
+        class="custom-color-decoration"
+        :style="{'background': customColor}"
+      />
       <svg
         v-if="showLocalIcon"
         class="cluster-local-logo"
@@ -99,7 +103,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-
   .cluster-icon-menu {
     position: relative;
     align-items: center;
@@ -111,8 +114,8 @@ export default {
   .cluster-pin-icon {
     position: absolute;
     top: -6px;
-    right: -4px;
-    font-size: 12px;
+    right: -7px;
+    font-size: 14px;
     transform: scaleX(-1);
     color: var(--body-text);
   }
@@ -135,6 +138,18 @@ export default {
     font-size: 12px;
     text-transform: uppercase;
 
+    &.custom-color {
+      border-bottom: 4px solid transparent;
+    }
+
+    .custom-color-decoration {
+      height: 4px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      border-radius: 0px 0px 5px 5px;
+    }
+
     &.disabled {
       filter: grayscale(1);
       color: var(--muted);

package/components/CodeMirror.vue

@@ -24,18 +24,23 @@ export default {
     asTextArea: {
       type:    Boolean,
       default: false
-    }
+    },
+    showKeyMapBox: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
     return {
-      codeMirrorRef: null,
-      loaded:        false
+      codeMirrorRef:       null,
+      loaded:              false,
+      showKeyMapCloseIcon: false,
+      removeKeyMapBox:     false,
     };
   },
 
   computed: {
-
     isDisabled() {
       return this.mode === _VIEW;
     },
@@ -70,6 +75,10 @@ export default {
 
       return out;
     },
+
+    keyMapText() {
+      return this.combinedOptions?.keyMap ? this.t(`prefs.keymap.${ this.combinedOptions.keyMap }`) : null;
+    },
   },
 
   created() {
@@ -124,6 +133,14 @@ export default {
       if ( this.$refs.codeMirrorRef ) {
         this.$refs.codeMirrorRef.codemirror.doc.setValue(value);
       }
+    },
+
+    closeKeyMapInfo() {
+      this.removeKeyMapBox = true;
+    },
+
+    onKeyMapMouseOver(v) {
+      this.showKeyMapCloseIcon = v;
     }
   }
 };
@@ -134,18 +151,40 @@ export default {
     class="code-mirror"
     :class="{['as-text-area']: asTextArea}"
   >
-    <codemirror
-      v-if="loaded"
-      ref="codeMirrorRef"
-      :value="value"
-      :options="combinedOptions"
-      :disabled="isDisabled"
-      @ready="onReady"
-      @input="onInput"
-      @changes="onChanges"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
+    <div v-if="loaded">
+      <div
+        v-if="showKeyMapBox && !removeKeyMapBox && keyMapText"
+        class="keymap overlay"
+      >
+        <div
+          v-clean-tooltip="t('codeMirror.keymap.tooltip')"
+          class="label"
+          data-testid="code-mirror-keymap"
+          @mouseover="onKeyMapMouseOver(true)"
+          @mouseleave="onKeyMapMouseOver(false)"
+        >
+          <span>
+            {{ keyMapText }}
+          </span>
+          <i
+            v-if="showKeyMapCloseIcon"
+            class="icon icon-close icon-sm"
+            @click="closeKeyMapInfo"
+          />
+        </div>
+      </div>
+      <codemirror
+        ref="codeMirrorRef"
+        :value="value"
+        :options="combinedOptions"
+        :disabled="isDisabled"
+        @ready="onReady"
+        @input="onInput"
+        @changes="onChanges"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </div>
     <div v-else>
       Loading...
     </div>
@@ -156,6 +195,30 @@ export default {
   .code-mirror {
     z-index: 0;
 
+    .overlay {
+      position: sticky;
+      display: grid;
+      top: 0;
+      float: right;
+      height: 0;
+      z-index: 1;
+
+      .label {
+        border-radius: 2px;
+        border-style: dashed;
+        border-width: 0.1px;
+        margin: 7px 7px 0 0;
+        padding: 7px;
+        color: var(--darker);
+        background-color: var(--overlay-bg);
+        font-size: 12px;
+
+        .icon {
+          cursor: pointer;
+        }
+      }
+    }
+
     .vue-codemirror .CodeMirror {
       height: initial;
       background: none
@@ -248,7 +311,5 @@ export default {
         background-color: var(--primary);
       }
     }
-
   }
-
 </style>

package/components/FixedBanner.vue

@@ -150,6 +150,7 @@ export default {
     <div
       v-if="!showAsDialog"
       class="banner"
+      data-testid="fixed__banner"
       :style="bannerStyle"
       :class="{'banner-consent': consent}"
     >

package/components/ResourceDetail/index.vue

@@ -28,7 +28,6 @@ function modeFor(route) {
 }
 
 async function getYaml(store, model) {
-  const inStore = store.getters['currentStore'](model.type);
   let yaml;
   const opt = { headers: { accept: 'application/yaml' } };
 
@@ -36,9 +35,7 @@ async function getYaml(store, model) {
     yaml = (await model.followLink('view', opt)).data;
   }
 
-  const cleanedYaml = await store.dispatch(`${ inStore }/cleanForDownload`, yaml);
-
-  return cleanedYaml;
+  return model.cleanForDownload(yaml);
 }
 
 export default {

package/components/ResourceYaml.vue

@@ -365,6 +365,8 @@ export default {
     >
       <Footer
         v-if="showFooter"
+        class="footer"
+        :class="{ 'edit': !isView }"
         :mode="mode"
         :errors="errors"
         @save="save"
@@ -408,11 +410,29 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-.flex-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
+  .flex-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .footer {
+    margin-top: 20px;
+    right: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--header-bg);
+
+    // Overrides outlet padding
+    margin-left: -$space-m;
+    margin-right: -$space-m;
+    margin-bottom: -$space-m;
+    padding: $space-s $space-m;
+
+    &.edit {
+      border-top: var(--header-border-size) solid var(--header-border);
+    }
+  }
 </style>
 
 <style lang="scss">
@@ -424,6 +444,10 @@ export default {
   footer .actions {
     text-align: right;
   }
+
+  .spacer-small {
+    padding: 0;
+  }
 }
 
 </style>

package/components/SideNav.vue

@@ -7,16 +7,16 @@ import {
   FAVORITE_TYPES
 } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
-import { addObjects, replaceWith, clear, addObject } from '@shell/utils/array';
+import {
+  addObjects, replaceWith, clear, addObject, sameContents
+} from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 
-import {
-  HCI, CATALOG, UI, SCHEMA, COUNT
-} from '@shell/config/types';
+import { HCI, CATALOG, UI, SCHEMA } from '@shell/config/types';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import { BASIC, FAVORITE, USED } from '@shell/store/type-map';
+import { TYPE_MODES } from '@shell/store/type-map';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
 
@@ -31,6 +31,7 @@ export default {
   },
 
   created() {
+    // Ensure that changes to resource that change often don't resort to spamming redraw of the side nav
     this.queueUpdate = debounce(this.getGroups, 500);
 
     this.getGroups();
@@ -42,24 +43,25 @@ export default {
   },
 
   watch: {
-    counts(a, b) {
-      if ( a !== b ) {
-        this.queueUpdate();
-      }
-    },
 
-    allSchemas(a, b) {
-      if ( a !== b ) {
+    /**
+     * Keep this simple, we're only interested in new / removed schemas
+     */
+    allSchemasIds(a, b) {
+      if ( !sameContents(a, b) ) {
         this.queueUpdate();
       }
     },
 
-    allNavLinks(a, b) {
-      if ( a !== b ) {
+    allNavLinksIds(a, b) {
+      if ( !sameContents(a, b) ) {
         this.queueUpdate();
       }
     },
 
+    /**
+     * Note - There's no watch on prefs, so this only catches in session changes
+     */
     favoriteTypes(a, b) {
       if ( !isEqual(a, b) ) {
         this.queueUpdate();
@@ -73,23 +75,24 @@ export default {
     },
 
     productId(a, b) {
-      if ( !isEqual(a, b) ) {
+      if ( a !== b) {
         // Immediately update because you'll see it come in later
         this.getGroups();
       }
     },
 
+    // Queue namespaceMode and namespaces
+    // Changes to namespaceMode can also change namespaces, so keep this simple and execute both in a shortened queue
+
     namespaceMode(a, b) {
-      if ( !isEqual(a, b) ) {
-        // Immediately update because you'll see it come in later
-        this.getGroups();
+      if ( a !== b ) {
+        this.queueUpdate();
       }
     },
 
     namespaces(a, b) {
       if ( !isEqual(a, b) ) {
-        // Immediately update because you'll see it come in later
-        this.getGroups();
+        this.queueUpdate();
       }
     },
 
@@ -100,13 +103,6 @@ export default {
       }
     },
 
-    product(a, b) {
-      if ( !isEqual(a, b) ) {
-        // Immediately update because you'll see it come in later
-        this.getGroups();
-      }
-    },
-
     $route(a, b) {
       this.$nextTick(() => this.syncNav());
     },
@@ -174,7 +170,7 @@ export default {
       return this.$store.getters['cluster/all'](UI.NAV_LINK);
     },
 
-    allSchemas() {
+    allSchemasIds() {
       const managementReady = this.managementReady;
       const product = this.currentProduct;
 
@@ -182,33 +178,19 @@ export default {
         return [];
       }
 
-      return this.$store.getters[`${ product.inStore }/all`](SCHEMA);
-    },
-
-    counts() {
-      const managementReady = this.managementReady;
-      const product = this.currentProduct;
-
-      if ( !managementReady || !product ) {
-        return {};
-      }
-
-      const inStore = product.inStore;
-
-      // So that there's something to watch for updates
-      if ( this.$store.getters[`${ inStore }/haveAll`](COUNT) ) {
-        const counts = this.$store.getters[`${ inStore }/all`](COUNT)[0].counts;
-
-        return counts;
-      }
-
-      return {};
+      // This does take some up-front time, however avoids an even more costly getGroups call
+      return this.$store.getters[`${ product.inStore }/all`](SCHEMA).map((s) => s.id).sort();
     },
 
     namespaces() {
       return this.$store.getters['activeNamespaceCache'];
     },
+
+    allNavLinksIds() {
+      return this.allNavLinks.map((a) => a.id);
+    },
   },
+
   methods: {
     /**
      * Fetch navigation by creating groups from product schemas
@@ -227,13 +209,6 @@ export default {
       }
 
       const currentProduct = this.$store.getters['productId'];
-      let namespaces = null;
-
-      if ( !this.$store.getters['isAllNamespaces'] ) {
-        const namespacesObject = this.$store.getters['namespaces']();
-
-        namespaces = Object.keys(namespacesObject);
-      }
 
       // Always show cluster-level types, regardless of the namespace filter
       const namespaceMode = 'both';
@@ -255,7 +230,8 @@ export default {
       // This should already have come into the list from above, but in case it hasn't...
       addObject(loadProducts, currentProduct);
 
-      this.getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap);
+      this.getProductsGroups(out, loadProducts, namespaceMode, productMap);
+
       this.getExplorerGroups(out);
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
@@ -263,12 +239,12 @@ export default {
       this.gettingGroups = false;
     },
 
-    getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap) {
+    getProductsGroups(out, loadProducts, namespaceMode, productMap) {
       const clusterId = this.$store.getters['clusterId'];
       const currentType = this.$route.params.resource || '';
 
       for ( const productId of loadProducts ) {
-        const modes = [BASIC];
+        const modes = [TYPE_MODES.BASIC];
 
         if ( productId === NAVLINKS ) {
           // Navlinks produce their own top-level nav items so don't need to show it as a product.
@@ -276,14 +252,16 @@ export default {
         }
 
         if ( productId === EXPLORER ) {
-          modes.push(FAVORITE);
-          modes.push(USED);
+          modes.push(TYPE_MODES.FAVORITE);
+          modes.push(TYPE_MODES.USED);
         }
 
-        for ( const mode of modes ) {
-          const types = this.$store.getters['type-map/allTypes'](productId, mode) || {};
+        // Get all types for all modes
+        const typesByMode = this.$store.getters['type-map/allTypes'](productId, modes);
 
-          const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, namespaces, currentType);
+        for ( const mode of modes ) {
+          const types = typesByMode[mode] || {};
+          const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, currentType);
 
           if ( productId === EXPLORER || !this.isExplorer ) {
             addObjects(out, more);

package/components/SortableTable/index.vue

@@ -906,7 +906,7 @@ export default {
 <template>
   <div
     ref="container"
-    data-testid="cluster-list-container"
+    :data-testid="componentTestid + '-list-container'"
   >
     <div
       :class="{'titled': $slots.title && $slots.title.length}"

package/components/YamlEditor.vue

@@ -229,6 +229,7 @@ export default {
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
       :options="codeMirrorOptions"
+      :showKeyMapBox="true"
       :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"

package/components/__tests__/CodeMirror.spec.ts

@@ -0,0 +1,99 @@
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import { _EDIT, _YAML } from '@shell/config/query-params';
+
+describe('component: CodeMirror.vue', () => {
+  let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
+
+  const options = {
+    readOnly: false,
+    gutters:  [
+      'CodeMirror-lint-markers',
+      'CodeMirror-foldgutter'
+    ],
+    mode:            'yaml',
+    lint:            true,
+    lineNumbers:     true,
+    styleActiveLine: true,
+    tabSize:         2,
+    indentWithTabs:  false,
+    cursorBlinkRate: 530,
+    extraKeys:       { 'Ctrl-Space': 'autocomplete' }
+  };
+
+  const mountOptions = {
+    propsData: {
+      value:         '',
+      mode:          _EDIT,
+      options,
+      asTextArea:    false,
+      showKeyMapBox: true,
+    },
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  () => 'Vim',
+          'prefs/get':               () => 'Vim',
+          'prefs/theme':             jest.fn(),
+        }
+      },
+      $route:  { query: { AS: _YAML } },
+      $router: { applyQuery: jest.fn() },
+    },
+  };
+
+  describe('keyMap info', () => {
+    (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
+      resolve(true);
+    });
+
+    wrapper = shallowMount(
+      CodeMirror,
+      mountOptions,
+    );
+
+    it(`should show keyMap preference`, async() => {
+      await wrapper.vm.$nextTick();
+
+      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+      const closeIcon = keyMapBox.find('.icon');
+
+      expect(keyMapBox.element.textContent).toContain('Vim');
+      expect(closeIcon.element).toBeUndefined();
+    });
+
+    it(`should show keyMap close icon on mouse over`, async() => {
+      await wrapper.vm.$nextTick();
+
+      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      keyMapBox.trigger('mouseover');
+      await wrapper.vm.$nextTick();
+
+      const closeIcon = keyMapBox.find('.icon');
+
+      expect(closeIcon.element).toBeDefined();
+    });
+
+    it(`should remove keyMap box`, async() => {
+      await wrapper.vm.$nextTick();
+
+      let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      keyMapBox.trigger('mouseover');
+      await wrapper.vm.$nextTick();
+
+      const closeIcon = keyMapBox.find('.icon');
+
+      closeIcon.element.click();
+      await wrapper.vm.$nextTick();
+
+      keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      expect(keyMapBox.element).toBeUndefined();
+    });
+  });
+});