Merge branch 'cngo-refactor-sortable' into 'master'

Refactor sortablejs related constants and utils

See merge request gitlab-org/gitlab!84497

app/assets/javascripts/boards/components/board_content.vue

@@ -4,7 +4,7 @@ import { sortBy } from 'lodash';
 import Draggable from 'vuedraggable';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
-import defaultSortableConfig from '~/sortable/sortable_config';
+import { defaultSortableOptions } from '~/sortable/constants';
 import { DraggableItemTypes } from '../constants';
 import BoardColumn from './board_column.vue';
 
@@ -43,7 +43,7 @@ export default {
     },
     draggableOptions() {
       const options = {
-        ...defaultSortableConfig,
+        ...defaultSortableOptions,
         disabled: this.disabled,
         draggable: '.is-draggable',
         fallbackOnBody: false,

app/assets/javascripts/boards/components/board_list.vue

@@ -2,9 +2,9 @@
 import { GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import Draggable from 'vuedraggable';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { sortableStart, sortableEnd } from '~/boards/mixins/sortable_default_options';
 import { sprintf, __ } from '~/locale';
-import defaultSortableConfig from '~/sortable/sortable_config';
+import { defaultSortableOptions } from '~/sortable/constants';
+import { sortableStart, sortableEnd } from '~/sortable/utils';
 import Tracking from '~/tracking';
 import listQuery from 'ee_else_ce/boards/graphql/board_lists_deferred.query.graphql';
 import { toggleFormEventPrefix, DraggableItemTypes } from '../constants';
@@ -121,7 +121,7 @@ export default {
     },
     treeRootOptions() {
       const options = {
-        ...defaultSortableConfig,
+        ...defaultSortableOptions,
         fallbackOnBody: false,
         group: 'board-list',
         tag: 'ul',

app/assets/javascripts/boards/components/issuable_title.vue

-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    refPath: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div data-testid="issue-title">
-    <p class="gl-font-weight-bold">{{ title }}</p>
-    <p class="gl-mb-0">{{ refPath }}</p>
-  </div>
-</template>

app/assets/javascripts/issues/manual_ordering.js

 import Sortable from 'sortablejs';
-import {
-  getBoardSortableDefaultOptions,
-  sortableStart,
-} from '~/boards/mixins/sortable_default_options';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
+import { getSortableDefaultOptions, sortableStart } from '~/sortable/utils';
 
 const updateIssue = (url, { move_before_id, move_after_id }) =>
   axios
@@ -28,7 +25,7 @@ const initManualOrdering = () => {
 
   Sortable.create(
     issueList,
-    getBoardSortableDefaultOptions({
+    getSortableDefaultOptions({
       scroll: true,
       fallbackTolerance: 1,
       dataIdAttr: 'data-id',

app/assets/javascripts/related_issues/components/related_issues_list.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import Sortable from 'sortablejs';
-import sortableConfig from '~/sortable/sortable_config';
 import RelatedIssuableItem from '~/issuable/components/related_issuable_item.vue';
+import { defaultSortableOptions } from '~/sortable/constants';
 
 export default {
   name: 'RelatedIssuesList',
@@ -53,7 +53,7 @@ export default {
   mounted() {
     if (this.canReorder) {
       this.sortable = Sortable.create(this.$refs.list, {
-        ...sortableConfig,
+        ...defaultSortableOptions,
         onStart: this.addDraggingCursor,
         onEnd: this.reordered,
       });

app/assets/javascripts/sortable/sortable_config.js → app/assets/javascripts/sortable/constants.js

-export default {
+/**
+ * Default config options for sortablejs.
+ * @type {object}
+ *
+ * @example
+ * import Sortable from 'sortablejs';
+ *
+ * const sortable = Sortable.create(el, {
+ *   ...defaultSortableOptions,
+ * });
+ */
+export const defaultSortableOptions = {
   animation: 200,
   forceFallback: true,
   fallbackClass: 'is-dragging',

app/assets/javascripts/boards/mixins/sortable_default_options.js → app/assets/javascripts/sortable/utils.js

 /* global DocumentTouch */
 
-import sortableConfig from '~/sortable/sortable_config';
+import { defaultSortableOptions } from './constants';
 
 export function sortableStart() {
   document.body.classList.add('is-dragging');
@@ -10,12 +10,12 @@ export function sortableEnd() {
   document.body.classList.remove('is-dragging');
 }
 
-export function getBoardSortableDefaultOptions(obj) {
+export function getSortableDefaultOptions(options) {
   const touchEnabled =
     'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
 
   const defaultSortOptions = {
-    ...sortableConfig,
+    ...defaultSortableOptions,
     filter: '.no-drag',
     delay: touchEnabled ? 100 : 0,
     scrollSensitivity: touchEnabled ? 60 : 100,
@@ -24,8 +24,8 @@ export function getBoardSortableDefaultOptions(obj) {
     onEnd: sortableEnd,
   };
 
-  Object.keys(obj).forEach((key) => {
-    defaultSortOptions[key] = obj[key];
-  });
-  return defaultSortOptions;
+  return {
+    ...defaultSortOptions,
+    ...options,
+  };
 }

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -8,7 +8,7 @@ import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue'
 import { isListDraggable } from '~/boards/boards_util';
 import eventHub from '~/boards/eventhub';
 import { s__, n__, __ } from '~/locale';
-import defaultSortableConfig from '~/sortable/sortable_config';
+import { defaultSortableOptions } from '~/sortable/constants';
 import { calculateSwimlanesBufferSize } from '../boards_util';
 import { DRAGGABLE_TAG, EPIC_LANE_BASE_HEIGHT, DraggableItemTypes } from '../constants';
 import EpicLane from './epic_lane.vue';
@@ -83,7 +83,7 @@ export default {
     },
     treeRootOptions() {
       const options = {
-        ...defaultSortableConfig,
+        ...defaultSortableOptions,
         fallbackOnBody: false,
         group: 'board-swimlanes',
         tag: DRAGGABLE_TAG,

ee/app/assets/javascripts/boards/components/issues_lane_list.vue

@@ -5,7 +5,7 @@ import { mapState, mapActions } from 'vuex';
 import BoardCard from '~/boards/components/board_card.vue';
 import BoardNewIssue from '~/boards/components/board_new_issue.vue';
 import eventHub from '~/boards/eventhub';
-import defaultSortableConfig from '~/sortable/sortable_config';
+import { defaultSortableOptions } from '~/sortable/constants';
 
 export default {
   components: {
@@ -57,7 +57,7 @@ export default {
     },
     treeRootOptions() {
       const options = {
-        ...defaultSortableConfig,
+        ...defaultSortableOptions,
         fallbackOnBody: false,
         group: 'board-epics-swimlanes',
         tag: 'ul',

ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js

 import Draggable from 'vuedraggable';
 
-import defaultSortableConfig from '~/sortable/sortable_config';
+import { defaultSortableOptions } from '~/sortable/constants';
 import { idProp, relativePositions, treeItemChevronBtnClassName } from '../constants';
 
 export default {
@@ -10,7 +10,7 @@ export default {
     },
     treeRootOptions() {
       const options = {
-        ...defaultSortableConfig,
+        ...defaultSortableOptions,
         fallbackOnBody: false,
         group: 'sortable-container',
         tag: 'ul',

ee/spec/frontend/related_items_tree/components/tree_root_spec.js

@@ -104,7 +104,7 @@ describe('RelatedItemsTree', () => {
           });
 
           describe('treeRootOptions', () => {
-            it('should return object containing Vue.Draggable config extended from `defaultSortableConfig` when userSignedIn prop is true', () => {
+            it('should return object containing Vue.Draggable config extended from `defaultSortableOptions` when userSignedIn prop is true', () => {
               expect(wrapper.vm.treeRootOptions).toEqual(
                 expect.objectContaining({
                   animation: 200,

spec/frontend/boards/components/issuable_title_spec.js

-import { shallowMount } from '@vue/test-utils';
-import IssuableTitle from '~/boards/components/issuable_title.vue';
-
-describe('IssuableTitle', () => {
-  let wrapper;
-  const defaultProps = {
-    title: 'One',
-    refPath: 'path',
-  };
-  const createComponent = () => {
-    wrapper = shallowMount(IssuableTitle, {
-      propsData: { ...defaultProps },
-    });
-  };
-  const findIssueContent = () => wrapper.find('[data-testid="issue-title"]');
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('renders a title of an issue in the sidebar', () => {
-    expect(findIssueContent().text()).toContain('One');
-  });
-
-  it('renders a referencePath of an issue in the sidebar', () => {
-    expect(findIssueContent().text()).toContain('path');
-  });
-});