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>