Link license management to license compliance page

* Changes license_management_settings_path from returning a link to
  `project > settings > ci/cd > license compliance` to
  `project > security > license compliance > polices`
* Adds logic to activate tabs based on location.hash
* Adds tests

ee/app/assets/javascripts/license_compliance/components/app.vue

@@ -16,6 +16,7 @@ import DetectedLicensesTable from './detected_licenses_table.vue';
 import PipelineInfo from './pipeline_info.vue';
 import LicenseManagement from 'ee/vue_shared/license_compliance/license_management.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { doesHashExistInUrl } from '~/lib/utils/url_utility';
 
 export default {
   name: 'LicenseComplianceApp',
@@ -73,6 +74,12 @@ export default {
   },
   methods: {
     ...mapActions(LICENSE_LIST, ['fetchLicenses']),
+    isActive(tabName) {
+      return doesHashExistInUrl(tabName);
+    },
+    setActive(tabName) {
+      window.location.hash = tabName;
+    },
   },
 };
 </script>
@@ -121,7 +128,11 @@ export default {
     <!-- TODO: Remove feature flag -->
     <template v-if="hasLicensePolicyList">
       <gl-tabs v-model="tabIndex" content-class="pt-0">
-        <gl-tab>
+        <gl-tab
+          data-testid="licenses"
+          :active="isActive('licenses')"
+          @click="setActive('licenses')"
+        >
           <template #title>
             {{ s__('Licenses|Detected in Project') }}
             <gl-badge pill>{{ licenseCount }}</gl-badge>
@@ -130,7 +141,11 @@ export default {
           <detected-licenses-table />
         </gl-tab>
 
-        <gl-tab>
+        <gl-tab
+          data-testid="policies"
+          :active="isActive('policies')"
+          @click="setActive('policies')"
+        >
           <template #title>
             {{ s__('Licenses|Policies') }}
             <gl-badge pill>{{ policyCount }}</gl-badge>

ee/app/helpers/ee/gitlab_routing_helper.rb

@@ -35,7 +35,7 @@ module EE
     end
 
     def license_management_settings_path(project)
-      project_settings_ci_cd_path(project, anchor: 'js-license-management')
+      project_licenses_path(project, anchor: 'policies')
     end
 
     def vulnerability_path(entity, *args)

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 
 import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
+import setWindowLocation from 'helpers/set_window_location_helper';
 
 import { REPORT_STATUS } from 'ee/license_compliance/store/modules/list/constants';
 
@@ -80,6 +81,10 @@ const createComponent = ({ state, props, options }) => {
     },
     ...options,
     store: fakeStore,
+    stubs: {
+      GlTabs,
+      GlTab,
+    },
   });
 };
 
@@ -183,6 +188,56 @@ describe('Project Licenses', () => {
       expect(wrapper.findAll(GlTab)).toHaveLength(2);
     });
 
+    describe.each`
+      givenUrlHash   | tabName       | expectedActiveAttributeValue
+      ${'#policies'} | ${'policies'} | ${'true'}
+      ${'#policies'} | ${'licenses'} | ${undefined}
+      ${'#licenses'} | ${'licenses'} | ${'true'}
+      ${'#licenses'} | ${'policies'} | ${undefined}
+      ${'#foo'}      | ${'policies'} | ${undefined}
+      ${'#foo'}      | ${'licenses'} | ${undefined}
+    `(
+      'when the url contains $givenUrlHash hash',
+      ({ givenUrlHash, tabName, expectedActiveAttributeValue }) => {
+        beforeEach(() => {
+          setWindowLocation({
+            href: `${TEST_HOST}${givenUrlHash}`,
+          });
+
+          createComponent({
+            state: {
+              initialized: true,
+            },
+            options: {
+              provide: {
+                glFeatures: { licensePolicyList: true },
+              },
+            },
+          });
+        });
+
+        it(`${tabName} tab has "active" attribute set to be ${expectedActiveAttributeValue}`, () => {
+          expect(wrapper.find(`[data-testid=${tabName}]`).attributes('active')).toBe(
+            expectedActiveAttributeValue,
+          );
+        });
+      },
+    );
+
+    it.each(['policies', 'licenses'])(
+      'sets the location hash to "%s" when the corresponding tab is activated',
+      tabName => {
+        const originalHash = window.location.hash;
+        expect(originalHash).toBeFalsy();
+
+        wrapper.find(`[data-testid="${tabName}"]`).vm.$emit('click');
+
+        expect(window.location.hash).toContain(tabName);
+
+        window.location.hash = originalHash;
+      },
+    );
+
     it('it renders the "Detected in project" table', () => {
       expect(wrapper.find(DetectedLicensesTable).exists()).toBe(true);
     });

spec/frontend/helpers/set_window_location_helper.js

+/**
+ * setWindowLocation allows for setting properties of `window.location`
+ * (doing so directly is causing an error in jsdom)
+ *
+ * Example usage:
+ * assert(window.location.hash === undefined);
+ * setWindowLocation({
+ *    href: 'http://example.com#foo'
+ * })
+ * assert(window.location.hash === '#foo');
+ *
+ * More information:
+ * https://github.com/facebook/jest/issues/890
+ *
+ * @param value
+ */
+export default function setWindowLocation(value) {
+  Object.defineProperty(window, 'location', {
+    writable: true,
+    value,
+  });
+}