Add UI tip for merge trains

This adds a UI tip to the pipeline stages
dropdowns indicating that merge train based
pipelines can only be retried as a whole
and not individually

app/assets/javascripts/pipelines/components/pipelines_list/stage.vue

@@ -38,6 +38,11 @@ export default {
       required: false,
       default: false,
     },
+    isMergeTrain: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -126,6 +131,21 @@ export default {
           @pipelineActionRequestComplete="pipelineActionRequestComplete"
         />
       </li>
+      <template v-if="isMergeTrain">
+        <li class="gl-new-dropdown-divider" role="presentation">
+          <hr role="separator" aria-orientation="horizontal" class="dropdown-divider" />
+        </li>
+        <li>
+          <div
+            class="gl-display-flex gl-align-items-center"
+            data-testid="warning-message-merge-trains"
+          >
+            <div class="menu-item gl-font-sm gl-text-gray-300!">
+              {{ s__('Pipeline|Merge train pipeline jobs can not be retried') }}
+            </div>
+          </div>
+        </li>
+      </template>
     </ul>
   </gl-dropdown>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -15,6 +15,7 @@ import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_a
 import PipelineStage from '~/pipelines/components/pipelines_list/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import { MT_MERGE_STRATEGY } from '../constants';
 
 export default {
   name: 'MRWidgetPipeline',
@@ -80,6 +81,11 @@ export default {
       type: String,
       required: true,
     },
+    mergeStrategy: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     hasPipeline() {
@@ -130,6 +136,9 @@ export default {
         this.buildsWithCoverage.length,
       );
     },
+    isMergeTrain() {
+      return this.mergeStrategy === MT_MERGE_STRATEGY;
+    },
   },
   errorText: s__(
     'Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation%{linkEnd}.',
@@ -249,7 +258,7 @@ export default {
                   class="stage-container dropdown mr-widget-pipeline-stages"
                   data-testid="widget-mini-pipeline-graph"
                 >
-                  <pipeline-stage :stage="stage" />
+                  <pipeline-stage :stage="stage" :is-merge-train="isMergeTrain" />
                 </div>
               </template>
             </span>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue

@@ -4,6 +4,7 @@ import { isNumber } from 'lodash';
 import { sanitize } from '~/lib/dompurify';
 import { n__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import MergeRequestStore from '../stores/mr_widget_store';
 import ArtifactsApp from './artifacts_list_app.vue';
 import MrCollapsibleExtension from './mr_collapsible_extension.vue';
 import MrWidgetContainer from './mr_widget_container.vue';
@@ -84,6 +85,15 @@ export default {
         this.deployments.length,
       );
     },
+    preferredAutoMergeStrategy() {
+      if (this.glFeatures.mergeRequestWidgetGraphql) {
+        return MergeRequestStore.getPreferredAutoMergeStrategy(
+          this.mr.availableAutoMergeStrategies,
+        );
+      }
+
+      return this.mr.preferredAutoMergeStrategy;
+    },
   },
 };
 </script>
@@ -100,6 +110,7 @@ export default {
       :source-branch-link="branchLink"
       :mr-troubleshooting-docs-path="mr.mrTroubleshootingDocsPath"
       :ci-troubleshooting-docs-path="mr.ciTroubleshootingDocsPath"
+      :merge-strategy="preferredAutoMergeStrategy"
     />
     <template #footer>
       <div v-if="mr.exposedArtifactsPath" class="js-exposed-artifacts">

ee/changelogs/unreleased/jivanvl-add-ui-tip-merge-trains.yml

+---
+title: Add warning message to pipeline stage dropdowns in merge trains
+merge_request: 55437
+author:
+type: changed

locale/gitlab.pot

@@ -22328,6 +22328,9 @@ msgstr ""
 msgid "Pipeline|Merge train pipeline"
 msgstr ""
 
+msgid "Pipeline|Merge train pipeline jobs can not be retried"
+msgstr ""
+
 msgid "Pipeline|Merged result pipeline"
 msgstr ""
 

spec/frontend/pipelines/stage_spec.js

@@ -48,6 +48,7 @@ describe('Pipelines stage component', () => {
   const findDropdownMenu = () =>
     wrapper.find('[data-testid="mini-pipeline-graph-dropdown-menu-list"]');
   const findCiActionBtn = () => wrapper.find('.js-ci-action');
+  const findMergeTrainWarning = () => wrapper.find('[data-testid="warning-message-merge-trains"]');
 
   const openStageDropdown = () => {
     findDropdownToggle().trigger('click');
@@ -172,4 +173,40 @@ describe('Pipelines stage component', () => {
       expect(wrapper.emitted('pipelineActionRequestComplete')).toHaveLength(1);
     });
   });
+
+  describe('With merge trains enabled', () => {
+    beforeEach(async () => {
+      mock.onGet(dropdownPath).reply(200, stageReply);
+      createComponent({
+        isMergeTrain: true,
+      });
+
+      await openStageDropdown();
+      await axios.waitForAll();
+    });
+
+    it('shows a warning on the dropdown', () => {
+      const warning = findMergeTrainWarning();
+
+      expect(warning.text()).toBe('Merge train pipeline jobs can not be retried');
+    });
+  });
+
+  describe('With merge trains disabled', () => {
+    beforeEach(async () => {
+      mock.onGet(dropdownPath).reply(200, stageReply);
+      createComponent({
+        isMergeTrain: false,
+      });
+
+      await openStageDropdown();
+      await axios.waitForAll();
+    });
+
+    it('does not show a warning on the dropdown', () => {
+      const warning = findMergeTrainWarning();
+
+      expect(warning.exists()).toBe(false);
+    });
+  });
 });