WIP: display form shellek-explore-ca-add-stage-button

3 files changed, 33 insertions, 2 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/custom_stage_form.vue b/app/assets/javascripts/cycle_analytics/components/custom_stage_form.vue
new file mode 100644
index 00000000000..3bc74c630a7
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/custom_stage_form.vue
@@ -0,0 +1,11 @@
+<script>
+export default {
+  props: {},
+};
+</script>
+<template>
+  <div class="landing content-block">
+    <h2>{{ 'Form' }}</h2>
+    <p>{{ 'Our beautiful custom stage form' }}</p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index d4b994d4922..f155b40b8d0 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -9,6 +9,7 @@ import stageComponent from './components/stage_component.vue';
 import stageReviewComponent from './components/stage_review_component.vue';
 import stageStagingComponent from './components/stage_staging_component.vue';
 import stageTestComponent from './components/stage_test_component.vue';
+import customStageForm from './components/custom_stage_form.vue';
 import CycleAnalyticsService from './cycle_analytics_service';
 import CycleAnalyticsStore from './cycle_analytics_store';
 import { __ } from '~/locale';
@@ -32,6 +33,7 @@ export default () => {
       'stage-review-component': stageReviewComponent,
       'stage-staging-component': stageStagingComponent,
       'stage-production-component': stageComponent,
+      'custom-stage-form': customStageForm,
     },
     data() {
       const cycleAnalyticsService = new CycleAnalyticsService({
@@ -48,6 +50,7 @@ export default () => {
         startDate: 30,
         isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
         service: cycleAnalyticsService,
+        isCustomStageForm: false,
       };
     },
     computed: {
@@ -135,6 +138,20 @@ export default () => {
             this.isLoadingStage = false;
           });
       },
+      showAddStageForm() {
+        console.log('cycle_analytics_bundle::showAddStageForm', this);
+        // TODO: should these eventually be moved to actions for a vuex store
+        this.isLoadingStage = true;
+
+        // TODO: do async-y stuff if we need it?
+        // Maybe loading the data, but most likely we can bootstrap that in the form as props
+
+        // TODO: perhaps could be something more like this.activeStage('stage-name') ie loading, empty, custom form etc
+
+        // Should eventually be actions emitted to the vuex store
+        this.isCustomStageForm = true;
+        this.isLoadingStage = false;
+      },
       dismissOverviewDialog() {
         this.isOverviewDialogDismissed = true;
         Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index bedaa738284..74038202cb7 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -68,7 +68,8 @@
                   %template{ "v-else" => true }
                     %span.not-available
                       {{ __('Not available') }}
-              %li.stage-nav-item.stage-ghost
+              -# TODO: Feature flag
+              %li.stage-nav-item.stage-ghost{ '@click' => 'showAddStageForm()', }
                 {{ s__("CustomCycleAnalytics|Add a stage") }}
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
@@ -76,7 +77,9 @@
             %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
               = render partial: "no_access"
             %template{ "v-else" => true }
-              %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
+              %template{ "v-if" => "isEmptyStage && !isLoadingStage && !isCustomStageForm" }
                 = render partial: "empty_stage"
               %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
                 %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
+              -# TODO: Feature flag
+              %custom-stage-form{ "v-if" => "isCustomStageForm" }