From b63686ce6ae96a6fca915d82b918f38b23c4a399 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 12 Jan 2018 01:32:41 -0600 Subject: Generalize protected branch/tag dropdowns Remove duplicate ee code This was generalized for usage in the new variable table design, see https://gitlab.com/gitlab-org/gitlab-ce/issues/39118#note_53615249 Conflicts: app/assets/stylesheets/pages/projects.scss ee/app/assets/javascripts/protected_branches/protected_branch_create.js ee/app/assets/javascripts/protected_tags/protected_tag_create.js ee/app/views/projects/protected_branches/ee/_dropdown.html.haml --- app/assets/javascripts/create_item_dropdown.js | 91 ++++++++++++++++++++++ .../protected_branches/protected_branch_create.js | 12 ++- .../protected_branch_dropdown.js | 90 --------------------- .../protected_tags/protected_tag_create.js | 11 ++- .../protected_tags/protected_tag_dropdown.js | 88 --------------------- app/assets/stylesheets/framework/dropdowns.scss | 10 +++ app/assets/stylesheets/pages/projects.scss | 11 --- .../protected_branches/shared/_dropdown.html.haml | 2 +- .../protected_tags/shared/_dropdown.html.haml | 2 +- 9 files changed, 121 insertions(+), 196 deletions(-) create mode 100644 app/assets/javascripts/create_item_dropdown.js delete mode 100644 app/assets/javascripts/protected_branches/protected_branch_dropdown.js delete mode 100644 app/assets/javascripts/protected_tags/protected_tag_dropdown.js (limited to 'app') diff --git a/app/assets/javascripts/create_item_dropdown.js b/app/assets/javascripts/create_item_dropdown.js new file mode 100644 index 00000000000..c3eceb285f5 --- /dev/null +++ b/app/assets/javascripts/create_item_dropdown.js @@ -0,0 +1,91 @@ +import _ from 'underscore'; + +export default class CreateItemDropdown { + /** + * @param {Object} options containing + * `$dropdown` target element + * `onSelect` event callback + * $dropdown must be an element created using `dropdown_tag()` rails helper + */ + constructor(options) { + this.defaultToggleLabel = options.defaultToggleLabel; + this.fieldName = options.fieldName; + this.onSelect = options.onSelect || (() => {}); + this.getDataOption = options.getData; + this.$dropdown = options.$dropdown; + this.$dropdownContainer = this.$dropdown.parent(); + this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer'); + this.$createButton = this.$dropdownContainer.find('.js-dropdown-create-new-item'); + + this.buildDropdown(); + this.bindEvents(); + + // Hide footer + this.toggleFooter(true); + } + + buildDropdown() { + this.$dropdown.glDropdown({ + data: this.getData.bind(this), + filterable: true, + remote: false, + search: { + fields: ['title'], + }, + selectable: true, + toggleLabel(selected) { + return (selected && 'id' in selected) ? selected.title : this.defaultToggleLabel; + }, + fieldName: this.fieldName, + text(item) { + return _.escape(item.title); + }, + id(item) { + return _.escape(item.id); + }, + onFilter: this.toggleCreateNewButton.bind(this), + clicked: (options) => { + options.e.preventDefault(); + this.onSelect(); + }, + }); + } + + bindEvents() { + this.$createButton.on('click', this.onClickCreateWildcard.bind(this)); + } + + onClickCreateWildcard(e) { + e.preventDefault(); + + // Refresh the dropdown's data, which ends up calling `getData` + this.$dropdown.data('glDropdown').remote.execute(); + this.$dropdown.data('glDropdown').selectRowAtIndex(); + } + + getData(term, callback) { + this.getDataOption(term, (data = []) => { + callback(data.concat(this.selectedItem || [])); + }); + } + + toggleCreateNewButton(item) { + if (item) { + this.selectedItem = { + title: item, + id: item, + text: item, + }; + + this.$dropdownContainer + .find('.js-dropdown-create-new-item code') + .text(item); + } + + this.toggleFooter(!item); + } + + toggleFooter(toggleState) { + this.$dropdownFooter.toggleClass('hidden', toggleState); + } +} diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js index 0a9fdb074e5..2948baeab11 100644 --- a/app/assets/javascripts/protected_branches/protected_branch_create.js +++ b/app/assets/javascripts/protected_branches/protected_branch_create.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown'; -import ProtectedBranchDropdown from './protected_branch_dropdown'; +import CreateItemDropdown from '../create_item_dropdown'; import AccessorUtilities from '../lib/utils/accessor'; const PB_LOCAL_STORAGE_KEY = 'protected-branches-defaults'; @@ -35,10 +35,12 @@ export default class ProtectedBranchCreate { onSelect: this.onSelectCallback, }); - // Protected branch dropdown - this.protectedBranchDropdown = new ProtectedBranchDropdown({ + this.createItemDropdown = new CreateItemDropdown({ $dropdown: $protectedBranchDropdown, + defaultToggleLabel: 'Protected Branch', + fieldName: 'protected_branch[name]', onSelect: this.onSelectCallback, + getData: ProtectedBranchCreate.getProtectedBranches, }); this.loadPreviousSelection($allowedToMergeDropdown.data('glDropdown'), $allowedToPushDropdown.data('glDropdown')); @@ -60,6 +62,10 @@ export default class ProtectedBranchCreate { this.$form.find('input[type="submit"]').attr('disabled', completedForm); } + static getProtectedBranches(term, callback) { + callback(gon.open_branches); + } + loadPreviousSelection(mergeDropdown, pushDropdown) { let mergeIndex = 0; let pushIndex = 0; diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js deleted file mode 100644 index 678882a8d2c..00000000000 --- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js +++ /dev/null @@ -1,90 +0,0 @@ -import _ from 'underscore'; - -export default class ProtectedBranchDropdown { - /** - * @param {Object} options containing - * `$dropdown` target element - * `onSelect` event callback - * $dropdown must be an element created using `dropdown_branch()` rails helper - */ - constructor(options) { - this.onSelect = options.onSelect; - this.$dropdown = options.$dropdown; - this.$dropdownContainer = this.$dropdown.parent(); - this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer'); - this.$protectedBranch = this.$dropdownContainer.find('.js-create-new-protected-branch'); - - this.buildDropdown(); - this.bindEvents(); - - // Hide footer - this.toggleFooter(true); - } - - buildDropdown() { - this.$dropdown.glDropdown({ - data: this.getProtectedBranches.bind(this), - filterable: true, - remote: false, - search: { - fields: ['title'], - }, - selectable: true, - toggleLabel(selected) { - return (selected && 'id' in selected) ? selected.title : 'Protected Branch'; - }, - fieldName: 'protected_branch[name]', - text(protectedBranch) { - return _.escape(protectedBranch.title); - }, - id(protectedBranch) { - return _.escape(protectedBranch.id); - }, - onFilter: this.toggleCreateNewButton.bind(this), - clicked: (options) => { - options.e.preventDefault(); - this.onSelect(); - }, - }); - } - - bindEvents() { - this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this)); - } - - onClickCreateWildcard(e) { - e.preventDefault(); - - // Refresh the dropdown's data, which ends up calling `getProtectedBranches` - this.$dropdown.data('glDropdown').remote.execute(); - this.$dropdown.data('glDropdown').selectRowAtIndex(); - } - - getProtectedBranches(term, callback) { - if (this.selectedBranch) { - callback(gon.open_branches.concat(this.selectedBranch)); - } else { - callback(gon.open_branches); - } - } - - toggleCreateNewButton(branchName) { - if (branchName) { - this.selectedBranch = { - title: branchName, - id: branchName, - text: branchName, - }; - - this.$dropdownContainer - .find('.js-create-new-protected-branch code') - .text(branchName); - } - - this.toggleFooter(!branchName); - } - - toggleFooter(toggleState) { - this.$dropdownFooter.toggleClass('hidden', toggleState); - } -} diff --git a/app/assets/javascripts/protected_tags/protected_tag_create.js b/app/assets/javascripts/protected_tags/protected_tag_create.js index 91bd140bd12..d1e4a75c17b 100644 --- a/app/assets/javascripts/protected_tags/protected_tag_create.js +++ b/app/assets/javascripts/protected_tags/protected_tag_create.js @@ -1,5 +1,5 @@ import ProtectedTagAccessDropdown from './protected_tag_access_dropdown'; -import ProtectedTagDropdown from './protected_tag_dropdown'; +import CreateItemDropdown from '../create_item_dropdown'; export default class ProtectedTagCreate { constructor() { @@ -24,9 +24,12 @@ export default class ProtectedTagCreate { $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0); // Protected tag dropdown - this.protectedTagDropdown = new ProtectedTagDropdown({ + this.createItemDropdown = new CreateItemDropdown({ $dropdown: this.$form.find('.js-protected-tag-select'), + defaultToggleLabel: 'Protected Tag', + fieldName: 'protected_tag[name]', onSelect: this.onSelectCallback, + getData: ProtectedTagCreate.getProtectedTags, }); } @@ -38,4 +41,8 @@ export default class ProtectedTagCreate { this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length)); } + + static getProtectedTags(term, callback) { + callback(gon.open_tags); + } } diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js deleted file mode 100644 index a0224213aa0..00000000000 --- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js +++ /dev/null @@ -1,88 +0,0 @@ -import _ from 'underscore'; - -export default class ProtectedTagDropdown { - /** - * @param {Object} options containing - * `$dropdown` target element - * `onSelect` event callback - * $dropdown must be an element created using `dropdown_tag()` rails helper - */ - constructor(options) { - this.onSelect = options.onSelect; - this.$dropdown = options.$dropdown; - this.$dropdownContainer = this.$dropdown.parent(); - this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer'); - this.$protectedTag = this.$dropdownContainer.find('.js-create-new-protected-tag'); - - this.buildDropdown(); - this.bindEvents(); - - // Hide footer - this.toggleFooter(true); - } - - buildDropdown() { - this.$dropdown.glDropdown({ - data: this.getProtectedTags.bind(this), - filterable: true, - remote: false, - search: { - fields: ['title'], - }, - selectable: true, - toggleLabel(selected) { - return (selected && 'id' in selected) ? selected.title : 'Protected Tag'; - }, - fieldName: 'protected_tag[name]', - text(protectedTag) { - return _.escape(protectedTag.title); - }, - id(protectedTag) { - return _.escape(protectedTag.id); - }, - onFilter: this.toggleCreateNewButton.bind(this), - clicked: (options) => { - options.e.preventDefault(); - this.onSelect(); - }, - }); - } - - bindEvents() { - this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this)); - } - - onClickCreateWildcard(e) { - this.$dropdown.data('glDropdown').remote.execute(); - this.$dropdown.data('glDropdown').selectRowAtIndex(); - e.preventDefault(); - } - - getProtectedTags(term, callback) { - if (this.selectedTag) { - callback(gon.open_tags.concat(this.selectedTag)); - } else { - callback(gon.open_tags); - } - } - - toggleCreateNewButton(tagName) { - if (tagName) { - this.selectedTag = { - title: tagName, - id: tagName, - text: tagName, - }; - - this.$dropdownContainer - .find('.js-create-new-protected-tag code') - .text(tagName); - } - - this.toggleFooter(!tagName); - } - - toggleFooter(toggleState) { - this.$dropdownFooter.toggleClass('hidden', toggleState); - } -} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index d1b3754d4ef..1d2303a3a2b 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -666,6 +666,16 @@ } } +.dropdown-create-new-item-button { + @include dropdown-link; + + width: 100%; + background-color: transparent; + border: 0; + text-align: left; + text-overflow: ellipsis; +} + .dropdown-loading { position: absolute; top: 0; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 61a76d0387a..bf41005b6d5 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -895,17 +895,6 @@ pre.light-well { } } -.create-new-protected-branch-button, -.create-new-protected-tag-button { - @include dropdown-link; - - width: 100%; - background-color: transparent; - border: 0; - text-align: left; - text-overflow: ellipsis; -} - .protected-branches-list, .protected-tags-list { margin-bottom: 30px; diff --git a/app/views/projects/protected_branches/shared/_dropdown.html.haml b/app/views/projects/protected_branches/shared/_dropdown.html.haml index 6e9c473494e..74435236808 100644 --- a/app/views/projects/protected_branches/shared/_dropdown.html.haml +++ b/app/views/projects/protected_branches/shared/_dropdown.html.haml @@ -10,6 +10,6 @@ %ul.dropdown-footer-list %li - %button{ class: "create-new-protected-branch-button js-create-new-protected-branch", title: "New Protected Branch" } + %button{ class: "dropdown-create-new-item-button js-dropdown-create-new-item", title: "New Protected Branch" } Create wildcard %code diff --git a/app/views/projects/protected_tags/shared/_dropdown.html.haml b/app/views/projects/protected_tags/shared/_dropdown.html.haml index 9b6923210f7..f0d7dcccd36 100644 --- a/app/views/projects/protected_tags/shared/_dropdown.html.haml +++ b/app/views/projects/protected_tags/shared/_dropdown.html.haml @@ -10,6 +10,6 @@ %ul.dropdown-footer-list %li - %button{ class: "create-new-protected-tag-button js-create-new-protected-tag", title: "New Protected Tag" } + %button{ class: "dropdown-create-new-item-button js-dropdown-create-new-item", title: "New Protected Tag" } Create wildcard %code -- cgit v1.2.3