@rancher/shell 3.0.9-rc.6 → 3.0.9

package/edit/monitoring.coreos.com.receiver/types/__tests__/opsgenie.spec.ts

@@ -0,0 +1,209 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Opsgenie, { TARGETS, TYPES } from '@shell/edit/monitoring.coreos.com.receiver/types/opsgenie.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+describe('component: Opsgenie', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: { responders: [] },
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const arrayList = wrapper.findComponent(ArrayList);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(checkbox.exists()).toBe(true);
+    expect(arrayList.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const arrayList = wrapper.findComponent(ArrayList);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+    expect(arrayList.props().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config, send_resolved, and responders', () => {
+      const value = {};
+      const wrapper = shallowMount(Opsgenie, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(true);
+      expect(wrapper.props().value.responders).toBeDefined();
+    });
+
+    it('should correctly transform responders from props', () => {
+      const value = {
+        responders: [
+          { type: 'team', id: 'team-id' },
+          { type: 'user', name: 'user-name' },
+        ],
+      };
+      const wrapper = shallowMount(Opsgenie, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.vm.responders).toStrictEqual([
+        {
+          type: 'team', target: 'id', value: 'team-id'
+        },
+        {
+          type: 'user', target: 'name', value: 'user-name'
+        },
+      ]);
+    });
+  });
+
+  describe('watchers', () => {
+    it('should update value.responders when responders data changes', async() => {
+      const value = { responders: [] };
+      const wrapper = shallowMount(Opsgenie, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      wrapper.vm.responders = [
+        {
+          type: 'team', target: 'id', value: 'team-id'
+        },
+        {
+          type: 'user', target: 'name', value: 'user-name'
+        },
+      ];
+
+      await wrapper.vm.$nextTick();
+
+      expect(value.responders).toStrictEqual([
+        { type: 'team', id: 'team-id' },
+        { type: 'user', name: 'user-name' },
+      ]);
+    });
+  });
+
+  describe('methods', () => {
+    it('should update a responder with updateResponder', () => {
+      const wrapper = shallowMount(Opsgenie, {
+        props:  requiredProps,
+        global: { mocks: mockStore },
+      });
+      const responder = {
+        type:   'team',
+        target: 'id',
+        value:  'old-value',
+      };
+
+      wrapper.vm.updateResponder({ selected: 'name', text: 'new-value' }, responder);
+
+      expect(responder.target).toBe('name');
+      expect(responder.value).toBe('new-value');
+    });
+
+    it('should return the correct label with typeLabel', () => {
+      const wrapper = shallowMount(Opsgenie, {
+        props:  requiredProps,
+        global: { mocks: mockStore },
+      });
+
+      TYPES.forEach((type) => {
+        expect(wrapper.vm.typeLabel(type.value)).toBe(type.label);
+      });
+    });
+
+    it('should return the correct label with targetLabel', () => {
+      const wrapper = shallowMount(Opsgenie, {
+        props:  requiredProps,
+        global: { mocks: mockStore },
+      });
+
+      TARGETS.forEach((target) => {
+        expect(wrapper.vm.targetLabel(target.value)).toBe(target.label);
+      });
+    });
+  });
+
+  describe('template', () => {
+    describe('responders', () => {
+      it('should render responders correctly in edit mode', async() => {
+        const value = { responders: [{ type: 'team', id: 'team-id' }] };
+        const wrapper = shallowMount(Opsgenie, {
+          props: {
+            ...requiredProps,
+            value,
+          },
+          global: { mocks: mockStore },
+        });
+
+        const arrayList = wrapper.findComponent(ArrayList);
+
+        expect(arrayList.props().value).toStrictEqual([{
+          type:   'team',
+          target: 'id',
+          value:  'team-id'
+        }]);
+      });
+
+      it('should render responders correctly in view mode', async() => {
+        const value = { responders: [{ type: 'team', id: 'team-id' }] };
+        const wrapper = shallowMount(Opsgenie, {
+          props: {
+            ...requiredProps,
+            value,
+            mode: _VIEW,
+          },
+          global: { mocks: mockStore },
+        });
+
+        const arrayList = wrapper.findComponent(ArrayList);
+
+        expect(arrayList.props().value).toStrictEqual([{
+          type:   'team',
+          target: 'id',
+          value:  'team-id'
+        }]);
+      });
+    });
+  });
+});

package/edit/monitoring.coreos.com.receiver/types/__tests__/pagerduty.spec.ts

@@ -0,0 +1,105 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Pagerduty from '@shell/edit/monitoring.coreos.com.receiver/types/pagerduty.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: Pagerduty', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Pagerduty, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(checkbox.exists()).toBe(true);
+    expect(labeledSelect.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Pagerduty, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+    expect(labeledSelect.attributes().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config and send_resolved', () => {
+      const value = {};
+      const wrapper = shallowMount(Pagerduty, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(true);
+    });
+
+    it.each([
+      ['Events API v2', { routing_key: 'test-key' }],
+      ['Prometheus', { service_key: 'test-key' }],
+      ['Events API v2', {}],
+    ])('should set integrationType to %p', (expectedType, value) => {
+      const wrapper = shallowMount(Pagerduty, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.vm.integrationType).toBe(expectedType);
+    });
+  });
+
+  describe('watchers', () => {
+    it('should clear old integration key when integrationType changes', async() => {
+      const value = { routing_key: 'test-key' };
+      const wrapper = shallowMount(Pagerduty, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      wrapper.vm.integrationType = 'Prometheus';
+
+      await wrapper.vm.$nextTick();
+
+      expect(value.routing_key).toBeNull();
+    });
+  });
+});

package/edit/monitoring.coreos.com.receiver/types/__tests__/slack.spec.ts

@@ -0,0 +1,92 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Slack from '@shell/edit/monitoring.coreos.com.receiver/types/slack.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+
+describe('component: Slack', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    expect(labeledInputs).toHaveLength(3);
+    expect(checkbox.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Slack, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config and send_resolved', () => {
+      const value = {};
+      const wrapper = shallowMount(Slack, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(false);
+    });
+
+    it('should set default text when mode is create', () => {
+      const value = {};
+      const wrapper = shallowMount(Slack, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _CREATE,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.text).toBe('{{ template "slack.rancher.text" . }}');
+    });
+
+    it('should not set default text when mode is not create', () => {
+      const value = {};
+      const wrapper = shallowMount(Slack, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.text).toBeUndefined();
+    });
+  });
+});

package/edit/monitoring.coreos.com.receiver/types/__tests__/webhook.spec.ts

@@ -0,0 +1,131 @@
+
+import { shallowMount } from '@vue/test-utils';
+import Webhook from '@shell/edit/monitoring.coreos.com.receiver/types/webhook.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import TLS from '@shell/edit/monitoring.coreos.com.receiver/tls.vue';
+import Auth from '@shell/edit/monitoring.coreos.com.receiver/auth.vue';
+import { Banner } from '@components/Banner';
+import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import { ALIBABA_CLOUD_SMS_URL, MS_TEAMS_URL } from '@shell/edit/monitoring.coreos.com.receiver/types/webhook.add.vue';
+
+describe('component: Webhook', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    mode:  _EDIT,
+    value: {},
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Webhook, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const tls = wrapper.findComponent(TLS);
+    const auth = wrapper.findComponent(Auth);
+
+    expect(labeledInputs).toHaveLength(2);
+    expect(checkbox.exists()).toBe(true);
+    expect(tls.exists()).toBe(true);
+    expect(auth.exists()).toBe(true);
+  });
+
+  it('should pass down the mode prop to child components', () => {
+    const wrapper = shallowMount(Webhook, {
+      props:  requiredProps,
+      global: { mocks: mockStore },
+    });
+
+    const labeledInputs = wrapper.findAllComponents(LabeledInput);
+    const checkbox = wrapper.findComponent(Checkbox);
+    const tls = wrapper.findComponent(TLS);
+    const auth = wrapper.findComponent(Auth);
+
+    labeledInputs.forEach((input) => {
+      expect(input.props().mode).toBe(_EDIT);
+    });
+
+    expect(checkbox.props().mode).toBe(_EDIT);
+    expect(tls.props().mode).toBe(_EDIT);
+    expect(auth.props().mode).toBe(_EDIT);
+  });
+
+  describe('data initialization', () => {
+    it('should initialize http_config and send_resolved', () => {
+      const value = {};
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.props().value.http_config).toBeDefined();
+      expect(wrapper.props().value.send_resolved).toBe(false);
+    });
+
+    it.each([
+      [true, _CREATE, MS_TEAMS_URL],
+      [true, _EDIT, MS_TEAMS_URL],
+      [false, _VIEW, MS_TEAMS_URL],
+      [true, _CREATE, ALIBABA_CLOUD_SMS_URL],
+      [true, _EDIT, ALIBABA_CLOUD_SMS_URL],
+      [false, _VIEW, ALIBABA_CLOUD_SMS_URL],
+      [false, _CREATE, 'https://some.other.url/'],
+    ])('should set showNamespaceBanner to %p when mode is %p and url is %p', (expected, mode, url) => {
+      const value = { url };
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value,
+          mode,
+        },
+        global: { mocks: mockStore },
+      });
+
+      expect(wrapper.vm.showNamespaceBanner).toBe(expected);
+    });
+  });
+
+  describe('banner', () => {
+    it('should show banner when showNamespaceBanner is true', () => {
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value: { url: MS_TEAMS_URL },
+          mode:  _CREATE,
+        },
+        global: { mocks: mockStore },
+      });
+
+      const banner = wrapper.findComponent(Banner);
+
+      expect(banner.exists()).toBe(true);
+    });
+
+    it('should not show banner when showNamespaceBanner is false', () => {
+      const wrapper = shallowMount(Webhook, {
+        props: {
+          ...requiredProps,
+          value: { url: 'https://some.other.url/' },
+          mode:  _CREATE,
+        },
+        global: { mocks: mockStore },
+      });
+
+      const banner = wrapper.findComponent(Banner);
+
+      expect(banner.exists()).toBe(false);
+    });
+  });
+});

package/edit/provisioning.cattle.io.cluster/ingress/IngressCards.vue

@@ -60,18 +60,20 @@ const { t } = useI18n(store);
         v-once
         #item-card-footer
       >
-        <rc-item-card-action>
-          <a
-            :href="card.doc.url"
-            rel="nofollow noopener noreferrer"
-            target="_blank"
-            class="ingress-card-footer-button secondary-text-link"
-          >
-            {{ t('cluster.ingress.learnMore.label') }}
-            <i class="icon icon-external-link" />
-            <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
-          </a>
-        </rc-item-card-action>
+        <div class="mmt-2">
+          <rc-item-card-action>
+            <a
+              :href="card.doc.url"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+              class="ingress-card-footer-button secondary-text-link"
+            >
+              {{ t('cluster.ingress.learnMore.label') }}
+              <i class="icon icon-external-link" />
+              <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+            </a>
+          </rc-item-card-action>
+        </div>
       </template>
     </rc-item-card>
   </div>

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -978,8 +978,7 @@ export default {
         );
       }
 
-      Object.keys(this.versionInfo).forEach((key) => delete this.versionInfo[key]); // Invalidate cache such that version info relevant to selected kube version is updated
-
+      this.versionInfo = {}; // Invalidate cache such that version info relevant to selected kube version is updated
       // Allow time for addonNames to update... then fetch any missing addons
       this.$nextTick(() => this.initAddons());
       if (this.mode === _CREATE) {
@@ -1864,11 +1863,11 @@ export default {
             versionName: entry.version,
           });
 
-          this.set(this.versionInfo, chartName, res);
+          this.versionInfo[chartName] = res;
           const key = this.chartVersionKey(chartName);
 
           if (!this.userChartValues[key]) {
-            this.set(this.userChartValues, key, {});
+            this.userChartValues[key] = {};
           }
         } catch (e) {
           console.error(`Failed to fetch or process chart info for ${ chartName }`); // eslint-disable-line no-console
@@ -1940,7 +1939,7 @@ export default {
       const fromUser = this.userChartValuesTemp[name];
       const different = diff(fromChart, fromUser);
 
-      this.set(this.userChartValues, this.chartVersionKey(name), different);
+      this.userChartValues[this.chartVersionKey(name)] = different;
     }, 250, { leading: true }),
 
     initYamlEditor(name) {

package/edit/provisioning.cattle.io.cluster/tabs/Basics.vue

@@ -12,7 +12,7 @@ import { LEGACY } from '@shell/store/features';
 import semver from 'semver';
 import Ingress from '@shell/edit/provisioning.cattle.io.cluster/tabs/Ingress';
 import {
-  HARVESTER, RKE2_INGRESS_NGINX, RKE2_TRAEFIK, INGRESS_CONTROLLER, INGRESS_NGINX
+  HARVESTER, RKE2_INGRESS_NGINX, RKE2_TRAEFIK, INGRESS_CONTROLLER, INGRESS_NGINX, INGRESS_NONE
 } from '@shell/edit/provisioning.cattle.io.cluster/shared';
 
 export default {
@@ -173,7 +173,17 @@ export default {
     },
     ingressController: {
       get() {
-        return this.serverConfig && this.serverConfig[INGRESS_CONTROLLER] ? this.serverConfig[INGRESS_CONTROLLER] : INGRESS_NGINX ;
+        if (this.serverConfig) {
+          if (this.serverConfig[INGRESS_CONTROLLER]) {
+            return this.serverConfig[INGRESS_CONTROLLER];
+          } else {
+            if (this.serverConfig.disable && this.serverConfig.disable.includes(RKE2_INGRESS_NGINX)) {
+              return INGRESS_NONE;
+            }
+          }
+        }
+
+        return INGRESS_NGINX;
       },
 
       set(neu) {
@@ -253,12 +263,16 @@ export default {
       });
     },
     nginxSupported() {
-      if (this.serverArgs?.disable?.options.includes(RKE2_INGRESS_NGINX)) {
+      if (Object.keys(this.serverArgs).length === 0 || this.serverArgs?.disable?.options.includes(RKE2_INGRESS_NGINX)) {
         return true;
       }
 
       return false;
     },
+    // If version is too old and we couldn't get serverArgs, it has to be NGINX
+    traefikSupported() {
+      return Object.keys(this.serverArgs).length > 0;
+    },
 
     serverArgs() {
       return this.selectedVersion?.serverArgs || {};
@@ -680,6 +694,7 @@ export default {
       v-model:value="ingressController"
       :mode="mode"
       :nginx-supported="nginxSupported"
+      :traefik-supported="traefikSupported"
       :nginx-chart="nginxChart"
       :traefik-chart="traefikChart"
       :user-chart-values="userChartValues"