Explain why MR suggestion is not applicable

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/219455

Instead of displaying a generic message
why the suggestion it not applied.
In this MR, a more specific reason will be displayed
in the tooltip when MR suggestion can not be applied.

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue

@@ -68,6 +68,7 @@ export default {
       :is-applying-batch="suggestion.is_applying_batch"
       :batch-suggestions-count="batchSuggestionsCount"
       :help-page-path="helpPagePath"
+      :inapplicable-reason="suggestion.inapplicable_reason"
       @apply="applySuggestion"
       @applyBatch="applySuggestionBatch"
       @addToBatch="addSuggestionToBatch"

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

@@ -38,6 +38,11 @@ export default {
       type: String,
       required: true,
     },
+    inapplicableReason: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -52,9 +57,7 @@ export default {
       return this.isApplyingSingle || this.isApplyingBatch;
     },
     tooltipMessage() {
-      return this.canApply
-        ? __('This also resolves this thread')
-        : __("Can't apply as this line has changed or the suggestion already matches its content.");
+      return this.canApply ? __('This also resolves this thread') : this.inapplicableReason;
     },
     isDisableButton() {
       return this.isApplying || !this.canApply;

changelogs/unreleased/219455-fe-inapplicable-tooltip-message.yml

+---
+title: Add inapplicable reason in MR suggestion Tooltip
+merge_request: 35276
+author:
+type: changed

locale/gitlab.pot

@@ -4024,9 +4024,6 @@ msgstr ""
 msgid "Can't apply as the source branch was deleted."
 msgstr ""
 
-msgid "Can't apply as this line has changed or the suggestion already matches its content."
-msgstr ""
-
 msgid "Can't apply this suggestion."
 msgstr ""
 

spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js

@@ -69,11 +69,6 @@ describe('Suggestion Diff component', () => {
     expect(addToBatchBtn.html().includes('Add suggestion to batch')).toBe(true);
   });
 
-  it('renders correct tooltip message for apply button', () => {
-    createComponent();
-    expect(wrapper.vm.tooltipMessage).toBe('This also resolves this thread');
-  });
-
   describe('when apply suggestion is clicked', () => {
     beforeEach(() => {
       createComponent();
@@ -232,11 +227,18 @@ describe('Suggestion Diff component', () => {
       expect(findAddToBatchButton().exists()).toBe(false);
       expect(findApplyButton().attributes('disabled')).toBe('true');
     });
+  });
+
+  describe('tooltip message for apply button', () => {
+    it('renders correct tooltip message when button is applicable', () => {
+      createComponent();
+      expect(wrapper.vm.tooltipMessage).toBe('This also resolves this thread');
+    });
 
-    it('renders correct tooltip message for apply button', () => {
-      expect(wrapper.vm.tooltipMessage).toBe(
-        "Can't apply as this line has changed or the suggestion already matches its content.",
-      );
+    it('renders the inapplicable reason in the tooltip when button is not applicable', () => {
+      const inapplicableReason = 'lorem';
+      createComponent({ canApply: false, inapplicableReason });
+      expect(wrapper.vm.tooltipMessage).toBe(inapplicableReason);
     });
   });
 });