Merge branch 'generic-alert-button-colour' into 'master'

Change generic alert button color with state

See merge request gitlab-org/gitlab!16420

app/views/projects/services/_form.html.haml

@@ -2,8 +2,10 @@
   .col-lg-3
     %h4.prepend-top-0
       = @service.title
-      = boolean_to_icon @service.activated?
-
+      - [true, false].each do |value|
+        - hide_class = 'd-none' if @service.activated? != value
+        %span.js-service-active-status{ class: hide_class, data: { value: value.to_s } }
+          = boolean_to_icon value
     %p= #{@service.description}.
 
     - if @service.respond_to?(:detailed_description)

ee/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue

@@ -80,7 +80,21 @@ export default {
       return `${desc}${learnMoreDesc}`;
     },
   },
+  watch: {
+    activated() {
+      this.updateIcon();
+    },
+  },
   methods: {
+    updateIcon() {
+      return document.querySelectorAll('.js-service-active-status').forEach(icon => {
+        if (icon.dataset.value === this.activated.toString()) {
+          icon.classList.remove('d-none');
+        } else {
+          icon.classList.add('d-none');
+        }
+      });
+    },
     resetKey() {
       return axios
         .put(this.formPath, { service: { token: '' } })

ee/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js

@@ -36,9 +36,16 @@ describe('AlertsServiceForm', () => {
   const findUrl = () => wrapper.find('#url');
   const findAuthorizationKey = () => wrapper.find('#authorization-key');
   const findDescription = () => wrapper.find('p');
+  const findActiveStatusIcon = val =>
+    document.querySelector(`.js-service-active-status[data-value=${val.toString()}]`);
 
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
+    setFixtures(`
+    <div>
+      <span class="js-service-active-status fa fa-circle" data-value="true"></span>
+      <span class="js-service-active-status fa fa-power-off" data-value="false"></span>
+    </div>`);
   });
 
   afterEach(() => {
@@ -127,25 +134,33 @@ describe('AlertsServiceForm', () => {
     });
 
     describe('successfully completes', () => {
-      const formPath = 'some/path';
-
-      it('enables toggle when initialActivated=false', () => {
-        mockAxios.onPut(formPath, { service: { active: true } }).replyOnce(200, { active: true });
-        createComponent({ initialActivated: false, formPath });
-
-        return wrapper.vm.toggleActivated(true).then(() => {
-          expect(wrapper.find(ToggleButton).props('value')).toBe(true);
-        });
-      });
-
-      it('disables toggle when initialActivated=true', () => {
-        mockAxios.onPut(formPath, { service: { active: false } }).replyOnce(200, { active: false });
-        createComponent({ initialActivated: true, formPath });
-
-        return wrapper.vm.toggleActivated(false).then(() => {
-          expect(wrapper.find(ToggleButton).props('value')).toBe(false);
-        });
-      });
+      describe.each`
+        initialActivated | value
+        ${false}         | ${true}
+        ${true}          | ${false}
+      `(
+        'when initialActivated=$initialActivated and value=$value',
+        ({ initialActivated, value }) => {
+          beforeEach(() => {
+            const formPath = 'some/path';
+            mockAxios
+              .onPut(formPath, { service: { active: value } })
+              .replyOnce(200, { active: value });
+            createComponent({ initialActivated, formPath });
+
+            return wrapper.vm.toggleActivated(value);
+          });
+
+          it(`updates toggle button value to ${value}`, () => {
+            expect(wrapper.find(ToggleButton).props('value')).toBe(value);
+          });
+
+          it('updates visible status icons', () => {
+            expect(findActiveStatusIcon(!value)).toHaveClass('d-none');
+            expect(findActiveStatusIcon(value)).not.toHaveClass('d-none');
+          });
+        },
+      );
     });
 
     describe('error is encountered', () => {