Remove inactive integrations indicator

We previously showed the "power" icon in the integrations
listing when an integration is not active. This UI polish
removes this so we only show a green check icon when
the integration is active.

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

@@ -91,21 +91,7 @@ export default {
       ];
     },
   },
-  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: '' } })

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

@@ -5,10 +5,8 @@
   .col-lg-4
     %h3.page-title.gl-mt-0
       = @service.title
-      - [true, false].each do |value|
-        - hide_class = 'd-none' if @service.operating? != value
-        %span.js-service-active-status{ class: hide_class, data: { value: value.to_s } }
-          = boolean_to_icon value
+      - if @service.operating?
+        = sprite_icon('check', css_class: 'gl-text-green-500')
 
     - if @service.respond_to?(:detailed_description)
       %p= @service.detailed_description

app/views/shared/integrations/_index.html.haml

@@ -16,7 +16,8 @@
       - activated_label = (integration.activated? ? s_("ProjectService|%{service_title}: status on") : s_("ProjectService|%{service_title}: status off")) % { service_title: integration.title }
       %tr{ role: 'row' }
         %td{ role: 'cell', 'aria-colindex': 1, 'aria-label': activated_label, title: activated_label }
-          = boolean_to_icon integration.operating?
+          - if integration.operating?
+            = sprite_icon('check', css_class: 'gl-text-green-500')
         %td{ role: 'cell', 'aria-colindex': 2 }
           = link_to integration.title, scoped_edit_integration_path(integration), class: 'gl-font-weight-bold', data: { qa_selector: "#{integration.to_param}_link" }
         %td.d-none.d-sm-table-cell{ role: 'cell', 'aria-colindex': 3 }

changelogs/unreleased/212925-power-icon-should-be-removed-from-the-integrations-list.yml

+---
+title: Remove inactive integrations indicator in index and show pages
+merge_request: 50753
+author:
+type: changed

spec/features/projects/services/user_activates_alerts_spec.rb

@@ -22,7 +22,6 @@ RSpec.describe 'User activates Alerts', :js do
       click_link(service_title)
 
       expect(page).to have_callout_message
-      expect(page).not_to have_active_service
       expect(page).to have_toggle_active_disabled
     end
   end
@@ -38,7 +37,6 @@ RSpec.describe 'User activates Alerts', :js do
 
     it 'user cannot change settings' do
       expect(page).to have_callout_message
-      expect(page).to have_active_service
       expect(page).to have_toggle_active_disabled
       expect(page).to have_button_reset_key_disabled
     end
@@ -60,10 +58,6 @@ RSpec.describe 'User activates Alerts', :js do
     end
   end
 
-  def have_active_service
-    have_selector('.js-service-active-status[data-value="true"]')
-  end
-
   def have_toggle_active_disabled
     have_selector('#activated .project-feature-toggle.is-disabled')
   end

spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js

@@ -35,16 +35,9 @@ describe('AlertsServiceForm', () => {
   const findUrl = () => wrapper.find('#url');
   const findAuthorizationKey = () => wrapper.find('#authorization-key');
   const findDescription = () => wrapper.find('[data-testid="description"');
-  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" data-value="true"><svg class="s16 cgreen" data-testid="check-icon"><use xlink:href="icons.svg#check" /></svg></span>
-      <span class="js-service-active-status" data-value="false"><svg class="s16 clgray" data-testid="power-icon"><use xlink:href="icons.svg#power" /></svg></span>
-    </div>`);
   });
 
   afterEach(() => {
@@ -124,11 +117,6 @@ describe('AlertsServiceForm', () => {
           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');
-          });
         },
       );
     });