Implemented changes after FE and UX review

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 }}

app/assets/javascripts/clusters_list/components/clusters_empty_state.vue

 <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,

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'),
 };

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) {

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 ""