search

bcgov / api-services-portal

API Services Portal provides a multi-tenant frontend integrating API Gateway and Authorization services from Kong CE and Keycloak.
https://api.gov.bc.ca
Apache License 2.0
22 stars 7 forks source link

Make the error state of the Edit display name input more descriptive #1176

Closed timng-bcgov closed 2 months ago

timng-bcgov commented 2 months ago

API Services Portal Issue

User Story

As an API provider,
I want to understand the requirements of a Gateway display name when editing it in the Services Portal
so that I can successfully update the Gateway display name.

Test Case

ENV

TESTCASE

Create a Gateway, navigate to the details page (My Gateways > Gateway) and select the Edit button beside the current display name. Interact with the form input and provide an updated display name.

EXPECTED

Inputting a display name that does not satisfy the requirements results in an error state and an input description with the requirements to appear.

ACTUAL

Providing a display name (>3 characters) that does not satisfy the requirements results in the following toast message only after the form is submitted: image

No updates to the form input are present.

Notes

The error state is currently displayed when the input name is less than 3 characters.

image

The Save action in the dialog is also disabled.

image

Save button is invisible on hover when disabled

Another issue. See image above

Cancel does not clear

Another small issue to address: if you click cancel, it does not clear the text in the input. Expected would be to reset the input to the current display name.

rustyjux commented 2 months ago

so is the missing piece more validation (like to include special characters) in the front end?

timng-bcgov commented 2 months ago

I think so, looks like there is only validation for >3 characters in the component right now.

timng-bcgov commented 2 months ago

And my screenshot also conveniently illustrates something weird with the hover state of the disabled Save button (it's invisible?), though I'm not sure what's going on as it looks like it just uses the isDisabled prop from the Chakra button.

rustyjux commented 2 months ago

And my screenshot also conveniently illustrates something weird with the hover state of the disabled Save button (it's invisible?), though I'm not sure what's going on as it looks like it just uses the isDisabled prop from the Chakra button.

Whoa I didn't even understand what you were showing until I looked at it! Oddly this only happened once for me, and now it's the expected: image

Another bug with the edit dialog (which I will add to the description) - if you click cancel, it does not clear the text in the input.

rustyjux commented 2 months ago

@Elson9 @ikethecoder oops, I'm bad at Git and made some commits on the wrong branch. I was then trying to cherry pick them over to a new feature branch but they ended up on dev. 🤦‍♂️

@timng-bcgov please also review on dev. Should be live shortly.

Elson9 commented 2 months ago

Tested out in dev, looks good