Show disabled suggestion button with tooltip message

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/30707
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33357

Show a disabled state of the suggestion button instead of not displaying
at all with a tooltip indicating the suggestion cannot be applied.

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

@@ -46,6 +46,14 @@ export default {
     isApplying() {
       return this.isApplyingSingle || this.isApplyingBatch;
     },
+    tooltipMessage() {
+      return this.canApply
+        ? __('This also resolves the discussion')
+        : __("Can't apply as this line has changed or the suggestion already matches its content.");
+    },
+    isDisableButton() {
+      return this.isApplying || !this.canApply;
+    },
     applyingSuggestionsMessage() {
       if (this.isApplyingSingle || this.batchSuggestionsCount < 2) {
         return __('Applying suggestion...');
@@ -110,23 +118,24 @@ export default {
         </span>
       </gl-deprecated-button>
     </div>
-    <div v-else-if="canApply" class="d-flex align-items-center">
+    <div v-else class="d-flex align-items-center">
       <gl-deprecated-button
         class="btn-inverted js-add-to-batch-btn btn-grouped"
-        :disabled="isApplying"
+        :disabled="isDisableButton"
         @click="addSuggestionToBatch"
       >
         {{ __('Add suggestion to batch') }}
       </gl-deprecated-button>
-      <gl-deprecated-button
-        v-gl-tooltip.viewport="__('This also resolves the thread')"
-        class="btn-inverted js-apply-btn btn-grouped"
-        :disabled="isApplying"
-        variant="success"
-        @click="applySuggestion"
-      >
-        {{ __('Apply suggestion') }}
-      </gl-deprecated-button>
+      <span v-gl-tooltip.viewport="tooltipMessage" tabindex="0">
+        <gl-deprecated-button
+          class="btn-inverted js-apply-btn btn-grouped"
+          :disabled="isDisableButton"
+          variant="success"
+          @click="applySuggestion"
+        >
+          {{ __('Apply suggestion') }}
+        </gl-deprecated-button>
+      </span>
     </div>
   </div>
 </template>

changelogs/unreleased/30707-show-outdated-status-of-suggestions.yml

+---
+title: Show disabled suggestion button with tooltip message
+merge_request: 33357
+author:
+type: changed

locale/gitlab.pot

@@ -3799,6 +3799,9 @@ msgstr ""
 msgid "Can override approvers and approvals required per merge request"
 msgstr ""
 
+msgid "Can't apply as this line has changed or the suggestion already matches its content."
+msgstr ""
+
 msgid "Can't create snippet: %{err}"
 msgstr ""
 
@@ -22558,7 +22561,7 @@ msgstr ""
 msgid "This also resolves all related threads"
 msgstr ""
 
-msgid "This also resolves the thread"
+msgid "This also resolves the discussion"
 msgstr ""
 
 msgid "This application was created by %{link_to_owner}."

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

@@ -63,11 +63,9 @@ describe('Suggestion Diff component', () => {
     expect(addToBatchBtn.html().includes('Add suggestion to batch')).toBe(true);
   });
 
-  it('does not render apply suggestion and add to batch buttons if `canApply` is set to false', () => {
-    createComponent({ canApply: false });
-
-    expect(findApplyButton().exists()).toBe(false);
-    expect(findAddToBatchButton().exists()).toBe(false);
+  it('renders correct tooltip message for apply button', () => {
+    createComponent();
+    expect(wrapper.vm.tooltipMessage).toBe('This also resolves the discussion');
   });
 
   describe('when apply suggestion is clicked', () => {
@@ -84,7 +82,7 @@ describe('Suggestion Diff component', () => {
       });
     });
 
-    it('hides  apply suggestion and add to batch buttons', () => {
+    it('does not render apply suggestion and add to batch buttons', () => {
       expect(findApplyButton().exists()).toBe(false);
       expect(findAddToBatchButton().exists()).toBe(false);
     });
@@ -205,4 +203,23 @@ describe('Suggestion Diff component', () => {
       });
     });
   });
+
+  describe('canApply is set to false', () => {
+    beforeEach(() => {
+      createComponent({ canApply: false });
+    });
+
+    it('disables apply suggestion and add to batch buttons', () => {
+      expect(findApplyButton().exists()).toBe(true);
+      expect(findAddToBatchButton().exists()).toBe(true);
+      expect(findApplyButton().attributes('disabled')).toBe('true');
+      expect(findAddToBatchButton().attributes('disabled')).toBe('true');
+    });
+
+    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.",
+      );
+    });
+  });
 });