Cycle analytics - implement card ui for stage list

What does this MR do?

Implements the card ui needed for the stages list for cycle analytics.

• Moves the existing stage-nav-item from haml to vue
• Update the style of the list to match the card list in the new designs
• Adds unit tests

Before	After: canEdit = false	After: canEdit = true

CE Port

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/31580

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Related issue

#13076 (closed)

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

@@ -9,7 +9,7 @@ export default {
   props: {
     isActive: {
       type: Boolean,
-      required: true,
+      default: false,
     },
     isUserAllowed: {
       type: Boolean,
@@ -21,7 +21,12 @@ export default {
     },
     value: {
       type: String,
-      default: null,
+      default: '',
+    },
+  },
+  computed: {
+    hasValue() {
+      return this.value && this.value.length > 0;
     },
   },
 };
@@ -33,7 +38,7 @@ export default {
       <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="value">{{ value }}</span>
+          <span v-if="hasValue">{{ value }}</span>
           <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
         </template>
         <template v-else>