Merge branch '196698-value-stream-analytics-custom-ordering-of-stages' into 'master'

Resolve "Value Stream Analytics - Custom ordering of stages"

See merge request gitlab-org/gitlab!26074

ee/app/assets/javascripts/analytics/cycle_analytics/components/add_stage_button.vue

@@ -19,7 +19,7 @@ export default {
 <template>
   <li
     :class="[active ? activeClass : inactiveClass]"
-    class="js-add-stage-button stage-nav-item ml-2 mb-1 rounded d-flex justify-content-center border-width-1px"
+    class="js-add-stage-button stage-nav-item mb-1 rounded d-flex justify-content-center border-width-1px"
     @click.prevent="$emit('showform')"
   >
     {{ s__('CustomCycleAnalytics|Add a stage') }}

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -84,6 +84,7 @@ export default {
       'durationChartMedianData',
       'activeStages',
       'selectedProjectIds',
+      'enableCustomOrdering',
     ]),
     shouldRenderEmptyState() {
       return !this.selectedGroup;
@@ -134,6 +135,9 @@ export default {
         created_before: toYmd(this.endDate),
       };
     },
+    stageCount() {
+      return this.activeStages.length;
+    },
   },
   mounted() {
     this.setFeatureFlags({
@@ -162,6 +166,7 @@ export default {
       'clearCustomStageFormErrors',
       'updateStage',
       'setTasksByTypeFilters',
+      'reorderStage',
     ]),
     onGroupSelect(group) {
       this.setSelectedGroup(group);
@@ -194,6 +199,9 @@ export default {
     onDurationStageSelect(stages) {
       this.updateSelectedDurationChartStages(stages);
     },
+    onStageReorder(data) {
+      this.reorderStage(data);
+    },
   },
   multiProjectSelect: true,
   dateOptions: [7, 30, 90],
@@ -281,6 +289,7 @@ export default {
           <summary-table class="js-summary-table" :items="summary" />
           <stage-table
             v-if="selectedStage"
+            :key="stageCount"
             class="js-stage-table"
             :current-stage="selectedStage"
             :stages="activeStages"
@@ -297,6 +306,7 @@ export default {
             :no-data-svg-path="noDataSvgPath"
             :no-access-svg-path="noAccessSvgPath"
             :can-edit-stages="hasCustomizableCycleAnalytics"
+            :custom-ordering="enableCustomOrdering"
             @clearCustomStageFormErrors="clearCustomStageFormErrors"
             @selectStage="onStageSelect"
             @editStage="onShowEditStageForm"
@@ -305,6 +315,7 @@ export default {
             @removeStage="onRemoveStage"
             @createStage="onCreateCustomStage"
             @updateStage="onUpdateCustomStage"
+            @reorderStage="onStageReorder"
           />
         </div>
       </div>

ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form.vue

@@ -9,6 +9,7 @@ import {
   GlDropdown,
   GlDropdownHeader,
   GlDropdownItem,
+  GlSprintf,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
@@ -64,6 +65,7 @@ export default {
     GlDropdown,
     GlDropdownHeader,
     GlDropdownItem,
+    GlSprintf,
   },
   props: {
     events: {
@@ -390,5 +392,19 @@ export default {
         {{ saveStageText }}
       </button>
     </div>
+
+    <div class="mt-2">
+      <gl-sprintf
+        :message="
+          __(
+            '%{strongStart}Note:%{strongEnd} Once a custom stage has been added you can re-order stages by dragging them into the desired position.',
+          )
+        "
+      >
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+      </gl-sprintf>
+    </div>
   </form>
 </template>

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_card_list_item.vue

@@ -24,7 +24,7 @@ export default {
 <template>
   <div
     :class="[isActive ? activeClass : inactiveClass]"
-    class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-width-1px border-style-solid"
+    class="stage-nav-item d-flex px-4 m-0 mb-1 rounded border-width-1px border-style-solid"
   >
     <slot></slot>
   </div>

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_nav_item.vue

@@ -36,6 +36,12 @@ export default {
       default: false,
       required: false,
     },
+    id: {
+      // The IDs of stages are strings until custom stages have been added.
+      // Only at this point the IDs become numbers, so we have to allow both.
+      type: [String, Number],
+      required: true,
+    },
   },
   data() {
     return {
@@ -88,7 +94,12 @@ export default {
 </script>
 
 <template>
-  <li @click="handleSelectStage" @mouseover="handleHover(true)" @mouseleave="handleHover()">
+  <li
+    :data-id="id"
+    @click="handleSelectStage"
+    @mouseover="handleHover(true)"
+    @mouseleave="handleHover()"
+  >
     <stage-card-list-item
       :is-active="isActive"
       :can-edit="editable"

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_table.vue

 <script>
 import { mapState } from 'vuex';
+import Sortable from 'sortablejs';
 import { GlTooltipDirective, GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import StageNavItem from './stage_nav_item.vue';
@@ -8,6 +9,8 @@ import StageTableHeader from './stage_table_header.vue';
 import AddStageButton from './add_stage_button.vue';
 import CustomStageForm from './custom_stage_form.vue';
 import { STAGE_ACTIONS } from '../constants';
+import { NO_DRAG_CLASS } from '../../shared/constants';
+import sortableDefaultOptions from '../../shared/mixins/sortable_default_options';
 
 export default {
   name: 'StageTable',
@@ -85,6 +88,16 @@ export default {
       type: Boolean,
       required: true,
     },
+    customOrdering: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    errorSavingStageOrder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -106,6 +119,12 @@ export default {
     customStageFormActive() {
       return this.isCreatingCustomStage;
     },
+    allowCustomOrdering() {
+      return this.customOrdering && !this.errorSavingStageOrder;
+    },
+    manualOrderingClass() {
+      return this.allowCustomOrdering ? 'js-manual-ordering' : '';
+    },
     stageHeaders() {
       return [
         {
@@ -137,6 +156,23 @@ export default {
   },
   mounted() {
     this.$set(this, 'stageNavHeight', this.$refs.stageNav.clientHeight);
+
+    if (this.allowCustomOrdering) {
+      const options = Object.assign({}, sortableDefaultOptions(), {
+        onUpdate: event => {
+          const el = event.item;
+
+          const { previousElementSibling, nextElementSibling } = el;
+
+          const { id } = el.dataset;
+          const moveAfterId = previousElementSibling?.dataset?.id || null;
+          const moveBeforeId = nextElementSibling?.dataset?.id || null;
+
+          this.$emit('reorderStage', { id, moveAfterId, moveBeforeId });
+        },
+      });
+      this.sortable = Sortable.create(this.$refs.list, options);
+    }
   },
   methods: {
     medianValue(id) {
@@ -144,6 +180,7 @@ export default {
     },
   },
   STAGE_ACTIONS,
+  noDragClass: NO_DRAG_CLASS,
 };
 </script>
 <template>
@@ -164,10 +201,11 @@ export default {
         </nav>
       </div>
       <div class="stage-panel-body">
-        <nav ref="stageNav" class="stage-nav">
-          <ul>
+        <nav ref="stageNav" class="stage-nav pl-2">
+          <ul ref="list" :class="manualOrderingClass">
             <stage-nav-item
               v-for="stage in stages"
+              :id="stage.id"
               :key="`ca-stage-title-${stage.title}`"
               :title="stage.title"
               :value="medianValue(stage.id)"
@@ -181,6 +219,7 @@ export default {
             />
             <add-stage-button
               v-if="canEditStages"
+              :class="$options.noDragClass"
               :active="customStageFormActive"
               @showform="$emit('showAddStageForm')"
             />

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

@@ -597,3 +597,30 @@ export const initializeCycleAnalytics = ({ dispatch, commit }, initialData = {})
 
   return dispatch('initializeCycleAnalyticsSuccess');
 };
+
+export const requestReorderStage = ({ commit }) => commit(types.REQUEST_REORDER_STAGE);
+
+export const receiveReorderStageSuccess = ({ commit }) =>
+  commit(types.RECEIVE_REORDER_STAGE_SUCCESS);
+
+export const receiveReorderStageError = ({ commit }) => {
+  commit(types.RECEIVE_REORDER_STAGE_ERROR);
+  createFlash(__('There was an error updating the stage order. Please try reloading the page.'));
+};
+
+export const reorderStage = ({ dispatch, state }, initialData) => {
+  dispatch('requestReorderStage');
+
+  const {
+    selectedGroup: { fullPath },
+  } = state;
+  const { id, moveAfterId, moveBeforeId } = initialData;
+
+  const params = moveAfterId ? { move_after_id: moveAfterId } : { move_before_id: moveBeforeId };
+
+  return Api.cycleAnalyticsUpdateStage(id, fullPath, params)
+    .then(({ data }) => dispatch('receiveReorderStageSuccess', data))
+    .catch(({ response: { status = 400, data: responseData } = {} }) =>
+      dispatch('receiveReorderStageError', { status, responseData }),
+    );
+};

ee/app/assets/javascripts/analytics/cycle_analytics/store/getters.js

 import dateFormat from 'dateformat';
+import { isNumber } from 'lodash';
 import httpStatus from '~/lib/utils/http_status';
 import { dateFormats } from '../../shared/constants';
 import { getDurationChartData, getDurationChartMedianData, getTasksByTypeData } from '../utils';
@@ -53,3 +54,6 @@ const filterStagesByHiddenStatus = (stages = [], isHidden = true) =>
 
 export const hiddenStages = ({ stages }) => filterStagesByHiddenStatus(stages);
 export const activeStages = ({ stages }) => filterStagesByHiddenStatus(stages, false);
+
+export const enableCustomOrdering = ({ stages, errorSavingStageOrder }) =>
+  stages.some(stage => isNumber(stage.id)) && !errorSavingStageOrder;

ee/app/assets/javascripts/analytics/cycle_analytics/store/mutation_types.js

@@ -70,3 +70,7 @@ export const SET_TASKS_BY_TYPE_FILTERS = 'SET_TASKS_BY_TYPE_FILTERS';
 
 export const INITIALIZE_CYCLE_ANALYTICS = 'INITIALIZE_CYCLE_ANALYTICS';
 export const INITIALIZE_CYCLE_ANALYTICS_SUCCESS = 'INITIALIZE_CYCLE_ANALYTICS_SUCCESS';
+
+export const REQUEST_REORDER_STAGE = 'REQUEST_REORDER_STAGE';
+export const RECEIVE_REORDER_STAGE_SUCCESS = 'RECEIVE_REORDER_STAGE_SUCCESS';
+export const RECEIVE_REORDER_STAGE_ERROR = 'RECEIVE_REORDER_STAGE_ERROR';

ee/app/assets/javascripts/analytics/cycle_analytics/store/mutations.js

@@ -261,4 +261,16 @@ export default {
   [types.INITIALIZE_CYCLE_ANALYTICS_SUCCESS](state) {
     state.isLoading = false;
   },
+  [types.REQUEST_REORDER_STAGE](state) {
+    state.isSavingStageOrder = true;
+    state.errorSavingStageOrder = false;
+  },
+  [types.RECEIVE_REORDER_STAGE_SUCCESS](state) {
+    state.isSavingStageOrder = false;
+    state.errorSavingStageOrder = false;
+  },
+  [types.RECEIVE_REORDER_STAGE_ERROR](state) {
+    state.isSavingStageOrder = false;
+    state.errorSavingStageOrder = true;
+  },
 };

ee/app/assets/javascripts/analytics/cycle_analytics/store/state.js

@@ -18,6 +18,8 @@ export default () => ({
   isSavingCustomStage: false,
   isCreatingCustomStage: false,
   isEditingCustomStage: false,
+  isSavingStageOrder: false,
+  errorSavingStageOrder: false,
 
   selectedGroup: null,
   selectedProjects: [],

ee/app/assets/javascripts/analytics/shared/constants.js

@@ -19,3 +19,5 @@ export const LAST_ACTIVITY_AT = 'last_activity_at';
 export const DATE_RANGE_LIMIT = 180;
 
 export const OFFSET_DATE_BY_ONE = 1;
+
+export const NO_DRAG_CLASS = 'no-drag';

ee/app/assets/javascripts/analytics/shared/mixins/sortable_default_options.js

+/* global DocumentTouch */
+
+import sortableConfig from 'ee_else_ce/sortable/sortable_config';
+import { NO_DRAG_CLASS } from '../constants';
+
+export default () => {
+  const touchEnabled =
+    'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
+
+  return Object.assign({}, sortableConfig, {
+    fallbackOnBody: false,
+    group: {
+      name: 'stages',
+    },
+    dataIdAttr: 'data-id',
+    dragClass: 'sortable-drag',
+    filter: `.${NO_DRAG_CLASS}`,
+    delay: touchEnabled ? 100 : 0,
+    scrollSensitivity: touchEnabled ? 60 : 100,
+    scrollSpeed: 20,
+    fallbackTolerance: 1,
+    onMove(e) {
+      return !e.related.classList.contains(NO_DRAG_CLASS);
+    },
+  });
+};

ee/app/assets/stylesheets/pages/cycle_analytics.scss

@@ -27,3 +27,12 @@
     }
   }
 }
+
+// This can be refactored once the offical design implementation is complete
+// https://gitlab.com/gitlab-org/gitlab/-/issues/211796
+.sortable-drag {
+  border-radius: 0.25rem;
+  background-color: $white;
+  box-shadow: 0 0 0.25rem $gl-btn-active-background,
+    0 0.25rem 0.75rem $gl-btn-active-background;
+}

ee/changelogs/unreleased/196698-value-stream-analytics-custom-ordering-of-stages.yml

+---
+title: Allow Value Stream Analytics custom stages to be manually ordered
+merge_request: 26074
+author:
+type: changed

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -2,6 +2,8 @@
 require 'spec_helper'
 
 describe 'Group Value Stream Analytics', :js do
+  include DragTo
+
   let!(:user) { create(:user) }
   let!(:group) { create(:group, name: "CA-test-group") }
   let!(:group2) { create(:group, name: "CA-bad-test-group") }
@@ -427,11 +429,86 @@ describe 'Group Value Stream Analytics', :js do
       page.find("[name=#{field}] .dropdown-menu").all('.dropdown-item')[index].click
     end
 
+    def confirm_stage_order(stages)
+      page.within('.stage-nav>ul') do
+        stages.each_with_index do |stage, index|
+          expect(find("li:nth-child(#{index + 1})")).to have_content(stage)
+        end
+      end
+    end
+
+    def drag_from_index_to_index(from, to)
+      drag_to(selector: '.stage-nav>ul',
+        from_index: from,
+        to_index: to)
+    end
+
+    default_stage_order = %w[Issue Plan Code Test Review Staging Total].freeze
+    default_custom_stage_order = %w[Issue Plan Code Test Review Staging Total Cool\ beans].freeze
+    stages_near_middle_swapped = %w[Issue Plan Test Code Review Staging Total Cool\ beans].freeze
+    stage_dragged_to_top = %w[Review Issue Plan Code Test Staging Total Cool\ beans].freeze
+    stage_dragged_to_bottom = %w[Issue Plan Code Test Staging Total Cool\ beans Review].freeze
+
+    shared_examples 'manual ordering disabled' do
+      it 'does not allow stages to be draggable', :js do
+        confirm_stage_order(default_stage_order)
+
+        drag_from_index_to_index(0, 1)
+
+        confirm_stage_order(default_stage_order)
+      end
+    end
+
     context 'enabled' do
       before do
         select_group
       end
 
+      context 'Manual ordering' do
+        context 'with only default stages' do
+          it_behaves_like 'manual ordering disabled'
+        end
+
+        context 'with at least one custom stage' do
+          shared_examples 'draggable stage' do |original_order, updated_order, start_index, end_index,|
+            before do
+              page.driver.browser.manage.window.resize_to(1650, 1150)
+
+              create_custom_stage
+              select_group
+            end
+
+            it 'allows a stage to be dragged' do
+              confirm_stage_order(original_order)
+
+              drag_from_index_to_index(start_index, end_index)
+
+              confirm_stage_order(updated_order)
+            end
+
+            it 'persists the order when a group is selected' do
+              drag_from_index_to_index(start_index, end_index)
+
+              select_group
+
+              confirm_stage_order(updated_order)
+            end
+          end
+
+          context 'dragging a stage to the top', :js do
+            it_behaves_like 'draggable stage', default_custom_stage_order, stage_dragged_to_top, 4, 0
+          end
+
+          context 'dragging a stage to the bottom', :js do
+            it_behaves_like 'draggable stage', default_custom_stage_order, stage_dragged_to_bottom, 4, 7
+          end
+
+          context 'dragging stages in the middle', :js do
+            it_behaves_like 'draggable stage', default_custom_stage_order, stages_near_middle_swapped, 2, 3
+          end
+        end
+      end
+
       context 'Add a stage button' do
         it 'is visible' do
           expect(page).to have_selector(add_stage_button, visible: true)
@@ -798,6 +875,8 @@ describe 'Group Value Stream Analytics', :js do
           expect(page).to have_selector('.js-add-stage-button', visible: false)
         end
       end
+
+      it_behaves_like 'manual ordering disabled'
     end
   end
 end

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/custom_stage_form_spec.js.snap

@@ -7,7 +7,7 @@ exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true display
 `;
 
 exports[`CustomStageForm Start event with events does not select events with canBeStartEvent=false for the start events dropdown 1`] = `
-"<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__257\\">
+"<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__277\\">
   <option value=\\"\\">Select start event</option>
   <option value=\\"issue_created\\">Issue created</option>
   <option value=\\"issue_first_mentioned_in_commit\\">Issue first mentioned in a commit</option>
@@ -30,7 +30,7 @@ exports[`CustomStageForm Start event with events does not select events with can
 `;
 
 exports[`CustomStageForm Start event with events selects events with canBeStartEvent=true for the start events dropdown 1`] = `
-"<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__217\\">
+"<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__237\\">
   <option value=\\"\\">Select start event</option>
   <option value=\\"issue_created\\">Issue created</option>
   <option value=\\"issue_first_mentioned_in_commit\\">Issue first mentioned in a commit</option>

ee/spec/frontend/analytics/cycle_analytics/components/custom_stage_form_spec.js

@@ -115,6 +115,14 @@ describe('CustomStageForm', () => {
     });
   });
 
+  describe('Helper text', () => {
+    it('displays the manual ordering helper text', () => {
+      expect(wrapper.text()).toContain(
+        'Note: Once a custom stage has been added you can re-order stages by dragging them into the desired position.',
+      );
+    });
+  });
+
   describe('Name', () => {
     describe('with a reserved name', () => {
       beforeEach(() => {

ee/spec/frontend/analytics/cycle_analytics/components/stage_nav_item_spec.js

@@ -7,10 +7,12 @@ import { approximateDuration } from '~/lib/utils/datetime_utility';
 describe('StageNavItem', () => {
   const title = 'Rad stage';
   const median = 50;
+  const id = 1;
 
   function createComponent({ props = {}, opts = {} } = {}) {
     return shallowMount(StageNavItem, {
       propsData: {
+        id,
         title,
         value: median,
         ...props,

ee/spec/frontend/analytics/cycle_analytics/components/stage_table_spec.js

@@ -188,4 +188,36 @@ describe('StageTable', () => {
       expect(wrapper.html()).toContain('Add a stage');
     });
   });
+
+  describe('customOrdering = true', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        customOrdering: true,
+      });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders the manual-ordering class', () => {
+      expect(wrapper.find('.js-manual-ordering').exists()).toBeTruthy();
+    });
+  });
+
+  describe('customOrdering = false', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        customOrdering: false,
+      });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('does not render the manual-ordering class', () => {
+      expect(wrapper.find('.js-manual-ordering').exists()).toBeFalsy();
+    });
+  });
 });

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -1620,4 +1620,86 @@ describe('Cycle analytics actions', () => {
           }));
     });
   });
+
+  describe('reorderStage', () => {
+    const stageId = 'cool-stage';
+    const payload = { id: stageId, move_after_id: '2', move_before_id: '8' };
+
+    beforeEach(() => {
+      state = { selectedGroup };
+    });
+
+    describe('with no errors', () => {
+      beforeEach(() => {
+        mock.onPut(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.OK);
+      });
+
+      it(`dispatches the ${types.REQUEST_REORDER_STAGE} and ${types.RECEIVE_REORDER_STAGE_SUCCESS} actions`, done => {
+        testAction(
+          actions.reorderStage,
+          payload,
+          state,
+          [],
+          [{ type: 'requestReorderStage' }, { type: 'receiveReorderStageSuccess' }],
+          done,
+        );
+      });
+    });
+
+    describe('with errors', () => {
+      beforeEach(() => {
+        mock.onPut(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.NOT_FOUND);
+      });
+
+      it(`dispatches the ${types.REQUEST_REORDER_STAGE} and ${types.RECEIVE_REORDER_STAGE_ERROR} actions `, done => {
+        testAction(
+          actions.reorderStage,
+          payload,
+          state,
+          [],
+          [
+            { type: 'requestReorderStage' },
+            { type: 'receiveReorderStageError', payload: { status: httpStatusCodes.NOT_FOUND } },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('receiveReorderStageError', () => {
+    beforeEach(() => {
+      setFixtures('<div class="flash-container"></div>');
+    });
+    it(`commits the ${types.RECEIVE_REORDER_STAGE_ERROR} mutation and flashes an error`, () => {
+      testAction(
+        actions.receiveReorderStageError,
+        null,
+        state,
+        [
+          {
+            type: types.RECEIVE_REORDER_STAGE_ERROR,
+          },
+        ],
+        [],
+      );
+
+      shouldFlashAMessage(
+        'There was an error updating the stage order. Please try reloading the page.',
+      );
+    });
+  });
+
+  describe('receiveReorderStageSuccess', () => {
+    it(`commits the ${types.RECEIVE_REORDER_STAGE_SUCCESS} mutation`, done => {
+      testAction(
+        actions.receiveReorderStageSuccess,
+        null,
+        state,
+        [{ type: types.RECEIVE_REORDER_STAGE_SUCCESS }],
+        [],
+        done,
+      );
+    });
+  });
 });

ee/spec/frontend/analytics/cycle_analytics/store/getters_spec.js

@@ -161,4 +161,42 @@ describe('Cycle analytics getters', () => {
       expect(getters[func]({ stages: [] })).toEqual([]);
     });
   });
+
+  describe('enableCustomOrdering', () => {
+    describe('with no errors saving the stage order', () => {
+      beforeEach(() => {
+        state = {
+          errorSavingStageOrder: false,
+        };
+      });
+
+      it('returns true when stages have numeric IDs', () => {
+        state.stages = [{ id: 1 }, { id: 2 }];
+        expect(getters.enableCustomOrdering(state)).toEqual(true);
+      });
+
+      it('returns false when stages have string based IDs', () => {
+        state.stages = [{ id: 'one' }, { id: 'two' }];
+        expect(getters.enableCustomOrdering(state)).toEqual(false);
+      });
+    });
+
+    describe('with errors saving the stage order', () => {
+      beforeEach(() => {
+        state = {
+          errorSavingStageOrder: true,
+        };
+      });
+
+      it('returns false when stages have numeric IDs', () => {
+        state.stages = [{ id: 1 }, { id: 2 }];
+        expect(getters.enableCustomOrdering(state)).toEqual(false);
+      });
+
+      it('returns false when stages have string based IDs', () => {
+        state.stages = [{ id: 'one' }, { id: 'two' }];
+        expect(getters.enableCustomOrdering(state)).toEqual(false);
+      });
+    });
+  });
 });

locale/gitlab.pot

@@ -443,6 +443,9 @@ msgstr ""
 msgid "%{state} epics"
 msgstr ""
 
+msgid "%{strongStart}Note:%{strongEnd} Once a custom stage has been added you can re-order stages by dragging them into the desired position."
+msgstr ""
+
 msgid "%{strong_start}%{branch_count}%{strong_end} Branch"
 msgid_plural "%{strong_start}%{branch_count}%{strong_end} Branches"
 msgstr[0] ""
@@ -20170,6 +20173,9 @@ msgstr ""
 msgid "There was an error updating the dashboard, branch named: %{branch} already exists."
 msgstr ""
 
+msgid "There was an error updating the stage order. Please try reloading the page."
+msgstr ""
+
 msgid "There was an error when reseting email token."
 msgstr ""