1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<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
:title="$options.i18n.withoutLinks.title"
:svg-path="emptySubgroupIllustration"
:description="$options.i18n.withoutLinks.description"
/>
</template>
|
