Fix edit form validation (#1371)

* Fixing logic for showing error messages

* Removing unused code

* Refactoring

* fixing sample file validation

* Removing console logs

* Minor formatting

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

@@ -66,6 +66,24 @@ export interface InputProps {
   disclaimerValues?: string[]
 }
 
+function checkError(
+  form: any,
+  parsedFieldName: string[],
+  field: FieldInputProps<any>
+) {
+  if (form?.errors === {}) {
+    return false
+  } else if (
+    (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
+      form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
+    (form?.touched[field.name] &&
+      form?.errors[field.name] &&
+      field.name !== 'links')
+  ) {
+    return true
+  }
+}
+
 export default function Input(props: Partial<InputProps>): ReactElement {
   const {
     label,
@@ -81,17 +99,12 @@ export default function Input(props: Partial<InputProps>): ReactElement {
 
   const isFormikField = typeof field !== 'undefined'
   const isNestedField = field?.name?.includes('.')
-
   // TODO: this feels hacky as it assumes nested `values` store. But we can't use the
   // `useField()` hook in here to get `meta.error` so we have to match against form?.errors?
   // handling flat and nested data at same time.
   const parsedFieldName =
     isFormikField && (isNestedField ? field?.name.split('.') : [field?.name])
-  // const hasFormikError = !!meta?.touched && !!meta?.error
-  const hasFormikError =
-    form?.errors !== {} &&
-    form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
-    form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]
+  const hasFormikError = checkError(form, parsedFieldName, field)
 
   const styleClasses = cx({
     field: true,

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -17,40 +17,6 @@ export function checkIfTimeoutInPredefinedValues(
   return false
 }
 
-function handleTimeoutCustomOption(
-  data: FormFieldContent[],
-  values: Partial<FormPublishData>
-) {
-  const timeoutFieldContent = data.filter(
-    (field) => field.name === 'timeout'
-  )[0]
-  const timeoutInputIndex = data.findIndex(
-    (element) => element.name === 'timeout'
-  )
-  if (
-    data[timeoutInputIndex].options.length < 6 &&
-    !checkIfTimeoutInPredefinedValues(
-      values?.services[0]?.timeout,
-      timeoutFieldContent.options
-    )
-  ) {
-    data[timeoutInputIndex].options.push(values?.services[0]?.timeout)
-  } else if (
-    data[timeoutInputIndex].options.length === 6 &&
-    checkIfTimeoutInPredefinedValues(
-      values?.services[0]?.timeout,
-      timeoutFieldContent.options
-    )
-  ) {
-    data[timeoutInputIndex].options.pop()
-  } else if (
-    data[timeoutInputIndex].options.length === 6 &&
-    data[timeoutInputIndex].options[5] !== values?.services[0]?.timeout
-  ) {
-    data[timeoutInputIndex].options[5] = values?.services[0]?.timeout
-  }
-}
-
 export default function FormEditMetadata({
   data,
   showPrice,

src/components/Asset/Edit/_constants.ts

@@ -1,5 +1,5 @@
 import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
-import { mapTimeoutStringToSeconds, secondsToString } from '@utils/ddo'
+import { secondsToString } from '@utils/ddo'
 import * as Yup from 'yup'
 import { MetadataEditForm } from './_types'