Port of "Simplified Repository Settings page" to EE

app/assets/javascripts/deploy_keys/components/app.vue

@@ -75,7 +75,7 @@
 </script>
 
 <template>
-  <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys">
+  <div class="append-bottom-default deploy-keys">
     <loading-icon
       v-if="isLoading && !hasKeys"
       size="2"

app/assets/javascripts/dispatcher.js

@@ -58,6 +58,7 @@ import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
 import ShortcutsBlob from './shortcuts_blob';
+import initSettingsPanels from './settings_panels';
 
 // EE-only
 import ApproversSelect from './approvers_select';
@@ -405,6 +406,8 @@ import AuditLogs from './audit_logs';
           // Initialize Protected Tag Settings
           new ProtectedTagCreate();
           new ProtectedTagEditList();
+          // Initialize expandable settings panels
+          initSettingsPanels();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();

app/assets/javascripts/settings_panels.js

+function expandSection($section) {
+  $section.find('.js-settings-toggle').text('Close');
+  $section.find('.settings-content').addClass('expanded').off('scroll').scrollTop(0);
+}
+
+function closeSection($section) {
+  $section.find('.js-settings-toggle').text('Expand');
+  $section.find('.settings-content').removeClass('expanded').on('scroll', () => expandSection($section));
+}
+
+function toggleSection($section) {
+  const $content = $section.find('.settings-content');
+  $content.removeClass('no-animate');
+  if ($content.hasClass('expanded')) {
+    closeSection($section);
+  } else {
+    expandSection($section);
+  }
+}
+
+export default function initSettingsPanels() {
+  $('.settings').each((i, elm) => {
+    const $section = $(elm);
+    $section.on('click', '.js-settings-toggle', () => toggleSection($section));
+    $section.find('.settings-content:not(.expanded)').on('scroll', () => expandSection($section));
+  });
+}

app/assets/stylesheets/pages/settings.scss

+@keyframes expandMaxHeight {
+  0% {
+    max-height: 0;
+  }
+
+  99% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: none;
+  }
+}
+
+@keyframes collapseMaxHeight {
+  0% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: 0;
+  }
+}
+
+.settings {
+  overflow: hidden;
+  border-bottom: 1px solid $gray-darker;
+
+  &:first-of-type {
+    margin-top: 10px;
+  }
+}
+
+.settings-header {
+  position: relative;
+  padding: 20px 110px 10px 0;
+
+  h4 {
+    margin-top: 0;
+  }
+
+  button {
+    position: absolute;
+    top: 20px;
+    right: 6px;
+    min-width: 80px;
+  }
+}
+
+.settings-content {
+  max-height: 1px;
+  overflow-y: scroll;
+  margin-right: -20px;
+  padding-right: 130px;
+  animation: collapseMaxHeight 300ms ease-out;
+
+  &.expanded {
+    max-height: none;
+    overflow-y: visible;
+    animation: expandMaxHeight 300ms ease-in;
+  }
+
+  &.no-animate {
+    animation: none;
+  }
+
+  @media(max-width: $screen-sm-max) {
+    padding-right: 20px;
+  }
+
+  &::before {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  &::after {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-top: 20px;
+  }
+}
+
 .settings-list-icon {
   color: $gl-text-color-secondary;
   font-size: $settings-icon-size;

app/views/projects/deploy_keys/_form.html.haml

@@ -2,7 +2,7 @@
   = form_errors(@deploy_keys.new_key)
   .form-group
     = f.label :title, class: "label-light"
-    = f.text_field :title, class: 'form-control', autofocus: true, required: true
+    = f.text_field :title, class: 'form-control', required: true
   .form-group
     = f.label :key, class: "label-light"
     = f.text_area :key, class: "form-control", rows: 5, required: true

app/views/projects/deploy_keys/_index.html.haml

-.row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
-    %h4.prepend-top-0
+- expanded = Rails.env.test?
+%section.settings
+  .settings-header
+    %h4
       Deploy Keys
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
     %p
       Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.
-  .col-lg-9
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
     %h5.prepend-top-0
       Create a new deploy key for this project
     = render @deploy_keys.form_partial_path
-  .col-lg-9.col-lg-offset-3
     %hr
     #js-deploy-keys{ data: { endpoint: namespace_project_deploy_keys_path } }

app/views/projects/mirrors/_show.html.haml

-.row
-  = form_errors(@project)
-.row.prepend-top-default.append-bottom-default
-  = form_for @project, url: namespace_project_mirror_path(@project.namespace, @project) do |f|
-    .col-lg-3
-      %h4.prepend-top-0
+- expanded = Rails.env.test?
+%section.settings.project-mirror-settings
+  .settings-header
+    %h4
       Pull from a remote repository
-      %p.light
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
       Set up your project to automatically have its branches, tags, and commits
       updated from an upstream repository every hour.
       = link_to 'Read more', help_page_path('workflow/repository_mirroring', anchor: 'pulling-from-a-remote-repository'), target: '_blank'
-    .col-lg-9
-      %h5.prepend-top-0
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = form_for @project, url: namespace_project_mirror_path(@project.namespace, @project) do |f|
+      %div
+        = form_errors(@project)
+      %h5
         Set up mirror repository
       = render "shared/mirror_update_button"
       - if @project.mirror_last_update_failed?
@@ -43,16 +46,22 @@
           They need to have at least master access to this project.
       - if @project.builds_enabled?
         = render "shared/mirror_trigger_builds_setting", f: f
-    .col-sm-12
-      %hr
-    .col-lg-3
-      %h4.prepend-top-0
+      = f.submit 'Save changes', class: 'btn btn-create', name: 'update_remote_mirror'
+
+%section.settings
+  .settings-header
+    %h4
       Push to a remote repository
-      %p.light
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
       Set up the remote repository that you want to update with the content of the current repository
       every time someone pushes to it.
       = link_to 'Read more', help_page_path('workflow/repository_mirroring', anchor: 'pushing-to-a-remote-repository'), target: '_blank'
-    .col-lg-9
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = form_for @project, url: namespace_project_mirror_path(@project.namespace, @project) do |f|
+      %div
+        = form_errors(@project)
       = render "shared/remote_mirror_update_button", remote_mirror: @remote_mirror
       - if @remote_mirror.last_error.present?
         .panel.panel-danger
@@ -76,4 +85,3 @@
           = rm_form.text_field :url, class: "form-control", placeholder: 'https://username:password@gitlab.company.com/group/project.git'
           = render "projects/mirrors/instructions"
         = f.submit 'Save changes', class: 'btn btn-create', name: 'update_remote_mirror'
-%hr

app/views/projects/protected_branches/_index.html.haml

+- expanded = Rails.env.test?
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('protected_branches')
 
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
+%section.settings
+  .settings-header
+    %h4
       Protected Branches
-    %p Keep stable branches secure and force developers to use merge requests.
-    %p.prepend-top-20
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
+      Keep stable branches secure and force developers to use merge requests.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    %p
       By default, protected branches are designed to:
       %ul
         %li prevent their creation, if not already created, from everybody except Masters
         %li prevent pushes from everybody except Masters
         %li prevent <strong>anyone</strong> from force pushing to the branch
         %li prevent <strong>anyone</strong> from deleting the branch
-      %p.append-bottom-0 Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
-  .col-lg-9
+      %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
+
     - if can? current_user, :admin_project, @project
       = render 'projects/protected_branches/create_protected_branch'
 

app/views/projects/protected_tags/_index.html.haml

+- expanded = Rails.env.test?
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('protected_tags')
 
-.row.prepend-top-default.append-bottom-default.js-protected-tags-container{ data: { "groups-autocomplete" => "#{autocomplete_project_groups_path(format: :json)}", "users-autocomplete" => "#{autocomplete_users_path(format: :json)}" } }
-  .col-lg-3
-    %h4.prepend-top-0
+%section.settings.js-protected-tags-container{ data: { "groups-autocomplete" => "#{autocomplete_project_groups_path(format: :json)}", "users-autocomplete" => "#{autocomplete_users_path(format: :json)}" } }
+  .settings-header
+    %h4
       Protected Tags
-    %p.prepend-top-20
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
+      Limit access to creating and updating tags.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    %p
       By default, protected tags are designed to:
       %ul
         %li Prevent tag creation by everybody except Masters
         %li Prevent <strong>anyone</strong> from updating the tag
         %li Prevent <strong>anyone</strong> from deleting the tag
-      %p.append-bottom-0 Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags"), class: "underlined-link"}.
-  .col-lg-9
+
+    %p Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags"), class: "underlined-link"}.
+
     - if can? current_user, :admin_project, @project
       = render 'projects/protected_tags/create_protected_tag'
 

app/views/projects/push_rules/_index.html.haml

-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
+- expanded = Rails.env.test?
+%section.settings
+  .settings-header
+    %h4
       Push Rules
-    %p.light
+    %button.btn.js-settings-toggle
+      = expanded ? 'Close' : 'Expand'
+    %p
       Push Rules outline what is accepted for this project.
-  .col-lg-9
-    %h5.prepend-top-0
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    %h5
       Add new push rule
     = form_for [@project.namespace.becomes(Namespace), @project, @push_rule] do |f|
       = form_errors(@push_rule)

app/views/projects/settings/repository/show.html.haml

 - page_title "Repository"
+- @content_class = "limit-container-width" unless fluid_layout
 = render "projects/settings/head"
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('deploy_keys')
 
-= render @deploy_keys
 = render "projects/push_rules/index"
 = render "projects/mirrors/show"
 
 = render "projects/protected_branches/index"
 = render "projects/protected_tags/index"
+= render @deploy_keys

spec/features/projects/settings/ee/push_rules_settings_spec.rb

@@ -41,7 +41,7 @@ describe 'Project settings > [EE] repository', feature: true do
     end
 
     it 'sets mirror user' do
-      page.within('.edit_project') do
+      page.within('.project-mirror-settings') do
         select2(user2.id, from: '#project_mirror_user_id')
 
         click_button('Save changes')