Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

4 files changed, 86 insertions, 9 deletions

diff --git a/app/assets/javascripts/groups/members/components/app.vue b/app/assets/javascripts/groups/members/components/app.vue
index e94b28f5773..2e6dd4a0bad 100644
--- a/app/assets/javascripts/groups/members/components/app.vue
+++ b/app/assets/javascripts/groups/members/components/app.vue
@@ -1,11 +1,38 @@
 <script>
+import { mapState, mapMutations } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
+import MembersTable from '~/vue_shared/components/members/table/members_table.vue';
+import { scrollToElement } from '~/lib/utils/common_utils';
+import { HIDE_ERROR } from '~/vuex_shared/modules/members/mutation_types';
+
 export default {
   name: 'GroupMembersApp',
+  components: { MembersTable, GlAlert },
+  computed: {
+    ...mapState(['showError', 'errorMessage']),
+  },
+  watch: {
+    showError(value) {
+      if (value) {
+        this.$nextTick(() => {
+          scrollToElement(this.$refs.errorAlert.$el);
+        });
+      }
+    },
+  },
+  methods: {
+    ...mapMutations({
+      hideError: HIDE_ERROR,
+    }),
+  },
 };
 </script>
 
 <template>
-  <span>
-    <!-- Temporary empty template -->
-  </span>
+  <div>
+    <gl-alert v-if="showError" ref="errorAlert" variant="danger" @dismiss="hideError">{{
+      errorMessage
+    }}</gl-alert>
+    <members-table />
+  </div>
 </template>
diff --git a/app/assets/javascripts/groups/members/constants.js b/app/assets/javascripts/groups/members/constants.js
new file mode 100644
index 00000000000..6d71b666d7a
--- /dev/null
+++ b/app/assets/javascripts/groups/members/constants.js
@@ -0,0 +1,5 @@
+export const GROUP_MEMBER_BASE_PROPERTY_NAME = 'group_member';
+export const GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME = 'access_level';
+
+export const GROUP_LINK_BASE_PROPERTY_NAME = 'group_link';
+export const GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME = 'group_access';
diff --git a/app/assets/javascripts/groups/members/index.js b/app/assets/javascripts/groups/members/index.js
index 4ca1756f10c..3bbef14d199 100644
--- a/app/assets/javascripts/groups/members/index.js
+++ b/app/assets/javascripts/groups/members/index.js
@@ -1,23 +1,24 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { GlToast } from '@gitlab/ui';
+import { parseDataAttributes } from 'ee_else_ce/groups/members/utils';
 import App from './components/app.vue';
 import membersModule from '~/vuex_shared/modules/members';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
-export default el => {
+export const initGroupMembersApp = (el, tableFields, requestFormatter) => {
   if (!el) {
     return () => {};
   }
 
   Vue.use(Vuex);
-
-  const { members, groupId } = el.dataset;
+  Vue.use(GlToast);
 
   const store = new Vuex.Store({
     ...membersModule({
-      members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
-      sourceId: parseInt(groupId, 10),
+      ...parseDataAttributes(el),
       currentUserId: gon.current_user_id || null,
+      tableFields,
+      requestFormatter,
     }),
   });
 
diff --git a/app/assets/javascripts/groups/members/utils.js b/app/assets/javascripts/groups/members/utils.js
new file mode 100644
index 00000000000..662eecc4e38
--- /dev/null
+++ b/app/assets/javascripts/groups/members/utils.js
@@ -0,0 +1,44 @@
+import { isUndefined } from 'lodash';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import {
+  GROUP_MEMBER_BASE_PROPERTY_NAME,
+  GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME,
+  GROUP_LINK_BASE_PROPERTY_NAME,
+  GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME,
+} from './constants';
+
+export const parseDataAttributes = el => {
+  const { members, groupId, memberPath } = el.dataset;
+
+  return {
+    members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
+    sourceId: parseInt(groupId, 10),
+    memberPath,
+  };
+};
+
+const baseRequestFormatter = (basePropertyName, accessLevelPropertyName) => ({
+  accessLevel,
+  ...otherProperties
+}) => {
+  const accessLevelProperty = !isUndefined(accessLevel)
+    ? { [accessLevelPropertyName]: accessLevel }
+    : {};
+
+  return {
+    [basePropertyName]: {
+      ...accessLevelProperty,
+      ...otherProperties,
+    },
+  };
+};
+
+export const memberRequestFormatter = baseRequestFormatter(
+  GROUP_MEMBER_BASE_PROPERTY_NAME,
+  GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME,
+);
+
+export const groupLinkRequestFormatter = baseRequestFormatter(
+  GROUP_LINK_BASE_PROPERTY_NAME,
+  GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME,
+);