Skip to content

Add support for created event to Vue version of contribution events

Peter Hegman requested to merge 378677-add-created-event into master

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 continues to build out the Activity section on the Overview tab.

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 adds the created contribution event. In future MRs I will be iteratively adding support for the other contribution event types.

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
Screenshot_2023-07-13_at_12.46.59_PM Screenshot_2023-07-13_at_12.47.46_PM

How to set up and validate locally

  1. Disable the super sidebar if you have it enabled. The Vue profile does not yet support it. Will be supported in #389842
  2. Sign in as root user
  3. Create a public group
  4. Create a public project in that group. Make note of the project ID (shown on project overview page)
  5. Open the Rails console
    • bin/rails console
  6. Enable the profile_tabs_vue feature flag
    • Feature.enable(:profile_tabs_vue)
  7. Paste the following into the Rails console. Change the <project ID from previous step> to the project ID noted in step 3. Hit enter.
user = User.find_by_username('root')
project = Project.find(<project ID from previous step>)
group = project.group
issue = FactoryBot.create(:issue, project: project)
merge_request = FactoryBot.create(:merge_request, source_project: project, target_project: project)
milestone = FactoryBot.create(:milestone, project: project)
incident = FactoryBot.create(:work_item, :incident, author: user, project: project)
task = FactoryBot.create(:work_item, :task, author: user, project: project)
epic = FactoryBot.create(:epic, group: group, author: user)
test_case = FactoryBot.create(:work_item, :test_case, author: user, project: project)
requirement = FactoryBot.create(:work_item, :requirement, author: user, project: project)
objective = FactoryBot.create(:work_item, :objective, author: user, project: project)
key_result = FactoryBot.create(:work_item, :key_result, author: user, project: project)

created_issue_event = FactoryBot.create(:event, :created, author: user, project: project, target: issue)
created_milestone_event = FactoryBot.create(:event, :created, author: user, project: project, target: milestone)
created_incident_event = FactoryBot.create(:event, :created, :for_work_item, author: user, project: project, target: incident)
created_epic_event = FactoryBot.create(:event, :created, author: user, project: nil, group: group, target: epic)
created_test_case_event = FactoryBot.create(:event, :created, :for_work_item, author: user, project: project, target: test_case)
created_requirement_event = FactoryBot.create(:event, :created, :for_work_item, author: user, project: project, target: requirement)
created_objective_event = FactoryBot.create(:event, :created, :for_work_item, author: user, project: project, target: objective)
created_key_result_event = FactoryBot.create(:event, :created, :for_work_item, author: user, project: project, target: key_result)
  1. We need to create the design and Wiki events manually.
  2. Navigate to your project -> Plan -> Wiki. Create a page
  3. Navigate to your project -> Isssues -> choose an issue
  4. Upload a design to that issue
  5. The Activity section on the overview tab only shows 10 events. The activity section on the Activity tab will show all events with pagination. In order to see all of the events for this MR we need to temporarily set app/assets/javascripts/profile/components/overview_tab.vue#L43 to 20
  6. Navigate to http://127.0.0.1:3000/root. All the events should be shown.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports

Loading