Merge branch 'ek-address-minor-vsa-tech-debt' into 'master'

Re-instate missing padding for stage popovers

See merge request gitlab-org/gitlab!69831

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

@@ -132,7 +132,8 @@ export default {
     <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row">
       <path-navigation
         v-if="displayPathNavigation"
-        class="js-path-navigation gl-w-full gl-pb-2"
+        data-testid="vsa-path-navigation"
+        class="gl-w-full gl-pb-2"
         :loading="isLoading || isLoadingStage"
         :stages="pathNavigationData"
         :selected-stage="selectedStage"

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

@@ -61,7 +61,8 @@ export default {
 <template>
   <div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
     <filter-bar
-      class="js-filter-bar filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
+      data-testid="vsa-filter-bar"
+      class="filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
       :group-path="groupPath"
     />
     <div

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

@@ -166,7 +166,8 @@ export default {
     <div v-if="!shouldRenderEmptyState" class="gl-max-w-full">
       <path-navigation
         v-if="selectedStageReady"
-        class="js-path-navigation gl-w-full gl-pb-2"
+        data-testid="vsa-path-navigation"
+        class="gl-w-full gl-pb-2"
         :loading="isLoading"
         :stages="pathNavigationData"
         :selected-stage="selectedStage"

ee/app/assets/stylesheets/page_bundles/cycle_analytics.scss

@@ -29,6 +29,23 @@
   }
 }
 
+// Since backend wraps event description in a paragraph
+// we need to remove common styles, i.e., spacing
+.stage-item-popover {
+  .stage-event-description p {
+    margin: 0 !important;
+  }
+
+  .popover-body {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .metric-label {
+    flex: 0 0 20%;
+  }
+}
+
 .stage-list-move {
   transition: transform 0.15s;
 }

ee/spec/features/groups/analytics/cycle_analytics/filters_and_data_spec.rb

@@ -17,9 +17,8 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
   let(:mr) { create_merge_request_closing_issue(user, project, issue, commit_message: "References #{issue.to_reference}") }
   let(:pipeline) { create(:ci_empty_pipeline, status: 'created', project: project, ref: mr.source_branch, sha: mr.source_branch_sha, head_pipeline_of: mr) }
 
-  stage_nav_selector = '.stage-nav'
-  path_nav_selector = '.js-path-navigation'
-  filter_bar_selector = '.js-filter-bar'
+  path_nav_selector = '[data-testid="vsa-path-navigation"]'
+  filter_bar_selector = '[data-testid="vsa-filter-bar"]'
   card_metric_selector = '[data-testid="vsa-time-metrics"] .gl-single-stat'
   new_issues_count = 3
 
@@ -29,7 +28,7 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
 
   def select_stage(name)
     string_id = "CycleAnalyticsStage|#{name}"
-    within '[data-testid="gl-path-nav"]' do
+    within '[data-testid="vsa-path-navigation"]' do
       page.find('li', text: s_(string_id), match: :prefer_exact).click
     end
 
@@ -124,12 +123,6 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
       end
     end
 
-    context 'vertical navigation' do
-      it 'does not show the vertical stage navigation' do
-        expect(page).not_to have_selector(stage_nav_selector)
-      end
-    end
-
     context 'navigation' do
       before do
         select_group(selected_group)
@@ -302,7 +295,7 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
       [].concat(stages_without_data, stages_with_data).each do |stage|
         select_stage(stage[:title])
 
-        stage_name = page.find('.js-path-navigation .gl-path-active-item-indigo').text
+        stage_name = page.find("#{path_nav_selector} .gl-path-active-item-indigo").text
         expect(stage_name).to include(stage[:title])
         expect(stage_name).to include(stage[:time])
       end

ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb

@@ -38,7 +38,7 @@ RSpec.describe 'Multiple value streams', :js do
   end
 
   def path_nav_elem
-    page.find('[data-testid="gl-path-nav"]')
+    page.find('[data-testid="vsa-path-navigation"]')
   end
 
   def click_action_button(action, index)

spec/support/helpers/cycle_analytics_helpers.rb

@@ -71,12 +71,12 @@ module CycleAnalyticsHelpers
     save_value_stream(custom_value_stream_name)
   end
 
-  def wait_for_stages_to_load(selector = '.js-path-navigation')
+  def wait_for_stages_to_load(selector = '[data-testid="vsa-path-navigation"]')
     expect(page).to have_selector selector
     wait_for_requests
   end
 
-  def select_group(target_group, ready_selector = '.js-path-navigation')
+  def select_group(target_group, ready_selector = '[data-testid="vsa-path-navigation"]')
     visit group_analytics_cycle_analytics_path(target_group)
 
     wait_for_stages_to_load(ready_selector)