Commit 8589fa87 authored by Mark Lapierre's avatar Mark Lapierre

Optimize groups filter

When searching for a group, submit a request that returns only the
filtered list of groups. This makes the state of the page more
reliable because it avoids having to wait for the list of groups to
dynamically refresh.
parent 1ed5ab50
.js-groups-list-holder .js-groups-list-holder
#js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } } #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
.loading-container.text-center .loading-container.text-center
= icon('spinner spin 2x', class: 'loading-animation prepend-top-20') = icon('spinner spin 2x', class: 'loading-animation prepend-top-20 qa-loading-animation')
= form_tag request.path, method: :get, class: "group-filter-form js-group-filter-form", id: 'group-filter-form' do |f| = form_tag request.path, method: :get, class: "group-filter-form js-group-filter-form", id: 'group-filter-form' do |f|
= search_field_tag :filter, params[:filter], placeholder: s_('GroupsTree|Search by name'), class: 'group-filter-form-field form-control js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2" = search_field_tag :filter, params[:filter], placeholder: s_('GroupsTree|Search by name'), class: 'group-filter-form-field form-control js-groups-list-filter qa-groups-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
...@@ -6,8 +6,7 @@ module QA ...@@ -6,8 +6,7 @@ module QA
module GroupsFilter module GroupsFilter
def self.included(base) def self.included(base)
base.view 'app/views/shared/groups/_search_form.html.haml' do base.view 'app/views/shared/groups/_search_form.html.haml' do
element :groups_filter, 'search_field_tag :filter' element :groups_filter
element :groups_filter_placeholder, 'Search by name'
end end
base.view 'app/views/shared/groups/_empty_state.html.haml' do base.view 'app/views/shared/groups/_empty_state.html.haml' do
...@@ -17,17 +16,48 @@ module QA ...@@ -17,17 +16,48 @@ module QA
base.view 'app/assets/javascripts/groups/components/groups.vue' do base.view 'app/assets/javascripts/groups/components/groups.vue' do
element :groups_list_tree_container element :groups_list_tree_container
end end
base.view 'app/views/dashboard/groups/_groups.html.haml' do
element :loading_animation
end
end end
private private
def filter_by_name(name) # Filter the list of groups/projects by name
# If submit is true the return key will be sent to the browser to reload
# the page and fetch only the filtered results
def filter_by_name(name, submit: false)
wait(reload: false) do
# Wait 0 for the empty state element because it is there immediately
# if there are no groups. Otherwise there's a loading indicator and
# then groups_list_tree_container appears, which might take longer
page.has_css?(element_selector_css(:groups_empty_state), wait: 0) ||
page.has_css?(element_selector_css(:groups_list_tree_container))
end
field = find_element :groups_filter
field.set(name)
field.send_keys(:return) if submit
end
def has_filtered_group?(name)
# Filter and submit to reload the page and only retrieve the filtered results
filter_by_name(name, submit: true)
# Since we submitted after filtering the absence of the loading
# animation and the presence of groups_list_tree_container means we
# have the complete filtered list of groups
wait(reload: false) do wait(reload: false) do
page.has_css?(element_selector_css(:groups_empty_state)) || page.has_no_css?(element_selector_css(:loading_animation)) &&
page.has_css?(element_selector_css(:groups_list_tree_container)) page.has_css?(element_selector_css(:groups_list_tree_container))
end end
fill_in 'Search by name', with: name # If there are no groups we'll know immediately because we filtered the list
return if page.has_text?(/No groups or projects matched your search/, wait: 0)
# The name will be present as filter input so we check for a link, not text
page.has_link?(name, wait: 0)
end end
end end
end end
......
# frozen_string_literal: true
module QA module QA
module Page module Page
module Dashboard module Dashboard
...@@ -14,9 +16,7 @@ module QA ...@@ -14,9 +16,7 @@ module QA
end end
def has_group?(name) def has_group?(name)
filter_by_name(name) has_filtered_group?(name)
page.has_link?(name)
end end
def go_to_group(name) def go_to_group(name)
......
# frozen_string_literal: true
module QA module QA
module Page module Page
module Group module Group
...@@ -25,11 +27,7 @@ module QA ...@@ -25,11 +27,7 @@ module QA
end end
def has_subgroup?(name) def has_subgroup?(name)
filter_by_name(name) has_filtered_group?(name)
page.has_text?(/#{name}|No groups or projects matched your search/, wait: 60)
page.has_text?(name, wait: 0)
end end
def go_to_new_subgroup def go_to_new_subgroup
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment