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({
     }
   }
 
-  return (
-    <Formik
-      enableReinitialize
-      initialValues={getInitialValues(
+  const initialValues = getInitialValues(
     asset?.metadata,
     asset?.services[0]?.timeout,
     asset?.accessDetails?.price
-      )}
+  )
+
+  return (
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
       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,9 +58,11 @@ export default function FormEditMetadata({
 
   return (
     <Form>
-      {data.map(
-        (field: InputProps) =>
+      {data.map((field: InputProps) => {
+        const fieldHasChanged = Object.keys(diff).includes(field.name)
+        return (
           (!showPrice && field.name === 'price') || (
+            <span className={fieldHasChanged ? styles.inputChanged : null}>
               <Field
                 key={field.name}
                 options={
@@ -57,8 +74,10 @@ export default function FormEditMetadata({
                 component={Input}
                 prefix={field.name === 'price' && oceanConfig?.oceanTokenSymbol}
               />
+            </span>
           )
-      )}
+        )
+      })}
 
       <FormActions />
     </Form>