From dd7d8c50f9b97688ec063d72039bebf15d338d2f Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Mon, 22 Jun 2020 15:18:12 -0700
Subject: [PATCH] Add tooltip squash commits in MR widget

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

It will add a tooltip message when the
squash commit checkbox is disabled.
It will indicate whether it is required or not.
---
 .../components/states/squash_before_merge.vue | 13 +++++++++-
 locale/gitlab.pot                             |  3 +++
 .../mr_widget_squash_before_merge_spec.js     | 25 +++++++++++++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
index 14e0a9e18a3c61..efd58341a2d5a5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
@@ -1,6 +1,7 @@
 <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"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4993c61495bcc8..0a8faac6ce54dc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -19464,6 +19464,9 @@ msgstr ""
 msgid "Required approvals (%{approvals_given} given, you've approved)"
 msgstr ""
 
+msgid "Required in this project."
+msgstr ""
+
 msgid "Requirement"
 msgstr ""
 
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
index 5f5043285b8d0a..1542b0939aad10 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
+++ b/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({
-- 
GitLab