1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

Issue 366/dataset publish ux (#461)

* changing the info text for dataset input

* Updating error message for invalid dataset input

* chaning button styling to make it look more like a button

* fixing package-lock.json issue

* removing changes from package-lock.json

* adding onBlur event to validate the data input

* Removing autoclose on error message

* adding success message when the dataset is valid
This commit is contained in:
Jamie Hewitt 2021-04-14 13:24:07 +03:00 committed by GitHub
parent 7672d78aee
commit 7c09ceca06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 7 deletions

View File

@ -23,7 +23,7 @@
"name": "files", "name": "files",
"label": "File", "label": "File",
"placeholder": "e.g. https://file.com/file.json", "placeholder": "e.g. https://file.com/file.json",
"help": "Please provide a URL to your data set file. This URL will be stored encrypted after publishing.", "help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing.",
"type": "files", "type": "files",
"required": true "required": true
}, },
@ -31,7 +31,7 @@
"name": "links", "name": "links",
"label": "Sample file", "label": "Sample file",
"placeholder": "e.g. https://file.com/samplefile.json", "placeholder": "e.g. https://file.com/samplefile.json",
"help": "Please provide a URL to a sample of your data set file. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.", "help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.",
"type": "files" "type": "files"
}, },
{ {

View File

@ -13,8 +13,8 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: 0.2s ease-out; transition: 0.2s ease-out;
color: var(--brand-white); color: var(--brand-white);
background: var(--brand-grey-light); background: var(--brand-pink);
box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, 0.3);
user-select: none; user-select: none;
text-align: center; text-align: center;
} }

View File

@ -18,7 +18,12 @@ export default function FileInput({
return ( return (
<InputGroup> <InputGroup>
<input className={styles.input} {...props} type="url" /> <input
className={styles.input}
{...props}
type="url"
onBlur={(e: React.SyntheticEvent) => handleButtonClick(e, field.value)}
/>
<Button <Button
size="small" size="small"

View File

@ -15,7 +15,9 @@ export const validationSchema: Yup.SchemaOf<MetadataPublishForm> = Yup.object()
symbol: Yup.string() symbol: Yup.string()
}) })
.required('Required'), .required('Required'),
files: Yup.array<FileMetadata>().required('Required').nullable(), files: Yup.array<FileMetadata>()
.required('Enter a valid URL and click "ADD FILE"')
.nullable(),
description: Yup.string().min(10).required('Required'), description: Yup.string().min(10).required('Required'),
timeout: Yup.string().required('Required'), timeout: Yup.string().required('Required'),
access: Yup.string() access: Yup.string()

View File

@ -21,8 +21,29 @@ export async function fileinfo(
return return
} }
if (!response.data[0] || !response.data[0].valid) { if (!response.data[0] || !response.data[0].valid) {
toast.error('Could not fetch file info. Please check URL and try again') toast.error(
'The data file URL you entered apears to be invalid. Please check URL and try again',
{
autoClose: false,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined
}
)
return return
} else {
toast.dismiss() // Remove any existing error message
toast.success('Great! That dataset looks good 🐳', {
position: 'bottom-right',
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined
})
} }
const { contentLength, contentType } = response.data[0] const { contentLength, contentType } = response.data[0]