diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-13 12:10:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-13 12:10:22 +0300 |
commit | 10e15ac3c2798956ff6a43d7b36bdf86c68aa817 (patch) | |
tree | 491a448439d1c2f43258d0418c53e8cc00b51039 /app/assets/javascripts/profile | |
parent | 1cd5d53f92b07b0be71b6c2d9fdfa7cf07221890 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/profile')
-rw-r--r-- | app/assets/javascripts/profile/components/overview_tab.vue | 45 | ||||
-rw-r--r-- | app/assets/javascripts/profile/index.js | 2 |
2 files changed, 43 insertions, 4 deletions
diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue index 21f8a2d3500..8cfa3fb3eea 100644 --- a/app/assets/javascripts/profile/components/overview_tab.vue +++ b/app/assets/javascripts/profile/components/overview_tab.vue @@ -1,16 +1,24 @@ <script> import { GlTab, GlLoadingIcon, GlLink } from '@gitlab/ui'; +import axios from '~/lib/utils/axios_utils'; +import { createAlert } from '~/alert'; import { s__ } from '~/locale'; import ProjectsList from '~/vue_shared/components/projects_list/projects_list.vue'; +import ContributionEvents from '~/contribution_events/components/contribution_events.vue'; import ActivityCalendar from './activity_calendar.vue'; export default { i18n: { title: s__('UserProfile|Overview'), personalProjects: s__('UserProfile|Personal projects'), + activity: s__('UserProfile|Activity'), viewAll: s__('UserProfile|View all'), + eventsErrorMessage: s__( + 'UserProfile|An error occurred loading the activity. Please refresh the page to try again.', + ), }, - components: { GlTab, GlLoadingIcon, GlLink, ActivityCalendar, ProjectsList }, + components: { GlTab, GlLoadingIcon, GlLink, ActivityCalendar, ProjectsList, ContributionEvents }, + inject: ['userActivityPath'], props: { personalProjects: { type: Array, @@ -21,15 +29,44 @@ export default { required: true, }, }, + data() { + return { + events: [], + eventsLoading: false, + }; + }, + async mounted() { + this.eventsLoading = true; + + try { + const { data: events } = await axios.get(this.userActivityPath, { + params: { limit: 10 }, + }); + this.events = events; + } catch (error) { + createAlert({ message: this.$options.i18n.eventsErrorMessage, error, captureError: true }); + } finally { + this.eventsLoading = false; + } + }, }; </script> <template> <gl-tab :title="$options.i18n.title"> <activity-calendar /> - <div class="gl-mx-n3 gl-display-flex gl-flex-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-mx-n5 gl-display-flex gl-flex-wrap"> + <div class="gl-px-5 gl-w-full gl-lg-w-half" data-testid="activity-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.activity }}</h4> + <gl-link href="">{{ $options.i18n.viewAll }}</gl-link> + </div> + <gl-loading-icon v-if="eventsLoading" class="gl-mt-5" size="md" /> + <contribution-events v-else :events="events" /> + </div> + <div class="gl-px-5 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" > diff --git a/app/assets/javascripts/profile/index.js b/app/assets/javascripts/profile/index.js index 70c60c2d884..198ffdb434b 100644 --- a/app/assets/javascripts/profile/index.js +++ b/app/assets/javascripts/profile/index.js @@ -17,6 +17,7 @@ export const initProfileTabs = () => { followeesCount, followersCount, userCalendarPath, + userActivityPath, utcOffset, userId, snippetsEmptyState, @@ -34,6 +35,7 @@ export const initProfileTabs = () => { followeesCount: parseInt(followeesCount, 10), followersCount: parseInt(followersCount, 10), userCalendarPath, + userActivityPath, utcOffset, userId, snippetsEmptyState, |