1 files changed, 23 insertions, 25 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..f58f7838576 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,30 @@ 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-auto 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>
+    data-testid="board-move-to-position"
+    @action="selectMoveAction"
+  />
 </template>