Add latest changes from gitlab-org/gitlab@master

3 files changed, 58 insertions, 3 deletions

diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue
index 76fb13919df..8eede317344 100644
--- a/app/assets/javascripts/profile/components/overview_tab.vue
+++ b/app/assets/javascripts/profile/components/overview_tab.vue
@@ -1,18 +1,44 @@
 <script>
-import { GlTab } from '@gitlab/ui';
+import { GlTab, GlLoadingIcon, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import ProjectsList from '~/vue_shared/components/projects_list/projects_list.vue';
 import ActivityCalendar from './activity_calendar.vue';
 
 export default {
   i18n: {
     title: s__('UserProfile|Overview'),
+    personalProjects: s__('UserProfile|Personal projects'),
+    viewAll: s__('UserProfile|View all'),
+  },
+  components: { GlTab, GlLoadingIcon, GlLink, ActivityCalendar, ProjectsList },
+  props: {
+    personalProjects: {
+      type: Array,
+      required: true,
+    },
+    personalProjectsLoading: {
+      type: Boolean,
+      required: true,
+    },
   },
-  components: { GlTab, ActivityCalendar },
 };
 </script>
 
 <template>
   <gl-tab :title="$options.i18n.title">
     <activity-calendar />
+    <div class="gl-mx-n3 gl-display-flex gl-flex-wrap-wrap">
+      <div class="gl-px-3 gl-w-full gl-lg-w-half"></div>
+      <div class="gl-px-3 gl-w-full gl-lg-w-half" data-testid="personal-projects-section">
+        <div
+          class="gl-display-flex gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
+        >
+          <h4 class="gl-flex-grow-1">{{ $options.i18n.personalProjects }}</h4>
+          <gl-link href="">{{ $options.i18n.viewAll }}</gl-link>
+        </div>
+        <gl-loading-icon v-if="personalProjectsLoading" class="gl-mt-5" size="md" />
+        <projects-list v-else :projects="personalProjects" />
+      </div>
+    </div>
   </gl-tab>
 </template>
diff --git a/app/assets/javascripts/profile/components/profile_tabs.vue b/app/assets/javascripts/profile/components/profile_tabs.vue
index b39bfabb832..25b94d7dc7f 100644
--- a/app/assets/javascripts/profile/components/profile_tabs.vue
+++ b/app/assets/javascripts/profile/components/profile_tabs.vue
@@ -1,6 +1,10 @@
 <script>
 import { GlTabs } from '@gitlab/ui';
 
+import { getUserProjects } from '~/rest_api';
+import { s__ } from '~/locale';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { createAlert } from '~/alert';
 import OverviewTab from './overview_tab.vue';
 import ActivityTab from './activity_tab.vue';
 import GroupsTab from './groups_tab.vue';
@@ -12,6 +16,11 @@ import FollowersTab from './followers_tab.vue';
 import FollowingTab from './following_tab.vue';
 
 export default {
+  i18n: {
+    personalProjectsErrorMessage: s__(
+      'UserProfile|An error occurred loading the personal projects. Please refresh the page to try again.',
+    ),
+  },
   components: {
     GlTabs,
     OverviewTab,
@@ -62,6 +71,22 @@ export default {
       component: FollowingTab,
     },
   ],
+  inject: ['userId'],
+  data() {
+    return {
+      personalProjectsLoading: true,
+      personalProjects: [],
+    };
+  },
+  async mounted() {
+    try {
+      const response = await getUserProjects(this.userId, { per_page: 10 });
+      this.personalProjects = convertObjectPropsToCamelCase(response.data, { deep: true });
+      this.personalProjectsLoading = false;
+    } catch (error) {
+      createAlert({ message: this.$options.i18n.personalProjectsErrorMessage });
+    }
+  },
 };
 </script>
 
@@ -72,6 +97,8 @@ export default {
       v-for="{ key, component } in $options.tabs"
       :key="key"
       class="container-fluid container-limited"
+      :personal-projects="personalProjects"
+      :personal-projects-loading="personalProjectsLoading"
     />
   </gl-tabs>
 </template>
diff --git a/app/assets/javascripts/profile/index.js b/app/assets/javascripts/profile/index.js
index fbe0e3534d8..101e52c873e 100644
--- a/app/assets/javascripts/profile/index.js
+++ b/app/assets/javascripts/profile/index.js
@@ -13,15 +13,17 @@ export const initProfileTabs = () => {
 
   if (!el) return false;
 
-  const { followees, followers, userCalendarPath, utcOffset } = el.dataset;
+  const { followees, followers, userCalendarPath, utcOffset, userId } = el.dataset;
 
   return new Vue({
     el,
+    name: 'ProfileRoot',
     provide: {
       followees: parseInt(followers, 10),
       followers: parseInt(followees, 10),
       userCalendarPath,
       utcOffset,
+      userId,
     },
     render(createElement) {
       return createElement(ProfileTabs);