Updated actions menu

Updated actions menu and corresponding tests

app/assets/javascripts/clusters_list/components/clusters_actions.vue

 <script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlModalDirective,
-  GlTooltipDirective,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
 
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
@@ -16,12 +9,10 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownSectionHeader,
+    GlTooltip,
   },
   directives: {
     GlModalDirective,
-    GlTooltip: GlTooltipDirective,
   },
   inject: [
     'newClusterPath',
@@ -32,22 +23,24 @@ export default {
     'certificateBasedClustersEnabled',
   ],
   computed: {
-    tooltip() {
-      const { connectWithAgent, connectExistingCluster, dropdownDisabledHint } = this.$options.i18n;
-
-      if (!this.canAddCluster) {
-        return dropdownDisabledHint;
-      } else if (this.displayClusterAgents) {
-        return connectWithAgent;
-      }
-
-      return connectExistingCluster;
-    },
     shouldTriggerModal() {
       return this.canAddCluster && this.displayClusterAgents;
     },
-    hasSectionHeaders() {
-      return this.displayClusterAgents && this.certificateBasedClustersEnabled;
+    defaultActionText() {
+      const { connectCluster, connectWithAgent, connectClusterDeprecated } = this.$options.i18n;
+
+      if (!this.displayClusterAgents) {
+        return connectClusterDeprecated;
+      } else if (!this.certificateBasedClustersEnabled) {
+        return connectCluster;
+      }
+      return connectWithAgent;
+    },
+    defaultActionUrl() {
+      if (this.displayClusterAgents) {
+        return null;
+      }
+      return this.addClusterPath;
     },
   },
 };
@@ -55,47 +48,50 @@ export default {
 
 <template>
   <div class="nav-controls gl-ml-auto">
+    <gl-tooltip
+      v-if="!canAddCluster"
+      :target="() => $refs.dropdown.$el"
+      :title="$options.i18n.dropdownDisabledHint"
+    />
+
     <gl-dropdown
       ref="dropdown"
       v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
       category="primary"
       variant="confirm"
-      :text="$options.i18n.actionsButton"
+      :text="defaultActionText"
       :disabled="!canAddCluster"
-      :split="displayClusterAgents"
+      :split-href="defaultActionUrl"
+      split
       right
     >
-      <gl-dropdown-section-header v-if="hasSectionHeaders">{{
-        $options.i18n.agent
-      }}</gl-dropdown-section-header>
-
-      <template v-if="displayClusterAgents">
       <gl-dropdown-item
-          v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-          data-testid="connect-new-agent-link"
+        v-if="displayClusterAgents"
+        :href="newClusterDocsPath"
+        data-testid="create-cluster-link"
+        @click.stop
       >
-          {{ $options.i18n.connectWithAgent }}
+        {{ $options.i18n.createCluster }}
       </gl-dropdown-item>
-        <gl-dropdown-item :href="newClusterDocsPath" data-testid="create-cluster-link" @click.stop>
-          {{ $options.i18n.createAndConnectCluster }}
-        </gl-dropdown-item>
-      </template>
 
-      <template v-if="hasSectionHeaders">
-        <gl-dropdown-divider />
-        <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header>
-      </template>
-
-      <template v-if="certificateBasedClustersEnabled">
+      <template v-if="displayClusterAgents && certificateBasedClustersEnabled">
         <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-          {{ $options.i18n.createNewCluster }}
+          {{ $options.i18n.createClusterCertificate }}
         </gl-dropdown-item>
 
         <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
-          {{ $options.i18n.connectExistingCluster }}
+          {{ $options.i18n.connectClusterCertificate }}
         </gl-dropdown-item>
       </template>
+
+      <gl-dropdown-item
+        v-if="certificateBasedClustersEnabled && !displayClusterAgents"
+        :href="newClusterPath"
+        data-testid="new-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createClusterDeprecated }}
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>

app/assets/javascripts/clusters_list/constants.js

@@ -252,13 +252,13 @@ export const CERTIFICATE_TAB = {
 export const CLUSTERS_TABS = [ALL_TAB, AGENT_TAB, CERTIFICATE_TAB];
 
 export const CLUSTERS_ACTIONS = {
-  actionsButton: s__('ClusterAgents|Actions'),
-  createNewCluster: s__('ClusterAgents|Create a new cluster'),
-  createAndConnectCluster: s__('ClusterAgents|Create and connect new cluster'),
-  connectWithAgent: s__('ClusterAgents|Connect with an agent'),
-  connectExistingCluster: s__('ClusterAgents|Connect with a certificate'),
-  agent: s__('ClusterAgents|Agent'),
-  certificate: s__('ClusterAgents|Certificate (deprecated)'),
+  connectCluster: s__('ClusterAgents|Connect a cluster'),
+  connectWithAgent: s__('ClusterAgents|Connect a cluster (agent)'),
+  connectClusterDeprecated: s__('ClusterAgents|Connect a cluster (deprecated)'),
+  createClusterDeprecated: s__('ClusterAgents|Create a cluster (deprecated)'),
+  createCluster: s__('ClusterAgents|Create a cluster'),
+  createClusterCertificate: s__('ClusterAgents|Create a cluster (certificate) (deprecated)'),
+  connectClusterCertificate: s__('ClusterAgents|Connect a cluster (certificate) (deprecated)'),
   dropdownDisabledHint: s__(
     'ClusterAgents|Requires a Maintainer or greater role to perform these actions',
   ),

locale/gitlab.pot

@@ -7819,9 +7819,6 @@ msgstr ""
 msgid "ClusterAgents|Access tokens"
 msgstr ""
 
-msgid "ClusterAgents|Actions"
-msgstr ""
-
 msgid "ClusterAgents|Add an agent configuration file to %{linkStart}this repository%{linkEnd} and select it, or create a new one to register with GitLab:"
 msgstr ""
 
@@ -7873,22 +7870,25 @@ msgstr ""
 msgid "ClusterAgents|Certificate"
 msgstr ""
 
-msgid "ClusterAgents|Certificate (deprecated)"
+msgid "ClusterAgents|Configuration"
 msgstr ""
 
-msgid "ClusterAgents|Configuration"
+msgid "ClusterAgents|Connect a cluster"
 msgstr ""
 
-msgid "ClusterAgents|Connect a cluster through an agent"
+msgid "ClusterAgents|Connect a cluster (agent)"
 msgstr ""
 
-msgid "ClusterAgents|Connect existing cluster"
+msgid "ClusterAgents|Connect a cluster (certificate) (deprecated)"
+msgstr ""
+
+msgid "ClusterAgents|Connect a cluster (deprecated)"
 msgstr ""
 
-msgid "ClusterAgents|Connect with a certificate"
+msgid "ClusterAgents|Connect a cluster through an agent"
 msgstr ""
 
-msgid "ClusterAgents|Connect with an agent"
+msgid "ClusterAgents|Connect existing cluster"
 msgstr ""
 
 msgid "ClusterAgents|Connect with the GitLab Agent"
@@ -7906,16 +7906,19 @@ msgstr ""
 msgid "ClusterAgents|Copy token"
 msgstr ""
 
-msgid "ClusterAgents|Create a new cluster"
+msgid "ClusterAgents|Create a cluster"
 msgstr ""
 
-msgid "ClusterAgents|Create agent access token"
+msgid "ClusterAgents|Create a cluster (certificate) (deprecated)"
 msgstr ""
 
-msgid "ClusterAgents|Create agent: %{searchTerm}"
+msgid "ClusterAgents|Create a cluster (deprecated)"
 msgstr ""
 
-msgid "ClusterAgents|Create and connect new cluster"
+msgid "ClusterAgents|Create agent access token"
+msgstr ""
+
+msgid "ClusterAgents|Create agent: %{searchTerm}"
 msgstr ""
 
 msgid "ClusterAgents|Create token"

spec/features/admin/clusters/eks_spec.rb

@@ -15,8 +15,8 @@ RSpec.describe 'Instance-level AWS EKS Cluster', :js do
     before do
       visit admin_clusters_path
 
-      click_button 'Actions'
-      click_link 'Create a new cluster'
+      click_button(class: 'dropdown-toggle-split')
+      click_link 'Create a cluster (deprecated)'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/clusters/create_agent_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'Cluster agent registration', :js do
   end
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
-    click_button('Actions')
+    click_button('Connect a cluster')
     expect(page).to have_content('Register')
 
     click_button('Select an agent')

spec/features/groups/clusters/eks_spec.rb

@@ -20,8 +20,8 @@ RSpec.describe 'Group AWS EKS Cluster', :js do
     before do
       visit group_clusters_path(group)
 
-      click_button 'Actions'
-      click_link 'Create a new cluster'
+      click_button(class: 'dropdown-toggle-split')
+      click_link 'Create a cluster (deprecated)'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/projects/clusters/eks_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe 'AWS EKS Cluster', :js do
       visit project_clusters_path(project)
 
       click_button(class: 'dropdown-toggle-split')
-      click_link 'Create a new cluster'
+      click_link 'Create a cluster (certificate) (deprecated)'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/projects/clusters/gcp_spec.rb

@@ -135,7 +135,7 @@ RSpec.describe 'Gcp Cluster', :js do
           visit project_clusters_path(project)
 
           click_button(class: 'dropdown-toggle-split')
-          click_link 'Connect with a certificate'
+          click_link 'Connect a cluster (certificate) (deprecated)'
         end
 
         it 'user sees the "Environment scope" field' do
@@ -220,6 +220,6 @@ RSpec.describe 'Gcp Cluster', :js do
 
   def visit_create_cluster_page
     click_button(class: 'dropdown-toggle-split')
-    click_link 'Create a new cluster'
+    click_link 'Create a cluster (certificate) (deprecated)'
   end
 end

spec/features/projects/clusters_spec.rb

@@ -222,11 +222,11 @@ RSpec.describe 'Clusters', :js do
     visit project_clusters_path(project)
 
     click_button(class: 'dropdown-toggle-split')
-    click_link 'Create a new cluster'
+    click_link 'Create a cluster (certificate) (deprecated)'
   end
 
   def visit_connect_cluster_page
     click_button(class: 'dropdown-toggle-split')
-    click_link 'Connect with a certificate'
+    click_link 'Connect a cluster (certificate) (deprecated)'
   end
 end

spec/frontend/clusters_list/components/clusters_actions_spec.js

-import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlTooltip } 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';
@@ -22,13 +22,13 @@ describe('ClustersActionsComponent', () => {
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
   const findDropdownItemIds = () =>
     findDropdownItems().wrappers.map((x) => x.attributes('data-testid'));
-  const findAllSectionHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader);
-  const findSectionHeadersTexts = () => findAllSectionHeaders().wrappers.map((x) => x.text());
+  const findDropdownItemTexts = () => findDropdownItems().wrappers.map((x) => x.text());
   const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link');
+  const findNewClusterDocsLink = () => wrapper.findByTestId('create-cluster-link');
   const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
-  const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link');
 
   const createWrapper = (provideData = {}) => {
     wrapper = shallowMountExtended(ClustersActions, {
@@ -38,7 +38,6 @@ describe('ClustersActionsComponent', () => {
       },
       directives: {
         GlModalDirective: createMockDirective(),
-        GlTooltip: createMockDirective(),
       },
     });
   };
@@ -52,12 +51,15 @@ describe('ClustersActionsComponent', () => {
   });
   describe('when the certificate based clusters are enabled', () => {
     it('renders actions menu', () => {
-      expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
+      expect(findDropdown().exists()).toBe(true);
     });
 
-    it('renders correct href attributes for the links', () => {
-      expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
-      expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
+    it('shows split button in dropdown', () => {
+      expect(findDropdown().props('split')).toBe(true);
+    });
+
+    it("doesn't show the tooltip", () => {
+      expect(findTooltip().exists()).toBe(false);
     });
 
     describe('when user cannot add clusters', () => {
@@ -70,8 +72,7 @@ describe('ClustersActionsComponent', () => {
       });
 
       it('shows tooltip explaining why dropdown is disabled', () => {
-        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+        expect(findTooltip().attributes('title')).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
       });
 
       it('does not bind split dropdown button', () => {
@@ -82,41 +83,36 @@ describe('ClustersActionsComponent', () => {
     });
 
     describe('when on project level', () => {
+      it(`displays default action as ${CLUSTERS_ACTIONS.connectWithAgent}`, () => {
+        expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      });
+
+      it('renders correct modal id for the default action', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
+
       it('renders a dropdown with 3 actions items', () => {
         expect(findDropdownItemIds()).toEqual([
-          'connect-new-agent-link',
           'create-cluster-link',
           'new-cluster-link',
           'connect-cluster-link',
         ]);
       });
 
-      it('renders proper section headers', () => {
-        expect(findSectionHeadersTexts()).toEqual([
-          CLUSTERS_ACTIONS.agent,
-          CLUSTERS_ACTIONS.certificate,
+      it('renders correct texts for the dropdown items', () => {
+        expect(findDropdownItemTexts()).toEqual([
+          CLUSTERS_ACTIONS.createCluster,
+          CLUSTERS_ACTIONS.createClusterCertificate,
+          CLUSTERS_ACTIONS.connectClusterCertificate,
         ]);
       });
 
-      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 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);
+      it('renders correct href attributes for the links', () => {
+        expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath);
+        expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
+        expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
       });
     });
 
@@ -125,21 +121,20 @@ describe('ClustersActionsComponent', () => {
         createWrapper({ displayClusterAgents: false });
       });
 
-      it('renders a dropdown with 2 actions items', () => {
-        expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']);
+      it(`displays default action as ${CLUSTERS_ACTIONS.connectClusterDeprecated}`, () => {
+        expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectClusterDeprecated);
       });
 
-      it("doesn't render section headers", () => {
-        expect(findAllSectionHeaders()).toHaveLength(0);
+      it('renders a dropdown with 1 action item', () => {
+        expect(findDropdownItemIds()).toEqual(['new-cluster-link']);
       });
 
-      it('shows tooltip', () => {
-        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster);
+      it('renders correct text for the dropdown item', () => {
+        expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createClusterDeprecated]);
       });
 
-      it('does not show split button in dropdown', () => {
-        expect(findDropdown().props('split')).toBe(false);
+      it('renders correct href attributes for the links', () => {
+        expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
       });
 
       it('does not bind dropdown button to modal', () => {
@@ -155,12 +150,26 @@ describe('ClustersActionsComponent', () => {
       createWrapper({ certificateBasedClustersEnabled: false });
     });
 
-    it('renders a dropdown with 2 actions items', () => {
-      expect(findDropdownItemIds()).toEqual(['connect-new-agent-link', 'create-cluster-link']);
+    it(`displays default action as ${CLUSTERS_ACTIONS.connectCluster}`, () => {
+      expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectCluster);
     });
 
-    it("doesn't render section headers", () => {
-      expect(findAllSectionHeaders()).toHaveLength(0);
+    it('renders correct modal id for the default action', () => {
+      const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+      expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+    });
+
+    it('renders a dropdown with 1 action item', () => {
+      expect(findDropdownItemIds()).toEqual(['create-cluster-link']);
+    });
+
+    it('renders correct text for the dropdown item', () => {
+      expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createCluster]);
+    });
+
+    it('renders correct href attributes for the links', () => {
+      expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath);
     });
   });
 });