UX feedback when limit reached alert interaction on button click

Problem to Solve:

When the user clicks on the "new feature flag" button when the limit is reached, there is a warning sign saying the limit is reached but the user can still press new flag and there is no user feedback at this point

UX Problem:

https://gitlab.com/gitlab-org/gitlab/uploads/4ef501fc0e19b000a8cecfa5d1001315/Screen_Recording_2020-10-08_at_10.08.45_AM.mov

See more in #254379 (comment 426422874)

Further details:

Follow-up from #254379 (comment 430399203)

@atroschinetz: One question: Is there a concern about users feeling like the UX is broken if they hit the button and perceive nothing has happened if they haven't dismissed the alert? Maybe there's something that could be done when the button is clicked to draw their attention to the alert somehow?

@dimitrieh: I would love to review this in the merge request if possible. My suggestion is to move forward and create an issue for this as a follow up in case we need to iterate.

This issue exists to capture design iteration on this potential UX weirdness.

CC @csouthard not sure if I got all the labels correct here. I couldn't find a "workflow::planning" label... I thought that used to exist? I used workflowplanning breakdown instead.

MVC Proposal:

• Change the flag count badge to a Total Flags / Flag Max badge.
• Add a tooltip that explains the max:
  • Current plan allows for {#} feature flags.
• Disable the New Feature Flag Button when max has been hit
• Remove the dismissible action from the alert and change the content to:
  • You've reached your feature flag limit (#). To add more, delete at least one feature flag, or upgrade to a higher tier.

Badge and Tooltip Addition	header

Implementation guide

For the alert changes:

1. Update the alert copy in feature_flags component here
2. Use helpPagePath to set the link to the documentation

   helpPagePath('operations/feature_flags', {
     anchor: 'maximum-number-of-feature-flags',
   })

3. Use https://about.gitlab.com/pricing/ for pricing link
4. Add a prop :dismissible="false" to the GlAlert to remove the possibility of dismissing the alert
5. Remove the logic related to the alert dismissal (onDismissFeatureFlagsLimitWarning and onNewFeatureFlagCLick methods, shouldShowFeatureFlagsLimitWarning data prop) and use featureFlagsLimitExceeded as a condition to render the alert.
6. Update the related specs.

For the badge changes:

1. Update the badge copy here to include featureFlagsLimit number
2. Add a GlTooltip component to render a tooltip for the feature flag count badge.
3. Update the related specs.

For button changes:

1. Update both mobile and desktop buttons to add disabled attribute, which should rely on the featureFlagsLimitExceeded value.
2. Update the related specs.