Skip to content

G
gitlab-ce
Commit 9154ad4a authored by anna_vovchenko's avatar anna_vovchenko
Browse files
Options

Updated texts and illustrations on Kubernetes page 

As part of changing the Kubernetes section UX,
we are updating texts and illustrations for
the Agent and the certificate based integrations

Changelog: changed
parent 0781b019
Show whitespace changes
Inline Side-by-side
Showing with 98 additions and 81 deletions
app/assets/javascripts/clusters_list/components/agent_empty_state.vue
View file @ 9154ad4a
<script>
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 {
i18n: I18N_AGENTS_EMPTY_STATE,
modalId: INSTALL_AGENT_MODAL_ID,
components: {
GlButton,
......@@ -17,7 +18,7 @@ export default {
inject: [
'emptyStateImage',
'projectPath',
'agentDocsUrl',
'multipleClustersDocsUrl',
'installDocsUrl',
'getStartedDocsUrl',
'integrationDocsUrl',
......@@ -37,22 +38,19 @@ export default {
</script>
<template>
<gl-empty-state
:svg-path="emptyStateImage"
:title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
class="empty-state--agent"
>
<gl-empty-state :svg-path="emptyStateImage" title="" class="empty-state--agent">
<template #description>
<p class="mw-460 gl-mx-auto">
<gl-sprintf
:message="
s__(
'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}',
)
"
>
<p class="mw-460 gl-mx-auto gl-text-left">
{{ $options.i18n.introText }}
</p>
<p class="mw-460 gl-mx-auto gl-text-left">
<gl-sprintf :message="$options.i18n.multipleClustersText">
<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 }}
</gl-link>
</template>
......@@ -60,19 +58,9 @@ export default {
</p>
<p class="mw-460 gl-mx-auto">
<gl-sprintf
:message="
s__(
'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 }}
{{ $options.i18n.learnMoreText }}
</gl-link>
</template>
</gl-sprintf>
</p>
<gl-alert
......@@ -81,11 +69,7 @@ export default {
class="gl-mb-5 text-left"
:dismissible="false"
>
{{
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.',
)
}}
{{ $options.i18n.warningText }}
<template #actions>
<gl-button
......@@ -95,10 +79,10 @@ export default {
target="_blank"
class="gl-ml-0!"
>
{{ s__('ClusterAgents|Read more about getting started') }}
{{ $options.i18n.readMoreText }}
</gl-button>
<gl-button category="secondary" variant="info" :href="repositoryPath">
{{ s__('ClusterAgents|Go to the repository') }}
{{ $options.i18n.repositoryButtonText }}
</gl-button>
</template>
</gl-alert>
......@@ -110,9 +94,9 @@ export default {
:disabled="!hasConfigurations"
data-testid="integration-primary-button"
category="primary"
variant="success"
variant="confirm"
>
{{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
{{ $options.i18n.primaryButtonText }}
</gl-button>
</template>
</gl-empty-state>
......
app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
View file @ 9154ad4a
<script>
import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui';
import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
import { mapState } from 'vuex';
import { s__ } from '~/locale';
import { helpPagePath } from '~/helpers/help_page_helper';
export default {
i18n: {
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.',
'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.',
),
learnMoreLinkText: s__('ClusterIntegration|Learn more about Kubernetes'),
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|Integrate with a cluster certificate'),
},
components: {
GlEmptyState,
GlButton,
GlLink,
GlSprintf,
},
inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
......@@ -27,11 +30,24 @@ export default {
</script>
<template>
<gl-empty-state :svg-path="clustersEmptyStateImage" :title="$options.i18n.title">
<gl-empty-state :svg-path="clustersEmptyStateImage" title="">
<template #description>
<p>
<p class="gl-text-left">
{{ $options.i18n.description }}
</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">
{{ emptyStateHelpText }}
......
app/assets/javascripts/clusters_list/constants.js
View file @ 9154ad4a
......@@ -141,3 +141,19 @@ 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|Integrate with the GitLab Agent'),
};
app/assets/javascripts/clusters_list/load_agents.js
View file @ 9154ad4a
......@@ -14,7 +14,7 @@ export default (Vue, VueApollo) => {
emptyStateImage,
defaultBranchName,
projectPath,
agentDocsUrl,
multipleClustersDocsUrl,
installDocsUrl,
getStartedDocsUrl,
integrationDocsUrl,
......@@ -27,7 +27,7 @@ export default (Vue, VueApollo) => {
provide: {
emptyStateImage,
projectPath,
agentDocsUrl,
multipleClustersDocsUrl,
installDocsUrl,
getStartedDocsUrl,
integrationDocsUrl,
......
app/assets/javascripts/clusters_list/store/actions.js
View file @ 9154ad4a
......@@ -3,7 +3,7 @@ import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
import Poll from '~/lib/utils/poll';
import { __ } from '~/locale';
import { s__ } from '~/locale';
import { MAX_REQUESTS } from '../constants';
import * as types from './mutation_types';
......@@ -65,7 +65,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
commit(types.SET_LOADING_CLUSTERS, false);
commit(types.SET_LOADING_NODES, false);
createFlash({
message: __('Clusters|An error occurred while loading clusters'),
message: s__('Clusters|An error occurred while loading clusters'),
});
dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' });
......
app/assets/stylesheets/pages/clusters.scss
View file @ 9154ad4a
.clusters-container {
.empty-state .svg-content img {
width: 145px;
.empty-state .svg-content {
@include gl-pb-0;
img {
width: 100px;
}
}
.empty-state--agent {
......
app/helpers/clusters_helper.rb
View file @ 9154ad4a
......@@ -19,9 +19,9 @@ module ClustersHelper
def js_cluster_agents_list_data(clusterable_project)
{
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,
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'),
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'),
......@@ -38,7 +38,7 @@ module ClustersHelper
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') }
},
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,
new_cluster_path: clusterable.new_path(tab: 'create'),
can_add_cluster: clusterable.can_add_cluster?.to_s
......
locale/gitlab.pot
View file @ 9154ad4a
......@@ -7358,13 +7358,13 @@ msgstr ""
msgid "ClusterAgents|Go to the repository"
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"
msgid "ClusterAgents|Install a new GitLab Agent"
msgstr ""
msgid "ClusterAgents|Integrate Kubernetes with a GitLab Agent"
msgid "ClusterAgents|Install new Agent"
msgstr ""
msgid "ClusterAgents|Integrate with the GitLab Agent"
......@@ -7379,6 +7379,9 @@ msgstr ""
msgid "ClusterAgents|Learn how to create an agent access token"
msgstr ""
msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
msgstr ""
msgid "ClusterAgents|Make sure you are using a valid token."
msgstr ""
......@@ -7418,12 +7421,6 @@ msgstr ""
msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
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."
msgstr ""
......@@ -7442,6 +7439,9 @@ msgstr ""
msgid "ClusterAgents|Unknown user"
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"
msgstr ""
......@@ -7757,6 +7757,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}."
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."
msgstr ""
......@@ -7769,9 +7772,6 @@ msgstr ""
msgid "ClusterIntegration|Instance type"
msgstr ""
msgid "ClusterIntegration|Integrate Kubernetes with a cluster certificate"
msgstr ""
msgid "ClusterIntegration|Integrate with a cluster certificate"
msgstr ""
......@@ -7796,9 +7796,6 @@ msgstr ""
msgid "ClusterIntegration|Kubernetes cluster was successfully created."
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"
msgstr ""
......@@ -7820,6 +7817,9 @@ msgstr ""
msgid "ClusterIntegration|Learn more about instance Kubernetes clusters"
msgstr ""
msgid "ClusterIntegration|Learn more about the GitLab managed clusters"
msgstr ""
msgid "ClusterIntegration|Loading IAM Roles"
msgstr ""
......@@ -8153,6 +8153,9 @@ msgstr ""
msgid "ClusterIntegration|Unknown Error"
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."
msgstr ""
......
spec/frontend/clusters_list/components/agent_empty_state_spec.js
View file @ 9154ad4a
......@@ -4,7 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
const emptyStateImage = '/path/to/image';
const projectPath = 'path/to/project';
const agentDocsUrl = 'path/to/agentDocs';
const multipleClustersDocsUrl = 'path/to/multipleClustersDocs';
const installDocsUrl = 'path/to/installDocs';
const getStartedDocsUrl = 'path/to/getStartedDocs';
const integrationDocsUrl = 'path/to/integrationDocs';
......@@ -18,14 +18,14 @@ describe('AgentEmptyStateComponent', () => {
const provideData = {
emptyStateImage,
projectPath,
agentDocsUrl,
multipleClustersDocsUrl,
installDocsUrl,
getStartedDocsUrl,
integrationDocsUrl,
};
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 findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
......@@ -46,7 +46,7 @@ describe('AgentEmptyStateComponent', () => {
});
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);
});
......
spec/frontend/clusters_list/components/clusters_empty_state_spec.js
View file @ 9154ad4a
......@@ -11,10 +11,6 @@ const canAddCluster = true;
describe('ClustersEmptyStateComponent', () => {
let wrapper;
const propsData = {
childComponent: false,
};
const provideData = {
clustersEmptyStateImage,
emptyStateHelpText: null,
......@@ -31,7 +27,6 @@ describe('ClustersEmptyStateComponent', () => {
beforeEach(() => {
wrapper = shallowMountExtended(ClustersEmptyState, {
store: ClusterStore(entryData),
propsData,
provide: provideData,
stubs: { GlEmptyState },
});
......@@ -56,7 +51,6 @@ describe('ClustersEmptyStateComponent', () => {
provideData.emptyStateHelpText = emptyStateHelpText;
wrapper = shallowMountExtended(ClustersEmptyState, {
store: ClusterStore(entryData),
propsData,
provide: provideData,
});
});
......
spec/helpers/clusters_helper_spec.rb
View file @ 9154ad4a
......@@ -69,7 +69,7 @@ RSpec.describe ClustersHelper do
end
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
it 'displays project path' do
......@@ -77,7 +77,7 @@ RSpec.describe ClustersHelper do
end
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[: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'))
......@@ -114,7 +114,7 @@ RSpec.describe ClustersHelper do
end
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
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7