@rancher/shell 0.3.23 → 0.3.25

package/pages/prefs.vue

@@ -8,9 +8,11 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import { Checkbox } from '@components/Form/Checkbox';
 import LandingPagePreference from '@shell/components/LandingPagePreference';
 import {
-  mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS,
+  mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE,
   VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER, SCALE_POOL_PROMPT
+  , MENU_MAX_CLUSTERS
 } from '@shell/store/prefs';
+
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
 import LocaleSelector from '@shell/components/LocaleSelector';
@@ -34,7 +36,6 @@ export default {
     perPage:           mapPref(ROWS_PER_PAGE),
     hideDesc:          mapPref(HIDE_DESC),
     showPreRelease:    mapPref(SHOW_PRE_RELEASE),
-    menuMaxClusters:   mapPref(MENU_MAX_CLUSTERS),
     pluginDeveloper:   mapPref(PLUGIN_DEVELOPER),
     scalingDownPrompt: mapPref(SCALE_POOL_PROMPT),
 
@@ -254,17 +255,6 @@ export default {
             placeholder="Select a row count"
           />
         </div>
-        <div class="col span-4">
-          <LabeledSelect
-            v-model.number="menuMaxClusters"
-            data-testid="prefs__displaySetting__menuMaxClusters"
-            :label="t('prefs.clusterToShow.label')"
-            :options="menuClusterOptions"
-            option-key="value"
-            option-label="label"
-            placeholder="Select a row count"
-          />
-        </div>
       </div>
     </div>
     <!-- Confirmation setting -->

package/plugins/dashboard-store/normalize.js

@@ -20,10 +20,10 @@ export function normalizeType(type) {
 // Detect and resolve conflicts from a 409 response.
 // If they are resolved, return a false-y value
 // Else they can't be resolved, return an array of errors to show to the user.
-export function handleConflict(initialValueJSON, value, liveValue, rootGetters, store) {
-  const orig = store.dispatch(`cleanForDiff`, initialValueJSON);
-  const user = store.dispatch(`cleanForDiff`, value.toJSON());
-  const cur = store.dispatch(`cleanForDiff`, liveValue.toJSON());
+export async function handleConflict(initialValueJSON, value, liveValue, rootGetters, store, storeNamespace) {
+  const orig = await store.dispatch(`${ storeNamespace }/cleanForDiff`, initialValueJSON, { root: true });
+  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, value.toJSON(), { root: true });
+  const cur = await store.dispatch(`${ storeNamespace }/cleanForDiff`, liveValue.toJSON(), { root: true });
 
   const bgChange = changeset(orig, cur);
   const userChange = changeset(orig, user);

package/plugins/dashboard-store/resource-class.js

@@ -1464,7 +1464,7 @@ export default class Resource {
   }
 
   async saveYaml(yaml) {
-    this._saveYaml(yaml);
+    await this._saveYaml(yaml);
   }
 
   async _saveYaml(yaml) {

package/plugins/int-number.js

@@ -5,9 +5,12 @@ export default Vue.directive('intNumber', {
     el.addEventListener('keypress', (e) => {
       e = e || window.event;
       const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const re = /\d/;
+      const inputChar = String.fromCharCode(charcode);
 
-      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+      // Allow digits, minus sign at the beginning, and Ctrl key combinations
+      const re = /^-?\d*$/;
+
+      if (!re.test(inputChar) && charcode > 9 && !e.ctrlKey) {
         if (e.preventDefault) {
           e.preventDefault();
         } else {

package/plugins/positive-int-number.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+
+export default Vue.directive('positiveIntNumber', {
+  inserted(el) {
+    el.addEventListener('keypress', (e) => {
+      e = e || window.event;
+      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
+      const re = /^\d+$/; // Use regex to match positive numbers
+
+      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+        if (e.preventDefault) {
+          e.preventDefault();
+        } else {
+          e.returnValue = false;
+        }
+      }
+    });
+  }
+});

package/plugins/steve/__tests__/getters.spec.ts

@@ -68,9 +68,15 @@ describe('steve: getters', () => {
     it('returns a string with a single filter statement applied if a single filter statement is applied', () => {
       expect(urlOptionsGetter('foo', { filter: { bar: 'baz' } })).toBe('foo?bar=baz');
     });
+    it('returns a string with a single filter statement applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz' } })).toBe('/v1/foo?filter=bar=baz&exclude=metadata.managedFields');
+    });
     it('returns a string with a multiple filter statements applied if a single filter statement is applied', () => {
       expect(urlOptionsGetter('foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('foo?bar=baz&far=faz');
     });
+    it('returns a string with a multiple filter statements applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?filter=bar=baz&far=faz&exclude=metadata.managedFields');
+    });
     it('returns a string with an exclude statement for "bar" and "metadata.managedFields" if excludeFields is a single element array with the string "bar" and the url starts with "/v1/"', () => {
       expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo?exclude=bar&exclude=metadata.managedFields');
     });
@@ -86,8 +92,17 @@ describe('steve: getters', () => {
     it('returns a string with a sorting criteria if the sort option is provided', () => {
       expect(urlOptionsGetter('foo', { sortBy: 'bar' })).toBe('foo?sort=bar');
     });
+    it('returns a string with a sorting criteria formatted for steve if the sort option is provided and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=bar');
+    });
     it('returns a string with a sorting criteria if the sort option is provided and an order if sortOrder is provided', () => {
       expect(urlOptionsGetter('foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('foo?sort=bar&order=baz');
     });
+    it('returns a string with a sorting criteria formatted for steve if the sort option is provided and an order if sortOrder is provided and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=bar');
+    });
+    it('returns a string with a sorting criteria formatted for steve if the sort option is provided and an order if sortOrder is "desc" and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'desc' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=-bar');
+    });
   });
 });

package/plugins/steve/getters.js

@@ -31,8 +31,8 @@ export default {
     const isSteve = parsedUrl.path.startsWith('/v1');
 
     // Filter
-    // Steve's filter options work differently nowadays (https://github.com/rancher/steve#filter) #9341
     if ( opt.filter ) {
+      url += `${ (url.includes('?') ? '&' : '?') }`;
       const keys = Object.keys(opt.filter);
 
       keys.forEach((key) => {
@@ -42,9 +42,18 @@ export default {
           vals = [vals];
         }
 
-        vals.forEach((val) => {
-          url += `${ (url.includes('?') ? '&' : '?') + encodeURIComponent(key) }=${ encodeURIComponent(val) }`;
+        // Steve's filter options now support more complex filtering not yet implemented here #9341
+        if (isSteve) {
+          url += `${ (url.includes('filter=') ? '&' : 'filter=') }`;
+        }
+
+        const filterStrings = vals.map((val) => {
+          return `${ encodeURI(key) }=${ encodeURI(val) }`;
         });
+        const urlEnding = url.charAt(url.length - 1);
+        const nextStringConnector = ['&', '?', '='].includes(urlEnding) ? '' : '&';
+
+        url += `${ nextStringConnector }${ filterStrings.join('&') }`;
       });
     }
 
@@ -82,18 +91,21 @@ export default {
     // End: Limit
 
     // Sort
-    // Steve's sort options work differently nowadays (https://github.com/rancher/steve#sort) #9341
+    // Steve's sort options supports multi-column sorting and column specific sort orders, not implemented yet #9341
     const sortBy = opt.sortBy;
+    const orderBy = opt.sortOrder;
 
     if ( sortBy ) {
-      url += `${ url.includes('?') ? '&' : '?' }sort=${ encodeURIComponent(sortBy) }`;
+      if (isSteve) {
+        url += `${ url.includes('?') ? '&' : '?' }sort=${ (orderBy === 'desc' ? '-' : '') + encodeURI(sortBy) }`;
+      } else {
+        url += `${ url.includes('?') ? '&' : '?' }sort=${ encodeURI(sortBy) }`;
+        if ( orderBy ) {
+          url += `${ url.includes('?') ? '&' : '?' }order=${ encodeURI(orderBy) }`;
+        }
+      }
     }
 
-    const orderBy = opt.sortOrder;
-
-    if ( orderBy ) {
-      url += `${ url.includes('?') ? '&' : '?' }order=${ encodeURIComponent(orderBy) }`;
-    }
     // End: Sort
 
     return url;

package/public/index.html

@@ -13,8 +13,10 @@
     <div id="app">
         <script>
             (() => {
-                const isDark = document.cookie.includes('R_THEME=auto') ?
-                    // User selected automatic theme, so use pcs (set when ui previously loaded and is either os theme or time of day based
+                // Has the user chosen to auto detect the theme.... or if they haven't chosen anything.. --> check the auto-detected theme via R_PCS
+                // Otherwise check if they've specifically selected a theme --> R_THEME
+                const isDark = document.cookie.includes('R_THEME=auto') || !document.cookie.includes('R_THEME') ?
+                    // User selected automatic theme, so use PCS (set when ui previously loaded and is either os theme or time of day based)
                     document.cookie.includes('R_PCS=dark') :
                     // Otherwise user selected light/dark theme directly
                     document.cookie.includes('R_THEME=dark');

package/rancher-components/BadgeState/BadgeState.vue

@@ -60,7 +60,11 @@ export default Vue.extend({
 
 <template>
   <span :class="{'badge-state': true, [bg]: true}">
-    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />{{ msg }}
   </span>
 </template>
 

package/rancher-components/Banner/Banner.test.ts

@@ -1,13 +1,63 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
-    const wrapper = mount(Banner, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
 
     const element = wrapper.find('span').element;
 
     expect(element.textContent).toBe(label);
   });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
 });

package/rancher-components/Banner/Banner.vue

@@ -27,6 +27,13 @@ export default Vue.extend({
       type:    String,
       default: null
     },
+    /**
+     * Add icon for the banner
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
     /**
      * Toggles the banner's close button.
      */
@@ -58,31 +65,137 @@ export default Vue.extend({
     class="banner"
     :class="{
       [color]: true,
-      closable,
-      stacked
     }"
   >
-    <slot>
-      <t v-if="labelKey" :k="labelKey" :raw="true" />
-      <span v-else-if="messageLabel">{{ messageLabel }}</span>
-      <span v-else v-html="nlToBr(label)" />
-    </slot>
-    <div v-if="closable" class="closer" @click="$emit('close')">
-      <i class="icon icon-2x icon-close closer-icon" />
+    <div
+      v-if="icon"
+      class="banner__icon"
+      data-testid="banner-icon"
+    >
+      <i
+        class="icon icon-2x"
+        :class="icon"
+      />
+    </div>
+    <div
+      class="banner__content"
+      data-testid="banner-content"
+      :class="{
+        closable,
+        stacked,
+        icon
+      }"
+    >
+      <slot>
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+          :raw="true"
+        />
+        <span v-else-if="messageLabel">{{ messageLabel }}</span>
+        <span
+          v-else
+          v-clean-html="nlToBr(label)"
+        />
+      </slot>
+      <div
+        v-if="closable"
+        class="banner__content__closer"
+        @click="$emit('close')"
+      >
+        <i
+          data-testid="banner-close"
+          class="icon icon-close closer-icon"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  $left-border-size: 4px;
+$left-border-size: 4px;
+$icon-size: 24px;
+
+.banner {
+  display: flex;
+  margin: 15px 0;
+  position: relative;
+  width: 100%;
+  color: var(--body-text);
+
+  &__icon {
+    width: $icon-size * 2;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+
+    .primary & {
+      background: var(--primary);
+    }
+
+    .secondary & {
+      background: var(--default);
+    }
+
+    .success & {
+      background: var(--success);
+    }
 
-  .banner {
+    .info & {
+      background: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning);
+    }
+
+    .error & {
+      background: var(--error);
+      color: var(--primary-text);
+    }
+  }
+
+  &__content {
     padding: 10px;
-    margin: 15px 0;
-    width: 100%;
     transition: all 0.2s ease;
-    position: relative;
     line-height: 20px;
+    width: 100%;
+    border-left: solid $left-border-size transparent;
+    display: flex;
+    gap: 3px;
+
+    .primary & {
+      background: var(--primary);
+      border-color: var(--primary);
+    }
+
+    .secondary & {
+      background: var(--default-banner-bg);
+      border-color: var(--default);
+    }
+
+    .success & {
+      background: var(--success-banner-bg);
+      border-color: var(--success);
+    }
+
+    .info & {
+      background: var(--info-banner-bg);
+      border-color: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning-banner-bg);
+      border-color: var(--warning);
+    }
+
+    .error & {
+      background: var(--error-banner-bg);
+      border-color: var(--error);
+      color: var(--error);
+    }
 
     &.stacked {
       padding: 0 10px;
@@ -97,10 +210,10 @@ export default Vue.extend({
     }
 
     &.closable {
-      padding-right: 40px;
+      padding-right: $icon-size * 2;
     }
 
-    .closer {
+    &__closer {
       display: flex;
       align-items: center;
 
@@ -109,12 +222,11 @@ export default Vue.extend({
       top: 0;
       right: 0;
       bottom: 0;
-      width: 40px;
-      line-height: 42px;
+      width: $icon-size;
+      line-height: $icon-size;
       text-align: center;
 
       .closer-icon {
-        font-size: 22px;
         opacity: 0.7;
 
         &:hover {
@@ -124,40 +236,9 @@ export default Vue.extend({
       }
     }
 
-    &.primary {
-      background: var(--primary);
-      border-left: solid $left-border-size var(--primary);
-      color: var(--body-text);
-    }
-
-    &.secondary {
-      background: var(--default-banner-bg);
-      border-left: solid $left-border-size var(--default);
-      color: var(--body-text);
-    }
-
-    &.success {
-      background: var(--success-banner-bg);
-      border-left: solid $left-border-size var(--success);
-      color: var(--body-text);
-    }
-
-    &.info {
-      background: var(--info-banner-bg);
-      border-left: solid $left-border-size var(--info);
-      color: var(--body-text);
-    }
-
-    &.warning {
-      background: var(--warning-banner-bg);
-      border-left: solid $left-border-size var(--warning);
-      color: var(--body-text);
-    }
-
-    &.error {
-      background: var(--error-banner-bg);
-      border-left: solid $left-border-size var(--error);
-      color: var(--error);
+    &.icon {
+      border-left: none;
     }
   }
+}
 </style>

package/rancher-components/Card/Card.test.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import { Card } from './index';
+
+describe('component: Card', () => {
+  const title = 'Card title';
+  const body = 'Card body';
+
+  it('should have a card title', () => {
+    const wrapper = mount(Card, {
+      propsData: { title },
+      slots:     { title: '<div>Card title</div>' }
+    });
+
+    const element = wrapper.find('[data-testid="card-title-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(title);
+  });
+
+  it('should have a card body', () => {
+    const wrapper = mount(Card, {
+      propsData: { body },
+      slots:     { body: '<div>Card body</div>' }
+    });
+    const element = wrapper.find('[data-testid="card-body-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(body);
+  });
+
+  it('should display the default card actions', () => {
+    const wrapper = mount(Card);
+    const element = wrapper.find('[data-testid="card-actions-slot"]');
+
+    expect(element.exists()).toBe(true);
+  });
+});

package/rancher-components/Card/Card.vue

@@ -49,28 +49,45 @@ export default Vue.extend({
     sticky: {
       type:    Boolean,
       default: false,
-    },    
+    },
   }
 });
 </script>
 
 <template>
-  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
+  <div
+    class="card-container"
+    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
+    data-testid="card"
+  >
     <div class="card-wrap">
-      <div class="card-title">
+      <div
+        class="card-title"
+        data-testid="card-title-slot"
+      >
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <hr />
-      <div class="card-body">
+      <hr>
+      <div
+        class="card-body"
+        data-testid="card-body-slot"
+      >
         <slot name="body">
           {{ content }}
         </slot>
       </div>
-      <div v-if="showActions" class="card-actions">
+      <div
+        v-if="showActions"
+        class="card-actions"
+        data-testid="card-actions-slot"
+      >
         <slot name="actions">
-          <button class="btn role-primary" @click="buttonAction">
+          <button
+            class="btn role-primary"
+            @click="buttonAction"
+          >
             {{ buttonText }}
           </button>
         </slot>