Add latest changes from gitlab-org/gitlab@master

3 files changed, 50 insertions, 4 deletions

diff --git a/app/assets/javascripts/groups/components/empty_states/groups_dashboard_empty_state.vue b/app/assets/javascripts/groups/components/empty_states/groups_dashboard_empty_state.vue
new file mode 100644
index 00000000000..470ff45f47a
--- /dev/null
+++ b/app/assets/javascripts/groups/components/empty_states/groups_dashboard_empty_state.vue
@@ -0,0 +1,24 @@
+<script>
+import { GlEmptyState } from '@gitlab/ui';
+
+import { s__ } from '~/locale';
+
+export default {
+  components: { GlEmptyState },
+  inject: ['groupsEmptyStateIllustration'],
+  i18n: {
+    title: s__('GroupsEmptyState|A group is a collection of several projects'),
+    description: s__(
+      "GroupsEmptyState|If you organize your projects under a group, it works like a folder. You can manage your group member's permissions and access to each project in the group.",
+    ),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="$options.i18n.title"
+    :description="$options.i18n.description"
+    :svg-path="groupsEmptyStateIllustration"
+  />
+</template>
diff --git a/app/assets/javascripts/groups/components/empty_states/groups_explore_empty_state.vue b/app/assets/javascripts/groups/components/empty_states/groups_explore_empty_state.vue
new file mode 100644
index 00000000000..f524b769802
--- /dev/null
+++ b/app/assets/javascripts/groups/components/empty_states/groups_explore_empty_state.vue
@@ -0,0 +1,17 @@
+<script>
+import { GlEmptyState } from '@gitlab/ui';
+
+import { __ } from '~/locale';
+
+export default {
+  components: { GlEmptyState },
+  inject: ['groupsEmptyStateIllustration'],
+  i18n: {
+    title: __('No public groups'),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state :title="$options.i18n.title" :svg-path="groupsEmptyStateIllustration" />
+</template>
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index e71ff6d9107..2539d899865 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -13,7 +13,7 @@ import GroupsStore from './store/groups_store';
 
 Vue.use(Translate);
 
-export default () => {
+export default (EmptyStateComponent) => {
   const el = document.getElementById('js-groups-tree');
 
   // eslint-disable-next-line no-new
@@ -36,16 +36,19 @@ export default () => {
     components: {
       GroupsApp,
     },
+    provide() {
+      const { groupsEmptyStateIllustration } = dataset;
+
+      return { groupsEmptyStateIllustration };
+    },
     data() {
       const showSchemaMarkup = parseBoolean(dataset.showSchemaMarkup);
-      const renderEmptyState = parseBoolean(dataset.renderEmptyState);
       const service = new GroupsService(dataset.endpoint);
       const store = new GroupsStore({ hideProjects: true, showSchemaMarkup });
 
       return {
         store,
         service,
-        renderEmptyState,
         loading: true,
       };
     },
@@ -74,7 +77,9 @@ export default () => {
         props: {
           store: this.store,
           service: this.service,
-          renderEmptyState: this.renderEmptyState,
+        },
+        scopedSlots: {
+          'empty-state': () => createElement(EmptyStateComponent),
         },
       });
     },