Epic multiple boards switcher

Populate boards selector with epic boards
Allow switching between epic boards in dropdown

app/assets/javascripts/boards/mount_multiple_boards_switcher.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { mapGetters } from 'vuex';
-import BoardsSelector from '~/boards/components/boards_selector.vue';
+import BoardsSelector from 'ee_else_ce/boards/components/boards_selector.vue';
 import BoardsSelectorDeprecated from '~/boards/components/boards_selector_deprecated.vue';
 import store from '~/boards/stores';
 import createDefaultClient from '~/lib/graphql';
@@ -51,7 +51,7 @@ export default (params = {}) => {
       ...mapGetters(['shouldUseGraphQL']),
     },
     render(createElement) {
-      if (this.shouldUseGraphQL) {
+      if (this.shouldUseGraphQL || params.isEpicBoard) {
         return createElement(BoardsSelector, {
           props: this.boardsSelectorProps,
         });

app/assets/javascripts/boards/stores/state.js

@@ -2,6 +2,7 @@ import { inactiveId } from '~/boards/constants';
 
 export default () => ({
   boardType: null,
+  fullPath: null,
   disabled: false,
   isShowingLabels: true,
   activeId: inactiveId,

app/helpers/boards_helper.rb

@@ -59,7 +59,9 @@ module BoardsHelper
   end
 
   def board_base_url
-    if board.group_board?
+    if board.to_type == "EpicBoard"
+      group_epic_boards_url(@group)
+    elsif board.group_board?
       group_boards_url(@group)
     else
       project_boards_path(@project)

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

+<script>
+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// extends a valid Vue single file component.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
+import { mapState } from 'vuex';
+import BoardsSelectorFoss from '~/boards/components/boards_selector.vue';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import epicBoardsQuery from '../graphql/epic_boards.query.graphql';
+
+export default {
+  extends: BoardsSelectorFoss,
+  computed: {
+    ...mapState(['isEpicBoard', 'fullPath']),
+  },
+  methods: {
+    loadBoards(toggleDropdown = true) {
+      if (toggleDropdown && this.boards.length > 0) {
+        return;
+      }
+
+      if (this.isEpicBoard) {
+        this.$apollo.addSmartQuery('boards', {
+          variables() {
+            return { fullPath: this.fullPath };
+          },
+          query() {
+            return epicBoardsQuery;
+          },
+          loadingKey: 'loadingBoards',
+          update(data) {
+            if (!data?.group) {
+              return [];
+            }
+            return data.group.epicBoards.nodes.map((node) => ({
+              id: getIdFromGraphQLId(node.id),
+              name: node.name,
+            }));
+          },
+        });
+      } else {
+        BoardsSelectorFoss.methods.loadBoards.call(this);
+      }
+    },
+  },
+};
+</script>

ee/app/assets/javascripts/boards/graphql/epic_boards.query.graphql

+query EpicBoards($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    epicBoards {
+      nodes {
+        id
+        name
+      }
+    }
+  }
+}

ee/app/assets/javascripts/epic_boards/index.js

@@ -83,6 +83,7 @@ export default () => {
         fullPath: $boardApp.dataset.fullPath,
         boardType: this.parent,
         disabled: this.disabled,
+        isEpicBoard: true,
         boardConfig: {
           milestoneId: parseInt($boardApp.dataset.boardMilestoneId, 10),
           milestoneTitle: $boardApp.dataset.boardMilestoneTitle || '',
@@ -115,5 +116,6 @@ export default () => {
   mountMultipleBoardsSwitcher({
     fullPath: $boardApp.dataset.fullPath,
     rootPath: $boardApp.dataset.boardsEndpoint,
+    isEpicBoard: true,
   });
 };

ee/spec/features/epic_boards/multiple_epic_boards_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'epic boards', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group, :public) }
+
+  let_it_be(:epic_board) { create(:epic_board, group: group) }
+  let_it_be(:epic_board2) { create(:epic_board, group: group) }
+
+  context 'multiple epic boards' do
+    before do
+      stub_licensed_features(epics: true)
+      sign_in(user)
+      visit_epic_boards_page
+    end
+
+    it 'shows current epic board name' do
+      page.within('.boards-switcher') do
+        expect(page).to have_content(epic_board.name)
+      end
+    end
+
+    it 'shows a list of epic boards' do
+      in_boards_switcher_dropdown do
+        expect(page).to have_content(epic_board.name)
+        expect(page).to have_content(epic_board2.name)
+      end
+    end
+
+    it 'switches current epic board' do
+      in_boards_switcher_dropdown do
+        click_link epic_board2.name
+      end
+
+      wait_for_requests
+
+      page.within('.boards-switcher') do
+        expect(page).to have_content(epic_board2.name)
+      end
+    end
+  end
+
+  def visit_epic_boards_page
+    visit group_epic_boards_path(group)
+    wait_for_requests
+  end
+
+  def in_boards_switcher_dropdown
+    find('.boards-switcher').click
+
+    wait_for_requests
+
+    dropdown_selector = '.js-boards-selector .dropdown-menu'
+    page.within(dropdown_selector) do
+      yield
+    end
+  end
+end