Added back tooltip to disabled apply suggestion button

This was removed by accident in a recent change to allow
batch suggestions to have custom commit messages.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/342424

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

@@ -139,7 +139,7 @@ export default {
       <gl-loading-icon size="sm" class="d-flex-center mr-2" />
       <span>{{ applyingSuggestionsMessage }}</span>
     </div>
-    <div v-else-if="canApply" class="d-flex align-items-center">
+    <div v-else-if="isLoggedIn" class="d-flex align-items-center">
       <div v-if="isBatched">
         <gl-button
           class="btn-inverted js-remove-from-batch-btn btn-grouped"
@@ -149,9 +149,8 @@ export default {
           {{ __('Remove from batch') }}
         </gl-button>
       </div>
-      <div v-else>
+      <div v-else-if="!isDisableButton && suggestionsCount > 1">
         <gl-button
-          v-if="!isDisableButton && suggestionsCount > 1"
           class="btn-inverted js-add-to-batch-btn btn-grouped"
           data-qa-selector="add_suggestion_batch_button"
           :disabled="isDisableButton"

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

@@ -230,5 +230,14 @@ describe('Suggestion Diff component', () => {
       expect(tooltip.modifiers.viewport).toBe(true);
       expect(tooltip.value).toBe('This also resolves this thread');
     });
+
+    it('renders the inapplicable reason in the tooltip when button is not applicable', () => {
+      const inapplicableReason = 'lorem';
+      createComponent({ canApply: false, inapplicableReason, batchSuggestionsCount: 0 });
+      const tooltip = findTooltip();
+
+      expect(tooltip.modifiers.viewport).toBe(true);
+      expect(tooltip.value).toBe(inapplicableReason);
+    });
   });
 });