Display generic info message for file inputs (#1334)

* display generic message

* add helper message

* bold text in json, remove unused css file

* fixes

* different help message displayed as tooltip

* tooltip help not displayed for files/links fields on publish

* conditionally hide/show tooltip

* use same mechanism for edit form

* add prominentHelp file into content pages

* type fix

* remove unused code

* error message position fix

* error doesn't overlap help message

* show validation error message fix

Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com>

content/pages/edit.json

@@ -33,7 +33,8 @@
         "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 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. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+        "prominentHelp": true,
         "type": "files"
       },
       {

content/publish/form.json

@@ -104,7 +104,8 @@
         "name": "files",
         "label": "File",
         "placeholder": "e.g. https://file.com/file.json",
-        "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. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.",
+        "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+        "prominentHelp": true,
         "type": "files",
         "required": true
       },
@@ -112,7 +113,8 @@
         "name": "links",
         "label": "Sample file",
         "placeholder": "e.g. https://file.com/samplefile.json",
-        "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.",
+        "help": "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. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+        "prominentHelp": true,
         "type": "files"
       },
       {

src/components/@shared/FormFields/FilesInput/Info.tsx

@@ -3,7 +3,6 @@ import { prettySize } from './utils'
 import cleanupContentType from '@utils/cleanupContentType'
 import styles from './Info.module.css'
 import { FileMetadata } from '@oceanprotocol/lib'
-import Alert from '@shared/atoms/Alert'
 
 export default function FileInfo({
   file,
@@ -16,11 +15,6 @@ export default function FileInfo({
     ? cleanupContentType(file.contentType)
     : null
 
-  // Prevent accidential publishing of error pages (e.g. 404) for
-  // popular file hosting services by warning about it.
-  // See https://github.com/oceanprotocol/market/issues/1246
-  const shouldWarnAboutFile = file.valid && contentTypeCleaned === 'html'
-
   return (
     <div className={styles.info}>
       <h3 className={styles.url}>{file.url}</h3>
@@ -29,13 +23,6 @@ export default function FileInfo({
         {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
         {contentTypeCleaned && <li>{contentTypeCleaned}</li>}
       </ul>
-      {shouldWarnAboutFile && (
-        <Alert
-          state="info"
-          text={`Your file was detected as ${contentTypeCleaned}, which is unusal for a data asset. If you did not intend to use a ${contentTypeCleaned} file, try a different URL pointing directly to your data asset file.`}
-          className={styles.warning}
-        />
-      )}
       <button className={styles.removeButton} onClick={handleClose}>
         &times;
       </button>

src/components/@shared/FormInput/InputElement.tsx

@@ -42,6 +42,7 @@ export default function InputElement({
   multiple,
   disabled,
   help,
+  prominentHelp,
   form,
   additionalComponent,
   disclaimer,

src/components/@shared/FormInput/index.module.css

@@ -30,7 +30,6 @@
   padding: 0.2rem 0.4rem;
   position: absolute;
   right: 0;
-  top: 85%;
   z-index: 1;
 }
 

src/components/@shared/FormInput/index.tsx

@@ -15,6 +15,7 @@ import classNames from 'classnames/bind'
 import Disclaimer from './Disclaimer'
 import Tooltip from '@shared/atoms/Tooltip'
 import Markdown from '@shared/Markdown'
+import FormHelp from './Help'
 
 const cx = classNames.bind(styles)
 
@@ -24,6 +25,7 @@ export interface InputProps {
   placeholder?: string
   required?: boolean
   help?: string
+  prominentHelp?: boolean
   tag?: string
   type?: string
   options?: string[]
@@ -68,6 +70,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
   const {
     label,
     help,
+    prominentHelp,
     additionalComponent,
     size,
     form,
@@ -118,16 +121,17 @@ export default function Input(props: Partial<InputProps>): ReactElement {
             *
           </span>
         )}
-        {help && <Tooltip content={<Markdown text={help} />} />}
+        {help && !prominentHelp && (
+          <Tooltip content={<Markdown text={help} />} />
+        )}
       </Label>
       <InputElement size={size} {...field} {...props} />
-
+      {help && prominentHelp && <FormHelp>{help}</FormHelp>}
       {isFormikField && hasFormikError && (
         <div className={styles.error}>
           <ErrorMessage name={field.name} />
         </div>
       )}
-
       {disclaimer && (
         <Disclaimer visible={disclaimerVisible}>{disclaimer}</Disclaimer>
       )}