diff options
Diffstat (limited to 'app/assets/javascripts/clusters/agents/components/agent_integration_status_row.vue')
-rw-r--r-- | app/assets/javascripts/clusters/agents/components/agent_integration_status_row.vue | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters/agents/components/agent_integration_status_row.vue b/app/assets/javascripts/clusters/agents/components/agent_integration_status_row.vue new file mode 100644 index 00000000000..59de6df1e49 --- /dev/null +++ b/app/assets/javascripts/clusters/agents/components/agent_integration_status_row.vue @@ -0,0 +1,66 @@ +<script> +import { GlLink, GlIcon, GlBadge } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + +export default { + components: { + GlLink, + GlIcon, + GlBadge, + }, + mixins: [glFeatureFlagMixin()], + i18n: { + premiumTitle: s__('ClusterAgents|Premium'), + }, + props: { + text: { + required: true, + type: String, + }, + icon: { + required: false, + type: String, + default: 'information', + }, + iconClass: { + required: false, + type: String, + default: 'text-info', + }, + helpUrl: { + required: false, + type: String, + default: null, + }, + featureName: { + required: false, + type: String, + default: null, + }, + }, + computed: { + showPremiumBadge() { + return this.featureName && !this.glFeatures[this.featureName]; + }, + }, +}; +</script> + +<template> + <li class="gl-mb-3"> + <gl-icon :name="icon" :size="16" :class="iconClass" class="gl-mr-2" /> + + <gl-link v-if="helpUrl" :href="helpUrl">{{ text }}</gl-link> + <span v-else>{{ text }}</span> + + <gl-badge + v-if="showPremiumBadge" + size="md" + class="gl-ml-2 gl-vertical-align-middle" + icon="license" + variant="tier" + >{{ $options.i18n.premiumTitle }}</gl-badge + > + </li> +</template> |