Merge branch...

Merge branch '384269-migrate-gldropdown-in-app-assets-javascripts-content_editor-components' into 'master'

Migrate GlDropdown toolbar_text_style_dropdown.vue

See merge request gitlab-org/gitlab!107493



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Careem Ahamed <cahamed@gitlab.com>
Approved-by: Scott de Jonge <sdejonge@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Scott de Jonge <sdejonge@gitlab.com>
Co-authored-by: psjakubowska <psedlak-jakubowska@gitlab.com>

app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlTooltipDirective as GlTooltip, GlCollapsibleListbox } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { TEXT_STYLE_DROPDOWN_ITEMS } from '../constants';
 import EditorStateObserver from './editor_state_observer.vue';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
     EditorStateObserver,
   },
   directives: {
@@ -25,15 +24,26 @@ export default {
 
       return activeItem ? activeItem.label : this.$options.i18n.placeholder;
     },
+    listboxItems() {
+      return this.$options.items.map((item) => {
+        return {
+          value: item.label,
+          text: item.label,
+        };
+      });
+    },
   },
   methods: {
+    mapDropdownItemToCommand(dropdownItem) {
+      return this.$options.items.find((option) => option.label === dropdownItem);
+    },
     updateActiveItem({ editor }) {
       this.activeItem = TEXT_STYLE_DROPDOWN_ITEMS.find((item) =>
         editor.isActive(item.contentType, item.commandParams),
       );
     },
     execute(item) {
-      const { editorCommand, contentType, commandParams } = item;
+      const { editorCommand, contentType, commandParams } = this.mapDropdownItemToCommand(item);
       const value = commandParams?.level;
 
       if (editorCommand) {
@@ -46,8 +56,8 @@ export default {
 
       this.$emit('execute', { contentType, value });
     },
-    isActive(item) {
-      return this.tiptapEditor.isActive(item.contentType, item.commandParams);
+    isActive(dropdownItem) {
+      return this.tiptapEditor.isActive(dropdownItem.contentType, dropdownItem.commandParams);
     },
   },
   items: TEXT_STYLE_DROPDOWN_ITEMS,
@@ -58,25 +68,15 @@ export default {
 </script>
 <template>
   <editor-state-observer @transaction="updateActiveItem">
-    <gl-dropdown
-      v-gl-tooltip="$options.i18n.placeholder"
-      size="small"
-      data-qa-selector="text_style_dropdown"
+    <gl-collapsible-listbox
+      v-gl-tooltip.hover="$options.i18n.placeholder"
+      :items="listboxItems"
+      :toggle-text="activeItemLabel"
+      :selected="activeItemLabel"
       :disabled="!activeItem"
-      :text="activeItemLabel"
-      lazy
-    >
-      <gl-dropdown-item
-        v-for="(item, index) in $options.items"
-        :key="index"
-        is-check-item
-        :is-checked="isActive(item)"
-        data-qa-selector="text_style_menu_item"
-        :data-qa-text-style="item.label"
-        @click="execute(item)"
-      >
-        {{ item.label }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      :data-qa-text-style="activeItemLabel"
+      data-qa-selector="text_style_dropdown"
+      @select="execute"
+    />
   </editor-state-observer>
 </template>

qa/qa/page/component/content_editor.rb

@@ -15,7 +15,6 @@ def self.included(base)
 
           base.view 'app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue' do
             element :text_style_dropdown
-            element :text_style_menu_item
           end
 
           base.view 'app/assets/javascripts/content_editor/components/toolbar_image_button.vue' do
@@ -33,9 +32,7 @@ def add_heading(heading, text)
             # wait for text style option to become active after typing
             has_active_element?(:text_style_dropdown, wait: 1)
             click_element(:text_style_dropdown)
-            within_element(:text_style_dropdown) do
-              click_element(:text_style_menu_item, text_style: heading)
-            end
+            find_element(:text_style_dropdown).find('li', text: heading).click
           end
         end
 

spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js

-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
 import ToolbarTextStyleDropdown from '~/content_editor/components/toolbar_text_style_dropdown.vue';
@@ -22,8 +22,6 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMountExtended(ToolbarTextStyleDropdown, {
       stubs: {
-        GlDropdown,
-        GlDropdownItem,
         EditorStateObserver,
       },
       provide: {
@@ -35,7 +33,7 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
       },
     });
   };
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
   beforeEach(() => {
     buildEditor();
@@ -48,9 +46,10 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
   it('renders all text styles as dropdown items', () => {
     buildWrapper();
 
-    TEXT_STYLE_DROPDOWN_ITEMS.forEach((textStyle) => {
-      expect(wrapper.findByText(textStyle.label).exists()).toBe(true);
+    TEXT_STYLE_DROPDOWN_ITEMS.forEach((textStyle, index) => {
+      expect(findListbox().props('items').at(index).text).toContain(textStyle.label);
     });
+    expect(findListbox().props('items').length).toBe(TEXT_STYLE_DROPDOWN_ITEMS.length);
   });
 
   describe('when there is an active item', () => {
@@ -69,19 +68,11 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
     });
 
     it('displays the active text style label as the dropdown toggle text', () => {
-      expect(findDropdown().props().text).toBe(activeTextStyle.label);
+      expect(findListbox().props('toggleText')).toBe(activeTextStyle.label);
     });
 
     it('sets dropdown as enabled', () => {
-      expect(findDropdown().props().disabled).toBe(false);
-    });
-
-    it('sets active item as active', () => {
-      const activeItem = wrapper
-        .findAllComponents(GlDropdownItem)
-        .filter((item) => item.text() === activeTextStyle.label)
-        .at(0);
-      expect(activeItem.props().isChecked).toBe(true);
+      expect(findListbox().props('disabled')).toBe(false);
     });
   });
 
@@ -93,11 +84,11 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
     });
 
     it('sets dropdown as disabled', () => {
-      expect(findDropdown().props().disabled).toBe(true);
+      expect(findListbox().props('disabled')).toBe(true);
     });
 
     it('sets dropdown toggle text to Text style', () => {
-      expect(findDropdown().props().text).toBe('Text style');
+      expect(findListbox().props('toggleText')).toBe('Text style');
     });
   });
 
@@ -109,7 +100,7 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
         const { editorCommand, commandParams } = textStyle;
         const commands = mockChainedCommands(tiptapEditor, [editorCommand, 'focus', 'run']);
 
-        wrapper.findAllComponents(GlDropdownItem).at(index).vm.$emit('click');
+        findListbox().vm.$emit('select', TEXT_STYLE_DROPDOWN_ITEMS[index].label);
         expect(commands[editorCommand]).toHaveBeenCalledWith(commandParams || {});
         expect(commands.focus).toHaveBeenCalled();
         expect(commands.run).toHaveBeenCalled();
@@ -121,7 +112,7 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
         buildWrapper();
         const { contentType, commandParams } = textStyle;
 
-        wrapper.findAllComponents(GlDropdownItem).at(index).vm.$emit('click');
+        findListbox().vm.$emit('select', TEXT_STYLE_DROPDOWN_ITEMS[index].label);
         expect(wrapper.emitted('execute')).toEqual([
           [
             {

spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js

@@ -95,11 +95,13 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     expect(findTextarea().element.value).toBe(value);
   });
 
-  it(`emits ${EDITING_MODE_CONTENT_EDITOR} event when enableContentEditor emitted from markdown editor`, () => {
+  it(`emits ${EDITING_MODE_CONTENT_EDITOR} event when enableContentEditor emitted from markdown editor`, async () => {
     buildWrapper();
 
     findMarkdownField().vm.$emit('enableContentEditor');
 
+    await nextTick();
+
     expect(wrapper.emitted(EDITING_MODE_CONTENT_EDITOR)).toHaveLength(1);
   });