Merge branch '34060-simplified-general-project-settings' into 'master'

34060 Simply general project settings to use expanded panels

Closes #34060

See merge request !12620

10 files changed, 293 insertions, 239 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index ad5ff19ec58..5630940f5bb 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -348,6 +348,8 @@ import GpgBadges from './gpg_badges';
           break;
         case 'projects:edit':
           setupProjectEdit();
+          // Initialize expandable settings panels
+          initSettingsPanels();
           break;
         case 'projects:imports:show':
           new ProjectImport();
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d29421aa1b3..73603f20ef6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -36,7 +36,6 @@
   }
 
   select {
-    background: transparent;
     transition: background 2s ease-out;
 
     &.highlight-changes {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index d69a8e0995c..15df51e9c69 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -54,8 +54,7 @@
 .settings-content {
   max-height: 1px;
   overflow-y: scroll;
-  margin-right: -20px;
-  padding-right: 130px;
+  padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
 
   &.expanded {
@@ -87,6 +86,23 @@
     overflow: hidden;
     margin-top: 20px;
   }
+
+  .sub-section {
+    margin-bottom: 32px;
+    padding: 16px;
+    border: 1px solid $border-color;
+    background-color: $gray-light;
+  }
+
+  .bs-callout,
+  .checkbox:first-child,
+  .help-block {
+    margin-top: 0;
+  }
+
+  .label-light {
+    margin-bottom: 0;
+  }
 }
 
 .settings-list-icon {
diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml
index 818010bc7d3..cc5afa943cf 100644
--- a/app/views/projects/_merge_request_settings.html.haml
+++ b/app/views/projects/_merge_request_settings.html.haml
@@ -1,8 +1,3 @@
 - form = local_assigns.fetch(:form)
 
-%fieldset.features.merge-requests-feature.append-bottom-default
-  %hr
-  %h5.prepend-top-0
-    Merge Requests
-
-  = render 'projects/merge_request_merge_settings', form: form
+= render 'projects/merge_request_merge_settings', form: form
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 087cb804449..20fceda26dc 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -1,12 +1,19 @@
+- page_title "General"
 - @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
 
 = render "projects/settings/head"
+
 .project-edit-container
-  .row.prepend-top-default
-    .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
-        Project settings
-    .col-lg-8
+  %section.settings.general-settings
+    .settings-header
+      %h4
+        General project settings
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        Update your project name, description, avatar, and other general settings.
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
       .project-edit-errors
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
         %fieldset
@@ -35,89 +42,7 @@
           = f.label :tag_list, "Tags", class: 'label-light'
           = f.text_field :tag_list, value: @project.tag_list.sort.join(', '), maxlength: 2000, class: "form-control"
           %p.help-block Separate tags with commas.
-        %hr
-        %fieldset
-          %h5.prepend-top-0
-            Sharing & Permissions
-          .form_group.prepend-top-20.sharing-and-permissions
-            .row.js-visibility-select
-              .col-md-8
-                .label-light
-                  = label_tag :project_visibility, 'Project Visibility', class: 'label-light', for: :project_visibility_level
-                  = link_to icon('question-circle'), help_page_path("public_access/public_access")
-                %span.help-block
-              .col-md-4.visibility-select-container
-                = render('projects/visibility_select', model_method: :visibility_level, form: f, selected_level: @project.visibility_level)
-            = f.fields_for :project_feature do |feature_fields|
-              %fieldset.features
-                .row
-                  .col-md-8.project-feature
-                    = feature_fields.label :repository_access_level, "Repository", class: 'label-light'
-                    %span.help-block View and edit files in this project
-                  .col-md-4.js-repo-access-level
-                    = project_feature_access_select(:repository_access_level)
-
-                .row
-                  .col-md-8.project-feature.nested
-                    = feature_fields.label :merge_requests_access_level, "Merge requests", class: 'label-light'
-                    %span.help-block Submit changes to be merged upstream
-                  .col-md-4
-                    = project_feature_access_select(:merge_requests_access_level)
-
-                .row
-                  .col-md-8.project-feature.nested
-                    = feature_fields.label :builds_access_level, "Pipelines", class: 'label-light'
-                    %span.help-block Build, test, and deploy your changes
-                  .col-md-4
-                    = project_feature_access_select(:builds_access_level)
-
-                .row
-                  .col-md-8.project-feature
-                    = feature_fields.label :snippets_access_level, "Snippets", class: 'label-light'
-                    %span.help-block Share code pastes with others out of Git repository
-                  .col-md-4
-                    = project_feature_access_select(:snippets_access_level)
-
-                .row
-                  .col-md-8.project-feature
-                    = feature_fields.label :issues_access_level, "Issues", class: 'label-light'
-                    %span.help-block Lightweight issue tracking system for this project
-                  .col-md-4
-                    = project_feature_access_select(:issues_access_level)
-
-                .row
-                  .col-md-8.project-feature
-                    = feature_fields.label :wiki_access_level, "Wiki", class: 'label-light'
-                    %span.help-block Pages for project documentation
-                  .col-md-4
-                    = project_feature_access_select(:wiki_access_level)
-          .form-group
-            = render 'shared/allow_request_access', form: f
-          - if Gitlab.config.lfs.enabled && current_user.admin?
-            .row.js-lfs-enabled
-              .col-md-8
-                = f.label :lfs_enabled, 'LFS', class: 'label-light'
-                %span.help-block
-                  Git Large File Storage
-                  = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
-              .col-md-4
-                .select-wrapper
-                  = f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select select-control', data: { field: 'lfs_enabled' }
-                  = icon('chevron-down')
-        - if Gitlab.config.registry.enabled
-          .form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) }
-            .checkbox
-              = f.label :container_registry_enabled do
-                = f.check_box :container_registry_enabled
-                %strong Container Registry
-                %br
-                %span.descr Enable Container Registry for this project
-                = link_to icon('question-circle'), help_page_path('user/project/container_registry'), target: '_blank'
-
-        = render 'merge_request_settings', form: f
-
-        %hr
-        %fieldset.features.append-bottom-default
+        %fieldset.features
           %h5.prepend-top-0
             Project avatar
           .form-group
@@ -137,41 +62,114 @@
               = link_to 'Remove avatar', project_avatar_path(@project), data: { confirm: "Project avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-avatar"
         = f.submit 'Save changes', class: "btn btn-save"
 
-  .row.prepend-top-default
-  %hr
-  .row.prepend-top-default
-    .col-lg-4
-      %h4.prepend-top-0
-        Housekeeping
-      %p.append-bottom-0
-        %p
-          Runs a number of housekeeping tasks within the current repository,
-          such as compressing file revisions and removing unreachable objects.
-    .col-lg-8
-      = link_to 'Housekeeping', housekeeping_project_path(@project),
-          method: :post, class: "btn btn-default"
-  %hr
-  .row.prepend-top-default
-    .col-lg-4
-      %h4.prepend-top-0
-        Export project
-      %p.append-bottom-0
-        %p
-          Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
-        %p
-          Once the exported file is ready, you will receive a notification email with a download link.
+  %section.settings.sharing-permissions
+    .settings-header
+      %h4
+        Sharing and permissions
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        Enable or disable certain project features and choose access levels.
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
+      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
+        .form_group.sharing-and-permissions
+          .row.js-visibility-select
+            .col-md-8
+              .label-light
+                = label_tag :project_visibility, 'Project Visibility', class: 'label-light', for: :project_visibility_level
+                = link_to icon('question-circle'), help_page_path("public_access/public_access")
+              %span.help-block
+            .col-md-4.visibility-select-container
+              = render('projects/visibility_select', model_method: :visibility_level, form: f, selected_level: @project.visibility_level)
+          = f.fields_for :project_feature do |feature_fields|
+            %fieldset.features
+              .row
+                .col-md-8.project-feature
+                  = feature_fields.label :repository_access_level, "Repository", class: 'label-light'
+                  %span.help-block View and edit files in this project
+                .col-md-4.js-repo-access-level
+                  = project_feature_access_select(:repository_access_level)
 
-    .col-lg-8
+              .row
+                .col-md-8.project-feature.nested
+                  = feature_fields.label :merge_requests_access_level, "Merge requests", class: 'label-light'
+                  %span.help-block Submit changes to be merged upstream
+                .col-md-4
+                  = project_feature_access_select(:merge_requests_access_level)
 
-      - if @project.export_project_path
-        = link_to 'Download export',  download_export_project_path(@project),
-                rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
-        = link_to 'Generate new export',  generate_new_export_project_path(@project),
-                method: :post, class: "btn btn-default"
-      - else
-        = link_to 'Export project', export_project_path(@project),
-                method: :post, class: "btn btn-default"
+              .row
+                .col-md-8.project-feature.nested
+                  = feature_fields.label :builds_access_level, "Pipelines", class: 'label-light'
+                  %span.help-block Build, test, and deploy your changes
+                .col-md-4
+                  = project_feature_access_select(:builds_access_level)
+
+              .row
+                .col-md-8.project-feature
+                  = feature_fields.label :snippets_access_level, "Snippets", class: 'label-light'
+                  %span.help-block Share code pastes with others out of Git repository
+                .col-md-4
+                  = project_feature_access_select(:snippets_access_level)
+
+              .row
+                .col-md-8.project-feature
+                  = feature_fields.label :issues_access_level, "Issues", class: 'label-light'
+                  %span.help-block Lightweight issue tracking system for this project
+                .col-md-4
+                  = project_feature_access_select(:issues_access_level)
+
+              .row
+                .col-md-8.project-feature
+                  = feature_fields.label :wiki_access_level, "Wiki", class: 'label-light'
+                  %span.help-block Pages for project documentation
+                .col-md-4
+                  = project_feature_access_select(:wiki_access_level)
+        .form-group
+          = render 'shared/allow_request_access', form: f
+        - if Gitlab.config.lfs.enabled && current_user.admin?
+          .row.js-lfs-enabled.form-group.sharing-and-permissions
+            .col-md-8
+              = f.label :lfs_enabled, 'Git Large File Storage', class: 'label-light'
+              = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
+              %span.help-block Manages large files such as audio, video and graphics files.
+            .col-md-4
+              .select-wrapper
+                = f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select select-control', data: { field: 'lfs_enabled' }
+                = icon('chevron-down')
+        - if Gitlab.config.registry.enabled
+          .form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) }
+            .checkbox
+              = f.label :container_registry_enabled do
+                = f.check_box :container_registry_enabled
+                %strong Container Registry
+                %br
+                %span.descr Enable Container Registry for this project
+                = link_to icon('question-circle'), help_page_path('user/project/container_registry'), target: '_blank'
+        = f.submit 'Save changes', class: "btn btn-save"
+
+
+  %section.settings.merge-requests-feature{ style: ("display: none;" if @project.project_feature.send(:merge_requests_access_level) == 0) }
+    .settings-header
+      %h4
+        Merge request settings
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        Customize your merge request restrictions.
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
+      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "merge-request-settings-form" }, authenticity_token: true do |f|
+        = render 'merge_request_settings', form: f
+        = f.submit 'Save changes', class: "btn btn-save"
 
+  %section.settings
+    .settings-header
+      %h4
+        Export project
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
       .bs-callout.bs-callout-info
         %p.append-bottom-0
           %p
@@ -189,110 +187,117 @@
             %li Container registry images
             %li CI variables
             %li Any encrypted tokens
-  - if can? current_user, :archive_project, @project
-    %hr
-    .row.prepend-top-default
-      .col-lg-4
-        %h4.warning-title.prepend-top-0
-          - if @project.archived?
-            Unarchive project
-          - else
-            Archive project
-        %p.append-bottom-0
+      %p
+        Once the exported file is ready, you will receive a notification email with a download link.
+      - if @project.export_project_path
+        = link_to 'Download export',  download_export_project_path(@project),
+                rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
+        = link_to 'Generate new export',  generate_new_export_project_path(@project),
+                method: :post, class: "btn btn-default"
+      - else
+        = link_to 'Export project', export_project_path(@project),
+                method: :post, class: "btn btn-default"
+
+  %section.settings.advanced-settings
+    .settings-header
+      %h4
+        Advanced settings
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        Perform advanced options such as housekeeping, exporting, archiveing, renameing, transfering, or removeing your project.
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
+      .sub-section
+        %h4 Housekeeping
+        %p
+          Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.
+        = link_to 'Run housekeeping', housekeeping_project_path(@project),
+            method: :post, class: "btn btn-default"
+      - if can? current_user, :archive_project, @project
+        .sub-section
+          %h4.warning-title
+            - if @project.archived?
+              Unarchive project
+            - else
+              Archive project
           - if @project.archived?
-            Unarchiving the project will mark its repository as active. The project can be committed to.
+            %p
+              Unarchiving the project will mark its repository as active. The project can be committed to.
+              %strong Once active this project shows up in the search and on the dashboard.
+            = link_to 'Unarchive project', unarchive_project_path(@project),
+                data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
+                method: :post, class: "btn btn-success"
           - else
-            Archiving the project will mark its repository as read-only. It is hidden from the dashboard and doesn't show up in searches.
-      .col-lg-8
-        - if @project.archived?
-          %p
-            %strong Once active this project shows up in the search and on the dashboard.
-          = link_to 'Unarchive project', unarchive_project_path(@project),
-              data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
-              method: :post, class: "btn btn-success"
-        - else
-          %p
-            %strong Archived projects cannot be committed to!
-          = link_to 'Archive project', archive_project_path(@project),
-              data: { confirm: "Are you sure that you want to archive this project?\nAn archived project cannot be committed to." },
-              method: :post, class: "btn btn-warning"
-  %hr
-  .row.prepend-top-default
-    .col-lg-4
-      %h4.prepend-top-0.warning-title
-        Rename repository
-    .col-lg-8
-      = render 'projects/errors'
-      = form_for([@project.namespace.becomes(Namespace), @project]) do |f|
-        .form-group.project_name_holder
-          = f.label :name, class: 'label-light' do
-            Project name
-          .form-group
-            = f.text_field :name, class: "form-control"
-        .form-group
-          = f.label :path, class: 'label-light' do
-            %span Path
-          .form-group
-            .input-group
-              .input-group-addon
-                #{URI.join(root_url, @project.namespace.full_path)}/
-              = f.text_field :path, class: 'form-control'
-          %ul
-            %li Be careful. Renaming a project's repository can have unintended side effects.
-            %li You will need to update your local repositories to point to the new location.
-            - if @project.deployment_services.any?
-              %li Your deployment services will be broken, you will need to manually fix the services after renaming.
-        = f.submit 'Rename project', class: "btn btn-warning"
-  - if can?(current_user, :change_namespace, @project)
-    %hr
-    .row.prepend-top-default
-      .col-lg-4
-        %h4.prepend-top-0.danger-title
-          Transfer project to new group
-        %p.append-bottom-0
-          Please select the group you want to transfer this project to in the dropdown to the right.
-      .col-lg-8
-        = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } ) do |f|
+            %p
+              Archiving the project will mark its repository as read-only. It is hidden from the dashboard and doesn't show up in searches.
+              %strong Archived projects cannot be committed to!
+            = link_to 'Archive project', archive_project_path(@project),
+                data: { confirm: "Are you sure that you want to archive this project?\nAn archived project cannot be committed to." },
+                method: :post, class: "btn btn-warning"
+      .sub-section.rename-respository
+        %h4.warning-title
+          Rename repository
+        %p
+          Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
+        = render 'projects/errors'
+        = form_for([@project.namespace.becomes(Namespace), @project]) do |f|
+          .form-group.project_name_holder
+            = f.label :name, class: 'label-light' do
+              Project name
+            .form-group
+              = f.text_field :name, class: "form-control"
           .form-group
-            = label_tag :new_namespace_id, nil, class: 'label-light' do
-              %span  Select a new namespace
+            = f.label :path, class: 'label-light' do
+              %span Path
             .form-group
-              = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
+              .input-group
+                .input-group-addon
+                  #{URI.join(root_url, @project.namespace.full_path)}/
+                = f.text_field :path, class: 'form-control'
             %ul
-              %li Be careful. Changing the project's namespace can have unintended side effects.
-              %li You can only transfer the project to namespaces you manage.
+              %li Be careful. Renaming a project's repository can have unintended side effects.
               %li You will need to update your local repositories to point to the new location.
-              %li Project visibility level will be changed to match namespace rules when transfering to a group.
-          = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
-  - if @project.forked? && can?(current_user, :remove_fork_project, @project)
-    %hr
-    .row.prepend-top-default.append-bottom-default
-      .col-lg-4
-        %h4.prepend-top-0.danger-title
-          Remove fork relationship
-        %p.append-bottom-0
+              - if @project.deployment_services.any?
+                %li Your deployment services will be broken, you will need to manually fix the services after renaming.
+          = f.submit 'Rename project', class: "btn btn-warning"
+      - if can?(current_user, :change_namespace, @project)
+        .sub-section
+          %h4.danger-title
+            Transfer project
+          = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } ) do |f|
+            .form-group
+              = label_tag :new_namespace_id, nil, class: 'label-light' do
+                %span  Select a new namespace
+              .form-group
+                = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
+              %ul
+                %li Be careful. Changing the project's namespace can have unintended side effects.
+                %li You can only transfer the project to namespaces you manage.
+                %li You will need to update your local repositories to point to the new location.
+                %li Project visibility level will be changed to match namespace rules when transfering to a group.
+            = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
+      - if @project.forked? && can?(current_user, :remove_fork_project, @project)
+        .sub-section
+          %h4.danger-title
+            Remove fork relationship
           %p
             This will remove the fork relationship to source project
             = succeed "." do
               = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
-      .col-lg-8
-        = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_project_path(@project), method: :delete, remote: true, html: { class: 'transfer-project' }) do |f|
-          %p
-            %strong Once removed, the fork relationship cannot be restored and you will no longer be able to send merge requests to the source.
-          = button_to 'Remove fork relationship', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_message(@project) }
-  - if can?(current_user, :remove_project, @project)
-    %hr
-    .row.prepend-top-default.append-bottom-default
-      .col-lg-4
-        %h4.prepend-top-0.danger-title
-          Remove project
-        %p.append-bottom-0
-          Removing the project will delete its repository and all related resources including issues, merge requests etc.
-      .col-lg-8
-        = form_tag(project_path(@project), method: :delete) do
+          = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_project_path(@project), method: :delete, remote: true, html: { class: 'transfer-project' }) do |f|
+            %p
+              %strong Once removed, the fork relationship cannot be restored and you will no longer be able to send merge requests to the source.
+            = button_to 'Remove fork relationship', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_message(@project) }
+      - if can?(current_user, :remove_project, @project)
+        .sub-section
+          %h4.danger-title
+            Remove project
           %p
-            %strong Removed projects cannot be restored!
-          = button_to 'Remove project', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(@project) }
+            Removing the project will delete its repository and all related resources including issues, merge requests etc.
+          = form_tag(project_path(@project), method: :delete) do
+            %p
+              %strong Removed projects cannot be restored!
+            = button_to 'Remove project', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(@project) }
 
 .save-project-loader.hide
   .center
diff --git a/features/steps/project/project.rb b/features/steps/project/project.rb
index 170e2f16c80..0a89c1baf20 100644
--- a/features/steps/project/project.rb
+++ b/features/steps/project/project.rb
@@ -10,7 +10,9 @@ class Spinach::Features::Project < Spinach::FeatureSteps
   end
 
   step 'I save project' do
-    click_button 'Save changes'
+    page.within '.general-settings' do
+      click_button 'Save changes'
+    end
   end
 
   step 'I should see project with new settings' do
@@ -31,7 +33,9 @@ class Spinach::Features::Project < Spinach::FeatureSteps
       :project_avatar,
       File.join(Rails.root, 'spec', 'fixtures', 'banana_sample.gif')
     )
-    click_button 'Save changes'
+    page.within '.general-settings' do
+      click_button 'Save changes'
+    end
     @project.reload
   end
 
@@ -50,7 +54,9 @@ class Spinach::Features::Project < Spinach::FeatureSteps
       :project_avatar,
       File.join(Rails.root, 'spec', 'fixtures', 'banana_sample.gif')
     )
-    click_button 'Save changes'
+    page.within '.general-settings' do
+      click_button 'Save changes'
+    end
     @project.reload
   end
 
@@ -69,7 +75,9 @@ class Spinach::Features::Project < Spinach::FeatureSteps
 
   step 'change project default branch' do
     select 'fix', from: 'project_default_branch'
-    click_button 'Save changes'
+    page.within '.general-settings' do
+      click_button 'Save changes'
+    end
   end
 
   step 'I should see project default branch changed' do
diff --git a/features/steps/shared/project.rb b/features/steps/shared/project.rb
index f6edf93b311..00f7cded2ae 100644
--- a/features/steps/shared/project.rb
+++ b/features/steps/shared/project.rb
@@ -103,7 +103,7 @@ module SharedProject
   step 'I should see project settings' do
     expect(current_path).to eq edit_project_path(@project)
     expect(page).to have_content("Project name")
-    expect(page).to have_content("Sharing & Permissions")
+    expect(page).to have_content("Sharing and permissions")
   end
 
   def current_project
diff --git a/spec/features/projects/features_visibility_spec.rb b/spec/features/projects/features_visibility_spec.rb
index 4044202eb6b..24691629063 100644
--- a/spec/features/projects/features_visibility_spec.rb
+++ b/spec/features/projects/features_visibility_spec.rb
@@ -20,21 +20,25 @@ describe 'Edit Project Settings' do
           visit edit_project_path(project)
 
           select 'Disabled', from: "project_project_feature_attributes_#{tool_name}_access_level"
-          click_button 'Save changes'
+          page.within('.sharing-permissions') do
+            click_button 'Save changes'
+          end
           wait_for_requests
           expect(page).not_to have_selector(".shortcuts-#{shortcut_name}")
 
           select 'Everyone with access', from: "project_project_feature_attributes_#{tool_name}_access_level"
-          click_button 'Save changes'
+          page.within('.sharing-permissions') do
+            click_button 'Save changes'
+          end
           wait_for_requests
           expect(page).to have_selector(".shortcuts-#{shortcut_name}")
 
           select 'Only team members', from: "project_project_feature_attributes_#{tool_name}_access_level"
-          click_button 'Save changes'
+          page.within('.sharing-permissions') do
+            click_button 'Save changes'
+          end
           wait_for_requests
           expect(page).to have_selector(".shortcuts-#{shortcut_name}")
-
-          sleep 0.1
         end
       end
     end
@@ -174,7 +178,11 @@ describe 'Edit Project Settings' do
     it "disables repository related features" do
       select "Disabled", from: "project_project_feature_attributes_repository_access_level"
 
-      expect(find(".edit-project")).to have_selector("select.disabled", count: 2)
+      page.within('.sharing-permissions') do
+        click_button "Save changes"
+      end
+
+      expect(find(".sharing-permissions")).to have_selector("select.disabled", count: 2)
     end
 
     it "shows empty features project homepage" do
@@ -182,7 +190,9 @@ describe 'Edit Project Settings' do
       select "Disabled", from: "project_project_feature_attributes_issues_access_level"
       select "Disabled", from: "project_project_feature_attributes_wiki_access_level"
 
-      click_button "Save changes"
+      page.within('.sharing-permissions') do
+        click_button "Save changes"
+      end
       wait_for_requests
 
       visit project_path(project)
@@ -195,7 +205,9 @@ describe 'Edit Project Settings' do
       select "Disabled", from: "project_project_feature_attributes_issues_access_level"
       select "Disabled", from: "project_project_feature_attributes_wiki_access_level"
 
-      click_button "Save changes"
+      page.within('.sharing-permissions') do
+        click_button "Save changes"
+      end
       wait_for_requests
 
       visit activity_project_path(project)
@@ -236,7 +248,9 @@ describe 'Edit Project Settings' do
     end
 
     def save_changes_and_check_activity_tab
-      click_button "Save changes"
+      page.within('.sharing-permissions') do
+        click_button "Save changes"
+      end
       wait_for_requests
 
       visit activity_project_path(project)
diff --git a/spec/features/projects/project_settings_spec.rb b/spec/features/projects/project_settings_spec.rb
index 59603310f51..7d4ec2b4e68 100644
--- a/spec/features/projects/project_settings_spec.rb
+++ b/spec/features/projects/project_settings_spec.rb
@@ -14,7 +14,9 @@ describe 'Edit Project Settings' do
     it 'shows errors for invalid project name' do
       visit edit_project_path(project)
       fill_in 'project_name_edit', with: 'foo&bar'
-      click_button 'Save changes'
+      page.within('.general-settings') do
+        click_button 'Save changes'
+      end
       expect(page).to have_field 'project_name_edit', with: 'foo&bar'
       expect(page).to have_content "Name can contain only letters, digits, emojis, '_', '.', dash, space. It must start with letter, digit, emoji or '_'."
       expect(page).to have_button 'Save changes'
@@ -23,7 +25,9 @@ describe 'Edit Project Settings' do
     it 'shows a successful notice when the project is updated' do
       visit edit_project_path(project)
       fill_in 'project_name_edit', with: 'hello world'
-      click_button 'Save changes'
+      page.within('.general-settings') do
+        click_button 'Save changes'
+      end
       expect(page).to have_content "Project 'hello world' was successfully updated."
     end
   end
diff --git a/spec/features/projects/settings/merge_requests_settings_spec.rb b/spec/features/projects/settings/merge_requests_settings_spec.rb
index a011fab2333..104ce08d9f3 100644
--- a/spec/features/projects/settings/merge_requests_settings_spec.rb
+++ b/spec/features/projects/settings/merge_requests_settings_spec.rb
@@ -20,6 +20,9 @@ feature 'Project settings > Merge Requests', :js do
         expect(page).to have_content('Only allow merge requests to be merged if all discussions are resolved')
 
         select 'Disabled', from: "project_project_feature_attributes_merge_requests_access_level"
+        within('.sharing-permissions-form') do
+          click_on('Save changes')
+        end
 
         expect(page).not_to have_content('Only allow merge requests to be merged if the pipeline succeeds')
         expect(page).not_to have_content('Only allow merge requests to be merged if all discussions are resolved')
@@ -37,6 +40,9 @@ feature 'Project settings > Merge Requests', :js do
         expect(page).to have_content('Only allow merge requests to be merged if all discussions are resolved')
 
         select 'Everyone with access', from: "project_project_feature_attributes_builds_access_level"
+        within('.sharing-permissions-form') do
+          click_on('Save changes')
+        end
 
         expect(page).to have_content('Only allow merge requests to be merged if the pipeline succeeds')
         expect(page).to have_content('Only allow merge requests to be merged if all discussions are resolved')
@@ -55,6 +61,9 @@ feature 'Project settings > Merge Requests', :js do
       expect(page).not_to have_content('Only allow merge requests to be merged if all discussions are resolved')
 
       select 'Everyone with access', from: "project_project_feature_attributes_merge_requests_access_level"
+      within('.sharing-permissions-form') do
+        click_on('Save changes')
+      end
 
       expect(page).to have_content('Only allow merge requests to be merged if the pipeline succeeds')
       expect(page).to have_content('Only allow merge requests to be merged if all discussions are resolved')
@@ -73,7 +82,9 @@ feature 'Project settings > Merge Requests', :js do
 
     scenario 'when unchecked sets :printing_merge_request_link_enabled to false' do
       uncheck('project_printing_merge_request_link_enabled')
-      click_on('Save')
+      within('.merge-request-settings-form') do
+        click_on('Save changes')
+      end
 
       # Wait for save to complete and page to reload
       checkbox = find_field('project_printing_merge_request_link_enabled')