@rancher/shell 3.0.9-rc.6 → 3.0.9

package/components/IconOrSvg.vue

@@ -18,9 +18,9 @@
  */
 import { Solver } from '@shell/utils/svg-filter';
 import { colorToRgb, mapStandardColors, normalizeHex } from '@shell/utils/color';
+import { mapGetters } from 'vuex';
 
 const filterCache = {};
-const cssCache = {};
 
 const colors = {
   header: {
@@ -33,7 +33,7 @@ const colors = {
   },
   primary: {
     color:          '--on-tertiary',
-    hover:          '--link',
+    hover:          '--tertiary-hover-app-bar',
     colorFallback:  '--on-tertiary',
     hoverFallback:  '--primary-hover-text',
     active:         '--on-active',
@@ -63,7 +63,12 @@ export default {
   },
 
   data() {
-    return { className: '' };
+    return {
+      className:    '',
+      mainFilter:   null,
+      hoverFilter:  null,
+      activeFilter: null,
+    };
   },
 
   created() {
@@ -72,6 +77,18 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters({
+      brand: 'management/brand',
+      theme: 'prefs/theme',
+    })
+  },
+
+  watch: {
+    brand: 'recomputeColor',
+    theme: 'recomputeColor',
+  },
+
   methods: {
     getComputedStyleFor(cssVar, fallback) {
       const value = window.getComputedStyle(document.body).getPropertyValue(cssVar).trim();
@@ -86,11 +103,11 @@ export default {
 
       const solver = new Solver(rgb);
       const res = solver.solve();
-      const filter = res?.filter;
+      const filterVal = res?.filterVal;
 
-      filterCache[cacheKey] = filter;
+      filterCache[cacheKey] = filterVal;
 
-      return filter;
+      return filterVal;
     },
 
     setColor() {
@@ -111,43 +128,23 @@ export default {
 
       const className = `svg-icon-${ uiColorStr }-${ hoverColorStr }`;
 
-      if (!cssCache[className]) {
-        const hoverFilter = this.resolveColorFilter(hoverColor, hoverColorRGB);
-        const mainFilter = this.resolveColorFilter(uiColor, uiColorRGB);
-        const activeFilter = this.resolveColorFilter(activeColor, activeColorRGB);
-
-        // Add stylesheet (added as global styles)
-        const styles = `
-          img.${ className } {
-            ${ mainFilter };
-          }
-          img.${ className }:hover {
-            ${ hoverFilter };
-          }
-          button:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          li:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          a.option:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          a.option.active-menu-link > img.${ className } {
-            ${ activeFilter };
-          }
-        `;
-
-        const styleSheet = document.createElement('style');
-
-        styleSheet.innerText = styles;
-        document.head.appendChild(styleSheet);
-
-        cssCache[className] = true;
-      }
+      this.hoverFilter = this.resolveColorFilter(hoverColor, hoverColorRGB);
+      this.mainFilter = this.resolveColorFilter(uiColor, uiColorRGB);
+      this.activeFilter = this.resolveColorFilter(activeColor, activeColorRGB);
 
       this['className'] = className;
-    }
+    },
+
+    recomputeColor() {
+      if (!this.src) {
+        return;
+      }
+
+      this.mainFilter = null;
+      this.hoverFilter = null;
+      this.activeFilter = null;
+      this.setColor();
+    },
   }
 };
 </script>
@@ -172,8 +169,30 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .svg-icon {
+  img.svg-icon {
+    filter: v-bind(mainFilter);
+  }
+
+  button:hover > img.svg-icon,
+  li:hover > img.svg-icon {
+    filter: v-bind(hoverFilter);
+  }
+
+  .side-menu .category div a > img.svg-icon {
     height: 24px;
     width: 24px;
+    filter: v-bind(mainFilter);
+  }
+
+  .side-menu .category div a:hover > img.svg-icon {
+    filter: v-bind(hoverFilter);
+  }
+
+  .side-menu .category div a.active-menu-link > img.svg-icon {
+    filter: v-bind(activeFilter);
+
+    &:hover {
+      filter: v-bind(activeFilter);
+    }
   }
 </style>

package/components/SortableTable/index.vue

@@ -2099,13 +2099,13 @@ export default {
 
   $header-padding: 20px;
   .sub-header-row {
-    padding: 0 0 $header-padding / 2 0;
+    padding: 0 0 calc($header-padding / 2) 0;
   }
 
   .fixed-header-actions {
     padding: 0 0 $header-padding 0;
     &.with-sub-header {
-      padding: 0 0 $header-padding / 4 0;
+      padding: 0 0 calc($header-padding / 4) 0;
     }
 
     width: 100%;

package/components/form/BannerSettings.vue

@@ -9,7 +9,7 @@ import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { Banner } from '@components/Banner';
 
-export default ({
+export default {
   name: 'BannerSettings',
 
   props: {
@@ -112,7 +112,7 @@ export default ({
       return this.bannerType === 'bannerConsent';
     }
   }
-});
+};
 </script>
 
 <template>

package/components/form/NotificationSettings.vue

@@ -3,7 +3,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
-export default ({
+export default {
 
   name: 'NotificationSettings',
 
@@ -29,7 +29,7 @@ export default ({
     },
   },
 
-});
+};
 </script>
 
 <template>

package/config/product/manager.js

@@ -202,7 +202,6 @@ export function init(store) {
   ]);
 
   headers(EXT.KUBECONFIG, [
-    STATE,
     {
       name:      'clusters',
       labelKey:  'tableHeaders.clusters',

package/detail/fleet.cattle.io.cluster.vue

@@ -6,7 +6,7 @@ import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { MANAGEMENT, FLEET, SCHEMA } from '@shell/config/types';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
-import { allHash } from 'utils/promise';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   name: 'FleetDetailCluster',

package/dialog/FeatureFlagListDialog.vue

@@ -134,7 +134,7 @@ export default {
             this.waiting = false;
             this.close();
 
-            await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
+            await this.$store.dispatch('management/findAll', { type: this.update.type, opt: { force: true } });
           }
         } catch (e) {}
 

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -228,7 +228,7 @@ export default {
 <template>
   <form>
     <h2>{{ t('catalog.repo.target.label') }}</h2>
-    <div class="row mb-10">
+    <div class="row mb-20">
       <div class="col span-12 target-groups">
         <RcItemCard
           v-for="card in clusterRepoTargets"

package/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/auth.spec.ts

@@ -0,0 +1,145 @@
+import { shallowMount } from '@vue/test-utils';
+import Auth from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
+
+describe('component: Auth.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     {},
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(Auth, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.find('h3').text()).toBe('%monitoringReceiver.auth.label%');
+    expect(wrapper.findComponent(LabeledSelect).exists()).toBe(true);
+  });
+
+  it('should initialize with basic auth type if present', () => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { basicAuth: { username: { name: 'test' } } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.vm.authType).toBe('basicAuth');
+    expect(wrapper.findAllComponents(SimpleSecretSelector)).toHaveLength(2);
+  });
+
+  it('should initialize with bearer token auth type if present', () => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { bearerTokenSecret: { name: 'test' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.vm.authType).toBe('bearerTokenSecret');
+    expect(wrapper.findAllComponents(SimpleSecretSelector)).toHaveLength(1);
+  });
+
+  it('should switch to basic auth and clear other types', async() => {
+    const value = { bearerTokenSecret: { name: 'b', key: 'k' } };
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'basicAuth');
+    expect(wrapper.vm.authType).toBe('basicAuth');
+    expect(wrapper.props('value').bearerTokenSecret).toBeUndefined();
+    expect(wrapper.props('value').basicAuth).toBeDefined();
+  });
+
+  it('should switch to bearer token and clear other types', async() => {
+    const value = { basicAuth: { username: { name: 'u' } } };
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'bearerTokenSecret');
+    expect(wrapper.vm.authType).toBe('bearerTokenSecret');
+    expect(wrapper.props('value').basicAuth).toBeUndefined();
+    expect(wrapper.props('value').bearerTokenSecret).toBeDefined();
+  });
+
+  it('should switch to none and clear other types', async() => {
+    const value = { basicAuth: { username: { name: 'u' } } };
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'none');
+    expect(wrapper.vm.authType).toBe('none');
+    expect(wrapper.props('value').basicAuth).toBeUndefined();
+  });
+
+  it('should update basic auth username and password', async() => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { basicAuth: { username: { name: 'test' } } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const selectors = wrapper.findAllComponents(SimpleSecretSelector);
+
+    expect(selectors).toHaveLength(2);
+
+    const usernameSelector = selectors[0];
+    const passwordSelector = selectors[1];
+
+    await usernameSelector.vm.$emit('updateSecretName', 'user-secret');
+    await usernameSelector.vm.$emit('updateSecretKey', 'user-key');
+    await passwordSelector.vm.$emit('updateSecretName', 'pass-secret');
+    await passwordSelector.vm.$emit('updateSecretKey', 'pass-key');
+
+    const basicAuth = wrapper.props('value').basicAuth;
+
+    expect(basicAuth.username.name).toBe('user-secret');
+    expect(basicAuth.username.key).toBe('user-key');
+    expect(basicAuth.password.name).toBe('pass-secret');
+    expect(basicAuth.password.key).toBe('pass-key');
+  });
+
+  it('should update bearer token secret', async() => {
+    const wrapper = shallowMount(Auth, {
+      props:  { ...defaultProps, value: { bearerTokenSecret: { name: 'test' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const selector = wrapper.findComponent(SimpleSecretSelector);
+
+    expect(selector.exists()).toBe(true);
+
+    await selector.vm.$emit('updateSecretName', 'bearer-name');
+    await selector.vm.$emit('updateSecretKey', 'bearer-key');
+
+    const bearerToken = wrapper.props('value').bearerTokenSecret;
+
+    expect(bearerToken.name).toBe('bearer-name');
+    expect(bearerToken.key).toBe('bearer-key');
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(Auth, {
+      props: {
+        mode: 'view', value: { basicAuth: {} }, namespace: 'ns'
+      },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent(LabeledSelect).attributes('disabled')).toBe('true');
+    const selectors = wrapper.findAllComponents(SimpleSecretSelector);
+
+    selectors.forEach((selector) => {
+      expect(selector.props('disabled')).toBe(true);
+    });
+  });
+});

package/edit/monitoring.coreos.com.alertmanagerconfig/__tests__/index.test.ts

@@ -0,0 +1,202 @@
+/* eslint-disable import/first */
+global.PointerEvent = class PointerEvent extends Event {};
+
+import { shallowMount } from '@vue/test-utils';
+import { EDITOR_MODES } from '@shell/components/YamlEditor.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import Index from '../index.vue';
+
+describe('monitoring.coreos.com.alertmanagerconfig/index.vue', () => {
+  it('should render correctly', () => {
+    const valueMock = {
+      applyDefaults: jest.fn(),
+      spec:          {
+        receivers: [
+          { name: 'receiver1', type: 'webhook' },
+          { name: 'receiver2', type: 'email' },
+        ],
+      },
+      getCreateReceiverRoute: jest.fn(() => ({ name: 'create-receiver' })),
+      getReceiverDetailLink:  jest.fn((name) => `detail-${ name }`),
+    };
+
+    const wrapper = shallowMount(Index, {
+      propsData: {
+        value: valueMock,
+        mode:  'create',
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters:  { currentProduct: { inStore: 'test' } },
+            dispatch: jest.fn(() => Promise.resolve({ receiverSchema: {} })),
+          },
+          $router:     { push: jest.fn() },
+          $route:      { name: 'test-route' },
+          $fetchState: { pending: false },
+        }
+      },
+      stubs: {
+        CruResource:       true,
+        NameNsDescription: true,
+        Tabbed:            true,
+        Tab:               true,
+        RouteConfig:       true,
+        ResourceTable:     true,
+        ActionMenu:        true,
+        Loading:           true,
+      }
+    });
+
+    // Ensure the component is rendered
+    expect(wrapper.exists()).toBe(true);
+
+    // Assert that applyDefaults is called
+    expect(valueMock.applyDefaults).toHaveBeenCalledTimes(1);
+
+    // Assert receiverOptions are correctly populated from value.spec.receivers
+    expect(wrapper.vm.receiverOptions).toStrictEqual(['receiver1', 'receiver2']);
+
+    // Assert createReceiverLink is correctly set
+    expect(wrapper.vm.createReceiverLink).toStrictEqual({ name: 'create-receiver' });
+
+    // Assert that receiverTableHeaders has the expected structure (basic check)
+    expect(wrapper.vm.receiverTableHeaders.length).toBeGreaterThan(0);
+    expect(wrapper.vm.receiverTableHeaders[0].name).toBe('name');
+    expect(wrapper.vm.receiverTableHeaders[1].name).toBe('type');
+  });
+
+  // Additional test for editorMode computed property
+  it('editorMode should return VIEW_CODE when mode is _VIEW', () => {
+    const valueMock = {
+      applyDefaults:          jest.fn(),
+      spec:                   { receivers: [] },
+      getCreateReceiverRoute: jest.fn(),
+      getReceiverDetailLink:  jest.fn(),
+    };
+
+    const wrapper = shallowMount(Index, {
+      propsData: {
+        value: valueMock,
+        mode:  _VIEW, // Set mode to _VIEW
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters:  { currentProduct: { inStore: 'test' } },
+            dispatch: jest.fn(() => Promise.resolve({ receiverSchema: {} })),
+          },
+          $router:     { push: jest.fn() },
+          $route:      { name: 'test-route' },
+          $fetchState: { pending: false },
+        },
+      },
+      stubs: {
+        CruResource:       true,
+        NameNsDescription: true,
+        Tabbed:            true,
+        Tab:               true,
+        RouteConfig:       true,
+        ResourceTable:     true,
+        ActionMenu:        true,
+        Loading:           true,
+      }
+    });
+
+    expect(wrapper.vm.editorMode).toBe(EDITOR_MODES.VIEW_CODE);
+  });
+
+  it('editorMode should return EDIT_CODE when mode is not _VIEW', () => {
+    const valueMock = {
+      applyDefaults:          jest.fn(),
+      spec:                   { receivers: [] },
+      getCreateReceiverRoute: jest.fn(),
+      getReceiverDetailLink:  jest.fn(),
+    };
+
+    const wrapper = shallowMount(Index, {
+      propsData: {
+        value: valueMock,
+        mode:  _EDIT, // Set mode to _EDIT
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters:  { currentProduct: { inStore: 'test' } },
+            dispatch: jest.fn(() => Promise.resolve({ receiverSchema: {} })),
+          },
+          $router:     { push: jest.fn() },
+          $route:      { name: 'test-route' },
+          $fetchState: { pending: false },
+        },
+      },
+      stubs: {
+        CruResource:       true,
+        NameNsDescription: true,
+        Tabbed:            true,
+        Tab:               true,
+        RouteConfig:       true,
+        ResourceTable:     true,
+        ActionMenu:        true,
+        Loading:           true,
+      }
+    });
+
+    expect(wrapper.vm.editorMode).toBe(EDITOR_MODES.EDIT_CODE);
+  });
+
+  it('translateReceiverTypes method translates receiver types', () => {
+    const valueMock = {
+      applyDefaults:          jest.fn(),
+      spec:                   { receivers: [] },
+      getCreateReceiverRoute: jest.fn(),
+      getReceiverDetailLink:  jest.fn(),
+    };
+
+    const wrapper = shallowMount(Index, {
+      propsData: {
+        value: valueMock,
+        mode:  'create',
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters:  { currentProduct: { inStore: 'test' } },
+            dispatch: jest.fn(() => Promise.resolve({ receiverSchema: {} })),
+          },
+          $router:     { push: jest.fn() },
+          $route:      { name: 'test-route' },
+          $fetchState: { pending: false },
+        },
+      },
+      stubs: {
+        CruResource:       true,
+        NameNsDescription: true,
+        Tabbed:            true,
+        Tab:               true,
+        RouteConfig:       true,
+        ResourceTable:     true,
+        ActionMenu:        true,
+        Loading:           true,
+      }
+    });
+
+    // Ensure receiverTypes is initialized, then call the method
+    const originalReceiverTypes = [
+      { label: 'alertmanagerConfigReceiver.alerta', value: 'alerta' },
+      { label: 'alertmanagerConfigReceiver.dingtalk', value: 'dingtalk' }
+    ];
+
+    // Manually set receiverTypes for the test (it's normally populated from an import)
+    // In a real scenario, you'd mock the import or ensure it's loaded before the test.
+    // For this test, we'll directly manipulate the vm.
+    wrapper.setData({ receiverTypes: originalReceiverTypes });
+
+    const translatedTypes = wrapper.vm.translateReceiverTypes();
+
+    expect(translatedTypes).toStrictEqual([
+      { label: '%alertmanagerConfigReceiver.alerta%', value: 'alerta' },
+      { label: '%alertmanagerConfigReceiver.dingtalk%', value: 'dingtalk' }
+    ]);
+  });
+});