@rancher/shell 0.3.23 → 0.3.24

package/layouts/default.vue

@@ -318,6 +318,14 @@ export default {
     overflow-y: auto;
     min-height: 0px;
 
+    &:has(.side-menu) {
+    padding-left: $app-bar-collapsed-width;
+
+    .overlay-content-mode {
+      left: calc(var(--nav-width) + $app-bar-collapsed-width);
+    }
+   }
+
     &.pin-right {
       grid-template-areas:
         "header  header  header"

package/machine-config/amazonec2.vue

@@ -303,6 +303,7 @@ export default {
     },
 
     'value.region'() {
+      this.updateNetwork();
       this.$fetch();
     },
 

package/mixins/fetch.client.js

@@ -75,9 +75,9 @@ async function $_fetch() { // eslint-disable-line camelcase
   try {
     await this.$options.fetch.call(this);
   } catch (err) {
-    if (process.dev) {
-      console.error('Error in fetch():', err); // eslint-disable-line no-console
-    }
+    // In most cases we don't handle errors at all in `fetch`es. Lets always log to help in production
+    console.error('Error in fetch():', err); // eslint-disable-line no-console
+
     error = normalizeError(err);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.23",
+  "version": "0.3.24",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/__tests__/prefs.test.ts

@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import Preferences from '@shell/pages/prefs.vue';
+import { shallowMount } from '@vue/test-utils';
 
 describe('page: prefs should', () => {
   it.each([

package/pages/c/_cluster/explorer/ConfigBadge.vue

@@ -27,6 +27,7 @@ export default {
     <div>
       <a
         class="badge-install"
+        data-testid="add-custom-cluster-badge"
         @click="customBadgeDialog"
       >
         <i class="icon icon-cluster" />

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/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/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>

package/rancher-components/Form/Checkbox/Checkbox.test.ts

@@ -1,7 +1,13 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, Wrapper } from '@vue/test-utils';
 import { Checkbox } from './index';
 
-describe('Checkbox.vue', () => {
+describe('checkbox.vue', () => {
+  const event = {
+    target:          { tagName: 'input', href: null },
+    stopPropagation: () => { },
+    preventDefault:  () => { }
+  } as unknown as MouseEvent;
+
   it('is unchecked by default', () => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
@@ -16,7 +22,7 @@ describe('Checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('updates from false to true when props change', async () => {
+  it('updates from false to true when props change', async() => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
 
@@ -27,51 +33,36 @@ describe('Checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('emits an input event with a true value', async () => {
-    const wrapper = shallowMount(Checkbox);
-    const event = {
-      target: { tagName: 'input', href: null },
-      stopPropagation: () => { },
-      preventDefault: () => { }
-    };
+  it('emits an input event with a true value', async() => {
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox);
 
-    (wrapper.vm as any).clicked(event);
+    wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(true);
   });
 
-  it('emits an input event with a custom valueWhenTrue', async () => {
+  it('emits an input event with a custom valueWhenTrue', async() => {
     const valueWhenTrue = 'BIG IF TRUE';
-    const event = {
-      target: { tagName: 'input', href: null },
-      stopPropagation: () => { },
-      preventDefault: () => { }
-    };
 
-    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
 
-    (wrapper.vm as any).clicked(event);
+    wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
   });
 
-  it('updates from valueWhenTrue to falsy', async () => {
+  it('updates from valueWhenTrue to falsy', async() => {
     const valueWhenTrue = 'REAL HUGE IF FALSE';
-    const event = {
-      target: { tagName: 'input', href: null },
-      stopPropagation: () => { },
-      preventDefault: () => { }
-    };
 
-    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
 
-    (wrapper.vm as any).clicked(event);
+    wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.[0][0]).toBe(null);
-  })
+    expect(wrapper.emitted().input?.[0][0]).toBeNull();
+  });
 });