Add latest changes from gitlab-org/gitlab@master

2 files changed, 66 insertions, 49 deletions

diff --git a/spec/frontend/clusters_list/components/agent_token_spec.js b/spec/frontend/clusters_list/components/agent_token_spec.js
index e656a601699..a92a03fedb6 100644
--- a/spec/frontend/clusters_list/components/agent_token_spec.js
+++ b/spec/frontend/clusters_list/components/agent_token_spec.js
@@ -1,10 +1,12 @@
-import { GlAlert, GlFormInputGroup } from '@gitlab/ui';
+import { GlAlert, GlFormInputGroup, GlSprintf, GlLink, GlIcon } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { sprintf } from '~/locale';
 import AgentToken from '~/clusters_list/components/agent_token.vue';
 import {
   I18N_AGENT_TOKEN,
   INSTALL_AGENT_MODAL_ID,
   NAME_MAX_LENGTH,
+  HELM_VERSION_POLICY_URL,
 } from '~/clusters_list/constants';
 import { generateAgentRegistrationCommand } from '~/clusters_list/clusters_util';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -23,6 +25,8 @@ describe('InstallAgentModal', () => {
   const findCodeBlock = () => wrapper.findComponent(CodeBlock);
   const findCopyButton = () => wrapper.findComponent(ModalCopyButton);
   const findInput = () => wrapper.findComponent(GlFormInputGroup);
+  const findHelmVersionPolicyLink = () => wrapper.findComponent(GlLink);
+  const findHelmExternalLinkIcon = () => wrapper.findComponent(GlIcon);
 
   const createWrapper = (newAgentName = agentName) => {
     const provide = {
@@ -39,6 +43,9 @@ describe('InstallAgentModal', () => {
     wrapper = shallowMountExtended(AgentToken, {
       provide,
       propsData,
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
@@ -56,6 +63,17 @@ describe('InstallAgentModal', () => {
       expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallBody);
     });
 
+    it('shows Helm version policy text with an external link', () => {
+      expect(wrapper.text()).toContain(
+        sprintf(I18N_AGENT_TOKEN.helmVersionText, { linkStart: '', linkEnd: ' ' }),
+      );
+      expect(findHelmVersionPolicyLink().attributes()).toMatchObject({
+        href: HELM_VERSION_POLICY_URL,
+        target: '_blank',
+      });
+      expect(findHelmExternalLinkIcon().props()).toMatchObject({ name: 'external-link', size: 12 });
+    });
+
     it('shows advanced agent installation instructions', () => {
       expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.advancedInstallTitle);
     });
diff --git a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
index 197735d3c77..0a8447c5d80 100644
--- a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
+++ b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
@@ -1,34 +1,32 @@
-import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { GlSearchBoxByType, GlCollapsibleListbox, GlButton } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { ENTER_KEY } from '~/lib/utils/keys';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants';
 
 describe('AvailableAgentsDropdown', () => {
   let wrapper;
 
+  const configuredAgent = 'configured-agent';
+  const searchAgentName = 'search-agent';
+  const newAgentName = 'new-agent';
+
   const i18n = I18N_AVAILABLE_AGENTS_DROPDOWN;
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findFirstAgentItem = () => findDropdownItems().at(0);
-  const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
-  const findCreateButton = () => wrapper.findByTestId('create-config-button');
+  const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
+  const findSearchInput = () => findDropdown().findComponent(GlSearchBoxByType);
+  const findCreateButton = () => wrapper.findComponent(GlButton);
 
   const createWrapper = ({ propsData }) => {
     wrapper = shallowMountExtended(AvailableAgentsDropdown, {
       propsData,
-      stubs: { GlDropdown },
+      stubs: { GlCollapsibleListbox },
     });
-    wrapper.vm.$refs.dropdown.hide = jest.fn();
+    wrapper.vm.$refs.dropdown.closeAndFocus = jest.fn();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('there are agents available', () => {
     const propsData = {
-      availableAgents: ['configured-agent', 'search-agent', 'test-agent'],
+      availableAgents: [configuredAgent, searchAgentName, 'test-agent'],
       isRegistering: false,
     };
 
@@ -37,91 +35,92 @@ describe('AvailableAgentsDropdown', () => {
     });
 
     it('prompts to select an agent', () => {
-      expect(findDropdown().props('text')).toBe(i18n.selectAgent);
+      expect(findDropdown().props('toggleText')).toBe(i18n.selectAgent);
     });
 
     describe('search agent', () => {
       it('renders search button', () => {
-        expect(findSearchInput().exists()).toBe(true);
+        expect(findDropdown().props('searchable')).toBe(true);
       });
 
       it('renders all agents when search term is empty', () => {
-        expect(findDropdownItems()).toHaveLength(3);
+        expect(findDropdown().props('items')).toHaveLength(3);
       });
 
       it('renders only the agent searched for when the search item exists', async () => {
-        await findSearchInput().vm.$emit('input', 'search-agent');
-
-        expect(findDropdownItems()).toHaveLength(1);
-        expect(findFirstAgentItem().text()).toBe('search-agent');
-      });
+        findSearchInput().vm.$emit('input', searchAgentName);
+        await nextTick();
 
-      it('renders create button when search started', async () => {
-        await findSearchInput().vm.$emit('input', 'new-agent');
-
-        expect(findCreateButton().exists()).toBe(true);
+        expect(findDropdown().props('items')).toMatchObject([
+          { text: searchAgentName, value: searchAgentName },
+        ]);
       });
 
-      it("doesn't render create button when search item is found", async () => {
-        await findSearchInput().vm.$emit('input', 'search-agent');
-
-        expect(findCreateButton().exists()).toBe(false);
+      describe('create button', () => {
+        it.each`
+          condition            | search             | createButtonRendered
+          ${'is rendered'}     | ${newAgentName}    | ${true}
+          ${'is not rendered'} | ${''}              | ${false}
+          ${'is not rendered'} | ${searchAgentName} | ${false}
+        `('$condition when search is "$search"', async ({ search, createButtonRendered }) => {
+          findSearchInput().vm.$emit('input', search);
+          await nextTick();
+
+          expect(findCreateButton().exists()).toBe(createButtonRendered);
+        });
       });
     });
 
     describe('select existing agent configuration', () => {
       beforeEach(() => {
-        findFirstAgentItem().vm.$emit('click');
+        findDropdown().vm.$emit('select', configuredAgent);
       });
 
-      it('emits agentSelected with the name of the clicked agent', () => {
-        expect(wrapper.emitted('agentSelected')).toEqual([['configured-agent']]);
+      it('emits `agentSelected` with the name of the clicked agent', () => {
+        expect(wrapper.emitted('agentSelected')).toEqual([[configuredAgent]]);
       });
 
       it('marks the clicked item as selected', () => {
-        expect(findDropdown().props('text')).toBe('configured-agent');
-        expect(findFirstAgentItem().props('isChecked')).toBe(true);
+        expect(findDropdown().props('toggleText')).toBe(configuredAgent);
       });
     });
 
     describe('create new agent configuration', () => {
       beforeEach(async () => {
-        await findSearchInput().vm.$emit('input', 'new-agent');
+        findSearchInput().vm.$emit('input', newAgentName);
+        await nextTick();
         findCreateButton().vm.$emit('click');
       });
 
       it('emits agentSelected with the name of the clicked agent', () => {
-        expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]);
+        expect(wrapper.emitted('agentSelected')).toEqual([[newAgentName]]);
       });
 
       it('marks the clicked item as selected', () => {
-        expect(findDropdown().props('text')).toBe('new-agent');
+        expect(findDropdown().props('toggleText')).toBe(newAgentName);
       });
     });
 
     describe('click enter to register new agent without configuration', () => {
       beforeEach(async () => {
-        await findSearchInput().vm.$emit('input', 'new-agent');
-        await findSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+        findSearchInput().vm.$emit('input', newAgentName);
+        await nextTick();
+        await findDropdown().trigger('keydown.enter');
       });
 
       it('emits agentSelected with the name of the clicked agent', () => {
-        expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]);
+        expect(wrapper.emitted('agentSelected')).toEqual([[newAgentName]]);
       });
 
       it('marks the clicked item as selected', () => {
-        expect(findDropdown().props('text')).toBe('new-agent');
-      });
-
-      it('closes the dropdown', () => {
-        expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalledTimes(1);
+        expect(findDropdown().props('toggleText')).toBe(newAgentName);
       });
     });
   });
 
   describe('registration in progress', () => {
     const propsData = {
-      availableAgents: ['configured-agent'],
+      availableAgents: [configuredAgent],
       isRegistering: true,
     };
 
@@ -130,7 +129,7 @@ describe('AvailableAgentsDropdown', () => {
     });
 
     it('updates the text in the dropdown', () => {
-      expect(findDropdown().props('text')).toBe(i18n.registeringAgent);
+      expect(findDropdown().props('toggleText')).toBe(i18n.registeringAgent);
     });
 
     it('displays a loading icon', () => {