Move the compliance framework selector to a new expandable section

This moves the compliance framework selector from the Projects top
settings section to its own dedicated expandable section just after
badges. This work does not change the functionality of the compliance
framework selector other than moving it.

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/66429
EE: true

app/views/projects/edit.html.haml

@@ -54,6 +54,8 @@
   .settings-content
     = render 'shared/badges/badge_settings'
 
+= render_if_exists 'compliance_management/compliance_framework/project_settings', expanded: expanded
+
 = render_if_exists 'projects/settings/default_issue_template'
 
 = render 'projects/service_desk_settings'

app/views/projects/settings/_general.html.haml

@@ -19,8 +19,6 @@
         = f.text_field :topics, value: @project.topic_list.join(', '), maxlength: 2000, class: "form-control gl-form-input"
         %p.form-text.text-muted= _('Separate topics with commas.')
 
-    = render_if_exists 'compliance_management/compliance_framework/project_settings', f: f
-
     .row
       .form-group.col-md-9
         = f.label :description, _('Project description (optional)'), class: 'label-bold'

ee/app/views/compliance_management/compliance_framework/_project_settings.html.haml

 - user_has_edit_permissions = current_user.can?(:admin_compliance_framework, @project)
-.row
-  .form-group.col-md-9.gl-mb-6
-    - frameworks = @project.namespace.root_ancestor.compliance_management_frameworks
-    - if user_has_edit_permissions
-      = f.fields_for :compliance_framework_setting, ComplianceManagement::ComplianceFramework::ProjectSettings.new do |cf|
-        = cf.label :framework, class: 'gl-font-weight-bold' do
-          = _('Compliance framework (optional)')
-        - if frameworks.any?
-          - selected_default_framework = @project.compliance_framework_setting&.compliance_management_framework&.id
-          = cf.select :framework, options_for_select(frameworks.map { |fw| [fw.name.truncate(88), fw.id] }, selected_default_framework), { selected: '', prompt: _('Choose your framework'), include_blank: _('None') }, { class: 'form-control', disabled: false }
+- compliance_framework_doc_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index.md', anchor: 'compliance-frameworks') }
+
+%section.settings.compliance-framework.no-animate#js-compliance-framework{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Compliance framework')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %p= html_escape(_('Select a framework that applies to this project. %{linkStart}How are these added?%{linkEnd}')) % { linkStart: compliance_framework_doc_link, linkEnd: '</a>'.html_safe }
+
+  .settings-content
+    = form_for @project, html: { multipart: true, class: "compliance-framework-form" }, authenticity_token: true do |f|
+      - frameworks = @project.namespace.root_ancestor.compliance_management_frameworks
+
+      .form-group
+        - if user_has_edit_permissions
+          = f.fields_for :compliance_framework_setting, ComplianceManagement::ComplianceFramework::ProjectSettings.new do |cf|
+            = cf.label :framework, class: 'gl-font-weight-bold' do
+              = _('Compliance framework (optional)')
+            - if frameworks.any?
+              - selected_default_framework = @project.compliance_framework_setting&.compliance_management_framework&.id
+              = cf.select :framework, options_for_select(frameworks.map { |fw| [fw.name.truncate(88), fw.id] }, selected_default_framework), { selected: '', prompt: _('Choose your framework'), include_blank: _('None') }, { class: 'form-control', disabled: false }
+            - else
+              %p.form-text.text-muted
+                = _("No compliance frameworks are in use. Create one from the %{link} section in Group Settings.").html_safe % { link: link_to('Compliance frameworks', edit_group_path(@project.namespace.root_ancestor)).html_safe }
         - else
-          %p.form-text.text-muted
-            = _("No compliance frameworks are in use. Create one from the %{link} section in Group Settings.").html_safe % { link: link_to('Compliance frameworks', edit_group_path(@project.namespace.root_ancestor)).html_safe }
-    - else
-      = f.fields_for :compliance_framework_setting, ComplianceManagement::ComplianceFramework::ProjectSettings.new do |cf|
-        = cf.label :framework, class: 'gl-font-weight-bold' do
-          = _('Compliance framework')
-        - if frameworks.any?
-          - selected_framework = @project.compliance_framework_setting&.compliance_management_framework&.name&.truncate(88) || _('None')
-          = cf.text_field :framework, value: selected_framework, class: 'form-control read-only', disabled: true
-          %p.form-text.text-muted
-            = _("Customizable by owners.")
-        - else
-          %p.form-text.text-muted
-            = _("No compliance frameworks are in use.")
+          = f.fields_for :compliance_framework_setting, ComplianceManagement::ComplianceFramework::ProjectSettings.new do |cf|
+            = cf.label :framework, class: 'gl-font-weight-bold' do
+              = _('Compliance framework')
+            - if frameworks.any?
+              - selected_framework = @project.compliance_framework_setting&.compliance_management_framework&.name&.truncate(88) || _('None')
+              = cf.text_field :framework, value: selected_framework, class: 'form-control read-only', disabled: true
+              %p.form-text.text-muted
+                = _("Customizable by owners.")
+            - else
+              %p.form-text.text-muted
+                = _("No compliance frameworks are in use.")
+
+      - if user_has_edit_permissions && frameworks.any?
+        = f.submit _('Save changes'), class: "btn gl-button btn-confirm"

ee/spec/views/compliance_management/compliance_framework/_project_settings.html.haml_spec.rb

@@ -2,38 +2,38 @@
 
 require 'spec_helper'
 
-RSpec.describe 'projects/edit.html.haml' do
+RSpec.describe 'compliance_management/compliance_framework/_project_settings.html.haml' do
   let_it_be(:group) { create(:group) }
   let_it_be(:group_owner) { create(:user) }
   let_it_be(:project) { create(:project, namespace: group) }
 
   before do
     allow(view).to receive(:current_user).and_return(group_owner)
+    allow(view).to receive(:expanded).and_return(true)
     allow(group_owner).to receive(:can?).and_return(true)
     assign(:project, project)
     stub_licensed_features(custom_compliance_frameworks: true)
   end
 
+  it 'shows the section description' do
+    render
+
+    expect(rendered).to have_text 'Select a framework that applies to this project. How are these added?'
+  end
+
   context 'group has compliance frameworks' do
     let_it_be(:framework) { create(:compliance_framework, namespace: group, name: 'Custom framework 23') }
 
     it 'includes a dropdown including that framework' do
       render
 
-      expect(rendered).to match /Custom framework 23/
-    end
-
-    it 'does not include warning message' do
-      render
-
-      expect(rendered).not_to match /Customizable by owners./
+      expect(rendered).to have_select('project[compliance_framework_setting_attributes][framework]', with_options: ['Custom framework 23'])
     end
 
-    it 'contains the dropdown' do
+    it 'shows the submit button' do
       render
 
-      expect(rendered).to have_css('select[id=project_compliance_framework_setting_attributes_framework]')
-      expect(rendered).not_to have_css('select[id=project_compliance_framework_setting_attributes_framework][disabled="disabled"]')
+      expect(rendered).to have_button('Save changes')
     end
 
     context 'user is group maintainer' do
@@ -44,10 +44,10 @@ RSpec.describe 'projects/edit.html.haml' do
         allow(view).to receive(:current_user).and_return(maintainer)
       end
 
-      it 'includes warning message' do
+      it 'shows the no permissions text' do
         render
 
-        expect(rendered).to match /Customizable by owners./
+        expect(rendered).to have_text('Customizable by owners.')
       end
 
       it 'disables the dropdown' do
@@ -55,6 +55,10 @@ RSpec.describe 'projects/edit.html.haml' do
 
         expect(rendered).to have_css('input[id=project_compliance_framework_setting_attributes_framework][disabled="disabled"]')
       end
+
+      it 'hides the submit button' do
+        expect(rendered).not_to have_button('Save changes')
+      end
     end
   end
 
@@ -63,10 +67,33 @@ RSpec.describe 'projects/edit.html.haml' do
       group.compliance_management_frameworks.delete_all
     end
 
-    it 'shows a notification' do
+    it 'shows the empty text' do
       render
 
       expect(rendered).to match /No compliance frameworks are in use. Create one from the .* section in Group Settings./
     end
+
+    it 'hides the submit button' do
+      expect(rendered).not_to have_button('Save changes')
+    end
+
+    context 'user is group maintainer' do
+      let_it_be(:maintainer) { create(:user) }
+
+      before do
+        group.add_maintainer(maintainer)
+        allow(view).to receive(:current_user).and_return(maintainer)
+      end
+
+      it 'shows the empty text' do
+        render
+
+        expect(rendered).to have_text('No compliance frameworks are in use.')
+      end
+
+      it 'hides the submit button' do
+        expect(rendered).not_to have_button('Save changes')
+      end
+    end
   end
 end

locale/gitlab.pot

@@ -29357,6 +29357,9 @@ msgstr ""
 msgid "Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes."
 msgstr ""
 
+msgid "Select a framework that applies to this project. %{linkStart}How are these added?%{linkEnd}"
+msgstr ""
+
 msgid "Select a group to invite"
 msgstr ""