1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/members/components/app.vue b/app/assets/javascripts/members/components/app.vue
new file mode 100644
index 00000000000..27fceb7374e
--- /dev/null
+++ b/app/assets/javascripts/members/components/app.vue
@@ -0,0 +1,40 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import { mapState, mapMutations } from 'vuex';
+import { scrollToElement } from '~/lib/utils/common_utils';
+import { HIDE_ERROR } from '../store/mutation_types';
+import FilterSortContainer from './filter_sort/filter_sort_container.vue';
+import MembersTable from './table/members_table.vue';
+
+export default {
+  name: 'MembersApp',
+  components: { MembersTable, FilterSortContainer, GlAlert },
+  computed: {
+    ...mapState(['showError', 'errorMessage']),
+  },
+  watch: {
+    showError(value) {
+      if (value) {
+        this.$nextTick(() => {
+          scrollToElement(this.$refs.errorAlert.$el);
+        });
+      }
+    },
+  },
+  methods: {
+    ...mapMutations({
+      hideError: HIDE_ERROR,
+    }),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-alert v-if="showError" ref="errorAlert" variant="danger" @dismiss="hideError">{{
+      errorMessage
+    }}</gl-alert>
+    <filter-sort-container />
+    <members-table />
+  </div>
+</template>