1 files changed, 26 insertions, 0 deletions
diff --git a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
new file mode 100644
index 00000000000..f869ecd392f
--- /dev/null
+++ b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
@@ -0,0 +1,26 @@
+<script>
+import { mapState } from 'vuex';
+import MembersFilteredSearchBar from './members_filtered_search_bar.vue';
+import SortDropdown from './sort_dropdown.vue';
+
+export default {
+  name: 'FilterSortContainer',
+  components: { MembersFilteredSearchBar, SortDropdown },
+  computed: {
+    ...mapState(['filteredSearchBar', 'tableSortableFields']),
+    showContainer() {
+      return this.filteredSearchBar.show || this.showSortDropdown;
+    },
+    showSortDropdown() {
+      return this.tableSortableFields.length;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="showContainer" class="gl-bg-gray-10 gl-p-3 gl-display-md-flex">
+    <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-p-3 gl-flex-grow-1" />
+    <sort-dropdown v-if="showSortDropdown" class="gl-p-3 gl-flex-shrink-0" />
+  </div>
+</template>