Move boards switcher partial

(cherry picked from commit a82e4d57a6fbba840a8a944e372b80866a1e48cc)

4 files changed, 586 insertions, 3 deletions

diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
new file mode 100644
index 00000000000..6754abf4019
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -0,0 +1,216 @@
+<script>
+import Flash from '~/flash';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import { visitUrl } from '~/lib/utils/url_utility';
+import boardsStore from '~/boards/stores/boards_store';
+
+const boardDefaults = {
+  id: false,
+  name: '',
+  labels: [],
+  milestone_id: undefined,
+  assignee: {},
+  assignee_id: undefined,
+  weight: null,
+};
+
+export default {
+  components: {
+    BoardScope: () => import('ee_component/boards/components/board_scope.vue'),
+    DeprecatedModal,
+  },
+  props: {
+    canAdminBoard: {
+      type: Boolean,
+      required: true,
+    },
+    milestonePath: {
+      type: String,
+      required: true,
+    },
+    labelsPath: {
+      type: String,
+      required: true,
+    },
+    scopedIssueBoardFeatureEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    projectId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    groupId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    weights: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    enableScopedLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    scopedLabelsDocumentationLink: {
+      type: String,
+      required: false,
+      default: '#',
+    },
+  },
+  data() {
+    return {
+      board: { ...boardDefaults, ...this.currentBoard },
+      currentBoard: boardsStore.state.currentBoard,
+      currentPage: boardsStore.state.currentPage,
+      isLoading: false,
+    };
+  },
+  computed: {
+    isNewForm() {
+      return this.currentPage === 'new';
+    },
+    isDeleteForm() {
+      return this.currentPage === 'delete';
+    },
+    isEditForm() {
+      return this.currentPage === 'edit';
+    },
+    isVisible() {
+      return this.currentPage !== '';
+    },
+    buttonText() {
+      if (this.isNewForm) {
+        return 'Create board';
+      }
+      if (this.isDeleteForm) {
+        return 'Delete';
+      }
+      return 'Save changes';
+    },
+    buttonKind() {
+      if (this.isNewForm) {
+        return 'success';
+      }
+      if (this.isDeleteForm) {
+        return 'danger';
+      }
+      return 'info';
+    },
+    title() {
+      if (this.isNewForm) {
+        return 'Create new board';
+      }
+      if (this.isDeleteForm) {
+        return 'Delete board';
+      }
+      if (this.readonly) {
+        return 'Board scope';
+      }
+      return 'Edit board';
+    },
+    readonly() {
+      return !this.canAdminBoard;
+    },
+    submitDisabled() {
+      return this.isLoading || this.board.name.length === 0;
+    },
+  },
+  mounted() {
+    this.resetFormState();
+    if (this.$refs.name) {
+      this.$refs.name.focus();
+    }
+  },
+  methods: {
+    submit() {
+      if (this.board.name.length === 0) return;
+      this.isLoading = true;
+      if (this.isDeleteForm) {
+        gl.boardService
+          .deleteBoard(this.currentBoard)
+          .then(() => {
+            visitUrl(boardsStore.rootPath);
+          })
+          .catch(() => {
+            Flash('Failed to delete board. Please try again.');
+            this.isLoading = false;
+          });
+      } else {
+        gl.boardService
+          .createBoard(this.board)
+          .then(resp => resp.data)
+          .then(data => {
+            visitUrl(data.board_path);
+          })
+          .catch(() => {
+            Flash('Unable to save your changes. Please try again.');
+            this.isLoading = false;
+          });
+      }
+    },
+    cancel() {
+      boardsStore.showPage('');
+    },
+    resetFormState() {
+      if (this.isNewForm) {
+        // Clear the form when we open the "New board" modal
+        this.board = { ...boardDefaults };
+      } else if (this.currentBoard && Object.keys(this.currentBoard).length) {
+        this.board = { ...boardDefaults, ...this.currentBoard };
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <deprecated-modal
+    v-show="isVisible"
+    :hide-footer="readonly"
+    :title="title"
+    :primary-button-label="buttonText"
+    :kind="buttonKind"
+    :submit-disabled="submitDisabled"
+    modal-dialog-class="board-config-modal"
+    @cancel="cancel"
+    @submit="submit"
+  >
+    <template slot="body">
+      <p v-if="isDeleteForm">Are you sure you want to delete this board?</p>
+      <form v-else class="js-board-config-modal" @submit.prevent>
+        <div v-if="!readonly" class="append-bottom-20">
+          <label class="form-section-title label-bold" for="board-new-name"> Board name </label>
+          <input
+            id="board-new-name"
+            ref="name"
+            v-model="board.name"
+            class="form-control"
+            type="text"
+            placeholder="Enter board name"
+            @keyup.enter="submit"
+          />
+        </div>
+
+        <board-scope
+          v-if="scopedIssueBoardFeatureEnabled"
+          :collapse-scope="isNewForm"
+          :board="board"
+          :can-admin-board="canAdminBoard"
+          :milestone-path="milestonePath"
+          :labels-path="labelsPath"
+          :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
+          :enable-scoped-labels="enableScopedLabels"
+          :project-id="projectId"
+          :group-id="groupId"
+          :weights="weights"
+        />
+      </form>
+    </template>
+  </deprecated-modal>
+</template>
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
new file mode 100644
index 00000000000..b05de4538f2
--- /dev/null
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -0,0 +1,334 @@
+<script>
+import { throttle } from 'underscore';
+import {
+  GlLoadingIcon,
+  GlSearchBoxByType,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownHeader,
+  GlDropdownItem,
+} from '@gitlab/ui';
+
+import Icon from '~/vue_shared/components/icon.vue';
+import httpStatusCodes from '~/lib/utils/http_status';
+import boardsStore from '../stores/boards_store';
+import BoardForm from './board_form.vue';
+
+const MIN_BOARDS_TO_VIEW_RECENT = 10;
+
+export default {
+  name: 'BoardsSelector',
+  components: {
+    Icon,
+    BoardForm,
+    GlLoadingIcon,
+    GlSearchBoxByType,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownHeader,
+    GlDropdownItem,
+  },
+  props: {
+    currentBoard: {
+      type: Object,
+      required: true,
+    },
+    milestonePath: {
+      type: String,
+      required: true,
+    },
+    throttleDuration: {
+      type: Number,
+      default: 200,
+    },
+    boardBaseUrl: {
+      type: String,
+      required: true,
+    },
+    hasMissingBoards: {
+      type: Boolean,
+      required: true,
+    },
+    canAdminBoard: {
+      type: Boolean,
+      required: true,
+    },
+    multipleIssueBoardsAvailable: {
+      type: Boolean,
+      required: true,
+    },
+    labelsPath: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+    groupId: {
+      type: Number,
+      required: true,
+    },
+    scopedIssueBoardFeatureEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    weights: {
+      type: Array,
+      required: true,
+    },
+    enabledScopedLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    scopedLabelsDocumentationLink: {
+      type: String,
+      required: false,
+      default: '#',
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      hasScrollFade: false,
+      scrollFadeInitialized: false,
+      boards: [],
+      recentBoards: [],
+      state: boardsStore.state,
+      throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
+      contentClientHeight: 0,
+      maxPosition: 0,
+      store: boardsStore,
+      filterTerm: '',
+    };
+  },
+  computed: {
+    currentPage() {
+      return this.state.currentPage;
+    },
+    filteredBoards() {
+      return this.boards.filter(board =>
+        board.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
+      );
+    },
+    reload: {
+      get() {
+        return this.state.reload;
+      },
+      set(newValue) {
+        this.state.reload = newValue;
+      },
+    },
+    board() {
+      return this.state.currentBoard;
+    },
+    showDelete() {
+      return this.boards.length > 1;
+    },
+    scrollFadeClass() {
+      return {
+        'fade-out': !this.hasScrollFade,
+      };
+    },
+    showRecentSection() {
+      return (
+        this.recentBoards.length &&
+        this.boards.length > MIN_BOARDS_TO_VIEW_RECENT &&
+        !this.filterTerm.length
+      );
+    },
+  },
+  watch: {
+    filteredBoards() {
+      this.scrollFadeInitialized = false;
+      this.$nextTick(this.setScrollFade);
+    },
+    reload() {
+      if (this.reload) {
+        this.boards = [];
+        this.recentBoards = [];
+        this.loading = true;
+        this.reload = false;
+
+        this.loadBoards(false);
+      }
+    },
+  },
+  created() {
+    boardsStore.setCurrentBoard(this.currentBoard);
+  },
+  methods: {
+    showPage(page) {
+      boardsStore.showPage(page);
+    },
+    loadBoards(toggleDropdown = true) {
+      if (toggleDropdown && this.boards.length > 0) {
+        return;
+      }
+
+      const recentBoardsPromise = new Promise((resolve, reject) =>
+        gl.boardService
+          .recentBoards()
+          .then(resolve)
+          .catch(err => {
+            /**
+             *  If user is unauthorized we'd still want to resolve the
+             *  request to display all boards.
+             */
+            if (err.response.status === httpStatusCodes.UNAUTHORIZED) {
+              resolve({ data: [] }); // recent boards are empty
+              return;
+            }
+            reject(err);
+          }),
+      );
+
+      Promise.all([gl.boardService.allBoards(), recentBoardsPromise])
+        .then(([allBoards, recentBoards]) => [allBoards.data, recentBoards.data])
+        .then(([allBoardsJson, recentBoardsJson]) => {
+          this.loading = false;
+          this.boards = allBoardsJson;
+          this.recentBoards = recentBoardsJson;
+        })
+        .then(() => this.$nextTick()) // Wait for boards list in DOM
+        .then(() => {
+          this.setScrollFade();
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    isScrolledUp() {
+      const { content } = this.$refs;
+      const currentPosition = this.contentClientHeight + content.scrollTop;
+
+      return content && currentPosition < this.maxPosition;
+    },
+    initScrollFade() {
+      this.scrollFadeInitialized = true;
+
+      const { content } = this.$refs;
+
+      this.contentClientHeight = content.clientHeight;
+      this.maxPosition = content.scrollHeight;
+    },
+    setScrollFade() {
+      if (!this.scrollFadeInitialized) this.initScrollFade();
+
+      this.hasScrollFade = this.isScrolledUp();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="boards-switcher js-boards-selector append-right-10">
+    <span class="boards-selector-wrapper js-boards-selector-wrapper">
+      <gl-dropdown
+        toggle-class="dropdown-menu-toggle js-dropdown-toggle"
+        menu-class="flex-column dropdown-extended-height"
+        :text="board.name"
+        @show="loadBoards"
+      >
+        <div>
+          <div class="dropdown-title mb-0" @mousedown.prevent>
+            {{ s__('IssueBoards|Switch board') }}
+          </div>
+        </div>
+
+        <gl-dropdown-header class="mt-0">
+          <gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
+        </gl-dropdown-header>
+
+        <div
+          v-if="!loading"
+          ref="content"
+          class="dropdown-content flex-fill"
+          @scroll.passive="throttledSetScrollFade"
+        >
+          <gl-dropdown-item
+            v-show="filteredBoards.length === 0"
+            class="no-pointer-events text-secondary"
+          >
+            {{ s__('IssueBoards|No matching boards found') }}
+          </gl-dropdown-item>
+
+          <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
+            {{ __('Recent') }}
+          </h6>
+
+          <template v-if="showRecentSection">
+            <gl-dropdown-item
+              v-for="recentBoard in recentBoards"
+              :key="`recent-${recentBoard.id}`"
+              class="js-dropdown-item"
+              :href="`${boardBaseUrl}/${recentBoard.id}`"
+            >
+              {{ recentBoard.name }}
+            </gl-dropdown-item>
+          </template>
+
+          <hr v-if="showRecentSection" class="my-1" />
+
+          <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
+            {{ __('All') }}
+          </h6>
+
+          <gl-dropdown-item
+            v-for="otherBoard in filteredBoards"
+            :key="otherBoard.id"
+            class="js-dropdown-item"
+            :href="`${boardBaseUrl}/${otherBoard.id}`"
+          >
+            {{ otherBoard.name }}
+          </gl-dropdown-item>
+          <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+            {{
+              s__(
+                'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
+              )
+            }}
+          </gl-dropdown-item>
+        </div>
+
+        <div
+          v-show="filteredBoards.length > 0"
+          class="dropdown-content-faded-mask"
+          :class="scrollFadeClass"
+        ></div>
+
+        <gl-loading-icon v-if="loading" />
+
+        <div v-if="canAdminBoard">
+          <gl-dropdown-divider />
+
+          <gl-dropdown-item v-if="multipleIssueBoardsAvailable" @click.prevent="showPage('new')">
+            {{ s__('IssueBoards|Create new board') }}
+          </gl-dropdown-item>
+
+          <gl-dropdown-item
+            v-if="showDelete"
+            class="text-danger"
+            @click.prevent="showPage('delete')"
+          >
+            {{ s__('IssueBoards|Delete board') }}
+          </gl-dropdown-item>
+        </div>
+      </gl-dropdown>
+
+      <board-form
+        v-if="currentPage"
+        :milestone-path="milestonePath"
+        :labels-path="labelsPath"
+        :project-id="projectId"
+        :group-id="groupId"
+        :can-admin-board="canAdminBoard"
+        :scoped-issue-board-feature-enabled="scopedIssueBoardFeatureEnabled"
+        :weights="weights"
+        :enable-scoped-labels="enabledScopedLabels"
+        :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
+      />
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index d6a5372b22d..f5a617a85ad 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
 
-import mountMultipleBoardsSwitcher from 'ee_else_ce/boards/mount_multiple_boards_switcher';
 import Flash from '~/flash';
 import { __ } from '~/locale';
 import './models/label';
@@ -31,6 +30,7 @@ import {
 } from '~/lib/utils/common_utils';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
 import toggleFocusMode from 'ee_else_ce/boards/toggle_focus';
+import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher';
 
 let issueBoardsApp;
 
diff --git a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
index bdb14a7f2f2..8d22f009784 100644
--- a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
+++ b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
@@ -1,2 +1,35 @@
-// this will be moved from EE to CE as part of https://gitlab.com/gitlab-org/gitlab-ce/issues/53811
-export default () => {};
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import BoardsSelector from '~/boards/components/boards_selector.vue';
+
+export default () => {
+  const boardsSwitcherElement = document.getElementById('js-multiple-boards-switcher');
+  return new Vue({
+    el: boardsSwitcherElement,
+    components: {
+      BoardsSelector,
+    },
+    data() {
+      const { dataset } = boardsSwitcherElement;
+
+      const boardsSelectorProps = {
+        ...dataset,
+        currentBoard: JSON.parse(dataset.currentBoard),
+        hasMissingBoards: parseBoolean(dataset.hasMissingBoards),
+        canAdminBoard: parseBoolean(dataset.canAdminBoard),
+        multipleIssueBoardsAvailable: parseBoolean(dataset.multipleIssueBoardsAvailable),
+        projectId: Number(dataset.projectId),
+        groupId: Number(dataset.groupId),
+        scopedIssueBoardFeatureEnabled: parseBoolean(dataset.scopedIssueBoardFeatureEnabled),
+        weights: JSON.parse(dataset.weights),
+      };
+
+      return { boardsSelectorProps };
+    },
+    render(createElement) {
+      return createElement(BoardsSelector, {
+        props: this.boardsSelectorProps,
+      });
+    },
+  });
+};