From 74a9d074edb73ac470e32b7577cffe51862751d4 Mon Sep 17 00:00:00 2001
From: EnzoVezzaro <enzo-vezzaro@live.it>
Date: Mon, 26 Sep 2022 09:01:51 -0400
Subject: [PATCH] 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    |  8 ++---
 src/components/@shared/Price/Conversion.tsx   |  2 +-
 .../Asset/Edit/EditComputeDataset.tsx         |  6 ++--
 .../Asset/Edit/EditFeedback.module.css        |  1 +
 src/components/Asset/Edit/EditMetadata.tsx    |  3 +-
 src/components/Asset/Edit/_constants.ts       | 25 ++------------
 src/components/Asset/Edit/_types.ts           |  5 +--
 src/components/Asset/Edit/_validation.ts      | 34 +++++++++++++++++++
 src/components/Publish/_constants.tsx         |  4 +--
 src/components/Publish/_types.ts              | 10 +-----
 src/components/Publish/_validation.ts         |  5 +--
 11 files changed, 56 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Asset/Edit/_validation.ts

diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 9f5b05bef..9079fed45 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/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>
       )}
diff --git a/src/components/@shared/Price/Conversion.tsx b/src/components/@shared/Price/Conversion.tsx
index 625b148df..509395ce8 100644
--- a/src/components/@shared/Price/Conversion.tsx
+++ b/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"
diff --git a/src/components/Asset/Edit/EditComputeDataset.tsx b/src/components/Asset/Edit/EditComputeDataset.tsx
index 4563a5bf6..8c86baa26 100644
--- a/src/components/Asset/Edit/EditComputeDataset.tsx
+++ b/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'
diff --git a/src/components/Asset/Edit/EditFeedback.module.css b/src/components/Asset/Edit/EditFeedback.module.css
index 45ba1c6f0..39d6d0d55 100644
--- a/src/components/Asset/Edit/EditFeedback.module.css
+++ b/src/components/Asset/Edit/EditFeedback.module.css
@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 
 .feedback h3 {
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index f86df41e7..8c471dc84 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/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'
diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index 78201f0cf..6027ecb4c 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/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
diff --git a/src/components/Asset/Edit/_types.ts b/src/components/Asset/Edit/_types.ts
index 6587bc75b..c36b968b6 100644
--- a/src/components/Asset/Edit/_types.ts
+++ b/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
 }
 
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
new file mode 100644
index 000000000..9b40e5507
--- /dev/null
+++ b/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()
+})
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 19eba3f69..38d9b9119 100644
--- a/src/components/Publish/_constants.tsx
+++ b/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',
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index bae8306a3..d313c2dde 100644
--- a/src/components/Publish/_types.ts
+++ b/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[]
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 39ac4245a..e15ae9594 100644
--- a/src/components/Publish/_validation.ts
+++ b/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.'),