Add selected state for chart button in vulnerabilities dashboard

changelogs/unreleased/seleced-state-vulnerabilities-dashboard.yml

+---
+title: Add selected state for chart button in vulnerabilities dashboard
+merge_request: 54763
+author: Yogi (@yo)
+type: changed

ee/app/assets/javascripts/security_dashboard/components/vulnerability_chart_buttons.vue

@@ -35,7 +35,7 @@ export default {
     <gl-button
       v-for="day in days"
       :key="day"
-      :class="{ active: activeDay === day }"
+      :class="{ selected: activeDay === day }"
       :data-days="day"
       @click="clickHandler(day)"
     >

ee/spec/frontend/security_dashboard/components/first_class_vulnerability_chart_spec.js

@@ -18,7 +18,7 @@ describe('First class vulnerability chart component', () => {
 
   const findTimeInfo = () => wrapper.find({ ref: 'timeInfo' });
   const findChartButtons = () => wrapper.find(ChartButtons);
-  const findActiveChartButton = () => findChartButtons().find('.active');
+  const findActiveChartButton = () => findChartButtons().find('.selected');
   const find90DaysChartButton = () => findChartButtons().find('[data-days="90"]');
 
   const createComponent = ({ $apollo, propsData, stubs, data } = {}) => {

ee/spec/frontend/security_dashboard/components/vulnerability_chart_button_spec.js

@@ -26,7 +26,7 @@ describe('Vulnerability Chart Buttons', () => {
       const activeDay = DAYS.ninety;
       createWrapper({ activeDay });
 
-      const activeButton = wrapper.find('[data-days="90"].active');
+      const activeButton = wrapper.find('[data-days="90"].selected');
 
       expect(activeButton.attributes('data-days')).toMatch('90');
     });
@@ -35,7 +35,7 @@ describe('Vulnerability Chart Buttons', () => {
       const activeDay = DAYS.sixty;
       createWrapper({ activeDay });
 
-      const activeButton = wrapper.find('[data-days="60"].active');
+      const activeButton = wrapper.find('[data-days="60"].selected');
 
       expect(activeButton.attributes('data-days')).toMatch('60');
     });
@@ -44,7 +44,7 @@ describe('Vulnerability Chart Buttons', () => {
       const activeDay = DAYS.thirty;
       createWrapper({ activeDay });
 
-      const activeButton = wrapper.find('[data-days="30"].active');
+      const activeButton = wrapper.find('[data-days="30"].selected');
 
       expect(activeButton.attributes('data-days')).toMatch('30');
     });
@@ -59,13 +59,13 @@ describe('Vulnerability Chart Buttons', () => {
 
     it('should call the clickHandler', () => {
       jest.spyOn(wrapper.vm, 'clickHandler');
-      wrapper.find('[data-days="30"].active').trigger('click', DAYS.thirty);
+      wrapper.find('[data-days="30"].selected').trigger('click', DAYS.thirty);
 
       expect(wrapper.vm.clickHandler).toHaveBeenCalledWith(DAYS.thirty);
     });
 
     it('should emit a click event', () => {
-      wrapper.find('[data-days="30"].active').trigger('click', DAYS.thirty);
+      wrapper.find('[data-days="30"].selected').trigger('click', DAYS.thirty);
 
       expect(wrapper.emitted().click[0]).toEqual([DAYS.thirty]);
     });