Equally space stage name and median

Ensures that the stage title and median
value are equally spaced in the stage table.

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -51,11 +51,11 @@
     }
 
     .stage-header {
-      width: 18.5%;
+      width: 18%;
     }
 
     .median-header {
-      width: 21.5%;
+      width: 22%;
     }
 
     .event-header {

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

@@ -56,6 +56,12 @@ export default {
     editable() {
       return this.canEdit;
     },
+    menuOpen() {
+      return this.canEdit && this.isHover;
+    },
+    openMenuClasses() {
+      return this.menuOpen ? 'd-flex flex-row justify-content-end' : '';
+    },
   },
   mounted() {
     this.checkIfTitleOverflows();
@@ -86,20 +92,25 @@ export default {
 
 <template>
   <li @click="handleSelectStage" @mouseover="handleHover(true)" @mouseleave="handleHover()">
-    <stage-card-list-item :is-active="isActive" :can-edit="editable">
+    <stage-card-list-item
+      :is-active="isActive"
+      :can-edit="editable"
+      class="d-flex justify-space-between"
+    >
       <div
         ref="title"
-        class="stage-nav-item-cell stage-name p-0 pr-2 text-truncate"
+        class="stage-nav-item-cell text-truncate w-50 pr-2"
         :class="{ 'font-weight-bold': isActive }"
       >
         <span v-if="isTitleOverflowing" v-gl-tooltip.hover :title="title">{{ title }}</span>
         <span v-else>{{ title }}</span>
       </div>
-      <div class="stage-nav-item-cell stage-median mr-4">
+      <div class="stage-nav-item-cell w-50 d-flex justify-content-between">
+        <div ref="median" class="w-75 align-items-start">
           <span v-if="hasValue">{{ median }}</span>
           <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
         </div>
-      <div v-show="canEdit && isHover" ref="dropdown" class="dropdown">
+        <div v-show="menuOpen" ref="dropdown" :class="[openMenuClasses]" class="dropdown w-25">
           <gl-button
             :title="__('More actions')"
             class="more-actions-toggle btn btn-transparent p-0"
@@ -141,6 +152,7 @@ export default {
             </template>
           </ul>
         </div>
+      </div>
     </stage-card-list-item>
   </li>
 </template>

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

@@ -118,7 +118,7 @@ export default {
           description: __(
             '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.',
           ),
-          classes: 'median-header',
+          classes: 'median-header pl-4',
         },
         {
           title: this.stageName,

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

@@ -7,11 +7,6 @@ describe('StageNavItem', () => {
   const title = 'Rad stage';
   const median = 50;
 
-  const $sel = {
-    title: '.stage-name',
-    median: '.stage-median',
-  };
-
   function createComponent(props) {
     return shallowMount(StageNavItem, {
       propsData: {
@@ -23,8 +18,8 @@ describe('StageNavItem', () => {
   }
 
   let wrapper = null;
-  const findStageTitle = () => wrapper.find($sel.title);
-  const findStageMedian = () => wrapper.find($sel.median);
+  const findStageTitle = () => wrapper.find({ref: 'title'});
+  const findStageMedian = () => wrapper.find({ref: 'median'});
 
   afterEach(() => {
     wrapper.destroy();