fix file validation on edit form (#1677)

* split validation / constants

* some minor refactor

* fix edit form (duplication ErrorMessage)

* fix Feedback UI

* remove logs

* fix empty space when loading total sales

* added isTrue to valid

* remove hardcoded FileInfo typing in publish and edit

* fix more FileInfo typing

* fix missing error message on inputs

src/components/@shared/FormInput/index.tsx

@@ -71,9 +71,7 @@ function checkError(
   parsedFieldName: string[],
   field: FieldInputProps<any>
 ) {
-  if (form?.errors && Object.entries(form?.errors).length === 0) {
-    return false
-  } else if (
+  if (
     (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
       form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
     (form?.touched[field.name] &&
@@ -140,11 +138,13 @@ export default function Input(props: Partial<InputProps>): ReactElement {
       </Label>
       <InputElement size={size} {...field} {...props} />
       {help && prominentHelp && <FormHelp>{help}</FormHelp>}
-      {isFormikField && hasFormikError && (
+
+      {field?.name !== 'files' && isFormikField && hasFormikError && (
         <div className={styles.error}>
           <ErrorMessage name={field.name} />
         </div>
       )}
+
       {disclaimer && (
         <Disclaimer visible={disclaimerVisible}>{disclaimer}</Disclaimer>
       )}

src/components/@shared/Price/Conversion.tsx

@@ -52,7 +52,7 @@ export default function Conversion({
     setPriceConverted(convertedFormattedHTMLstring)
   }, [price, prices, currency, locale, isFiat, priceTokenId])
 
-  return price > 0 ? (
+  return Number(price) >= 0 ? (
     <span
       className={`${styles.conversion} ${className || ''}`}
       title="Approximation based on the current spot price on Coingecko"

src/components/Asset/Edit/EditComputeDataset.tsx

@@ -12,10 +12,8 @@ import { useUserPreferences } from '@context/UserPreferences'
 import styles from './index.module.css'
 import Web3Feedback from '@shared/Web3Feedback'
 import { useCancelToken } from '@hooks/useCancelToken'
-import {
-  getComputeSettingsInitialValues,
-  computeSettingsValidationSchema
-} from './_constants'
+import { getComputeSettingsInitialValues } from './_constants'
+import { computeSettingsValidationSchema } from './_validation'
 import content from '../../../../content/pages/editComputeDataset.json'
 import { getServiceByName } from '@utils/ddo'
 import { setMinterToPublisher, setMinterToDispenser } from '@utils/dispenser'

src/components/Asset/Edit/EditFeedback.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 
 .feedback h3 {

src/components/Asset/Edit/EditMetadata.tsx

@@ -7,7 +7,8 @@ import {
   Asset,
   Service
 } from '@oceanprotocol/lib'
-import { validationSchema, getInitialValues } from './_constants'
+import { validationSchema } from './_validation'
+import { getInitialValues } from './_constants'
 import { MetadataEditForm } from './_types'
 import { useWeb3 } from '@context/Web3'
 import { useUserPreferences } from '@context/UserPreferences'

src/components/Asset/Edit/_constants.ts

@@ -1,20 +1,7 @@
-import { FileInfo, Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
+import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
 import { secondsToString } from '@utils/ddo'
-import * as Yup from 'yup'
 import { ComputeEditForm, MetadataEditForm } from './_types'
 
-export const validationSchema = Yup.object().shape({
-  name: Yup.string()
-    .min(4, (param) => `Title must be at least ${param.min} characters`)
-    .required('Required'),
-  description: Yup.string().required('Required').min(10),
-  price: Yup.number().required('Required'),
-  links: Yup.array<any[]>().nullable(),
-  files: Yup.array<FileInfo[]>().nullable(),
-  timeout: Yup.string().required('Required'),
-  author: Yup.string().nullable()
-})
-
 export function getInitialValues(
   metadata: Metadata,
   timeout: number,
@@ -24,19 +11,13 @@ export function getInitialValues(
     name: metadata?.name,
     description: metadata?.description,
     price,
-    links: metadata?.links,
-    files: '',
+    links: metadata?.links as any,
+    files: [{ url: '', type: '' }],
     timeout: secondsToString(timeout),
     author: metadata?.author
   }
 }
 
-export const computeSettingsValidationSchema = Yup.object().shape({
-  allowAllPublishedAlgorithms: Yup.boolean().nullable(),
-  publisherTrustedAlgorithms: Yup.array().nullable(),
-  publisherTrustedAlgorithmPublishers: Yup.array().nullable()
-})
-
 export function getComputeSettingsInitialValues({
   publisherTrustedAlgorithms,
   publisherTrustedAlgorithmPublishers

src/components/Asset/Edit/_types.ts

@@ -1,10 +1,11 @@
+import { FileInfo } from '@oceanprotocol/lib'
 export interface MetadataEditForm {
   name: string
   description: string
   timeout: string
   price?: string
-  links?: string | any[]
-  files: string | any[]
+  files: FileInfo[]
+  links?: FileInfo[]
   author?: string
 }
 

src/components/Asset/Edit/_validation.ts

@@ -0,0 +1,34 @@
+import { FileInfo } from '@oceanprotocol/lib'
+import * as Yup from 'yup'
+
+export const validationSchema = Yup.object().shape({
+  name: Yup.string()
+    .min(4, (param) => `Title must be at least ${param.min} characters`)
+    .required('Required'),
+  description: Yup.string().required('Required').min(10),
+  price: Yup.number().required('Required'),
+  files: Yup.array<FileInfo[]>()
+    .of(
+      Yup.object().shape({
+        url: Yup.string().url('Must be a valid URL.'),
+        valid: Yup.boolean().isTrue()
+      })
+    )
+    .nullable(),
+  links: Yup.array<FileInfo[]>()
+    .of(
+      Yup.object().shape({
+        url: Yup.string().url('Must be a valid URL.'),
+        valid: Yup.boolean().isTrue()
+      })
+    )
+    .nullable(),
+  timeout: Yup.string().required('Required'),
+  author: Yup.string().nullable()
+})
+
+export const computeSettingsValidationSchema = Yup.object().shape({
+  allowAllPublishedAlgorithms: Yup.boolean().nullable(),
+  publisherTrustedAlgorithms: Yup.array().nullable(),
+  publisherTrustedAlgorithmPublishers: Yup.array().nullable()
+})

src/components/Publish/_constants.tsx

@@ -72,8 +72,8 @@ export const initialValues: FormPublishData = {
   },
   services: [
     {
-      files: [{ url: '' }],
-      links: [{ url: '' }],
+      files: [{ url: '', type: '' }],
+      links: [{ url: '', type: '' }],
       dataTokenOptions: { name: '', symbol: '' },
       timeout: '',
       access: 'access',

src/components/Publish/_types.ts

@@ -1,14 +1,6 @@
-import { ServiceComputeOptions } from '@oceanprotocol/lib'
+import { FileInfo, ServiceComputeOptions } from '@oceanprotocol/lib'
 import { NftMetadata } from '@utils/nft'
 import { ReactElement } from 'react'
-
-interface FileInfo {
-  url: string
-  valid?: boolean
-  contentLength?: string
-  contentType?: string
-}
-
 export interface FormPublishService {
   files: FileInfo[]
   links?: FileInfo[]

src/components/Publish/_validation.ts

@@ -1,6 +1,7 @@
 import { MAX_DECIMALS } from '@utils/constants'
 import * as Yup from 'yup'
 import { getMaxDecimalsValidation } from '@utils/numbers'
+import { FileInfo } from '@oceanprotocol/lib'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
@@ -28,7 +29,7 @@ const validationMetadata = {
 }
 
 const validationService = {
-  files: Yup.array<{ url: string; valid: boolean }[]>()
+  files: Yup.array<FileInfo[]>()
     .of(
       Yup.object().shape({
         url: Yup.string().url('Must be a valid URL.').required('Required'),
@@ -37,7 +38,7 @@ const validationService = {
     )
     .min(1, `At least one file is required.`)
     .required('Enter a valid URL and click ADD FILE.'),
-  links: Yup.array<{ url: string; valid: boolean }[]>()
+  links: Yup.array<FileInfo[]>()
     .of(
       Yup.object().shape({
         url: Yup.string().url('Must be a valid URL.'),