Merge gl-dropdown with gl-new-dropdown and make sure gitlab is updated with the new dropdown component that conforms to the design system

This issue describes a plan to deprecate the obsolete GlDropdown implementation and migrate all instances of that component to the new GlDropdown implementation.

Approach: Organize a dropdown migration effort

Goals

• Merge dropdown component without introducing new abstractions.
• Migrate all GlDropdown instances incrementally.

Why

• It is a boring and predictable solution.
• We can break down the effort into multiple developers.
• It is a proven approach. It worked pretty well with the BootstrapVue upgrade. It’s also worked well with the Jestsodus and lodash projects.

How

• Rename the current GlDropdown component to GlDeprecatedDropdown.
  • To avoid breaking master in consuming projects, we should keep exporting GlDropdown as both GlDropdown AND GlDeprecatedDropdown. Doing this adds an additional step to remove the deprecated GlDropdown export, but it gives us more breathing room to replace instances of GlDropdown with GlDeprecatedDropdown.
  • Update all GitLab UI components that rely on GlDropdown so that they use GlDeprecatedDropdown instead.
• When the change is released, migrate GlDropdown to GlDeprecatedDropdown in consuming projects:
  • GitLab
  • Customer Portal
  • Status Page
• Communicate those changes in #frontend and #frontend_maintainers and during the FE weekly call.
• BREAKING CHANGE Remove the deprecated GlDropdown export once we're sure that it's safe to do so (can potentially be done together with the next step).
• Rename GlNewDropdown to GlDropdown.
  • Here again, we want to make sure not to break master in consuming projects by keeping the GlNewDropdown export along with the new GlDropdown export.
  • Update all GitLab UI components that rely on GlNewDropdown so that they use GlDropdown instead.
• When the change is released, migrate GlNewDropdown to GlDropdown in consuming projects:
  • GitLab
  • Customer Portal
  • Status Page
• Communicate those changes in #frontend and #frontend_maintainers and during the FE weekly call.
• BREAKING CHANGE Remove the GlNewDropdown export once we're sure that it's safe to do so.
• Create an epic to collect all issues to replace GlDeprecatedDropdown with GlDropdown.
• Create an issue for each file that contain instances of GlDeprecatedDropdown. You can use an automation script to create these issues. Document the following instructions in the issue:
  • Indicate that each file should be migrated in a separate Merge Request.
  • The Merge Request should contain before/after screenshots of each dropdown migration for easier UX review.
  • The Merge Request should be reviewed by a Product Designer with domain expertise in dropdowns.
• Request in the #frontend channel, help on closing those issues.
• Once all the issues are closed, delete the GlDeprecatedDropdown component.

Follow the same strategy with the dropdown component.

Good to haves

• Provide a list of codemod expressions to facilitate the migration effort.
• Implement an ESLint rule that warns about the usage of the deprecated dropdown component in a Vue file.

Done ✨