From 651c5dff8620df58b15265fcf3043d49af77fc05 Mon Sep 17 00:00:00 2001
From: Ezekiel Kigbo <ekigbo@gitlab.com>
Date: Mon, 5 Aug 2019 15:27:24 +1000
Subject: [PATCH 1/6] Move cycle analytics stages templates to vue

The existing stage list items are rendered
in haml, migrating them to vuejs for future
work.

Fix alignment of median value

Test for stage_nav_item.vue
---
 .../components/stage_card_list_item.vue       |  17 +++
 .../components/stage_nav_item.vue             |  50 +++++++
 .../cycle_analytics/cycle_analytics_bundle.js |   2 +
 .../stylesheets/pages/cycle_analytics.scss    |  64 +++++----
 .../projects/cycle_analytics/show.html.haml   |  30 +++--
 .../cycle_analytics/stage_nav_item_spec.js    | 124 ++++++++++++++++++
 6 files changed, 250 insertions(+), 37 deletions(-)
 create mode 100644 app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
 create mode 100644 app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
 create mode 100644 spec/frontend/cycle_analytics/stage_nav_item_spec.js

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
new file mode 100644
index 00000000000000..dbb39609cec522
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
@@ -0,0 +1,17 @@
+<script>
+export default {
+  name: 'StageCardListItem',
+  props: {
+    isActive: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="{ active: isActive }" class="stage-nav-item">
+    <slot></slot>
+  </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
new file mode 100644
index 00000000000000..5d45de2cde8a4c
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
@@ -0,0 +1,50 @@
+<script>
+import StageCardListItem from './stage_card_list_item.vue';
+
+export default {
+  name: 'StageNavItem',
+  components: {
+    StageCardListItem,
+  },
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isUserAllowed: {
+      type: Boolean,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    hasValue() {
+      return this.value && this.value.length > 0;
+    },
+  },
+};
+</script>
+
+<template>
+  <li @click="$emit('select')">
+    <stage-card-list-item :is-active="isActive">
+      <div class="stage-nav-item-cell stage-name">{{ title }}</div>
+      <div class="stage-nav-item-cell stage-median">
+        <template v-if="isUserAllowed">
+          <span v-if="hasValue">{{ value }}</span>
+          <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
+        </template>
+        <template v-else>
+          <span class="not-available">{{ __('Not available') }}</span>
+        </template>
+      </div>
+    </stage-card-list-item>
+  </li>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 671405602cc78a..b3ae47af750608 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -12,6 +12,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 stageNavItem from './components/stage_nav_item.vue';
 import CycleAnalyticsService from './cycle_analytics_service';
 import CycleAnalyticsStore from './cycle_analytics_store';
 
@@ -41,6 +42,7 @@ export default () => {
         import('ee_component/analytics/shared/components/projects_dropdown_filter.vue'),
       DateRangeDropdown: () =>
         import('ee_component/analytics/shared/components/date_range_dropdown.vue'),
+      'stage-nav-item': stageNavItem,
     },
     mixins: [filterMixins],
     data() {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 2b932d164a5c2a..0bd657bf2340c9 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -51,12 +51,12 @@
     }
 
     .stage-header {
-      width: 26%;
-      padding-left: $gl-padding;
+      width: 24%;
+      padding-left: 2 * $gl-padding;
     }
 
     .median-header {
-      width: 14%;
+      width: 16%;
     }
 
     .event-header {
@@ -67,7 +67,7 @@
     .total-time-header {
       width: 15%;
       text-align: right;
-      padding-right: $gl-padding;
+      padding-right: 2 * $gl-padding;
     }
 
     .stage-name {
@@ -153,50 +153,66 @@
     }
 
     .stage-nav-item {
+      $card-list-border-radius: 4px;
+      // $card-list-border-radius: 2px;
+      $card-list-active-bg: $blue-50;
+      $card-list-active-border-color: $blue-300;
+      $card-list-active-shadow: $blue-500;
+
       display: flex;
       line-height: 65px;
-      border-top: 1px solid transparent;
-      border-bottom: 1px solid transparent;
-      border-right: 1px solid $border-color;
-      background-color: $gray-light;
+      border: $border-color solid 1px;
+      border-radius: $card-list-border-radius;
+      // margin: $card-list-border-radius;
+      margin: 0;
+      margin-bottom: $card-list-border-radius;
+      margin-left: 2 * $card-list-border-radius;
+      padding-left: 24px; // TODO: utility?
+
+      .stage-name { padding: 0; }
 
       &.active {
-        background-color: transparent;
-        border-right-color: transparent;
-        border-top-color: $border-color;
-        border-bottom-color: $border-color;
-        box-shadow: inset 2px 0 0 0 $blue-500;
+        /* TODO: replace with utilities */
+        background: $card-list-active-bg;
+        border-color: $card-list-active-border-color;
+        box-shadow: inset 4px 0 0 0 $card-list-active-shadow;
 
         .stage-name {
           font-weight: $gl-font-weight-bold;
+          padding: 0;
         }
       }
 
+      // > :first-child,
+      // > :last-child {
+      //   border-radius: $border-radius-width;
+      // }
+
       &:hover:not(.active) {
         background-color: $gray-lightest;
         box-shadow: inset 2px 0 0 0 $border-color;
         cursor: pointer;
       }
 
-      &:first-child {
-        border-top: 0;
-      }
+      // &:first-child {
+      //   border-top: 0;
+      // }
 
-      &:last-child {
-        border-bottom: 0;
-      }
+      // &:last-child {
+      //   border-bottom: 0;
+      // }
 
       .stage-nav-item-cell {
         &.stage-median {
           margin-left: auto;
-          margin-right: $gl-padding;
-          min-width: calc(35% - #{$gl-padding});
+          margin-right: $gl-padding * 1.5;
+          min-width: 37%;
         }
       }
 
-      .stage-name {
-        padding-left: 16px;
-      }
+      // .stage-name {
+      //   padding-left: 16px;
+      // }
 
       .stage-empty,
       .not-available {
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 59f0afd59e62fc..535e3ebfe0e4ca 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -1,3 +1,4 @@
+- use_customisable_ca = Feature.enabled?(:customisable_cycle_analytics)
 - @no_container = true
 - page_title "Cycle Analytics"
 
@@ -34,7 +35,7 @@
                       {{ n__('Last %d day', 'Last %d days', 90) }}
     .stage-panel-container
       .card.stage-panel
-        .card-header
+        .card-header.border-bottom-0
           %nav.col-headers
             %ul
               %li.stage-header
@@ -56,18 +57,21 @@
         .stage-panel-body
           %nav.stage-nav
             %ul
-              %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" }
-                .stage-nav-item-cell.stage-name
-                  {{ stage.title }}
-                .stage-nav-item-cell.stage-median
-                  %template{ "v-if" => "stage.isUserAllowed" }
-                    %span{ "v-if" => "stage.value" }
-                      {{ stage.value }}
-                    %span.stage-empty{ "v-else" => true }
-                      {{ __('Not enough data') }}
-                  %template{ "v-else" => true }
-                    %span.not-available
-                      {{ __('Not available') }}
+              - if use_customisable_ca
+                %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" }
+              - else
+                %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" }
+                  .stage-nav-item-cell.stage-name
+                    {{ stage.title }}
+                  .stage-nav-item-cell.stage-median
+                    %template{ "v-if" => "stage.isUserAllowed" }
+                      %span{ "v-if" => "stage.value" }
+                        {{ stage.value }}
+                      %span.stage-empty{ "v-else" => true }
+                        {{ __('Not enough data') }}
+                    %template{ "v-else" => true }
+                      %span.not-available
+                        {{ __('Not available') }}
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
diff --git a/spec/frontend/cycle_analytics/stage_nav_item_spec.js b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
new file mode 100644
index 00000000000000..a85c75b5446aa5
--- /dev/null
+++ b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
@@ -0,0 +1,124 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import StageNavItem from '~/cycle_analytics/components/stage_nav_item.vue';
+
+describe('StageNavItem', () => {
+  let wrapper = null;
+  const title = 'Cool stage';
+  const value = '1 day';
+
+  function createComponent(props, shallow = true) {
+    const func = shallow ? shallowMount : mount;
+    return func(StageNavItem, {
+      propsData: {
+        isActive: false,
+        isUserAllowed: false,
+        title,
+        value,
+        ...props,
+      },
+    });
+  }
+
+  function hasStageName() {
+    const stageName = wrapper.find('.stage-name');
+    expect(stageName.exists()).toBe(true);
+    expect(stageName.text()).toEqual(title);
+  }
+
+  describe('User has access', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isUserAllowed: true });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders stage name', () => {
+      hasStageName();
+    });
+
+    describe('with a value', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ isUserAllowed: true });
+      });
+
+      afterEach(() => {
+        wrapper.destroy();
+      });
+      it('renders the value', () => {
+        expect(wrapper.find('.stage-empty').exists()).toBe(false);
+        expect(wrapper.find('.not-available').exists()).toBe(false);
+        expect(wrapper.find('span').text()).toEqual(value);
+      });
+    });
+
+    describe('without a value', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ isUserAllowed: true, value: null });
+      });
+
+      afterEach(() => {
+        wrapper.destroy();
+      });
+
+      it('has the stage-empty class', () => {
+        expect(wrapper.find('.stage-empty').exists()).toBe(true);
+      });
+
+      it('renders Not enough data', () => {
+        expect(wrapper.find('span').text()).toEqual('Not enough data');
+      });
+    });
+  });
+
+  describe('is active', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isActive: true }, false);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('has the active class', () => {
+      expect(wrapper.find('.stage-nav-item').classes('active')).toBe(true);
+    });
+  });
+
+  describe('is not active', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('emits the `select` event when clicked', () => {
+      expect(wrapper.emitted().select).toBeUndefined();
+      wrapper.trigger('click');
+      expect(wrapper.emitted().select.length).toBe(1);
+    });
+  });
+
+  describe('User does not have access', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isUserAllowed: false });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('renders stage name', () => {
+      hasStageName();
+    });
+
+    it('has class not-available', () => {
+      expect(wrapper.find('.stage-empty').exists()).toBe(false);
+      expect(wrapper.find('.not-available').exists()).toBe(true);
+    });
+
+    it('renders Not available', () => {
+      expect(wrapper.find('.not-available').text()).toBe('Not available');
+    });
+  });
+});
-- 
GitLab


From 0788c19d3691f983025a4d2538db257f75c6f015 Mon Sep 17 00:00:00 2001
From: Ezekiel Kigbo <ekigbo@gitlab.com>
Date: Fri, 2 Aug 2019 23:15:23 +1000
Subject: [PATCH 2/6] Added menu item for additional options

Updated tests for stage-nav-item

Added tests to check the different
states required for stage-nav-items.
---
 .../components/stage_card_list_item.vue       | 22 +++++
 .../components/stage_nav_item.vue             | 43 +++++++-
 .../stylesheets/pages/cycle_analytics.scss    |  5 +-
 .../projects/cycle_analytics/show.html.haml   | 17 +---
 .../cycle_analytics/stage_nav_item_spec.js    | 98 +++++++++++++++----
 5 files changed, 147 insertions(+), 38 deletions(-)

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 dbb39609cec522..55c92920fc0e80 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
@@ -1,11 +1,20 @@
 <script>
+import Icon from '~/vue_shared/components/icon.vue';
+
 export default {
   name: 'StageCardListItem',
+  components: {
+    Icon,
+  },
   props: {
     isActive: {
       type: Boolean,
       required: true,
     },
+    canEdit: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -13,5 +22,18 @@ export default {
 <template>
   <div :class="{ active: isActive }" class="stage-nav-item">
     <slot></slot>
+    <div v-if="canEdit" class="dropdown">
+      <button
+        type="button"
+        title="More actions"
+        class="more-actions-toggle btn btn-transparent"
+        data-toggle="dropdown"
+      >
+        <icon css-classes="icon" name="ellipsis_v" />
+      </button>
+      <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
+        <slot name="dropdown-options"></slot>
+      </ul>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
index 5d45de2cde8a4c..fcbd1549cd2674 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
@@ -7,10 +7,15 @@ export default {
     StageCardListItem,
   },
   props: {
+    isDefaultStage: {
+      type: Boolean,
+      default: false,
+    },
     isActive: {
       type: Boolean,
       default: false,
     },
+    // TODO: might not need this, rely on canEdit??
     isUserAllowed: {
       type: Boolean,
       required: true,
@@ -23,18 +28,33 @@ export default {
       type: String,
       default: '',
     },
+    canEdit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      displayMenu: true,
+    };
   },
   computed: {
     hasValue() {
       return this.value && this.value.length > 0;
     },
+    editable() {
+      return this.isUserAllowed && this.canEdit;
+    },
+  },
+  mounted() {
+    // console.log('StageNavItem::props', this.propsData);
   },
 };
 </script>
 
 <template>
   <li @click="$emit('select')">
-    <stage-card-list-item :is-active="isActive">
+    <stage-card-list-item :is-active="isActive" :display-menu="true" :can-edit="editable">
       <div class="stage-nav-item-cell stage-name">{{ title }}</div>
       <div class="stage-nav-item-cell stage-median">
         <template v-if="isUserAllowed">
@@ -45,6 +65,27 @@ export default {
           <span class="not-available">{{ __('Not available') }}</span>
         </template>
       </div>
+      <template v-slot:dropdown-options>
+        <template v-if="isDefaultStage">
+          <li>
+            <button type="button" class="btn-default btn-transparent">
+              {{ __('Hide stage') }}
+            </button>
+          </li>
+        </template>
+        <template v-else>
+          <li>
+            <button type="button" class="btn-default btn-transparent">
+              {{ __('Edit stage') }}
+            </button>
+          </li>
+          <li>
+            <button type="button" class="btn-danger danger">
+              {{ __('Remove stage') }}
+            </button>
+          </li>
+        </template>
+      </template>
     </stage-card-list-item>
   </li>
 </template>
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 0bd657bf2340c9..9f9686c57282d9 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -51,12 +51,12 @@
     }
 
     .stage-header {
-      width: 24%;
+      width: 22.5%;
       padding-left: 2 * $gl-padding;
     }
 
     .median-header {
-      width: 16%;
+      width: 17.5%;
     }
 
     .event-header {
@@ -168,6 +168,7 @@
       margin-bottom: $card-list-border-radius;
       margin-left: 2 * $card-list-border-radius;
       padding-left: 24px; // TODO: utility?
+      padding-right: 24px; // TODO: utility?
 
       .stage-name { padding: 0; }
 
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 535e3ebfe0e4ca..4f58e96031107d 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -1,4 +1,3 @@
-- use_customisable_ca = Feature.enabled?(:customisable_cycle_analytics)
 - @no_container = true
 - page_title "Cycle Analytics"
 
@@ -57,21 +56,7 @@
         .stage-panel-body
           %nav.stage-nav
             %ul
-              - if use_customisable_ca
-                %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" }
-              - else
-                %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" }
-                  .stage-nav-item-cell.stage-name
-                    {{ stage.title }}
-                  .stage-nav-item-cell.stage-median
-                    %template{ "v-if" => "stage.isUserAllowed" }
-                      %span{ "v-if" => "stage.value" }
-                        {{ stage.value }}
-                      %span.stage-empty{ "v-else" => true }
-                        {{ __('Not enough data') }}
-                    %template{ "v-else" => true }
-                      %span.not-available
-                        {{ __('Not available') }}
+              %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", "canEdit" => false }
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
diff --git a/spec/frontend/cycle_analytics/stage_nav_item_spec.js b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
index a85c75b5446aa5..e50018333b963b 100644
--- a/spec/frontend/cycle_analytics/stage_nav_item_spec.js
+++ b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
@@ -1,3 +1,4 @@
+// import Vue from 'vue';
 import { mount, shallowMount } from '@vue/test-utils';
 import StageNavItem from '~/cycle_analytics/components/stage_nav_item.vue';
 
@@ -10,12 +11,15 @@ describe('StageNavItem', () => {
     const func = shallow ? shallowMount : mount;
     return func(StageNavItem, {
       propsData: {
+        canEdit: false,
         isActive: false,
         isUserAllowed: false,
+        isDefaultStage: true,
         title,
         value,
         ...props,
       },
+      // sync: true,
     });
   }
 
@@ -25,19 +29,18 @@ describe('StageNavItem', () => {
     expect(stageName.text()).toEqual(title);
   }
 
-  describe('User has access', () => {
-    beforeEach(() => {
-      wrapper = createComponent({ isUserAllowed: true });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it('renders stage name', () => {
-      hasStageName();
-    });
+  function hasMedianValue() {
+    const median = wrapper.find('.stage-median');
+    expect(median.exists()).toBe(true);
+    expect(median.text()).toEqual(value);
+  }
+  it('renders stage name', () => {
+    wrapper = createComponent({ isUserAllowed: true });
+    hasStageName();
+    wrapper.destroy();
+  });
 
+  describe('User has access', () => {
     describe('with a value', () => {
       beforeEach(() => {
         wrapper = createComponent({ isUserAllowed: true });
@@ -46,10 +49,10 @@ describe('StageNavItem', () => {
       afterEach(() => {
         wrapper.destroy();
       });
-      it('renders the value', () => {
+      it('renders the value for median value', () => {
         expect(wrapper.find('.stage-empty').exists()).toBe(false);
         expect(wrapper.find('.not-available').exists()).toBe(false);
-        expect(wrapper.find('span').text()).toEqual(value);
+        expect(wrapper.find('.stage-median').text()).toEqual(value);
       });
     });
 
@@ -66,8 +69,8 @@ describe('StageNavItem', () => {
         expect(wrapper.find('.stage-empty').exists()).toBe(true);
       });
 
-      it('renders Not enough data', () => {
-        expect(wrapper.find('span').text()).toEqual('Not enough data');
+      it('renders Not enough data for the median value', () => {
+        expect(wrapper.find('.stage-median').text()).toEqual('Not enough data');
       });
     });
   });
@@ -102,7 +105,7 @@ describe('StageNavItem', () => {
 
   describe('User does not have access', () => {
     beforeEach(() => {
-      wrapper = createComponent({ isUserAllowed: false });
+      wrapper = createComponent({ isUserAllowed: false }, false);
     });
 
     afterEach(() => {
@@ -117,8 +120,65 @@ describe('StageNavItem', () => {
       expect(wrapper.find('.not-available').exists()).toBe(true);
     });
 
-    it('renders Not available', () => {
-      expect(wrapper.find('.not-available').text()).toBe('Not available');
+    it('renders Not available for the median value', () => {
+      expect(wrapper.find('.stage-median').text()).toBe('Not available');
+    });
+    it('does not render options menu', () => {
+      expect(wrapper.find('.more-actions-toggle').exists()).toBe(false);
+    });
+  });
+
+  describe('User can edit stages', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ canEdit: true, isUserAllowed: true }, false);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('renders stage name', () => {
+      hasStageName();
+    });
+
+    it('renders options menu', () => {
+      expect(wrapper.find('.more-actions-toggle').exists()).toBe(true);
+    });
+
+    describe('Default stages', () => {
+      beforeEach(() => {
+        wrapper = createComponent(
+          { canEdit: true, isUserAllowed: true, isDefaultStage: true },
+          false,
+        );
+      });
+      it('can hide the stage', () => {
+        expect(wrapper.html().indexOf('Hide stage') > 0).toBe(true);
+      });
+      it('can not edit the stage', () => {
+        expect(wrapper.html().indexOf('Edit stage') > 0).toBe(false);
+      });
+      it('can not remove the stage', () => {
+        expect(wrapper.html().indexOf('Remove stage') > 0).toBe(false);
+      });
+    });
+
+    describe('Custom stages', () => {
+      beforeEach(() => {
+        wrapper = createComponent(
+          { canEdit: true, isUserAllowed: true, isDefaultStage: false },
+          false,
+        );
+      });
+      it('can edit the stage', () => {
+        expect(wrapper.html().indexOf('Edit stage') > 0).toBe(true);
+      });
+      it('can remove the stage', () => {
+        expect(wrapper.html().indexOf('Remove stage') > 0).toBe(true);
+      });
+
+      it('can not hide the stage', () => {
+        expect(wrapper.html().indexOf('Hide stage') > 0).toBe(false);
+      });
     });
   });
 });
-- 
GitLab


From de3b4e543ac42dae404c96c3be64fe5384b28e9a Mon Sep 17 00:00:00 2001
From: Ezekiel Kigbo <ekigbo@gitlab.com>
Date: Wed, 7 Aug 2019 23:04:33 +1000
Subject: [PATCH 3/6] Replace css with utility classes

Replace css styling with bootstrap
utility classes where possible.
---
 .../components/stage_card_list_item.vue       |  4 +-
 .../components/stage_nav_item.vue             |  6 +-
 .../stylesheets/pages/cycle_analytics.scss    | 64 ++++---------------
 .../projects/cycle_analytics/show.html.haml   | 10 +--
 .../cycle_analytics/stage_nav_item_spec.js    |  6 --
 5 files changed, 22 insertions(+), 68 deletions(-)

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 55c92920fc0e80..125c9582e8e28f 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
@@ -20,13 +20,13 @@ export default {
 </script>
 
 <template>
-  <div :class="{ active: isActive }" class="stage-nav-item">
+  <div :class="{ active: isActive }" class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2">
     <slot></slot>
     <div v-if="canEdit" class="dropdown">
       <button
         type="button"
         title="More actions"
-        class="more-actions-toggle btn btn-transparent"
+        class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
         <icon css-classes="icon" name="ellipsis_v" />
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
index fcbd1549cd2674..454dfdb97fdee2 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
@@ -55,8 +55,10 @@ export default {
 <template>
   <li @click="$emit('select')">
     <stage-card-list-item :is-active="isActive" :display-menu="true" :can-edit="editable">
-      <div class="stage-nav-item-cell stage-name">{{ title }}</div>
-      <div class="stage-nav-item-cell stage-median">
+      <div class="stage-nav-item-cell stage-name p-0" :class="{ 'font-weight-bold': isActive }">
+        {{ title }}
+      </div>
+      <div class="stage-nav-item-cell stage-median mr-4">
         <template v-if="isUserAllowed">
           <span v-if="hasValue">{{ value }}</span>
           <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 9f9686c57282d9..81cc0269bc2c95 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -51,12 +51,12 @@
     }
 
     .stage-header {
-      width: 22.5%;
+      width: 18.5%;
       padding-left: 2 * $gl-padding;
     }
 
     .median-header {
-      width: 17.5%;
+      width: 21.5%;
     }
 
     .event-header {
@@ -69,10 +69,6 @@
       text-align: right;
       padding-right: 2 * $gl-padding;
     }
-
-    .stage-name {
-      font-weight: $gl-font-weight-bold;
-    }
   }
 
   .card {
@@ -153,67 +149,29 @@
     }
 
     .stage-nav-item {
-      $card-list-border-radius: 4px;
-      // $card-list-border-radius: 2px;
-      $card-list-active-bg: $blue-50;
-      $card-list-active-border-color: $blue-300;
-      $card-list-active-shadow: $blue-500;
-
-      display: flex;
       line-height: 65px;
       border: $border-color solid 1px;
-      border-radius: $card-list-border-radius;
-      // margin: $card-list-border-radius;
-      margin: 0;
-      margin-bottom: $card-list-border-radius;
-      margin-left: 2 * $card-list-border-radius;
-      padding-left: 24px; // TODO: utility?
-      padding-right: 24px; // TODO: utility?
-
-      .stage-name { padding: 0; }
+      border-radius: 4px;
 
       &.active {
-        /* TODO: replace with utilities */
-        background: $card-list-active-bg;
-        border-color: $card-list-active-border-color;
-        box-shadow: inset 4px 0 0 0 $card-list-active-shadow;
-
-        .stage-name {
-          font-weight: $gl-font-weight-bold;
-          padding: 0;
-        }
+        background: $blue-50;
+        border-color: $blue-300;
+        box-shadow: inset 4px 0 0 0 $blue-500;
       }
 
-      // > :first-child,
-      // > :last-child {
-      //   border-radius: $border-radius-width;
-      // }
-
       &:hover:not(.active) {
         background-color: $gray-lightest;
         box-shadow: inset 2px 0 0 0 $border-color;
         cursor: pointer;
       }
 
-      // &:first-child {
-      //   border-top: 0;
-      // }
-
-      // &:last-child {
-      //   border-bottom: 0;
-      // }
-
-      .stage-nav-item-cell {
-        &.stage-median {
-          margin-left: auto;
-          margin-right: $gl-padding * 1.5;
-          min-width: 37%;
-        }
+      .stage-nav-item-cell.stage-name {
+        width: 44.5%;
       }
 
-      // .stage-name {
-      //   padding-left: 16px;
-      // }
+      .stage-nav-item-cell.stage-median {
+        min-width: 43%;
+      }
 
       .stage-empty,
       .not-available {
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 4f58e96031107d..a3b4b30632fe4c 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -38,25 +38,25 @@
           %nav.col-headers
             %ul
               %li.stage-header
-                %span.stage-name
+                %span.stage-name.font-weight-bold
                   {{ s__('ProjectLifecycle|Stage') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
               %li.median-header
-                %span.stage-name
+                %span.stage-name.font-weight-bold
                   {{ __('Median') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
               %li.event-header
-                %span.stage-name
+                %span.stage-name.font-weight-bold
                   {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
               %li.total-time-header
-                %span.stage-name
+                %span.stage-name.font-weight-bold
                   {{ __('Total Time') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
         .stage-panel-body
           %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", "canEdit" => false }
+              %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", ":can-edit" => true }
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
diff --git a/spec/frontend/cycle_analytics/stage_nav_item_spec.js b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
index e50018333b963b..1c1c2877e226c3 100644
--- a/spec/frontend/cycle_analytics/stage_nav_item_spec.js
+++ b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
@@ -19,7 +19,6 @@ describe('StageNavItem', () => {
         value,
         ...props,
       },
-      // sync: true,
     });
   }
 
@@ -29,11 +28,6 @@ describe('StageNavItem', () => {
     expect(stageName.text()).toEqual(title);
   }
 
-  function hasMedianValue() {
-    const median = wrapper.find('.stage-median');
-    expect(median.exists()).toBe(true);
-    expect(median.text()).toEqual(value);
-  }
   it('renders stage name', () => {
     wrapper = createComponent({ isUserAllowed: true });
     hasStageName();
-- 
GitLab


From 05d76a256a32b975f10fee9545fbb4dd989a557d Mon Sep 17 00:00:00 2001
From: Ezekiel Kigbo <ekigbo@gitlab.com>
Date: Wed, 7 Aug 2019 23:46:19 +1000
Subject: [PATCH 4/6] Updated gitlab pot file

---
 locale/gitlab.pot | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0ed9ed1768526a..d06ea9e85ff0f4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5209,6 +5209,9 @@ msgstr ""
 msgid "Edit public deploy key"
 msgstr ""
 
+msgid "Edit stage"
+msgstr ""
+
 msgid "Edit wiki page"
 msgstr ""
 
@@ -7698,6 +7701,9 @@ msgstr ""
 msgid "Hide shared projects"
 msgstr ""
 
+msgid "Hide stage"
+msgstr ""
+
 msgid "Hide value"
 msgid_plural "Hide values"
 msgstr[0] ""
@@ -12363,6 +12369,9 @@ msgstr ""
 msgid "Remove spent time"
 msgstr ""
 
+msgid "Remove stage"
+msgstr ""
+
 msgid "Remove time estimate"
 msgstr ""
 
-- 
GitLab


From 1b2d187c536ec053e36516754c9ffa8f7784f5e0 Mon Sep 17 00:00:00 2001
From: Ezekiel Kigbo <ekigbo@gitlab.com>
Date: Wed, 7 Aug 2019 23:36:56 +1000
Subject: [PATCH 5/6] Minor cleanup css and utilities

Removes unecessary css replacing with
utility css. Cleans up todos and
ensure 'canEdit' defaults to false
---
 .../cycle_analytics/components/stage_card_list_item.vue  | 2 +-
 .../cycle_analytics/components/stage_nav_item.vue        | 1 -
 app/assets/stylesheets/pages/cycle_analytics.scss        | 5 -----
 app/views/projects/cycle_analytics/show.html.haml        | 9 +++++----
 4 files changed, 6 insertions(+), 11 deletions(-)

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 125c9582e8e28f..52f7cb91b7155d 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
@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <div :class="{ active: isActive }" class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2">
+  <div :class="{ active: isActive }" class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded">
     <slot></slot>
     <div v-if="canEdit" class="dropdown">
       <button
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
index 454dfdb97fdee2..952fa25975b9f1 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
@@ -15,7 +15,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    // TODO: might not need this, rely on canEdit??
     isUserAllowed: {
       type: Boolean,
       required: true,
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 81cc0269bc2c95..31df8ef75dd359 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -52,7 +52,6 @@
 
     .stage-header {
       width: 18.5%;
-      padding-left: 2 * $gl-padding;
     }
 
     .median-header {
@@ -61,13 +60,10 @@
 
     .event-header {
       width: 45%;
-      padding-left: $gl-padding;
     }
 
     .total-time-header {
       width: 15%;
-      text-align: right;
-      padding-right: 2 * $gl-padding;
     }
   }
 
@@ -151,7 +147,6 @@
     .stage-nav-item {
       line-height: 65px;
       border: $border-color solid 1px;
-      border-radius: 4px;
 
       &.active {
         background: $blue-50;
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index a3b4b30632fe4c..b982dda7549ae3 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -37,7 +37,7 @@
         .card-header.border-bottom-0
           %nav.col-headers
             %ul
-              %li.stage-header
+              %li.stage-header.pl-5
                 %span.stage-name.font-weight-bold
                   {{ s__('ProjectLifecycle|Stage') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
@@ -45,18 +45,19 @@
                 %span.stage-name.font-weight-bold
                   {{ __('Median') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
-              %li.event-header
+              %li.event-header.pl-3
                 %span.stage-name.font-weight-bold
                   {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
-              %li.total-time-header
+              %li.total-time-header.pr-5.text-right
                 %span.stage-name.font-weight-bold
                   {{ __('Total Time') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
         .stage-panel-body
           %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", ":can-edit" => true }
+              -# canEdit will eventually be a License.feature_available? check, default to false
+              %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", ":can-edit" => false }
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
-- 
GitLab


From ef900bba032b6999f37d191ed0b6ec6d5b66a5f6 Mon Sep 17 00:00:00 2001
From: Ezekiel Kigbo <ekigbo@gitlab.com>
Date: Fri, 9 Aug 2019 12:32:43 +1000
Subject: [PATCH 6/6] Minor review comments

Address maintainer feedback

Remove unused `canEdit` property

Set `canEdit` required to false

Replace button with gl-button

Fix missing i18n string

Use .toContain to check rendered text
---
 .../components/stage_card_list_item.vue            | 10 ++++++----
 .../cycle_analytics/components/stage_nav_item.vue  | 14 +++++---------
 app/assets/stylesheets/pages/cycle_analytics.scss  |  2 +-
 app/views/projects/cycle_analytics/show.html.haml  |  3 +--
 .../cycle_analytics/stage_nav_item_spec.js         | 13 ++++++-------
 5 files changed, 19 insertions(+), 23 deletions(-)

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 52f7cb91b7155d..d946594a0690e1 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
@@ -1,10 +1,12 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   name: 'StageCardListItem',
   components: {
     Icon,
+    GlButton,
   },
   props: {
     isActive: {
@@ -14,6 +16,7 @@ export default {
     canEdit: {
       type: Boolean,
       default: false,
+      required: false,
     },
   },
 };
@@ -23,14 +26,13 @@ export default {
   <div :class="{ active: isActive }" class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded">
     <slot></slot>
     <div v-if="canEdit" class="dropdown">
-      <button
-        type="button"
-        title="More actions"
+      <gl-button
+        :title="__('More actions')"
         class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
         <icon css-classes="icon" name="ellipsis_v" />
-      </button>
+      </gl-button>
       <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
         <slot name="dropdown-options"></slot>
       </ul>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
index 952fa25975b9f1..004d335f572846 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
@@ -10,10 +10,12 @@ export default {
     isDefaultStage: {
       type: Boolean,
       default: false,
+      required: false,
     },
     isActive: {
       type: Boolean,
       default: false,
+      required: false,
     },
     isUserAllowed: {
       type: Boolean,
@@ -26,17 +28,14 @@ export default {
     value: {
       type: String,
       default: '',
+      required: false,
     },
     canEdit: {
       type: Boolean,
       default: false,
+      required: false,
     },
   },
-  data() {
-    return {
-      displayMenu: true,
-    };
-  },
   computed: {
     hasValue() {
       return this.value && this.value.length > 0;
@@ -45,15 +44,12 @@ export default {
       return this.isUserAllowed && this.canEdit;
     },
   },
-  mounted() {
-    // console.log('StageNavItem::props', this.propsData);
-  },
 };
 </script>
 
 <template>
   <li @click="$emit('select')">
-    <stage-card-list-item :is-active="isActive" :display-menu="true" :can-edit="editable">
+    <stage-card-list-item :is-active="isActive" :can-edit="editable">
       <div class="stage-nav-item-cell stage-name p-0" :class="{ 'font-weight-bold': isActive }">
         {{ title }}
       </div>
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 31df8ef75dd359..d80155a416d6b1 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -146,7 +146,7 @@
 
     .stage-nav-item {
       line-height: 65px;
-      border: $border-color solid 1px;
+      border: 1px solid $border-color;
 
       &.active {
         background: $blue-50;
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index b982dda7549ae3..2b594c125f41e8 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -56,8 +56,7 @@
         .stage-panel-body
           %nav.stage-nav
             %ul
-              -# canEdit will eventually be a License.feature_available? check, default to false
-              %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", ":can-edit" => false }
+              %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" }
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
diff --git a/spec/frontend/cycle_analytics/stage_nav_item_spec.js b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
index 1c1c2877e226c3..ff079082ca7553 100644
--- a/spec/frontend/cycle_analytics/stage_nav_item_spec.js
+++ b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
@@ -1,4 +1,3 @@
-// import Vue from 'vue';
 import { mount, shallowMount } from '@vue/test-utils';
 import StageNavItem from '~/cycle_analytics/components/stage_nav_item.vue';
 
@@ -146,13 +145,13 @@ describe('StageNavItem', () => {
         );
       });
       it('can hide the stage', () => {
-        expect(wrapper.html().indexOf('Hide stage') > 0).toBe(true);
+        expect(wrapper.text()).toContain('Hide stage');
       });
       it('can not edit the stage', () => {
-        expect(wrapper.html().indexOf('Edit stage') > 0).toBe(false);
+        expect(wrapper.text()).not.toContain('Edit stage');
       });
       it('can not remove the stage', () => {
-        expect(wrapper.html().indexOf('Remove stage') > 0).toBe(false);
+        expect(wrapper.text()).not.toContain('Remove stage');
       });
     });
 
@@ -164,14 +163,14 @@ describe('StageNavItem', () => {
         );
       });
       it('can edit the stage', () => {
-        expect(wrapper.html().indexOf('Edit stage') > 0).toBe(true);
+        expect(wrapper.text()).toContain('Edit stage');
       });
       it('can remove the stage', () => {
-        expect(wrapper.html().indexOf('Remove stage') > 0).toBe(true);
+        expect(wrapper.text()).toContain('Remove stage');
       });
 
       it('can not hide the stage', () => {
-        expect(wrapper.html().indexOf('Hide stage') > 0).toBe(false);
+        expect(wrapper.text()).not.toContain('Hide stage');
       });
     });
   });
-- 
GitLab