1 files changed, 35 insertions, 46 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 405339b3d36..af44a23b4b3 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,9 +1,16 @@
 <script>
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
-import { INSTALL_AGENT_MODAL_ID } from '../constants';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
 
 export default {
+  i18n: I18N_AGENTS_EMPTY_STATE,
   modalId: INSTALL_AGENT_MODAL_ID,
+  multipleClustersDocsUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
+  installDocsUrl: helpPagePath('administration/clusters/kas'),
+  getStartedDocsUrl: helpPagePath('user/clusters/agent/index', {
+    anchor: 'define-a-configuration-repository',
+  }),
   components: {
     GlButton,
     GlEmptyState,
@@ -14,19 +21,17 @@ export default {
   directives: {
     GlModalDirective,
   },
-  inject: [
-    'emptyStateImage',
-    'projectPath',
-    'agentDocsUrl',
-    'installDocsUrl',
-    'getStartedDocsUrl',
-    'integrationDocsUrl',
-  ],
+  inject: ['emptyStateImage', 'projectPath'],
   props: {
     hasConfigurations: {
       type: Boolean,
       required: true,
     },
+    isChildComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   computed: {
     repositoryPath() {
@@ -37,22 +42,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="agents-empty-state">
     <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="$options.multipleClustersDocsUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
               {{ content }}
             </gl-link>
           </template>
@@ -60,19 +62,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="$options.installDocsUrl" target="_blank" data-testid="install-docs-link">
+          {{ $options.i18n.learnMoreText }}
+        </gl-link>
       </p>
 
       <gl-alert
@@ -81,24 +73,20 @@ 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
             category="primary"
             variant="info"
-            :href="getStartedDocsUrl"
+            :href="$options.getStartedDocsUrl"
             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>
@@ -106,13 +94,14 @@ export default {
 
     <template #actions>
       <gl-button
+        v-if="!isChildComponent"
         v-gl-modal-directive="$options.modalId"
         :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>