Add latest changes from gitlab-org/gitlab@master

2 files changed, 92 insertions, 62 deletions

diff --git a/spec/frontend/clusters/components/fluentd_output_settings_spec.js b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
index 360478b36f5..5e27cc49049 100644
--- a/spec/frontend/clusters/components/fluentd_output_settings_spec.js
+++ b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
 import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
-import { GlAlert, GlDropdown } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -9,34 +9,58 @@ const { UPDATING } = APPLICATION_STATUS;
 describe('FluentdOutputSettings', () => {
   let wrapper;
 
-  const defaultProps = {
-    status: 'installable',
-    installed: false,
-    updateAvailable: false,
+  const defaultSettings = {
     protocol: 'tcp',
     host: '127.0.0.1',
     port: 514,
-    isEditingSettings: false,
+    wafLogEnabled: true,
+    ciliumLogEnabled: false,
+  };
+  const defaultProps = {
+    status: 'installable',
+    updateFailed: false,
+    ...defaultSettings,
   };
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(FluentdOutputSettings, {
       propsData: {
-        fluentd: {
-          ...defaultProps,
-          ...props,
-        },
+        ...defaultProps,
+        ...props,
       },
     });
   };
-
+  const updateComponentPropsFromEvent = () => {
+    const { isEditingSettings, ...props } = eventHub.$emit.mock.calls[0][1];
+    wrapper.setProps(props);
+  };
   const findSaveButton = () => wrapper.find({ ref: 'saveBtn' });
   const findCancelButton = () => wrapper.find({ ref: 'cancelBtn' });
   const findProtocolDropdown = () => wrapper.find(GlDropdown);
+  const findCheckbox = name =>
+    wrapper.findAll(GlFormCheckbox).wrappers.find(x => x.text() === name);
+  const findHost = () => wrapper.find('#fluentd-host');
+  const findPort = () => wrapper.find('#fluentd-port');
+  const changeCheckbox = checkbox => {
+    const currentValue = checkbox.attributes('checked')?.toString() === 'true';
+    checkbox.vm.$emit('input', !currentValue);
+  };
+  const changeInput = ({ element }, val) => {
+    element.value = val;
+    element.dispatchEvent(new Event('input'));
+  };
+  const changePort = val => changeInput(findPort(), val);
+  const changeHost = val => changeInput(findHost(), val);
+  const changeProtocol = idx => findProtocolDropdown().vm.$children[idx].$emit('click');
+  const toApplicationSettings = ({ wafLogEnabled, ciliumLogEnabled, ...settings }) => ({
+    ...settings,
+    waf_log_enabled: wafLogEnabled,
+    cilium_log_enabled: ciliumLogEnabled,
+  });
 
   describe('when fluentd is installed', () => {
     beforeEach(() => {
-      createComponent({ installed: true, status: 'installed' });
+      createComponent({ status: 'installed' });
       jest.spyOn(eventHub, '$emit');
     });
 
@@ -45,73 +69,77 @@ describe('FluentdOutputSettings', () => {
       expect(findCancelButton().exists()).toBe(false);
     });
 
-    describe('with protocol dropdown changed by the user', () => {
+    describe.each`
+      desc                                     | changeFn                                                       | key                   | value
+      ${'when protocol dropdown is triggered'} | ${() => changeProtocol(1)}                                     | ${'protocol'}         | ${'udp'}
+      ${'when host is changed'}                | ${() => changeHost('test-host')}                               | ${'host'}             | ${'test-host'}
+      ${'when port is changed'}                | ${() => changePort(123)}                                       | ${'port'}             | ${123}
+      ${'when wafLogEnabled changes'}          | ${() => changeCheckbox(findCheckbox('Send ModSecurity Logs'))} | ${'wafLogEnabled'}    | ${!defaultSettings.wafLogEnabled}
+      ${'when ciliumLogEnabled changes'}       | ${() => changeCheckbox(findCheckbox('Send Cilium Logs'))}      | ${'ciliumLogEnabled'} | ${!defaultSettings.ciliumLogEnabled}
+    `('$desc', ({ changeFn, key, value }) => {
       beforeEach(() => {
-        findProtocolDropdown().vm.$children[1].$emit('click');
-        wrapper.setProps({
-          fluentd: {
-            ...defaultProps,
-            installed: true,
-            status: 'installed',
-            protocol: 'udp',
-            isEditingSettings: true,
-          },
-        });
-      });
-
-      it('renders save and cancel buttons', () => {
-        expect(findSaveButton().exists()).toBe(true);
-        expect(findCancelButton().exists()).toBe(true);
-      });
-
-      it('enables related toggle and buttons', () => {
-        expect(findSaveButton().attributes().disabled).toBeUndefined();
-        expect(findCancelButton().attributes().disabled).toBeUndefined();
+        changeFn();
       });
 
       it('triggers set event to be propagated with the current value', () => {
         expect(eventHub.$emit).toHaveBeenCalledWith('setFluentdSettings', {
-          id: FLUENTD,
-          host: '127.0.0.1',
-          port: 514,
-          protocol: 'UDP',
+          [key]: value,
+          isEditingSettings: true,
         });
       });
 
-      describe('and the save changes button is clicked', () => {
+      describe('when value is updated from store', () => {
         beforeEach(() => {
-          findSaveButton().vm.$emit('click');
+          updateComponentPropsFromEvent();
+        });
+
+        it('enables save and cancel buttons', () => {
+          expect(findSaveButton().exists()).toBe(true);
+          expect(findSaveButton().attributes().disabled).toBeUndefined();
+          expect(findCancelButton().exists()).toBe(true);
+          expect(findCancelButton().attributes().disabled).toBeUndefined();
         });
 
-        it('triggers save event and pass current values', () => {
-          expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', {
-            id: FLUENTD,
-            params: {
-              host: '127.0.0.1',
-              port: 514,
-              protocol: 'udp',
-            },
+        describe('and the save changes button is clicked', () => {
+          beforeEach(() => {
+            eventHub.$emit.mockClear();
+            findSaveButton().vm.$emit('click');
+          });
+
+          it('triggers save event and pass current values', () => {
+            expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', {
+              id: FLUENTD,
+              params: toApplicationSettings({
+                ...defaultSettings,
+                [key]: value,
+              }),
+            });
           });
         });
-      });
 
-      describe('and the cancel button is clicked', () => {
-        beforeEach(() => {
-          findCancelButton().vm.$emit('click');
-          wrapper.setProps({
-            fluentd: {
-              ...defaultProps,
-              installed: true,
-              status: 'installed',
-              protocol: 'udp',
+        describe('and the cancel button is clicked', () => {
+          beforeEach(() => {
+            eventHub.$emit.mockClear();
+            findCancelButton().vm.$emit('click');
+          });
+
+          it('triggers reset event', () => {
+            expect(eventHub.$emit).toHaveBeenCalledWith('setFluentdSettings', {
+              ...defaultSettings,
               isEditingSettings: false,
-            },
+            });
           });
-        });
 
-        it('triggers reset event and hides both cancel and save changes button', () => {
-          expect(findSaveButton().exists()).toBe(false);
-          expect(findCancelButton().exists()).toBe(false);
+          describe('when value is updated from store', () => {
+            beforeEach(() => {
+              updateComponentPropsFromEvent();
+            });
+
+            it('does not render save and cancel buttons', () => {
+              expect(findSaveButton().exists()).toBe(false);
+              expect(findCancelButton().exists()).toBe(false);
+            });
+          });
         });
       });
     });
diff --git a/spec/frontend/clusters/stores/clusters_store_spec.js b/spec/frontend/clusters/stores/clusters_store_spec.js
index 58e5bfb8007..36e99c37be5 100644
--- a/spec/frontend/clusters/stores/clusters_store_spec.js
+++ b/spec/frontend/clusters/stores/clusters_store_spec.js
@@ -127,6 +127,7 @@ describe('Clusters Store', () => {
             statusReason: null,
             requestReason: null,
             port: null,
+            ciliumLogEnabled: null,
             host: null,
             protocol: null,
             installed: false,
@@ -136,6 +137,7 @@ describe('Clusters Store', () => {
             uninstallSuccessful: false,
             uninstallFailed: false,
             validationError: null,
+            wafLogEnabled: null,
           },
           jupyter: {
             title: 'JupyterHub',