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

This issue describes a plan to deprecate the obsolete <gl-button> implementation and migrate all instances of that component to the new <gl-button> implementation.

Approach (preferred): Organize a button and dropdown migration effort

Goals

  • Merge button and dropdown components without introducing new abstractions.
  • Migrate all <gl-button> and <gl-dropdown> 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

#### `app/assets/javascripts/monitoring/components/dashboard.vue`

- Replace `<gl-deprecated-button variant="primary" />` with `<gl-button />`
- Replace `<gl-deprecated-button variant="outline-success" />` with `<gl-button variant="success" category="secondary" />`
  • Indicate that each file should be migrated in a separate Merge Request. The Merge Request should contain before/after screenshots of each button migration for easier UX review.
  • Create an issue for each file and collect those issues in an epic. Creating these issues is something we can likely automate.
  • Request in the #frontend channel, help on closing those issues.
  • Once all the issues are closed, delete the <gl-deprecated-button> component. !1908 (merged)

Follow the same strategy with the dropdown component.

Good to have

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

Done

Edited by Paul Gascou-Vaillancourt