Skip to content

G
gitlab-ce
Commit d1873459 authored by Anna Vovchenko's avatar Anna Vovchenko Committed by Natalia Tepluhina
Browse files
Options

Updated Kubernetes clusters UI 

As part of the Kubernetes clusters page clean-up,
we are updating the UI:
- lowercase 'agent' for consistency
- remove duplicative buttons
- clean-up unnecessary CSS classes

Changelog: changed
parent 6cfaefeb
Show whitespace changes
Inline Side-by-side
Showing with 50 additions and 343 deletions
app/assets/javascripts/clusters_list/components/agent_empty_state.vue
View file @ d1873459
<script>
import { GlButton, GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui';
import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
import { I18N_AGENTS_EMPTY_STATE } from '../constants';
export default {
i18n: I18N_AGENTS_EMPTY_STATE,
modalId: INSTALL_AGENT_MODAL_ID,
agentDocsUrl: helpPagePath('user/clusters/agent/index'),
components: {
GlButton,
GlEmptyState,
GlLink,
GlSprintf,
},
directives: {
GlModalDirective,
},
inject: ['emptyStateImage'],
props: {
isChildComponent: {
default: false,
required: false,
type: Boolean,
},
},
};
</script>
<template>
<gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
<template #description>
<p class="gl-text-left">
<gl-empty-state :svg-path="emptyStateImage" :svg-height="100">
<template #title>
<gl-sprintf :message="$options.i18n.introText">
<template #link="{ content }">
<gl-link :href="$options.agentDocsUrl">
......@@ -38,18 +25,6 @@ export default {
</gl-link>
</template>
</gl-sprintf>
</p>
</template>
<template #actions>
<gl-button
v-if="!isChildComponent"
v-gl-modal-directive="$options.modalId"
category="primary"
variant="confirm"
>
{{ $options.i18n.buttonText }}
</gl-button>
</template>
</gl-empty-state>
</template>
app/assets/javascripts/clusters_list/components/agents.vue
View file @ d1873459
......@@ -20,7 +20,7 @@ export default {
'ClusterAgents|We would love to learn more about your experience with the GitLab Agent.',
),
feedbackBannerButton: s__('ClusterAgents|Give feedback'),
error: s__('ClusterAgents|An error occurred while loading your Agents'),
error: s__('ClusterAgents|An error occurred while loading your agents'),
},
AGENT_FEEDBACK_ISSUE,
AGENT_FEEDBACK_KEY,
......@@ -208,7 +208,7 @@ export default {
</div>
</div>
<agent-empty-state v-else :is-child-component="isChildComponent" />
<agent-empty-state v-else />
</section>
<gl-alert v-else variant="danger" :dismissible="false">
......
app/assets/javascripts/clusters_list/components/clusters_actions.vue
View file @ d1873459
......@@ -57,6 +57,7 @@ export default {
<gl-dropdown
ref="dropdown"
v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
data-qa-selector="clusters_actions_button"
category="primary"
variant="confirm"
:text="defaultActionText"
......
app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
View file @ d1873459
<script>
import { GlEmptyState, GlButton, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
import { mapState } from 'vuex';
import { GlEmptyState, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
......@@ -8,35 +7,24 @@ export default {
i18n: I18N_CLUSTERS_EMPTY_STATE,
components: {
GlEmptyState,
GlButton,
GlLink,
GlSprintf,
GlAlert,
},
inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'addClusterPath'],
props: {
isChildComponent: {
default: false,
required: false,
type: Boolean,
},
},
inject: ['emptyStateHelpText', 'clustersEmptyStateImage'],
clustersHelpUrl: helpPagePath('user/infrastructure/clusters/index', {
anchor: 'certificate-based-kubernetes-integration-deprecated',
}),
blogPostUrl:
'https://about.gitlab.com/blog/2021/11/15/deprecating-the-cert-based-kubernetes-integration/',
computed: {
...mapState(['canAddCluster']),
},
};
</script>
<template>
<div>
<gl-empty-state :svg-path="clustersEmptyStateImage" title="">
<template #description>
<p class="gl-text-left">
<gl-empty-state :svg-path="clustersEmptyStateImage" :svg-height="100">
<template #title>
<p>
<gl-sprintf :message="$options.i18n.introText">
<template #link="{ content }">
<gl-link :href="$options.clustersHelpUrl">{{ content }}</gl-link>
......@@ -48,28 +36,12 @@ export default {
{{ emptyStateHelpText }}
</p>
</template>
<template #actions>
<gl-button
v-if="!isChildComponent"
data-testid="integration-primary-button"
data-qa-selector="add_kubernetes_cluster_link"
category="primary"
variant="confirm"
:disabled="!canAddCluster"
:href="addClusterPath"
>
{{ $options.i18n.buttonText }}
</gl-button>
</template>
</gl-empty-state>
<gl-alert variant="warning" :dismissible="false">
<gl-sprintf :message="$options.i18n.alertText">
<template #link="{ content }">
<gl-link :href="$options.blogPostUrl" target="_blank">
{{ content }}
</gl-link>
<gl-link :href="$options.blogPostUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</gl-alert>
......
app/assets/javascripts/clusters_list/components/clusters_view_all.vue
View file @ d1873459
<script>
import {
GlCard,
GlSprintf,
GlPopover,
GlLink,
GlButton,
GlBadge,
GlLoadingIcon,
GlModalDirective,
GlTooltipDirective,
} from '@gitlab/ui';
import { GlCard, GlSprintf, GlPopover, GlLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
import { mapState } from 'vuex';
import {
AGENT_CARD_INFO,
CERTIFICATE_BASED_CARD_INFO,
MAX_CLUSTERS_LIST,
INSTALL_AGENT_MODAL_ID,
} from '../constants';
import { AGENT_CARD_INFO, CERTIFICATE_BASED_CARD_INFO, MAX_CLUSTERS_LIST } from '../constants';
import Clusters from './clusters.vue';
import Agents from './agents.vue';
......@@ -26,23 +11,16 @@ export default {
GlSprintf,
GlPopover,
GlLink,
GlButton,
GlBadge,
GlLoadingIcon,
Clusters,
Agents,
},
directives: {
GlModalDirective,
GlTooltip: GlTooltipDirective,
},
MAX_CLUSTERS_LIST,
INSTALL_AGENT_MODAL_ID,
i18n: {
agent: AGENT_CARD_INFO,
certificate: CERTIFICATE_BASED_CARD_INFO,
},
inject: ['addClusterPath', 'canAddCluster'],
props: {
defaultBranchName: {
default: '.noBranch',
......@@ -93,14 +71,6 @@ export default {
return cardTitle;
},
installAgentTooltip() {
return this.canAddCluster ? '' : this.$options.i18n.agent.installAgentDisabledHint;
},
connectExistingClusterTooltip() {
return this.canAddCluster
? ''
: this.$options.i18n.certificate.connectExistingClusterDisabledHint;
},
},
methods: {
cardFooterNumber(number) {
......@@ -177,21 +147,6 @@ export default {
><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
></gl-link
>
<div
v-gl-tooltip="installAgentTooltip"
class="gl-display-inline-block"
tabindex="-1"
data-testid="install-agent-button-tooltip"
>
<gl-button
v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
class="gl-ml-4"
category="secondary"
variant="confirm"
:disabled="!canAddCluster"
>{{ $options.i18n.agent.actionText }}</gl-button
>
</div>
</template>
</gl-card>
......@@ -214,7 +169,7 @@ export default {
<gl-badge variant="warning">{{ $options.i18n.certificate.badgeText }}</gl-badge>
</template>
<clusters :limit="$options.MAX_CLUSTERS_LIST" :is-child-component="true" />
<clusters :limit="$options.MAX_CLUSTERS_LIST" />
<template #footer>
<gl-link
......@@ -226,22 +181,6 @@ export default {
><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
></gl-link
>
<div
v-gl-tooltip="connectExistingClusterTooltip"
class="gl-display-inline-block"
tabindex="-1"
data-testid="connect-existing-cluster-button-tooltip"
>
<gl-button
category="secondary"
data-qa-selector="connect_existing_cluster_button"
variant="confirm"
class="gl-ml-4"
:href="addClusterPath"
:disabled="!canAddCluster"
>{{ $options.i18n.certificate.actionText }}</gl-button
>
</div>
</template>
</gl-card>
</div>
......
app/assets/javascripts/clusters_list/constants.js
View file @ d1873459
......@@ -119,7 +119,7 @@ export const I18N_AGENT_MODAL = {
enableKasText: s__(
"ClusterAgents|Your instance doesn't have the %{linkStart}GitLab Agent Server (KAS)%{linkEnd} set up. Ask a GitLab Administrator to install it.",
),
altText: s__('ClusterAgents|GitLab Agent for Kubernetes'),
altText: s__('ClusterAgents|GitLab agent for Kubernetes'),
learnMoreLink: s__('ClusterAgents|How do I register an agent?'),
registrationErrorTitle: s__('ClusterAgents|Failed to register an agent'),
unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
......@@ -169,16 +169,14 @@ export const AGENT_STATUSES = {
export const I18N_AGENTS_EMPTY_STATE = {
introText: s__(
'ClusterIntegration|Use the %{linkStart}GitLab Agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more.',
'ClusterIntegration|Use the %{linkStart}GitLab agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more.',
),
buttonText: s__('ClusterAgents|Connect with the GitLab Agent'),
};
export const I18N_CLUSTERS_EMPTY_STATE = {
introText: s__(
'ClusterIntegration|Connect your cluster to GitLab through %{linkStart}cluster certificates%{linkEnd}.',
),
buttonText: s__('ClusterIntegration|Connect with a certificate'),
alertText: s__(
'ClusterIntegration|The certificate-based method to connect clusters to GitLab was %{linkStart}deprecated%{linkEnd} in GitLab 14.5.',
),
......@@ -190,19 +188,15 @@ export const AGENT_CARD_INFO = {
emptyTitle: s__('ClusterAgents|No agents'),
tooltip: {
label: s__('ClusterAgents|Recommended'),
title: s__('ClusterAgents|GitLab Agent'),
title: s__('ClusterAgents|GitLab agent'),
text: sprintf(
s__(
'ClusterAgents|The GitLab Agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab Agent.%{linkEnd}',
'ClusterAgents|The GitLab agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab agent.%{linkEnd}',
),
),
link: helpPagePath('user/clusters/agent/index'),
},
actionText: s__('ClusterAgents|Install a new agent'),
footerText: sprintf(s__('ClusterAgents|View all %{number} agents')),
installAgentDisabledHint: s__(
'ClusterAgents|Requires a Maintainer or greater role to install new agents',
),
};
export const CERTIFICATE_BASED_CARD_INFO = {
......@@ -211,12 +205,8 @@ export const CERTIFICATE_BASED_CARD_INFO = {
s__('ClusterAgents|%{number} of %{total} clusters connected through cluster certificates'),
),
emptyTitle: s__('ClusterAgents|No clusters connected through cluster certificates'),
actionText: s__('ClusterAgents|Connect existing cluster'),
footerText: sprintf(s__('ClusterAgents|View all %{number} clusters')),
badgeText: s__('ClusterAgents|Deprecated'),
connectExistingClusterDisabledHint: s__(
'ClusterAgents|Requires a maintainer or greater role to connect existing clusters',
),
};
export const MAX_CLUSTERS_LIST = 6;
......
app/assets/stylesheets/pages/clusters.scss
View file @ d1873459
.clusters-container {
.empty-state .svg-content {
@include gl-pb-0;
img {
width: 100px;
}
}
@include media-breakpoint-down(xs) {
.nav-controls {
@include gl-w-full;
......
locale/gitlab.pot
View file @ d1873459
......@@ -7882,10 +7882,10 @@ msgstr ""
msgid "ClusterAgents|All"
msgstr ""
msgid "ClusterAgents|An error occurred while loading your Agents"
msgid "ClusterAgents|An error occurred while loading your agent"
msgstr ""
msgid "ClusterAgents|An error occurred while loading your agent"
msgid "ClusterAgents|An error occurred while loading your agents"
msgstr ""
msgid "ClusterAgents|An error occurred while retrieving GitLab Agent activity. Reload the page to try again."
......@@ -7918,12 +7918,6 @@ msgstr ""
msgid "ClusterAgents|Connect a cluster (deprecated)"
msgstr ""
msgid "ClusterAgents|Connect existing cluster"
msgstr ""
msgid "ClusterAgents|Connect with the GitLab Agent"
msgstr ""
msgid "ClusterAgents|Connected"
msgstr ""
......@@ -7990,10 +7984,10 @@ msgstr ""
msgid "ClusterAgents|From a terminal, connect to your cluster and run this command. The token is included."
msgstr ""
msgid "ClusterAgents|GitLab Agent"
msgid "ClusterAgents|GitLab agent"
msgstr ""
msgid "ClusterAgents|GitLab Agent for Kubernetes"
msgid "ClusterAgents|GitLab agent for Kubernetes"
msgstr ""
msgid "ClusterAgents|Give feedback"
......@@ -8005,9 +7999,6 @@ msgstr ""
msgid "ClusterAgents|How to update an agent?"
msgstr ""
msgid "ClusterAgents|Install a new agent"
msgstr ""
msgid "ClusterAgents|Last connected %{timeAgo}."
msgstr ""
......@@ -8053,15 +8044,9 @@ msgstr ""
msgid "ClusterAgents|Requires a Maintainer or greater role to delete agents"
msgstr ""
msgid "ClusterAgents|Requires a Maintainer or greater role to install new agents"
msgstr ""
msgid "ClusterAgents|Requires a Maintainer or greater role to perform these actions"
msgstr ""
msgid "ClusterAgents|Requires a maintainer or greater role to connect existing clusters"
msgstr ""
msgid "ClusterAgents|Security"
msgstr ""
......@@ -8074,7 +8059,7 @@ msgstr ""
msgid "ClusterAgents|Tell us what you think"
msgstr ""
msgid "ClusterAgents|The GitLab Agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab Agent.%{linkEnd}"
msgid "ClusterAgents|The GitLab agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab agent.%{linkEnd}"
msgstr ""
msgid "ClusterAgents|The agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
......@@ -8274,9 +8259,6 @@ msgstr ""
msgid "ClusterIntegration|Connect a Kubernetes cluster"
msgstr ""
msgid "ClusterIntegration|Connect with a certificate"
msgstr ""
msgid "ClusterIntegration|Connect your cluster to GitLab through %{linkStart}cluster certificates%{linkEnd}."
msgstr ""
......@@ -8823,7 +8805,7 @@ msgstr ""
msgid "ClusterIntegration|Use GitLab to deploy to your cluster, run jobs, use review apps, and more."
msgstr ""
msgid "ClusterIntegration|Use the %{linkStart}GitLab Agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more."
msgid "ClusterIntegration|Use the %{linkStart}GitLab agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more."
msgstr ""
msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster."
......
qa/qa/page/project/infrastructure/kubernetes/index.rb
View file @ d1873459
......@@ -6,12 +6,13 @@ module QA
module Infrastructure
module Kubernetes
class Index < Page::Base
view 'app/assets/javascripts/clusters_list/components/clusters_view_all.vue' do
element :connect_existing_cluster_button
view 'app/assets/javascripts/clusters_list/components/clusters_actions.vue' do
element :clusters_actions_button
end
def connect_existing_cluster
click_link 'Connect existing cluster'
within_element(:clusters_actions_button) { click_button(class: 'dropdown-toggle-split') }
click_link 'Connect a cluster (certificate - deprecated)'
end
def has_cluster?(cluster)
......
spec/features/groups/clusters/user_spec.rb
View file @ d1873459
......@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do
before do
visit group_clusters_path(group)
click_link 'Connect with a certificate'
click_link 'Connect a cluster (deprecated)'
end
context 'when user filled form with valid parameters' do
......@@ -119,7 +119,6 @@ RSpec.describe 'User Cluster', :js do
it 'user sees creation form with the successful message' do
expect(page).to have_content('Kubernetes cluster integration was successfully removed.')
expect(page).to have_link('Connect with a certificate')
end
end
end
......
spec/features/projects/cluster_agents_spec.rb
View file @ d1873459
......@@ -27,7 +27,6 @@ RSpec.describe 'ClusterAgents', :js do
end
it 'displays empty state', :aggregate_failures do
expect(page).to have_content('Install a new agent')
expect(page).to have_selector('.empty-state')
end
end
......
spec/features/projects/clusters/gcp_spec.rb
View file @ d1873459
......@@ -154,7 +154,6 @@ RSpec.describe 'Gcp Cluster', :js do
it 'user sees creation form with the successful message' do
expect(page).to have_content('Kubernetes cluster integration was successfully removed.')
expect(page).to have_link('Connect with a certificate')
end
end
end
......
spec/features/projects/clusters/user_spec.rb
View file @ d1873459
......@@ -25,8 +25,8 @@ RSpec.describe 'User Cluster', :js do
before do
visit project_clusters_path(project)
click_link 'Certificate'
click_link 'Connect with a certificate'
click_button(class: 'dropdown-toggle-split')
click_link 'Connect a cluster (certificate - deprecated)'
end
context 'when user filled form with valid parameters' do
......@@ -108,7 +108,6 @@ RSpec.describe 'User Cluster', :js do
it 'user sees creation form with the successful message' do
expect(page).to have_content('Kubernetes cluster integration was successfully removed.')
expect(page).to have_link('Connect with a certificate')
end
end
end
......
spec/features/projects/clusters_spec.rb
View file @ d1873459
......@@ -20,7 +20,6 @@ RSpec.describe 'Clusters', :js do
end
it 'sees empty state' do
expect(page).to have_link('Connect with a certificate')
expect(page).to have_selector('.empty-state')
end
end
......
spec/frontend/clusters_list/components/agent_empty_state_spec.js
View file @ d1873459
import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
import { INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { helpPagePath } from '~/helpers/help_page_helper';
const emptyStateImage = '/path/to/image';
......@@ -15,16 +13,12 @@ describe('AgentEmptyStateComponent', () => {
};
const findInstallDocsLink = () => wrapper.findComponent(GlLink);
const findIntegrationButton = () => wrapper.findComponent(GlButton);
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
beforeEach(() => {
wrapper = shallowMountExtended(AgentEmptyState, {
provide: provideData,
directives: {
GlModalDirective: createMockDirective(),
},
stubs: { GlEmptyState, GlSprintf },
stubs: { GlSprintf },
});
});
......@@ -38,17 +32,7 @@ describe('AgentEmptyStateComponent', () => {
expect(findEmptyState().exists()).toBe(true);
});
it('renders button for the agent registration', () => {
expect(findIntegrationButton().exists()).toBe(true);
});
it('renders correct href attributes for the docs link', () => {
expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
});
it('renders correct modal id for the agent registration modal', () => {
const binding = getBinding(findIntegrationButton().element, 'gl-modal-directive');
expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
});
});
spec/frontend/clusters_list/components/agents_spec.js
View file @ d1873459
......@@ -308,7 +308,7 @@ describe('Agents', () => {
});
it('displays an alert message', () => {
expect(findAlert().text()).toBe('An error occurred while loading your Agents');
expect(findAlert().text()).toBe('An error occurred while loading your agents');
});
});
......
spec/frontend/clusters_list/components/clusters_empty_state_spec.js
View file @ d1873459
import { GlEmptyState, GlButton } from '@gitlab/ui';
import { GlEmptyState } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
import ClusterStore from '~/clusters_list/store';
const clustersEmptyStateImage = 'path/to/svg';
const addClusterPath = '/path/to/connect/cluster';
const emptyStateHelpText = 'empty state text';
describe('ClustersEmptyStateComponent', () => {
......@@ -12,52 +10,28 @@ describe('ClustersEmptyStateComponent', () => {
const defaultProvideData = {
clustersEmptyStateImage,
addClusterPath,
};
const findButton = () => wrapper.findComponent(GlButton);
const findEmptyStateText = () => wrapper.findByTestId('clusters-empty-state-text');
const createWrapper = ({
provideData = { emptyStateHelpText: null },
isChildComponent = false,
canAddCluster = true,
} = {}) => {
const createWrapper = ({ provideData = { emptyStateHelpText: null } } = {}) => {
wrapper = shallowMountExtended(ClustersEmptyState, {
store: ClusterStore({ canAddCluster }),
propsData: { isChildComponent },
provide: { ...defaultProvideData, ...provideData },
stubs: { GlEmptyState },
});
};
beforeEach(() => {
createWrapper();
});
afterEach(() => {
wrapper.destroy();
});
describe('when the component is loaded independently', () => {
it('should render the action button', () => {
expect(findButton().exists()).toBe(true);
});
});
describe('when the help text is not provided', () => {
it('should not render the empty state text', () => {
expect(findEmptyStateText().exists()).toBe(false);
});
});
describe('when the component is loaded as a child component', () => {
beforeEach(() => {
createWrapper({ isChildComponent: true });
createWrapper();
});
it('should not render the action button', () => {
expect(findButton().exists()).toBe(false);
it('should not render the empty state text', () => {
expect(findEmptyStateText().exists()).toBe(false);
});
});
......@@ -70,13 +44,4 @@ describe('ClustersEmptyStateComponent', () => {
expect(findEmptyStateText().text()).toBe(emptyStateHelpText);
});
});
describe('when the user cannot add clusters', () => {
beforeEach(() => {
createWrapper({ canAddCluster: false });
});
it('should disable the button', () => {
expect(findButton().props('disabled')).toBe(true);
});
});
});
spec/frontend/clusters_list/components/clusters_view_all_spec.js
View file @ d1873459
import { GlCard, GlLoadingIcon, GlButton, GlSprintf, GlBadge } from '@gitlab/ui';
import { GlCard, GlLoadingIcon, GlSprintf, GlBadge } from '@gitlab/ui';
import Vue from 'vue';
import Vuex from 'vuex';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ClustersViewAll from '~/clusters_list/components/clusters_view_all.vue';
import Agents from '~/clusters_list/components/agents.vue';
import Clusters from '~/clusters_list/components/clusters.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import {
AGENT,
CERTIFICATE_BASED,
AGENT_CARD_INFO,
CERTIFICATE_BASED_CARD_INFO,
MAX_CLUSTERS_LIST,
INSTALL_AGENT_MODAL_ID,
} from '~/clusters_list/constants';
import { sprintf } from '~/locale';
Vue.use(Vuex);
const addClusterPath = '/path/to/add/cluster';
const defaultBranchName = 'default-branch';
describe('ClustersViewAllComponent', () => {
......@@ -32,11 +29,6 @@ describe('ClustersViewAllComponent', () => {
defaultBranchName,
};
const defaultProvide = {
addClusterPath,
canAddCluster: true,
};
const entryData = {
loadingClusters: false,
totalClusters: 0,
......@@ -46,37 +38,20 @@ describe('ClustersViewAllComponent', () => {
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findAgentsComponent = () => wrapper.findComponent(Agents);
const findClustersComponent = () => wrapper.findComponent(Clusters);
const findInstallAgentButtonTooltip = () => wrapper.findByTestId('install-agent-button-tooltip');
const findConnectExistingClusterButtonTooltip = () =>
wrapper.findByTestId('connect-existing-cluster-button-tooltip');
const findCardsContainer = () => wrapper.findByTestId('clusters-cards-container');
const findAgentCardTitle = () => wrapper.findByTestId('agent-card-title');
const findRecommendedBadge = () => wrapper.findComponent(GlBadge);
const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title');
const findFooterButton = (line) => findCards().at(line).findComponent(GlButton);
const getTooltipText = (el) => {
const binding = getBinding(el, 'gl-tooltip');
return binding.value;
};
const createStore = (initialState) =>
new Vuex.Store({
state: initialState,
});
const createWrapper = ({ initialState = entryData, provideData } = {}) => {
const createWrapper = ({ initialState = entryData } = {}) => {
wrapper = shallowMountExtended(ClustersViewAll, {
store: createStore(initialState),
propsData,
provide: {
...defaultProvide,
...provideData,
},
directives: {
GlModalDirective: createMockDirective(),
GlTooltip: createMockDirective(),
},
stubs: { GlCard, GlSprintf },
});
};
......@@ -138,25 +113,10 @@ describe('ClustersViewAllComponent', () => {
expect(findAgentsComponent().props('defaultBranchName')).toBe(defaultBranchName);
});
it('should show install new Agent button in the footer', () => {
expect(findFooterButton(0).exists()).toBe(true);
expect(findFooterButton(0).props('disabled')).toBe(false);
});
it('does not show tooltip for install new Agent button', () => {
expect(getTooltipText(findInstallAgentButtonTooltip().element)).toBe('');
});
describe('when there are no agents', () => {
it('should show the empty title', () => {
expect(findAgentCardTitle().text()).toBe(AGENT_CARD_INFO.emptyTitle);
});
it('should render correct modal id for the agent link', () => {
const binding = getBinding(findFooterButton(0).element, 'gl-modal-directive');
expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
});
});
describe('when the agents are present', () => {
......@@ -191,22 +151,6 @@ describe('ClustersViewAllComponent', () => {
});
});
});
describe('when the user cannot add clusters', () => {
beforeEach(() => {
createWrapper({ provideData: { canAddCluster: false } });
});
it('should disable the button', () => {
expect(findFooterButton(0).props('disabled')).toBe(true);
});
it('should show a tooltip explaining why the button is disabled', () => {
expect(getTooltipText(findInstallAgentButtonTooltip().element)).toBe(
AGENT_CARD_INFO.installAgentDisabledHint,
);
});
});
});
describe('clusters tab', () => {
......@@ -214,43 +158,10 @@ describe('ClustersViewAllComponent', () => {
expect(findClustersComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
});
it('should pass the is-child-component prop', () => {
expect(findClustersComponent().props('isChildComponent')).toBe(true);
});
describe('when there are no clusters', () => {
it('should show the empty title', () => {
expect(findClustersCardTitle().text()).toBe(CERTIFICATE_BASED_CARD_INFO.emptyTitle);
});
it('should show install new cluster button in the footer', () => {
expect(findFooterButton(1).exists()).toBe(true);
expect(findFooterButton(1).props('disabled')).toBe(false);
});
it('should render correct href for the button in the footer', () => {
expect(findFooterButton(1).attributes('href')).toBe(addClusterPath);
});
it('does not show tooltip for install new cluster button', () => {
expect(getTooltipText(findConnectExistingClusterButtonTooltip().element)).toBe('');
});
});
describe('when the user cannot add clusters', () => {
beforeEach(() => {
createWrapper({ provideData: { canAddCluster: false } });
});
it('should disable the button', () => {
expect(findFooterButton(1).props('disabled')).toBe(true);
});
it('should show a tooltip explaining why the button is disabled', () => {
expect(getTooltipText(findConnectExistingClusterButtonTooltip().element)).toBe(
CERTIFICATE_BASED_CARD_INFO.connectExistingClusterDisabledHint,
);
});
});
describe('when the clusters are present', () => {
......
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