fix: include a link and more useful error details for 403 response codes #16644
Conversation
coderd/httpapi/httpapi.go
Outdated
| @@ -154,6 +154,7 @@ func ResourceNotFound(rw http.ResponseWriter) { | |||
| func Forbidden(rw http.ResponseWriter) { | |||
| Write(context.Background(), rw, http.StatusForbidden, codersdk.Response{ | |||
| Message: "Forbidden.", | |||
| Detail: "You don't have permission to view this page. If you believe this is a mistake, please contact your administrator or try signing in with different credentials.", | |||
There was a problem hiding this comment.
| Detail: "You don't have permission to view this page. If you believe this is a mistake, please contact your administrator or try signing in with different credentials.", | |
| Detail: "You don't have permission to view this content. If you believe this is a mistake, please contact your administrator or try signing in with different credentials.", |
thinking of this in the context of using the CLI or the API directly, "page" doesn't make a ton of sense
| <> | ||
| <AlertTitle>{message}</AlertTitle> | ||
| <AlertDetail> | ||
| {detail}{" "} |
There was a problem hiding this comment.
I know theoretically we're now always setting Detail for 403 responses, but what if it comes back undefined from some endpoint that doesn't use httpapi.Forbidden when it should? do we care about handling that? maybe we don't and it's fine 🤷♀️
|
|
||
| return ( | ||
| <Alert severity="error" {...alertProps}> | ||
| {body()} |
There was a problem hiding this comment.
Nit: I don't know your opinion on ternaries, but I feel like the typical React way of doing this would be to inline everything into a single return statement:
return (
<Alert severity="error" {...alterProps}>
{status === 403
? (
<-- JSX -->
)
: detail ?
(
<-- JSX -->
)
: (
message
)
</Alert>
);Prettier/Biome should be able to format the ternaries to make them more readable than this, but you get the idea
There was a problem hiding this comment.
I'm usually pro ternary but I've been trying to match other general vibes of the code base. Generally though I think I've started to learn towards if the logic is more than an "if/else" it's more readable being broken out
| // Additionally since the error messages and details from the server can be | ||
| // missing or confusing for an end user we render a friendlier message | ||
| // regardless of the response from the server. | ||
| if (status === 403) { |
There was a problem hiding this comment.
I'm okay with this as a baseline solution, but do you know if there are ever cases where it makes sense to redirect the user to a page more relevant to what they were trying to access?
There was a problem hiding this comment.
Yeah I agree, and I'm actually working on a PR right now that will make RequirePermissions a bit more user friendly in that way. But this change is still relevant in the cases where we don't wrap a portion of the page in RequirePermissions
Currently if a user gets to a page they don't have permission to view they're greeted with a vague error alert and no actionable items. This PR adds a link back to /workspaces within the alert as well as more helpful error details.
Before:
After:
