Add latest changes from gitlab-org/gitlab@master

2 files changed, 175 insertions, 124 deletions

diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
index 2cbd12a680b..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';
@@ -15,6 +15,7 @@ describe('ClustersActionsComponent', () => {
     addClusterPath,
     canAddCluster: true,
     displayClusterAgents: true,
+    certificateBasedClustersEnabled: true,
   };
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
@@ -24,6 +25,7 @@ describe('ClustersActionsComponent', () => {
   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, {
@@ -45,90 +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 correct href attributes for the links', () => {
-    expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
-    expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
-  });
+    describe('when user cannot add clusters', () => {
+      beforeEach(() => {
+        createWrapper({ canAddCluster: false });
+      });
 
-  describe('when user cannot add clusters', () => {
-    beforeEach(() => {
-      createWrapper({ canAddCluster: false });
-    });
+      it('disables dropdown', () => {
+        expect(findDropdown().props('disabled')).toBe(true);
+      });
 
-    it('disables dropdown', () => {
-      expect(findDropdown().props('disabled')).toBe(true);
-    });
+      it('shows tooltip explaining why dropdown is disabled', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+      });
+
+      it('does not bind split dropdown button', () => {
+        const binding = getBinding(findDropdown().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(false);
+      });
     });
 
-    it('does not bind split dropdown button', () => {
-      const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+    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',
+        ]);
+      });
 
-      expect(binding.value).toBe(false);
-    });
-  });
+      it('renders correct modal id for the agent link', () => {
+        const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
 
-  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',
-      ]);
-    });
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
 
-    it('renders correct modal id for the agent link', () => {
-      const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+      it('shows tooltip', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      });
 
-      expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
-    });
+      it('shows split button in dropdown', () => {
+        expect(findDropdown().props('split')).toBe(true);
+      });
 
-    it('shows tooltip', () => {
-      const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-      expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
-    });
+      it('binds split button with modal id', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
 
-    it('shows split button in dropdown', () => {
-      expect(findDropdown().props('split')).toBe(true);
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
     });
 
-    it('binds split button with modal id', () => {
-      const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+    describe('when on group or admin level', () => {
+      beforeEach(() => {
+        createWrapper({ displayClusterAgents: false });
+      });
 
-      expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
-    });
-  });
+      it('renders a dropdown with 2 actions items', () => {
+        expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']);
+      });
 
-  describe('when on group or admin level', () => {
-    beforeEach(() => {
-      createWrapper({ displayClusterAgents: false });
-    });
+      it('shows tooltip', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster);
+      });
 
-    it('renders a dropdown with 2 actions items', () => {
-      expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']);
-    });
+      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');
 
-    it('shows tooltip', () => {
-      const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-      expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster);
+        expect(binding.value).toBe(false);
+      });
     });
+  });
 
-    it('does not show split button in dropdown', () => {
-      expect(findDropdown().props('split')).toBe(false);
+  describe('when the certificate based clusters not enabled', () => {
+    beforeEach(() => {
+      createWrapper({ certificateBasedClustersEnabled: false });
     });
 
-    it('does not bind dropdown button to modal', () => {
-      const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+    it('it does not show the the dropdown', () => {
+      expect(findDropdown().exists()).toBe(false);
+    });
 
-      expect(binding.value).toBe(false);
+    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_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index 20754ffe5b7..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,6 +6,7 @@ import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vu
 import {
   AGENT,
   CERTIFICATE_BASED,
+  AGENT_TAB,
   CLUSTERS_TABS,
   CERTIFICATE_TAB,
   MAX_CLUSTERS_LIST,
@@ -24,10 +25,18 @@ describe('ClustersMainViewComponent', () => {
     defaultBranchName,
   };
 
-  const createWrapper = ({ displayClusterAgents }) => {
+  const defaultProvide = {
+    certificateBasedClustersEnabled: true,
+    displayClusterAgents: true,
+  };
+
+  const createWrapper = (extendedProvide = {}) => {
     wrapper = shallowMountExtended(ClustersMainView, {
       propsData,
-      provide: { displayClusterAgents },
+      provide: {
+        ...defaultProvide,
+        ...extendedProvide,
+      },
     });
   };
 
@@ -40,91 +49,111 @@ 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);
+      });
 
-  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);
-    });
+      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);
+          },
+        );
+      });
 
-    describe('tabs', () => {
-      it.each`
-        tabTitle         | queryParamValue      | lineNumber
-        ${'All'}         | ${'all'}             | ${0}
-        ${'Agent'}       | ${AGENT}             | ${1}
-        ${'Certificate'} | ${CERTIFICATE_BASED} | ${2}
+      describe.each`
+        tab    | tabName
+        ${'1'} | ${AGENT}
+        ${'2'} | ${CERTIFICATE_BASED}
       `(
-        '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);
+        'when the child component emits the tab change event for $tabName tab',
+        ({ tab, tabName }) => {
+          beforeEach(() => {
+            findComponent().vm.$emit('changeTab', tabName);
+          });
+
+          it(`changes the tab value to ${tab}`, () => {
+            expect(findTabs().attributes('value')).toBe(tab);
+          });
         },
       );
-    });
 
-    describe.each`
-      tab    | tabName
-      ${'1'} | ${AGENT}
-      ${'2'} | ${CERTIFICATE_BASED}
-    `(
-      'when the child component emits the tab change event for $tabName tab',
-      ({ tab, tabName }) => {
+      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(() => {
-          findComponent().vm.$emit('changeTab', tabName);
+          findTabs().vm.$emit('input', tab);
         });
 
-        it(`changes the tab value to ${tab}`, () => {
-          expect(findTabs().attributes('value')).toBe(tab);
+        it('passes child-component param to the component', () => {
+          expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
         });
-      },
-    );
 
-    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(`sets max-agents param to ${maxAgents} and passes it to the modal`, () => {
+          expect(findModal().props('maxAgents')).toBe(maxAgents);
+        });
+
+        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 child-component param to the component', () => {
-        expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
+    describe('when on group or admin level', () => {
+      beforeEach(() => {
+        createWrapper({ displayClusterAgents: false });
       });
 
-      it(`sets max-agents param to ${maxAgents} and passes it to the modal`, () => {
-        expect(findModal().props('maxAgents')).toBe(maxAgents);
+      it('renders correct number of tabs', () => {
+        expect(findAllTabs()).toHaveLength(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('renders correct tab title', () => {
+        expect(findGlTabAtIndex(0).attributes('title')).toBe(CERTIFICATE_TAB.title);
       });
     });
-  });
 
-  describe('when on group or admin level', () => {
-    beforeEach(() => {
-      createWrapper({ displayClusterAgents: false });
-    });
+    describe('when the certificate based clusters not enabled', () => {
+      beforeEach(() => {
+        createWrapper({ certificateBasedClustersEnabled: false });
+      });
 
-    it('renders correct number of tabs', () => {
-      expect(findAllTabs()).toHaveLength(1);
-    });
+      it('it displays only the Agent tab', () => {
+        expect(findAllTabs()).toHaveLength(1);
+        const agentTab = findGlTabAtIndex(0);
 
-    it('renders correct tab title', () => {
-      expect(findGlTabAtIndex(0).attributes('title')).toBe(CERTIFICATE_TAB.title);
+        expect(agentTab.props()).toMatchObject({
+          queryParamValue: AGENT_TAB.queryParamValue,
+          titleLinkClass: '',
+        });
+        expect(agentTab.attributes()).toMatchObject({
+          title: AGENT_TAB.title,
+        });
+      });
     });
   });
 });