Add link to squash template help

Show hint about commit templates
regardless of merge commit editor visibility.
Change hint message to mention squash template
when squash is performed.

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

@@ -41,7 +41,6 @@ export default {
         rows="7"
         @input="$emit('input', $event.target.value)"
       ></textarea>
-      <slot name="text-muted"></slot>
     </div>
   </li>
 </template>

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

@@ -181,9 +181,16 @@ export default {
       return this.mr.canRemoveSourceBranch;
     },
     commitTemplateHelpPage() {
-      return helpPagePath('user/project/merge_requests/commit_templates.md', {
-        anchor: 'merge-commit-message-template',
-      });
+      return helpPagePath('user/project/merge_requests/commit_templates.md');
+    },
+    commitTemplateHintText() {
+      if (this.shouldShowSquashEdit && this.shouldShowMergeEdit) {
+        return this.$options.i18n.mergeAndSquashCommitTemplatesHintText;
+      }
+      if (this.shouldShowSquashEdit) {
+        return this.$options.i18n.squashCommitTemplateHintText;
+      }
+      return this.$options.i18n.mergeCommitTemplateHintText;
     },
     commits() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
@@ -509,6 +516,12 @@ export default {
     mergeCommitTemplateHintText: s__(
       'mrWidget|To change this default message, edit the template for merge commit messages. %{linkStart}Learn more.%{linkEnd}',
     ),
+    squashCommitTemplateHintText: s__(
+      'mrWidget|To change this default message, edit the template for squash commit messages. %{linkStart}Learn more.%{linkEnd}',
+    ),
+    mergeAndSquashCommitTemplatesHintText: s__(
+      'mrWidget|To change these default messages, edit the templates for both the merge and squash commit messages. %{linkStart}Learn more.%{linkEnd}',
+    ),
   },
 };
 </script>
@@ -674,23 +687,22 @@ export default {
                     :label="__('Merge commit message')"
                     input-id="merge-message-edit"
                     class="gl-m-0! gl-p-0!"
-                  >
-                    <template #text-muted>
-                      <p class="form-text text-muted">
-                        <gl-sprintf :message="$options.i18n.mergeCommitTemplateHintText">
-                          <template #link="{ content }">
-                            <gl-link
-                              :href="commitTemplateHelpPage"
-                              class="inline-link"
-                              target="_blank"
-                            >
-                              {{ content }}
-                            </gl-link>
-                          </template>
-                        </gl-sprintf>
-                      </p>
-                    </template>
-                  </commit-edit>
+                  />
+                  <li class="gl-m-0! gl-p-0!">
+                    <p class="form-text text-muted">
+                      <gl-sprintf :message="commitTemplateHintText">
+                        <template #link="{ content }">
+                          <gl-link
+                            :href="commitTemplateHelpPage"
+                            class="inline-link"
+                            target="_blank"
+                          >
+                            {{ content }}
+                          </gl-link>
+                        </template>
+                      </gl-sprintf>
+                    </p>
+                  </li>
                 </ul>
               </div>
               <div
@@ -792,19 +804,18 @@ export default {
               v-model="commitMessage"
               :label="__('Merge commit message')"
               input-id="merge-message-edit"
-            >
-              <template #text-muted>
-                <p class="form-text text-muted">
-                  <gl-sprintf :message="$options.i18n.mergeCommitTemplateHintText">
-                    <template #link="{ content }">
-                      <gl-link :href="commitTemplateHelpPage" class="inline-link" target="_blank">
-                        {{ content }}
-                      </gl-link>
-                    </template>
-                  </gl-sprintf>
-                </p>
-              </template>
-            </commit-edit>
+            />
+            <li>
+              <p class="form-text text-muted">
+                <gl-sprintf :message="commitTemplateHintText">
+                  <template #link="{ content }">
+                    <gl-link :href="commitTemplateHelpPage" class="inline-link" target="_blank">
+                      {{ content }}
+                    </gl-link>
+                  </template>
+                </gl-sprintf>
+              </p>
+            </li>
           </ul>
         </commits-header>
       </template>

locale/gitlab.pot

@@ -41666,9 +41666,15 @@ msgstr ""
 msgid "mrWidget|To approve this merge request, please enter your password. This project requires all approvals to be authenticated."
 msgstr ""
 
+msgid "mrWidget|To change these default messages, edit the templates for both the merge and squash commit messages. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "mrWidget|To change this default message, edit the template for merge commit messages. %{linkStart}Learn more.%{linkEnd}"
 msgstr ""
 
+msgid "mrWidget|To change this default message, edit the template for squash commit messages. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "mrWidget|To merge, a Jira issue key must be mentioned in the title or description."
 msgstr ""
 

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

@@ -3,7 +3,6 @@ import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit
 
 const testCommitMessage = 'Test commit message';
 const testLabel = 'Test label';
-const testTextMuted = 'Test text muted';
 const testInputId = 'test-input-id';
 
 describe('Commits edit component', () => {
@@ -64,7 +63,6 @@ describe('Commits edit component', () => {
     beforeEach(() => {
       createComponent({
         header: `<div class="test-header">${testCommitMessage}</div>`,
-        'text-muted': `<p class="test-text-muted">${testTextMuted}</p>`,
       });
     });
 
@@ -74,12 +72,5 @@ describe('Commits edit component', () => {
       expect(headerSlotElement.exists()).toBe(true);
       expect(headerSlotElement.text()).toBe(testCommitMessage);
     });
-
-    it('renders text-muted slot correctly', () => {
-      const textMutedElement = wrapper.find('.test-text-muted');
-
-      expect(textMutedElement.exists()).toBe(true);
-      expect(textMutedElement.text()).toBe(testTextMuted);
-    });
   });
 });

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

 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
+import { GlSprintf } from '@gitlab/ui';
 import simplePoll from '~/lib/utils/simple_poll';
 import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
 import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
@@ -487,6 +488,7 @@ describe('ReadyToMerge', () => {
     const findCommitEditElements = () => wrapper.findAll(CommitEdit);
     const findCommitDropdownElement = () => wrapper.find(CommitMessageDropdown);
     const findFirstCommitEditLabel = () => findCommitEditElements().at(0).props('label');
+    const findTipLink = () => wrapper.find(GlSprintf);
 
     describe('squash checkbox', () => {
       it('should be rendered when squash before merge is enabled and there is more than 1 commit', () => {
@@ -751,6 +753,12 @@ describe('ReadyToMerge', () => {
         expect(findCommitDropdownElement().exists()).toBeTruthy();
       });
     });
+
+    it('renders a tip including a link to docs on templates', () => {
+      createComponent();
+
+      expect(findTipLink().exists()).toBe(true);
+    });
   });
 
   describe('Merge request project settings', () => {