remove onChange handlers on edit (#1555)

* remove onChange handler on edit compute

* move empty DID list condition

src/@utils/compute.ts

@@ -330,9 +330,13 @@ export async function createTrustedAlgorithmList(
   assetChainId: number,
   cancelToken: CancelToken
 ): Promise<PublisherTrustedAlgorithm[]> {
-  if (!selectedAlgorithms || selectedAlgorithms.length === 0) return []
   const trustedAlgorithms: PublisherTrustedAlgorithm[] = []
 
+  // Condition to prevent app from hitting Aquarius with empty DID list
+  // when nothing is selected in the UI.
+  if (!selectedAlgorithms || selectedAlgorithms.length === 0)
+    return trustedAlgorithms
+
   const selectedAssets = await retrieveDDOListByDIDs(
     selectedAlgorithms,
     [assetChainId],

src/components/Asset/Edit/FormActions.tsx

@@ -12,13 +12,10 @@ export default function FormActions({
   handleClick?: () => void
 }): ReactElement {
   const { isAssetNetwork, asset } = useAsset()
-  const {
-    isValid,
-    touched
-  }: FormikContextType<MetadataEditForm | ComputeEditForm> = useFormikContext()
+  const { isValid }: FormikContextType<MetadataEditForm | ComputeEditForm> =
+    useFormikContext()
 
-  const isSubmitDisabled =
-    !isValid || !isAssetNetwork || Object.keys(touched).length === 0
+  const isSubmitDisabled = !isValid || !isAssetNetwork
 
   return (
     <footer className={styles.actions}>

src/components/Asset/Edit/FormEditComputeDataset.tsx

@@ -1,12 +1,6 @@
-import React, {
-  ChangeEvent,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useState
-} from 'react'
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Input, { InputProps } from '@shared/FormInput'
+import Input from '@shared/FormInput'
 import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import stylesIndex from './index.module.css'
 import {
@@ -32,21 +26,6 @@ export default function FormEditComputeDataset(): ReactElement {
 
   const [allAlgorithms, setAllAlgorithms] = useState<AssetSelectionAsset[]>()
 
-  const {
-    validateField,
-    setFieldValue,
-    setFieldTouched
-  }: FormikContextType<Partial<ComputeEditForm>> = useFormikContext()
-
-  // Manually handle change events instead of using `handleChange` from Formik.
-  // Workaround for default `validateOnChange` not kicking in unless user
-  // clicks outside of form field.
-  function handleFieldChange(e: ChangeEvent<HTMLInputElement>, name: string) {
-    validateField(name)
-    setFieldTouched(name, true)
-    setFieldValue(name, e.target.value)
-  }
-
   const getAlgorithmList = useCallback(
     async (
       publisherTrustedAlgorithms: PublisherTrustedAlgorithm[]
@@ -98,9 +77,6 @@ export default function FormEditComputeDataset(): ReactElement {
         name="publisherTrustedAlgorithms"
         options={allAlgorithms}
         disabled={values.allowAllPublishedAlgorithms}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          handleFieldChange(e, 'publisherTrustedAlgorithms')
-        }
       />
 
       <Field
@@ -111,9 +87,6 @@ export default function FormEditComputeDataset(): ReactElement {
           getFieldContent('allowAllPublishedAlgorithms', content.form.data)
             .options
         }
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          handleFieldChange(e, 'allowAllPublishedAlgorithms')
-        }
       />
 
       <FormActions />

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -1,9 +1,8 @@
-import React, { ChangeEvent, ReactElement } from 'react'
-import { Field, Form, FormikContextType, useFormikContext } from 'formik'
+import React, { ReactElement } from 'react'
+import { Field, Form } from 'formik'
 import Input, { InputProps } from '@shared/FormInput'
 import FormActions from './FormActions'
 import { useAsset } from '@context/Asset'
-import { MetadataEditForm } from './_types'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -25,23 +24,6 @@ export default function FormEditMetadata({
   isComputeDataset: boolean
 }): ReactElement {
   const { oceanConfig } = useAsset()
-  const {
-    validateField,
-    setFieldValue,
-    setFieldTouched
-  }: FormikContextType<Partial<MetadataEditForm>> = useFormikContext()
-
-  // Manually handle change events instead of using `handleChange` from Formik.
-  // Workaround for default `validateOnChange` not kicking in unless user
-  // clicks outside of form field.
-  function handleFieldChange(
-    e: ChangeEvent<HTMLInputElement>,
-    field: InputProps
-  ) {
-    validateField(field.name)
-    setFieldTouched(field.name, true)
-    setFieldValue(field.name, e.target.value)
-  }
 
   // This component is handled by Formik so it's not rendered like a "normal" react component,
   // so handleTimeoutCustomOption is called only once.
@@ -74,9 +56,6 @@ export default function FormEditMetadata({
               {...field}
               component={Input}
               prefix={field.name === 'price' && oceanConfig?.oceanTokenSymbol}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                handleFieldChange(e, field)
-              }
             />
           )
       )}