From 97744820acf37eb8ccaf29656af9c7fb26027736 Mon Sep 17 00:00:00 2001 From: claudiaHash <49017601+claudiaHash@users.noreply.github.com> Date: Thu, 28 Apr 2022 16:39:46 +0300 Subject: [PATCH] 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 --- content/pages/edit.json | 3 ++- content/publish/form.json | 6 ++++-- .../@shared/FormFields/FilesInput/Info.tsx | 13 ------------- src/components/@shared/FormInput/InputElement.tsx | 1 + src/components/@shared/FormInput/index.module.css | 1 - src/components/@shared/FormInput/index.tsx | 10 +++++++--- 6 files changed, 14 insertions(+), 20 deletions(-) diff --git a/content/pages/edit.json b/content/pages/edit.json index 895b0f68e..59d901dbb 100644 --- a/content/pages/edit.json +++ b/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" }, { diff --git a/content/publish/form.json b/content/publish/form.json index 6556d6473..4b6b1ef02 100644 --- a/content/publish/form.json +++ b/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" }, { diff --git a/src/components/@shared/FormFields/FilesInput/Info.tsx b/src/components/@shared/FormFields/FilesInput/Info.tsx index 6be397a07..1971760f5 100644 --- a/src/components/@shared/FormFields/FilesInput/Info.tsx +++ b/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 (

{file.url}

@@ -29,13 +23,6 @@ export default function FileInfo({ {file.contentLength &&
  • {prettySize(+file.contentLength)}
    • } {contentTypeCleaned &&
  • {contentTypeCleaned}
    • } - {shouldWarnAboutFile && ( - - )} diff --git a/src/components/@shared/FormInput/InputElement.tsx b/src/components/@shared/FormInput/InputElement.tsx index d6f6a7d4a..2e521ca15 100644 --- a/src/components/@shared/FormInput/InputElement.tsx +++ b/src/components/@shared/FormInput/InputElement.tsx @@ -42,6 +42,7 @@ export default function InputElement({ multiple, disabled, help, + prominentHelp, form, additionalComponent, disclaimer, diff --git a/src/components/@shared/FormInput/index.module.css b/src/components/@shared/FormInput/index.module.css index 5ea9fb86f..17261e439 100644 --- a/src/components/@shared/FormInput/index.module.css +++ b/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; } diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx index 64a5b065b..4a3aeb98c 100644 --- a/src/components/@shared/FormInput/index.tsx +++ b/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): ReactElement { const { label, help, + prominentHelp, additionalComponent, size, form, @@ -118,16 +121,17 @@ export default function Input(props: Partial): ReactElement { * )} - {help && } />} + {help && !prominentHelp && ( + } /> + )} - + {help && prominentHelp && {help}} {isFormikField && hasFormikError && (
    )} - {disclaimer && ( {disclaimer} )}