[Draft] Edit file: Make locked status clearer when user does not have permission to edit locked file
# Context
https://gitlab.com/gitlab-org/gitlab/-/issues/516868
# Problem
Locked state is surfaced in the file page in https://gitlab.com/gitlab-org/gitlab/-/issues/4623. If a user tries to edit a file, there is little to no indication on the Edit file page that the file is locked:
| In-flight: File page | Current: Edit file page |
|----------------------|-------------------------|
|  | {width="3153" height="2063"} |
For users who have permission to modify a locked file (the locker, anyone with Maintainer access), this may not be a huge issue.
However, if users do not have permission to modify a locked file, we do not surface this information about the lock until a user either tries to commit changes, or after a user creates a merge request and looks at the pipeline.
<table>
<tr>
<th></th>
<th>User has permission to commit to branch + permission to unlock file</th>
<th>User does NOT have permission to unlock file</th>
</tr>
<tr>
<td>Default branch</td>
<td>
{width="1240" height="812"}
{width="775" height="336"}
</td>
<td>
{width="1237" height="756"}
{width="1237" height="752"}
* Users cannot commit changes into this branch
</td>
</tr>
<tr>
<td>Non-default branch</td>
<td>
{width="1240" height="812"}
</td>
<td>
{width="1238" height="758"}
{width="1233" height="755"}
{width="1233" height="756"}
* Users can still commit changes into any non-default branch
* Users cannot merge their changes into the default branch
</td>
</tr>
</table>
# Implementation breakdown
<table>
<tr>
<th>Design change</th>
<th>Issue</th>
</tr>
<tr>
<td>
Default branch updates
* Default branch
* Disable the `Replace` and `Delete` buttons for users who do not have permission to unlock a file
</td>
<td>
https://gitlab.com/gitlab-org/gitlab/-/issues/516868
</td>
</tr>
<tr>
<td>
Commit changes modal updates
* Non-default branches
* Update the commit changes modal in the `Replace` `Delete` `Edit` flows to inform users of locking status when they do not have permission to unlock a file
</td>
<td>
https://gitlab.com/gitlab-org/gitlab/-/issues/521439
</td>
</tr>
<tr>
<td>
Edit page updates
* Update the `Edit` page or related flows to inform users of locking status when they do not have permission to unlock a file
</td>
<td>
https://gitlab.com/gitlab-org/gitlab/-/issues/521831 (this)
</td>
</tr>
</table>
# Design proposal \[WIP\]
| | User HAS permission to commit to branch + HAS permission to unlock file | User HAS permission to commit to branch + does NOT have permission to unlock file | User does NOT have permission to commit to branch + does NOT have permission to unlock file |
|--|-------------------------------------------------------------------------|-----------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| Default branch | TBD | TBD | TBD |
| Non-default branch | TBD | TBD | TBD |
##### _TBD @alyssatrinh_
* How can we better surface the lock status on the Edit file page or adjacent flows so users are more aware of system status / permissions they have?
* Would it be more appropriate to surface this information when users create a merge request?
* [:construction: Figma WIP](https://www.figma.com/design/eq2nf3B8MhB9xKrC0VzbPf/branch/orX8SZ91PFudLAKYoTApjL/Repository?m=auto&node-id=5089-2008&t=saHRT3eSEd6lZG2f-1)
issue