Merge branch '512674-allow-editing-squash-option-per-branch-rule' into 'master'

Draft: Allow editing squash option per branch rule

See merge request !181090



Merged-by: Jacques Erasmus <jerasmus@gitlab.com>

app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js

@@ -112,7 +112,7 @@ export const accessLevelsConfig = {
   },
 };
 
-export const SQUASH_SETTING_DO_NOT_ALLOW = 'do_not_allow';
-export const SQUASH_SETTING_ALLOW = 'allow';
-export const SQUASH_SETTING_ENCOURAGE = 'encourage';
-export const SQUASH_SETTING_REQUIRE = 'require';
+export const SQUASH_SETTING_DO_NOT_ALLOW = 'NEVER';
+export const SQUASH_SETTING_ALLOW = 'ALLOWED';
+export const SQUASH_SETTING_ENCOURAGE = 'ENCOURAGED';
+export const SQUASH_SETTING_REQUIRE = 'ALWAYS';

app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue

@@ -30,9 +30,11 @@ import {
   CHANGED_REQUIRE_CODEOWNER_APPROVAL,
 } from 'ee_else_ce/projects/settings/branch_rules/tracking/constants';
 import deleteBranchRuleMutation from '../../mutations/branch_rule_delete.mutation.graphql';
+import editSquashOptionMutation from '../../mutations/edit_squash_option.mutation.graphql';
 import BranchRuleModal from '../../../components/branch_rule_modal.vue';
 import Protection from './protection.vue';
 import AccessLevelsDrawer from './access_levels_drawer.vue';
+import SquashSettingsDrawer from './squash_settings_drawer.vue';
 import ProtectionToggle from './protection_toggle.vue';
 import {
   I18N,
@@ -69,6 +71,7 @@ export default {
     GlButton,
     BranchRuleModal,
     AccessLevelsDrawer,
+    SquashSettingsDrawer,
     PageHeading,
     CrudComponent,
     SettingsSection,
@@ -135,6 +138,7 @@ export default {
       matchingBranchesCount: null,
       isAllowedToMergeDrawerOpen: false,
       isAllowedToPushAndMergeDrawerOpen: false,
+      isSquashSettingsDrawerOpen: false,
       isRuleUpdating: false,
       isAllowForcePushLoading: false,
       isCodeOwnersLoading: false,
@@ -326,6 +330,29 @@ export default {
         });
       }
     },
+    onEditSquashSettings(selectedOption) {
+      this.isRuleUpdating = true;
+      const branchRuleId = this.branchRule.id;
+
+      this.$apollo
+        .mutate({
+          mutation: editSquashOptionMutation,
+          variables: { input: { branchRuleId, squashOption: selectedOption } },
+        })
+        .then(({ data: { branchRuleSquashOptionUpdate } }) => {
+          if (branchRuleSquashOptionUpdate?.errors.length) {
+            createAlert({ message: this.$options.i18n.updateBranchRuleError });
+            return;
+          }
+
+          this.$apollo.queries.project.refetch();
+        })
+        .catch(() => createAlert({ message: this.$options.i18n.updateBranchRuleError }))
+        .finally(() => {
+          this.isSquashSettingsDrawerOpen = false;
+          this.isRuleUpdating = false;
+        });
+    },
     editBranchRule({
       name = this.branchRule.name,
       branchProtection = null,
@@ -553,10 +580,11 @@ export default {
           v-if="showSquashSetting"
           :header="$options.i18n.squashSettingHeader"
           :empty-state-copy="$options.i18n.squashSettingEmptyState"
-          :is-edit-available="false"
+          :is-edit-available="canAdminProtectedBranches"
           :icon="null"
           class="gl-mt-5"
           data-testid="squash-setting-content"
+          @edit="isSquashSettingsDrawerOpen = true"
         >
           <template #description>
             <gl-sprintf :message="$options.i18n.squashSettingHelpText">
@@ -576,6 +604,14 @@ export default {
         </protection>
       </settings-section>
 
+      <squash-settings-drawer
+        :is-open="isSquashSettingsDrawerOpen"
+        :is-loading="isRuleUpdating"
+        :selected-option="squashOption.option"
+        @submit="onEditSquashSettings"
+        @close="isSquashSettingsDrawerOpen = false"
+      />
+
       <!-- Status checks -->
       <settings-section
         v-if="showStatusChecksSection"

app/assets/javascripts/projects/settings/branch_rules/components/view/squash_settings_drawer.vue

@@ -3,6 +3,7 @@ import { GlDrawer, GlButton, GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
+import { findSelectedOptionValueByLabel } from './utils';
 import {
   SQUASH_SETTING_DO_NOT_ALLOW,
   SQUASH_SETTING_ALLOW,
@@ -59,15 +60,18 @@ export default {
   },
   data() {
     return {
-      selected: this.selectedOption,
+      selected: findSelectedOptionValueByLabel(this.$options.OPTIONS, this.selectedOption),
     };
   },
   computed: {
     getDrawerHeaderHeight() {
       return getContentWrapperHeight();
     },
+    selectedOptionValue() {
+      return findSelectedOptionValueByLabel(this.$options.OPTIONS, this.selectedOption);
+    },
     hasChanged() {
-      return this.selected !== this.selectedOption;
+      return this.selected !== this.selectedOptionValue;
     },
   },
   methods: {

app/assets/javascripts/projects/settings/branch_rules/components/view/utils.js

+export const findSelectedOptionValueByLabel = (options, selectedOption) => options.find((option) => option.label === selectedOption)?.value;

app/assets/javascripts/projects/settings/branch_rules/mutations/edit_squash_option.mutation.graphql

+mutation ($input: BranchRuleSquashOptionUpdateInput!) {
+  branchRuleSquashOptionUpdate(input: $input) {
+    errors
+    squashOption {
+      option
+      helpText
+    }
+  }
+}