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) {
-        /*
-         * rule-form component expects undefined if we pre-populate the form input,
-         * otherwise populate with existing rule
-         */
-        return state.data?.initRuleField ? undefined : state.data;
+        // 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() {
-    this.setSecurityConfigurationEndpoint(this.securityConfigurationPath);
-    this.fetchSecurityConfiguration();
+    // 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,15 +203,18 @@ export default {
         </tr>
       </template>
 
-      <unconfigured-security-rule
-        v-for="securityRule in securityRules"
-        :key="securityRule.name"
-        :configuration="configuration"
-        :rules="rules"
-        :is-loading="isRulesLoading"
-        :match-rule="securityRule"
-        @enable-btn-clicked="openCreateModal({ name: securityRule.name, initRuleField: true })"
-      />
+      <!-- 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"
+          :configuration="configuration"
+          :rules="rules"
+          :is-loading="isRulesLoading"
+          :match-rule="securityRule"
+          @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,22 +39,44 @@ export default {
     },
   },
   data() {
-    return {
-      name: this.initRuleFieldName,
-      approvalsRequired: 1,
-      minApprovalsRequired: 0,
-      approvers: [],
-      approversToAdd: [],
-      branches: [],
-      branchesToAdd: [],
-      showValidation: false,
-      isFallback: false,
-      containsHiddenGroups: false,
-      ...this.getInitialData(),
-    };
+    // 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,
+        minApprovalsRequired: 0,
+        approvers: [],
+        approversToAdd: [],
+        branches: [],
+        branchesToAdd: [],
+        showValidation: false,
+        isFallback: false,
+        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() {
-      return (
-        Boolean(this.isPersisted || this.initRuleFieldName) && READONLY_NAMES.includes(this.name)
-      );
+      // 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];