diff options
Diffstat (limited to 'app/assets/javascripts/issuable')
| -rw-r--r-- | app/assets/javascripts/issuable/auto_width_dropdown_select.js | 56 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/bulk_update_sidebar/components/status_dropdown.vue (renamed from app/assets/javascripts/issuable/bulk_update_sidebar/components/status_select.vue) | 7 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/bulk_update_sidebar/components/subscriptions_dropdown.vue | 51 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/bulk_update_sidebar/constants.js | 22 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/bulk_update_sidebar/index.js | 25 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/bulk_update_sidebar/subscription_select.js | 28 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/issuable_context.js | 19 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable/issuable_form.js | 52 |
9 files changed, 88 insertions, 174 deletions
diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js deleted file mode 100644 index 243d82f55aa..00000000000 --- a/app/assets/javascripts/issuable/auto_width_dropdown_select.js +++ /dev/null @@ -1,56 +0,0 @@ -import $ from 'jquery'; -import { loadCSSFile } from '../lib/utils/css_utils'; - -let instanceCount = 0; - -class AutoWidthDropdownSelect { - constructor(selectElement) { - this.$selectElement = $(selectElement); - this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`; - instanceCount += 1; - } - - init() { - const { dropdownClass } = this; - import(/* webpackChunkName: 'select2' */ 'select2/select2') - .then(() => { - // eslint-disable-next-line promise/no-nesting - loadCSSFile(gon.select2_css_path) - .then(() => { - this.$selectElement.select2({ - dropdownCssClass: dropdownClass, - ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass), - }); - }) - .catch(() => {}); - }) - .catch(() => {}); - - return this; - } - - static selectOptions(dropdownClass) { - return { - dropdownCss() { - let resultantWidth = 'auto'; - const $dropdown = $(`.${dropdownClass}`); - - // We have to look at the parent because - // `offsetParent` on a `display: none;` is `null` - const offsetParentWidth = $(this).parent().offsetParent().width(); - // Reset any width to let it naturally flow - $dropdown.css('width', 'auto'); - if ($dropdown.outerWidth(false) > offsetParentWidth) { - resultantWidth = offsetParentWidth; - } - - return { - width: resultantWidth, - maxWidth: offsetParentWidth, - }; - }, - }; - } -} - -export default AutoWidthDropdownSelect; diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/components/status_select.vue b/app/assets/javascripts/issuable/bulk_update_sidebar/components/status_dropdown.vue index 9509399e91d..ba94932289e 100644 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/components/status_select.vue +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/components/status_dropdown.vue @@ -1,10 +1,9 @@ <script> import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { __ } from '~/locale'; -import { ISSUE_STATUS_SELECT_OPTIONS } from '../constants'; +import { statusDropdownOptions } from '../constants'; export default { - name: 'StatusSelect', components: { GlDropdown, GlDropdownItem, @@ -36,7 +35,7 @@ export default { dropdownTitle: __('Change status'), defaultDropdownText: __('Select status'), }, - ISSUE_STATUS_SELECT_OPTIONS, + statusDropdownOptions, }; </script> <template> @@ -44,7 +43,7 @@ export default { <input type="hidden" name="update[state_event]" :value="selectedValue" /> <gl-dropdown :text="dropdownText" :title="$options.i18n.dropdownTitle" class="gl-w-full"> <gl-dropdown-item - v-for="statusOption in $options.ISSUE_STATUS_SELECT_OPTIONS" + v-for="statusOption in $options.statusDropdownOptions" :key="statusOption.value" :is-checked="selectedValue === statusOption.value" is-check-item diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/components/subscriptions_dropdown.vue b/app/assets/javascripts/issuable/bulk_update_sidebar/components/subscriptions_dropdown.vue new file mode 100644 index 00000000000..8774b065c22 --- /dev/null +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/components/subscriptions_dropdown.vue @@ -0,0 +1,51 @@ +<script> +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { __ } from '~/locale'; +import { subscriptionsDropdownOptions } from '../constants'; + +export default { + subscriptionsDropdownOptions, + i18n: { + defaultDropdownText: __('Select subscription'), + headerText: __('Change subscription'), + }, + components: { + GlDropdown, + GlDropdownItem, + }, + data() { + return { + subscription: undefined, + }; + }, + computed: { + dropdownText() { + return this.subscription?.text ?? this.$options.i18n.defaultDropdownText; + }, + selectedValue() { + return this.subscription?.value; + }, + }, + methods: { + handleClick(option) { + this.subscription = option.value === this.subscription?.value ? undefined : option; + }, + }, +}; +</script> +<template> + <div> + <input type="hidden" name="update[subscription_event]" :value="selectedValue" /> + <gl-dropdown class="gl-w-full" :header-text="$options.i18n.headerText" :text="dropdownText"> + <gl-dropdown-item + v-for="subscriptionsOption in $options.subscriptionsDropdownOptions" + :key="subscriptionsOption.value" + is-check-item + :is-checked="selectedValue === subscriptionsOption.value" + @click="handleClick(subscriptionsOption)" + > + {{ subscriptionsOption.text }} + </gl-dropdown-item> + </gl-dropdown> + </div> +</template> diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/constants.js b/app/assets/javascripts/issuable/bulk_update_sidebar/constants.js index ad15b25f9cf..68133ceb3c7 100644 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/constants.js +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/constants.js @@ -1,17 +1,23 @@ import { __ } from '~/locale'; -export const ISSUE_STATUS_MODIFIERS = { - REOPEN: 'reopen', - CLOSE: 'close', -}; - -export const ISSUE_STATUS_SELECT_OPTIONS = [ +export const statusDropdownOptions = [ { - value: ISSUE_STATUS_MODIFIERS.REOPEN, text: __('Open'), + value: 'reopen', }, { - value: ISSUE_STATUS_MODIFIERS.CLOSE, text: __('Closed'), + value: 'close', + }, +]; + +export const subscriptionsDropdownOptions = [ + { + text: __('Subscribe'), + value: 'subscribe', + }, + { + text: __('Unsubscribe'), + value: 'unsubscribe', }, ]; diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/index.js b/app/assets/javascripts/issuable/bulk_update_sidebar/index.js index 967996b859e..4657771353f 100644 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/index.js +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/index.js @@ -1,5 +1,6 @@ import Vue from 'vue'; -import StatusSelect from './components/status_select.vue'; +import StatusDropdown from './components/status_dropdown.vue'; +import SubscriptionsDropdown from './components/subscriptions_dropdown.vue'; import issuableBulkUpdateActions from './issuable_bulk_update_actions'; import IssuableBulkUpdateSidebar from './issuable_bulk_update_sidebar'; @@ -14,8 +15,8 @@ export function initBulkUpdateSidebar(prefixId) { new IssuableBulkUpdateSidebar(); // eslint-disable-line no-new } -export function initIssueStatusSelect() { - const el = document.querySelector('.js-issue-status'); +export function initStatusDropdown() { + const el = document.querySelector('.js-status-dropdown'); if (!el) { return null; @@ -23,7 +24,21 @@ export function initIssueStatusSelect() { return new Vue({ el, - name: 'StatusSelectRoot', - render: (createElement) => createElement(StatusSelect), + name: 'StatusDropdownRoot', + render: (createElement) => createElement(StatusDropdown), + }); +} + +export function initSubscriptionsDropdown() { + const el = document.querySelector('.js-subscriptions-dropdown'); + + if (!el) { + return null; + } + + return new Vue({ + el, + name: 'SubscriptionsDropdownRoot', + render: (createElement) => createElement(SubscriptionsDropdown), }); } diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js index 8a55176fed0..a33c6ae8030 100644 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js +++ b/app/assets/javascripts/issuable/bulk_update_sidebar/issuable_bulk_update_sidebar.js @@ -5,7 +5,6 @@ import issuableEventHub from '~/issues/list/eventhub'; import LabelsSelect from '~/labels/labels_select'; import MilestoneSelect from '~/milestones/milestone_select'; import IssuableBulkUpdateActions from './issuable_bulk_update_actions'; -import subscriptionSelect from './subscription_select'; const HIDDEN_CLASS = 'hidden'; const DISABLED_CONTENT_CLASS = 'disabled-content'; @@ -52,7 +51,6 @@ export default class IssuableBulkUpdateSidebar { initDropdowns() { new LabelsSelect(); new MilestoneSelect(); - subscriptionSelect(); // Checking IS_EE and using ee_else_ce is odd, but we do it here to satisfy // the import/no-unresolved lint rule when FOSS_ONLY=1, even though at diff --git a/app/assets/javascripts/issuable/bulk_update_sidebar/subscription_select.js b/app/assets/javascripts/issuable/bulk_update_sidebar/subscription_select.js deleted file mode 100644 index b12ac776b4f..00000000000 --- a/app/assets/javascripts/issuable/bulk_update_sidebar/subscription_select.js +++ /dev/null @@ -1,28 +0,0 @@ -import $ from 'jquery'; -import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; -import { __ } from '~/locale'; - -export default function subscriptionSelect() { - $('.js-subscription-event').each((i, element) => { - const fieldName = $(element).data('fieldName'); - - return initDeprecatedJQueryDropdown($(element), { - selectable: true, - fieldName, - toggleLabel(selected, el, instance) { - let label = __('Subscription'); - const $item = instance.dropdown.find('.is-active'); - if ($item.length) { - label = $item.text(); - } - return label; - }, - clicked(options) { - return options.e.preventDefault(); - }, - id(obj, el) { - return $(el).data('id'); - }, - }); - }); -} diff --git a/app/assets/javascripts/issuable/issuable_context.js b/app/assets/javascripts/issuable/issuable_context.js index 37001d00a27..8c2e2a5df67 100644 --- a/app/assets/javascripts/issuable/issuable_context.js +++ b/app/assets/javascripts/issuable/issuable_context.js @@ -1,7 +1,6 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import $ from 'jquery'; import { setCookie } from '~/lib/utils/common_utils'; -import { loadCSSFile } from '~/lib/utils/css_utils'; import UsersSelect from '~/users_select'; export default class IssuableContext { @@ -9,24 +8,6 @@ export default class IssuableContext { this.userSelect = new UsersSelect(currentUser); this.reviewersSelect = new UsersSelect(currentUser, '.js-reviewer-search'); - const $select2 = $('select.select2'); - - if ($select2.length) { - import(/* webpackChunkName: 'select2' */ 'select2/select2') - .then(() => { - // eslint-disable-next-line promise/no-nesting - loadCSSFile(gon.select2_css_path) - .then(() => { - $select2.select2({ - width: 'resolve', - dropdownAutoWidth: true, - }); - }) - .catch(() => {}); - }) - .catch(() => {}); - } - $('.issuable-sidebar .inline-update').on('change', 'select', function onClickSelect() { return $(this).submit(); }); diff --git a/app/assets/javascripts/issuable/issuable_form.js b/app/assets/javascripts/issuable/issuable_form.js index 81bf7ca6ccc..e8ba99e0e9e 100644 --- a/app/assets/javascripts/issuable/issuable_form.js +++ b/app/assets/javascripts/issuable/issuable_form.js @@ -2,10 +2,7 @@ import $ from 'jquery'; import Pikaday from 'pikaday'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; import Autosave from '~/autosave'; -import AutoWidthDropdownSelect from '~/issuable/auto_width_dropdown_select'; -import { loadCSSFile } from '~/lib/utils/css_utils'; import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility'; -import { select2AxiosTransport } from '~/lib/utils/select2_utils'; import { queryToObject, objectToQuery } from '~/lib/utils/url_utility'; import UsersSelect from '~/users_select'; import ZenMode from '~/zen_mode'; @@ -118,12 +115,6 @@ export default class IssuableForm { }); calendar.setDate(parsePikadayDate($issuableDueDate.val())); } - - this.$targetBranchSelect = $('.js-target-branch-select', this.form); - - if (this.$targetBranchSelect.length) { - this.initTargetBranchDropdown(); - } } initAutosave() { @@ -214,47 +205,4 @@ export default class IssuableForm { addWip() { this.titleField.val(`Draft: ${this.titleField.val()}`); } - - initTargetBranchDropdown() { - import(/* webpackChunkName: 'select2' */ 'select2/select2') - .then(() => { - // eslint-disable-next-line promise/no-nesting - loadCSSFile(gon.select2_css_path) - .then(() => { - this.$targetBranchSelect.select2({ - ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'), - ajax: { - url: this.$targetBranchSelect.data('endpoint'), - dataType: 'JSON', - quietMillis: 250, - data(search) { - return { - search, - }; - }, - results({ results }) { - return { - // `data` keys are translated so we can't just access them with a string based key - results: results[Object.keys(results)[0]].map((name) => ({ - id: name, - text: name, - })), - }; - }, - transport: select2AxiosTransport, - }, - initSelection(el, callback) { - const val = el.val(); - - callback({ - id: val, - text: val, - }); - }, - }); - }) - .catch(() => {}); - }) - .catch(() => {}); - } } |