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
+  .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?
@@ -16,7 +17,7 @@
             data: { field_name: 'entity_type', data: audit_entity_type_options, default_label: 'All Events' } })
 
         - if params[:entity_type] == 'User'
-        .filter-item.inline
+          .filter-item.inline.form-group
             - if params[:entity_id].present?
               = hidden_field_tag(:entity_id, params[:entity_id], class:'hidden-filter-value')
 
@@ -27,7 +28,7 @@
               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
+          .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',
@@ -35,28 +36,15 @@
               data: { order_by: 'last_activity_at', idattribute: 'id', all_projects: 'true', simple_filter: true } })
 
         - elsif params[:entity_type] == 'Group'
-        .filter-item.inline
+          .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'
+%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'
+    .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.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

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 ""