From ac4ed257af85a1b911dda3e897e9ab8892a87042 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Tue, 20 Sep 2022 10:32:17 +0300
Subject: [PATCH] more UI updates

---
 .../FormFields/ContainerInput/Info.module.css | 49 +++++++++++++++++
 .../FormFields/ContainerInput/Info.tsx        | 24 ++++++++
 .../FormFields/ContainerInput/index.tsx       | 55 +++++++++++--------
 src/components/Publish/Metadata/index.tsx     |  2 +-
 4 files changed, 105 insertions(+), 25 deletions(-)
 create mode 100644 src/components/@shared/FormFields/ContainerInput/Info.module.css
 create mode 100644 src/components/@shared/FormFields/ContainerInput/Info.tsx

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 (
+    <div className={styles.info}>
+      <h3 className={styles.url}>{`${image}:${tag}`}</h3>
+      <ul>
+        <li className={styles.success}>✓ Image found</li>
+      </ul>
+      <button className={styles.removeButton} onClick={handleClose}>
+        &times;
+      </button>
+    </div>
+  )
+}
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<FormPublishData>()
+  const [isValid, setIsValid] = useState(false)
+  const { values, setFieldError, setFieldValue } =
+    useFormikContext<FormPublishData>()
 
   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 (
     <>
-      <UrlInput
-        submitText="Check"
-        {...props}
-        name={`${field.name}[0].url`}
-        checkUrl={false}
-        isLoading={isLoading}
-        handleButtonClick={handleValidation}
-      />
-
-      {/* {field?.value?.[0]?.valid === true ? (
-        <FileInfo file={field.value[0]} handleClose={handleClose} />
+      {isValid ? (
+        <ImageInfo
+          image={values.metadata.dockerImageCustom}
+          tag={values.metadata.dockerImageCustomTag}
+          handleClose={handleClose}
+        />
       ) : (
-       
-      )} */}
+        <UrlInput
+          submitText="Use"
+          {...props}
+          name={`${field.name}[0].url`}
+          checkUrl={false}
+          isLoading={isLoading}
+          handleButtonClick={handleValidation}
+        />
+      )}
     </>
   )
 }
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}
               />
               <Field
                 {...getFieldContent(