Use new vue attributes in MembersFilter

Use searchInputAttributes and searchButtonAttributes in filtered
search bar
Update e2e code to use data-qa-selectors

app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue

@@ -18,6 +18,8 @@ export default {
   name: 'MembersFilteredSearchBar',
   components: { FilteredSearchBar },
   availableTokens: AVAILABLE_FILTERED_SEARCH_TOKENS,
+  searchButtonAttributes: { 'data-qa-selector': 'search_button' },
+  searchInputAttributes: { 'data-qa-selector': 'search_bar_input' },
   inject: {
     namespace: {},
     sourceId: {},
@@ -127,8 +129,9 @@ export default {
     :recent-searches-storage-key="filteredSearchBar.recentSearchesStorageKey"
     :search-input-placeholder="filteredSearchBar.placeholder"
     :initial-filter-value="initialFilterValue"
+    :search-button-attributes="$options.searchButtonAttributes"
+    :search-input-attributes="$options.searchInputAttributes"
     data-testid="members-filtered-search-bar"
-    data-qa-selector="members_filtered_search_bar_content"
     @onFilter="handleFilter"
   />
 </template>

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -79,6 +79,16 @@ export default {
       required: false,
       default: '',
     },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     let selectedSortOption = this.sortOptions[0]?.sortDirection?.descending;
@@ -320,6 +330,8 @@ export default {
       :available-tokens="tokens"
       :history-items="filteredRecentSearches"
       :suggestions-list-class="suggestionsListClass"
+      :search-button-attributes="searchButtonAttributes"
+      :search-input-attributes="searchInputAttributes"
       class="flex-grow-1"
       @history-item-selected="handleHistoryItemSelected"
       @clear="onClear"

qa/qa/page/component/members_filter.rb

@@ -10,15 +10,14 @@ module QA
           super
           base.view 'app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue' do
-            element :members_filtered_search_bar_content
+            element :search_bar_input
+            element :search_button
           end
         end
         def search_member(username)
-          # TODO: Update the two actions below to use direct qa selectors once this is implemented:
-          # https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1688
-          find_element(:members_filtered_search_bar_content).find('input').set(username)
-          find('.gl-search-box-by-click-search-button').click
+          fill_element :search_bar_input, username
+          click_element :search_button
         end
       end
     end