[UI] Hooks: Disable "save" button unless some values have changed about taskcluster HOT 6 CLOSED

Thanks a lot. Will start working on it and keep u posted.

from taskcluster.

@mitchhentges This should now be fixed. Thanks again for creating the issue. If you have a similar problem with other views of the new site, feel free to create another issue :)

from taskcluster.

I could disable the "Save Hook" button whenever the hook is unchanged but that would create a second problem:

1. User clicks on "Save Hook"
2. The button becomes disabled while the request hasn't been fulfilled yet
3. Once the hook is saved, the button will remain disabled since there are no new changes. The user is even more confused about whether the hook was saved.

Solution: Send a confirmation (brief message at the bottom of the screen) when the hook is saved and disable the button if no there's no unsaved changes.

from taskcluster.

I think a confirmation would be useful, but I don't think that it's super necessary: I've seen other applications disable a save button immediately upon it being clicked. The only concern would be if I click it, it becomes disabled, and I close the tab/the backend fails but I don't realize that the save didn't complete.

Also, if you leave the button un-disabled until the request finishes, then you have the following hypothetical issue:

1. User clicks on "Save Hook"
2. Backend is running slow today, it's taking time (> 1s) to save hook
3. User hasn't received any feedback that clicking the button has done anything. They click it again (maybe multiple times)
4. Multiple requests are made to save the hook, increasing load
5. After some time, all the requests finish, and the user is spammed with $n confirmations that the hook was saved

Perhaps a good compromise would be:

1. User clicks on "Save Hook"
2. Button disabled
3. Upon the server responding, a confirmation is shown (success/fail)

(To super bikeshed, you could change the "Save Hook" button's icon to a loading icon on-click, then put it back to normal once the server responds - showing a notification on-fail - but that's a little tougher 😛 )

from taskcluster.

Hi, I would like to this one up.
@helfi92 could you please guide me how to go about with this one?

from taskcluster.

Hi @akshithashetty. Here's what is needed to do:

1. Disable the save icon button when a hook is unchanged. You can use the equals method from the ramda package to compare both hooks object. You can import the function via import { equals } from 'ramda'.

2. Use the snackbar component we have in src/component/Snackbar to show a confirmation box when the save action is successful. You can also refer to our styleguide for the props definitions.

Note: In order to save a hook, you will need to be successfully logged in. Instructions on logging in can be found in https://github.com/taskcluster/taskcluster-web#web-server.

Hope that helps.

from taskcluster.