Merge branch...

Merge branch 'ee-35955-searchable-settings-puts-expand-collapse-toggle-in-an-invalid-state' into 'master'

Port of Resolve "Searchable settings puts expand/collapse toggle in an invalid state." to EE

See merge request gitlab-org/gitlab-ee!3153

app/assets/javascripts/settings_panels.js

-function expandSectionParent($section, $content) {
-  $section.addClass('expanded');
-  $content.off('animationend.expandSectionParent');
-}
-
 function expandSection($section) {
   $section.find('.js-settings-toggle').text('Collapse');
-
-  const $content = $section.find('.settings-content');
-  $content.addClass('expanded').off('scroll.expandSection').scrollTop(0);
-
-  if ($content.hasClass('no-animate')) {
-    expandSectionParent($section, $content);
-  } else {
-    $content.on('animationend.expandSectionParent', () => expandSectionParent($section, $content));
+  $section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
+  $section.addClass('expanded');
+  if (!$section.hasClass('no-animate')) {
+    $section.addClass('animating')
+      .one('animationend.animateSection', () => $section.removeClass('animating'));
   }
 }
 
 function closeSection($section) {
   $section.find('.js-settings-toggle').text('Expand');
-
-  const $content = $section.find('.settings-content');
-  $content.removeClass('expanded').on('scroll.expandSection', () => expandSection($section));
-
+  $section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
   $section.removeClass('expanded');
+  if (!$section.hasClass('no-animate')) {
+    $section.addClass('animating')
+      .one('animationend.animateSection', () => $section.removeClass('animating'));
+  }
 }
 
 function toggleSection($section) {
-  const $content = $section.find('.settings-content');
-  $content.removeClass('no-animate');
-  if ($content.hasClass('expanded')) {
+  $section.removeClass('no-animate');
+  if ($section.hasClass('expanded')) {
     closeSection($section);
   } else {
     expandSection($section);
@@ -39,10 +31,19 @@ export default function initSettingsPanels() {
   $('.settings').each((i, elm) => {
     const $section = $(elm);
     $section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
-    $section.find('.settings-content:not(.expanded)').on('scroll.expandSection', () => expandSection($section));
+
+    if (!$section.hasClass('expanded')) {
+      $section.find('.settings-content').on('scroll.expandSection', () => {
+        $section.removeClass('no-animate');
+        expandSection($section);
+      });
+    }
   });
 
   if (location.hash) {
-    expandSection($(location.hash));
+    const $target = $(location.hash);
+    if ($target.length && $target.hasClass('.settings')) {
+      expandSection($target);
+    }
   }
 }

app/assets/stylesheets/pages/settings.scss

@@ -23,15 +23,14 @@
 }
 
 .settings {
-  overflow: hidden;
   border-bottom: 1px solid $gray-darker;
 
   &:first-of-type {
     margin-top: 10px;
   }
 
-  &.expanded {
-    overflow: visible;
+  &.animating {
+    overflow: hidden;
   }
 }
 
@@ -56,14 +55,18 @@
   overflow-y: scroll;
   padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
+  // Keep the section from expanding when we scroll over it
+  pointer-events: none;
 
-  &.expanded {
+  .settings.expanded & {
     max-height: none;
     overflow-y: visible;
     animation: expandMaxHeight 300ms ease-in;
+    // Reset and allow clicks again when expanded
+    pointer-events: auto;
   }
 
-  &.no-animate {
+  .settings.no-animate & {
     animation: none;
   }
 

app/views/projects/_export.html.haml

@@ -3,7 +3,7 @@
 - project = local_assigns.fetch(:project)
 - expanded = Rails.env.test?
 
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Export project
@@ -11,7 +11,7 @@
       = 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) }
+  .settings-content
     .bs-callout.bs-callout-info
       %p.append-bottom-0
         %p

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

 - expanded = Rails.env.test?
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Deploy Keys
@@ -7,7 +7,7 @@
       = expanded ? 'Collapse' : '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.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     %h5.prepend-top-0
       Create a new deploy key for this project
     = render @deploy_keys.form_partial_path

app/views/projects/edit.html.haml

@@ -8,7 +8,7 @@
   = webpack_bundle_tag('service_desk')
 
 .project-edit-container
-  %section.settings.general-settings
+  %section.settings.general-settings.no-animate{ class: ('expanded' if expanded) }
     .settings-header
       %h4
         General project settings
@@ -16,7 +16,7 @@
         = expanded ? 'Collapse' : 'Expand'
       %p
         Update your project name, description, avatar, and other general settings.
-    .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .settings-content
       .project-edit-errors
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
         %fieldset
@@ -67,7 +67,7 @@
               = 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"
 
-  %section.settings.sharing-permissions
+  %section.settings.sharing-permissions.no-animate{ class: ('expanded' if expanded) }
     .settings-header
       %h4
         Permissions
@@ -75,7 +75,7 @@
         = expanded ? 'Collapse' : 'Expand'
       %p
         Enable or disable certain project features and choose access levels.
-    .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .settings-content
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
         %script.js-project-permissions-form-data{ type: "application/json" }= project_permissions_panel_data(@project)
         .js-project-permissions-form
@@ -83,7 +83,7 @@
 
   = render 'projects/ee/issues_settings'
 
-  %section.settings.merge-requests-feature{ class: ("hidden" if @project.project_feature.send(:merge_requests_access_level) == 0) }
+  %section.settings.merge-requests-feature.no-animate{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
     .settings-header
       %h4
         Merge request settings
@@ -91,7 +91,7 @@
         = expanded ? 'Collapse' : 'Expand'
       %p
         Customize your merge request restrictions.
-    .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .settings-content
       = render 'shared/promotions/promote_mr_features'
 
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "merge-request-settings-form" }, authenticity_token: true do |f|
@@ -102,7 +102,7 @@
 
   = render 'export', project: @project
 
-  %section.settings.advanced-settings
+  %section.settings.advanced-settings.no-animate{ class: ('expanded' if expanded) }
     .settings-header
       %h4
         Advanced settings
@@ -110,7 +110,7 @@
         = expanded ? 'Collapse' : 'Expand'
       %p
         Perform advanced options such as housekeeping, archiving, renaming, transferring, or removing your project.
-    .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .settings-content
       .sub-section
         %h4 Housekeeping
         %p

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

@@ -2,7 +2,7 @@
 - import_data = @project.import_data || @project.build_import_data
 - protocols = AddressableUrlValidator::DEFAULT_OPTIONS[:protocols].join('|')
 
-%section.settings.project-mirror-settings
+%section.settings.project-mirror-settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Pull from a remote repository
@@ -12,7 +12,7 @@
       Set up your project to automatically have its branches, tags, and commits
       updated from an upstream repository.
       = link_to 'Read more', help_page_path('workflow/repository_mirroring', anchor: 'pulling-from-a-remote-repository'), target: '_blank'
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     = form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors project-mirror-push-form js-project-mirror-push-form', autocomplete: 'false', data: { project_mirror_endpoint: ssh_host_keys_project_mirror_path(@project, :json) } } do |f|
       %div
         = form_errors(@project)

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

 - expanded = Rails.env.test?
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Push to a remote repository
@@ -9,7 +9,7 @@
       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'
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     = form_for @project, url: project_mirror_path(@project) do |f|
       %div
         = form_errors(@project)

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

 - expanded = Rails.env.test?
 
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Protected Branches
@@ -8,7 +8,7 @@
       = expanded ? 'Collapse' : 'Expand'
     %p
       Keep stable branches secure and force developers to use merge requests.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     %p
       By default, protected branches are designed to:
       %ul

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

 - expanded = Rails.env.test?
 
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Protected Tags
@@ -8,7 +8,7 @@
       = expanded ? 'Collapse' : 'Expand'
     %p
       Limit access to creating and updating tags.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     %p
       By default, protected tags are designed to:
       %ul

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

 - return unless @project.feature_available?(:push_rules)
 
 - expanded = Rails.env.test?
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Push Rules
@@ -9,7 +9,7 @@
       = expanded ? 'Collapse' : 'Expand'
     %p
       Push Rules outline what is accepted for this project.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     %h5
       Add new push rule
     = form_for [@project.namespace.becomes(Namespace), @project, @push_rule] do |f|

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

@@ -4,7 +4,7 @@
 
 - expanded = Rails.env.test?
 
-%section.settings#js-general-pipeline-settings
+%section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       General pipelines settings
@@ -12,10 +12,10 @@
       = expanded ? 'Collapse' : 'Expand'
     %p
       Update your CI/CD configuration, like job timeout or Auto DevOps.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     = render 'projects/pipelines_settings/show'
 
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Runners settings
@@ -23,10 +23,10 @@
       = expanded ? 'Collapse' : 'Expand'
     %p
       Register and see your runners for this project.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     = render 'projects/runners/index'
 
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Secret variables
@@ -35,10 +35,10 @@
       = expanded ? 'Collapse' : 'Expand'
     %p
       = render "ci/variables/content"
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     = render 'ci/variables/index'
 
-%section.settings
+%section.settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       Pipeline triggers
@@ -48,5 +48,5 @@
       Triggers can force a specific branch or tag to get rebuilt with an API call.  These tokens will
       impersonate their associated user including their access to projects and their project
       permissions.
-  .settings-content.no-animate{ class: ('expanded' if expanded) }
+  .settings-content
     = render 'projects/triggers/index'

ee/app/views/projects/ee/_issues_settings.html.haml

 - if @project.feature_available?(:issuable_default_templates)
   - expanded = Rails.env.test?
-  %section.settings.issues-feature{ class: ("hidden" if @project.project_feature.send(:issues_access_level) == 0) }
+  %section.settings.issues-feature.no-animate{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:issues_access_level) == 0)] }
     .settings-header
       %h4
         Issue settings
@@ -8,7 +8,7 @@
         = expanded ? 'Collapse' : 'Expand'
       %p
         Customize your issue restrictions.
-    .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .settings-content
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "issue-settings-form" }, authenticity_token: true do |f|
         .form-group
           = f.label :issues_template, class: 'label-light' do

ee/app/views/projects/ee/_service_desk_settings.html.haml

 - if EE::Gitlab::ServiceDesk.enabled?(project: @project) || (show_promotions? && show_callout?('promote_service_desk_dismissed'))
   - expanded = Rails.env.test?
-  %section.settings.js-service-desk-setting-wrapper
+  %section.settings.js-service-desk-setting-wrapper.no-animate{ class: ('expanded' if expanded) }
     .settings-header
       %h4
         Service Desk
@@ -9,7 +9,7 @@
       %p
         Customize your service desk settings.
         = link_to "Learn more about service desk.", help_page_path('user/project/service_desk')
-    .settings-content.no-animate{ class: ('expanded' if expanded) }
+    .settings-content
       - if EE::Gitlab::ServiceDesk.enabled?(project: @project)
         .js-service-desk-setting-root{ data: { endpoint: project_service_desk_path(@project),
           enabled: "#{@project.service_desk_enabled}",