Swimlanes - Hide epic lanes with 0 issues

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

@@ -85,6 +85,9 @@ export default {
     isLoading() {
       return Boolean(this.epicsFlags[this.epic.id]?.isLoading);
     },
+    shouldDisplay() {
+      return this.issuesCount > 0 || this.isLoading;
+    },
   },
   watch: {
     filterParams: {
@@ -116,8 +119,11 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="board-epic-lane gl-sticky gl-left-0 gl-display-inline-block">
+  <div v-if="shouldDisplay">
+    <div
+      class="board-epic-lane gl-sticky gl-left-0 gl-display-inline-block"
+      data-testid="board-epic-lane"
+    >
       <div class="gl-pb-5 gl-px-3 gl-display-flex gl-align-items-center">
         <gl-button
           v-gl-tooltip.hover.right

ee/spec/features/boards/swimlanes/epics_swimlanes_drag_issue_spec.rb

@@ -43,19 +43,29 @@ RSpec.describe 'epics swimlanes', :js do
       wait_for_board_cards_in_first_epic(0, 1)
       wait_for_board_cards_in_second_epic(1, 1)
 
+      epic_lanes = page.all(:css, '.board-epic-lane')
+      expect(epic_lanes.length).to eq(2)
+
       drag(list_from_index: 4, list_to_index: 1)
 
+      epic_lanes = page.all(:css, '.board-epic-lane')
+      expect(epic_lanes.length).to eq(1)
+
       wait_for_board_cards_in_first_epic(1, 1)
-      wait_for_board_cards_in_second_epic(1, 0)
     end
 
     it 'from epic to unassigned issues lane' do
       wait_for_board_cards(1, 2)
       wait_for_board_cards_in_second_epic(1, 1)
 
+      epic_lanes = page.all(:css, '.board-epic-lane')
+      expect(epic_lanes.length).to eq(2)
+
       drag(list_from_index: 4, list_to_index: 7)
 
-      wait_for_board_cards_in_second_epic(1, 0)
+      epic_lanes = page.all(:css, '.board-epic-lane')
+      expect(epic_lanes.length).to eq(1)
+
       wait_for_board_cards_in_unassigned_lane(1, 1)
     end
 

ee/spec/frontend/boards/components/epic_lane_spec.js

@@ -16,14 +16,14 @@ describe('EpicLane', () => {
 
   const updateBoardEpicUserPreferencesSpy = jest.fn();
 
-  const createStore = isLoading => {
+  const createStore = ({ isLoading = false, issuesByListId = mockIssuesByListId }) => {
     return new Vuex.Store({
       actions: {
         fetchIssuesForEpic: jest.fn(),
         updateBoardEpicUserPreferences: updateBoardEpicUserPreferencesSpy,
       },
       state: {
-        issuesByListId: mockIssuesByListId,
+        issuesByListId,
         issues,
         epicsFlags: {
           [mockEpic.id]: { isLoading },
@@ -33,8 +33,12 @@ describe('EpicLane', () => {
     });
   };
 
-  const createComponent = ({ props = {}, isLoading = false } = {}) => {
-    const store = createStore(isLoading);
+  const createComponent = ({
+    props = {},
+    isLoading = false,
+    issuesByListId = mockIssuesByListId,
+  } = {}) => {
+    const store = createStore({ isLoading, issuesByListId });
 
     const defaultProps = {
       epic: mockEpic,
@@ -119,5 +123,10 @@ describe('EpicLane', () => {
         expect(wrapper.vm.isCollapsed).toBe(true);
       });
     });
+
+    it('does not render when issuesCount is 0', () => {
+      createComponent({ issuesByListId: {} });
+      expect(findByTestId('board-epic-lane').exists()).toBe(false);
+    });
   });
 });