1 files changed, 15 insertions, 7 deletions
diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 7c21e33d892..ee4743010cf 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -1,8 +1,7 @@
 <script>
-import { GlTabs, GlTab, GlBadge } from '@gitlab/ui';
+import { GlTabs, GlTab, GlBadge, GlButton } from '@gitlab/ui';
 import { mapState } from 'vuex';
-// eslint-disable-next-line import/no-deprecated
-import { urlParamsToObject } from '~/lib/utils/url_utility';
+import { queryToObject } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import { MEMBER_TYPES, TAB_QUERY_PARAM_VALUES, ACTIVE_TAB_QUERY_PARAM_NAME } from '../constants';
 import MembersApp from './app.vue';
@@ -36,8 +35,8 @@ export default {
       queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest,
     },
   ],
-  components: { MembersApp, GlTabs, GlTab, GlBadge },
-  inject: ['canManageMembers'],
+  components: { MembersApp, GlTabs, GlTab, GlBadge, GlButton },
+  inject: ['canManageMembers', 'canExportMembers', 'exportCsvPath'],
   data() {
     return {
       selectedTabIndex: 0,
@@ -59,8 +58,7 @@ export default {
       },
     }),
     urlParams() {
-      // eslint-disable-next-line import/no-deprecated
-      return Object.keys(urlParamsToObject(window.location.search));
+      return Object.keys(queryToObject(window.location.search, { gatherArrays: true }));
     },
     activeTabIndexCalculatedFromUrlParams() {
       return this.$options.TABS.findIndex(({ namespace }) => {
@@ -123,5 +121,15 @@ export default {
         <members-app :namespace="tab.namespace" :tab-query-param-value="tab.queryParamValue" />
       </gl-tab>
     </template>
+    <template #tabs-end>
+      <gl-button
+        v-if="canExportMembers"
+        class="gl-align-self-center gl-ml-auto"
+        icon="export"
+        :href="exportCsvPath"
+      >
+        {{ __('Export as CSV') }}
+      </gl-button>
+    </template>
   </gl-tabs>
 </template>