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}
/>