1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/project_folder.vue b/app/assets/javascripts/groups/components/project_folder.vue
new file mode 100644
index 00000000000..15128264516
--- /dev/null
+++ b/app/assets/javascripts/groups/components/project_folder.vue
@@ -0,0 +1,67 @@
+<script>
+import { MAX_PROJECT_COUNT } from '../constants';
+import projectItem from './project_item.vue';
+import identicon from '../../vue_shared/components/identicon.vue';
+
+export default {
+  components: {
+    projectItem,
+    identicon,
+  },
+  props: {
+    groupPath: {
+      type: String,
+      required: true,
+    },
+    projects: {
+      type: Array,
+      required: true,
+    },
+    hasSiblingGroups: {
+      type: Boolean,
+      required: true,
+    },
+    projectCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    hasMoreItems() {
+      return this.projectCount > MAX_PROJECT_COUNT;
+    },
+    countOfMoreProjects() {
+      return this.projectCount - MAX_PROJECT_COUNT;
+    },
+    moreProjectsLinkText() {
+      // eslint-disable-next-line no-underscore-dangle
+      return `${this.countOfMoreProjects} more ${this.n__('project', 'projects', this.countOfMoreProjects)}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <ul
+    class="content-list group-list-tree project-list"
+    :class="{ 'has-sibling-groups': hasSiblingGroups, 'has-more-items': hasMoreItems }"
+  >
+    <project-item
+      v-for="(project, index) in projects"
+      :key="index"
+      :project="project"
+    />
+    <li
+      v-if="hasMoreItems"
+      class="has-more-items-link"
+    >
+      <a
+        :href="this.groupPath">
+        <i
+          class="fa fa-external-link"
+          aria-hidden="true"/>
+        {{moreProjectsLinkText}}
+      </a>
+    </li>
+  </ul>
+</template>