Migrate add customizable stage button

Migrates the add stage button and custom form
placeholder for customizable_cycle_analytics
to the new analytics space.

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

@@ -20,7 +20,7 @@ export default {
   <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"
-    @click="$emit('showform')"
+    @click.prevent="$emit('showform')"
   >
     {{ s__('CustomCycleAnalytics|Add a stage') }}
   </li>

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

@@ -46,6 +46,7 @@ export default {
       'isLoading',
       'isLoadingStage',
       'isEmptyStage',
+      'isAddingCustomStage',
       'selectedGroup',
       'selectedProjectIds',
       'selectedStageName',
@@ -53,6 +54,7 @@ export default {
       'stages',
       'summary',
       'dataTimeframe',
+      'hasCustomizableCycleAnalytics',
     ]),
     ...mapGetters(['currentStage', 'defaultStage']),
     shouldRenderEmptyState() {
@@ -69,6 +71,8 @@ export default {
       'setSelectedTimeframe',
       'fetchStageData',
       'setSelectedStageName',
+      'showCustomStageForm',
+      'hideCustomStageForm',
     ]),
     onGroupSelect(group) {
       this.setCycleAnalyticsDataEndpoint(group.path);
@@ -85,10 +89,14 @@ export default {
       this.fetchCycleAnalyticsData();
     },
     onStageSelect(stage) {
+      this.hideCustomStageForm();
       this.setSelectedStageName(stage.name);
       this.setStageDataEndpoint(this.currentStage.slug);
       this.fetchStageData(this.currentStage.name);
     },
+    onShowAddStageForm() {
+      this.showCustomStageForm();
+    },
   },
 };
 </script>
@@ -148,10 +156,13 @@ export default {
         :stages="stages"
         :is-loading-stage="isLoadingStage"
         :is-empty-stage="isEmptyStage"
+        :is-adding-custom-stage="isAddingCustomStage"
         :events="events"
         :no-data-svg-path="noDataSvgPath"
         :no-access-svg-path="noAccessSvgPath"
+        :can-edit-stages="hasCustomizableCycleAnalytics"
         @selectStage="onStageSelect"
+        @showAddStageForm="onShowAddStageForm"
       />
     </div>
   </div>

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

@@ -7,6 +7,8 @@ import iconLock from 'icons/_icon_lock.svg';
 import StageNavItem from './stage_nav_item.vue';
 import StageEventList from './stage_event_list.vue';
 import StageTableHeader from './stage_table_header.vue';
+import AddStageButton from './add_stage_button.vue';
+import CustomStageForm from './custom_stage_form.vue';
 
 export default {
   name: 'StageTable',
@@ -17,6 +19,8 @@ export default {
     StageEventList,
     StageNavItem,
     StageTableHeader,
+    AddStageButton,
+    CustomStageForm,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -38,6 +42,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    isAddingCustomStage: {
+      type: Boolean,
+      required: true,
+    },
     events: {
       type: Array,
       required: true,
@@ -50,6 +58,10 @@ export default {
       type: String,
       required: true,
     },
+    canEditStages: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     iconNoData() {
@@ -96,6 +108,9 @@ export default {
     selectStage(stage) {
       this.$emit('selectStage', stage);
     },
+    showAddStageForm() {
+      this.$emit('showAddStageForm');
+    },
   },
 };
 </script>
@@ -123,20 +138,26 @@ export default {
               :key="`ca-stage-title-${stage.title}`"
               :title="stage.title"
               :value="stage.value"
-              :is-active="stage.name === currentStage.name"
+              :is-active="!isAddingCustomStage && stage.name === currentStage.name"
               :is-user-allowed="stage.isUserAllowed"
               @select="selectStage(stage)"
             />
+            <add-stage-button
+              if="canEditStages"
+              :active="isAddingCustomStage"
+              @showform="showAddStageForm"
+            />
           </ul>
         </nav>
         <div class="section stage-events">
           <gl-loading-icon v-if="isLoadingStage" class="mt-4" size="md" />
           <gl-empty-state
-            v-if="currentStage && !currentStage.isUserAllowed"
+            v-else-if="currentStage && !currentStage.isUserAllowed"
             :title="__('You need permission.')"
             :description="__('Want to see the data? Please ask an administrator for access.')"
             :svg-path="noAccessSvgPath"
           />
+          <custom-stage-form v-else-if="isAddingCustomStage" />
           <template v-else>
             <stage-event-list v-if="shouldDisplayStage" :stage="currentStage" :events="events" />
             <gl-empty-state

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

@@ -68,3 +68,11 @@ export const fetchCycleAnalyticsData = ({ state, dispatch }) => {
     .then(({ data }) => dispatch('receiveCycleAnalyticsDataSuccess', data))
     .catch(error => dispatch('receiveCycleAnalyticsDataError', error));
 };
+
+export const showCustomStageForm = ({ commit }) => {
+  commit(types.SHOW_CUSTOM_STAGE_FORM);
+};
+
+export const hideCustomStageForm = ({ commit }) => {
+  commit(types.HIDE_CUSTOM_STAGE_FORM);
+};

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

@@ -13,3 +13,6 @@ export const RECEIVE_CYCLE_ANALYTICS_DATA_ERROR = 'RECEIVE_CYCLE_ANALYTICS_DATA_
 export const REQUEST_STAGE_DATA = 'REQUEST_STAGE_DATA';
 export const RECEIVE_STAGE_DATA_SUCCESS = 'RECEIVE_STAGE_DATA_SUCCESS';
 export const RECEIVE_STAGE_DATA_ERROR = 'RECEIVE_STAGE_DATA_ERROR';
+
+export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM';
+export const HIDE_CUSTOM_STAGE_FORM = 'HIDE_CUSTOM_STAGE_FORM';

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

@@ -25,6 +25,7 @@ export default {
   },
   [types.REQUEST_CYCLE_ANALYTICS_DATA](state) {
     state.isLoading = true;
+    state.isAddingCustomStage = false;
   },
   [types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, data) {
     state.summary = data.summary.map(item => ({
@@ -65,4 +66,14 @@ export default {
     state.isEmptyStage = true;
     state.isLoadingStage = false;
   },
+  [types.SHOW_CUSTOM_STAGE_FORM](state) {
+    state.isAddingCustomStage = true;
+    state.isEmptyStage = false;
+    state.isLoadingStage = false;
+  },
+  [types.HIDE_CUSTOM_STAGE_FORM](state) {
+    state.isAddingCustomStage = false;
+    state.isEmptyStage = false;
+    state.isLoadingStage = false;
+  },
 };

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

@@ -13,6 +13,8 @@ export default () => ({
 
   isEmptyStage: false,
 
+  isAddingCustomStage: false,
+
   selectedGroup: null,
   selectedProjectIds: [],
   selectedStageName: null,
@@ -20,4 +22,7 @@ export default () => ({
   events: [],
   stages: [],
   summary: [],
+
+  hasCustomizableCycleAnalytics:
+    window.gon && window.gon.features ? window.gon.features.customizableCycleAnalytics : false,
 });

ee/app/views/analytics/cycle_analytics/show.html.haml

+- page_title _("Cycle Analytics")
 - customizable_cycle_analytics = Feature.enabled?(:customizable_cycle_analytics)
 
 - if cookies[:cycle_analytics_app] == 'true'
   #js-cycle-analytics-app{ data: { "empty-state-svg-path" => image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), "no-data-svg-path" => image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), "no-access-svg-path" => image_path("illustrations/analytics/no-access.svg") } }
 - else
   .page-title-holder.d-flex.align-items-center
-    %h1.page-title= _('Cycle Analytics')
+    %h1.page-title
+      = page_title
 
   #cycle-analytics.m-0.mw-100
     .mt-3.py-2.px-3.d-flex.bg-gray-light.border-top.border-bottom.flex-column.flex-md-row.justify-content-between

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

@@ -29,8 +29,10 @@ function createComponent(props = {}, shallow = false) {
       isLoadingStage: false,
       isEmptyStage: false,
       isUserAllowed: true,
+      isAddingCustomStage: false,
       noDataSvgPath,
       noAccessSvgPath,
+      canEditStages: false,
       ...props,
     },
     stubs: {