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 | 76 |
1 files changed, 76 insertions, 0 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 new file mode 100644 index 00000000000..3879af6e9cb --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue @@ -0,0 +1,76 @@ +<script> +import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui'; +import { mapState } from 'vuex'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { I18N_CLUSTERS_EMPTY_STATE } from '../constants'; + +export default { + i18n: I18N_CLUSTERS_EMPTY_STATE, + components: { + GlEmptyState, + GlButton, + GlLink, + GlSprintf, + }, + inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'], + props: { + isChildComponent: { + default: false, + required: false, + type: Boolean, + }, + }, + learnMoreHelpUrl: helpPagePath('user/project/clusters/index'), + multipleClustersHelpUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'), + computed: { + ...mapState(['canAddCluster']), + }, +}; +</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> + + <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text"> + {{ emptyStateHelpText }} + </p> + + <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> |