Add latest changes from gitlab-org/gitlab@master

14 files changed, 193 insertions, 23 deletions

diff --git a/spec/frontend/boards/board_list_spec.js b/spec/frontend/boards/board_list_spec.js
index eddc916ed14..34c0504143c 100644
--- a/spec/frontend/boards/board_list_spec.js
+++ b/spec/frontend/boards/board_list_spec.js
@@ -198,6 +198,13 @@ describe('Board list component', () => {
         expect(findDraggable().exists()).toBe(true);
       });
 
+      it('sets delay and delayOnTouchOnly attributes on board list', () => {
+        const listEl = wrapper.findComponent({ ref: 'list' });
+
+        expect(listEl.attributes('delay')).toBe('100');
+        expect(listEl.attributes('delayontouchonly')).toBe('true');
+      });
+
       describe('handleDragOnStart', () => {
         it('adds a class `is-dragging` to document body', () => {
           expect(document.body.classList.contains('is-dragging')).toBe(false);
diff --git a/spec/frontend/boards/components/board_content_spec.js b/spec/frontend/boards/components/board_content_spec.js
index 39b2fe2ebbf..82e7ab48e7d 100644
--- a/spec/frontend/boards/components/board_content_spec.js
+++ b/spec/frontend/boards/components/board_content_spec.js
@@ -150,6 +150,13 @@ describe('BoardContent', () => {
 
       expect(style).toBe('height: 900px;');
     });
+
+    it('sets delay and delayOnTouchOnly attributes on board list', () => {
+      const listEl = wrapper.findComponent({ ref: 'list' });
+
+      expect(listEl.attributes('delay')).toBe('100');
+      expect(listEl.attributes('delayontouchonly')).toBe('true');
+    });
   });
 
   describe('when issuableType is not issue', () => {
diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js
index 7ff34ffdf9e..4324e7068e0 100644
--- a/spec/frontend/boards/project_select_spec.js
+++ b/spec/frontend/boards/project_select_spec.js
@@ -156,7 +156,7 @@ describe('ProjectSelect component', () => {
       });
 
       it('renders the name of the selected project', () => {
-        expect(findGlDropdown().find('.gl-new-dropdown-button-text').text()).toBe(
+        expect(findGlDropdown().find('.gl-dropdown-button-text').text()).toBe(
           mockProjectsList1[0].name,
         );
       });
diff --git a/spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap b/spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap
index 6ad8a9de8d3..331a0a474a3 100644
--- a/spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap
+++ b/spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap
@@ -14,15 +14,15 @@ exports[`content_editor/components/toolbar_link_button renders dropdown componen
       </div>
     </form>
   </li>
-  <li role=\\"presentation\\" class=\\"gl-new-dropdown-divider\\">
+  <li role=\\"presentation\\" class=\\"gl-dropdown-divider\\">
     <hr role=\\"separator\\" aria-orientation=\\"horizontal\\" class=\\"dropdown-divider\\">
   </li>
-  <li role=\\"presentation\\" class=\\"gl-new-dropdown-item\\"><button role=\\"menuitem\\" type=\\"button\\" class=\\"dropdown-item\\">
+  <li role=\\"presentation\\" class=\\"gl-dropdown-item\\"><button role=\\"menuitem\\" type=\\"button\\" class=\\"dropdown-item\\">
       <!---->
       <!---->
       <!---->
-      <div class=\\"gl-new-dropdown-item-text-wrapper\\">
-        <p class=\\"gl-new-dropdown-item-text-primary\\">
+      <div class=\\"gl-dropdown-item-text-wrapper\\">
+        <p class=\\"gl-dropdown-item-text-primary\\">
           Upload file
         </p>
         <!---->
diff --git a/spec/frontend/editor/schema/ci/ci_schema_spec.js b/spec/frontend/editor/schema/ci/ci_schema_spec.js
index 9c622d49db9..a06f81e4d1c 100644
--- a/spec/frontend/editor/schema/ci/ci_schema_spec.js
+++ b/spec/frontend/editor/schema/ci/ci_schema_spec.js
@@ -31,6 +31,7 @@ import ProjectPathYaml from './yaml_tests/positive_tests/project_path.yml';
 import VariablesYaml from './yaml_tests/positive_tests/variables.yml';
 import JobWhenYaml from './yaml_tests/positive_tests/job_when.yml';
 import IdTokensYaml from './yaml_tests/positive_tests/id_tokens.yml';
+import HooksYaml from './yaml_tests/positive_tests/hooks.yml';
 
 // YAML NEGATIVE TEST
 import ArtifactsNegativeYaml from './yaml_tests/negative_tests/artifacts.yml';
@@ -47,6 +48,7 @@ import TriggerNegative from './yaml_tests/negative_tests/trigger.yml';
 import VariablesInvalidSyntaxDescYaml from './yaml_tests/negative_tests/variables/invalid_syntax_desc.yml';
 import VariablesWrongSyntaxUsageExpand from './yaml_tests/negative_tests/variables/wrong_syntax_usage_expand.yml';
 import IdTokensNegativeYaml from './yaml_tests/negative_tests/id_tokens.yml';
+import HooksNegative from './yaml_tests/negative_tests/hooks.yml';
 
 const ajv = new Ajv({
   strictTypes: false,
@@ -79,6 +81,7 @@ describe('positive tests', () => {
       FilterYaml,
       IncludeYaml,
       JobWhenYaml,
+      HooksYaml,
       RulesYaml,
       VariablesYaml,
       ProjectPathYaml,
@@ -118,6 +121,7 @@ describe('negative tests', () => {
       ProjectPathIncludeNoSlashYaml,
       ProjectPathIncludeTailSlashYaml,
       TriggerNegative,
+      HooksNegative,
     }),
   )('schema validates %s', (_, input) => {
     // We construct a new "JSON" from each main key that is inside a
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/hooks.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/hooks.yml
new file mode 100644
index 00000000000..e3366b0b6d3
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/hooks.yml
@@ -0,0 +1,10 @@
+job1:
+  hooks:
+    invalid_script:
+      - echo 'hello job1 invalid_script'
+  script: echo 'hello job1 script'
+
+job2:
+  hooks:
+    pre_get_sources_script: true
+  script: echo 'hello job1 script'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/hooks.yml b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/hooks.yml
new file mode 100644
index 00000000000..4d45c5528ea
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/hooks.yml
@@ -0,0 +1,10 @@
+default:
+  hooks:
+    pre_get_sources_script:
+      - echo 'hello default pre_get_sources_script'
+
+job1:
+  hooks:
+    pre_get_sources_script:
+      - echo 'hello job1 pre_get_sources_script'
+  script: echo 'hello job1 script'
diff --git a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
index a72528ae36b..748e151f31b 100644
--- a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
+++ b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
@@ -87,7 +87,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
       >
         <div
           aria-label="The GitLab user to which the Jira user Jane Doe will be mapped"
-          class="dropdown b-dropdown gl-new-dropdown w-100 btn-group"
+          class="dropdown b-dropdown gl-dropdown w-100 btn-group"
         >
           <!---->
           <button
@@ -101,7 +101,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             <!---->
              
             <span
-              class="gl-new-dropdown-button-text"
+              class="gl-dropdown-button-text"
             >
               janedoe
             </span>
@@ -123,14 +123,14 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             tabindex="-1"
           >
             <div
-              class="gl-new-dropdown-inner"
+              class="gl-dropdown-inner"
             >
               <!---->
                
               <!---->
                
               <div
-                class="gl-new-dropdown-contents"
+                class="gl-dropdown-contents"
               >
                 <!---->
                  
@@ -165,7 +165,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
                 </div>
                   
                 <li
-                  class="gl-new-dropdown-text text-secondary"
+                  class="gl-dropdown-text text-secondary"
                   role="presentation"
                 >
                   <p
@@ -218,7 +218,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
       >
         <div
           aria-label="The GitLab user to which the Jira user Fred Chopin will be mapped"
-          class="dropdown b-dropdown gl-new-dropdown w-100 btn-group"
+          class="dropdown b-dropdown gl-dropdown w-100 btn-group"
         >
           <!---->
           <button
@@ -232,7 +232,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             <!---->
              
             <span
-              class="gl-new-dropdown-button-text"
+              class="gl-dropdown-button-text"
             >
               mrgitlab
             </span>
@@ -254,14 +254,14 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             tabindex="-1"
           >
             <div
-              class="gl-new-dropdown-inner"
+              class="gl-dropdown-inner"
             >
               <!---->
                
               <!---->
                
               <div
-                class="gl-new-dropdown-contents"
+                class="gl-dropdown-contents"
               >
                 <!---->
                  
@@ -296,7 +296,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
                 </div>
                   
                 <li
-                  class="gl-new-dropdown-text text-secondary"
+                  class="gl-dropdown-text text-secondary"
                   role="presentation"
                 >
                   <p
diff --git a/spec/frontend/language_switcher/components/app_spec.js b/spec/frontend/language_switcher/components/app_spec.js
index d44187897b8..6a1b94cd813 100644
--- a/spec/frontend/language_switcher/components/app_spec.js
+++ b/spec/frontend/language_switcher/components/app_spec.js
@@ -27,7 +27,7 @@ describe('<LanguageSwitcher />', () => {
     wrapper.destroy();
   });
 
-  const getPreferredLanguage = () => wrapper.find('.gl-new-dropdown-button-text').text();
+  const getPreferredLanguage = () => wrapper.find('.gl-dropdown-button-text').text();
   const findLanguageDropdownItem = (code) => wrapper.findByTestId(`language_switcher_lang_${code}`);
 
   it('preferred language', () => {
diff --git a/spec/frontend/milestones/components/milestone_combobox_spec.js b/spec/frontend/milestones/components/milestone_combobox_spec.js
index ce5b2a1000b..c20c51db75e 100644
--- a/spec/frontend/milestones/components/milestone_combobox_spec.js
+++ b/spec/frontend/milestones/components/milestone_combobox_spec.js
@@ -346,7 +346,7 @@ describe('Milestone combobox component', () => {
           expect(
             findFirstProjectMilestonesDropdownItem()
               .find('svg')
-              .classes('gl-new-dropdown-item-check-icon'),
+              .classes('gl-dropdown-item-check-icon'),
           ).toBe(true);
 
           selectFirstProjectMilestone();
@@ -473,7 +473,7 @@ describe('Milestone combobox component', () => {
           expect(
             findFirstGroupMilestonesDropdownItem()
               .find('svg')
-              .classes('gl-new-dropdown-item-check-icon'),
+              .classes('gl-dropdown-item-check-icon'),
           ).toBe(true);
 
           selectFirstGroupMilestone();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
index 92c2cd90568..c4020eeb75f 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
@@ -13,7 +13,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
      
     <div>
       <div
-        class="dropdown b-dropdown gl-new-dropdown btn-group"
+        class="dropdown b-dropdown gl-dropdown btn-group"
         id="__BVID__27"
         lazy=""
       >
@@ -30,7 +30,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
           <!---->
            
           <span
-            class="gl-new-dropdown-button-text"
+            class="gl-dropdown-button-text"
           >
             Show PyPi commands
           </span>
diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index b473f7c343c..4077564486c 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -61,7 +61,7 @@ exports[`MRWidgetAutoMergeEnabled template should have correct elements 1`] = `
           class="gl-display-flex gl-align-items-flex-start"
         >
           <div
-            class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
+            class="dropdown b-dropdown gl-dropdown gl-display-block gl-md-display-none! btn-group"
             lazy=""
             no-caret=""
             title="Options"
@@ -87,7 +87,7 @@ exports[`MRWidgetAutoMergeEnabled template should have correct elements 1`] = `
               </svg>
                
               <span
-                class="gl-new-dropdown-button-text gl-sr-only"
+                class="gl-dropdown-button-text gl-sr-only"
               >
                 
               </span>
diff --git a/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
index bdf5ea23812..06be40fc941 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
@@ -225,7 +225,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     >
       <div
         boundary="scrollParent"
-        class="dropdown b-dropdown gl-new-dropdown btn-group"
+        class="dropdown b-dropdown gl-dropdown btn-group"
         id="__BVID__13"
         lazy=""
         menu-class="dropdown-extended-height"
diff --git a/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js b/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js
new file mode 100644
index 00000000000..cb7262b15e3
--- /dev/null
+++ b/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js
@@ -0,0 +1,132 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlListbox } from '@gitlab/ui';
+import ListboxInput from '~/vue_shared/components/listbox_input/listbox_input.vue';
+
+describe('ListboxInput', () => {
+  let wrapper;
+
+  // Props
+  const name = 'name';
+  const defaultToggleText = 'defaultToggleText';
+  const items = [
+    {
+      text: 'Group 1',
+      options: [
+        { text: 'Item 1', value: '1' },
+        { text: 'Item 2', value: '2' },
+      ],
+    },
+    {
+      text: 'Group 2',
+      options: [{ text: 'Item 3', value: '3' }],
+    },
+  ];
+
+  // Finders
+  const findGlListbox = () => wrapper.findComponent(GlListbox);
+  const findInput = () => wrapper.find('input');
+
+  const createComponent = (propsData) => {
+    wrapper = shallowMount(ListboxInput, {
+      propsData: {
+        name,
+        defaultToggleText,
+        items,
+        ...propsData,
+      },
+    });
+  };
+
+  describe('input attributes', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('sets the input name', () => {
+      expect(findInput().attributes('name')).toBe(name);
+    });
+  });
+
+  describe('toggle text', () => {
+    it('uses the default toggle text while no value is selected', () => {
+      createComponent();
+
+      expect(findGlListbox().props('toggleText')).toBe(defaultToggleText);
+    });
+
+    it("uses the selected option's text as the toggle text", () => {
+      const selectedOption = items[0].options[0];
+      createComponent({ selected: selectedOption.value });
+
+      expect(findGlListbox().props('toggleText')).toBe(selectedOption.text);
+    });
+  });
+
+  describe('input value', () => {
+    const selectedOption = items[0].options[0];
+
+    beforeEach(() => {
+      createComponent({ selected: selectedOption.value });
+      jest.spyOn(findInput().element, 'dispatchEvent');
+    });
+
+    it("sets the listbox's and input's values", () => {
+      const { value } = selectedOption;
+
+      expect(findGlListbox().props('selected')).toBe(value);
+      expect(findInput().attributes('value')).toBe(value);
+    });
+
+    describe("when the listbox's value changes", () => {
+      const newSelectedOption = items[1].options[0];
+
+      beforeEach(() => {
+        findGlListbox().vm.$emit('select', newSelectedOption.value);
+      });
+
+      it('emits the `select` event', () => {
+        expect(wrapper.emitted('select')).toEqual([[newSelectedOption.value]]);
+      });
+    });
+  });
+
+  describe('search', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('passes all items to GlListbox by default', () => {
+      createComponent();
+      expect(findGlListbox().props('items')).toStrictEqual(items);
+    });
+
+    describe('with groups', () => {
+      beforeEach(() => {
+        createComponent();
+        findGlListbox().vm.$emit('search', '1');
+      });
+
+      it('passes only the items that match the search string', async () => {
+        expect(findGlListbox().props('items')).toStrictEqual([
+          {
+            text: 'Group 1',
+            options: [{ text: 'Item 1', value: '1' }],
+          },
+        ]);
+      });
+    });
+
+    describe('with flat items', () => {
+      beforeEach(() => {
+        createComponent({
+          items: items[0].options,
+        });
+        findGlListbox().vm.$emit('search', '1');
+      });
+
+      it('passes only the items that match the search string', async () => {
+        expect(findGlListbox().props('items')).toStrictEqual([{ text: 'Item 1', value: '1' }]);
+      });
+    });
+  });
+});