Change tab-activation to use tabIndex model

Instead of activating a tab via passing down an 'active' prop to
each tab this changes leverages the `tabIndex` model to ensure
that it is the source of truth.

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

@@ -16,7 +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';
+import { getLocationHash } from '~/lib/utils/url_utility';
 
 export default {
   name: 'LicenseComplianceApp',
@@ -46,9 +46,10 @@ export default {
   },
   data() {
     return {
-      tabIndex: 0,
+      tabIndex: this.activeTabIndex(),
     };
   },
+  tabNames: ['licenses', 'policies'],
   computed: {
     ...mapState(LICENSE_LIST, ['initialized', 'licenses', 'reportInfo', 'listTypes', 'pageInfo']),
     ...mapState(LICENSE_MANAGEMENT, ['managedLicenses']),
@@ -69,16 +70,24 @@ export default {
       return this.tabIndex === 0;
     },
   },
+  watch: {
+    tabIndex: {
+      handler(newTabIndex) {
+        window.location.hash = this.$options.tabNames[newTabIndex];
+      },
+      // this ensures that the hash will be set on creation if it is empty
+      immediate: true,
+    },
+  },
   created() {
     this.fetchLicenses();
   },
   methods: {
     ...mapActions(LICENSE_LIST, ['fetchLicenses']),
-    isActive(tabName) {
-      return doesHashExistInUrl(tabName);
-    },
-    setActive(tabName) {
-      window.location.hash = tabName;
+    activeTabIndex() {
+      const activeTabIndex = this.$options.tabNames.indexOf(getLocationHash());
+
+      return activeTabIndex !== -1 ? activeTabIndex : 0;
     },
   },
 };
@@ -128,11 +137,7 @@ export default {
     <!-- TODO: Remove feature flag -->
     <template v-if="hasLicensePolicyList">
       <gl-tabs v-model="tabIndex" content-class="pt-0">
-        <gl-tab
-          data-testid="licenses"
-          :active="isActive('licenses')"
-          @click="setActive('licenses')"
-        >
+        <gl-tab>
           <template #title>
             {{ s__('Licenses|Detected in Project') }}
             <gl-badge pill>{{ licenseCount }}</gl-badge>
@@ -141,11 +146,7 @@ export default {
           <detected-licenses-table />
         </gl-tab>
 
-        <gl-tab
-          data-testid="policies"
-          :active="isActive('policies')"
-          @click="setActive('policies')"
-        >
+        <gl-tab>
           <template #title>
             {{ s__('Licenses|Policies') }}
             <gl-badge pill>{{ policyCount }}</gl-badge>

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

@@ -189,52 +189,47 @@ describe('Project Licenses', () => {
     });
 
     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 },
-              },
-            },
-          });
+      givenLocationHash | expectedTabIndex
+      ${'licenses'}     | ${0}
+      ${'policies'}     | ${1}
+      ${'foo'}          | ${0}
+      ${'bar'}          | ${0}
+    `('when the url contains $givenUrlHash hash', ({ givenLocationHash, expectedTabIndex }) => {
+      beforeEach(() => {
+        setWindowLocation({
+          href: `${TEST_HOST}#${givenLocationHash}`,
         });
 
-        it(`${tabName} tab has "active" attribute set to be ${expectedActiveAttributeValue}`, () => {
-          expect(wrapper.find(`[data-testid=${tabName}]`).attributes('active')).toBe(
-            expectedActiveAttributeValue,
-          );
+        createComponent({
+          state: {
+            initialized: true,
+          },
+          options: {
+            provide: {
+              glFeatures: { licensePolicyList: true },
+            },
+          },
         });
-      },
-    );
-
-    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');
+      it(`sets the tabIndex to be "${expectedTabIndex}`, () => {
+        expect(wrapper.find(GlTabs).attributes('value')).toBe(`${expectedTabIndex}`);
+      });
+    });
 
-        expect(window.location.hash).toContain(tabName);
+    it.each`
+      givenTabIndex | expectedLocationHash
+      ${0}          | ${'licenses'}
+      ${1}          | ${'policies'}
+    `(
+      'sets the location hash to "tabName" when the corresponding tab is activated',
+      ({ givenTabIndex, expectedLocationHash }) => {
+        wrapper.setData({ tabIndex: givenTabIndex });
+        wrapper.vm.$forceUpdate();
 
-        window.location.hash = originalHash;
+        return wrapper.vm.$nextTick().then(() => {
+          expect(window.location.hash).toBe(expectedLocationHash);
+        });
       },
     );