From 9154ad4a14a2c74e8d43615c0860d0647cdd56ff Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Wed, 3 Nov 2021 01:02:49 +0200
Subject: [PATCH 1/3] 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
---
 .../components/agent_empty_state.vue          | 60 +++++++------------
 .../components/clusters_empty_state.vue       | 28 +++++++--
 .../javascripts/clusters_list/constants.js    | 16 +++++
 .../javascripts/clusters_list/load_agents.js  |  4 +-
 .../clusters_list/store/actions.js            |  4 +-
 app/assets/stylesheets/pages/clusters.scss    |  8 ++-
 app/helpers/clusters_helper.rb                |  6 +-
 locale/gitlab.pot                             | 33 +++++-----
 .../components/agent_empty_state_spec.js      |  8 +--
 .../components/clusters_empty_state_spec.js   |  6 --
 spec/helpers/clusters_helper_spec.rb          |  6 +-
 11 files changed, 98 insertions(+), 81 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 405339b3d365cf..50a44d043f44eb 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,8 +1,9 @@
 <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 }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
+        <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
+          {{ $options.i18n.learnMoreText }}
+        </gl-link>
       </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>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index fa13bdadc1bb43..3d685a524acdd3 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -1,22 +1,25 @@
 <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 }}
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 0bade1fc281c73..de917048821c8e 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -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'),
+};
diff --git a/app/assets/javascripts/clusters_list/load_agents.js b/app/assets/javascripts/clusters_list/load_agents.js
index 3f00cabccdb068..e65de67515a8f7 100644
--- a/app/assets/javascripts/clusters_list/load_agents.js
+++ b/app/assets/javascripts/clusters_list/load_agents.js
@@ -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,
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 5f35a0b26f3034..f0f96fd7872d06 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -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' });
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index de27ca2e5e86e6..9195a3a332a786 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -1,6 +1,10 @@
 .clusters-container {
-  .empty-state .svg-content img {
-    width: 145px;
+  .empty-state .svg-content {
+    @include gl-pb-0;
+
+    img {
+      width: 100px;
+    }
   }
 
   .empty-state--agent {
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index cfdf4b3c8d290f..bc464b8809b829 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -19,9 +19,9 @@ def display_cluster_agents?(clusterable)
   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 @@ def js_clusters_list_data(clusterable)
         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
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 658c60aac03579..8e637e81924346 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -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 ""
 
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index a548721588e2e8..cf7957e8df166c 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -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);
   });
 
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
index 147135b7ac03e9..bda0e6c110c04a 100644
--- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -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,
       });
     });
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index 3db906f2e629af..904151812e66e0 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -69,7 +69,7 @@
     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 @@
     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 @@
     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
-- 
GitLab


From ed174c1bbda08e4b6eb64dacee96f796724b30e1 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Wed, 3 Nov 2021 23:47:01 +0200
Subject: [PATCH 2/3] Implemented changes after FE and UX review

---
 .../clusters_list/components/agent_empty_state.vue  |  2 +-
 .../components/clusters_empty_state.vue             | 13 ++-----------
 app/assets/javascripts/clusters_list/constants.js   | 13 ++++++++++++-
 app/assets/stylesheets/pages/clusters.scss          |  2 +-
 locale/gitlab.pot                                   | 12 ++++++------
 5 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 50a44d043f44eb..06092039eb7caf 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -38,7 +38,7 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state :svg-path="emptyStateImage" title="" class="empty-state--agent">
+  <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
     <template #description>
       <p class="mw-460 gl-mx-auto gl-text-left">
         {{ $options.i18n.introText }}
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index 3d685a524acdd3..1f153a4f38ee09 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -1,20 +1,11 @@
 <script>
 import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
 
 export default {
-  i18n: {
-    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|Integrate with a cluster certificate'),
-  },
+  i18n: I18N_CLUSTERS_EMPTY_STATE,
   components: {
     GlEmptyState,
     GlButton,
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index de917048821c8e..cbb5bbd80dcaec 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -155,5 +155,16 @@ export const I18N_AGENTS_EMPTY_STATE = {
   ),
   readMoreText: s__('ClusterAgents|Read more about getting started'),
   repositoryButtonText: s__('ClusterAgents|Go to the repository'),
-  primaryButtonText: s__('ClusterAgents|Integrate with the GitLab Agent'),
+  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'),
 };
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 9195a3a332a786..f54764f8d050d9 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -7,7 +7,7 @@
     }
   }
 
-  .empty-state--agent {
+  .agents-empty-state {
     .text-content {
       @include gl-max-w-full;
       @include media-breakpoint-up(lg) {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8e637e81924346..048df725d94eb0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7328,6 +7328,9 @@ msgstr ""
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
+msgid "ClusterAgents|Connect with a GitLab Agent"
+msgstr ""
+
 msgid "ClusterAgents|Connected"
 msgstr ""
 
@@ -7367,9 +7370,6 @@ msgstr ""
 msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
-msgid "ClusterAgents|Integrate with the GitLab Agent"
-msgstr ""
-
 msgid "ClusterAgents|Last connected %{timeAgo}."
 msgstr ""
 
@@ -7595,6 +7595,9 @@ msgstr ""
 msgid "ClusterIntegration|Connect existing cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Connect with a certificate"
+msgstr ""
+
 msgid "ClusterIntegration|Connection Error"
 msgstr ""
 
@@ -7772,9 +7775,6 @@ msgstr ""
 msgid "ClusterIntegration|Instance type"
 msgstr ""
 
-msgid "ClusterIntegration|Integrate with a cluster certificate"
-msgstr ""
-
 msgid "ClusterIntegration|Integration disabled"
 msgstr ""
 
-- 
GitLab


From e6abf0aa706a298b5c4fb7347f7c986eb3a92867 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 4 Nov 2021 00:28:42 +0200
Subject: [PATCH 3/3] Updated specs with the new button copy

---
 spec/features/admin/clusters/eks_spec.rb      | 2 +-
 spec/features/clusters/create_agent_spec.rb   | 2 +-
 spec/features/groups/clusters/eks_spec.rb     | 2 +-
 spec/features/groups/clusters/user_spec.rb    | 4 ++--
 spec/features/projects/cluster_agents_spec.rb | 2 +-
 spec/features/projects/clusters/eks_spec.rb   | 2 +-
 spec/features/projects/clusters/gcp_spec.rb   | 8 ++++----
 spec/features/projects/clusters/user_spec.rb  | 4 ++--
 spec/features/projects/clusters_spec.rb       | 4 ++--
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/spec/features/admin/clusters/eks_spec.rb b/spec/features/admin/clusters/eks_spec.rb
index a1bac720349bf3..bb2678de2ae1fc 100644
--- a/spec/features/admin/clusters/eks_spec.rb
+++ b/spec/features/admin/clusters/eks_spec.rb
@@ -14,7 +14,7 @@
     before do
       visit admin_clusters_path
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do
diff --git a/spec/features/clusters/create_agent_spec.rb b/spec/features/clusters/create_agent_spec.rb
index d11684b910fecc..a05a3c4df9e750 100644
--- a/spec/features/clusters/create_agent_spec.rb
+++ b/spec/features/clusters/create_agent_spec.rb
@@ -26,7 +26,7 @@
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
     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')
 
     click_button('Select an Agent')
diff --git a/spec/features/groups/clusters/eks_spec.rb b/spec/features/groups/clusters/eks_spec.rb
index c361c502cbbf88..fe62efbd3bfe75 100644
--- a/spec/features/groups/clusters/eks_spec.rb
+++ b/spec/features/groups/clusters/eks_spec.rb
@@ -19,7 +19,7 @@
     before do
       visit group_clusters_path(group)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do
diff --git a/spec/features/groups/clusters/user_spec.rb b/spec/features/groups/clusters/user_spec.rb
index 2a7ededa39b0e7..1788167c94c38e 100644
--- a/spec/features/groups/clusters/user_spec.rb
+++ b/spec/features/groups/clusters/user_spec.rb
@@ -25,7 +25,7 @@
     before do
       visit group_clusters_path(group)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
 
@@ -129,7 +129,7 @@
 
       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('Integrate with a cluster certificate')
+        expect(page).to have_link('Connect with a certificate')
       end
     end
   end
diff --git a/spec/features/projects/cluster_agents_spec.rb b/spec/features/projects/cluster_agents_spec.rb
index 20762d98e26688..4b8f635f43253f 100644
--- a/spec/features/projects/cluster_agents_spec.rb
+++ b/spec/features/projects/cluster_agents_spec.rb
@@ -24,7 +24,7 @@
     it 'displays empty state', :aggregate_failures do
       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')
     end
   end
diff --git a/spec/features/projects/clusters/eks_spec.rb b/spec/features/projects/clusters/eks_spec.rb
index 9f3f331cfab93f..3cbc71028d19fe 100644
--- a/spec/features/projects/clusters/eks_spec.rb
+++ b/spec/features/projects/clusters/eks_spec.rb
@@ -19,7 +19,7 @@
     before do
       visit project_clusters_path(project)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do
diff --git a/spec/features/projects/clusters/gcp_spec.rb b/spec/features/projects/clusters/gcp_spec.rb
index 21e587288f54a0..dec71c3c9013ca 100644
--- a/spec/features/projects/clusters/gcp_spec.rb
+++ b/spec/features/projects/clusters/gcp_spec.rb
@@ -33,7 +33,7 @@ def submit_form
       before do
         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 'Google GKE'
       end
@@ -162,7 +162,7 @@ def submit_form
 
         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('Integrate with a cluster certificate')
+          expect(page).to have_link('Connect with a certificate')
         end
       end
     end
@@ -178,7 +178,7 @@ def submit_form
     end
 
     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')
     end
@@ -195,7 +195,7 @@ def submit_form
       find('.gcp-signup-offer .js-close').click
       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')
     end
diff --git a/spec/features/projects/clusters/user_spec.rb b/spec/features/projects/clusters/user_spec.rb
index 5b60edbcf876b3..4d663ec5a5a377 100644
--- a/spec/features/projects/clusters/user_spec.rb
+++ b/spec/features/projects/clusters/user_spec.rb
@@ -25,7 +25,7 @@
     before do
       visit project_clusters_path(project)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
 
@@ -116,7 +116,7 @@
 
       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('Integrate with a cluster certificate')
+        expect(page).to have_link('Connect with a certificate')
       end
     end
   end
diff --git a/spec/features/projects/clusters_spec.rb b/spec/features/projects/clusters_spec.rb
index 6b03301aa74f72..4190b83cfbfdf4 100644
--- a/spec/features/projects/clusters_spec.rb
+++ b/spec/features/projects/clusters_spec.rb
@@ -19,7 +19,7 @@
     end
 
     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')
     end
   end
@@ -214,7 +214,7 @@
     before do
       visit project_clusters_path(project)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Create new cluster'
     end
 
-- 
GitLab