Async import custom stage form components

Imports the files needed for the custom
stage form and adds the EE specific css.

Added stub addStageMixin

5 files changed, 28 insertions, 4 deletions

diff --git a/app/assets/javascripts/analytics/cycle_analytics/mixins/add_stage_mixin.js b/app/assets/javascripts/analytics/cycle_analytics/mixins/add_stage_mixin.js
new file mode 100644
index 00000000000..6a40f1cbc5e
--- /dev/null
+++ b/app/assets/javascripts/analytics/cycle_analytics/mixins/add_stage_mixin.js
@@ -0,0 +1,11 @@
+export default {
+  data() {
+    return {
+      isCustomStageForm: false,
+    };
+  },
+  methods: {
+    showAddStageForm: () => {},
+    hideAddStageForm: () => {},
+  },
+};
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
index d946594a069..63549596fac 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
+++ b/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
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index b3ae47af750..c9a6b10b2f3 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/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);
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index d80155a416d..e20711a193d 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/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;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 3648ec5e239..d2906ce0780 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/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; }