Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

8 files changed, 369 insertions, 147 deletions

diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index dc7f0ebae74..db723622a51 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -8,6 +8,9 @@ import { stubComponent } from 'helpers/stub_component';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { clusterAgents, connectedTimeNow, connectedTimeInactive } from './mock_data';
 
+const defaultConfigHelpUrl =
+  '/help/user/clusters/agent/install/index#create-an-agent-without-configuration-file';
+
 const provideData = {
   gitlabVersion: '14.8',
 };
@@ -31,8 +34,8 @@ describe('AgentTable', () => {
   let wrapper;
 
   const findAgentLink = (at) => wrapper.findAllByTestId('cluster-agent-name-link').at(at);
-  const findStatusIcon = (at) => wrapper.findAllComponents(GlIcon).at(at);
   const findStatusText = (at) => wrapper.findAllByTestId('cluster-agent-connection-status').at(at);
+  const findStatusIcon = (at) => findStatusText(at).find(GlIcon);
   const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at);
   const findVersionText = (at) => wrapper.findAllByTestId('cluster-agent-version').at(at);
   const findConfiguration = (at) =>
@@ -141,16 +144,16 @@ describe('AgentTable', () => {
     );
 
     it.each`
-      agentPath                   | hasLink  | lineNumber
-      ${'.gitlab/agents/agent-1'} | ${true}  | ${0}
-      ${'.gitlab/agents/agent-2'} | ${false} | ${1}
+      agentConfig                 | link                    | lineNumber
+      ${'.gitlab/agents/agent-1'} | ${'/agent/full/path'}   | ${0}
+      ${'Default configuration'}  | ${defaultConfigHelpUrl} | ${1}
     `(
       'displays config file path as "$agentPath" at line $lineNumber',
-      ({ agentPath, hasLink, lineNumber }) => {
+      ({ agentConfig, link, lineNumber }) => {
         const findLink = findConfiguration(lineNumber).find(GlLink);
 
-        expect(findLink.exists()).toBe(hasLink);
-        expect(findConfiguration(lineNumber).text()).toBe(agentPath);
+        expect(findLink.attributes('href')).toBe(link);
+        expect(findConfiguration(lineNumber).text()).toBe(agentConfig);
       },
     );
 
diff --git a/spec/frontend/clusters_list/components/agent_token_spec.js b/spec/frontend/clusters_list/components/agent_token_spec.js
new file mode 100644
index 00000000000..a80c8ffaad4
--- /dev/null
+++ b/spec/frontend/clusters_list/components/agent_token_spec.js
@@ -0,0 +1,76 @@
+import { GlAlert, GlFormInputGroup } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import AgentToken from '~/clusters_list/components/agent_token.vue';
+import { I18N_AGENT_TOKEN, INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants';
+import { generateAgentRegistrationCommand } from '~/clusters_list/clusters_util';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+
+const kasAddress = 'kas.example.com';
+const agentToken = 'agent-token';
+const modalId = INSTALL_AGENT_MODAL_ID;
+
+describe('InstallAgentModal', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findCodeBlock = () => wrapper.findComponent(CodeBlock);
+  const findCopyButton = () => wrapper.findComponent(ModalCopyButton);
+  const findInput = () => wrapper.findComponent(GlFormInputGroup);
+
+  const createWrapper = () => {
+    const provide = {
+      kasAddress,
+    };
+
+    const propsData = {
+      agentToken,
+      modalId,
+    };
+
+    wrapper = shallowMountExtended(AgentToken, {
+      provide,
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('initial state', () => {
+    it('shows basic agent installation instructions', () => {
+      expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallTitle);
+      expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallBody);
+    });
+
+    it('shows advanced agent installation instructions', () => {
+      expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.advancedInstallTitle);
+    });
+
+    it('shows agent token as an input value', () => {
+      expect(findInput().props('value')).toBe('agent-token');
+    });
+
+    it('renders a copy button', () => {
+      expect(findCopyButton().props()).toMatchObject({
+        title: 'Copy command',
+        text: generateAgentRegistrationCommand(agentToken, kasAddress),
+        modalId,
+      });
+    });
+
+    it('shows warning alert', () => {
+      expect(findAlert().props('title')).toBe(I18N_AGENT_TOKEN.tokenSingleUseWarningTitle);
+    });
+
+    it('shows code block with agent installation command', () => {
+      expect(findCodeBlock().props('code')).toContain('--agent-token=agent-token');
+      expect(findCodeBlock().props('code')).toContain('--kas-address=kas.example.com');
+    });
+  });
+});
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 bcc1d4e8b9e..eca2b1f5cb1 100644
--- a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
+++ b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
@@ -1,5 +1,5 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants';
 
@@ -9,11 +9,14 @@ describe('AvailableAgentsDropdown', () => {
   const i18n = I18N_AVAILABLE_AGENTS_DROPDOWN;
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findConfiguredAgentItem = () => findDropdownItems().at(0);
+  const findFirstAgentItem = () => findDropdownItems().at(0);
+  const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
+  const findCreateButton = () => wrapper.findByTestId('create-config-button');
 
   const createWrapper = ({ propsData }) => {
-    wrapper = shallowMount(AvailableAgentsDropdown, {
+    wrapper = shallowMountExtended(AvailableAgentsDropdown, {
       propsData,
+      stubs: { GlDropdown },
     });
   };
 
@@ -23,7 +26,7 @@ describe('AvailableAgentsDropdown', () => {
 
   describe('there are agents available', () => {
     const propsData = {
-      availableAgents: ['configured-agent'],
+      availableAgents: ['configured-agent', 'search-agent', 'test-agent'],
       isRegistering: false,
     };
 
@@ -35,9 +38,38 @@ describe('AvailableAgentsDropdown', () => {
       expect(findDropdown().props('text')).toBe(i18n.selectAgent);
     });
 
-    describe('click events', () => {
+    describe('search agent', () => {
+      it('renders search button', () => {
+        expect(findSearchInput().exists()).toBe(true);
+      });
+
+      it('renders all agents when search term is empty', () => {
+        expect(findDropdownItems()).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');
+      });
+
+      it('renders create button when search started', async () => {
+        await findSearchInput().vm.$emit('input', 'new-agent');
+
+        expect(findCreateButton().exists()).toBe(true);
+      });
+
+      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('select existing agent configuration', () => {
       beforeEach(() => {
-        findConfiguredAgentItem().vm.$emit('click');
+        findFirstAgentItem().vm.$emit('click');
       });
 
       it('emits agentSelected with the name of the clicked agent', () => {
@@ -46,7 +78,22 @@ describe('AvailableAgentsDropdown', () => {
 
       it('marks the clicked item as selected', () => {
         expect(findDropdown().props('text')).toBe('configured-agent');
-        expect(findConfiguredAgentItem().props('isChecked')).toBe(true);
+        expect(findFirstAgentItem().props('isChecked')).toBe(true);
+      });
+    });
+
+    describe('create new agent configuration', () => {
+      beforeEach(async () => {
+        await findSearchInput().vm.$emit('input', 'new-agent');
+        findCreateButton().vm.$emit('click');
+      });
+
+      it('emits agentSelected with the name of the clicked agent', () => {
+        expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]);
+      });
+
+      it('marks the clicked item as selected', () => {
+        expect(findDropdown().props('text')).toBe('new-agent');
       });
     });
   });
diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
index 331690fc642..312df12ab5f 100644
--- a/spec/frontend/clusters_list/components/clusters_actions_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ClustersActions from '~/clusters_list/components/clusters_actions.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -14,13 +14,18 @@ describe('ClustersActionsComponent', () => {
     newClusterPath,
     addClusterPath,
     canAddCluster: true,
+    displayClusterAgents: true,
+    certificateBasedClustersEnabled: true,
   };
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownItemIds = () =>
+    findDropdownItems().wrappers.map((x) => x.attributes('data-testid'));
   const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link');
   const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
   const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link');
+  const findConnectWithAgentButton = () => wrapper.findComponent(GlButton);
 
   const createWrapper = (provideData = {}) => {
     wrapper = shallowMountExtended(ClustersActions, {
@@ -42,43 +47,110 @@ describe('ClustersActionsComponent', () => {
   afterEach(() => {
     wrapper.destroy();
   });
+  describe('when the certificate based clusters are enabled', () => {
+    it('renders actions menu', () => {
+      expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
+    });
 
-  it('renders actions menu', () => {
-    expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
-  });
+    it('renders correct href attributes for the links', () => {
+      expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
+      expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
+    });
 
-  it('renders a dropdown with 3 actions items', () => {
-    expect(findDropdownItems()).toHaveLength(3);
-  });
+    describe('when user cannot add clusters', () => {
+      beforeEach(() => {
+        createWrapper({ canAddCluster: false });
+      });
 
-  it('renders correct href attributes for the links', () => {
-    expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
-    expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
-  });
+      it('disables dropdown', () => {
+        expect(findDropdown().props('disabled')).toBe(true);
+      });
 
-  it('renders correct modal id for the agent link', () => {
-    const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+      it('shows tooltip explaining why dropdown is disabled', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+      });
 
-    expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
-  });
+      it('does not bind split dropdown button', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(false);
+      });
+    });
+
+    describe('when on project level', () => {
+      it('renders a dropdown with 3 actions items', () => {
+        expect(findDropdownItemIds()).toEqual([
+          'connect-new-agent-link',
+          'new-cluster-link',
+          'connect-cluster-link',
+        ]);
+      });
+
+      it('renders correct modal id for the agent link', () => {
+        const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
 
-  it('shows tooltip', () => {
-    const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-    expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      it('shows tooltip', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      });
+
+      it('shows split button in dropdown', () => {
+        expect(findDropdown().props('split')).toBe(true);
+      });
+
+      it('binds split button with modal id', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
+    });
+
+    describe('when on group or admin level', () => {
+      beforeEach(() => {
+        createWrapper({ displayClusterAgents: false });
+      });
+
+      it('renders a dropdown with 2 actions items', () => {
+        expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']);
+      });
+
+      it('shows tooltip', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster);
+      });
+
+      it('does not show split button in dropdown', () => {
+        expect(findDropdown().props('split')).toBe(false);
+      });
+
+      it('does not bind dropdown button to modal', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(false);
+      });
+    });
   });
 
-  describe('when user cannot add clusters', () => {
+  describe('when the certificate based clusters not enabled', () => {
     beforeEach(() => {
-      createWrapper({ canAddCluster: false });
+      createWrapper({ certificateBasedClustersEnabled: false });
     });
 
-    it('disables dropdown', () => {
-      expect(findDropdown().props('disabled')).toBe(true);
+    it('it does not show the the dropdown', () => {
+      expect(findDropdown().exists()).toBe(false);
     });
 
-    it('shows tooltip explaining why dropdown is disabled', () => {
-      const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-      expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+    it('shows the connect with agent button', () => {
+      expect(findConnectWithAgentButton().props()).toMatchObject({
+        disabled: !defaultProvide.canAddCluster,
+        category: 'primary',
+        variant: 'confirm',
+      });
+      expect(findConnectWithAgentButton().text()).toBe(CLUSTERS_ACTIONS.connectWithAgent);
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
index cf0f6881960..fe2189296a6 100644
--- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -4,7 +4,7 @@ import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.
 import ClusterStore from '~/clusters_list/store';
 
 const clustersEmptyStateImage = 'path/to/svg';
-const newClusterPath = '/path/to/connect/cluster';
+const addClusterPath = '/path/to/connect/cluster';
 const emptyStateHelpText = 'empty state text';
 
 describe('ClustersEmptyStateComponent', () => {
@@ -12,7 +12,7 @@ describe('ClustersEmptyStateComponent', () => {
 
   const defaultProvideData = {
     clustersEmptyStateImage,
-    newClusterPath,
+    addClusterPath,
   };
 
   const findButton = () => wrapper.findComponent(GlButton);
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index 37665bf7abd..218463b9adf 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -6,7 +6,9 @@ import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vu
 import {
   AGENT,
   CERTIFICATE_BASED,
+  AGENT_TAB,
   CLUSTERS_TABS,
+  CERTIFICATE_TAB,
   MAX_CLUSTERS_LIST,
   MAX_LIST_COUNT,
   EVENT_LABEL_TABS,
@@ -23,12 +25,20 @@ describe('ClustersMainViewComponent', () => {
     defaultBranchName,
   };
 
-  beforeEach(() => {
+  const defaultProvide = {
+    certificateBasedClustersEnabled: true,
+    displayClusterAgents: true,
+  };
+
+  const createWrapper = (extendedProvide = {}) => {
     wrapper = shallowMountExtended(ClustersMainView, {
       propsData,
+      provide: {
+        ...defaultProvide,
+        ...extendedProvide,
+      },
     });
-    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-  });
+  };
 
   afterEach(() => {
     wrapper.destroy();
@@ -39,57 +49,110 @@ describe('ClustersMainViewComponent', () => {
   const findGlTabAtIndex = (index) => findAllTabs().at(index);
   const findComponent = () => wrapper.findByTestId('clusters-tab-component');
   const findModal = () => wrapper.findComponent(InstallAgentModal);
+  describe('when the certificate based clusters are enabled', () => {
+    describe('when on project level', () => {
+      beforeEach(() => {
+        createWrapper({ displayClusterAgents: true });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
 
-  it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => {
-    expect(findTabs().exists()).toBe(true);
-    expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true);
-  });
+      it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => {
+        expect(findTabs().exists()).toBe(true);
+        expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true);
+      });
 
-  it('renders correct number of tabs', () => {
-    expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length);
-  });
+      it('renders correct number of tabs', () => {
+        expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length);
+      });
 
-  it('passes child-component param to the component', () => {
-    expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
-  });
+      describe('tabs', () => {
+        it.each`
+          tabTitle         | queryParamValue      | lineNumber
+          ${'All'}         | ${'all'}             | ${0}
+          ${'Agent'}       | ${AGENT}             | ${1}
+          ${'Certificate'} | ${CERTIFICATE_BASED} | ${2}
+        `(
+          'renders correct tab title and query param value',
+          ({ tabTitle, queryParamValue, lineNumber }) => {
+            expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle);
+            expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue);
+          },
+        );
+      });
 
-  it('passes correct max-agents param to the modal', () => {
-    expect(findModal().props('maxAgents')).toBe(MAX_CLUSTERS_LIST);
-  });
+      describe.each`
+        tab    | tabName
+        ${'1'} | ${AGENT}
+        ${'2'} | ${CERTIFICATE_BASED}
+      `(
+        'when the child component emits the tab change event for $tabName tab',
+        ({ tab, tabName }) => {
+          beforeEach(() => {
+            findComponent().vm.$emit('changeTab', tabName);
+          });
 
-  describe('tabs', () => {
-    it.each`
-      tabTitle         | queryParamValue      | lineNumber
-      ${'All'}         | ${'all'}             | ${0}
-      ${'Agent'}       | ${AGENT}             | ${1}
-      ${'Certificate'} | ${CERTIFICATE_BASED} | ${2}
-    `(
-      'renders correct tab title and query param value',
-      ({ tabTitle, queryParamValue, lineNumber }) => {
-        expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle);
-        expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue);
-      },
-    );
-  });
+          it(`changes the tab value to ${tab}`, () => {
+            expect(findTabs().attributes('value')).toBe(tab);
+          });
+        },
+      );
 
-  describe('when the child component emits the tab change event', () => {
-    beforeEach(() => {
-      findComponent().vm.$emit('changeTab', AGENT);
-    });
+      describe.each`
+        tab  | tabName              | maxAgents
+        ${1} | ${AGENT}             | ${MAX_LIST_COUNT}
+        ${2} | ${CERTIFICATE_BASED} | ${MAX_CLUSTERS_LIST}
+      `('when the active tab is $tabName', ({ tab, tabName, maxAgents }) => {
+        beforeEach(() => {
+          findTabs().vm.$emit('input', tab);
+        });
+
+        it('passes child-component param to the component', () => {
+          expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
+        });
+
+        it(`sets max-agents param to ${maxAgents} and passes it to the modal`, () => {
+          expect(findModal().props('maxAgents')).toBe(maxAgents);
+        });
 
-    it('changes the tab', () => {
-      expect(findTabs().attributes('value')).toBe('1');
+        it(`sends the correct tracking event with the property '${tabName}'`, () => {
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, {
+            label: EVENT_LABEL_TABS,
+            property: tabName,
+          });
+        });
+      });
     });
 
-    it('passes correct max-agents param to the modal', () => {
-      expect(findModal().props('maxAgents')).toBe(MAX_LIST_COUNT);
+    describe('when on group or admin level', () => {
+      beforeEach(() => {
+        createWrapper({ displayClusterAgents: false });
+      });
+
+      it('renders correct number of tabs', () => {
+        expect(findAllTabs()).toHaveLength(1);
+      });
+
+      it('renders correct tab title', () => {
+        expect(findGlTabAtIndex(0).attributes('title')).toBe(CERTIFICATE_TAB.title);
+      });
     });
 
-    it('sends the correct tracking event', () => {
-      findTabs().vm.$emit('input', 1);
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, {
-        label: EVENT_LABEL_TABS,
-        property: AGENT,
+    describe('when the certificate based clusters not enabled', () => {
+      beforeEach(() => {
+        createWrapper({ certificateBasedClustersEnabled: false });
+      });
+
+      it('it displays only the Agent tab', () => {
+        expect(findAllTabs()).toHaveLength(1);
+        const agentTab = findGlTabAtIndex(0);
+
+        expect(agentTab.props()).toMatchObject({
+          queryParamValue: AGENT_TAB.queryParamValue,
+          titleLinkClass: '',
+        });
+        expect(agentTab.attributes()).toMatchObject({
+          title: AGENT_TAB.title,
+        });
       });
     });
   });
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 82e667093aa..3f3f5e0daf6 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -2,7 +2,7 @@ import {
   GlLoadingIcon,
   GlPagination,
   GlDeprecatedSkeletonLoading as GlSkeletonLoading,
-  GlTable,
+  GlTableLite,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
@@ -23,7 +23,7 @@ describe('Clusters', () => {
   const totalClustersNumber = 6;
   const clustersEmptyStateImage = 'path/to/svg';
   const emptyStateHelpText = null;
-  const newClusterPath = '/path/to/new/cluster';
+  const addClusterPath = '/path/to/new/cluster';
 
   const entryData = {
     endpoint,
@@ -36,12 +36,12 @@ describe('Clusters', () => {
   const provideData = {
     clustersEmptyStateImage,
     emptyStateHelpText,
-    newClusterPath,
+    addClusterPath,
   };
 
   const findLoader = () => wrapper.findComponent(GlLoadingIcon);
   const findPaginatedButtons = () => wrapper.findComponent(GlPagination);
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findStatuses = () => findTable().findAll('.js-status');
   const findEmptyState = () => wrapper.findComponent(ClustersEmptyState);
 
@@ -51,7 +51,7 @@ describe('Clusters', () => {
 
   const createWrapper = ({ propsData = {} }) => {
     store = ClusterStore(entryData);
-    wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTable } });
+    wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTableLite } });
     return axios.waitForAll();
   };
 
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 37432ed0193..38f653509a8 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -6,6 +6,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking } from 'helpers/tracking_helper';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
+import AgentToken from '~/clusters_list/components/agent_token.vue';
 import {
   I18N_AGENT_MODAL,
   MAX_LIST_COUNT,
@@ -21,7 +22,6 @@ import createAgentMutation from '~/clusters_list/graphql/mutations/create_agent.
 import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_agent_token.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import CodeBlock from '~/vue_shared/components/code_block.vue';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -39,6 +39,7 @@ const kasAddress = 'kas.example.com';
 const emptyStateImage = 'path/to/image';
 const defaultBranchName = 'default';
 const maxAgents = MAX_LIST_COUNT;
+const i18n = I18N_AGENT_MODAL;
 
 describe('InstallAgentModal', () => {
   let wrapper;
@@ -60,6 +61,7 @@ describe('InstallAgentModal', () => {
   const findModal = () => wrapper.findComponent(ModalStub);
   const findAgentDropdown = () => findModal().findComponent(AvailableAgentsDropdown);
   const findAlert = () => findModal().findComponent(GlAlert);
+  const findAgentInstructions = () => findModal().findComponent(AgentToken);
   const findButtonByVariant = (variant) =>
     findModal()
       .findAll(GlButton)
@@ -67,7 +69,7 @@ describe('InstallAgentModal', () => {
   const findActionButton = () => findButtonByVariant('confirm');
   const findCancelButton = () => findButtonByVariant('default');
   const findPrimaryButton = () => wrapper.findByTestId('agent-primary-button');
-  const findImage = () => wrapper.findByRole('img', { alt: I18N_AGENT_MODAL.empty_state.altText });
+  const findImage = () => wrapper.findByRole('img', { alt: i18n.altText });
 
   const expectDisabledAttribute = (element, disabled) => {
     if (disabled) {
@@ -140,16 +142,16 @@ describe('InstallAgentModal', () => {
     apolloProvider = null;
   });
 
-  describe('when agent configurations are present', () => {
-    const i18n = I18N_AGENT_MODAL.agent_registration;
-
+  describe('when KAS is enabled', () => {
     describe('initial state', () => {
       it('renders the dropdown for available agents', () => {
         expect(findAgentDropdown().isVisible()).toBe(true);
+      });
+
+      it("doesn't render agent installation instructions", () => {
         expect(findModal().text()).not.toContain(i18n.basicInstallTitle);
         expect(findModal().findComponent(GlFormInputGroup).exists()).toBe(false);
         expect(findModal().findComponent(GlAlert).exists()).toBe(false);
-        expect(findModal().findComponent(CodeBlock).exists()).toBe(false);
       });
 
       it('renders a cancel button', () => {
@@ -220,19 +222,7 @@ describe('InstallAgentModal', () => {
       });
 
       it('shows agent instructions', () => {
-        const modalText = findModal().text();
-        expect(modalText).toContain(i18n.basicInstallTitle);
-        expect(modalText).toContain(i18n.basicInstallBody);
-
-        const token = findModal().findComponent(GlFormInputGroup);
-        expect(token.props('value')).toBe('mock-agent-token');
-
-        const alert = findModal().findComponent(GlAlert);
-        expect(alert.props('title')).toBe(i18n.tokenSingleUseWarningTitle);
-
-        const code = findModal().findComponent(CodeBlock).props('code');
-        expect(code).toContain('--agent-token=mock-agent-token');
-        expect(code).toContain('--kas-address=kas.example.com');
+        expect(findAgentInstructions().exists()).toBe(true);
       });
 
       describe('error creating agent', () => {
@@ -272,44 +262,7 @@ describe('InstallAgentModal', () => {
     });
   });
 
-  describe('when there are no agent configurations present', () => {
-    const i18n = I18N_AGENT_MODAL.empty_state;
-    const apolloQueryEmptyResponse = {
-      data: {
-        project: {
-          clusterAgents: { nodes: [] },
-          agentConfigurations: { nodes: [] },
-        },
-      },
-    };
-
-    beforeEach(() => {
-      apolloProvider = createMockApollo([
-        [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryEmptyResponse)],
-      ]);
-      createWrapper();
-    });
-
-    it('renders empty state image', () => {
-      expect(findImage().attributes('src')).toBe(emptyStateImage);
-    });
-
-    it('renders a primary button', () => {
-      expect(findPrimaryButton().isVisible()).toBe(true);
-      expect(findPrimaryButton().text()).toBe(i18n.primaryButton);
-    });
-
-    it('sends the event with the modalType', () => {
-      findModal().vm.$emit('show');
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
-        label: EVENT_LABEL_MODAL,
-        property: MODAL_TYPE_EMPTY,
-      });
-    });
-  });
-
   describe('when KAS is disabled', () => {
-    const i18n = I18N_AGENT_MODAL.empty_state;
     beforeEach(async () => {
       apolloProvider = createMockApollo([
         [getAgentConfigurations, jest.fn().mockResolvedValue(kasDisabledErrorResponse)],
@@ -331,11 +284,19 @@ describe('InstallAgentModal', () => {
 
     it('renders a cancel button', () => {
       expect(findCancelButton().isVisible()).toBe(true);
-      expect(findCancelButton().text()).toBe(i18n.done);
+      expect(findCancelButton().text()).toBe(i18n.close);
     });
 
     it("doesn't render a secondary button", () => {
       expect(findPrimaryButton().exists()).toBe(false);
     });
+
+    it('sends the event with the modalType', () => {
+      findModal().vm.$emit('show');
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
+        label: EVENT_LABEL_MODAL,
+        property: MODAL_TYPE_EMPTY,
+      });
+    });
   });
 });