@rancher/shell 0.3.23 → 0.3.25

package/rancher-components/StringList/StringList.vue

@@ -30,9 +30,9 @@ const CLASS = {
  * Manage a list of strings
  */
 export default Vue.extend({
-  components: { LabeledInput },
 
-  name: 'StringList',
+  name:       'StringList',
+  components: { LabeledInput },
 
   props: {
     /**
@@ -85,11 +85,11 @@ export default Vue.extend({
   },
   data() {
     return {
-      value:             null as string | null,
-      selected:          null as string | null,
-      isEditItem:        null as string | null,
-      isCreateItem:      false,
-      errors:            { duplicate: false } as Record<Error, boolean>
+      value:        null as string | null,
+      selected:     null as string | null,
+      editedItem:   null as string | null,
+      isCreateItem: false,
+      errors:       { duplicate: false } as Record<Error, boolean>
     };
   },
 
@@ -100,8 +100,8 @@ export default Vue.extend({
      */
     errorMessagesArray(): string[] {
       return (Object.keys(this.errors) as Error[])
-        .filter(f => !!(this.errors)[f])
-        .map(k => this.errorMessages[k]);
+        .filter((f) => this.errors[f] && this.errorMessages[f])
+        .map((k) => this.errorMessages[k]);
     },
   },
 
@@ -113,23 +113,35 @@ export default Vue.extend({
       this.toggleEditMode(false);
       this.toggleCreateMode(false);
     },
+    value(val) {
+      this.$emit('type:item', val);
+    },
+    errors: {
+      handler(val) {
+        this.$emit('errors', val);
+      },
+      deep: true
+    }
   },
 
   methods: {
     onChange(value: string) {
       this.value = value;
-      /**
-       * Remove duplicate error when a new value is typed
-       */
+
+      const items = [
+        ...this.items,
+        this.value
+      ];
+
       this.toggleError(
         'duplicate',
-        false,
-        this.isCreateItem ? INPUT.create : INPUT.edit,
+        hasDuplicatedStrings(items, this.caseSensitive),
+        this.isCreateItem ? INPUT.create : INPUT.edit
       );
     },
 
     onSelect(item: string) {
-      if (this.isCreateItem || this.isEditItem === item) {
+      if (this.readonly || this.isCreateItem || this.editedItem === item) {
         return;
       }
       this.selected = item;
@@ -160,7 +172,7 @@ export default Vue.extend({
     },
 
     onClickEmptyBody() {
-      if (!this.isCreateItem && !this.isEditItem) {
+      if (!this.isCreateItem && !this.editedItem) {
         this.toggleCreateMode(true);
       }
     },
@@ -176,38 +188,43 @@ export default Vue.extend({
 
         return;
       }
-      if (this.isEditItem) {
+      if (this.editedItem) {
+        this.deleteAndSelectNext(this.editedItem);
         this.toggleEditMode(false);
 
         return;
       }
       if (this.selected) {
-        const index = findStringIndex(this.items, this.selected, false);
+        this.deleteAndSelectNext(this.selected);
+      }
+    },
 
-        if (index !== -1) {
-          /**
-           * Select the next item in the list when an item is to be deleted.
-           */
-          const item = (this.items[index + 1] || this.items[index - 1]);
+    deleteAndSelectNext(currItem: string) {
+      const index = findStringIndex(this.items, currItem, false);
+
+      if (index !== -1) {
+        /**
+         * Select the next item in the list.
+         */
+        const item = (this.items[index + 1] || this.items[index - 1]);
 
-          this.onSelect(item);
-          this.setFocus(item);
+        this.onSelect(item);
+        this.setFocus(item);
 
-          this.deleteItem(this.items[index]);
-        }
+        this.deleteItem(this.items[index]);
       }
     },
 
     setFocus(refId: string) {
-      this.$nextTick(() => this.getElemByRef(refId)?.focus());
+      this.$nextTick(() => (this.getElemByRef(refId) as Vue & HTMLElement)?.focus());
     },
 
     /**
      * Move scrollbar when the selected item is over the top or bottom side of the box
      */
     moveScrollbar(arrow: Arrow, value?: number) {
-      const box = this.getElemByRef(BOX);
-      const item = this.getElemByRef(this.selected || '');
+      const box = this.getElemByRef(BOX) as HTMLElement;
+      const item = this.getElemByRef(this.selected || '') as HTMLElement;
 
       if (box && item && item.className.includes(CLASS.item)) {
         const boxRect = box.getClientRects()[0];
@@ -229,13 +246,14 @@ export default Vue.extend({
      */
     toggleError(type: Error, val: boolean, refId?: string) {
       this.errors[type] = val;
+
       if (refId) {
         this.toggleErrorClass(refId, val);
       }
     },
 
     toggleErrorClass(refId: string, val: boolean) {
-      const input = this.getElemByRef(refId)?.$el;
+      const input = (this.getElemByRef(refId) as Vue)?.$el;
 
       if (input) {
         if (val) {
@@ -250,7 +268,11 @@ export default Vue.extend({
      * Show/Hide the input line to create new item
      */
     toggleCreateMode(show: boolean) {
+      if (this.readonly) {
+        return;
+      }
       if (show) {
+        this.toggleEditMode(false);
         this.value = '';
 
         this.isCreateItem = true;
@@ -268,31 +290,34 @@ export default Vue.extend({
      * Show/Hide the in-line editing to edit an existing item
      */
     toggleEditMode(show: boolean, item?: string) {
+      if (this.readonly) {
+        return;
+      }
       if (show) {
         this.toggleCreateMode(false);
-        this.value = this.isEditItem;
+        this.value = this.editedItem;
 
-        this.isEditItem = item || '';
+        this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
         this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.isEditItem = null;
+        this.editedItem = null;
       }
     },
 
     getElemByRef(id: string) {
       const ref = this.$refs[id];
 
-      return (Array.isArray(ref) ? ref[0] : ref) as any;
+      return Array.isArray(ref) ? ref[0] : ref;
     },
 
     /**
      * Create a new item and insert in the items list
      */
-    saveItem() {
+    saveItem(closeInput = true) {
       const value = this.value?.trim();
 
       if (value) {
@@ -301,21 +326,20 @@ export default Vue.extend({
           value,
         ];
 
-        if (hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.toggleError('duplicate', true, INPUT.create);
-
-          return;
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
         }
+      }
 
-        this.updateItems(items);
+      if (closeInput) {
+        this.toggleCreateMode(false);
       }
-      this.toggleCreateMode(false);
     },
 
     /**
      * Update an existing item in the items list
      */
-    updateItem(item: string) {
+    updateItem(item: string, closeInput = true) {
       const value = this.value?.trim();
 
       if (value) {
@@ -326,22 +350,21 @@ export default Vue.extend({
           items[index] = value;
         }
 
-        if (hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.toggleError('duplicate', true, INPUT.edit);
-
-          return;
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
         }
+      }
 
-        this.updateItems(items);
+      if (closeInput) {
+        this.toggleEditMode(false);
       }
-      this.toggleEditMode(false);
     },
 
     /**
      * Remove an item from items list
      */
     deleteItem(item?: string) {
-      const items = this.items.filter(f => f !== item);
+      const items = this.items.filter((f) => f !== item);
 
       this.updateItems(items);
     },
@@ -387,19 +410,20 @@ export default Vue.extend({
         @blur="onSelectLeave(item)"
       >
         <span
-          v-if="!isEditItem || isEditItem !== item"
+          v-if="!editedItem || editedItem !== item"
           class="label static"
         >
           {{ item }}
         </span>
         <LabeledInput
-          v-if="isEditItem && isEditItem === item"
+          v-if="editedItem && editedItem === item"
           ref="item-edit"
+          :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
           @input="onChange($event)"
-          @blur.prevent="toggleEditMode(false)"
-          @keydown.native.enter="updateItem(item)"
+          @blur.prevent="updateItem(item)"
+          @keydown.native.enter="updateItem(item, !errors.duplicate)"
         />
       </div>
       <div
@@ -408,12 +432,14 @@ export default Vue.extend({
       >
         <LabeledInput
           ref="item-create"
+          data-testid="item-create"
           class="create-input static"
           type="text"
           :value="value"
           :placeholder="placeholder"
           @input="onChange($event)"
-          @keydown.native.enter="saveItem"
+          @blur.prevent="saveItem"
+          @keydown.native.enter="saveItem(!errors.duplicate)"
         />
       </div>
     </div>
@@ -427,25 +453,32 @@ export default Vue.extend({
         class="action-buttons"
       >
         <button
+          data-testid="button-remove"
           class="btn btn-sm role-tertiary remove-button"
-          :disabled="!selected && !isCreateItem && !isEditItem"
+          :disabled="!selected && !isCreateItem && !editedItem"
           @mousedown.prevent="onClickMinusButton"
         >
           <span class="icon icon-minus icon-sm" />
         </button>
         <button
+          data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem"
+          :disabled="isCreateItem || editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />
         </button>
       </div>
       <div class="messages">
-        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
+        <i
+          v-if="errorMessagesArray.length > 0"
+          data-testid="i-warning-icon"
+          class="icon icon-warning icon-lg"
+        />
         <span
           v-for="(msg, idx) in errorMessagesArray"
           :key="idx"
+          :data-testid="`span-error-message-${msg}`"
           class="error"
         >
           {{ idx > 0 ? '; ' : '' }}
@@ -499,6 +532,7 @@ export default Vue.extend({
         width: auto;
         user-select: none;
         overflow: hidden;
+        white-space: no-wrap;
         text-overflow: ellipsis;
         padding-top: 1px;
       }

package/store/index.js

@@ -568,6 +568,10 @@ export const getters = {
     return getters['isSingleProduct'] && cluster.isHarvester && !getters['isRancherInHarvester'];
   },
 
+  showTopLevelMenu(getters) {
+    return getters['isRancherInHarvester'] || getters['isMultiCluster'] || !getters['isSingleProduct'];
+  },
+
   targetRoute(state) {
     return state.targetRoute;
   },

package/store/prefs.js

@@ -1,7 +1,7 @@
-import Vue from 'vue';
+import { SETTING } from '@shell/config/settings';
 import { MANAGEMENT, STEVE } from '@shell/config/types';
 import { clone } from '@shell/utils/object';
-import { SETTING } from '@shell/config/settings';
+import Vue from 'vue';
 
 const definitions = {};
 /**
@@ -54,6 +54,7 @@ export const NAMESPACE_FILTERS = create('ns-by-cluster', {}, { parseJSON });
 export const WORKSPACE = create('workspace', '');
 export const EXPANDED_GROUPS = create('open-groups', ['cluster', 'policy', 'rbac', 'serviceDiscovery', 'storage', 'workload'], { parseJSON });
 export const FAVORITE_TYPES = create('fav-type', [], { parseJSON });
+export const PINNED_CLUSTERS = create('pinned-clusters', [], { parseJSON });
 export const GROUP_RESOURCES = create('group-by', 'namespace');
 export const DIFF = create('diff', 'unified', { options: ['unified', 'split'] });
 export const THEME = create('theme', 'auto', {
@@ -115,8 +116,7 @@ export const PROVISIONER = create('provisioner', _RKE2, { options: [_RKE1, _RKE2
 export const PSP_DEPRECATION_BANNER = create('hide-psp-deprecation-banner', false, { parseJSON });
 
 // Maximum number of clusters to show in the slide-in menu
-export const MENU_MAX_CLUSTERS = create('menu-max-clusters', 4, { options: [2, 3, 4, 5, 6, 7, 8, 9, 10], parseJSON });
-
+export const MENU_MAX_CLUSTERS = 10;
 // Prompt for confirm when scaling down node pool in GUI and save the pref
 export const SCALE_POOL_PROMPT = create('scale-pool-prompt', null, { parseJSON });
 // --------------------

package/store/type-map.js

@@ -593,18 +593,8 @@ export const getters = {
         }
 
         const label = typeObj.labelKey ? rootGetters['i18n/t'](typeObj.labelKey) || typeObj.label : typeObj.label;
-        const virtual = !!typeObj.virtual;
-        let icon = typeObj.icon;
 
-        if ( (!virtual || typeObj.isSpoofed ) && !icon ) {
-          if ( namespaced ) {
-            icon = 'folder';
-          } else {
-            icon = 'globe';
-          }
-        }
-
-        const labelDisplay = highlightLabel(label, icon, typeObj.count, typeObj.schema);
+        const labelDisplay = highlightLabel(label, typeObj.count, typeObj.schema);
 
         if ( !labelDisplay ) {
           // Search happens in highlight and returns null if not found
@@ -711,7 +701,7 @@ export const getters = {
         return group;
       }
 
-      function highlightLabel(original, icon, count, schema) {
+      function highlightLabel(original, count, schema) {
         let label = escapeHtml(original);
 
         if ( searchRegex ) {
@@ -735,10 +725,6 @@ export const getters = {
           }
         }
 
-        if ( icon ) {
-          label = `<i class="icon icon-fw icon-${ icon }"></i>${ label }`;
-        }
-
         return label;
       }
     };

package/types/shell/index.d.ts

@@ -2049,8 +2049,8 @@ declare namespace _default {
     namespace methods {
         function done(): any;
         function done(): any;
-        function conflict(): any;
-        function conflict(): any;
+        function conflict(): Promise<any>;
+        function conflict(): Promise<any>;
         function save(buttonDone: any, url: any, depth?: number): any;
         function save(buttonDone: any, url: any, depth?: number): any;
         function actuallySave(url: any): Promise<void>;
@@ -2069,7 +2069,7 @@ declare var _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any
     errors: any[];
 }, {
     done(): any;
-    conflict(): any;
+    conflict(): Promise<any>;
     save(buttonDone: any, url: any, depth?: number): any;
     actuallySave(url: any): Promise<void>;
     setErrors(errors: any): void;
@@ -2407,7 +2407,7 @@ export const SELF: "__[[SELF]]__";
 declare module '@shell/plugins/dashboard-store/normalize' {
 export function keyFieldFor(type: any): string;
 export function normalizeType(type: any): any;
-export function handleConflict(initialValueJSON: any, value: any, liveValue: any, rootGetters: any, store: any): false | any[];
+export function handleConflict(initialValueJSON: any, value: any, liveValue: any, rootGetters: any, store: any, storeNamespace: any): Promise<false | any[]>;
 export const KEY_FIELD_FOR: {
     [x: number]: string;
     default: string;
@@ -2836,6 +2836,7 @@ export const NAMESPACE_FILTERS: any;
 export const WORKSPACE: any;
 export const EXPANDED_GROUPS: any;
 export const FAVORITE_TYPES: any;
+export const PINNED_CLUSTERS: any;
 export const GROUP_RESOURCES: any;
 export const DIFF: any;
 export const THEME: any;
@@ -2868,7 +2869,7 @@ export const _RKE1: "rke1";
 export const _RKE2: "rke2";
 export const PROVISIONER: any;
 export const PSP_DEPRECATION_BANNER: any;
-export const MENU_MAX_CLUSTERS: any;
+export const MENU_MAX_CLUSTERS: 10;
 export const SCALE_POOL_PROMPT: any;
 export function state(): {
     cookiesLoaded: boolean;
@@ -3052,6 +3053,14 @@ export function filterOnlyKubernetesClusters(mgmtClusters: any, store: any): any
 export function isHarvesterCluster(mgmtCluster: any): boolean;
 export function isHarvesterSatisfiesVersion(version?: string): any;
 export function filterHiddenLocalCluster(mgmtClusters: any, store: any): any;
+/**
+ * Shortens an input string based on the number of segments it contains.
+ * @param {string} input - The input string to be shortened.
+ * @returns {string} - The shortened string.
+ * @example smallIdentifier('local') => 'lcl'
+ * @example smallIdentifier('word-wide-web') => 'www'
+ */
+export function abbreviateClusterName(input: string): string;
 }
 
 // @shell/utils/color
@@ -3605,35 +3614,35 @@ export namespace KEY {
 }
 }
 
-// @shell/utils/poller
+// @shell/utils/poller-sequential
 
-declare module '@shell/utils/poller' {
-export default class Poller {
+declare module '@shell/utils/poller-sequential' {
+export default class PollerSequential {
     constructor(fn: any, pollRateMs: any, maxRetries?: number);
     fn: any;
     pollRateMs: any;
     maxRetries: number;
-    intervalId: any;
+    timeoutId: any;
     tryCount: number;
     start(): void;
     stop(): void;
+    _poll(): void;
     _intervalMethod(): Promise<void>;
 }
 }
 
-// @shell/utils/poller-sequential
+// @shell/utils/poller
 
-declare module '@shell/utils/poller-sequential' {
-export default class PollerSequential {
+declare module '@shell/utils/poller' {
+export default class Poller {
     constructor(fn: any, pollRateMs: any, maxRetries?: number);
     fn: any;
     pollRateMs: any;
     maxRetries: number;
-    timeoutId: any;
+    intervalId: any;
     tryCount: number;
     start(): void;
     stop(): void;
-    _poll(): void;
     _intervalMethod(): Promise<void>;
 }
 }
@@ -3908,6 +3917,9 @@ export function splitObjectPath(path: any): any;
 export function joinObjectPath(ary: any): string;
 export function shortenedImage(image: any): any;
 export function isIpv4(ip: any): boolean;
+export function sanitizeKey(k: any): any;
+export function sanitizeValue(v: any): any;
+export function sanitizeIP(v: any): any;
 export namespace CHARSET {
     export { num as NUMERIC };
     export const NO_VOWELS: string;

package/utils/__tests__/cluster.test.ts

@@ -0,0 +1,55 @@
+import { abbreviateClusterName } from '@shell/utils/cluster';
+
+describe('fx: abbreviateClusterName', () => {
+  it.each([
+    ['local', 'lcl'],
+    ['world-wide-web', 'www'],
+    ['a', 'a'],
+    ['ab', 'ab'],
+    ['abc', 'abc'],
+    ['', ''],
+    ['1', '1'],
+    ['12', '12'],
+    ['123', '123'],
+    ['a1', 'a1'],
+    ['aa1', 'aa1'],
+    ['aaa1', 'aa1'],
+    ['a-b', 'a-b'],
+    ['1-2', '1-2'],
+    ['a-b-c', 'abc'],
+    ['abc-def-ghi', 'adg'],
+    ['abcd-efgh', 'adh'],
+    ['a-bc', 'abc'],
+    ['ab-c', 'abc'],
+    ['ab-cd', 'abd'],
+    ['a-bcd', 'abd'],
+    ['abc-d', 'acd'],
+    ['0123-4567-89ab-cdef', '048'],
+    ['0123-4567-89ab-cdef-ghij', '048'],
+    ['0123-4567-8901-2345', '048'],
+    ['0123-4567-8901-2345-6789', '048'],
+    ['a1b', 'a1b'],
+    ['a1b2', 'a1b'],
+    ['ab12cd34', 'a1c'],
+    ['test-cluster-one', 'tco'],
+    ['test-cluster-1', 'tc1'],
+    ['customer-support-team-1', 'cst'],
+    ['customer-support-team-one', 'cst'],
+    ['customer-support-team-prod', 'cst'],
+    ['customer-support-team-dev', 'cst'],
+    ['customer-support-team-prod-1', 'cst'],
+    ['customer-support-team-dev-1', 'cst'],
+    ['customer-support-team-prod-2', 'cst'],
+    ['customer-support-team-dev-2', 'cst'],
+
+    ['s322', 's32'],
+    ['sowmya2', 'sa2'],
+    ['sowmya4', 'sa4'],
+    ['sowmya', 'sma'],
+    ['sowmyatest4', 'st4'],
+  ])('should evaluate %p as %p', (value, expected) => {
+    const result = abbreviateClusterName(value);
+
+    expect(result).toStrictEqual(expected);
+  });
+});

package/utils/__tests__/object.test.ts

@@ -1,5 +1,5 @@
 import {
-  clone, get, getter, isEmpty, toDictionary
+  clone, get, getter, isEmpty, toDictionary, remove
 } from '@shell/utils/object';
 
 describe('fx: get', () => {
@@ -129,7 +129,7 @@ describe('fx: isEmpty', () => {
   });
 });
 
-describe('fX: toDictionary', () => {
+describe('fx: toDictionary', () => {
   it('should return a dictionary from an array', () => {
     const array = ['a', 'b', 'c'];
     const asd = (value: string) => value.toUpperCase();
@@ -142,3 +142,22 @@ describe('fX: toDictionary', () => {
     expect(result).toStrictEqual(expectation);
   });
 });
+
+describe('fx: remove', () => {
+  it.each([
+    [{}, '', {}],
+    [{}, 'not_there', {}],
+    [{}, 'not.there.again', {}],
+    [{ level1: true }, 'level1', {}],
+    [{ level1: true }, 'not_there', { level1: true }],
+    [{ level1: { level2: true } }, 'level1.level2', { level1: { } }],
+    [{ level1: { level2: true, other: true } }, 'level1.level2', { level1: { other: true } }],
+    [{ level1: { level2: true }, other: true }, 'level1.level2', { level1: { }, other: true }],
+    [{ level1: { level2: true }, other: true }, 'not_there.level1.level2', { level1: { level2: true }, other: true }],
+    [{ level1: { level2: true }, other: true }, 'level1', { other: true }],
+  ])('should evaluate %p as %p', (obj, path, expected) => {
+    const result = remove(obj, path);
+
+    expect(result).toStrictEqual(expected);
+  });
+});