Reorder and align boards search bar buttons

Group by button next to Show labels, so buttons are all together
Align label text for toggles and dropdowns
Vetically align all buttons
Convert Group by and fullscreen buttons to gl-buttons
Add flex + center

app/assets/javascripts/boards/components/board_add_new_column_trigger.vue

@@ -13,8 +13,8 @@ export default {
 </script>
 
 <template>
-  <span class="gl-ml-4">
-    <gl-button variant="success" @click="setAddColumnFormVisibility(true)"
+  <span class="gl-ml-3 gl-display-flex gl-align-items-center">
+    <gl-button variant="confirm" @click="setAddColumnFormVisibility(true)"
       >{{ __('Create list') }}
     </gl-button>
   </span>

app/assets/javascripts/boards/components/toggle_focus.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { hide } from '~/tooltips';
 
 export default {
   components: {
-    GlIcon,
+    GlButton,
+  },
+  directives: {
+    GlTooltip,
   },
   props: {
     issueBoardsContentSelector: {
@@ -35,18 +38,15 @@ export default {
 </script>
 
 <template>
-  <div class="board-extra-actions">
-    <a
+  <div class="board-extra-actions gl-ml-3 gl-display-flex gl-align-items-center">
+    <gl-button
       ref="toggleFocusModeButton"
-      href="#"
-      class="btn btn-default has-tooltip gl-ml-3 js-focus-mode-btn"
+      v-gl-tooltip
+      :icon="isFullscreen ? 'minimize' : 'maximize'"
+      class="js-focus-mode-btn"
       data-qa-selector="focus_mode_button"
-      role="button"
-      :aria-label="$options.i18n.toggleFocusMode"
       :title="$options.i18n.toggleFocusMode"
       @click="toggleFocusMode"
-    >
-      <gl-icon :name="isFullscreen ? 'minimize' : 'maximize'" />
-    </a>
+    />
   </div>
 </template>

app/helpers/application_helper.rb

@@ -280,7 +280,7 @@ module ApplicationHelper
 
   def page_class
     class_names = []
-    class_names << 'issue-boards-page' if current_controller?(:boards)
+    class_names << 'issue-boards-page gl-overflow-hidden' if current_controller?(:boards)
     class_names << 'environment-logs-page' if current_controller?(:logs)
     class_names << 'with-performance-bar' if performance_bar_enabled?
     class_names << system_message_class

app/views/shared/issuable/_board_create_list_dropdown.html.haml

-.dropdown.gl-ml-3#js-add-list
-  %button.gl-button.btn.btn-success.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
+.dropdown.gl-display-flex.gl-align-items-center.gl-ml-3#js-add-list
+  %button.gl-button.btn.btn-confirm.btn-confirm-secondary.js-new-board-list{ type: "button", data: board_list_data }
     Add list
   .dropdown-menu.dropdown-extended-height.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.js-tab-container-labels
     = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }

app/views/shared/issuable/_search_bar.html.haml

@@ -193,6 +193,8 @@
     .filter-dropdown-container.d-flex.flex-column.flex-md-row
       - if type == :boards
         #js-board-labels-toggle
+        - if current_user
+          #js-board-epics-swimlanes-toggle
         .js-board-config{ data: { can_admin_list: user_can_admin_list, has_scope: board.scoped? } }
         - if user_can_admin_list
           - if Feature.enabled?(:board_new_list, board.resource_parent, default_enabled: :yaml)
@@ -200,9 +202,7 @@
           - else
             = render 'shared/issuable/board_create_list_dropdown', board: board
           - if @project
-            #js-add-issues-btn.gl-ml-3{ data: { can_admin_list: can?(current_user, :admin_list, @project) } }
-        - if current_user
-          #js-board-epics-swimlanes-toggle
+            #js-add-issues-btn{ data: { can_admin_list: can?(current_user, :admin_list, @project) } }
         #js-toggle-focus-btn
       - elsif is_not_boards_modal_or_productivity_analytics && show_sorting_dropdown
         = render 'shared/issuable/sort_dropdown'

changelogs/unreleased/psi-board-search-align.yml

+---
+title: Align and reorder boards search bar buttons
+merge_request: 53690
+author:
+type: changed

ee/app/assets/javascripts/boards/components/config_toggle.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-ml-3">
+  <div class="gl-ml-3 gl-display-flex gl-align-items-center">
     <gl-button
       v-gl-modal-directive="'board-config-modal'"
       v-gl-tooltip

ee/app/assets/javascripts/boards/components/toggle_epics_swimlanes.vue

@@ -54,16 +54,12 @@ export default {
     data-testid="toggle-swimlanes"
   >
     <span
-      class="board-swimlanes-toggle-text gl-white-space-nowrap gl-font-weight-bold"
+      class="board-swimlanes-toggle-text gl-white-space-nowrap gl-font-weight-bold gl-line-height-normal"
       data-testid="toggle-swimlanes-label"
     >
       {{ __('Group by') }}
     </span>
-    <gl-dropdown
-      right
-      :text="dropdownLabel"
-      toggle-class="gl-ml-3 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
-    >
+    <gl-dropdown right :text="dropdownLabel" class="gl-ml-3" toggle-class="gl-line-height-normal!">
       <gl-dropdown-item
         :is-check-item="true"
         :is-checked="!isShowingEpicsSwimlanes"

ee/app/views/shared/issuable/_board_create_list_dropdown.html.haml

@@ -2,8 +2,8 @@
 - milestone_lists_available = board.resource_parent.feature_available?(:board_milestone_lists)
 
 - if assignee_lists_available || milestone_lists_available
-  .dropdown.boards-add-list.gl-ml-3#js-add-list
-    %button.btn.gl-button.btn-success.btn-inverted.d-flex.js-new-board-list{ type: "button", data: board_list_data }
+  .dropdown.boards-add-list.gl-ml-3.gl-display-flex.gl-align-items-center#js-add-list
+    %button.btn.gl-button.btn-confirm.btn-confirm-secondary.gl-display-flex.js-new-board-list{ type: "button", data: board_list_data }
       %span Add list
       = sprite_icon('chevron-down', css_class: 'gl-ml-2 btn-success-board-list-chevron')
     .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.dropdown-menu-tabs.pt-0

spec/features/boards/boards_spec.rb

@@ -575,7 +575,7 @@ RSpec.describe 'Issue Boards', :js do
     end
 
     it 'shows the button' do
-      expect(page).to have_link('Toggle focus mode')
+      expect(page).to have_button('Toggle focus mode')
     end
   end