Skip to content

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
Screenshot_2023-07-10_at_11.35.22_AM Screenshot_2023-07-13_at_8.46.02_AM

Viewing profile signed out

Before After
Screenshot_2023-07-10_at_11.35.22_AM Screenshot_2023-07-13_at_1.45.01_PM

Following

Viewing profile signed in

Before After
N/A Screenshot_2023-07-12_at_8.38.57_AM

Viewing profile signed out

Before After
N/A Screenshot_2023-07-12_at_8.39.53_AM

Followers

Viewing profile signed in

Before After
N/A Screenshot_2023-07-12_at_8.38.49_AM

Viewing profile signed out

Before After
N/A Screenshot_2023-07-12_at_8.39.44_AM

How to set up and validate locally

  1. Open the rails console
    • bin/rails console
  2. Enable the profile_tabs_vue feature flag
    • Feature.enable(:profile_tabs_vue)
  3. Navigate to your profile
  4. View Snippets, Followers, and Following tabs
  5. 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.

Edited by Peter Hegman

Merge request reports