Commit c31ca16b authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '340759-implementation-revisit-the-kubernetes-section-ux-3' into 'master'

Change the copy and empty state illustrations in the Kubernetes section

See merge request gitlab-org/gitlab!73586
parents e3930695 e6abf0aa
<script> <script>
import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui'; import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
import { INSTALL_AGENT_MODAL_ID } from '../constants'; import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
export default { export default {
i18n: I18N_AGENTS_EMPTY_STATE,
modalId: INSTALL_AGENT_MODAL_ID, modalId: INSTALL_AGENT_MODAL_ID,
components: { components: {
GlButton, GlButton,
...@@ -17,7 +18,7 @@ export default { ...@@ -17,7 +18,7 @@ export default {
inject: [ inject: [
'emptyStateImage', 'emptyStateImage',
'projectPath', 'projectPath',
'agentDocsUrl', 'multipleClustersDocsUrl',
'installDocsUrl', 'installDocsUrl',
'getStartedDocsUrl', 'getStartedDocsUrl',
'integrationDocsUrl', 'integrationDocsUrl',
...@@ -37,22 +38,19 @@ export default { ...@@ -37,22 +38,19 @@ export default {
</script> </script>
<template> <template>
<gl-empty-state <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
:svg-path="emptyStateImage"
:title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
class="empty-state--agent"
>
<template #description> <template #description>
<p class="mw-460 gl-mx-auto"> <p class="mw-460 gl-mx-auto gl-text-left">
<gl-sprintf {{ $options.i18n.introText }}
:message=" </p>
s__( <p class="mw-460 gl-mx-auto gl-text-left">
'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}', <gl-sprintf :message="$options.i18n.multipleClustersText">
)
"
>
<template #link="{ content }"> <template #link="{ content }">
<gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link"> <gl-link
:href="multipleClustersDocsUrl"
target="_blank"
data-testid="multiple-clusters-docs-link"
>
{{ content }} {{ content }}
</gl-link> </gl-link>
</template> </template>
...@@ -60,19 +58,9 @@ export default { ...@@ -60,19 +58,9 @@ export default {
</p> </p>
<p class="mw-460 gl-mx-auto"> <p class="mw-460 gl-mx-auto">
<gl-sprintf <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
:message=" {{ $options.i18n.learnMoreText }}
s__( </gl-link>
'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
)
"
>
<template #link="{ content }">
<gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p> </p>
<gl-alert <gl-alert
...@@ -81,11 +69,7 @@ export default { ...@@ -81,11 +69,7 @@ export default {
class="gl-mb-5 text-left" class="gl-mb-5 text-left"
:dismissible="false" :dismissible="false"
> >
{{ {{ $options.i18n.warningText }}
s__(
'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
)
}}
<template #actions> <template #actions>
<gl-button <gl-button
...@@ -95,10 +79,10 @@ export default { ...@@ -95,10 +79,10 @@ export default {
target="_blank" target="_blank"
class="gl-ml-0!" class="gl-ml-0!"
> >
{{ s__('ClusterAgents|Read more about getting started') }} {{ $options.i18n.readMoreText }}
</gl-button> </gl-button>
<gl-button category="secondary" variant="info" :href="repositoryPath"> <gl-button category="secondary" variant="info" :href="repositoryPath">
{{ s__('ClusterAgents|Go to the repository') }} {{ $options.i18n.repositoryButtonText }}
</gl-button> </gl-button>
</template> </template>
</gl-alert> </gl-alert>
...@@ -110,9 +94,9 @@ export default { ...@@ -110,9 +94,9 @@ export default {
:disabled="!hasConfigurations" :disabled="!hasConfigurations"
data-testid="integration-primary-button" data-testid="integration-primary-button"
category="primary" category="primary"
variant="success" variant="confirm"
> >
{{ s__('ClusterAgents|Integrate with the GitLab Agent') }} {{ $options.i18n.primaryButtonText }}
</gl-button> </gl-button>
</template> </template>
</gl-empty-state> </gl-empty-state>
......
<script> <script>
import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui'; import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { s__ } from '~/locale';
import { helpPagePath } from '~/helpers/help_page_helper'; import { helpPagePath } from '~/helpers/help_page_helper';
import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
export default { export default {
i18n: { i18n: I18N_CLUSTERS_EMPTY_STATE,
title: s__('ClusterIntegration|Integrate Kubernetes with a cluster certificate'),
description: s__(
'ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way.',
),
learnMoreLinkText: s__('ClusterIntegration|Learn more about Kubernetes'),
buttonText: s__('ClusterIntegration|Integrate with a cluster certificate'),
},
components: { components: {
GlEmptyState, GlEmptyState,
GlButton, GlButton,
GlLink, GlLink,
GlSprintf,
}, },
inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'], inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
learnMoreHelpUrl: helpPagePath('user/project/clusters/index'), learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
...@@ -27,11 +21,24 @@ export default { ...@@ -27,11 +21,24 @@ export default {
</script> </script>
<template> <template>
<gl-empty-state :svg-path="clustersEmptyStateImage" :title="$options.i18n.title"> <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
<template #description> <template #description>
<p> <p class="gl-text-left">
{{ $options.i18n.description }} {{ $options.i18n.description }}
</p> </p>
<p class="gl-text-left">
<gl-sprintf :message="$options.i18n.multipleClustersText">
<template #link="{ content }">
<gl-link
:href="$options.multipleClustersHelpUrl"
target="_blank"
data-testid="multiple-clusters-docs-link"
>
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
<p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text"> <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
{{ emptyStateHelpText }} {{ emptyStateHelpText }}
......
...@@ -141,3 +141,30 @@ export const AGENT_STATUSES = { ...@@ -141,3 +141,30 @@ export const AGENT_STATUSES = {
}, },
}, },
}; };
export const I18N_AGENTS_EMPTY_STATE = {
introText: s__(
'ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more.',
),
multipleClustersText: s__(
'ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
),
learnMoreText: s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent.'),
warningText: s__(
'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
),
readMoreText: s__('ClusterAgents|Read more about getting started'),
repositoryButtonText: s__('ClusterAgents|Go to the repository'),
primaryButtonText: s__('ClusterAgents|Connect with a GitLab Agent'),
};
export const I18N_CLUSTERS_EMPTY_STATE = {
description: s__(
'ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way.',
),
multipleClustersText: s__(
'ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
),
learnMoreLinkText: s__('ClusterIntegration|Learn more about the GitLab managed clusters'),
buttonText: s__('ClusterIntegration|Connect with a certificate'),
};
...@@ -14,7 +14,7 @@ export default (Vue, VueApollo) => { ...@@ -14,7 +14,7 @@ export default (Vue, VueApollo) => {
emptyStateImage, emptyStateImage,
defaultBranchName, defaultBranchName,
projectPath, projectPath,
agentDocsUrl, multipleClustersDocsUrl,
installDocsUrl, installDocsUrl,
getStartedDocsUrl, getStartedDocsUrl,
integrationDocsUrl, integrationDocsUrl,
...@@ -27,7 +27,7 @@ export default (Vue, VueApollo) => { ...@@ -27,7 +27,7 @@ export default (Vue, VueApollo) => {
provide: { provide: {
emptyStateImage, emptyStateImage,
projectPath, projectPath,
agentDocsUrl, multipleClustersDocsUrl,
installDocsUrl, installDocsUrl,
getStartedDocsUrl, getStartedDocsUrl,
integrationDocsUrl, integrationDocsUrl,
......
...@@ -3,7 +3,7 @@ import createFlash from '~/flash'; ...@@ -3,7 +3,7 @@ import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
import Poll from '~/lib/utils/poll'; import Poll from '~/lib/utils/poll';
import { __ } from '~/locale'; import { s__ } from '~/locale';
import { MAX_REQUESTS } from '../constants'; import { MAX_REQUESTS } from '../constants';
import * as types from './mutation_types'; import * as types from './mutation_types';
...@@ -65,7 +65,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => { ...@@ -65,7 +65,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
commit(types.SET_LOADING_CLUSTERS, false); commit(types.SET_LOADING_CLUSTERS, false);
commit(types.SET_LOADING_NODES, false); commit(types.SET_LOADING_NODES, false);
createFlash({ createFlash({
message: __('Clusters|An error occurred while loading clusters'), message: s__('Clusters|An error occurred while loading clusters'),
}); });
dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' }); dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' });
......
.clusters-container { .clusters-container {
.empty-state .svg-content img { .empty-state .svg-content {
width: 145px; @include gl-pb-0;
img {
width: 100px;
}
} }
.empty-state--agent { .agents-empty-state {
.text-content { .text-content {
@include gl-max-w-full; @include gl-max-w-full;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
......
...@@ -19,9 +19,9 @@ module ClustersHelper ...@@ -19,9 +19,9 @@ module ClustersHelper
def js_cluster_agents_list_data(clusterable_project) def js_cluster_agents_list_data(clusterable_project)
{ {
default_branch_name: clusterable_project.default_branch, default_branch_name: clusterable_project.default_branch,
empty_state_image: image_path('illustrations/clusters_empty.svg'), empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
project_path: clusterable_project.full_path, project_path: clusterable_project.full_path,
agent_docs_url: help_page_path('user/clusters/agent/index'), multiple_clusters_docs_url: help_page_path('user/project/clusters/multiple_kubernetes_clusters'),
install_docs_url: help_page_path('administration/clusters/kas'), install_docs_url: help_page_path('administration/clusters/kas'),
get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'), get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'), integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
...@@ -38,7 +38,7 @@ module ClustersHelper ...@@ -38,7 +38,7 @@ module ClustersHelper
default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') }, default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') },
gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') } gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
}, },
clusters_empty_state_image: image_path('illustrations/clusters_empty.svg'), clusters_empty_state_image: image_path('illustrations/empty-state/empty-state-clusters.svg'),
empty_state_help_text: clusterable.empty_state_help_text, empty_state_help_text: clusterable.empty_state_help_text,
new_cluster_path: clusterable.new_path(tab: 'create'), new_cluster_path: clusterable.new_path(tab: 'create'),
can_add_cluster: clusterable.can_add_cluster?.to_s can_add_cluster: clusterable.can_add_cluster?.to_s
......
...@@ -7336,6 +7336,9 @@ msgstr "" ...@@ -7336,6 +7336,9 @@ msgstr ""
msgid "ClusterAgents|Configuration" msgid "ClusterAgents|Configuration"
msgstr "" msgstr ""
msgid "ClusterAgents|Connect with a GitLab Agent"
msgstr ""
msgid "ClusterAgents|Connected" msgid "ClusterAgents|Connected"
msgstr "" msgstr ""
...@@ -7366,16 +7369,13 @@ msgstr "" ...@@ -7366,16 +7369,13 @@ msgstr ""
msgid "ClusterAgents|Go to the repository" msgid "ClusterAgents|Go to the repository"
msgstr "" msgstr ""
msgid "ClusterAgents|Install a new GitLab Agent" msgid "ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
msgstr ""
msgid "ClusterAgents|Install new Agent"
msgstr "" msgstr ""
msgid "ClusterAgents|Integrate Kubernetes with a GitLab Agent" msgid "ClusterAgents|Install a new GitLab Agent"
msgstr "" msgstr ""
msgid "ClusterAgents|Integrate with the GitLab Agent" msgid "ClusterAgents|Install new Agent"
msgstr "" msgstr ""
msgid "ClusterAgents|Last connected %{timeAgo}." msgid "ClusterAgents|Last connected %{timeAgo}."
...@@ -7387,6 +7387,9 @@ msgstr "" ...@@ -7387,6 +7387,9 @@ msgstr ""
msgid "ClusterAgents|Learn how to create an agent access token" msgid "ClusterAgents|Learn how to create an agent access token"
msgstr "" msgstr ""
msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
msgstr ""
msgid "ClusterAgents|Make sure you are using a valid token." msgid "ClusterAgents|Make sure you are using a valid token."
msgstr "" msgstr ""
...@@ -7429,12 +7432,6 @@ msgstr "" ...@@ -7429,12 +7432,6 @@ msgstr ""
msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}." msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
msgstr "" msgstr ""
msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
msgstr ""
msgid "ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}"
msgstr ""
msgid "ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window." msgid "ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window."
msgstr "" msgstr ""
...@@ -7453,6 +7450,9 @@ msgstr "" ...@@ -7453,6 +7450,9 @@ msgstr ""
msgid "ClusterAgents|Unknown user" msgid "ClusterAgents|Unknown user"
msgstr "" msgstr ""
msgid "ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more."
msgstr ""
msgid "ClusterAgents|You will need to create a token to connect to your agent" msgid "ClusterAgents|You will need to create a token to connect to your agent"
msgstr "" msgstr ""
...@@ -7606,6 +7606,9 @@ msgstr "" ...@@ -7606,6 +7606,9 @@ msgstr ""
msgid "ClusterIntegration|Connect existing cluster" msgid "ClusterIntegration|Connect existing cluster"
msgstr "" msgstr ""
msgid "ClusterIntegration|Connect with a certificate"
msgstr ""
msgid "ClusterIntegration|Connection Error" msgid "ClusterIntegration|Connection Error"
msgstr "" msgstr ""
...@@ -7768,6 +7771,9 @@ msgstr "" ...@@ -7768,6 +7771,9 @@ msgstr ""
msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{help_link_start}read this first%{help_link_end}." msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{help_link_start}read this first%{help_link_end}."
msgstr "" msgstr ""
msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
msgstr ""
msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration." msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration."
msgstr "" msgstr ""
...@@ -7780,12 +7786,6 @@ msgstr "" ...@@ -7780,12 +7786,6 @@ msgstr ""
msgid "ClusterIntegration|Instance type" msgid "ClusterIntegration|Instance type"
msgstr "" msgstr ""
msgid "ClusterIntegration|Integrate Kubernetes with a cluster certificate"
msgstr ""
msgid "ClusterIntegration|Integrate with a cluster certificate"
msgstr ""
msgid "ClusterIntegration|Integration disabled" msgid "ClusterIntegration|Integration disabled"
msgstr "" msgstr ""
...@@ -7807,9 +7807,6 @@ msgstr "" ...@@ -7807,9 +7807,6 @@ msgstr ""
msgid "ClusterIntegration|Kubernetes cluster was successfully created." msgid "ClusterIntegration|Kubernetes cluster was successfully created."
msgstr "" msgstr ""
msgid "ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way."
msgstr ""
msgid "ClusterIntegration|Kubernetes version" msgid "ClusterIntegration|Kubernetes version"
msgstr "" msgstr ""
...@@ -7831,6 +7828,9 @@ msgstr "" ...@@ -7831,6 +7828,9 @@ msgstr ""
msgid "ClusterIntegration|Learn more about instance Kubernetes clusters" msgid "ClusterIntegration|Learn more about instance Kubernetes clusters"
msgstr "" msgstr ""
msgid "ClusterIntegration|Learn more about the GitLab managed clusters"
msgstr ""
msgid "ClusterIntegration|Loading IAM Roles" msgid "ClusterIntegration|Loading IAM Roles"
msgstr "" msgstr ""
...@@ -8164,6 +8164,9 @@ msgstr "" ...@@ -8164,6 +8164,9 @@ msgstr ""
msgid "ClusterIntegration|Unknown Error" msgid "ClusterIntegration|Unknown Error"
msgstr "" msgstr ""
msgid "ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way."
msgstr ""
msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster." msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster."
msgstr "" msgstr ""
......
...@@ -14,7 +14,7 @@ RSpec.describe 'Instance-level AWS EKS Cluster', :js do ...@@ -14,7 +14,7 @@ RSpec.describe 'Instance-level AWS EKS Cluster', :js do
before do before do
visit admin_clusters_path visit admin_clusters_path
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
end end
context 'when user creates a cluster on AWS EKS' do context 'when user creates a cluster on AWS EKS' do
......
...@@ -26,7 +26,7 @@ RSpec.describe 'Cluster agent registration', :js do ...@@ -26,7 +26,7 @@ RSpec.describe 'Cluster agent registration', :js do
it 'allows the user to select an agent to install, and displays the resulting agent token' do it 'allows the user to select an agent to install, and displays the resulting agent token' do
click_link('GitLab Agent managed clusters') click_link('GitLab Agent managed clusters')
click_button('Integrate with the GitLab Agent') click_button('Connect with a GitLab Agent')
expect(page).to have_content('Install new Agent') expect(page).to have_content('Install new Agent')
click_button('Select an Agent') click_button('Select an Agent')
......
...@@ -19,7 +19,7 @@ RSpec.describe 'Group AWS EKS Cluster', :js do ...@@ -19,7 +19,7 @@ RSpec.describe 'Group AWS EKS Cluster', :js do
before do before do
visit group_clusters_path(group) visit group_clusters_path(group)
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
end end
context 'when user creates a cluster on AWS EKS' do context 'when user creates a cluster on AWS EKS' do
......
...@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do ...@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do
before do before do
visit group_clusters_path(group) visit group_clusters_path(group)
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
click_link 'Connect existing cluster' click_link 'Connect existing cluster'
end end
...@@ -129,7 +129,7 @@ RSpec.describe 'User Cluster', :js do ...@@ -129,7 +129,7 @@ RSpec.describe 'User Cluster', :js do
it 'user sees creation form with the successful message' 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_content('Kubernetes cluster integration was successfully removed.')
expect(page).to have_link('Integrate with a cluster certificate') expect(page).to have_link('Connect with a certificate')
end end
end end
end end
......
...@@ -24,7 +24,7 @@ RSpec.describe 'ClusterAgents', :js do ...@@ -24,7 +24,7 @@ RSpec.describe 'ClusterAgents', :js do
it 'displays empty state', :aggregate_failures do it 'displays empty state', :aggregate_failures do
click_link 'GitLab Agent managed clusters' click_link 'GitLab Agent managed clusters'
expect(page).to have_content('Integrate with the GitLab Agent') expect(page).to have_content('Connect with a GitLab Agent')
expect(page).to have_selector('.empty-state') expect(page).to have_selector('.empty-state')
end end
end end
......
...@@ -19,7 +19,7 @@ RSpec.describe 'AWS EKS Cluster', :js do ...@@ -19,7 +19,7 @@ RSpec.describe 'AWS EKS Cluster', :js do
before do before do
visit project_clusters_path(project) visit project_clusters_path(project)
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
end end
context 'when user creates a cluster on AWS EKS' do context 'when user creates a cluster on AWS EKS' do
......
...@@ -33,7 +33,7 @@ RSpec.describe 'Gcp Cluster', :js do ...@@ -33,7 +33,7 @@ RSpec.describe 'Gcp Cluster', :js do
before do before do
visit project_clusters_path(project) visit project_clusters_path(project)
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
click_link 'Create new cluster' click_link 'Create new cluster'
click_link 'Google GKE' click_link 'Google GKE'
end end
...@@ -162,7 +162,7 @@ RSpec.describe 'Gcp Cluster', :js do ...@@ -162,7 +162,7 @@ RSpec.describe 'Gcp Cluster', :js do
it 'user sees creation form with the successful message' 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_content('Kubernetes cluster integration was successfully removed.')
expect(page).to have_link('Integrate with a cluster certificate') expect(page).to have_link('Connect with a certificate')
end end
end end
end end
...@@ -178,7 +178,7 @@ RSpec.describe 'Gcp Cluster', :js do ...@@ -178,7 +178,7 @@ RSpec.describe 'Gcp Cluster', :js do
end end
it 'user sees offer on cluster create page' do it 'user sees offer on cluster create page' do
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
expect(page).to have_css('.gcp-signup-offer') expect(page).to have_css('.gcp-signup-offer')
end end
...@@ -195,7 +195,7 @@ RSpec.describe 'Gcp Cluster', :js do ...@@ -195,7 +195,7 @@ RSpec.describe 'Gcp Cluster', :js do
find('.gcp-signup-offer .js-close').click find('.gcp-signup-offer .js-close').click
wait_for_requests wait_for_requests
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
expect(page).not_to have_css('.gcp-signup-offer') expect(page).not_to have_css('.gcp-signup-offer')
end end
......
...@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do ...@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do
before do before do
visit project_clusters_path(project) visit project_clusters_path(project)
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
click_link 'Connect existing cluster' click_link 'Connect existing cluster'
end end
...@@ -116,7 +116,7 @@ RSpec.describe 'User Cluster', :js do ...@@ -116,7 +116,7 @@ RSpec.describe 'User Cluster', :js do
it 'user sees creation form with the successful message' 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_content('Kubernetes cluster integration was successfully removed.')
expect(page).to have_link('Integrate with a cluster certificate') expect(page).to have_link('Connect with a certificate')
end end
end end
end end
......
...@@ -19,7 +19,7 @@ RSpec.describe 'Clusters', :js do ...@@ -19,7 +19,7 @@ RSpec.describe 'Clusters', :js do
end end
it 'sees empty state' do it 'sees empty state' do
expect(page).to have_link('Integrate with a cluster certificate') expect(page).to have_link('Connect with a certificate')
expect(page).to have_selector('.empty-state') expect(page).to have_selector('.empty-state')
end end
end end
...@@ -214,7 +214,7 @@ RSpec.describe 'Clusters', :js do ...@@ -214,7 +214,7 @@ RSpec.describe 'Clusters', :js do
before do before do
visit project_clusters_path(project) visit project_clusters_path(project)
click_link 'Integrate with a cluster certificate' click_link 'Connect with a certificate'
click_link 'Create new cluster' click_link 'Create new cluster'
end end
......
...@@ -4,7 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; ...@@ -4,7 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
const emptyStateImage = '/path/to/image'; const emptyStateImage = '/path/to/image';
const projectPath = 'path/to/project'; const projectPath = 'path/to/project';
const agentDocsUrl = 'path/to/agentDocs'; const multipleClustersDocsUrl = 'path/to/multipleClustersDocs';
const installDocsUrl = 'path/to/installDocs'; const installDocsUrl = 'path/to/installDocs';
const getStartedDocsUrl = 'path/to/getStartedDocs'; const getStartedDocsUrl = 'path/to/getStartedDocs';
const integrationDocsUrl = 'path/to/integrationDocs'; const integrationDocsUrl = 'path/to/integrationDocs';
...@@ -18,14 +18,14 @@ describe('AgentEmptyStateComponent', () => { ...@@ -18,14 +18,14 @@ describe('AgentEmptyStateComponent', () => {
const provideData = { const provideData = {
emptyStateImage, emptyStateImage,
projectPath, projectPath,
agentDocsUrl, multipleClustersDocsUrl,
installDocsUrl, installDocsUrl,
getStartedDocsUrl, getStartedDocsUrl,
integrationDocsUrl, integrationDocsUrl,
}; };
const findConfigurationsAlert = () => wrapper.findComponent(GlAlert); const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
const findAgentDocsLink = () => wrapper.findByTestId('agent-docs-link'); const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link'); const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button'); const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
const findEmptyState = () => wrapper.findComponent(GlEmptyState); const findEmptyState = () => wrapper.findComponent(GlEmptyState);
...@@ -46,7 +46,7 @@ describe('AgentEmptyStateComponent', () => { ...@@ -46,7 +46,7 @@ describe('AgentEmptyStateComponent', () => {
}); });
it('renders correct href attributes for the links', () => { it('renders correct href attributes for the links', () => {
expect(findAgentDocsLink().attributes('href')).toBe(agentDocsUrl); expect(findMultipleClustersDocsLink().attributes('href')).toBe(multipleClustersDocsUrl);
expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl); expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
}); });
......
...@@ -11,10 +11,6 @@ const canAddCluster = true; ...@@ -11,10 +11,6 @@ const canAddCluster = true;
describe('ClustersEmptyStateComponent', () => { describe('ClustersEmptyStateComponent', () => {
let wrapper; let wrapper;
const propsData = {
childComponent: false,
};
const provideData = { const provideData = {
clustersEmptyStateImage, clustersEmptyStateImage,
emptyStateHelpText: null, emptyStateHelpText: null,
...@@ -31,7 +27,6 @@ describe('ClustersEmptyStateComponent', () => { ...@@ -31,7 +27,6 @@ describe('ClustersEmptyStateComponent', () => {
beforeEach(() => { beforeEach(() => {
wrapper = shallowMountExtended(ClustersEmptyState, { wrapper = shallowMountExtended(ClustersEmptyState, {
store: ClusterStore(entryData), store: ClusterStore(entryData),
propsData,
provide: provideData, provide: provideData,
stubs: { GlEmptyState }, stubs: { GlEmptyState },
}); });
...@@ -56,7 +51,6 @@ describe('ClustersEmptyStateComponent', () => { ...@@ -56,7 +51,6 @@ describe('ClustersEmptyStateComponent', () => {
provideData.emptyStateHelpText = emptyStateHelpText; provideData.emptyStateHelpText = emptyStateHelpText;
wrapper = shallowMountExtended(ClustersEmptyState, { wrapper = shallowMountExtended(ClustersEmptyState, {
store: ClusterStore(entryData), store: ClusterStore(entryData),
propsData,
provide: provideData, provide: provideData,
}); });
}); });
......
...@@ -69,7 +69,7 @@ RSpec.describe ClustersHelper do ...@@ -69,7 +69,7 @@ RSpec.describe ClustersHelper do
end end
it 'displays image path' do it 'displays image path' do
expect(subject[:empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg)) expect(subject[:empty_state_image]).to match(%r(/illustrations/empty-state/empty-state-agents|svg))
end end
it 'displays project path' do it 'displays project path' do
...@@ -77,7 +77,7 @@ RSpec.describe ClustersHelper do ...@@ -77,7 +77,7 @@ RSpec.describe ClustersHelper do
end end
it 'generates docs urls' do it 'generates docs urls' do
expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index')) expect(subject[:multiple_clusters_docs_url]).to eq(help_page_path('user/project/clusters/multiple_kubernetes_clusters'))
expect(subject[:install_docs_url]).to eq(help_page_path('administration/clusters/kas')) expect(subject[:install_docs_url]).to eq(help_page_path('administration/clusters/kas'))
expect(subject[:get_started_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository')) expect(subject[:get_started_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'))
expect(subject[:integration_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent')) expect(subject[:integration_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'))
...@@ -114,7 +114,7 @@ RSpec.describe ClustersHelper do ...@@ -114,7 +114,7 @@ RSpec.describe ClustersHelper do
end end
it 'displays empty image path' do it 'displays empty image path' do
expect(subject[:clusters_empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg)) expect(subject[:clusters_empty_state_image]).to match(%r(/illustrations/empty-state/empty-state-clusters|svg))
end end
it 'displays create cluster using certificate path' do it 'displays create cluster using certificate path' do
......
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