Add active sync to security configuration tab

app/assets/javascripts/security_configuration/components/app.vue

@@ -160,8 +160,12 @@ export default {
       </template>
     </user-callout-dismisser>
 
-    <gl-tabs content-class="gl-pt-0">
-      <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting">
+    <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
+      <gl-tab
+        data-testid="security-testing-tab"
+        :title="$options.i18n.securityTesting"
+        query-param-value="security-testing"
+      >
         <auto-dev-ops-enabled-alert
           v-if="shouldShowAutoDevopsEnabledAlert"
           class="gl-mt-3"
@@ -203,7 +207,11 @@ export default {
           </template>
         </section-layout>
       </gl-tab>
-      <gl-tab data-testid="compliance-testing-tab" :title="$options.i18n.compliance">
+      <gl-tab
+        data-testid="compliance-testing-tab"
+        :title="$options.i18n.compliance"
+        query-param-value="compliance-testing"
+      >
         <section-layout :heading="$options.i18n.compliance">
           <template #description>
             <p>
@@ -241,6 +249,7 @@ export default {
         v-if="glFeatures.secureVulnerabilityTraining"
         data-testid="vulnerability-management-tab"
         :title="$options.i18n.vulnerabilityManagement"
+        query-param-value="vulnerability-management"
       >
         <section-layout :heading="$options.i18n.securityTraining">
           <template #features>

spec/frontend/security_configuration/components/app_spec.js

-import { GlTab } from '@gitlab/ui';
+import { GlTab, GlTabs } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
@@ -77,6 +77,7 @@ describe('App component', () => {
   const findMainHeading = () => wrapper.find('h1');
   const findTab = () => wrapper.findComponent(GlTab);
   const findTabs = () => wrapper.findAllComponents(GlTab);
+  const findGlTabs = () => wrapper.findComponent(GlTabs);
   const findByTestId = (id) => wrapper.findByTestId(id);
   const findFeatureCards = () => wrapper.findAllComponents(FeatureCard);
   const findTrainingProviderList = () => wrapper.findComponent(TrainingProviderList);
@@ -154,6 +155,10 @@ describe('App component', () => {
         expect(findTab().exists()).toBe(true);
       });
 
+      it('passes the `sync-active-tab-with-query-params` prop', () => {
+        expect(findGlTabs().props('syncActiveTabWithQueryParams')).toBe(true);
+      });
+
       it('renders correct amount of tabs', () => {
         expect(findTabs()).toHaveLength(expectedTabs.length);
       });
@@ -161,6 +166,10 @@ describe('App component', () => {
       it.each(expectedTabs)('renders the %s tab', (tabName) => {
         expect(findByTestId(`${tabName}-tab`).exists()).toBe(true);
       });
+
+      it.each(expectedTabs)('has the %s query-param-value', (tabName) => {
+        expect(findByTestId(`${tabName}-tab`).props('queryParamValue')).toBe(tabName);
+      });
     });
 
     it('renders right amount of feature cards for given props with correct props', () => {