add outline when an input has changed

src/components/Asset/Edit/EditMetadata.tsx

@@ -24,6 +24,7 @@ import { useAsset } from '@context/Asset'
 import { setNftMetadata } from '@utils/nft'
 import { sanitizeUrl } from '@utils/url'
 import { getEncryptedFiles } from '@utils/provider'
+import { initialValues } from 'src/components/Publish/_constants'
 
 export default function Edit({
   asset
@@ -139,14 +140,16 @@ export default function Edit({
     }
   }
 
+  const initialValues = getInitialValues(
+    asset?.metadata,
+    asset?.services[0]?.timeout,
+    asset?.accessDetails?.price
+  )
+
   return (
     <Formik
       enableReinitialize
-      initialValues={getInitialValues(
+      initialValues={initialValues}
-        asset?.metadata,
-        asset?.services[0]?.timeout,
-        asset?.accessDetails?.price
-      )}
       validationSchema={validationSchema}
       onSubmit={async (values, { resetForm }) => {
         // move user's focus to top of screen
@@ -176,6 +179,8 @@ export default function Edit({
               data={content.form.data}
               showPrice={asset?.accessDetails?.type === 'fixed'}
               isComputeDataset={isComputeType}
+              initialValues={initialValues}
+              currentValues={values}
             />
 
             <Web3Feedback

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

@@ -0,0 +1,5 @@
+.inputChanged input,
+.inputChanged textarea,
+.inputChanged select {
+  border: 1px solid var(--color-primary);
+}

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -3,6 +3,7 @@ import { Field, Form } from 'formik'
 import Input, { InputProps } from '@shared/FormInput'
 import FormActions from './FormActions'
 import { useAsset } from '@context/Asset'
+import styles from './FormEditMetadata.module.css'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -17,14 +18,28 @@ export function checkIfTimeoutInPredefinedValues(
 export default function FormEditMetadata({
   data,
   showPrice,
-  isComputeDataset
+  isComputeDataset,
+  initialValues,
+  currentValues
 }: {
   data: InputProps[]
   showPrice: boolean
   isComputeDataset: boolean
+  initialValues: any
+  currentValues: any
 }): ReactElement {
   const { oceanConfig } = useAsset()
 
+  // get diff between initial value and current value to get inputs changed
+  // we'll add an outline when an input has changed
+  const getDifference = (a: any, b: any) =>
+    Object.entries(a).reduce(
+      (ac, [k, v]) => (b[k] && b[k] !== v ? ((ac[k] = b[k]), ac) : ac),
+      {}
+    )
+
+  const diff = getDifference(initialValues, currentValues)
+
   // This component is handled by Formik so it's not rendered like a "normal" react component,
   // so handleTimeoutCustomOption is called only once.
   // https://github.com/oceanprotocol/market/pull/324#discussion_r561132310
@@ -43,22 +58,26 @@ export default function FormEditMetadata({
 
   return (
     <Form>
-      {data.map(
+      {data.map((field: InputProps) => {
-        (field: InputProps) =>
+        const fieldHasChanged = Object.keys(diff).includes(field.name)
+        return (
           (!showPrice && field.name === 'price') || (
-            <Field
+            <span className={fieldHasChanged ? styles.inputChanged : null}>
-              key={field.name}
+              <Field
-              options={
+                key={field.name}
-                field.name === 'timeout' && isComputeDataset === true
+                options={
-                  ? timeoutOptionsArray
+                  field.name === 'timeout' && isComputeDataset === true
-                  : field.options
+                    ? timeoutOptionsArray
-              }
+                    : field.options
-              {...field}
+                }
-              component={Input}
+                {...field}
-              prefix={field.name === 'price' && oceanConfig?.oceanTokenSymbol}
+                component={Input}
-            />
+                prefix={field.name === 'price' && oceanConfig?.oceanTokenSymbol}
+              />
+            </span>
           )
-      )}
+        )
+      })}
 
       <FormActions />
     </Form>