1 files changed, 56 insertions, 1 deletions

diff --git a/app/assets/javascripts/profile/components/following_tab.vue b/app/assets/javascripts/profile/components/following_tab.vue
index 8ee878e3dcc..66c7ee42a3f 100644
--- a/app/assets/javascripts/profile/components/following_tab.vue
+++ b/app/assets/javascripts/profile/components/following_tab.vue
@@ -1,16 +1,62 @@
 <script>
 import { GlBadge, GlTab } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { getUserFollowing } from '~/rest_api';
+import { createAlert } from '~/alert';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import Follow from './follow.vue';
 
 export default {
   i18n: {
     title: s__('UserProfile|Following'),
+    errorMessage: s__(
+      'UserProfile|An error occurred loading the following. Please refresh the page to try again.',
+    ),
+    currentUserEmptyStateTitle: s__('UserProfile|You are not following other users'),
+    visitorEmptyStateTitle: s__("UserProfile|This user isn't following other users"),
   },
   components: {
     GlBadge,
     GlTab,
+    Follow,
+  },
+  inject: ['followeesCount', 'userId'],
+  data() {
+    return {
+      following: [],
+      loading: true,
+      totalItems: 0,
+      page: 1,
+    };
+  },
+  watch: {
+    page: {
+      async handler() {
+        this.loading = true;
+
+        try {
+          const { data: following, headers } = await getUserFollowing(this.userId, {
+            page: this.page,
+          });
+
+          const { total } = parseIntPagination(normalizeHeaders(headers));
+
+          this.following = following;
+          this.totalItems = total;
+        } catch (error) {
+          createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true });
+        } finally {
+          this.loading = false;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onPaginationInput(page) {
+      this.page = page;
+    },
   },
-  inject: ['followeesCount'],
 };
 </script>
 
@@ -20,5 +66,14 @@ export default {
       <span>{{ $options.i18n.title }}</span>
       <gl-badge size="sm" class="gl-ml-2">{{ followeesCount }}</gl-badge>
     </template>
+    <follow
+      :users="following"
+      :loading="loading"
+      :page="page"
+      :total-items="totalItems"
+      :current-user-empty-state-title="$options.i18n.currentUserEmptyStateTitle"
+      :visitor-empty-state-title="$options.i18n.visitorEmptyStateTitle"
+      @pagination-input="onPaginationInput"
+    />
   </gl-tab>
 </template>