diff options
Diffstat (limited to 'app/assets/javascripts/feature_flags/components/empty_state.vue')
-rw-r--r-- | app/assets/javascripts/feature_flags/components/empty_state.vue | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/feature_flags/components/empty_state.vue b/app/assets/javascripts/feature_flags/components/empty_state.vue new file mode 100644 index 00000000000..a6de4972bb1 --- /dev/null +++ b/app/assets/javascripts/feature_flags/components/empty_state.vue @@ -0,0 +1,95 @@ +<script> +import { GlAlert, GlEmptyState, GlLink, GlLoadingIcon } from '@gitlab/ui'; + +export default { + components: { GlAlert, GlEmptyState, GlLink, GlLoadingIcon }, + inject: ['errorStateSvgPath', 'featureFlagsHelpPagePath'], + props: { + count: { + required: false, + type: Number, + default: null, + }, + alerts: { + required: true, + type: Array, + }, + isLoading: { + required: true, + type: Boolean, + }, + loadingLabel: { + required: true, + type: String, + }, + errorState: { + required: true, + type: Boolean, + }, + errorTitle: { + required: true, + type: String, + }, + emptyState: { + required: true, + type: Boolean, + }, + emptyTitle: { + required: true, + type: String, + }, + emptyDescription: { + required: true, + type: String, + }, + }, + computed: { + itemCount() { + return this.count ?? 0; + }, + }, + methods: { + clearAlert(index) { + this.$emit('dismissAlert', index); + }, + }, +}; +</script> +<template> + <div> + <gl-alert + v-for="(message, index) in alerts" + :key="index" + data-testid="serverErrors" + variant="danger" + @dismiss="clearAlert(index)" + > + {{ message }} + </gl-alert> + + <gl-loading-icon v-if="isLoading" :label="loadingLabel" size="md" class="gl-mt-4" /> + + <gl-empty-state + v-else-if="errorState" + :title="errorTitle" + :description="s__('FeatureFlags|Try again in a few moments or contact your support team.')" + :svg-path="errorStateSvgPath" + data-testid="error-state" + /> + + <gl-empty-state + v-else-if="emptyState" + :title="emptyTitle" + :svg-path="errorStateSvgPath" + data-testid="empty-state" + > + <template #description> + {{ emptyDescription }} + <gl-link :href="featureFlagsHelpPagePath" target="_blank"> + {{ s__('FeatureFlags|More information') }} + </gl-link> + </template> + </gl-empty-state> + <slot v-else> </slot> + </div> +</template> |