Configure Merge Widget "Squash commits"

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

Modify the Squash commits in the Merge Widget
to take in account of the Squash Options
configuration set in the Project Setting.

This is Part 2 of the FE implementation
for the Configurable defaults for "Squash commits" option feature.

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

@@ -45,7 +45,8 @@ export default {
       isMakingRequest: false,
       isMergingImmediately: false,
       commitMessage: this.mr.commitMessage,
-      squashBeforeMerge: this.mr.squash,
+      squashBeforeMerge: this.mr.squashIsSelected,
+      isSquashReadOnly: this.mr.squashIsReadonly,
       successSvg,
       warningSvg,
       squashCommitMessage: this.mr.squashCommitMessage,
@@ -106,7 +107,12 @@ export default {
       return this.isMergeButtonDisabled;
     },
     shouldShowSquashBeforeMerge() {
-      const { commitsCount, enableSquashBeforeMerge } = this.mr;
+      const { commitsCount, enableSquashBeforeMerge, squashIsReadonly, squashIsSelected } = this.mr;
+
+      if (squashIsReadonly && !squashIsSelected) {
+        return false;
+      }
+
       return enableSquashBeforeMerge && commitsCount > 1;
     },
     shouldShowMergeControls() {
@@ -344,7 +350,7 @@ export default {
                 v-if="shouldShowSquashBeforeMerge"
                 v-model="squashBeforeMerge"
                 :help-path="mr.squashBeforeMergeHelpPath"
-                :is-disabled="isMergeButtonDisabled"
+                :is-disabled="isSquashReadOnly"
               />
             </template>
             <template v-else>

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

@@ -30,7 +30,7 @@ export default {
 
 <template>
   <div class="inline">
-    <label>
+    <label :class="{ 'gl-text-gray-600': isDisabled }" data-testid="squashLabel">
       <input
         :checked="value"
         :disabled="isDisabled"

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -22,7 +22,10 @@ export default class MergeRequestStore {
     const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;
 
     this.squash = data.squash;
+    this.squashIsEnabledByDefault = data.squash_enabled_by_default;
+    this.squashIsReadonly = data.squash_readonly;
     this.enableSquashBeforeMerge = this.enableSquashBeforeMerge || true;
+    this.squashIsSelected = data.squash_readonly ? data.squash_on_merge : data.squash;
 
     this.iid = data.iid;
     this.title = data.title;

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

@@ -34,6 +34,9 @@ describe('ReadyToMerge', () => {
     ciStatus: null,
     sha: '12345678',
     squash: false,
+    squashIsEnabledByDefault: false,
+    squashIsReadonly: false,
+    squashIsSelected: false,
     commitMessage: 'This is the commit message',
     squashCommitMessage: 'This is the squash commit message',
     commitMessageWithDescription: 'This is the commit message description',

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

@@ -34,6 +34,9 @@ const createTestMr = customConfig => {
     ciStatus: null,
     sha: '12345678',
     squash: false,
+    squashIsEnabledByDefault: false,
+    squashIsReadonly: false,
+    squashIsSelected: false,
     commitMessage,
     squashCommitMessage,
     commitMessageWithDescription,
@@ -694,6 +697,37 @@ describe('ReadyToMerge', () => {
 
         expect(findCheckboxElement().exists()).toBeFalsy();
       });
+
+      describe('squash options', () => {
+        it.each`
+          squashState           | state           | prop            | expectation
+          ${'squashIsReadonly'} | ${'enabled'}    | ${'isDisabled'} | ${false}
+          ${'squashIsSelected'} | ${'selected'}   | ${'value'}      | ${false}
+          ${'squashIsSelected'} | ${'unselected'} | ${'value'}      | ${false}
+        `(
+          'is $state when squashIsReadonly returns $expectation ',
+          ({ squashState, prop, expectation }) => {
+            createLocalComponent({
+              mr: { commitsCount: 2, enableSquashBeforeMerge: true, [squashState]: expectation },
+            });
+
+            expect(findCheckboxElement().props(prop)).toBe(expectation);
+          },
+        );
+
+        it('is not rendered for "Do not allow" option', () => {
+          createLocalComponent({
+            mr: {
+              commitsCount: 2,
+              enableSquashBeforeMerge: true,
+              squashIsReadonly: true,
+              squashIsSelected: false,
+            },
+          });
+
+          expect(findCheckboxElement().exists()).toBe(false);
+        });
+      });
     });
 
     describe('commits count collapsible header', () => {
@@ -709,7 +743,7 @@ describe('ReadyToMerge', () => {
             mr: {
               ffOnlyEnabled: true,
               enableSquashBeforeMerge: true,
-              squash: true,
+              squashIsSelected: true,
               commitsCount: 2,
             },
           });
@@ -803,7 +837,7 @@ describe('ReadyToMerge', () => {
           createLocalComponent({
             mr: {
               ffOnlyEnabled: true,
-              squash: true,
+              squashIsSelected: true,
               enableSquashBeforeMerge: true,
               commitsCount: 2,
             },
@@ -824,7 +858,7 @@ describe('ReadyToMerge', () => {
         createLocalComponent({
           mr: {
             commitsCount: 2,
-            squash: true,
+            squashIsSelected: true,
             enableSquashBeforeMerge: true,
           },
         });
@@ -854,7 +888,7 @@ describe('ReadyToMerge', () => {
         createLocalComponent({
           mr: {
             commitsCount: 2,
-            squash: true,
+            squashIsSelected: true,
             enableSquashBeforeMerge: true,
           },
         });
@@ -872,7 +906,7 @@ describe('ReadyToMerge', () => {
 
       it('should  be rendered if squash is enabled and there is more than 1 commit', () => {
         createLocalComponent({
-          mr: { enableSquashBeforeMerge: true, squash: true, commitsCount: 2 },
+          mr: { enableSquashBeforeMerge: true, squashIsSelected: true, commitsCount: 2 },
         });
 
         expect(findCommitDropdownElement().exists()).toBeTruthy();

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

@@ -63,6 +63,27 @@ 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'}
+      ${false}   | ${'does not gray out text if it is false'}
+    `('isDisabled prop', ({ isDisabled, expectation }) => {
+      beforeEach(() => {
+        createComponent({
+          value: false,
+          isDisabled,
+        });
+      });
+
+      it(expectation, () => {
+        expect(findLabel().classes('gl-text-gray-600')).toBe(isDisabled);
+      });
+    });
+  });
+
   describe('about link', () => {
     it('is not rendered if no help path is passed', () => {
       createComponent({