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:
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.
- You've reached your feature flag limit (
Badge and Tooltip Addition | header |
---|---|
![]() |
![]() |
Implementation guide
For the alert changes:
- Update the alert copy in
feature_flags component
here - Use
helpPagePath
to set the link to the documentationhelpPagePath('operations/feature_flags', { anchor: 'maximum-number-of-feature-flags', })
- Use
https://about.gitlab.com/pricing/
for pricing link - Add a prop
:dismissible="false"
to theGlAlert
to remove the possibility of dismissing the alert - Remove the logic related to the alert dismissal (
onDismissFeatureFlagsLimitWarning
andonNewFeatureFlagCLick
methods,shouldShowFeatureFlagsLimitWarning
data prop) and usefeatureFlagsLimitExceeded
as a condition to render the alert. - Update the related specs.
For the badge changes:
- Update the badge copy here to include
featureFlagsLimit
number - Add a
GlTooltip
component to render a tooltip for the feature flag count badge. - Update the related specs.