Enable deep linking on environments page for tabs

When migrating to `GlTabs`, no syncing with the query parameters was
done.

We correct that by adding an `activeTab` computed property that searches
for the tab selected by the query parameters, defaulting to the first
tab if none is found. This is bound to the `GlTabs`' `:value` property.

As the query parameter is always updated on tab selection, changing tabs
works as expected.

Changelog: fixed

app/assets/javascripts/environments/components/environments_app.vue

@@ -135,7 +135,7 @@ export default {
           >{{ $options.i18n.newEnvironmentButtonLabel }}</gl-button
         >
       </div>
-      <gl-tabs content-class="gl-display-none">
+      <gl-tabs :value="activeTab" content-class="gl-display-none">
         <gl-tab
           v-for="(tab, idx) in tabs"
           :key="idx"

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -208,6 +208,9 @@ export default {
         },
       ];
     },
+    activeTab() {
+      return this.tabs.findIndex(({ isActive }) => isActive) ?? 0;
+    },
   },
 
   /**

spec/frontend/environments/environments_app_spec.js

+import { GlTabs } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -7,6 +8,7 @@ import EmptyState from '~/environments/components/empty_state.vue';
 import EnableReviewAppModal from '~/environments/components/enable_review_app_modal.vue';
 import EnvironmentsApp from '~/environments/components/environments_app.vue';
 import axios from '~/lib/utils/axios_utils';
+import * as utils from '~/lib/utils/common_utils';
 import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
@@ -264,4 +266,18 @@ describe('Environment', () => {
       });
     });
   });
+
+  describe('tabs', () => {
+    beforeEach(() => {
+      mockRequest(200, { environments: [] });
+      jest
+        .spyOn(utils, 'getParameterByName')
+        .mockImplementation((param) => (param === 'scope' ? 'stopped' : null));
+      return createWrapper(true);
+    });
+
+    it('selects the tab for the parameter', () => {
+      expect(wrapper.findComponent(GlTabs).attributes('value')).toBe('1');
+    });
+  });
 });