gitlab-org--gitlab-foss/app/assets/javascripts
Fatih Acet f9d5cb1340 Merge branch '19183-refactor-sidebar-js' into 'master'
Refactor sidebar logic for more predictable behavior

## What does this MR do?

Fixes a few bugs with the sidebar and "pin" functionality:

1. Pinned state would get reset when loading a page with a viewport smaller than 1024px (#19183)
2. Toggle buttons could occasionally end up in an invalid state in which the toggle is hidden from view at the same time the sidebar is collapsed.
    ![2016-09-03-09.39.07](/uploads/75d9a836ab58aae9f89f38cc29e90bbd/2016-09-03-09.39.07.gif)

3. Clicking outside the sidebar to trigger 'collapse' when below the 1024px breakpoint would work only if not pinned, even though pin status should only effect the sidebar above the 1024px breakpoint.
4. Code confusing with no single source of truth for the state of the sidebar.  Sometimes pinned state is inferred from the cookie, sometimes from the DOM.  Code to handle these functions was confusingly split across both `sidebar.js` and `application.js` for no apparent reason.

I've created a singleton ES6 class to handle the sidebar DOM manipulations, using the properties `isExpanded` and `isPinned` as the canonical state and providing a `renderState` method to sync the DOM with this state whenever it needs updating.  This avoids the possibility of invalid states caused by reliance on jQuery `toggleClass()` methods and makes the code much more readable/maintainable.

## Are there points in the code the reviewer needs to double check?

It is a substantial rewrite, so I could use another set of eyes to make sure nothing was left behind from the original implementation.

## Why was this MR needed?

I initially intended to just fix #19183 by modifying the code in place, but it proved to be a difficult mess and rather than add to the technical debt it made sense to write a more readable implementation of the sidebar functionality.

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #19183

See merge request !6169
2016-09-07 20:54:49 +00:00
..
behaviors Update toggler_behavior.js to toggle ajax loaded contents like diffs page. 2016-08-31 07:57:56 +00:00
blob Only load Ace on Snippets and file edit pages. 2016-08-18 21:48:10 +01:00
blob_edit Don't use global variables. 2016-08-18 21:48:11 +01:00
boards Reduce intermittent spec failures by making VueJS resource interceptor 2016-09-06 07:51:17 -04:00
commit ES6ify all the things! 2016-07-24 23:45:11 +03:00
diff_notes Fix jumping between discussions on changes tab 2016-08-18 18:14:47 -05:00
extensions ES6ify all the things! 2016-07-24 23:45:11 +03:00
graphs ES6ify all the things! 2016-07-24 23:45:11 +03:00
lib Merge branch 'reduce-contributions-calendar-payload' into 'master' 2016-08-26 02:19:40 +00:00
network ES6ify all the things! 2016-07-24 23:45:11 +03:00
profile ES6ify all the things! 2016-07-24 23:45:11 +03:00
snippet Don't use global variables. 2016-08-18 21:48:11 +01:00
templates Load issues and merge requests templates from repository 2016-08-16 15:50:17 -03:00
u2f ES6ify all the things! 2016-07-24 23:45:11 +03:00
users Fix contributions calendar month label truncation 2016-09-07 10:26:44 -05:00
abuse_reports.js.es6 Update abuse_reports.js.es6 with prettier window.gl assignment 2016-08-24 11:25:06 +00:00
activities.js Remove redundant js-timeago-pending from user activity log 2016-08-31 11:20:48 -05:00
admin.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
api.js Load issues and merge requests templates from repository 2016-08-16 15:50:17 -03:00
application.js refactor sidebar logic into singleton class 2016-09-07 14:02:21 -05:00
aside.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
autosave.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
awards_handler.js Replace animateEmoji timeout with eventListener 2016-09-06 09:39:43 -05:00
breakpoints.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
broadcast_message.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
build.js Merge branch 'master' into build-cancel-spinner 2016-08-30 10:43:09 +01:00
build_artifacts.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
build_variables.js.es6 add feature test 2016-09-06 14:42:43 +02:00
commit.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
commits.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
compare.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
compare_autocomplete.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
confirm_danger_modal.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
copy_to_clipboard.js Fixed issue with filtering by label on issue not updating dropdown 2016-08-17 17:17:39 +01:00
create_label.js.es6 Removed underscorejs from create label class 2016-08-17 17:17:39 +01:00
diff.js Add unfold links for Side-by-Side view 2016-08-04 09:09:59 +03:00
dispatcher.js Fix suggested colors options for new labels in the admin area 2016-08-31 19:54:06 -03:00
dropzone_input.js Rename markdown_preview routes to preview_markdown 2016-08-11 15:54:18 +02:00
due_date_select.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
files_comment_button.js Added unfold test to parallel and added 'diff discussion' context 2016-08-23 20:45:29 +01:00
flash.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
gfm_auto_complete.js.es6 Autocomplete based on names and aliases 2016-08-12 20:20:07 -05:00
gl_dropdown.js Completed project filter dropdown, still need to move it from inline to ProjectSelect.js (or different) 2016-09-01 14:35:34 +01:00
gl_form.js Remove delay when hitting Reply... button on page with a lot of discussions 2016-08-01 16:55:24 -07:00
group_avatar.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
groups.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
groups_select.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
importer_status.js Refactoring Import::BaseController#find_or_create_namespace 2016-08-31 16:54:15 -03:00
issuable.js.es6 Add issues filters reset btn (ES6-ified). 2016-09-02 20:30:34 +02:00
issuable_context.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
issuable_form.js Move to project dropdown with infinite scroll for better performance 2016-08-18 15:31:51 +02:00
issue.js Remove green outline from New branch unavailable button on issue page (!5858) 2016-08-24 17:23:06 +02:00
issue_status_select.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
issues-bulk-assignment.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
LabelManager.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
labels.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
labels_select.js Fixed escaping issue with labels filter 2016-08-31 11:41:16 +01:00
layout_nav.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
line_highlighter.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
logo.js Minor code refactor for inlining functions. 2016-08-30 08:02:29 +03:00
member_expiration_date.js Don’t add events in loop 2016-08-18 19:41:18 -05:00
merge_conflict_data_provider.js.es6 Fix hard coded plural text. 2016-08-13 00:30:44 +03:00
merge_conflict_resolver.js.es6 Keep committing ... spinner when conflict resolved 2016-08-19 12:12:50 +01:00
merge_request.js Hides jump to next button if only one discussion visible 2016-07-29 15:22:26 +01:00
merge_request_tabs.js Merge branch 'master' into diff-line-comment-vuejs 2016-08-18 09:21:40 -06:00
merge_request_widget.js Merge branch 'mc-ui' 2016-08-17 12:21:30 -05:00
merged_buttons.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
milestone.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
milestone_select.js Moved board store to namespaced gl object 2016-08-17 17:17:39 +01:00
namespace_select.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
new_branch_form.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
new_commit_form.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
notes.js Add textarea autoresize after comment 2016-09-01 13:57:07 -05:00
notifications_dropdown.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
notifications_form.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
pager.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
pipeline.js.es6 Remove index from pipeline toggles 2016-08-17 16:44:25 -05:00
preview_markdown.js Rename markdown_preview routes to preview_markdown 2016-08-11 15:54:18 +02:00
project.js use gitlab global root url as canonical base url for all javascript set cookies (closes #20435) 2016-08-24 22:11:28 -05:00
project_avatar.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
project_find_file.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
project_fork.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
project_import.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
project_members.js Add MemberExpirationDate JS helper 2016-08-18 14:14:22 +01:00
project_new.js Refactored code to rely less on IDs that could change 2016-09-02 14:51:36 +01:00
project_select.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
project_show.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
projects_list.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
protected_branch_access_dropdown.js.es6 Set default label if user unselects the option from dropdown 2016-08-21 00:21:32 -05:00
protected_branch_create.js.es6 Toggle dropdown disabled attribute 2016-08-21 00:20:57 -05:00
protected_branch_dropdown.js.es6 Prevent setting HTML directly from the JS 2016-08-05 17:19:01 -05:00
protected_branch_edit.js.es6 Do not update if one dropdown has not selected any option 2016-08-21 00:19:22 -05:00
protected_branch_edit_list.js.es6 Wrap classes with IIFE and define it inside gl namespace 2016-08-05 17:19:01 -05:00
right_sidebar.js use gitlab global root url as canonical base url for all javascript set cookies (closes #20435) 2016-08-24 22:11:28 -05:00
search.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
search_autocomplete.js review changes 2016-08-19 17:17:17 +01:00
shortcuts.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
shortcuts_blob.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
shortcuts_dashboard_navigation.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
shortcuts_find_file.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
shortcuts_issuable.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
shortcuts_navigation.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
shortcuts_network.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
sidebar.js.es6 sync sidebar DOM state on page:change to minimize split-second appearance of the sidebar in certain situations 2016-09-07 14:02:21 -05:00
single_file_diff.js Fixed issue with expand diff not initializing resolve buttons 2016-08-04 11:27:11 +01:00
snippets_list.js.es6 Convert SnippetsList to ES6 2016-09-05 17:38:20 +01:00
star.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
subscription.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
subscription_select.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
syntax_highlight.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
todos.js Fixed project filtering 2016-09-01 14:36:02 +01:00
tree.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
user.js.es6 removed null return - renamed 'placeTop' to 'placeProfileAvatarsToTop' 2016-09-01 14:51:53 -06:00
user_tabs.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
users_select.js Moved board store to namespaced gl object 2016-08-17 17:17:39 +01:00
wikis.js ES6ify all the things! 2016-07-24 23:45:11 +03:00
zen_mode.js ES6ify all the things! 2016-07-24 23:45:11 +03:00