1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/organizations/show/components/association_counts.vue b/app/assets/javascripts/organizations/show/components/association_counts.vue
new file mode 100644
index 00000000000..3b312924bd2
--- /dev/null
+++ b/app/assets/javascripts/organizations/show/components/association_counts.vue
@@ -0,0 +1,71 @@
+<script>
+import { __, s__ } from '~/locale';
+import { RESOURCE_TYPE_GROUPS, RESOURCE_TYPE_PROJECTS } from '../../constants';
+import AssociationCountCard from './association_count_card.vue';
+
+export default {
+  name: 'AssociationCounts',
+  i18n: {
+    groups: __('Groups'),
+    projects: __('Projects'),
+    users: __('Users'),
+    viewAll: __('View all'),
+    manage: s__('Organization|Manage'),
+  },
+  components: { AssociationCountCard },
+  props: {
+    associationCounts: {
+      type: Object,
+      required: true,
+    },
+    groupsAndProjectsOrganizationPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    groupsLinkHref() {
+      return `${this.groupsAndProjectsOrganizationPath}?display=${RESOURCE_TYPE_GROUPS}`;
+    },
+    projectsLinkHref() {
+      return `${this.groupsAndProjectsOrganizationPath}?display=${RESOURCE_TYPE_PROJECTS}`;
+    },
+    associationCountCards() {
+      return [
+        {
+          title: this.$options.i18n.groups,
+          iconName: 'group',
+          count: this.associationCounts.groups,
+          linkHref: this.groupsLinkHref,
+        },
+        {
+          title: this.$options.i18n.projects,
+          iconName: 'project',
+          count: this.associationCounts.projects,
+          linkHref: this.projectsLinkHref,
+        },
+        {
+          title: this.$options.i18n.users,
+          iconName: 'users',
+          count: this.associationCounts.users,
+          linkText: this.$options.i18n.manage,
+          // TODO: update `linkHref` prop to point to users route
+          // https://gitlab.com/gitlab-org/gitlab/-/issues/409313
+          linkHref: '/',
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-grid gl-lg-grid-template-columns-4 gl-mt-5 gl-gap-5">
+    <association-count-card
+      v-for="props in associationCountCards"
+      :key="props.title"
+      v-bind="props"
+      class="gl-w-full"
+    />
+  </div>
+</template>