_search_bar.html.haml

- type = local_assigns.fetch(:type)
- block_css_class = type != :boards_modal ? 'row-content-block second-block' : ''

.issues-filters
  .issues-details-filters.filtered-search-block{ class: block_css_class, "v-pre" => type == :boards_modal }
    = form_tag page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :search]), method: :get, class: 'filter-form js-filter-form' do
      - if params[:search].present?
        = hidden_field_tag :search, params[:search]
      - if @bulk_edit
        .check-all-holder
          = check_box_tag "check_all_issues", nil, false,
            class: "check_all_issues left"
      .issues-other-filters.filtered-search-wrapper
        .filtered-search-box
          - if type != :boards_modal && type != :boards
            = dropdown_tag(content_tag(:i, '', class: 'fa fa-history'),
              options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
              toggle_class: "filtered-search-history-dropdown-toggle-button",
              dropdown_class: "filtered-search-history-dropdown",
              content_class: "filtered-search-history-dropdown-content",
              title: "Recent searches" }) do
              .js-filtered-search-history-dropdown
          .filtered-search-box-input-container
            .scroll-container
              %ul.tokens-container.list-unstyled
                %li.input-token
                  %input.form-control.filtered-search{ id: "filtered-search-#{type.to_s}", placeholder: 'Search or filter results...', data: { 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
              = icon('filter')
              %button.clear-search.hidden{ type: 'button' }
                = icon('times')
            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
              %ul{ data: { dropdown: true } }
                %li.filter-dropdown-item{ data: { action: 'submit' } }
                  %button.btn.btn-link
                    = icon('search')
                    %span
                      Press Enter or click to search
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item
                  %button.btn.btn-link
                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                    -# haml lint's ClassAttributeWithStaticValue
                    %i.fa{ class: "#{'{{icon}}'}" }
                    %span.js-filter-hint
                      {{hint}}
                    %span.js-filter-tag.dropdown-light-content
                      {{tag}}
            #js-dropdown-author.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'pencil', hint: 'author', tag: '@author' } }
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item
                  %button.btn.btn-link.dropdown-user
                    %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
                    .dropdown-user-details
                      %span
                        {{name}}
                      %span.dropdown-light-content
                        @{{username}}
            #js-dropdown-assignee.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'user', hint: 'assignee', tag: '@assignee' } }
              %ul{ data: { dropdown: true } }
                %li.filter-dropdown-item{ data: { value: 'none' } }
                  %button.btn.btn-link
                    No Assignee
                %li.divider
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item
                  %button.btn.btn-link.dropdown-user
                    %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
                    .dropdown-user-details
                      %span
                        {{name}}
                      %span.dropdown-light-content
                        @{{username}}
            #js-dropdown-milestone.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'clock-o', hint: 'milestone', tag: '%milestone' } }
              %ul{ data: { dropdown: true } }
                %li.filter-dropdown-item{ data: { value: 'none' } }
                  %button.btn.btn-link
                    No Milestone
                %li.filter-dropdown-item{ data: { value: 'upcoming' } }
                  %button.btn.btn-link
                    Upcoming
                %li.filter-dropdown-item{ 'data-value' => 'started' }
                  %button.btn.btn-link
                    Started
                %li.divider
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item
                  %button.btn.btn-link.js-data-value
                    {{title}}
            #js-dropdown-label.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'tag', hint: 'label', tag: '~label', type: 'array' } }
              %ul{ data: { dropdown: true } }
                %li.filter-dropdown-item{ data: { value: 'none' } }
                  %button.btn.btn-link
                    No Label
                %li.divider
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item
                  %button.btn.btn-link
                    %span.dropdown-label-box{ style: 'background: {{color}}' }
                    %span.label-title.js-data-value
                      {{title}}
        .filter-dropdown-container
          - if type == :boards
            - if can?(current_user, :admin_list, @project)
              .dropdown.prepend-left-10#js-add-list
                %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
                  Add list
                .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
                  = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
                  - if can?(current_user, :admin_label, @project)
                    = render partial: "shared/issuable/label_page_create"
                  = dropdown_loading
              #js-add-issues-btn.prepend-left-10
          - elsif type != :boards_modal
            = render 'shared/sort_dropdown'

    - if @bulk_edit
      .issues_bulk_update.hide
        = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: 'bulk-update'  do
          .filter-item.inline
            = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]", default_label: "Status" } } ) do
              %ul
                %li
                  %a{ href: "#", data: { id: "reopen" } } Open
                %li
                  %a{ href: "#", data: { id: "close" } } Closed
          .filter-item.inline
            - if type == :issues
              - field_name = "update[assignee_ids][]"
            - else
              - field_name = "update[assignee_id]"

            = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: field_name } })
          .filter-item.inline
            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true, default_label: "Milestone" } })
          .filter-item.inline.labels-filter
            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], dropdown_title: 'Apply a label', show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true, default_label: "Labels" }
          .filter-item.inline
            = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]", default_label: "Subscription" } } ) do
              %ul
                %li
                  %a{ href: "#", data: { id: "subscribe" } } Subscribe
                %li
                  %a{ href: "#", data: { id: "unsubscribe" } } Unsubscribe

          = hidden_field_tag 'update[issuable_ids]', []
          = hidden_field_tag :state_event, params[:state_event]
          .filter-item.inline.update-issues-btn
            = button_tag "Update #{type.to_s.humanize(capitalize: false)}", class: "btn update_selected_issues btn-save"

- unless type === :boards_modal
  :javascript
    new LabelsSelect();
    new MilestoneSelect();
    new IssueStatusSelect();
    new SubscriptionSelect();

    $(document).off('page:restore').on('page:restore', function (event) {
      if (gl.FilteredSearchManager) {
        new gl.FilteredSearchManager();
      }
      Issuable.init();
      new gl.IssuableBulkActions({
        prefixId: 'issue_',
      });
    });