Show can not push to branch contextual information in blob commit change modal

Context: !168992 (comment 2158983336) | #444302 (closed)

Design question

The commit changes modal was updated as part of #444302 (closed). When users do not have necessary permissions or role to commit changes to a protected branch, how do we display that UI to users? Should we disable/hide UI that users don't have access to?

Current state

Current commit modal (permission to commit on current branch) Current commit modal (no permission to commit on current branch)
yes-permissions.jpg no-permissions-current.jpg

Original idea

!168992 (comment 2158983336)

Maybe for a future iteration we could change the behavior or add a contextual message. For example, if a user does not have the necessary permissions or role to commit changes to a protected branch:

  • Surround the target branch field in a red border.
  • If the master branch is selected and a user does not have permission to commit changes: Commit to a different target branch. See [link to protected branches].

Pajamas Guidelines

Pajamas says:

Hide an element if a user doesn't need access to it.
Disable an element with the disabled attribute if the user lacks permission to interact with it, but still needs to know it exists. If an element is already populated, but the user doesn't have permission to edit it, use the readonly attribute.

But also says:

A feature is hidden when the user shouldn't have access to it due to a lack of permissions. Hiding the feature is recommended because the user doesn't need to be aware of the functionality, and there is no UI that would allow them to obtain access. For example, we should hide the delete branch button if the user's role does not allow deletion of branches

Proposal after discussion

After discussion, the following proposal is recommended because this solution:

  • Is less cluttered
  • Communicates system status
  • Makes users aware of why they can't push to current branch

Proposed commit modal (no permission to commit on current branch)

v2.jpg

Learn more url

Edited by Alyssa Trinh