BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 5bb6a85b by Dmitriy Zaporozhets
Options

Refactor projects filtering by name

Reuse same search form and behavior for dashboard#projects, group#projects and admin#projects. Repsect all other options like sorting, personal filter when search projects by name. Create FilterableList JS class to handle identical behaviour of projects and groups lists. This change also makes filtering and sorting availabe on explore#projects and explore#groups no matter if you are logged in or not. Signed-off-by: 's avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent 8fd5aeee
Showing with 209 additions and 204 deletions
app/assets/javascripts/dispatcher.js.es6
......@@ -36,6 +36,7 @@
/* global Shortcuts */
import GroupsList from './groups_list';
import ProjectsList from './projects_list';
const ShortcutsBlob = require('./shortcuts_blob');
const UserCallout = require('./user_callout');
......@@ -98,6 +99,14 @@ const UserCallout = require('./user_callout');
case 'dashboard:todos:index':
new gl.Todos();
break;
case 'dashboard:projects:index':
case 'dashboard:projects:starred':
case 'explore:projects:index':
case 'explore:projects:trending':
case 'explore:projects:starred':
case 'admin:projects:index':
new ProjectsList();
break;
case 'dashboard:groups:index':
case 'explore:groups:index':
new GroupsList();
......@@ -163,9 +172,6 @@ const UserCallout = require('./user_callout');
case 'dashboard:activity':
new gl.Activities();
break;
case 'dashboard:projects:starred':
new gl.Activities();
break;
case 'projects:commit:show':
new Commit();
new gl.Diff();
......@@ -208,6 +214,7 @@ const UserCallout = require('./user_callout');
shortcut_handler = new ShortcutsNavigation();
new NotificationsForm();
new NotificationsDropdown();
new ProjectsList();
break;
case 'groups:group_members:index':
new gl.MemberExpirationDate();
......
app/assets/javascripts/filterable_list.js 0 → 100644
/**
* Makes search request for content when user types a value in the search input.
* Updates the html content of the page with the received one.
*/
export default class FilterableList {
constructor(form, filter, holder) {
this.filterForm = form;
this.listFilterElement = filter;
this.listHolderElement = holder;
this.initSearch();
}
initSearch() {
this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
this.listFilterElement.removeEventListener('input', this.debounceFilter);
this.listFilterElement.addEventListener('input', this.debounceFilter);
}
filterResults() {
const form = this.filterForm;
const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
$(this.listHolderElement).fadeTo(250, 0.5);
return $.ajax({
url: form.getAttribute('action'),
data: $(form).serialize(),
type: 'GET',
dataType: 'json',
context: this,
complete() {
$(this.listHolderElement).fadeTo(250, 1);
},
success(data) {
this.listHolderElement.innerHTML = data.html;
// Change url so if user reload a page - search results are saved
return window.history.replaceState({
page: filterUrl,
}, document.title, filterUrl);
},
});
}
}
app/assets/javascripts/groups_list.js
import FilterableList from './filterable_list';
/**
* Based on project list search.
* Makes search request for groups when user types a value in the search input.
* Updates the html content of the page with the received one.
*/
export default class GroupsList {
constructor() {
this.groupsListFilterElement = document.querySelector('.js-groups-list-filter');
this.groupsListHolderElement = document.querySelector('.js-groups-list-holder');
this.initSearch();
}
initSearch() {
this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
this.groupsListFilterElement.removeEventListener('input', this.debounceFilter);
this.groupsListFilterElement.addEventListener('input', this.debounceFilter);
}
filterResults() {
const form = document.querySelector('form#group-filter-form');
const groupFilterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
$(this.groupsListHolderElement).fadeTo(250, 0.5);
return $.ajax({
url: form.getAttribute('action'),
data: $(form).serialize(),
type: 'GET',
dataType: 'json',
context: this,
complete() {
$(this.groupsListHolderElement).fadeTo(250, 1);
},
success(data) {
this.groupsListHolderElement.innerHTML = data.html;
// Change url so if user reload a page - search results are saved
return window.history.replaceState({
page: groupFilterUrl,
var form = document.querySelector('form#group-filter-form');
var filter = document.querySelector('.js-groups-list-filter');
var holder = document.querySelector('.js-groups-list-holder');
}, document.title, groupFilterUrl);
},
});
new FilterableList(form, filter, holder);
}
}
app/assets/javascripts/projects_list.js
/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-var, one-var, one-var-declaration-per-line, prefer-arrow-callback, consistent-return, no-unused-vars, camelcase, prefer-template, comma-dangle, max-len */
import FilterableList from './filterable_list';
(function() {
window.ProjectsList = {
init: function() {
$(".projects-list-filter").off('keyup');
this.initSearch();
return this.initPagination();
},
initSearch: function() {
var debounceFilter, projectsListFilter;
projectsListFilter = $('.projects-list-filter');
debounceFilter = _.debounce(window.ProjectsList.filterResults, 500);
return projectsListFilter.on('keyup', function(e) {
if (projectsListFilter.val() !== '') {
return debounceFilter();
}
});
},
filterResults: function() {
var form, project_filter_url, search;
$('.projects-list-holder').fadeTo(250, 0.5);
form = null;
form = $("form#project-filter-form");
search = $(".projects-list-filter").val();
project_filter_url = form.attr('action') + '?' + form.serialize();
return $.ajax({
type: "GET",
url: form.attr('action'),
data: form.serialize(),
complete: function() {
return $('.projects-list-holder').fadeTo(250, 1);
},
success: function(data) {
$('.projects-list-holder').replaceWith(data.html);
return history.replaceState({
page: project_filter_url
// Change url so if user reload a page - search results are saved
}, document.title, project_filter_url);
},
dataType: "json"
});
},
initPagination: function() {
return $('.projects-list-holder .pagination').on('ajax:success', function(e, data) {
return $('.projects-list-holder').replaceWith(data.html);
});
}
};
}).call(window);
/**
* Makes search request for projects when user types a value in the search input.
* Updates the html content of the page with the received one.
*/
export default class ProjectsList {
constructor() {
var form = document.querySelector('form#project-filter-form');
var filter = document.querySelector('.js-projects-list-filter');
var holder = document.querySelector('.js-projects-list-holder');
new FilterableList(form, filter, holder);
}
}
app/assets/stylesheets/pages/search.scss
......@@ -182,7 +182,8 @@ input[type="checkbox"]:hover {
display: flex;
}
.search-field-holder {
.search-field-holder,
.project-filter-form {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
position: relative;
......@@ -201,7 +202,8 @@ input[type="checkbox"]:hover {
pointer-events: none;
}
.search-text-input {
.search-text-input,
.project-filter-form-field {
padding-left: $gl-padding + 15px;
padding-right: $gl-padding + 15px;
}
......
app/controllers/admin/projects_controller.rb
......@@ -14,6 +14,15 @@ class Admin::ProjectsController < Admin::ApplicationController
@projects = @projects.search(params[:name]) if params[:name].present?
@projects = @projects.sort(@sort = params[:sort])
@projects = @projects.includes(:namespace).order("namespaces.path, projects.name ASC").page(params[:page])
respond_to do |format|
format.html
format.json do
render json: {
html: view_to_html_string("admin/projects/_projects", locals: { projects: @projects })
}
end
end
end
def show
......
app/helpers/explore_helper.rb
module ExploreHelper
def filter_projects_path(options = {})
exist_opts = {
sort: params[:sort],
sort: params[:sort] || @sort,
scope: params[:scope],
group: params[:group],
tag: params[:tag],
visibility_level: params[:visibility_level],
name: params[:name],
personal: params[:personal],
archived: params[:archived],
shared: params[:shared],
namespace_id: params[:namespace_id],
}
options = exist_opts.merge(options)
......
app/views/admin/projects/_projects.html.haml 0 → 100644
.js-projects-list-holder
- if @projects.any?
%ul.projects-list.content-list
- @projects.each_with_index do |project|
%li.project-row
.controls
- if project.archived
%span.label.label-warning archived
%span.badge
= storage_counter(project.statistics.storage_size)
= link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn"
= link_to 'Delete', [project.namespace.becomes(Namespace), project], data: { confirm: remove_project_message(project) }, method: :delete, class: "btn btn-remove"
.title
= link_to [:admin, project.namespace.becomes(Namespace), project] do
.dash-project-avatar
.avatar-container.s40
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name
%span.namespace-name
- if project.namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
- if project.description.present?
.description
= markdown_field(project, :description)
= paginate @projects, theme: 'gitlab'
- else
.nothing-here-block No projects found
app/views/admin/projects/index.html.haml
......@@ -7,33 +7,24 @@
%div{ class: container_class }
.top-area
.prepend-top-default
= form_tag admin_projects_path, method: :get do |f|
= render "shared/projects/filter_fields"
.search-holder
.search-field-holder
= search_field_tag :name, params[:name], class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false, placeholder: 'Search by name'
- if params[:visibility_level].present?
= hidden_field_tag 'visibility_level', params[:visibility_level]
= icon("search", class: "search-icon")
.dropdown
- toggle_text = 'Namespace'
- if params[:namespace_id].present?
= hidden_field_tag :namespace_id, params[:namespace_id]
- namespace = Namespace.find(params[:namespace_id])
- toggle_text = "#{namespace.kind}: #{namespace.full_path}"
= dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
.dropdown-menu.dropdown-select.dropdown-menu-align-right
= dropdown_title('Namespaces')
= dropdown_filter("Search for Namespace")
= dropdown_content
= dropdown_loading
= render 'shared/projects/dropdown'
= link_to new_project_path, class: 'btn btn-new' do
New Project
= button_tag "Search", class: "btn btn-primary btn-search hide"
.search-holder
= render 'shared/projects/search_form', autofocus: true, icon: true
.dropdown
- toggle_text = 'Namespace'
- if params[:namespace_id].present?
= hidden_field_tag :namespace_id, params[:namespace_id]
- namespace = Namespace.find(params[:namespace_id])
- toggle_text = "#{namespace.kind}: #{namespace.full_path}"
= dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
.dropdown-menu.dropdown-select.dropdown-menu-align-right
= dropdown_title('Namespaces')
= dropdown_filter("Search for Namespace")
= dropdown_content
= dropdown_loading
= render 'shared/projects/dropdown'
= link_to new_project_path, class: 'btn btn-new' do
New Project
= button_tag "Search", class: "btn btn-primary btn-search hide"
%ul.nav-links
- opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
......@@ -51,35 +42,4 @@
= link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
Public
.projects-list-holder
- if @projects.any?
%ul.projects-list.content-list
- @projects.each_with_index do |project|
%li.project-row
.controls
- if project.archived
%span.label.label-warning archived
%span.badge
= storage_counter(project.statistics.storage_size)
= link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn"
= link_to 'Delete', [project.namespace.becomes(Namespace), project], data: { confirm: remove_project_message(project) }, method: :delete, class: "btn btn-remove"
.title
= link_to [:admin, project.namespace.becomes(Namespace), project] do
.dash-project-avatar
.avatar-container.s40
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name
%span.namespace-name
- if project.namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
- if project.description.present?
.description
= markdown_field(project, :description)
= paginate @projects, theme: 'gitlab'
- else
.nothing-here-block No projects found
= render 'projects'
app/views/dashboard/_groups_head.html.haml
......@@ -7,8 +7,7 @@
= link_to explore_groups_path, title: 'Explore groups' do
Explore Groups
.nav-controls
= form_tag request.path, method: :get, class: 'group-filter-form', id: 'group-filter-form' do |f|
= search_field_tag :filter_groups, params[:filter_groups], placeholder: 'Filter by name...', class: 'group-filter-form-field form-control input-short js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
= render 'shared/groups/search_form'
= render 'shared/groups/dropdown'
- if current_user.can_create_group?
= link_to new_group_path, class: "btn btn-new" do
......
app/views/dashboard/_projects_head.html.haml
......@@ -13,9 +13,7 @@
Explore projects
.nav-controls
= form_tag request.fullpath, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
= render "shared/projects/filter_fields"
= search_field_tag :name, params[:name], placeholder: 'Filter by name...', class: 'project-filter-form-field form-control input-short projects-list-filter', spellcheck: false, id: 'project-filter-form-field', tabindex: "2"
= render 'shared/projects/search_form'
= render 'shared/projects/dropdown'
- if current_user.can_create_project?
= link_to new_project_path, class: 'btn btn-new' do
......
app/views/dashboard/projects/index.html.haml
......@@ -5,7 +5,6 @@
- header_title "Projects", dashboard_projects_path
.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
- if @projects.any? || params[:name]
= render 'dashboard/projects_head'
......
app/views/explore/groups/_nav.html.haml 0 → 100644
.top-area
%ul.nav-links
= nav_link(page: explore_groups_path) do
= link_to explore_groups_path do
Explore Groups
.nav-controls
= render 'shared/groups/search_form'
= render 'shared/groups/dropdown'
app/views/explore/groups/index.html.haml
......@@ -5,7 +5,7 @@
= render 'dashboard/groups_head'
- else
= render 'explore/head'
= render 'nav'
- if @groups.present?
= render 'groups'
......
app/views/explore/projects/_nav.html.haml
%ul.nav-links
= nav_link(page: [trending_explore_projects_path, explore_root_path]) do
= link_to trending_explore_projects_path do
Trending
= nav_link(page: starred_explore_projects_path) do
= link_to starred_explore_projects_path do
Most stars
= nav_link(page: explore_projects_path) do
= link_to explore_projects_path do
All
.top-area
%ul.nav-links
= nav_link(page: [trending_explore_projects_path, explore_root_path]) do
= link_to trending_explore_projects_path do
Trending
= nav_link(page: starred_explore_projects_path) do
= link_to starred_explore_projects_path do
Most stars
= nav_link(page: explore_projects_path) do
= link_to explore_projects_path do
All
.nav-controls
- unless current_user
= render 'shared/projects/search_form'
= render 'shared/projects/dropdown'
= render 'filter'
app/views/explore/projects/index.html.haml
......@@ -6,10 +6,5 @@
- else
= render 'explore/head'
.top-area
= render 'explore/projects/nav'
.nav-controls
= render 'filter'
= render 'explore/projects/nav'
= render 'projects', projects: @projects
app/views/groups/show.html.haml
......@@ -11,9 +11,7 @@
.top-area
= render 'groups/show_nav'
.nav-controls
= form_tag request.fullpath, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
= render "shared/projects/filter_fields"
= search_field_tag :name, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false
= render 'shared/projects/search_form'
= render 'shared/projects/dropdown'
- if can? current_user, :create_projects, @group
= link_to new_project_path(namespace_id: @group.id), class: 'btn btn-new pull-right' do
......
app/views/shared/groups/_search_form.html.haml 0 → 100644
= form_tag request.path, method: :get, class: 'group-filter-form', id: 'group-filter-form' do |f|
= search_field_tag :filter_groups, params[:filter_groups], placeholder: 'Filter by name...', class: 'group-filter-form-field form-control input-short js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
app/views/shared/projects/_dropdown.html.haml
- @sort ||= sort_value_recently_updated
- name = params[:name]
- personal = params[:personal]
- archived = params[:archived]
- shared = params[:shared]
- namespace_id = params[:namespace_id]
.dropdown
- toggle_text = projects_sort_options_hash[@sort]
= dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-projects-dropdown' })
......@@ -12,32 +7,32 @@
Sort by
- projects_sort_options_hash.each do |value, title|
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: value, archived: archived, personal: personal, name: name), class: ("is-active" if @sort == value) do
= link_to filter_projects_path(sort: value), class: ("is-active" if @sort == value) do
= title
%li.divider
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, archived: nil, name: name), class: ("is-active" unless params[:archived].present?) do
= link_to filter_projects_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
Hide archived projects
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, archived: true, name: name), class: ("is-active" if params[:archived].present?) do
= link_to filter_projects_path(archived: true), class: ("is-active" if params[:archived].present?) do
Show archived projects
- if current_user
%li.divider
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, personal: nil, name: name), class: ("is-active" unless personal.present?) do
= link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
Owned by anyone
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, personal: true, name: name), class: ("is-active" if personal.present?) do
= link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
Owned by me
- if @group && @group.shared_projects.present?
%li.divider
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, shared: nil, name: name), class: ("is-active" unless shared.present?) do
= link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
All projects
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, shared: 0, name: name), class: ("is-active" if shared == '0') do
= link_to filter_projects_path(shared: 0), class: ("is-active" if params[:shared] == '0') do
Hide shared projects
%li
= link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, shared: 1, name: name), class: ("is-active" if shared == '1') do
= link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
Hide group projects
app/views/shared/projects/_list.html.haml
......@@ -8,7 +8,7 @@
- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true
- remote = false unless local_assigns[:remote] == true
.projects-list-holder
.js-projects-list-holder
- if projects.any?
%ul.projects-list.content-list
- projects.each_with_index do |project, i|
......@@ -25,6 +25,3 @@
= paginate(projects, remote: remote, theme: "gitlab") if projects.respond_to? :total_pages
- else
.nothing-here-block No projects found
:javascript
ProjectsList.init();
app/views/shared/projects/_filter_fields.html.haml → app/views/shared/projects/_search_form.html.haml
- if params[:sort].present?
= hidden_field_tag :sort, params[:sort]
= form_tag filter_projects_path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
= search_field_tag :name, params[:name],
placeholder: 'Filter by name...',
class: 'project-filter-form-field form-control input-short js-projects-list-filter',
spellcheck: false,
id: 'project-filter-form-field',
tabindex: "2",
autofocus: local_assigns[:autofocus]
- if params[:personal].present?
= hidden_field_tag :personal, params[:personal]
- if local_assigns[:icon]
= icon("search", class: "search-icon")
- if params[:archived].present?
= hidden_field_tag :archived, params[:archived]
- if params[:sort].present?
= hidden_field_tag :sort, params[:sort]
- if params[:visibility_level].present?
= hidden_field_tag :visibility_level, params[:visibility_level]
- if params[:personal].present?
= hidden_field_tag :personal, params[:personal]
- if params[:archived].present?
= hidden_field_tag :archived, params[:archived]
- if params[:visibility_level].present?
= hidden_field_tag :visibility_level, params[:visibility_level]
features/steps/project/fork.rb
......@@ -56,7 +56,7 @@ class Spinach::Features::ProjectFork < Spinach::FeatureSteps
end
step 'I should see my fork on the list' do
page.within('.projects-list-holder') do
page.within('.js-projects-list-holder') do
project = @user.fork_of(@project)
expect(page).to have_content("#{project.namespace.human_name} / #{project.name}")
end
......
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