Merge branch '218040-swimlanes-frontend-tweaks' into 'master'

Swimlanes - Fix scrolling and stick epic titles

See merge request gitlab-org/gitlab!38258

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

@@ -282,7 +282,7 @@ export default {
       <div
         v-if="showBoardListAndBoardInfo"
         class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary"
-        :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }"
+        :class="{ 'gl-display-none!': !list.isExpanded && isSwimlanesHeader }"
       >
         <span class="gl-display-inline-flex">
           <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />

app/assets/stylesheets/framework/variables.scss

@@ -637,10 +637,13 @@ $issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
  They probably should be derived in a smarter way.
 */
 $issue-boards-filter-height: 68px;
+$issue-boards-filter-height-md: 110px;
+$issue-boards-filter-height-sm: 299px;
 $issue-boards-breadcrumbs-height-xs: 63px;
 $issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
 $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
-$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height;
+$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height-md;
+$issue-board-list-difference-lg: $issue-board-list-difference-sm + $issue-boards-filter-height;
 /*
  The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
 */

app/assets/stylesheets/pages/boards.scss

@@ -59,6 +59,10 @@
     height: calc(100vh - #{$issue-board-list-difference-md});
   }
 
+  @include media-breakpoint-up(lg) {
+    height: calc(100vh - #{$issue-board-list-difference-lg});
+  }
+
   .with-performance-bar & {
     height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height});
 
@@ -69,6 +73,10 @@
     @include media-breakpoint-up(md) {
       height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height});
     }
+
+    @include media-breakpoint-up(lg) {
+      height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height});
+    }
   }
 }
 
@@ -191,7 +199,8 @@
   align-items: center;
   font-size: 1em;
   border-bottom: 1px solid $gray-100;
-  padding: $gl-padding-8;
+  padding: 0 $gl-spacing-scale-3;
+  height: 3rem;
 
   .js-max-issue-size::before {
     content: '/';
@@ -585,3 +594,21 @@
 .board-header-collapsed-info-icon:hover {
   color: $gray-900;
 }
+
+$epic-icons-spacing: 40px;
+
+.board-epic-lane {
+  max-width: calc(100vw - #{$contextual-sidebar-width} - $epic-icons-spacing);
+
+  .page-with-icon-sidebar & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - $epic-icons-spacing);
+  }
+
+  .page-with-icon-sidebar .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - $epic-icons-spacing);
+  }
+
+  .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - $epic-icons-spacing);
+  }
+}

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

@@ -173,7 +173,7 @@
           = 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 Feature.enabled?(:boards_with_swimlanes, @group)
+        - if current_user && Feature.enabled?(:boards_with_swimlanes, @group)
           #js-board-epics-swimlanes-toggle
         #js-toggle-focus-btn
       - elsif is_not_boards_modal_or_productivity_analytics && show_sorting_dropdown

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

@@ -87,7 +87,7 @@ export default {
 
 <template>
   <div>
-    <div class="board-epic-lane gl-sticky gl-left-0 gl-display-inline-block gl-max-w-full">
+    <div class="board-epic-lane gl-sticky gl-left-0 gl-display-inline-block">
       <div class="gl-py-5 gl-px-3 gl-display-flex gl-align-items-center">
         <gl-button
           v-gl-tooltip.hover.right

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

@@ -57,7 +57,9 @@ export default {
     class="board-swimlanes gl-white-space-nowrap gl-pb-5 gl-px-3"
     data_qa_selector="board_epics_swimlanes"
   >
-    <div class="board-swimlanes-headers gl-sticky gl-pt-5 gl-bg-white gl-top-0 gl-z-index-3">
+    <div
+      class="board-swimlanes-headers gl-display-table gl-sticky gl-pt-5 gl-bg-white gl-top-0 gl-z-index-3"
+    >
       <div
         v-for="list in lists"
         :key="list.id"
@@ -75,7 +77,7 @@ export default {
         />
       </div>
     </div>
-    <div class="board-epics-swimlanes">
+    <div class="board-epics-swimlanes gl-display-table">
       <epic-lane v-for="epic in epics" :key="epic.id" :epic="epic" :lists="lists" />
       <div class="board-lane-unassigned-issues gl-sticky gl-display-inline-block gl-left-0">
         <div class="gl-left-0 gl-py-5 gl-px-3 gl-display-flex gl-align-items-center">

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

@@ -55,13 +55,13 @@ export default {
     class="board gl-px-3 gl-vertical-align-top gl-white-space-normal gl-display-flex gl-flex-shrink-0"
     :class="{ 'is-collapsed': !list.isExpanded }"
   >
-    <div class="board-inner gl-p-2 gl-rounded-base gl-relative gl-w-full">
+    <div class="board-inner gl-rounded-base gl-relative gl-w-full">
       <board-new-issue
         v-if="list.type !== 'closed' && showIssueForm && isUnassignedIssuesLane"
         :group-id="groupId"
         :list="list"
       />
-      <ul v-if="list.isExpanded" class="gl-p-0 gl-m-0">
+      <ul v-if="list.isExpanded" class="gl-p-2 gl-m-0">
         <board-card
           v-for="(issue, index) in issues"
           ref="issue"

ee/spec/features/boards/boards_spec.rb

@@ -80,7 +80,15 @@ RSpec.describe 'issue boards', :js do
         stub_feature_flags(boards_with_swimlanes: true)
       end
 
-      it 'shows Group by dropdown' do
+      it 'does not show Group by dropdown when user is not logged in' do
+        visit_board_page
+
+        expect(page).to have_css('.filtered-search-block')
+        expect(page).not_to have_css('.board-swimlanes-toggle-wrapper')
+      end
+
+      it 'shows Group by dropdown when user is logged in' do
+        login_as(user)
         visit_board_page
 
         expect(page).to have_css('.board-swimlanes-toggle-wrapper')
@@ -92,9 +100,18 @@ RSpec.describe 'issue boards', :js do
         stub_feature_flags(boards_with_swimlanes: false)
       end
 
-      it 'does not show Group by dropdown' do
+      it 'does not show Group by dropdown when user is not logged in' do
+        visit_board_page
+
+        expect(page).to have_css('.filtered-search-block')
+        expect(page).not_to have_css('.board-swimlanes-toggle-wrapper')
+      end
+
+      it 'does not show Group by dropdown when user is logged in' do
+        login_as(user)
         visit_board_page
 
+        expect(page).to have_css('.filtered-search-block')
         expect(page).not_to have_css('.board-swimlanes-toggle-wrapper')
       end
     end