Improve audit log header layout

This changes the headers of both audit log
and audit events views.

changelogs/unreleased/jlouw-improve-audit-log-header-layout.yml

+---
+title: Improve audit log header layout
+merge_request: 25821
+author:
+type: changed

ee/app/assets/stylesheets/pages/audit_events.scss

+.audit-controls {
+  @include media-breakpoint-down(md) {
+    .dropdown-menu-toggle,
+    .filter-item {
+      width: 100%;
+    }
+  }
+}

ee/app/views/admin/audit_logs/index.html.haml

 - page_title 'Audit Log'
 
 .todos-filters
-  .row-content-block.second-block
-    = form_tag admin_audit_logs_path, method: :get, class: 'filter-form' do
-      .filter-item.inline
-        - if params[:sort]
-          = hidden_field_tag(:sort, params[:sort])
-        - if params[:entity_type].present?
-          = hidden_field_tag(:entity_type, params[:entity_type])
+  .row-content-block.second-block.pb-0
+    = form_tag admin_audit_logs_path, method: :get, class: 'filter-form d-flex justify-content-between audit-controls row' do
+      .flex-lg-row.col-lg-auto
+        .filter-item.inline.form-group.mr-2.mr-md-0
+          - if params[:sort]
+            = hidden_field_tag(:sort, params[:sort])
+          - if params[:entity_type].present?
+            = hidden_field_tag(:entity_type, params[:entity_type])
 
-        = dropdown_tag(audit_entity_type_label(params[:entity_type]),
-          options: { toggle_class: 'js-type-search js-filter-submit js-type-filter',
-          dropdown_class: 'dropdown-menu-type dropdown-menu-selectable dropdown-menu-action js-filter-submit',
-          placeholder: 'Search types',
-          data: { field_name: 'entity_type', data: audit_entity_type_options, default_label: 'All Events' } })
+          = dropdown_tag(audit_entity_type_label(params[:entity_type]),
+            options: { toggle_class: 'js-type-search js-filter-submit js-type-filter',
+            dropdown_class: 'dropdown-menu-type dropdown-menu-selectable dropdown-menu-action js-filter-submit',
+            placeholder: 'Search types',
+            data: { field_name: 'entity_type', data: audit_entity_type_options, default_label: 'All Events' } })
 
-      - if params[:entity_type] == 'User'
-        .filter-item.inline
-          - if params[:entity_id].present?
-            = hidden_field_tag(:entity_id, params[:entity_id], class:'hidden-filter-value')
+        - if params[:entity_type] == 'User'
+          .filter-item.inline.form-group
+            - if params[:entity_id].present?
+              = hidden_field_tag(:entity_id, params[:entity_id], class:'hidden-filter-value')
 
-          = dropdown_tag(@entity&.name || _('Search users'),
-            options: { toggle_class: 'js-user-search js-filter-submit', filter: true,
-            dropdown_class: 'dropdown-menu-user dropdown-menu-selectable',
-            placeholder: _('Search users'),
-            data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, field_name: 'entity_id' } })
+            = dropdown_tag(@entity&.name || _('Search users'),
+              options: { toggle_class: 'js-user-search js-filter-submit', filter: true,
+              dropdown_class: 'dropdown-menu-user dropdown-menu-selectable',
+              placeholder: _('Search users'),
+              data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, field_name: 'entity_id' } })
 
-      - elsif params[:entity_type] == 'Project'
-        .filter-item.inline
-          = project_select_tag(:entity_id, { class: 'project-item-select hidden-filter-value',
-            toggle_class: 'js-project-search js-project-filter js-filter-submit',
-            dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-            placeholder: @entity&.full_name || _('Search projects'), idAttribute: 'id',
-            data: { order_by: 'last_activity_at', idattribute: 'id', all_projects: 'true', simple_filter: true } })
+        - elsif params[:entity_type] == 'Project'
+          .filter-item.inline.form-group
+            = project_select_tag(:entity_id, { class: 'project-item-select hidden-filter-value',
+              toggle_class: 'js-project-search js-project-filter js-filter-submit',
+              dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
+              placeholder: @entity&.full_name || _('Search projects'), idAttribute: 'id',
+              data: { order_by: 'last_activity_at', idattribute: 'id', all_projects: 'true', simple_filter: true } })
 
-      - elsif params[:entity_type] == 'Group'
-        .filter-item.inline
-          = groups_select_tag(:entity_id, { required: true, class: 'group-item-select project-item-select hidden-filter-value',
-            toggle_class: 'js-group-search js-group-filter js-filter-submit',
-            dropdown_class: 'dropdown-menu-selectable dropdown-menu-group js-filter-submit',
-            placeholder: @entity&.full_path || _('Search groups'), idAttribute: 'id',
-            data: { order_by: 'last_activity_at', idattribute: 'id', all_available: true } })
+        - elsif params[:entity_type] == 'Group'
+          .filter-item.inline.form-group
+            = groups_select_tag(:entity_id, { required: true, class: 'group-item-select project-item-select hidden-filter-value',
+              toggle_class: 'js-group-search js-group-filter js-filter-submit',
+              dropdown_class: 'dropdown-menu-selectable dropdown-menu-group js-filter-submit',
+              placeholder: @entity&.full_path || _('Search groups'), idAttribute: 'id',
+              data: { order_by: 'last_activity_at', idattribute: 'id', all_available: true } })
 
-      .prepend-top-10
-        .form-group
-          = label_tag :created_after, _('Created after'), class: 'label-bold'
-          = date_field_tag :created_after, params[:created_after],
-            class: 'form-control', placeholder: 'YYYY-MM-DD'
-
-
-        .form-group
-          = label_tag :created_before, _('Created before'), class: 'label-bold'
-          = date_field_tag :created_before, params[:created_before],
-            class: 'form-control', placeholder: 'YYYY-MM-DD'
-
-        = submit_tag _('Search'), class: 'btn'
-
-= render 'shared/audit_events/event_sort'
+      .d-flex.col-lg-auto
+        = render 'shared/audit_events/event_filter'
 
 - if @events.present?
   %table#events-table.table

ee/app/views/groups/audit_events/index.html.haml

@@ -4,5 +4,4 @@
 %p.light= _('Events in %{group_name}') % { group_name: @group.name }
 
 = render 'shared/audit_events/event_filter', path: group_audit_events_path(@group)
-= render 'shared/audit_events/event_sort'
 = render 'shared/audit_events/event_table', events: @events

ee/app/views/projects/audit_events/index.html.haml

@@ -8,7 +8,6 @@
     = _('Events in %{project_path}') % { project_path: @project.full_path }
 
   = render 'shared/audit_events/event_filter', path: project_audit_events_path(@project)
-  = render 'shared/audit_events/event_sort'
   = render 'shared/audit_events/event_table', events: @events
 - elsif show_promotions?
   = render 'shared/promotions/promote_audit_events'

ee/app/views/shared/audit_events/_event_filter.html.haml

-.row-content-block.second-block
-  = form_tag path, method: :get, class: 'filter-form' do
-    .prepend-top-10
-      .form-group
-        = label_tag :created_after, _('Created after'), class: 'label-bold'
-        = date_field_tag :created_after, params[:created_after],
-          class: 'form-control', placeholder: 'YYYY-MM-DD'
+%form.row-content-block.second-block.d-flex.justify-content-lg-end.pb-0
+  .audit-controls.d-flex.align-items-lg-center.flex-column.flex-lg-row.col-lg-auto.px-0
+    .form-group.align-items-lg-center.mr-lg-2.d-flex.flex-column.flex-lg-row
+      = label_tag :created_after, _('From'), class: 'label-bold pr-1 mb-lg-0 mr-lg-1'
+      = date_field_tag :created_after, params[:created_after],
+        class: 'form-control', placeholder: 'YYYY-MM-DD'
 
-      .form-group
-        = label_tag :created_before, _('Created before'), class: 'label-bold'
-        = date_field_tag :created_before, params[:created_before],
-          class: 'form-control', placeholder: 'YYYY-MM-DD'
+    .form-group.align-items-lg-center.mr-lg-2.d-flex.flex-column.flex-lg-row
+      = label_tag :created_before, _('To'), class: 'label-bold pr-1 mb-lg-0 mr-lg-1'
+      = date_field_tag :created_before, params[:created_before],
+        class: 'form-control', placeholder: 'YYYY-MM-DD'
 
-      = submit_tag _('Search'), class: 'btn'
+    = submit_tag _('Search'), class: 'btn mr-lg-2 form-group'
+
+    = render 'shared/audit_events/event_sort'

ee/app/views/shared/audit_events/_event_sort.haml

 - toggle_value = params[:sort].presence || sort_value_recently_created
 - toggle_text = audit_logs_sort_order_hash[toggle_value]
 
-.top-area.d-flex.justify-content-end
-  .nav-controls.prepend-top-8.append-bottom-8
-    .btn-group.w-100{ role: "group" }
-      .btn-group.w-100.dropdown
-        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
-          = toggle_text
-          = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-          %li.dropdown-header
-            = _("Sort by")
-          - audit_logs_sort_order_hash.each do |value, title|
-            %li
-              = link_to title, filter_audit_path(sort: value), class: ("is-active" if toggle_text == title)
+.btn-group.w-100.flex-column.flex-lg-row.form-group{ role: "group" }
+  .btn-group.w-100.dropdown
+    %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+      = toggle_text
+      = icon('chevron-down')
+    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+      %li.dropdown-header
+        = _("Sort by")
+      - audit_logs_sort_order_hash.each do |value, title|
+        %li
+          = link_to title, filter_audit_path(sort: value), class: ("is-active" if toggle_text == title)

ee/changelogs/unreleased/jlouw-improve-audit-log-header-layout.yml

+---
+title: Improve audit log & events header layout
+merge_request: 25821
+author:
+type: changed

ee/spec/support/shared_examples/features/audit_events_filter_shared_examples.rb

@@ -3,8 +3,8 @@
 RSpec.shared_examples_for 'audit events filter' do
   it 'shows only 2 days old events' do
     page.within '.content' do
-      fill_in 'Created after', with: 4.days.ago
-      fill_in 'Created before', with: 2.days.ago
+      fill_in 'From', with: 4.days.ago
+      fill_in 'To', with: 2.days.ago
       click_button 'Search'
     end
 
@@ -15,7 +15,7 @@ RSpec.shared_examples_for 'audit events filter' do
 
   it 'shows only yesterday events' do
     page.within '.content' do
-      fill_in 'Created after', with: 2.days.ago
+      fill_in 'From', with: 2.days.ago
       click_button 'Search'
     end
 
@@ -26,7 +26,7 @@ RSpec.shared_examples_for 'audit events filter' do
 
   it 'shows a message if provided date is invalid' do
     page.within '.content' do
-      fill_in 'Created after', with: '12-345-6789'
+      fill_in 'From', with: '12-345-6789'
       click_button 'Search'
     end
 

locale/gitlab.pot

@@ -5724,12 +5724,6 @@ msgstr ""
 msgid "Created a branch and a merge request to resolve this issue."
 msgstr ""
 
-msgid "Created after"
-msgstr ""
-
-msgid "Created before"
-msgstr ""
-
 msgid "Created branch '%{branch_name}' and a merge request to resolve this issue."
 msgstr ""