1 files changed, 18 insertions, 5 deletions
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index ff58cd20ca1..12b5cb9f207 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -1,17 +1,22 @@
 <script>
+import { GlButton } from '@gitlab/ui';
+import api from '~/api';
 import { __ } from '~/locale';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { status, SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR } from '../constants';
 import IssuesList from './issues_list.vue';
 
 export default {
   name: 'ReportSection',
   components: {
+    GlButton,
     IssuesList,
-    StatusIcon,
     Popover,
+    StatusIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     alwaysOpen: {
       type: Boolean,
@@ -96,6 +101,11 @@ export default {
       required: false,
       default: false,
     },
+    trackAction: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   data() {
@@ -162,6 +172,10 @@ export default {
   },
   methods: {
     toggleCollapsed() {
+      if (this.trackAction && this.glFeatures.usersExpandingWidgetsUsageData) {
+        api.trackRedisHllUserEvent(this.trackAction);
+      }
+
       if (this.shouldEmitToggleEvent) {
         this.$emit('toggleEvent');
       }
@@ -186,16 +200,15 @@ export default {
 
         <slot name="action-buttons" :is-collapsible="isCollapsible"></slot>
 
-        <button
+        <gl-button
           v-if="isCollapsible"
-          type="button"
+          class="js-collapse-btn"
           data-testid="report-section-expand-button"
-          class="js-collapse-btn btn float-right btn-sm align-self-center"
           data-qa-selector="expand_report_button"
           @click="toggleCollapsed"
         >
           {{ collapseText }}
-        </button>
+        </gl-button>
       </div>
     </div>