Merge branch...

Merge branch '284693-refactor-jquery-dropdown-implementation-to-gitlab-ui-gldropdown-in-issue_status_select-js' into 'master'

Refactor jQuery dropdown implementation to GitLab UI GlDropdown in issue_status_select.js

See merge request gitlab-org/gitlab!64053

app/assets/javascripts/issuable_bulk_update_sidebar/components/status_select.vue

+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { ISSUE_STATUS_SELECT_OPTIONS } from '../constants';
+
+export default {
+  name: 'StatusSelect',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  data() {
+    return {
+      status: null,
+    };
+  },
+  computed: {
+    dropdownText() {
+      return this.status?.text ?? this.$options.i18n.defaultDropdownText;
+    },
+    selectedValue() {
+      return this.status?.value;
+    },
+  },
+  methods: {
+    onDropdownItemClick(statusOption) {
+      // clear status if the currently checked status is clicked again
+      if (this.status?.value === statusOption.value) {
+        this.status = null;
+      } else {
+        this.status = statusOption;
+      }
+    },
+  },
+  i18n: {
+    dropdownTitle: __('Change status'),
+    defaultDropdownText: __('Select status'),
+  },
+  ISSUE_STATUS_SELECT_OPTIONS,
+};
+</script>
+<template>
+  <div>
+    <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"
+        :key="statusOption.value"
+        :is-checked="selectedValue === statusOption.value"
+        is-check-item
+        :title="statusOption.text"
+        @click="onDropdownItemClick(statusOption)"
+      >
+        {{ statusOption.text }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>

app/assets/javascripts/issuable_bulk_update_sidebar/constants.js

+import { __ } from '~/locale';
+
+export const ISSUE_STATUS_MODIFIERS = {
+  REOPEN: 'reopen',
+  CLOSE: 'close',
+};
+
+export const ISSUE_STATUS_SELECT_OPTIONS = [
+  {
+    value: ISSUE_STATUS_MODIFIERS.REOPEN,
+    text: __('Open'),
+  },
+  {
+    value: ISSUE_STATUS_MODIFIERS.CLOSE,
+    text: __('Closed'),
+  },
+];

app/assets/javascripts/issuable_bulk_update_sidebar/init_issue_status_select.js

+import Vue from 'vue';
+import StatusSelect from './components/status_select.vue';
+
+export default function initIssueStatusSelect() {
+  const el = document.querySelector('.js-issue-status');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(StatusSelect);
+    },
+  });
+}

app/assets/javascripts/issuable_bulk_update_actions.js → app/assets/javascripts/issuable_bulk_update_sidebar/issuable_bulk_update_actions.js

 import $ from 'jquery';
 import { difference, intersection, union } from 'lodash';
-import createFlash from './flash';
-import axios from './lib/utils/axios_utils';
-import { __ } from './locale';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 
 export default {
   init({ form, issues, prefixId } = {}) {

app/assets/javascripts/issuable_bulk_update_sidebar.js → app/assets/javascripts/issuable_bulk_update_sidebar/issuable_bulk_update_sidebar.js

@@ -2,11 +2,12 @@
 
 import $ from 'jquery';
 import { property } from 'lodash';
+
+import issueableEventHub from '~/issues_list/eventhub';
+import LabelsSelect from '~/labels_select';
+import MilestoneSelect from '~/milestone_select';
+import initIssueStatusSelect from './init_issue_status_select';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
-import issueStatusSelect from './issue_status_select';
-import issueableEventHub from './issues_list/eventhub';
-import LabelsSelect from './labels_select';
-import MilestoneSelect from './milestone_select';
 import subscriptionSelect from './subscription_select';
 
 const HIDDEN_CLASS = 'hidden';
@@ -29,7 +30,7 @@ export default class IssuableBulkUpdateSidebar {
     this.$sidebar = $('.right-sidebar');
     this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
     this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');
-    this.$bulkEditSubmitBtn = $('.update-selected-issues');
+    this.$bulkEditSubmitBtn = $('.js-update-selected-issues');
     this.$bulkUpdateEnableBtn = $('.js-bulk-update-toggle');
     this.$otherFilters = $('.issues-other-filters');
     this.$checkAllContainer = $('.check-all-holder');
@@ -56,7 +57,7 @@ export default class IssuableBulkUpdateSidebar {
   initDropdowns() {
     new LabelsSelect();
     new MilestoneSelect();
-    issueStatusSelect();
+    initIssueStatusSelect();
     subscriptionSelect();
 
     if (IS_EE) {

app/assets/javascripts/subscription_select.js → app/assets/javascripts/issuable_bulk_update_sidebar/subscription_select.js

 import $ from 'jquery';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { __ } from './locale';
+import { __ } from '~/locale';
 
 export default function subscriptionSelect() {
   $('.js-subscription-event').each((i, element) => {

app/assets/javascripts/issuable_index.js

-import issuableInitBulkUpdateSidebar from './issuable_init_bulk_update_sidebar';
+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 
 export default class IssuableIndex {
   constructor(pagePrefix = 'issuable_') {

app/assets/javascripts/issue_status_select.js

-import $ from 'jquery';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { __ } from './locale';
-
-export default function issueStatusSelect() {
-  $('.js-issue-status').each((i, el) => {
-    const fieldName = $(el).data('fieldName');
-    initDeprecatedJQueryDropdown($(el), {
-      selectable: true,
-      fieldName,
-      toggleLabel(selected, element, instance) {
-        let label = __('Author');
-        const $item = instance.dropdown.find('.is-active');
-        if ($item.length) {
-          label = $item.text();
-        }
-        return label;
-      },
-      clicked(options) {
-        return options.e.preventDefault();
-      },
-      id(obj, element) {
-        return $(element).data('id');
-      },
-    });
-  });
-}

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -450,7 +450,9 @@ export default {
     },
     async handleBulkUpdateClick() {
       if (!this.hasInitBulkEdit) {
-        const initBulkUpdateSidebar = await import('~/issuable_init_bulk_update_sidebar');
+        const initBulkUpdateSidebar = await import(
+          '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar'
+        );
         initBulkUpdateSidebar.default.init('issuable_');
 
         const usersSelect = await import('~/users_select');

app/assets/javascripts/labels_select.js

@@ -5,11 +5,11 @@
 import $ from 'jquery';
 import { difference, isEqual, escape, sortBy, template, union } from 'lodash';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+import IssuableBulkUpdateActions from '~/issuable_bulk_update_sidebar/issuable_bulk_update_actions';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import boardsStore from './boards/stores/boards_store';
 import CreateLabelDropdown from './create_label';
 import createFlash from './flash';
-import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import axios from './lib/utils/axios_utils';
 import { sprintf, __ } from './locale';
 

app/assets/javascripts/pages/groups/issues/index.js

 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import { mountIssuablesListApp } from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { FILTERED_SEARCH } from '~/pages/constants';

app/assets/javascripts/pages/groups/merge_requests/index.js

 import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import projectSelect from '~/project_select';

app/views/shared/issuable/_bulk_update_sidebar.html.haml

@@ -6,21 +6,13 @@
     = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-confirm", disabled: true
+          = button_tag _('Update all'), class: "gl-button btn js-update-selected-issues btn-confirm", disabled: true
         = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
       - if params[:state] != 'merged'
         .block
           .title
             = _('Status')
-          .filter-item
-            = dropdown_tag(_("Select status"), options: { toggle_class: "js-issue-status", title: _("Change status"), dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]", default_label: _("Status") } } ) do
-              %ul
-                %li
-                  %a{ href: "#", data: { id: "reopen" } }
-                    = _('Open')
-                %li
-                  %a{ href: "#", data: { id: "close" } }
-                    = _('Closed')
+          .js-issue-status
       .block
         .title
           = _('Assignee')

ee/app/assets/javascripts/pages/groups/epics/index/index.js

 import initEpicCreateApp from 'ee/epic/epic_bundle';
 import initEpicsList from 'ee/epics_list/epics_list_bundle';
 import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 
 const EPIC_BULK_UPDATE_PREFIX = 'epic_';

ee/app/views/shared/issuable/_group_bulk_update_sidebar.html.haml

@@ -7,7 +7,7 @@
     = form_tag [:bulk_update, group, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-confirm", disabled: true
+          = button_tag _('Update all'), class: "gl-button btn js-update-selected-issues btn-confirm", disabled: true
         = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
       - if is_issue
         = render "shared/issuable/epic_dropdown", parent: group

spec/features/issues/user_bulk_edits_issues_spec.rb

@@ -13,26 +13,26 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
   end
 
   context 'status' do
-    it 'sets to closed' do
+    it 'sets to closed', :js do
       visit project_issues_path(project)
 
       click_button 'Edit issues'
       check 'Select all'
       click_button 'Select status'
-      click_link 'Closed'
+      click_button 'Closed'
 
       click_update_issues_button
       expect(page).to have_selector('.issue', count: 0)
     end
 
-    it 'sets to open' do
+    it 'sets to open', :js do
       create_closed
       visit project_issues_path(project, state: 'closed')
 
       click_button 'Edit issues'
       check 'Select all'
       click_button 'Select status'
-      click_link 'Open'
+      click_button 'Open'
 
       click_update_issues_button
       expect(page).to have_selector('.issue', count: 0)

spec/features/merge_requests/user_mass_updates_spec.rb

@@ -18,7 +18,7 @@ RSpec.describe 'Merge requests > User mass updates', :js do
         visit project_merge_requests_path(project)
       end
 
-      it 'closes merge request' do
+      it 'closes merge request', :js do
         change_status('Closed')
 
         expect(page).to have_selector('.merge-request', count: 0)
@@ -31,7 +31,7 @@ RSpec.describe 'Merge requests > User mass updates', :js do
         visit project_merge_requests_path(project, state: 'closed')
       end
 
-      it 'reopens merge request' do
+      it 'reopens merge request', :js do
         change_status('Open')
 
         expect(page).to have_selector('.merge-request', count: 0)
@@ -109,7 +109,7 @@ RSpec.describe 'Merge requests > User mass updates', :js do
     click_button 'Edit merge requests'
     check 'Select all'
     click_button 'Select status'
-    click_link text
+    click_button text
     click_update_merge_requests_button
   end
 

spec/frontend/issuable_bulk_update_sidebar/components/status_select_spec.js

+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import StatusSelect from '~/issuable_bulk_update_sidebar/components/status_select.vue';
+import { ISSUE_STATUS_SELECT_OPTIONS } from '~/issuable_bulk_update_sidebar/constants';
+
+describe('StatusSelect', () => {
+  let wrapper;
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findHiddenInput = () => wrapper.find('input');
+
+  function createComponent() {
+    wrapper = shallowMount(StatusSelect);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with no value selected', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders default text', () => {
+      expect(findDropdown().props('text')).toBe('Select status');
+    });
+
+    it('renders dropdown items with `is-checked` prop set to `false`', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+      expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+    });
+  });
+
+  describe('when selecting a value', () => {
+    const selectItemAtIndex = 0;
+
+    beforeEach(async () => {
+      createComponent();
+      await findAllDropdownItems().at(selectItemAtIndex).vm.$emit('click');
+    });
+
+    it('updates value of the hidden input', () => {
+      expect(findHiddenInput().attributes('value')).toBe(
+        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].value,
+      );
+    });
+
+    it('updates the dropdown text prop', () => {
+      expect(findDropdown().props('text')).toBe(
+        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].text,
+      );
+    });
+
+    it('sets dropdown item `is-checked` prop to `true`', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      expect(dropdownItems.at(0).props('isChecked')).toBe(true);
+      expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+    });
+
+    describe('when selecting the value that is already selected', () => {
+      it('clears dropdown selection', async () => {
+        await findAllDropdownItems().at(selectItemAtIndex).vm.$emit('click');
+
+        const dropdownItems = findAllDropdownItems();
+
+        expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+        expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+        expect(findDropdown().props('text')).toBe('Select status');
+      });
+    });
+  });
+});

spec/frontend/issuable_spec.js

+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import IssuableIndex from '~/issuable_index';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
 
 describe('Issuable', () => {
   describe('initBulkUpdate', () => {