Issue 366/dataset publish ux

[jamiehewitt15]

Closes: #366

This pull request implements the "Best" solution mentioned by @trentmc for issue #366

Changes proposed in this PR:

• Info text has been changed to explain that the "ADD FILE" button should be clicked
• Warning message has been changed to make clear that the "ADD FILE" button needs to be clicked
• Button styling has been changed to make it look more like an actual button
• The "ADD FILE" button is automatically pressed as an onBlur event. So as soon as the user moves to a different field in the form the dataset file is automatically validated.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/oceanprotocol/market/CoA4j96ZPXTzHDKxBcDd84WqWUxe
✅ Preview: https://market-git-issue-366-dataset-publish-ux-oceanprotocol.vercel.app

[mihaisc]

not sure if this is still the correct pattern. So i added an url, got a toat error (lets say i didn't see it), and then i get this


So, in the images, as a regular user, why is the submit button disabled?

[jamiehewitt15]

So you're suggestion the error message should stay there until the user has corrected the invalid field? The error message was setup on a timer before now (I assume that was a UX decision?) but I can change it.

[jamiehewitt15]

Ok, I have made the suggested change:

1. The error message remains in place until the user inputs a URL that has a valid dataset.
2. Additionally: a success message will now appear when the user eventually inputs a URL with a valid dataset

[jamiehewitt15]

@mihaisc were you able to take another look at this after I made the changes to the error and success messages last week?

[mihaisc]

If you add a file and then remove it , you can't add another file again. The ADD FILE button doesn't do anything

[jamiehewitt15]

The button is actually automatically pressed and the dataset is checked, there's no need to click it. As long as the input is valid, you'll get the success message.

I think you may be talking about the fact that the button is inactive (greyed out) if you enter a URL without the proceeding https://. That's actually an existing part of the marketplace code (it's how it is on live at the moment) it's not introduced in this pull request. I can remove the URL validation that's making the button appear inactive though if you want?

[mihaisc]

Nope,

After you remove the first uploaded file there is no interaction on click, on focus lost, doesn't matter. Nothing in console as well.

[jamiehewitt15]

@mihaisc ah ok, that's because you have entered the same URL twice. If you change any of the characters in the URL that you've entered you'll see that it works. Ocean Market doesn't allow you to enter the same URL twice in a row, it's how it is at the moment on live. See screen recording:

https://www.loom.com/share/334e6a36080843dfbf25709f63608a40

I would suggest opening a separate issue for allowing people to enter the same URL twice, this issue was about validating the URL immediately after it is entered which has been done.

[mihaisc]

Oh boy, had no idea we had that. It doesn't make any sense. So if i accidentally removed it, then i can't add it anymore.... not sure if this was intentional. Can you please create a issue for that.

[jamiehewitt15]

Sure, I'll create a separate issue for it

[jamiehewitt15]

I'll also create a separate issue for the https:// issue that I mentioned above as well. If you enter a URL without the https:// it won't work and it's not obvious to the user why. That could be quite frustrating... I think we could easily lose customers with that

[jamiehewitt15]

These are the related issues:
#490
#491