diff options
Diffstat (limited to 'app/assets/javascripts/groups/components/empty_state.vue')
-rw-r--r-- | app/assets/javascripts/groups/components/empty_state.vue | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/empty_state.vue b/app/assets/javascripts/groups/components/empty_state.vue new file mode 100644 index 00000000000..4219b52737d --- /dev/null +++ b/app/assets/javascripts/groups/components/empty_state.vue @@ -0,0 +1,91 @@ +<script> +import { GlLink, GlEmptyState } from '@gitlab/ui'; + +import { s__ } from '~/locale'; + +export default { + components: { GlLink, GlEmptyState }, + i18n: { + withLinks: { + subgroup: { + title: s__('GroupsEmptyState|Create new subgroup'), + description: s__( + 'GroupsEmptyState|Groups are the best way to manage multiple projects and members.', + ), + }, + project: { + title: s__('GroupsEmptyState|Create new project'), + description: s__( + 'GroupsEmptyState|Projects are where you can store your code, access issues, wiki, and other features of Gitlab.', + ), + }, + }, + withoutLinks: { + title: s__('GroupsEmptyState|No subgroups or projects.'), + description: s__( + 'GroupsEmptyState|You do not have necessary permissions to create a subgroup or project in this group. Please contact an owner of this group to create a new subgroup or project.', + ), + }, + }, + linkClasses: [ + 'gl-border', + 'gl-text-decoration-none!', + 'gl-rounded-base', + 'gl-p-7', + 'gl-display-flex', + 'gl-h-full', + 'gl-align-items-center', + 'gl-text-purple-600', + 'gl-hover-bg-gray-50', + ], + inject: [ + 'newSubgroupPath', + 'newProjectPath', + 'newSubgroupIllustration', + 'newProjectIllustration', + 'emptySubgroupIllustration', + 'canCreateSubgroups', + 'canCreateProjects', + ], +}; +</script> + +<template> + <div v-if="canCreateSubgroups || canCreateProjects" class="gl-mt-5"> + <div class="gl-display-flex gl-mx-n3 gl-my-n3 gl-flex-wrap"> + <div v-if="canCreateSubgroups" class="gl-p-3 gl-w-full gl-sm-w-half"> + <gl-link :href="newSubgroupPath" :class="$options.linkClasses"> + <div class="svg-content gl-w-15 gl-flex-shrink-0 gl-mr-5"> + <img :src="newSubgroupIllustration" :alt="$options.i18n.withLinks.subgroup.title" /> + </div> + <div> + <h4 class="gl-reset-color">{{ $options.i18n.withLinks.subgroup.title }}</h4> + <p class="gl-text-body"> + {{ $options.i18n.withLinks.subgroup.description }} + </p> + </div> + </gl-link> + </div> + <div v-if="canCreateProjects" class="gl-p-3 gl-w-full gl-sm-w-half"> + <gl-link :href="newProjectPath" :class="$options.linkClasses"> + <div class="svg-content gl-w-13 gl-flex-shrink-0 gl-mr-5"> + <img :src="newProjectIllustration" :alt="$options.i18n.withLinks.project.title" /> + </div> + <div> + <h4 class="gl-reset-color">{{ $options.i18n.withLinks.project.title }}</h4> + <p class="gl-text-body"> + {{ $options.i18n.withLinks.project.description }} + </p> + </div> + </gl-link> + </div> + </div> + </div> + <gl-empty-state + v-else + class="gl-mt-5" + :title="$options.i18n.withoutLinks.title" + :svg-path="emptySubgroupIllustration" + :description="$options.i18n.withoutLinks.description" + /> +</template> |