92 lines
2.9 KiB
Vue
92 lines
2.9 KiB
Vue
<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>
|