Add latest changes from gitlab-org/gitlab@master

6 files changed, 118 insertions, 73 deletions

diff --git a/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js b/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js
index 65336edd0d8..a454066b457 100644
--- a/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js
+++ b/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js
@@ -2,12 +2,10 @@ import { GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 
 import AdminNewRunnerApp from '~/ci/runner/admin_new_runner/admin_new_runner_app.vue';
 import { saveAlertToLocalStorage } from '~/ci/runner/local_storage_alert/save_alert_to_local_storage';
-import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import {
   PARAM_KEY_PLATFORM,
@@ -17,7 +15,7 @@ import {
 } from '~/ci/runner/constants';
 import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { runnerCreateResult, mockRegistrationToken } from '../mock_data';
+import { runnerCreateResult } from '../mock_data';
 
 jest.mock('~/ci/runner/local_storage_alert/save_alert_to_local_storage');
 jest.mock('~/alert');
@@ -31,19 +29,11 @@ const mockCreatedRunner = runnerCreateResult.data.runnerCreate.runner;
 describe('AdminNewRunnerApp', () => {
   let wrapper;
 
-  const findLegacyInstructionsLink = () => wrapper.findByTestId('legacy-instructions-link');
-  const findRunnerInstructionsModal = () => wrapper.findComponent(RunnerInstructionsModal);
   const findRunnerPlatformsRadioGroup = () => wrapper.findComponent(RunnerPlatformsRadioGroup);
   const findRunnerCreateForm = () => wrapper.findComponent(RunnerCreateForm);
 
   const createComponent = () => {
     wrapper = shallowMountExtended(AdminNewRunnerApp, {
-      propsData: {
-        legacyRegistrationToken: mockRegistrationToken,
-      },
-      directives: {
-        GlModal: createMockDirective('gl-modal'),
-      },
       stubs: {
         GlSprintf,
       },
@@ -54,20 +44,6 @@ describe('AdminNewRunnerApp', () => {
     createComponent();
   });
 
-  describe('Shows legacy modal', () => {
-    it('passes legacy registration to modal', () => {
-      expect(findRunnerInstructionsModal().props('registrationToken')).toEqual(
-        mockRegistrationToken,
-      );
-    });
-
-    it('opens a modal with the legacy instructions', () => {
-      const modalId = getBinding(findLegacyInstructionsLink().element, 'gl-modal').value;
-
-      expect(findRunnerInstructionsModal().props('modalId')).toBe(modalId);
-    });
-  });
-
   describe('Platform', () => {
     it('shows the platforms radio group', () => {
       expect(findRunnerPlatformsRadioGroup().props('value')).toBe(DEFAULT_PLATFORM);
diff --git a/spec/frontend/ci/runner/components/registration/registration_compatibility_alert_spec.js b/spec/frontend/ci/runner/components/registration/registration_compatibility_alert_spec.js
new file mode 100644
index 00000000000..ba8a1ac6744
--- /dev/null
+++ b/spec/frontend/ci/runner/components/registration/registration_compatibility_alert_spec.js
@@ -0,0 +1,32 @@
+import { GlAlert, GlLink } from '@gitlab/ui';
+import RegistrationCompatibilityAlert from '~/ci/runner/components/registration/registration_compatibility_alert.vue';
+import { CHANGELOG_URL } from '~/ci/runner/constants';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('RegistrationCompatibilityAlert', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLink = () => wrapper.findComponent(GlLink);
+
+  const createComponent = (mountFn = shallowMountExtended) => {
+    wrapper = mountFn(RegistrationCompatibilityAlert);
+  };
+
+  it('alert has warning appearance', () => {
+    createComponent();
+
+    expect(findAlert().props()).toMatchObject({
+      dismissible: false,
+      variant: 'warning',
+      title: expect.any(String),
+    });
+  });
+
+  it('shows alert content and link', () => {
+    createComponent(mountExtended);
+
+    expect(findAlert().text()).not.toBe('');
+    expect(findLink().attributes('href')).toBe(CHANGELOG_URL);
+  });
+});
diff --git a/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js b/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js
index d23723807b1..9df7a974af3 100644
--- a/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js
+++ b/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlModal, GlDropdown, GlDropdownItem, GlDropdownForm } from '@gitlab/ui';
+import { GlModal, GlDropdown, GlDropdownItem, GlDropdownForm, GlIcon } from '@gitlab/ui';
 import { createWrapper } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -29,7 +29,7 @@ describe('RegistrationDropdown', () => {
   let wrapper;
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-
+  const findDropdownBtn = () => findDropdown().find('button');
   const findRegistrationInstructionsDropdownItem = () => wrapper.findComponent(GlDropdownItem);
   const findTokenDropdownItem = () => wrapper.findComponent(GlDropdownForm);
   const findRegistrationToken = () => wrapper.findComponent(RegistrationToken);
@@ -90,12 +90,25 @@ describe('RegistrationDropdown', () => {
     expect(wrapper.text()).toContain('Register an instance runner');
   });
 
-  it('Passes attributes to the dropdown component', () => {
+  it('Passes attributes to dropdown', () => {
     createComponent({ attrs: { right: true } });
 
     expect(findDropdown().attributes()).toMatchObject({ right: 'true' });
   });
 
+  it('Passes default props and attributes to dropdown', () => {
+    createComponent();
+
+    expect(findDropdown().props()).toMatchObject({
+      category: 'primary',
+      variant: 'confirm',
+    });
+
+    expect(findDropdown().attributes()).toMatchObject({
+      toggleclass: '',
+    });
+  });
+
   describe('Instructions dropdown item', () => {
     it('Displays "Show runner" dropdown item', () => {
       createComponent();
@@ -196,4 +209,51 @@ describe('RegistrationDropdown', () => {
       expect(findModalContent()).toContain(newToken);
     });
   });
+
+  describe.each([
+    { createRunnerWorkflowForAdmin: true },
+    { createRunnerWorkflowForNamespace: true },
+  ])('When showing a "deprecated" warning', (glFeatures) => {
+    it('Passes deprecated variant props and attributes to dropdown', () => {
+      createComponent({
+        provide: { glFeatures },
+      });
+
+      expect(findDropdown().props()).toMatchObject({
+        category: 'tertiary',
+        variant: 'default',
+        text: '',
+      });
+
+      expect(findDropdown().attributes()).toMatchObject({
+        toggleclass: 'gl-px-3!',
+      });
+    });
+
+    it('shows warning text', () => {
+      createComponent(
+        {
+          provide: { glFeatures },
+        },
+        mountExtended,
+      );
+
+      const text = wrapper.findByText(s__('Runners|Support for registration tokens is deprecated'));
+
+      expect(text.exists()).toBe(true);
+    });
+
+    it('button shows only ellipsis icon', () => {
+      createComponent(
+        {
+          provide: { glFeatures },
+        },
+        mountExtended,
+      );
+
+      expect(findDropdownBtn().text()).toBe('');
+      expect(findDropdownBtn().findComponent(GlIcon).props('name')).toBe('ellipsis_v');
+      expect(findDropdownBtn().findAllComponents(GlIcon)).toHaveLength(1);
+    });
+  });
 });
diff --git a/spec/frontend/ci/runner/components/registration/registration_token_spec.js b/spec/frontend/ci/runner/components/registration/registration_token_spec.js
index fc659f7974f..869c032c0b5 100644
--- a/spec/frontend/ci/runner/components/registration/registration_token_spec.js
+++ b/spec/frontend/ci/runner/components/registration/registration_token_spec.js
@@ -13,13 +13,14 @@ describe('RegistrationToken', () => {
 
   const findInputCopyToggleVisibility = () => wrapper.findComponent(InputCopyToggleVisibility);
 
-  const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
+  const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => {
     wrapper = mountFn(RegistrationToken, {
       propsData: {
         value: mockRegistrationToken,
         inputId: 'token-value',
         ...props,
       },
+      ...options,
     });
 
     showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null;
@@ -61,4 +62,23 @@ describe('RegistrationToken', () => {
       expect(showToast).toHaveBeenCalledWith('Registration token copied!');
     });
   });
+
+  describe('When slots are used', () => {
+    const slotName = 'label-description';
+    const slotContent = 'Label Description';
+
+    beforeEach(() => {
+      createComponent({
+        slots: {
+          [slotName]: slotContent,
+        },
+      });
+    });
+
+    it('passes slots to the input component', () => {
+      const slot = findInputCopyToggleVisibility().vm.$scopedSlots[slotName];
+
+      expect(slot()[0].text).toBe(slotContent);
+    });
+  });
 });
diff --git a/spec/frontend/ci/runner/group_new_runner_app/group_new_runner_app_spec.js b/spec/frontend/ci/runner/group_new_runner_app/group_new_runner_app_spec.js
index 520c9eed003..add2e58045c 100644
--- a/spec/frontend/ci/runner/group_new_runner_app/group_new_runner_app_spec.js
+++ b/spec/frontend/ci/runner/group_new_runner_app/group_new_runner_app_spec.js
@@ -2,12 +2,10 @@ import { GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 
 import GroupRunnerRunnerApp from '~/ci/runner/group_new_runner/group_new_runner_app.vue';
 import { saveAlertToLocalStorage } from '~/ci/runner/local_storage_alert/save_alert_to_local_storage';
-import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import {
   PARAM_KEY_PLATFORM,
@@ -17,7 +15,7 @@ import {
 } from '~/ci/runner/constants';
 import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { runnerCreateResult, mockRegistrationToken } from '../mock_data';
+import { runnerCreateResult } from '../mock_data';
 
 const mockGroupId = 'gid://gitlab/Group/72';
 
@@ -33,8 +31,6 @@ const mockCreatedRunner = runnerCreateResult.data.runnerCreate.runner;
 describe('GroupRunnerRunnerApp', () => {
   let wrapper;
 
-  const findLegacyInstructionsLink = () => wrapper.findByTestId('legacy-instructions-link');
-  const findRunnerInstructionsModal = () => wrapper.findComponent(RunnerInstructionsModal);
   const findRunnerPlatformsRadioGroup = () => wrapper.findComponent(RunnerPlatformsRadioGroup);
   const findRunnerCreateForm = () => wrapper.findComponent(RunnerCreateForm);
 
@@ -42,10 +38,6 @@ describe('GroupRunnerRunnerApp', () => {
     wrapper = shallowMountExtended(GroupRunnerRunnerApp, {
       propsData: {
         groupId: mockGroupId,
-        legacyRegistrationToken: mockRegistrationToken,
-      },
-      directives: {
-        GlModal: createMockDirective('gl-modal'),
       },
       stubs: {
         GlSprintf,
@@ -57,20 +49,6 @@ describe('GroupRunnerRunnerApp', () => {
     createComponent();
   });
 
-  describe('Shows legacy modal', () => {
-    it('passes legacy registration to modal', () => {
-      expect(findRunnerInstructionsModal().props('registrationToken')).toEqual(
-        mockRegistrationToken,
-      );
-    });
-
-    it('opens a modal with the legacy instructions', () => {
-      const modalId = getBinding(findLegacyInstructionsLink().element, 'gl-modal').value;
-
-      expect(findRunnerInstructionsModal().props('modalId')).toBe(modalId);
-    });
-  });
-
   describe('Platform', () => {
     it('shows the platforms radio group', () => {
       expect(findRunnerPlatformsRadioGroup().props('value')).toBe(DEFAULT_PLATFORM);
diff --git a/spec/frontend/ci/runner/project_new_runner_app/project_new_runner_app_spec.js b/spec/frontend/ci/runner/project_new_runner_app/project_new_runner_app_spec.js
index 701a93352ef..6949108fb1f 100644
--- a/spec/frontend/ci/runner/project_new_runner_app/project_new_runner_app_spec.js
+++ b/spec/frontend/ci/runner/project_new_runner_app/project_new_runner_app_spec.js
@@ -2,11 +2,9 @@ import { GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 
 import ProjectRunnerRunnerApp from '~/ci/runner/project_new_runner/project_new_runner_app.vue';
-import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import { PROJECT_TYPE, DEFAULT_PLATFORM } from '~/ci/runner/constants';
 import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
@@ -26,8 +24,6 @@ const mockCreatedRunner = runnerCreateResult.data.runnerCreate.runner;
 describe('ProjectRunnerRunnerApp', () => {
   let wrapper;
 
-  const findLegacyInstructionsLink = () => wrapper.findByTestId('legacy-instructions-link');
-  const findRunnerInstructionsModal = () => wrapper.findComponent(RunnerInstructionsModal);
   const findRunnerPlatformsRadioGroup = () => wrapper.findComponent(RunnerPlatformsRadioGroup);
   const findRunnerCreateForm = () => wrapper.findComponent(RunnerCreateForm);
 
@@ -37,9 +33,6 @@ describe('ProjectRunnerRunnerApp', () => {
         projectId: mockProjectId,
         legacyRegistrationToken: mockRegistrationToken,
       },
-      directives: {
-        GlModal: createMockDirective('gl-modal'),
-      },
       stubs: {
         GlSprintf,
       },
@@ -50,20 +43,6 @@ describe('ProjectRunnerRunnerApp', () => {
     createComponent();
   });
 
-  describe('Shows legacy modal', () => {
-    it('passes legacy registration to modal', () => {
-      expect(findRunnerInstructionsModal().props('registrationToken')).toEqual(
-        mockRegistrationToken,
-      );
-    });
-
-    it('opens a modal with the legacy instructions', () => {
-      const modalId = getBinding(findLegacyInstructionsLink().element, 'gl-modal').value;
-
-      expect(findRunnerInstructionsModal().props('modalId')).toBe(modalId);
-    });
-  });
-
   describe('Platform', () => {
     it('shows the platforms radio group', () => {
       expect(findRunnerPlatformsRadioGroup().props('value')).toBe(DEFAULT_PLATFORM);