Added add stage button

Added new button to launch the new
stage form for customisable cycle
analytics.

Move add stage button to vue component

Added basic test for add stage button

Move css to bootstrap classes

Removes scss styling that can be applied
via bootstrap classes and adds the relevant
classes to html elements

Added feature tests for add stage button

Moved add stage functionality to ee mixin

Created addStageMixin for the add stage
functionality needed in EE. Added a stub
mixin to the CE dir.

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; }

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

+<script>
+export default {
+  props: {
+    active: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    activeClass() {
+      return 'active font-weight-bold border-style-solid border-color-blue-300';
+    },
+    inactiveClass() {
+      return 'bg-transparent border-style-dashed border-color-default';
+    },
+  },
+};
+</script>
+<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"
+    @click="$emit('showform')"
+  >
+    {{ s__('CustomCycleAnalytics|Add a stage') }}
+  </li>
+</template>

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

+<template>
+  <div class="ml-3">
+    <h2>{{ s__('New stage') }}</h2>
+  </div>
+</template>

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

+export default {
+  data() {
+    return {
+      isCustomStageForm: false,
+    };
+  },
+  methods: {
+    showAddStageForm() {
+      if (this.store) {
+        this.store.deactivateAllStages();
+      }
+      this.isCustomStageForm = true;
+    },
+    hideAddStageForm() {
+      this.isCustomStageForm = 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
@@ -63,13 +64,17 @@
             %nav.stage-nav
               %ul
                 %stage-nav-item{ "v-for" => "stage in state.stages", ":key" => '`ca-stage-title-${stage.title}`', '@select' => 'selectStage(stage)', ":title" => "stage.title", ":is-user-allowed" => "stage.isUserAllowed", ":value" => "stage.value", ":is-active" => "stage.active" }
+                - if customizable_cycle_analytics
+                  %add-stage-button{ '@showform' => 'showAddStageForm', ":active" => 'isCustomStageForm' }
             .section.stage-events
               %template{ "v-if" => "isLoadingStage" }
                 = icon("spinner spin")
               %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
                 = render partial: "projects/cycle_analytics/no_access"
               %template{ "v-else" => true }
-                %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
+                %template{ "v-if" => "isEmptyStage && !isLoadingStage && !isCustomStageForm" }
                   = render partial: "projects/cycle_analytics/empty_stage"
-                %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
+                %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage && !isCustomStageForm" }
                   %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
+                - if customizable_cycle_analytics
+                  %custom-stage-form{ "v-if" => "isCustomStageForm" }

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

@@ -41,4 +41,55 @@ describe 'Group Cycle Analytics', :js do
       expect(page).to have_selector('.js-timeframe-filter', visible: true)
     end
   end
+
+  describe 'Customizable cycle analytics', :js do
+    context 'enabled' do
+      before do
+        dropdown = page.find('.dropdown-groups')
+        dropdown.click
+        dropdown.find('a').click
+      end
+
+      context 'Add a stage button' do
+        it 'is visible' do
+          expect(page).to have_selector('.js-add-stage-button', visible: true)
+          expect(page).to have_text('Add a stage')
+        end
+
+        it 'becomes active when clicked ' do
+          btn = page.find('.js-add-stage-button')
+
+          expect(btn[:class]).not_to include('active')
+
+          btn.click
+
+          expect(btn[:class]).to include('active')
+        end
+
+        it 'displays the custom stage form when clicked' do
+          expect(page).not_to have_text('New stage')
+
+          page.find('.js-add-stage-button').click
+
+          expect(page).to have_text('New stage')
+        end
+      end
+    end
+
+    context 'not enabled' do
+      before do
+        stub_feature_flags(customizable_cycle_analytics: false)
+
+        dropdown = page.find('.dropdown-groups')
+        dropdown.click
+        dropdown.find('a').click
+      end
+
+      context 'Add a stage button' do
+        it 'is not visible' do
+          expect(page).to have_selector('.js-add-stage-button', visible: false)
+        end
+      end
+    end
+  end
 end

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

+import { shallowMount } from '@vue/test-utils';
+import AddStageButton from 'ee/analytics/cycle_analytics/components/add_stage_button.vue';
+
+describe('AddStageButton', () => {
+  const active = false;
+
+  function createComponent(props) {
+    return shallowMount(AddStageButton, {
+      propsData: {
+        active,
+        ...props,
+      },
+    });
+  }
+
+  let wrapper = null;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('is not active', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+    it('emits the `showform` event when clicked', () => {
+      wrapper = createComponent();
+      expect(wrapper.emitted().showform).toBeUndefined();
+      wrapper.trigger('click');
+      expect(wrapper.emitted().showform.length).toBe(1);
+    });
+
+    it('does not have the active class', () => {
+      expect(wrapper.classes('active')).toBe(false);
+    });
+  });
+
+  describe('is active', () => {
+    it('has the active class when active=true', () => {
+      wrapper = createComponent({ active: true });
+      expect(wrapper.classes('active')).toBe(true);
+    });
+  });
+});

locale/gitlab.pot

@@ -4469,6 +4469,9 @@ msgstr ""
 msgid "Custom project templates have not been set up for groups that you are a member of. They are enabled from a group’s settings page. Contact your group’s Owner or Maintainer to setup custom project templates."
 msgstr ""
 
+msgid "CustomCycleAnalytics|Add a stage"
+msgstr ""
+
 msgid "Customize colors"
 msgstr ""
 
@@ -10067,6 +10070,9 @@ msgstr ""
 msgid "New snippet"
 msgstr ""
 
+msgid "New stage"
+msgstr ""
+
 msgid "New subgroup"
 msgstr ""