diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/clusters_empty_state.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters_empty_state.vue | 89 |
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> |