Add latest changes from gitlab-org/gitlab@master

8 files changed, 106 insertions, 111 deletions

diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue
index 28f4a267077..858aabb0f05 100644
--- a/app/assets/javascripts/boards/components/board_app.vue
+++ b/app/assets/javascripts/boards/components/board_app.vue
@@ -2,11 +2,13 @@
 import { mapActions, mapGetters } from 'vuex';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
+import BoardTopBar from '~/boards/components/board_top_bar.vue';
 
 export default {
   components: {
     BoardContent,
     BoardSettingsSidebar,
+    BoardTopBar,
   },
   inject: ['disabled'],
   computed: {
@@ -23,6 +25,7 @@ export default {
 
 <template>
   <div class="boards-app gl-relative" :class="{ 'is-compact': isSidebarOpen }">
+    <board-top-bar />
     <board-content :disabled="disabled" />
     <board-settings-sidebar />
   </div>
diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
index 5fcf9514708..aba1f42ead5 100644
--- a/app/assets/javascripts/boards/components/board_form.vue
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -48,7 +48,7 @@ export default {
     fullPath: {
       default: '',
     },
-    rootPath: {
+    boardBaseUrl: {
       default: '',
     },
   },
@@ -209,7 +209,7 @@ export default {
       if (this.isDeleteForm) {
         try {
           await this.deleteBoard();
-          visitUrl(this.rootPath);
+          visitUrl(this.boardBaseUrl);
         } catch {
           this.setError({ message: this.$options.i18n.deleteErrorMessage });
         } finally {
diff --git a/app/assets/javascripts/boards/components/board_top_bar.vue b/app/assets/javascripts/boards/components/board_top_bar.vue
new file mode 100644
index 00000000000..f90ac1e9079
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_top_bar.vue
@@ -0,0 +1,54 @@
+<script>
+import { mapGetters } from 'vuex';
+import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
+import BoardsSelector from 'ee_else_ce/boards/components/boards_selector.vue';
+import IssueBoardFilteredSearch from 'ee_else_ce/boards/components/issue_board_filtered_search.vue';
+import ConfigToggle from './config_toggle.vue';
+import NewBoardButton from './new_board_button.vue';
+import ToggleFocus from './toggle_focus.vue';
+
+export default {
+  components: {
+    BoardAddNewColumnTrigger,
+    BoardsSelector,
+    IssueBoardFilteredSearch,
+    ConfigToggle,
+    NewBoardButton,
+    ToggleFocus,
+    ToggleLabels: () => import('ee_component/boards/components/toggle_labels.vue'),
+    ToggleEpicsSwimlanes: () => import('ee_component/boards/components/toggle_epics_swimlanes.vue'),
+    EpicBoardFilteredSearch: () =>
+      import('ee_component/boards/components/epic_filtered_search.vue'),
+  },
+  inject: ['swimlanesFeatureAvailable', 'canAdminList', 'isSignedIn'],
+  computed: {
+    ...mapGetters(['isEpicBoard']),
+  },
+};
+</script>
+
+<template>
+  <div class="issues-filters">
+    <div
+      class="issues-details-filters filtered-search-block gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row row-content-block second-block"
+    >
+      <div
+        class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-flex-grow-1 gl-lg-mb-0! mb-md-2 mb-sm-0 gl-w-full"
+      >
+        <boards-selector />
+        <new-board-button />
+        <epic-board-filtered-search v-if="isEpicBoard" />
+        <issue-board-filtered-search v-else />
+      </div>
+      <div
+        class="filter-dropdown-container gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-align-items-flex-start"
+      >
+        <toggle-labels />
+        <toggle-epics-swimlanes v-if="swimlanesFeatureAvailable && isSignedIn" />
+        <config-toggle />
+        <board-add-new-column-trigger v-if="canAdminList" />
+        <toggle-focus />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 91fdfd668fc..8333856e996 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -40,37 +40,21 @@ export default {
   directives: {
     GlModalDirective,
   },
-  inject: ['fullPath'],
+  inject: [
+    'boardBaseUrl',
+    'fullPath',
+    'canAdminBoard',
+    'multipleIssueBoardsAvailable',
+    'hasMissingBoards',
+    'scopedIssueBoardFeatureEnabled',
+    'weights',
+  ],
   props: {
     throttleDuration: {
       type: Number,
       default: 200,
       required: false,
     },
-    boardBaseUrl: {
-      type: String,
-      required: true,
-    },
-    hasMissingBoards: {
-      type: Boolean,
-      required: true,
-    },
-    canAdminBoard: {
-      type: Boolean,
-      required: true,
-    },
-    multipleIssueBoardsAvailable: {
-      type: Boolean,
-      required: true,
-    },
-    scopedIssueBoardFeatureEnabled: {
-      type: Boolean,
-      required: true,
-    },
-    weights: {
-      type: Array,
-      required: true,
-    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/boards/components/config_toggle.vue b/app/assets/javascripts/boards/components/config_toggle.vue
index f39e4d90357..4746f598ab7 100644
--- a/app/assets/javascripts/boards/components/config_toggle.vue
+++ b/app/assets/javascripts/boards/components/config_toggle.vue
@@ -14,16 +14,7 @@ export default {
     GlModalDirective,
   },
   mixins: [Tracking.mixin()],
-  props: {
-    canAdminList: {
-      type: Boolean,
-      required: true,
-    },
-    hasScope: {
-      type: Boolean,
-      required: true,
-    },
-  },
+  inject: ['canAdminList', 'hasScope'],
   computed: {
     buttonText() {
       return this.canAdminList ? s__('Boards|Edit board') : s__('Boards|View scope');
diff --git a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
index 6bfdbb674a2..bab6fe26978 100644
--- a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
+++ b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
@@ -41,17 +41,7 @@ export default {
     confidential: __('Confidential'),
   },
   components: { BoardFilteredSearch },
-  inject: ['isSignedIn', 'releasesFetchPath'],
-  props: {
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    boardType: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['isSignedIn', 'releasesFetchPath', 'fullPath', 'boardType'],
   computed: {
     isGroupBoard() {
       return this.boardType === BoardType.group;
diff --git a/app/assets/javascripts/boards/components/toggle_focus.vue b/app/assets/javascripts/boards/components/toggle_focus.vue
index 49f5e7d20a9..0169c9c72ed 100644
--- a/app/assets/javascripts/boards/components/toggle_focus.vue
+++ b/app/assets/javascripts/boards/components/toggle_focus.vue
@@ -10,12 +10,6 @@ export default {
   directives: {
     GlTooltip,
   },
-  props: {
-    issueBoardsContentSelector: {
-      type: String,
-      required: true,
-    },
-  },
   data() {
     return {
       isFullscreen: false,
@@ -25,7 +19,7 @@ export default {
     toggleFocusMode() {
       hide(this.$refs.toggleFocusModeButton);
 
-      const issueBoardsContent = document.querySelector(this.issueBoardsContentSelector);
+      const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
       issueBoardsContent.classList.toggle('is-focused');
 
       this.isFullscreen = !this.isFullscreen;
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index b31b56e6839..2abc283c5b4 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -1,22 +1,20 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-
-import toggleEpicsSwimlanes from 'ee_else_ce/boards/toggle_epics_swimlanes';
-import toggleLabels from 'ee_else_ce/boards/toggle_labels';
-import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
 import BoardApp from '~/boards/components/board_app.vue';
 import '~/boards/filters/due_date_filters';
 import { issuableTypes } from '~/boards/constants';
-import initBoardsFilteredSearch from '~/boards/mount_filtered_search_issue_boards';
 import store from '~/boards/stores';
-import toggleFocusMode from '~/boards/toggle_focus';
-import { NavigationType, isLoggedIn, parseBoolean } from '~/lib/utils/common_utils';
+import {
+  NavigationType,
+  isLoggedIn,
+  parseBoolean,
+  convertObjectPropsToCamelCase,
+} from '~/lib/utils/common_utils';
+import { queryToObject } from '~/lib/utils/url_utility';
 import { fullBoardId } from './boards_util';
-import boardConfigToggle from './config_toggle';
 import initNewBoard from './new_board';
 import { gqlClient } from './graphql';
-import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher';
 
 Vue.use(VueApollo);
 Vue.use(PortalVue);
@@ -28,6 +26,12 @@ const apolloProvider = new VueApollo({
 function mountBoardApp(el) {
   const { boardId, groupId, fullPath, rootPath } = el.dataset;
 
+  const rawFilterParams = queryToObject(window.location.search, { gatherArrays: true });
+
+  const initialFilterParams = {
+    ...convertObjectPropsToCamelCase(rawFilterParams),
+  };
+
   store.dispatch('fetchBoard', {
     fullPath,
     fullBoardId: fullBoardId(boardId),
@@ -54,26 +58,41 @@ function mountBoardApp(el) {
       boardId,
       groupId: Number(groupId),
       rootPath,
+      fullPath,
+      initialFilterParams,
+      boardBaseUrl: el.dataset.boardBaseUrl,
+      boardType: el.dataset.parent,
       currentUserId: gon.current_user_id || null,
-      canUpdate: parseBoolean(el.dataset.canUpdate),
-      canAdminList: parseBoolean(el.dataset.canAdminList),
+      boardWeight: el.dataset.boardWeight ? parseInt(el.dataset.boardWeight, 10) : null,
       labelsManagePath: el.dataset.labelsManagePath,
       labelsFilterBasePath: el.dataset.labelsFilterBasePath,
+      releasesFetchPath: el.dataset.releasesFetchPath,
       timeTrackingLimitToHours: parseBoolean(el.dataset.timeTrackingLimitToHours),
+      issuableType: issuableTypes.issue,
+      emailsDisabled: parseBoolean(el.dataset.emailsDisabled),
+      hasScope: parseBoolean(el.dataset.hasScope),
+      hasMissingBoards: parseBoolean(el.dataset.hasMissingBoards),
+      weights: el.dataset.weights ? JSON.parse(el.dataset.weights) : [],
+      // Permissions
+      canUpdate: parseBoolean(el.dataset.canUpdate),
+      canAdminList: parseBoolean(el.dataset.canAdminList),
+      canAdminBoard: parseBoolean(el.dataset.canAdminBoard),
+      allowLabelCreate: parseBoolean(el.dataset.canUpdate),
+      allowLabelEdit: parseBoolean(el.dataset.canUpdate),
+      isSignedIn: isLoggedIn(),
+      // Features
       multipleAssigneesFeatureAvailable: parseBoolean(el.dataset.multipleAssigneesFeatureAvailable),
       epicFeatureAvailable: parseBoolean(el.dataset.epicFeatureAvailable),
       iterationFeatureAvailable: parseBoolean(el.dataset.iterationFeatureAvailable),
       weightFeatureAvailable: parseBoolean(el.dataset.weightFeatureAvailable),
-      boardWeight: el.dataset.boardWeight ? parseInt(el.dataset.boardWeight, 10) : null,
       scopedLabelsAvailable: parseBoolean(el.dataset.scopedLabels),
       milestoneListsAvailable: parseBoolean(el.dataset.milestoneListsAvailable),
       assigneeListsAvailable: parseBoolean(el.dataset.assigneeListsAvailable),
       iterationListsAvailable: parseBoolean(el.dataset.iterationListsAvailable),
-      issuableType: issuableTypes.issue,
-      emailsDisabled: parseBoolean(el.dataset.emailsDisabled),
-      allowLabelCreate: parseBoolean(el.dataset.canUpdate),
-      allowLabelEdit: parseBoolean(el.dataset.canUpdate),
       allowScopedLabels: parseBoolean(el.dataset.scopedLabels),
+      swimlanesFeatureAvailable: gon.licensed_features?.swimlanes,
+      multipleIssueBoardsAvailable: parseBoolean(el.dataset.multipleBoardsAvailable),
+      scopedIssueBoardFeatureEnabled: parseBoolean(el.dataset.scopedIssueBoardFeatureEnabled),
     },
     render: (createComponent) => createComponent(BoardApp),
   });
@@ -92,47 +111,7 @@ export default () => {
     }
   });
 
-  const { releasesFetchPath, epicFeatureAvailable, iterationFeatureAvailable } = $boardApp.dataset;
-  initBoardsFilteredSearch(
-    apolloProvider,
-    isLoggedIn(),
-    releasesFetchPath,
-    parseBoolean(epicFeatureAvailable),
-    parseBoolean(iterationFeatureAvailable),
-  );
-
   mountBoardApp($boardApp);
 
-  const createColumnTriggerEl = document.querySelector('.js-create-column-trigger');
-  if (createColumnTriggerEl) {
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: createColumnTriggerEl,
-      name: 'BoardAddNewColumnTriggerRoot',
-      components: {
-        BoardAddNewColumnTrigger,
-      },
-      store,
-      render(createElement) {
-        return createElement('board-add-new-column-trigger');
-      },
-    });
-  }
-
-  boardConfigToggle();
   initNewBoard();
-
-  toggleFocusMode();
-  toggleLabels();
-
-  if (gon.licensed_features?.swimlanes) {
-    toggleEpicsSwimlanes();
-  }
-
-  mountMultipleBoardsSwitcher({
-    fullPath: $boardApp.dataset.fullPath,
-    rootPath: $boardApp.dataset.boardsEndpoint,
-    allowScopedLabels: $boardApp.dataset.scopedLabels,
-    labelsManagePath: $boardApp.dataset.labelsManagePath,
-  });
 };