@rancher/shell 3.0.9-rc.6 → 3.0.9

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

@@ -0,0 +1,226 @@
+
+import Tls from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/tls.vue';
+import { shallowMount } from '@vue/test-utils';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+
+describe('component: Tls', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':      (key: string) => key,
+      'i18n/exists': () => true,
+    },
+  };
+
+  const requiredProps = {
+    value:     { tlsConfig: {} },
+    namespace: 'test-namespace',
+  };
+
+  it('should render all child components', () => {
+    const wrapper = shallowMount(Tls, {
+      props:  { ...requiredProps, mode: _EDIT },
+      global: { mocks: mockStore },
+    });
+
+    const secretSelectors = wrapper.findAllComponents(SimpleSecretSelector);
+    const labeledInput = wrapper.findComponent(LabeledInput);
+
+    expect(secretSelectors).toHaveLength(3);
+    expect(labeledInput.exists()).toBe(true);
+  });
+
+  it('should show a banner if namespace is not provided', () => {
+    const wrapper = shallowMount(Tls, {
+      props: {
+        ...requiredProps,
+        namespace: undefined,
+        mode:      _EDIT,
+      },
+      global: { mocks: mockStore },
+    });
+    const banner = wrapper.findComponent(Banner);
+
+    expect(banner.exists()).toBe(true);
+    expect(banner.props().color).toBe('error');
+    expect(banner.vm.$slots.default()[0].children).toBe('%alertmanagerConfigReceiver.namespaceWarning%');
+  });
+
+  it('should not show a banner if namespace is provided', () => {
+    const wrapper = shallowMount(Tls, {
+      props:  { ...requiredProps, mode: _EDIT },
+      global: { mocks: mockStore },
+    });
+    const banner = wrapper.findComponent(Banner);
+
+    expect(banner.exists()).toBe(false);
+  });
+
+  it('should disable inputs when in view mode', () => {
+    const wrapper = shallowMount(Tls, {
+      props:  { ...requiredProps, mode: _VIEW },
+      global: { mocks: mockStore },
+    });
+
+    const secretSelectors = wrapper.findAllComponents(SimpleSecretSelector);
+    const labeledInput = wrapper.findComponent(LabeledInput);
+
+    secretSelectors.forEach((s) => expect(s.props().disabled).toBe(true));
+    expect(labeledInput.props().mode).toBe(_VIEW);
+  });
+
+  it('should initialize tlsConfig if not present', () => {
+    const value = {};
+    const wrapper = shallowMount(Tls, {
+      props: {
+        ...requiredProps,
+        value,
+        mode: _EDIT,
+      },
+      global: { mocks: mockStore },
+    });
+
+    expect(wrapper.props().value.tlsConfig).toBeDefined();
+  });
+
+  it('should correctly initialize data from props', () => {
+    const value = {
+      tlsConfig: {
+        ca: {
+          secret: {
+            key:  'ca-key',
+            name: 'ca-name'
+          }
+        },
+        cert: {
+          secret: {
+            key:  'cert-key',
+            name: 'cert-name'
+          }
+        },
+        keySecret: {
+          key:  'key-key',
+          name: 'key-name'
+        }
+      }
+    };
+
+    const wrapper = shallowMount(Tls, {
+      props: {
+        ...requiredProps,
+        value,
+        mode: _EDIT,
+      },
+      global: { mocks: mockStore },
+    });
+
+    const data = wrapper.vm.$data;
+
+    expect(data.initialCaSecretKey).toBe('ca-key');
+    expect(data.initialCaSecretName).toBe('ca-name');
+    expect(data.initialClientCertSecretKey).toBe('cert-key');
+    expect(data.initialClientCertSecretName).toBe('cert-name');
+    expect(data.initialClientKeySecretKey).toBe('key-key');
+    expect(data.initialClientKeySecretName).toBe('key-name');
+  });
+
+  describe('event handling', () => {
+    it.each([
+      ['ca', 0, 'ca', 'updateCaSecretName', 'updateCaSecretKey'],
+      ['cert', 1, 'cert', 'updateClientCertSecretName', 'updateClientCertSecretKey'],
+      ['key', 2, 'keySecret', 'updateClientKeySecretName', 'updateClientKeySecretKey'],
+    ])('should handle %p secret selector events', async(secretType, index, tlsConfigKey, nameHandler, keyHandler) => {
+      const value = { tlsConfig: {} };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps, value, mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      const secretSelector = wrapper.findAllComponents(SimpleSecretSelector)[index];
+      const name = `${ secretType }-secret-name`;
+      const key = `${ secretType }-secret-key`;
+
+      await secretSelector.vm.$emit('updateSecretName', name);
+      await wrapper.vm.$nextTick();
+
+      const nameValue = tlsConfigKey === 'keySecret' ? value.tlsConfig[tlsConfigKey].name : value.tlsConfig[tlsConfigKey].secret.name;
+
+      expect(nameValue).toBe(name);
+
+      await secretSelector.vm.$emit('updateSecretKey', key);
+      await wrapper.vm.$nextTick();
+
+      const keyValue = tlsConfigKey === 'keySecret' ? value.tlsConfig[tlsConfigKey].key : value.tlsConfig[tlsConfigKey].secret.key;
+
+      expect(keyValue).toBe(key);
+    });
+  });
+
+  describe('secret updates', () => {
+    it.each([
+      ['Ca', 'updateCaSecretName', 'ca', 'name'],
+      ['Ca', 'updateCaSecretKey', 'ca', 'key'],
+      ['ClientCert', 'updateClientCertSecretName', 'cert', 'name'],
+      ['ClientCert', 'updateClientCertSecretKey', 'cert', 'key'],
+      ['ClientKey', 'updateClientKeySecretName', 'keySecret', 'name'],
+      ['ClientKey', 'updateClientKeySecretKey', 'keySecret', 'key'],
+    ])('should update %p secret %p', (secret, handler, obj, field) => {
+      const value = { tlsConfig: {} };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      const data = 'test-data';
+
+      (wrapper.vm as any)[handler](data);
+
+      const dataValue = obj === 'keySecret' ? value.tlsConfig[obj][field] : value.tlsConfig[obj].secret[field];
+
+      expect(dataValue).toBe(data);
+    });
+
+    it.each([
+      ['Ca', 'updateCaSecretName', 'ca'],
+      ['ClientCert', 'updateClientCertSecretName', 'cert'],
+    ])('should remove %p secret', (secret, handler, obj) => {
+      const value = { tlsConfig: { [obj]: { secret: { name: 'test-name', key: 'test-key' } } } };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      (wrapper.vm as any)[handler]('__[[NONE]]__');
+
+      expect(value.tlsConfig[obj]).toStrictEqual({});
+    });
+
+    it('should remove "ClientKey" secret', () => {
+      const value = { tlsConfig: { keySecret: { name: 'test-name', key: 'test-key' } } };
+      const wrapper = shallowMount(Tls, {
+        props: {
+          ...requiredProps,
+          value,
+          mode: _EDIT
+        },
+        global: { mocks: mockStore },
+      });
+
+      (wrapper.vm as any).updateClientKeySecretName('__[[NONE]]__');
+
+      expect(value.tlsConfig.keySecret).toStrictEqual({});
+    });
+  });
+});

package/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue

@@ -1,12 +1,15 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
+import Banner from '@components/Banner/Banner.vue';
 import isEmpty from 'lodash/isEmpty';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
-  components: { LabeledSelect, SimpleSecretSelector },
-  props:      {
+  components: {
+    Banner, LabeledSelect, SimpleSecretSelector
+  },
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -64,7 +67,7 @@ export default {
     initializeType(authOptions, type) {
       authOptions.forEach((authOption) => {
         if (authOption.value === type && type !== 'none') {
-          this.value.authOption.value = this.value[authOption.value] || authOption.default;
+          this.value[authOption.value] = this.value[authOption.value] || authOption.default;
         } else if (typeof this.value[authOption.value] !== 'undefined') {
           delete this.value[authOption.value];
         }
@@ -248,9 +251,9 @@ export default {
         />
       </div>
     </div>
-    <div
-      v-if="authType === 'basicAuth'"
-      class="row mb-20"
+    <div
+      v-if="authType === 'basicAuth'"
+      class="row mb-20"
     >
       <SimpleSecretSelector
         v-if="namespace"
@@ -265,16 +268,16 @@ export default {
         @updateSecretName="updateBasicAuthUsernameSecretName"
         @updateSecretKey="updateBasicAuthUsernameSecretKey"
       />
-      <Banner
-        v-else
-        color="error"
+      <Banner
+        v-else
+        color="error"
       >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
-    <div
-      v-if="authType === 'basicAuth'"
-      class="row mb-20"
+    <div
+      v-if="authType === 'basicAuth'"
+      class="row mb-20"
     >
       <SimpleSecretSelector
         v-if="namespace"
@@ -289,16 +292,16 @@ export default {
         @updateSecretName="updateBasicAuthPasswordSecretName"
         @updateSecretKey="updateBasicAuthPasswordSecretKey"
       />
-      <Banner
-        v-else
-        color="error"
+      <Banner
+        v-else
+        color="error"
       >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>
     </div>
-    <div
-      v-if="authType === 'bearerTokenSecret'"
-      class="row mb-20"
+    <div
+      v-if="authType === 'bearerTokenSecret'"
+      class="row mb-20"
     >
       <SimpleSecretSelector
         v-if="namespace"
@@ -313,9 +316,9 @@ export default {
         @updateSecretName="updateBearerTokenSecretName"
         @updateSecretKey="updateBearerTokenSecretKey"
       />
-      <Banner
-        v-else
-        color="error"
+      <Banner
+        v-else
+        color="error"
       >
         {{ t("alertmanagerConfigReceiver.namespaceWarning") }}
       </Banner>

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

@@ -0,0 +1,157 @@
+import { shallowMount } from '@vue/test-utils';
+import Opsgenie from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+
+describe('component: Opsgenie.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     { responders: [] },
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const headings = wrapper.findAll('h3');
+
+    expect(headings[0].text()).toBe('Target');
+    expect(headings[1].text()).toBe('Responders');
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'LabeledInput' }).exists()).toBe(true);
+    expect(wrapper.findComponent(Checkbox).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'ArrayList' }).exists()).toBe(true);
+  });
+
+  it('should update proxy URL', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const labeledInput = wrapper.findComponent({ name: 'LabeledInput' });
+
+    await labeledInput.vm.$emit('update:value', 'http://my-proxy.com');
+
+    expect(wrapper.props('value').httpConfig.proxyURL).toBe('http://my-proxy.com');
+  });
+
+  it('should toggle send resolved alerts checkbox', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', false);
+    expect(wrapper.props('value').sendResolved).toBe(false);
+  });
+
+  it('should handle API key secret updates', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    await secretSelector.vm.$emit('updateSecretName', 'my-secret-name');
+    await secretSelector.vm.$emit('updateSecretKey', 'my-secret-key');
+
+    expect(wrapper.props('value').apiKey.name).toBe('my-secret-name');
+    expect(wrapper.props('value').apiKey.key).toBe('my-secret-key');
+  });
+
+  it('should add and update a responder', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const arrayList = wrapper.findComponent({ name: 'ArrayList' });
+
+    await arrayList.vm.$emit('update:value', [wrapper.vm.defaultResponder]);
+
+    const responders = wrapper.vm.responders;
+
+    expect(responders).toHaveLength(1);
+    expect(responders[0].type).toBe('team');
+    expect(responders[0].target).toBe('id');
+
+    // Manually change responder type and check if watch updates the value prop
+    responders[0].type = 'user';
+    await wrapper.vm.$nextTick();
+    expect(wrapper.props('value').responders[0].type).toBe('user');
+
+    // Test updateResponder method
+    wrapper.vm.updateResponder({ selected: 'username', text: 'test-user' }, responders[0]);
+    await wrapper.vm.$nextTick();
+    expect(responders[0].target).toBe('username');
+    expect(responders[0].value).toBe('test-user');
+    // Check that the watcher has updated the value prop correctly
+    expect(wrapper.props('value').responders[0]).toStrictEqual({ type: 'user', username: 'test-user' });
+  });
+
+  it('should remove a responder', async() => {
+    const wrapper = shallowMount(Opsgenie, {
+      props: {
+        ...defaultProps,
+        value: {
+          responders: [
+            {
+              type: 'team',
+              id:   'team-id'
+            }
+          ]
+        }
+      },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    // Simulate the internal workings of ArrayList for removing an item
+    wrapper.vm.responders.splice(0, 1);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.responders).toHaveLength(0);
+    expect(wrapper.props('value').responders).toHaveLength(0);
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(Opsgenie, {
+      props: {
+        mode:  'view',
+        value: {
+          httpConfig:   { proxyURL: 'http://view-proxy.com' },
+          sendResolved: false,
+          responders:   [
+            {
+              type: 'user',
+              name: 'view-user'
+            }
+          ]
+        },
+        namespace: 'test-namespace'
+      },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const labeledInput = wrapper.findComponent({ name: 'LabeledInput' });
+    const checkbox = wrapper.findComponent(Checkbox);
+    const arrayList = wrapper.findComponent({ name: 'ArrayList' });
+
+    expect(labeledInput.props('mode')).toBe('view');
+    expect(checkbox.props('mode')).toBe('view');
+    expect(arrayList.props('mode')).toBe('view');
+
+    const responder = wrapper.vm.responders[0];
+
+    expect(responder.type).toBe('user');
+    expect(responder.target).toBe('name');
+    expect(responder.value).toBe('view-user');
+    expect(wrapper.vm.typeLabel(responder.type)).toBe('User');
+    expect(wrapper.vm.targetLabel(responder.target)).toBe('Name');
+  });
+});

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

@@ -0,0 +1,132 @@
+import { shallowMount } from '@vue/test-utils';
+import PagerDuty from '@shell/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+
+describe('component: PagerDuty.vue', () => {
+  const defaultProps = {
+    mode:      'edit',
+    value:     {},
+    namespace: 'test-namespace'
+  };
+
+  it('should render correctly with initial props', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const headings = wrapper.findAll('h3');
+
+    expect(headings[0].text()).toBe('Target');
+
+    expect(wrapper.findComponent({ name: 'LabeledSelect' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'LabeledInput' }).exists()).toBe(true);
+    expect(wrapper.findComponent(Checkbox).exists()).toBe(true);
+  });
+
+  it('should show routing key selector for "Events API v2"', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const selector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    expect(selector.props('secretNameLabel')).toContain('monitoring.alertmanagerConfig.pagerDuty.routingKey');
+  });
+
+  it('should show service key selector for "Prometheus"', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, value: { serviceKey: { name: 's', key: 'k' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const selector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    expect(selector.props('secretNameLabel')).toContain('monitoring.alertmanagerConfig.pagerDuty.serviceKey');
+  });
+
+  it('should clear other key when integration type changes', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, value: { routingKey: { name: 'r', key: 'k' } } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    wrapper.vm.integrationType = 'Prometheus';
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.props('value').routingKey).toBeNull();
+  });
+
+  it('should update routing key secret', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    await secretSelector.vm.$emit('updateSecretName', 'routing-name');
+    await secretSelector.vm.$emit('updateSecretKey', 'routing-key');
+
+    expect(wrapper.props('value').routingKey.name).toBe('routing-name');
+    expect(wrapper.props('value').routingKey.key).toBe('routing-key');
+  });
+
+  it('should update service key secret', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, value: { serviceKey: {} } },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    const secretSelector = wrapper.findComponent({ name: 'SimpleSecretSelector' });
+
+    await secretSelector.vm.$emit('updateSecretName', 'service-name');
+    await secretSelector.vm.$emit('updateSecretKey', 'service-key');
+
+    expect(wrapper.props('value').serviceKey.name).toBe('service-name');
+    expect(wrapper.props('value').serviceKey.key).toBe('service-key');
+  });
+
+  it('should update proxy URL', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const labeledInput = wrapper.findComponent({ name: 'LabeledInput' });
+
+    await labeledInput.vm.$emit('update:value', 'http://proxy.com');
+    expect(wrapper.props('value').httpConfig.proxyURL).toBe('http://proxy.com');
+  });
+
+  it('should toggle send resolved alerts', async() => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  defaultProps,
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', false);
+    expect(wrapper.props('value').sendResolved).toBe(false);
+  });
+
+  it('should render in view mode', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, mode: 'view' },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent({ name: 'LabeledSelect' }).attributes('mode')).toBe('view');
+    expect(wrapper.findComponent({ name: 'SimpleSecretSelector' }).props('disabled')).toBe(true);
+    expect(wrapper.findComponent({ name: 'LabeledInput' }).attributes('mode')).toBe('view');
+    expect(wrapper.findComponent(Checkbox).attributes('mode')).toBe('view');
+  });
+
+  it('should show banner if no namespace is provided', () => {
+    const wrapper = shallowMount(PagerDuty, {
+      props:  { ...defaultProps, namespace: '' },
+      global: { mocks: { $fetchState: { pending: false, error: null } } }
+    });
+
+    expect(wrapper.findComponent({ name: 'Banner' }).exists()).toBe(true);
+  });
+});