Add latest changes from gitlab-org/gitlab@master

4 files changed, 148 insertions, 7 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index cd5521c599e..0bd7371d39b 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -17,11 +17,6 @@ export default {
     GlLoadingIcon,
     EmptyState,
   },
-  inject: {
-    renderEmptyState: {
-      default: false,
-    },
-  },
   props: {
     action: {
       type: String,
@@ -45,6 +40,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    renderEmptyState: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -224,6 +224,9 @@ export default {
     },
     showLegacyEmptyState() {
       const { containerEl } = this;
+
+      if (!containerEl) return;
+
       const contentListEl = containerEl.querySelector(CONTENT_LIST_CLASS);
       const emptyStateEl = containerEl.querySelector('.empty-state');
 
diff --git a/app/assets/javascripts/groups/components/overview_tabs.vue b/app/assets/javascripts/groups/components/overview_tabs.vue
new file mode 100644
index 00000000000..53efb354f5c
--- /dev/null
+++ b/app/assets/javascripts/groups/components/overview_tabs.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlTabs, GlTab } from '@gitlab/ui';
+import { __ } from '~/locale';
+import GroupsStore from '../store/groups_store';
+import GroupsService from '../service/groups_service';
+import {
+  ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
+  ACTIVE_TAB_SHARED,
+  ACTIVE_TAB_ARCHIVED,
+} from '../constants';
+import GroupsApp from './app.vue';
+
+export default {
+  components: { GlTabs, GlTab, GroupsApp },
+  inject: ['endpoints'],
+  data() {
+    return {
+      tabs: [
+        {
+          title: this.$options.i18n.subgroupsAndProjects,
+          key: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
+          renderEmptyState: true,
+          lazy: false,
+          service: new GroupsService(this.endpoints[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]),
+          store: new GroupsStore({ showSchemaMarkup: true }),
+        },
+        {
+          title: this.$options.i18n.sharedProjects,
+          key: ACTIVE_TAB_SHARED,
+          renderEmptyState: false,
+          lazy: true,
+          service: new GroupsService(this.endpoints[ACTIVE_TAB_SHARED]),
+          store: new GroupsStore(),
+        },
+        {
+          title: this.$options.i18n.archivedProjects,
+          key: ACTIVE_TAB_ARCHIVED,
+          renderEmptyState: false,
+          lazy: true,
+          service: new GroupsService(this.endpoints[ACTIVE_TAB_ARCHIVED]),
+          store: new GroupsStore(),
+        },
+      ],
+      activeTabIndex: 0,
+    };
+  },
+  methods: {
+    handleTabInput(tabIndex) {
+      this.activeTabIndex = tabIndex;
+
+      const tab = this.tabs[tabIndex];
+      tab.lazy = false;
+    },
+  },
+  i18n: {
+    subgroupsAndProjects: __('Subgroups and projects'),
+    sharedProjects: __('Shared projects'),
+    archivedProjects: __('Archived projects'),
+  },
+};
+</script>
+
+<template>
+  <gl-tabs content-class="gl-pt-0" :value="activeTabIndex" @input="handleTabInput">
+    <gl-tab
+      v-for="{ key, title, renderEmptyState, lazy, service, store } in tabs"
+      :key="key"
+      :title="title"
+      :lazy="lazy"
+    >
+      <groups-app
+        :action="key"
+        :service="service"
+        :store="store"
+        :hide-projects="false"
+        :render-empty-state="renderEmptyState"
+      />
+    </gl-tab>
+  </gl-tabs>
+</template>
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index dc2909f2621..c3bf3f28509 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -52,7 +52,6 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => {
           newSubgroupIllustration,
           newProjectIllustration,
           emptySubgroupIllustration,
-          renderEmptyState,
           canCreateSubgroups,
           canCreateProjects,
           currentGroupVisibility,
@@ -65,7 +64,6 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => {
         newSubgroupIllustration,
         newProjectIllustration,
         emptySubgroupIllustration,
-        renderEmptyState: parseBoolean(renderEmptyState),
         canCreateSubgroups: parseBoolean(canCreateSubgroups),
         canCreateProjects: parseBoolean(canCreateProjects),
         currentGroupVisibility,
@@ -75,6 +73,7 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => {
       const { dataset } = dataEl || this.$options.el;
       const hideProjects = parseBoolean(dataset.hideProjects);
       const showSchemaMarkup = parseBoolean(dataset.showSchemaMarkup);
+      const renderEmptyState = parseBoolean(dataset.renderEmptyState);
       const service = new GroupsService(endpoint || dataset.endpoint);
       const store = new GroupsStore({ hideProjects, showSchemaMarkup });
 
@@ -83,6 +82,7 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => {
         store,
         service,
         hideProjects,
+        renderEmptyState,
         loading: true,
         containerId,
       };
@@ -119,6 +119,7 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => {
           store: this.store,
           service: this.service,
           hideProjects: this.hideProjects,
+          renderEmptyState: this.renderEmptyState,
           containerId: this.containerId,
         },
       });
diff --git a/app/assets/javascripts/groups/init_overview_tabs.js b/app/assets/javascripts/groups/init_overview_tabs.js
new file mode 100644
index 00000000000..5f568d10a42
--- /dev/null
+++ b/app/assets/javascripts/groups/init_overview_tabs.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import GroupFolder from './components/group_folder.vue';
+import GroupItem from './components/group_item.vue';
+import {
+  ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
+  ACTIVE_TAB_SHARED,
+  ACTIVE_TAB_ARCHIVED,
+} from './constants';
+import OverviewTabs from './components/overview_tabs.vue';
+
+export const initGroupOverviewTabs = () => {
+  const el = document.getElementById('js-group-overview-tabs');
+
+  if (!el) return false;
+
+  Vue.component('GroupFolder', GroupFolder);
+  Vue.component('GroupItem', GroupItem);
+  Vue.use(GlToast);
+
+  const {
+    newSubgroupPath,
+    newProjectPath,
+    newSubgroupIllustration,
+    newProjectIllustration,
+    emptySubgroupIllustration,
+    canCreateSubgroups,
+    canCreateProjects,
+    currentGroupVisibility,
+    subgroupsAndProjectsEndpoint,
+    sharedProjectsEndpoint,
+    archivedProjectsEndpoint,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      newSubgroupPath,
+      newProjectPath,
+      newSubgroupIllustration,
+      newProjectIllustration,
+      emptySubgroupIllustration,
+      canCreateSubgroups: parseBoolean(canCreateSubgroups),
+      canCreateProjects: parseBoolean(canCreateProjects),
+      currentGroupVisibility,
+      endpoints: {
+        [ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]: subgroupsAndProjectsEndpoint,
+        [ACTIVE_TAB_SHARED]: sharedProjectsEndpoint,
+        [ACTIVE_TAB_ARCHIVED]: archivedProjectsEndpoint,
+      },
+    },
+    render(createElement) {
+      return createElement(OverviewTabs);
+    },
+  });
+};