Merge branch 'psi-board-search-align' into 'master'

Reorder and align boards search bar buttons [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!53690

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