Add approval_suggestions feature flag

* Isolate changes behind feature flag [as much as possible])

app/controllers/projects_controller.rb

@@ -35,10 +35,11 @@ class ProjectsController < Projects::ApplicationController
   before_action :export_rate_limit, only: [:export, :download_export, :generate_new_export]
 
   # Experiments
-  before_action only: [:new, :create] do
+  before_action only: [:new, :create, :edit] do
     frontend_experimentation_tracking_data(:new_create_project_ui, 'click_tab')
     push_frontend_feature_flag(:new_create_project_ui) if experiment_enabled?(:new_create_project_ui)
     push_frontend_feature_flag(:service_desk_custom_address, @project)
+    push_frontend_feature_flag(:approval_suggestions, project)
   end
 
   layout :determine_layout

ee/app/assets/javascripts/approvals/components/modal_rule_create.vue

 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { mapState } from 'vuex';
 import { __ } from '~/locale';
 import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
@@ -9,6 +10,8 @@ export default {
     GlModalVuex,
     RuleForm,
   },
+  // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+  mixins: [glFeatureFlagsMixin()],
   props: {
     modalId: {
       type: String,
@@ -23,14 +26,23 @@ export default {
   computed: {
     ...mapState('createModal', {
       rule(state) {
+        // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+        if (this.isApprovalSuggestionsEnabled) {
           /*
            * rule-form component expects undefined if we pre-populate the form input,
            * otherwise populate with existing rule
            */
           return state.data?.initRuleField ? undefined : state.data;
+        } 
+          return state.data;
+        
       },
       originalData: 'data',
     }),
+    // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+    isApprovalSuggestionsEnabled() {
+      return Boolean(this.glFeatures.approvalSuggestions);
+    },
     initRuleFieldName() {
       return this.originalData?.initRuleField && this.originalData?.name
         ? this.originalData.name
@@ -59,11 +71,14 @@ export default {
     size="sm"
     @ok.prevent="submit"
   >
+    <!-- TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114 -->
     <rule-form
+      v-if="isApprovalSuggestionsEnabled"
       ref="form"
       :init-rule="rule"
       :is-mr-edit="isMrEdit"
       :init-rule-field-name="initRuleFieldName"
     />
+    <rule-form v-else ref="form" :init-rule="rule" :is-mr-edit="isMrEdit" />
   </gl-modal-vuex>
 </template>

ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue

 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { mapState, mapActions } from 'vuex';
 import { __, n__, sprintf } from '~/locale';
 import { RULE_TYPE_ANY_APPROVER, RULE_TYPE_REGULAR } from '../../constants';
@@ -20,6 +21,8 @@ export default {
     RuleBranches,
     UnconfiguredSecurityRule,
   },
+  // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+  mixins: [glFeatureFlagsMixin()],
   inject: {
     securityConfigurationPath: {
       type: String,
@@ -84,6 +87,10 @@ export default {
         },
       ];
     },
+    // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+    isApprovalSuggestionsEnabled() {
+      return Boolean(this.glFeatures.approvalSuggestions);
+    },
   },
   watch: {
     rules: {
@@ -99,8 +106,11 @@ export default {
     },
   },
   mounted() {
+    // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+    if (this.isApprovalSuggestionsEnabled) {
       this.setSecurityConfigurationEndpoint(this.securityConfigurationPath);
       this.fetchSecurityConfiguration();
+    }
   },
   methods: {
     ...mapActions(['addEmptyRule']),
@@ -193,6 +203,8 @@ export default {
         </tr>
       </template>
 
+      <!-- TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114 -->
+      <template v-if="isApprovalSuggestionsEnabled">
         <unconfigured-security-rule
           v-for="securityRule in securityRules"
           :key="securityRule.name"
@@ -203,5 +215,6 @@ export default {
           @enable-btn-clicked="openCreateModal({ name: securityRule.name, initRuleField: true })"
         />
       </template>
+    </template>
   </rules>
 </template>

ee/app/assets/javascripts/approvals/components/rule_form.vue

 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { mapState, mapActions } from 'vuex';
 import { groupBy, isNumber } from 'lodash';
 import { sprintf, __ } from '~/locale';
@@ -18,6 +19,8 @@ export default {
     ApproversSelect,
     BranchesSelect,
   },
+  // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+  mixins: [glFeatureFlagsMixin()],
   props: {
     initRule: {
       type: Object,
@@ -36,6 +39,9 @@ export default {
     },
   },
   data() {
+    // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+    // Computed props not yet initilized can't use isApprovalSuggestionsEnabled
+    if (this.glFeatures.approvalSuggestions) {
       return {
         name: this.initRuleFieldName,
         approvalsRequired: 1,
@@ -49,9 +55,28 @@ export default {
         containsHiddenGroups: false,
         ...this.getInitialData(),
       };
+    } 
+      return {
+        name: '',
+        approvalsRequired: 1,
+        minApprovalsRequired: 0,
+        approvers: [],
+        approversToAdd: [],
+        branches: [],
+        branchesToAdd: [],
+        showValidation: false,
+        isFallback: false,
+        containsHiddenGroups: false,
+        ...this.getInitialData(),
+      };
+    
   },
   computed: {
     ...mapState(['settings']),
+    // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+    isApprovalSuggestionsEnabled() {
+      return Boolean(this.glFeatures.approvalSuggestions);
+    },
     approversByType() {
       return groupBy(this.approvers, x => x.type);
     },
@@ -138,9 +163,14 @@ export default {
       return !this.settings.lockedApprovalsRuleName;
     },
     isNameDisabled() {
+      // TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114
+      if (this.isApprovalSuggestionsEnabled) {
         return (
           Boolean(this.isPersisted || this.initRuleFieldName) && READONLY_NAMES.includes(this.name)
         );
+      } 
+        return this.isPersisted && READONLY_NAMES.includes(this.name);
+      
     },
     removeHiddenGroups() {
       return this.containsHiddenGroups && !this.approversByType[TYPE_HIDDEN_GROUPS];