1 files changed, 24 insertions, 21 deletions

diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 37b9135126d..7c21e33d892 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -1,16 +1,18 @@
 <script>
 import { GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { urlParamsToObject } from '~/lib/utils/common_utils';
+// eslint-disable-next-line import/no-deprecated
+import { urlParamsToObject } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import { MEMBER_TYPES } from '../constants';
+import { MEMBER_TYPES, TAB_QUERY_PARAM_VALUES, ACTIVE_TAB_QUERY_PARAM_NAME } from '../constants';
 import MembersApp from './app.vue';
 
 const countComputed = (state, namespace) => state[namespace]?.pagination?.totalItems || 0;
 
 export default {
   name: 'MembersTabs',
-  tabs: [
+  ACTIVE_TAB_QUERY_PARAM_NAME,
+  TABS: [
     {
       namespace: MEMBER_TYPES.user,
       title: __('Members'),
@@ -19,19 +21,21 @@ export default {
       namespace: MEMBER_TYPES.group,
       title: __('Groups'),
       attrs: { 'data-qa-selector': 'groups_list_tab' },
+      queryParamValue: TAB_QUERY_PARAM_VALUES.group,
     },
     {
       namespace: MEMBER_TYPES.invite,
       title: __('Invited'),
       canManageMembersPermissionsRequired: true,
+      queryParamValue: TAB_QUERY_PARAM_VALUES.invite,
     },
     {
       namespace: MEMBER_TYPES.accessRequest,
       title: __('Access requests'),
       canManageMembersPermissionsRequired: true,
+      queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest,
     },
   ],
-  urlParams: [],
   components: { MembersApp, GlTabs, GlTab, GlBadge },
   inject: ['canManageMembers'],
   data() {
@@ -55,32 +59,22 @@ export default {
       },
     }),
     urlParams() {
+      // eslint-disable-next-line import/no-deprecated
       return Object.keys(urlParamsToObject(window.location.search));
     },
     activeTabIndexCalculatedFromUrlParams() {
-      return this.$options.tabs.findIndex(({ namespace }) => {
+      return this.$options.TABS.findIndex(({ namespace }) => {
         return this.getTabUrlParams(namespace).some((urlParam) =>
           this.urlParams.includes(urlParam),
         );
       });
     },
   },
-  created() {
-    if (this.activeTabIndexCalculatedFromUrlParams === -1) {
-      return;
-    }
-
-    this.selectedTabIndex = this.activeTabIndexCalculatedFromUrlParams;
-  },
   methods: {
     getTabUrlParams(namespace) {
       const state = this.$store.state[namespace];
       const urlParams = [];
 
-      if (state?.pagination?.paramName) {
-        urlParams.push(state.pagination.paramName);
-      }
-
       if (state?.filteredSearchBar?.searchParam) {
         urlParams.push(state.filteredSearchBar.searchParam);
       }
@@ -110,14 +104,23 @@ export default {
 </script>
 
 <template>
-  <gl-tabs v-model="selectedTabIndex">
-    <template v-for="(tab, index) in $options.tabs">
-      <gl-tab v-if="showTab(tab, index)" :key="tab.namespace" :title-link-attributes="tab.attrs">
-        <template slot="title">
+  <gl-tabs
+    v-model="selectedTabIndex"
+    sync-active-tab-with-query-params
+    :query-param-name="$options.ACTIVE_TAB_QUERY_PARAM_NAME"
+  >
+    <template v-for="(tab, index) in $options.TABS">
+      <gl-tab
+        v-if="showTab(tab, index)"
+        :key="tab.namespace"
+        :title-link-attributes="tab.attrs"
+        :query-param-value="tab.queryParamValue"
+      >
+        <template #title>
           <span>{{ tab.title }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge">{{ getTabCount(tab) }}</gl-badge>
         </template>
-        <members-app :namespace="tab.namespace" />
+        <members-app :namespace="tab.namespace" :tab-query-param-value="tab.queryParamValue" />
       </gl-tab>
     </template>
   </gl-tabs>