diff --git a/src/components/@shared/FormFields/ContainerInput/Info.module.css b/src/components/@shared/FormFields/ContainerInput/Info.module.css new file mode 100644 index 000000000..a9a95d6d8 --- /dev/null +++ b/src/components/@shared/FormFields/ContainerInput/Info.module.css @@ -0,0 +1,49 @@ +.info { + border-radius: var(--border-radius); + padding: calc(var(--spacer) / 2); + border: 1px solid var(--border-color); + background-color: var(--background-highlight); + position: relative; +} + +.info ul { + margin: 0; +} + +.info li { + display: inline-block; + font-size: var(--font-size-small); + margin-right: calc(var(--spacer) / 2); + color: var(--color-secondary); +} + +.info li.success { + color: var(--brand-alert-green); +} + +.url { + margin: 0; + font-size: var(--font-size-base); + line-height: var(--line-height); + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-all; + padding-right: calc(var(--spacer) / 2); +} + +.warning { + margin-top: calc(var(--spacer) / 3); + margin-left: 0; +} + +.removeButton { + cursor: pointer; + border: none; + position: absolute; + top: -0.2rem; + right: 0; + font-size: var(--font-size-h3); + cursor: pointer; + color: var(--font-color-text); + background-color: transparent; +} diff --git a/src/components/@shared/FormFields/ContainerInput/Info.tsx b/src/components/@shared/FormFields/ContainerInput/Info.tsx new file mode 100644 index 000000000..9054b3101 --- /dev/null +++ b/src/components/@shared/FormFields/ContainerInput/Info.tsx @@ -0,0 +1,24 @@ +import React, { ReactElement } from 'react' +import styles from './Info.module.css' + +export default function ImageInfo({ + image, + tag, + handleClose +}: { + image: string + tag: string + handleClose(): void +}): ReactElement { + return ( +
+

{`${image}:${tag}`}

+ + +
+ ) +} diff --git a/src/components/@shared/FormFields/ContainerInput/index.tsx b/src/components/@shared/FormFields/ContainerInput/index.tsx index 705426bc8..f59e5c5c7 100644 --- a/src/components/@shared/FormFields/ContainerInput/index.tsx +++ b/src/components/@shared/FormFields/ContainerInput/index.tsx @@ -7,11 +7,14 @@ import { LoggerInstance } from '@oceanprotocol/lib' import { toast } from 'react-toastify' import axios from 'axios' import isUrl from 'is-url-superb' +import ImageInfo from './Info' -export default function FilesInput(props: InputProps): ReactElement { +export default function ContainerInput(props: InputProps): ReactElement { const [field, meta, helpers] = useField(props.name) const [isLoading, setIsLoading] = useState(false) - const { values, setFieldError } = useFormikContext() + const [isValid, setIsValid] = useState(false) + const { values, setFieldError, setFieldValue } = + useFormikContext() async function getContainerChecksum( image: string, @@ -52,17 +55,16 @@ export default function FilesInput(props: InputProps): ReactElement { setIsLoading(true) if (!isUrl(container, { lenient: false })) { const parsedContainerValue = container.split(':') - const checksum = await getContainerChecksum( - parsedContainerValue[0], - parsedContainerValue[1] - ) - values.metadata.dockerImageCustom = parsedContainerValue[0] - values.metadata.dockerImageCustomTag = parsedContainerValue[1] + const image = parsedContainerValue[0] + const tag = parsedContainerValue[1] + const checksum = await getContainerChecksum(image, tag) + setFieldValue('metadata.dockerImageCustom', image) + setFieldValue('metadata.dockerImageCustomTag', tag) if (checksum) { - values.metadata.dockerImageCustomChecksum = checksum + setFieldValue('metadata.dockerImageCustomChecksum', checksum) + setIsValid(true) } } else { - console.log('open input modal') } } catch (error) { setFieldError(`${field.name}[0].url`, error.message) @@ -73,26 +75,31 @@ export default function FilesInput(props: InputProps): ReactElement { } function handleClose() { - helpers.setValue(meta.initialValue) + setFieldValue('metadata.dockerImageCustom', '') + setFieldValue('metadata.dockerImageCustomTag', '') + setFieldValue('metadata.dockerImageCustomChecksum', '') + setIsValid(false) helpers.setTouched(false) } return ( <> - - - {/* {field?.value?.[0]?.valid === true ? ( - + {isValid ? ( + ) : ( - - )} */} + + )} ) } diff --git a/src/components/Publish/Metadata/index.tsx b/src/components/Publish/Metadata/index.tsx index 1954acbb6..b9e878432 100644 --- a/src/components/Publish/Metadata/index.tsx +++ b/src/components/Publish/Metadata/index.tsx @@ -129,7 +129,7 @@ export default function MetadataFields(): ReactElement { )} component={Input} name="metadata.dockerImageCustomChecksum" - disabled + disabled={values.metadata.dockerImageCustomChecksum !== null} />