Add latest changes from gitlab-org/gitlab@master

2 files changed, 22 insertions, 4 deletions

diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 22516c7166d..ee4743010cf 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTabs, GlTab, GlBadge } from '@gitlab/ui';
+import { GlTabs, GlTab, GlBadge, GlButton } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { queryToObject } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -35,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,
@@ -121,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>
diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 2ed0958d1dc..510e89240f4 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -14,7 +14,13 @@ export const initMembersApp = (el, options) => {
   Vue.use(Vuex);
   Vue.use(GlToast);
 
-  const { sourceId, canManageMembers, ...vuexStoreAttributes } = parseDataAttributes(el);
+  const {
+    sourceId,
+    canManageMembers,
+    canExportMembers,
+    exportCsvPath,
+    ...vuexStoreAttributes
+  } = parseDataAttributes(el);
 
   const modules = Object.keys(MEMBER_TYPES).reduce((accumulator, namespace) => {
     const namespacedOptions = options[namespace];
@@ -54,6 +60,8 @@ export const initMembersApp = (el, options) => {
       currentUserId: gon.current_user_id || null,
       sourceId,
       canManageMembers,
+      canExportMembers,
+      exportCsvPath,
     },
     render: (createElement) => createElement('members-tabs'),
   });