1 files changed, 30 insertions, 3 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>