Merge branch '7714-boards-fe' into 'master'

Display Recent Boards in Board switcher

See merge request gitlab-org/gitlab-ce!25696

app/assets/javascripts/boards/index.js

@@ -58,6 +58,7 @@ export default () => {
       state: boardsStore.state,
       loading: true,
       boardsEndpoint: $boardApp.dataset.boardsEndpoint,
+      recentBoardsEndpoint: $boardApp.dataset.recentBoardsEndpoint,
       listsEndpoint: $boardApp.dataset.listsEndpoint,
       boardId: $boardApp.dataset.boardId,
       disabled: parseBoolean($boardApp.dataset.disabled),
@@ -75,6 +76,7 @@ export default () => {
     created() {
       gl.boardService = new BoardService({
         boardsEndpoint: this.boardsEndpoint,
+        recentBoardsEndpoint: this.recentBoardsEndpoint,
         listsEndpoint: this.listsEndpoint,
         bulkUpdatePath: this.bulkUpdatePath,
         boardId: this.boardId,

app/assets/javascripts/boards/services/board_service.js

@@ -2,12 +2,13 @@ import axios from '../../lib/utils/axios_utils';
 import { mergeUrlParams } from '../../lib/utils/url_utility';
 
 export default class BoardService {
-  constructor({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId }) {
+  constructor({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId, recentBoardsEndpoint }) {
     this.boardsEndpoint = boardsEndpoint;
     this.boardId = boardId;
     this.listsEndpoint = listsEndpoint;
     this.listsEndpointGenerate = `${listsEndpoint}/generate.json`;
     this.bulkUpdatePath = bulkUpdatePath;
+    this.recentBoardsEndpoint = `${recentBoardsEndpoint}.json`;
   }
 
   generateBoardsPath(id) {

app/assets/javascripts/lib/utils/http_status.js

@@ -16,6 +16,7 @@ const httpStatusCodes = {
   IM_USED: 226,
   MULTIPLE_CHOICES: 300,
   BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
   FORBIDDEN: 403,
   NOT_FOUND: 404,
   UNPROCESSABLE_ENTITY: 422,

app/assets/stylesheets/framework/variables.scss

@@ -343,6 +343,7 @@ $regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-San
 $dropdown-width: 300px;
 $dropdown-min-height: 40px;
 $dropdown-max-height: 312px;
+$dropdown-max-height-lg: 445px;
 $dropdown-vertical-offset: 4px;
 $dropdown-empty-row-bg: rgba(#000, 0.04);
 $dropdown-shadow-color: rgba(#000, 0.1);

doc/user/project/issue_board.md

@@ -173,10 +173,14 @@ or in situations where a repository is used to host the code of multiple
 products.
 
 Clicking on the current board name in the upper left corner will reveal a
-menu from where you can create another Issue Board and rename or delete the
-existing one.
+menu from where you can create another Issue Board or delete the existing one.
 Using the search box at the top of the menu, you can filter the listed boards.
 
+When you have 10 or more boards available, a "Recent" section is also shown in the menu.
+These are shortcuts to your last 4 visited boards.
+
+![Multiple Issue Boards](img/issue_boards_multiple.png)
+
 When you're revisiting an issue board in a project or group with multiple boards,
 GitLab will automatically load the last board you visited.
 
@@ -184,8 +188,6 @@ NOTE: **Note:**
 The Multiple Issue Boards feature is available for
 **projects in GitLab Starter Edition** and for **groups in GitLab Premium Edition**.
 
-![Multiple Issue Boards](img/issue_boards_multiple.png)
-
 ### Configurable Issue Boards **[STARTER]**
 
 > Introduced in [GitLab Starter Edition 10.2](https://about.gitlab.com/2017/11/22/gitlab-10-2-released/#issue-boards-configuration).