Skip to content

G
gitlab-ce
Commit 5a46295c authored by anna_vovchenko's avatar anna_vovchenko Committed by Anna Vovchenko
Browse files
Options

Updated actions menu 

Updated actions menu and corresponding tests
parent a2b2a69c
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 128 deletions
app/assets/javascripts/clusters_list/components/clusters_actions.vue
View file @ 5a46295c
<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"
>
{{ $options.i18n.connectWithAgent }}
</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>
<gl-dropdown-item
v-if="displayClusterAgents"
:href="newClusterDocsPath"
data-testid="create-cluster-link"
@click.stop
>
{{ $options.i18n.createCluster }}
</gl-dropdown-item>
<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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
......@@ -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
View file @ 5a46295c
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('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("doesn't render section headers", () => {
expect(findAllSectionHeaders()).toHaveLength(0);
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);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7