Update font-awesome icons in prometheus config

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -18,29 +18,32 @@ export default class PrometheusMetrics {
     this.$monitoredMetricsList = this.$monitoredMetricsPanel.find('.js-metrics-list');
 
     this.$missingEnvVarPanel = this.$wrapper.find('.js-panel-missing-env-vars');
-    this.$panelToggle = this.$missingEnvVarPanel.find('.js-panel-toggle');
+    this.$panelToggleRight = this.$missingEnvVarPanel.find('.js-panel-toggle-right');
+    this.$panelToggleDown = this.$missingEnvVarPanel.find('.js-panel-toggle-down');
     this.$missingEnvVarMetricCount = this.$missingEnvVarPanel.find('.js-env-var-count');
     this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
 
     this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics');
     this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path');
 
-    this.$panelToggle.on('click', e => this.handlePanelToggle(e));
+    this.$panelToggleRight.on('click', e => this.handlePanelToggle(e));
+    this.$panelToggleDown.on('click', e => this.handlePanelToggle(e));
   }
 
   init() {
     this.loadActiveMetrics();
   }
 
-  /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
     const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
     $currentPanelBody.toggleClass('hidden');
-    if ($toggleBtn.hasClass('fa-caret-down')) {
-      $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');
-    } else {
-      $toggleBtn.removeClass('fa-caret-right').addClass('fa-caret-down');
+    if ($toggleBtn.hasClass('js-panel-toggle-right')) {
+      $toggleBtn.addClass('hidden');
+      this.$panelToggleDown.removeClass('hidden');
+    } else if ($toggleBtn.hasClass('js-panel-toggle-down')) {
+      $toggleBtn.addClass('hidden');
+      this.$panelToggleRight.removeClass('hidden');
     }
   }
 

app/views/projects/services/prometheus/_metrics.html.haml

@@ -25,7 +25,8 @@
 
   .card.hidden.js-panel-missing-env-vars
     .card-header
-      = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
+      = sprite_icon('chevron-lg-right', css_class: 'panel-toggle js-panel-toggle-right' )
+      = sprite_icon('chevron-lg-down', css_class: 'panel-toggle js-panel-toggle-down hidden' )
       = s_('PrometheusService|Missing environment variable')
       %span.badge.badge-pill.js-env-var-count 0
     .card-body.hidden

changelogs/unreleased/jivanvl-update-prometheus-metrics-icons.yml

+---
+title: Replace font-awesome icons in prometheus config
+merge_request: 47713
+author:
+type: changed

spec/frontend/prometheus_metrics/prometheus_metrics_spec.js

@@ -27,7 +27,8 @@ describe('PrometheusMetrics', () => {
       expect(prometheusMetrics.$monitoredMetricsEmpty).toBeDefined();
       expect(prometheusMetrics.$monitoredMetricsList).toBeDefined();
       expect(prometheusMetrics.$missingEnvVarPanel).toBeDefined();
-      expect(prometheusMetrics.$panelToggle).toBeDefined();
+      expect(prometheusMetrics.$panelToggleRight).toBeDefined();
+      expect(prometheusMetrics.$panelToggleDown).toBeDefined();
       expect(prometheusMetrics.$missingEnvVarMetricCount).toBeDefined();
       expect(prometheusMetrics.$missingEnvVarMetricsList).toBeDefined();
     });