Add empty state to followers/following tab, update snippets empty state
What does this MR do and why?
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.
The followers and following sections are built out but do not have empty states yet. The snippets section has an empty state but it doesn't seem to be Pajamas compliant. This MR adds empty state to followers/following sections and updates the snippets section empty state to be pajamas compliant.
Screenshots or screen recordings
Snippets
Viewing profile signed in
Before | After |
---|---|
Viewing profile signed out
Before | After |
---|---|
Following
Viewing profile signed in
Before | After |
---|---|
N/A |
Viewing profile signed out
Before | After |
---|---|
N/A |
Followers
Viewing profile signed in
Before | After |
---|---|
N/A |
Viewing profile signed out
Before | After |
---|---|
N/A |
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)
- Navigate to your profile
- View Snippets, Followers, and Following tabs
- If you need to delete Snippets, Followers, or Following run these commands in the Rails console:
User.find_by_username('root').snippets.delete_all
User.find_by_username('root').followees.delete_all
User.find_by_username('root').followers.delete_all
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.
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.