Add latest changes from gitlab-org/gitlab@master

2 files changed, 41 insertions, 26 deletions

diff --git a/app/assets/javascripts/boards/components/board_card_move_to_position.vue b/app/assets/javascripts/boards/components/board_card_move_to_position.vue
index 706b453e868..411423c1849 100644
--- a/app/assets/javascripts/boards/components/board_card_move_to_position.vue
+++ b/app/assets/javascripts/boards/components/board_card_move_to_position.vue
@@ -1,19 +1,17 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
-import { s__ } from '~/locale';
-
 import Tracking from '~/tracking';
+import {
+  BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS,
+  BOARD_CARD_MOVE_TO_POSITIONS_START_OPTION,
+} from '../constants';
 
 export default {
-  i18n: {
-    moveToStartText: s__('Boards|Move to start of list'),
-    moveToEndText: s__('Boards|Move to end of list'),
-  },
+  BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS,
   name: 'BoardCardMoveToPosition',
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -96,30 +94,29 @@ export default {
         allItemsLoadedInList: !this.listHasNextPage,
       });
     },
+    selectMoveAction({ text }) {
+      if (text === BOARD_CARD_MOVE_TO_POSITIONS_START_OPTION) {
+        this.moveToStart();
+      } else {
+        this.moveToEnd();
+      }
+    },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown
+  <gl-disclosure-dropdown
     ref="dropdown"
     :key="itemIdentifier"
-    icon="ellipsis_v"
-    :text="s__('Boards|Move card')"
-    :text-sr-only="true"
-    class="move-to-position gl-display-block gl-mb-2 gl-ml-2 gl-mt-n3 gl-mr-n3"
+    class="move-to-position gl-display-block gl-mb-2 gl-ml-2 gl-mt-n3 gl-mr-n3 js-no-trigger"
     category="tertiary"
+    :items="$options.BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS"
+    icon="ellipsis_v"
     :tabindex="index"
+    :toggle-text="s__('Boards|Move card')"
+    :text-sr-only="true"
     no-caret
-    @keydown.esc.native="$emit('hide')"
-  >
-    <div>
-      <gl-dropdown-item @click.stop="moveToStart">
-        {{ $options.i18n.moveToStartText }}
-      </gl-dropdown-item>
-      <gl-dropdown-item @click.stop="moveToEnd">
-        {{ $options.i18n.moveToEndText }}
-      </gl-dropdown-item>
-    </div>
-  </gl-dropdown>
+    @action="selectMoveAction"
+  />
 </template>
diff --git a/app/assets/javascripts/boards/constants.js b/app/assets/javascripts/boards/constants.js
index 7a5ef01606f..5941e237298 100644
--- a/app/assets/javascripts/boards/constants.js
+++ b/app/assets/javascripts/boards/constants.js
@@ -1,5 +1,5 @@
 import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
-import { __ } from '~/locale';
+import { s__, __ } from '~/locale';
 import updateEpicSubscriptionMutation from '~/sidebar/queries/update_epic_subscription.mutation.graphql';
 import updateEpicTitleMutation from '~/sidebar/queries/update_epic_title.mutation.graphql';
 import destroyBoardListMutation from './graphql/board_list_destroy.mutation.graphql';
@@ -152,3 +152,21 @@ export default {
 };
 
 export const DEFAULT_BOARD_LIST_ITEMS_SIZE = 10;
+
+export const BOARD_CARD_MOVE_TO_POSITIONS_START_OPTION = s__('Boards|Move to start of list');
+export const BOARD_CARD_MOVE_TO_POSITIONS_END_OPTION = s__('Boards|Move to end of list');
+
+/**
+ * Actions are stubbed in order to pass validation
+ * for GlDisclosureDropdown items property
+ */
+export const BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS = [
+  {
+    text: BOARD_CARD_MOVE_TO_POSITIONS_START_OPTION,
+    action: () => {},
+  },
+  {
+    text: BOARD_CARD_MOVE_TO_POSITIONS_END_OPTION,
+    action: () => {},
+  },
+];