Move new_dropdown logic from haml to view_model

• Requirements (issue)
• Tasks (epic)
• Full Context Spike MR (permanent draft)
• All MR Parts...
  • Move new_dropdown logic from haml to view_model

What does this MR do?

This MR refactors the logic in new_dropdown.html.haml to a view_model helper (similar to the top_nav_helper) so that it can be re-used by the responsive top nav redesign.

Here's how this new_dropdown_view_model will be reused for the top_nav_responsive_view_model:

https://gitlab.com/gitlab-org/gitlab/-/blob/e84645802ac5c0b9f032abcfdbb7c838516574f6/app/helpers/nav/top_nav_helper.rb#L22

Pinning test!

PLEASE NOTE: This MR uses a pinning test to verify the refactoring of new_dropdown.html.haml. A pinning test is a test that is not committed to master which takes a detailed snapshot of the previous behavior, to verify the new behavior.

To run the pinning test on master, verifying that we've captured the old behavior:

1. Checkout master branch

2. Apply the Add pinning test for _new_dropdown commit changes with:

   git cherry-pick --no-commit $(git log --format="%h" -n 1 --grep="Add pinning test for _new_dropdown" 301143-refactor-new-dropdown-to-view-model)

3. Run the pinning test bundle exec spring rspec ee/spec/views/layouts/header/_new_dropdown.haml_spec.rb:42

To run the pinning test for this MR, verifying that the new behavior matches:

1. Checkout this MR's branch

2. Revert the Remove new_dropdown pinning test commit with:

   git revert --no-commit $(git log --format="%h" -n 1 --grep="Remove new_dropdown pinning test" 301143-refactor-new-dropdown-to-view-model)

3. Run the pinning test bundle exec spring rspec ee/spec/views/layouts/header/_new_dropdown.haml_spec.rb:42

Did the test change after the new behavior?

In this case, the pinning test had to undergo some very trivial changes, such as:

• Reordering data- and class attributes in some elements
• Removing inconsistent whitespace

You can view the specific changes 438dbca2

Screenshots (strongly suggested)

Still works even with experiments 😄

Thanks @cwoolley-gitlab for testing this and providing the screenshot!

Does this MR meet the acceptance criteria?

Conformity

• I have included a changelog entry, or it's not needed. (Does this MR need a changelog?)
• I have added/updated documentation, or it's not needed. (Is documentation required?)
• I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?)
• I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?)
• I have self-reviewed this MR per code review guidelines.
• This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines)
• I have followed the style guides.

Availability and Testing

• I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.)

References

Related to #301143 (closed)