Organization level activity page
Problem
As part of 🎨 Design: Navigating within organizations (#396719 - closed), we decided there would be an activity page for organizations. What should this look like?
Some initial sketches #396719 (comment 1344205427)
Design
The activity page for organizations could follow the pattern for the group activity page. However, rather than using tabs, we'll introduce a filtered search to surface the different kinds of activity.
For a first pass, the only filter will be for contribution type, and will allow people to filter by merge requests, issues, milestones, epics, snippets, project membership, design, wiki, project and repository.
In future, we could add an additional filter for event type, and have the filter options change based upon whatever is selected first. Possible options could include created, closed, approved, commented, deleted (destroyed), joined, left, membership expiration, merged, reopened, pushed. This would ultimately allow users to filter by, for example "all the events for issues that were closed" or "all the events for merge requests that were commented on".
Empty state | Populated state (showing "all" activity, with no filters applied) | Filter 1 | Filter 2 | Filter 3 |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
For the empty state, we can use the same illustration as on the group activity page; same would be true for the loading state.
Note, as per discussion with the paper cuts team in #415041 (comment 1508596546), the designs above include the following updates from the current activity page views:
- 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.
Implementation guide
- Setup route and controller. See !132712 (merged) for an example
- Create
app/assets/javascripts/organizations/activity/components/app.vue
- In
app.vue
perform API request and renderapp/assets/javascripts/contribution_events/components/contribution_events.vue
- Tweak styling to match the designs above. Don't worry about the styling of the component used on the profile page because that is behind a disabled feature flag. We can adjust styling when we resume work on &9056
- Use
app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
to render the filtered search bar. - Use
GlEmptyState
for empty state.