Organizations Activity - Landing

What does this MR do and why?

Work towards #415041
Important: This change is behind a feature flag ui_for_organizations
Important: This may break some of the UI for the partially implemented User Profile in Vue, however, we are opting to fix this at a later date as this was never fully developed. Please see #415041 (comment 1863422528)

This change is the first pass at creating an Activity page for Organizations. We are utilizing a partially implemented shared component from the User Profile migration and further implementing it for the Organizations scope with the intention to go back and fix User Profile migration later.

This change adds a component that fetches data, supports compact pagination and makes some UX tweaks described here.

UX Tweaks

• Add 16px of padding at the edges of the rows (rather than content going all the way to the edges).
• Decrease the space between the user name and the content below it to 4px.
• Ensure the grey sub-text is grey-500/gl-text-secondary and 12px.
• Have all icons grey, getting rid of the multi-colored icons on this page.

Screenshots or screen recordings

With Data	Empty State

Pagination demo

Screen_Recording_2024-04-18_at_2.36.30_PM

How to set up and validate locally

Setup Organizations

important: You only need to do this in your GDK if you haven't yet!

1. Access rails c
2. Enable Feature Flag Feature.enable(:ui_for_organizations)
3. Create the default organization and add root to it

you = User.find_by_username('root')
default_organization = Organizations::Organization.default_organization
Organizations::OrganizationUser.create!(organization_id: default_organization.id, user_id: you.id)

Testing

1. Navigate to the GDK home page ex: 127.0.0.1:3000/
2. Click Organizations in the sidebar
3. Click the Default Organization
4. Click the Manage -> Activity in the sidebar
5. Ensure results appear
6. Ensure pagination works

Related to #415041