Many of these are required for https://gitlab.com/gitlab-org/gitlab/-/issues/218040 - they have been marked as `blocking`. As part of this refactor board store should be migrated to a VueX store. --- _Updates on Apr 22, 2021_ This epic tracks a various issues surrounding the issue boards refactor to use GraphQL + VueX. ## What motivated the refactor? For long, GitLab only had one type of boards: Issue Boards in which issues are organized in lists. As we iterated on and refined our product planning solutions, we needed our issue boards to be able to be organized by epics (see: [epic swimlanes](https://gitlab.com/groups/gitlab-org/-/epics/3352)) and even be generalized to cover different issuable types such as epic (see: [epic boards](https://gitlab.com/groups/gitlab-org/-/epics/2864)). On the ~frontend side, the legacy architecture of issue boards and its components posed a few challenges to satisfying the new requirements. The challenges resulted from: 1) the usage of unorthodox data store patterns, 2) the presence of jquery-based components coupled to HAML and 3) the inflexible API endpoints. In response, we decided to switch in a proper Vuex store and leverage GraphQL in accordance with the GitLab-wide goal of a first-class GraphQL support. ## What is in the refactor? At a finer level on ~frontend, the refactor process involved creating and updating boards components to be **re-usable** oriented around a single Vuex store that handled GraphQL calls. These refactored components are "GraphQL-based" components. ## How does the refactor affect various types of boards? These are the two types of boards we have at GitLab currently: 1) Epic boards (MVC) :large_blue_diamond: 2) Issue boards Note that issue boards can work in two workspaces - Group or Project - and be viewed in two different views. - Group Issue Boards - Group by list (none) :large_orange_diamond: - Group by epics (Epic Swimlanes) :large_blue_diamond: - Project Issue Boards - Group by list (none) :large_orange_diamond: - Group by epics (Epic Swimlanes) :large_blue_diamond: When indicated with :large_blue_diamond:, it means the board is using the GraphQL-based components by default (the refactor allowed building these boards). When indicated with :large_orange_diamond:, it means the board can work either using the legacy components or the GraphQL-based components when `:graphql_board_lists` is turned on. #### tldr, how to tell if the boards you are using is powered by graphql-based components The easiest way to identify if the boards you are looking at is using the refactored, GraphQL-based components is by looking at its sidebar: <details> | legacy boards | graphql-based boards | | ------ | ------ | |  |  | | the sidebar is narrow | the sidebar is wide and allows editing title | </details> #### On the availability of newer features Because we plan to deprecate and remove all legacy boards components, new features may only be available when a board is using GraphQL-based components. Examples. the following features are only available when issue boards are used with `:graphql_board_lists` feature flag or in epic swimlanes mode: the feature merged in gitlab!55821, inline title editing gitlab#16483. ## What are the completion criteria for this epic? - [ ] Rolling out and removal of `:graphql_board_lists` feature flag. - [ ] Removal of all non-VueX store logic. :warning: while all the core boards components (like item card or list) are based on GraphQL, some of the refactored boards sidebar components still utilize the legacy API-based components internally. However, this should not block the progress of this epic and is separately tracked in &5302. :bulb: Among the added benefits of this refactor are: we get to remove much of jquery/haml and non @gitlab-ui components in the process allowing us to resolve many outside issues. However, these do not directly affect the end goal of this epic.