Merge pull request #1655 from oceanprotocol/feature/issue-1244-edit-ui

adding UI for field files / links in edit form

src/components/@shared/FormFields/FilesInput/Info.module.css

@@ -31,6 +31,11 @@
   padding-right: calc(var(--spacer) / 2);
 }
 
+.hideUrl {
+  filter: blur(0.2rem);
+  user-select: none;
+}
+
 .warning {
   margin-top: calc(var(--spacer) / 3);
   margin-left: 0;

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

@@ -15,9 +15,13 @@ export default function FileInfo({
     ? cleanupContentType(file.contentType)
     : null
 
+  const hideUrl = file.type === 'hidden' || false
+
   return (
-    <div className={styles.info}>
+    <div className={`${styles.info}`}>
-      <h3 className={styles.url}>{file.url}</h3>
+      <h3 className={`${styles.url} ${hideUrl ? styles.hideUrl : null}`}>
+        {hideUrl ? 'https://oceanprotocol/placeholder' : file.url}
+      </h3>
       <ul>
         <li className={styles.success}>✓ URL confirmed</li>
         {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}

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

@@ -16,7 +16,7 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   async function handleValidation(e: React.SyntheticEvent, url: string) {
     // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
-    e.preventDefault()
+    e?.preventDefault()
 
     try {
       const providerUrl = values?.services
@@ -43,13 +43,14 @@ export default function FilesInput(props: InputProps): ReactElement {
   }
 
   function handleClose() {
-    helpers.setValue(meta.initialValue)
     helpers.setTouched(false)
+    helpers.setValue(meta.initialValue)
   }
 
   return (
     <>
-      {field?.value?.[0]?.valid === true ? (
+      {field?.value?.[0]?.valid === true ||
+      field?.value?.[0]?.type === 'hidden' ? (
         <FileInfo file={field.value[0]} handleClose={handleClose} />
       ) : (
         <UrlInput

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -1,8 +1,10 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
-import { Field, Form } from 'formik'
+import { Field, Form, useField, useFormikContext } from 'formik'
 import Input, { InputProps } from '@shared/FormInput'
 import FormActions from './FormActions'
 import { useAsset } from '@context/Asset'
+import { FormPublishData } from 'src/components/Publish/_types'
+import { getFileUrlInfo } from '@utils/provider'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -23,7 +25,8 @@ export default function FormEditMetadata({
   showPrice: boolean
   isComputeDataset: boolean
 }): ReactElement {
-  const { oceanConfig } = useAsset()
+  const { oceanConfig, asset } = useAsset()
+  const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
   // This component is handled by Formik so it's not rendered like a "normal" react component,
   // so handleTimeoutCustomOption is called only once.
@@ -41,6 +44,34 @@ export default function FormEditMetadata({
     timeoutOptionsArray.push('Forever')
   }
 
+  useEffect(() => {
+    // let's initiate files with empty url (we can't access the asset url) with type hidden (for UI frontend)
+    setFieldValue('files', [
+      {
+        url: '',
+        type: 'hidden'
+      }
+    ])
+
+    const providerUrl = values?.services
+      ? values?.services[0].providerUrl.url
+      : asset.services[0].serviceEndpoint
+    // if we have a sample file, we need to get the files' info before setting defaults links value
+    asset?.metadata?.links?.[0] &&
+      getFileUrlInfo(asset.metadata.links[0], providerUrl).then(
+        (checkedFile) => {
+          console.log(checkedFile)
+          // initiate link with values from asset metadata
+          setFieldValue('links', [
+            {
+              url: asset.metadata.links[0],
+              ...checkedFile[0]
+            }
+          ])
+        }
+      )
+  }, [])
+
   return (
     <Form>
       {data.map(

src/components/Asset/Edit/_constants.ts

@@ -11,7 +11,7 @@ export function getInitialValues(
     name: metadata?.name,
     description: metadata?.description,
     price,
-    links: metadata?.links as any,
+    links: [{ url: '', type: '' }],
     files: [{ url: '', type: '' }],
     timeout: secondsToString(timeout),
     author: metadata?.author,