1 files changed, 45 insertions, 44 deletions

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 3879af6e9cb..ce601de57bd 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlEmptyState, GlButton, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
@@ -11,6 +11,7 @@ export default {
     GlButton,
     GlLink,
     GlSprintf,
+    GlAlert,
   },
   inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
   props: {
@@ -20,8 +21,11 @@ export default {
       type: Boolean,
     },
   },
-  learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
-  multipleClustersHelpUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
+  clustersHelpUrl: helpPagePath('user/infrastructure/clusters/index', {
+    anchor: 'certificate-based-kubernetes-integration-deprecated',
+  }),
+  blogPostUrl:
+    'https://about.gitlab.com/blog/2021/11/15/deprecating-the-cert-based-kubernetes-integration/',
   computed: {
     ...mapState(['canAddCluster']),
   },
@@ -29,48 +33,45 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
-    <template #description>
-      <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>
+  <div>
+    <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
+      <template #description>
+        <p class="gl-text-left">
+          <gl-sprintf :message="$options.i18n.introText">
+            <template #link="{ content }">
+              <gl-link :href="$options.clustersHelpUrl">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
 
-      <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
-        {{ emptyStateHelpText }}
-      </p>
+        <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
+          {{ emptyStateHelpText }}
+        </p>
+      </template>
 
-      <p>
-        <gl-link :href="$options.learnMoreHelpUrl" target="_blank" data-testid="clusters-docs-link">
-          {{ $options.i18n.learnMoreLinkText }}
-        </gl-link>
-      </p>
-    </template>
+      <template #actions>
+        <gl-button
+          v-if="!isChildComponent"
+          data-testid="integration-primary-button"
+          data-qa-selector="add_kubernetes_cluster_link"
+          category="primary"
+          variant="confirm"
+          :disabled="!canAddCluster"
+          :href="newClusterPath"
+        >
+          {{ $options.i18n.buttonText }}
+        </gl-button>
+      </template>
+    </gl-empty-state>
 
-    <template #actions>
-      <gl-button
-        v-if="!isChildComponent"
-        data-testid="integration-primary-button"
-        data-qa-selector="add_kubernetes_cluster_link"
-        category="primary"
-        variant="confirm"
-        :disabled="!canAddCluster"
-        :href="newClusterPath"
-      >
-        {{ $options.i18n.buttonText }}
-      </gl-button>
-    </template>
-  </gl-empty-state>
+    <gl-alert variant="warning" :dismissible="false">
+      <gl-sprintf :message="$options.i18n.alertText">
+        <template #link="{ content }">
+          <gl-link :href="$options.blogPostUrl" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+  </div>
 </template>