Setup activity section on Vue version of user profile
What does this MR do and why?
Related to #378677 (closed)
In &9056 we are migrating the user profile from HAML/jQuery to Vue. This is a large migration so we are splitting it up into many sections. This MR starts to build out the Activity
section on the Overview
tab.
Engineering note: There are many contribution events that we will need to support. These are documented in https://docs.gitlab.com/ee/user/profile/contributions_calendar.html#user-contribution-events. This MR sets up the scaffolding and creates the Vue component for one of the more simple events (approved
). I decided to add the approved
event in this MR to add more context into how each event type will be rendered. In future MRs I will be iteratively adding support for the other event types. All event components will extend ~/contribution_events/components/contribution_event/contribution_event_base.vue
.
UX note: There is currently an incorrect bottom border in the tabs. This is due to a recent change in !118597 (merged). We will be removing the tabs and moving the navigation into the new sidebar in #389842. By removing the tabs we will be able to fix this bug and because this is behind a feature flag I am going to leave it as-is for now.
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
- Open the rails console
bin/rails console
- Enable the
profile_tabs_vue
feature flagFeature.enable(:profile_tabs_vue)
- Run the following commands to create an
approved
contribution eventuser = User.find(1)
merge_request = MergeRequest.first
project = merge_request.project
FactoryBot.create(:event, :approved, author: user, project: project, target: merge_request)
- Navigate to your profile
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.