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

content/pages/publish.json

@@ -23,7 +23,7 @@
         "name": "files",
         "label": "File",
         "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",
         "required": true
       },
@@ -31,7 +31,7 @@
         "name": "links",
         "label": "Sample file",
         "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"
       },
       {

src/components/atoms/Button.module.css

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

src/components/molecules/FormFields/FilesInput/Input.tsx

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

src/models/FormPublish.ts

@@ -15,7 +15,9 @@ export const validationSchema: Yup.SchemaOf<MetadataPublishForm> = Yup.object()
         symbol: Yup.string()
       })
       .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'),
     timeout: Yup.string().required('Required'),
     access: Yup.string()

src/utils/provider.ts

@@ -21,8 +21,29 @@ export async function fileinfo(
       return
     }
     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
+    } 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]