Merge branch '223029-squash-commit-tooltip-mr-widget' into 'master'

Add tooltip to MR widget for  "Squash commits" option when at disabled state

Closes #223029

See merge request gitlab-org/gitlab!35081

app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -25,12 +26,22 @@ export default {
       default: false,
     },
   },
+  computed: {
+    tooltipTitle() {
+      return this.isDisabled ? __('Required in this project.') : false;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="inline">
-    <label :class="{ 'gl-text-gray-600': isDisabled }" data-testid="squashLabel">
+    <label
+      v-tooltip
+      :class="{ 'gl-text-gray-600': isDisabled }"
+      data-testid="squashLabel"
+      :data-title="tooltipTitle"
+    >
       <input
         :checked="value"
         :disabled="isDisabled"

locale/gitlab.pot

@@ -19531,6 +19531,9 @@ msgstr ""
 msgid "Required approvals (%{approvals_given} given, you've approved)"
 msgstr ""
 
+msgid "Required in this project."
+msgstr ""
+
 msgid "Requirement"
 msgstr ""
 

spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js

@@ -19,6 +19,8 @@ describe('Squash before merge component', () => {
     wrapper.destroy();
   });
 
+  const findLabel = () => wrapper.find('[data-testid="squashLabel"]');
+
   describe('checkbox', () => {
     const findCheckbox = () => wrapper.find('.js-squash-checkbox');
 
@@ -64,8 +66,6 @@ describe('Squash before merge component', () => {
   });
 
   describe('label', () => {
-    const findLabel = () => wrapper.find('[data-testid="squashLabel"]');
-
     describe.each`
       isDisabled | expectation
       ${true}    | ${'grays out text if it is true'}
@@ -84,6 +84,27 @@ describe('Squash before merge component', () => {
     });
   });
 
+  describe('tooltip', () => {
+    const tooltipTitle = () => findLabel().element.dataset.title;
+
+    it('does not render when isDisabled is false', () => {
+      createComponent({
+        value: true,
+        isDisabled: false,
+      });
+      expect(tooltipTitle()).toBeUndefined();
+    });
+
+    it('display message when when isDisabled is true', () => {
+      createComponent({
+        value: true,
+        isDisabled: true,
+      });
+
+      expect(tooltipTitle()).toBe('Required in this project.');
+    });
+  });
+
   describe('about link', () => {
     it('is not rendered if no help path is passed', () => {
       createComponent({