Merge branch '13076-add-stage-button' into 'master'

CE Backport: Customisable Cycle Analytics - Add stage button

See merge request gitlab-org/gitlab-ce!31791

app/assets/javascripts/analytics/cycle_analytics/mixins/add_stage_mixin.js

+export default {
+  data() {
+    return {
+      isCustomStageForm: false,
+    };
+  },
+  methods: {
+    showAddStageForm: () => {},
+    hideAddStageForm: () => {},
+  },
+};

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

@@ -23,7 +23,10 @@ export default {
 </script>
 
 <template>
-  <div :class="{ active: isActive }" class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded">
+  <div
+    :class="{ active: isActive }"
+    class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-color-default border-style-solid border-width-1px"
+  >
     <slot></slot>
     <div v-if="canEdit" class="dropdown">
       <gl-button

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import Cookies from 'js-cookie';
 import { GlEmptyState } from '@gitlab/ui';
 import filterMixins from 'ee_else_ce/analytics/cycle_analytics/mixins/filter_mixins';
+import addStageMixin from 'ee_else_ce/analytics/cycle_analytics/mixins/add_stage_mixin';
 import Flash from '../flash';
 import { __ } from '~/locale';
 import Translate from '../vue_shared/translate';
@@ -43,8 +44,12 @@ export default () => {
       DateRangeDropdown: () =>
         import('ee_component/analytics/shared/components/date_range_dropdown.vue'),
       'stage-nav-item': stageNavItem,
+      CustomStageForm: () =>
+        import('ee_component/analytics/cycle_analytics/components/custom_stage_form.vue'),
+      AddStageButton: () =>
+        import('ee_component/analytics/cycle_analytics/components/add_stage_button.vue'),
     },
-    mixins: [filterMixins],
+    mixins: [filterMixins, addStageMixin],
     data() {
       return {
         store: CycleAnalyticsStore,
@@ -124,6 +129,7 @@ export default () => {
           return;
         }
 
+        this.hideAddStageForm();
         this.isLoadingStage = true;
         this.store.setStageEvents([], stage);
         this.store.setActiveStage(stage);

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -41,7 +41,6 @@
       width: 20%;
     }
 
-
     .fa {
       color: $cycle-analytics-light-gray;
 
@@ -146,7 +145,6 @@
 
     .stage-nav-item {
       line-height: 65px;
-      border: 1px solid $border-color;
 
       &.active {
         background: $blue-50;

app/assets/stylesheets/utilities.scss

@@ -15,3 +15,9 @@
     font-size: $size;
   }
 }
+
+.border-width-1px { border-width: 1px; }
+.border-style-dashed { border-style: dashed; }
+.border-style-solid { border-style: solid; }
+.border-color-blue-300 { border-color: $blue-300; }
+.border-color-default { border-color: $border-color; }