Fix edit asset issues (#1190)

* fix loading

* fix cancel acction and some cleanups

* style typo

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

* fix title and replace router with link

* add proper loading to edit components

* add page title

* add more top spacing to form description

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

src/components/Asset/Edit/DebugEditMetadata.tsx

@@ -14,14 +14,14 @@ export default function DebugEditMetadata({
   const linksTransformed = values.links?.length &&
     values.links[0].valid && [values.links[0].url.replace('javascript:', '')]
   const newMetadata: Metadata = {
-    ...asset.metadata,
+    ...asset?.metadata,
     name: values.name,
     description: values.description,
     links: linksTransformed,
     author: values.author
   }
   const updatedService: Service = {
-    ...asset.services[0],
+    ...asset?.services[0],
     timeout: mapTimeoutStringToSeconds(values.timeout)
   }
   const updatedAsset: Asset = {

src/components/Asset/Edit/EditMetadata.tsx

@@ -17,7 +17,6 @@ import { mapTimeoutStringToSeconds } from '@utils/ddo'
 import styles from './index.module.css'
 import content from '../../../../content/pages/edit.json'
 import { AssetExtended } from 'src/@types/AssetExtended'
-import { setMinterToPublisher, setMinterToDispenser } from '@utils/dispenser'
 import { useAbortController } from '@hooks/useAbortController'
 import DebugEditMetadata from './DebugEditMetadata'
 import { getOceanConfig } from '@utils/ocean'
@@ -36,7 +35,6 @@ export default function Edit({
   const newAbortController = useAbortController()
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
-  const [timeoutStringValue, setTimeoutStringValue] = useState<string>()
   const isComputeType = asset?.services[0]?.type === 'compute'
   const hasFeedback = error || success
 
@@ -130,7 +128,7 @@ export default function Edit({
         await handleSubmit(values, resetForm)
       }}
     >
-      {({ isSubmitting, values, initialValues }) =>
+      {({ isSubmitting, values }) =>
         isSubmitting || hasFeedback ? (
           <EditFeedback
             title="Updating Data Set"
@@ -151,8 +149,6 @@ export default function Edit({
             <article>
               <FormEditMetadata
                 data={content.form.data}
-                setTimeoutStringValue={setTimeoutStringValue}
-                values={initialValues}
                 showPrice={asset?.accessDetails?.type === 'fixed'}
                 isComputeDataset={isComputeType}
               />

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

@@ -18,3 +18,15 @@
   margin-left: calc(var(--spacer) / 2);
   margin-right: calc(var(--spacer) / 2);
 }
+
+.actions a {
+  padding: calc(var(--spacer) / 3);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  transition: 0.2s ease-out;
+}
+
+.actions a:hover {
+  transform: translate3d(0, -0.05rem, 0);
+  text-decoration: none;
+}

src/components/Asset/Edit/FormActions.tsx

@@ -3,15 +3,14 @@ import React, { ReactElement } from 'react'
 import { useAsset } from '@context/Asset'
 import Button from '@shared/atoms/Button'
 import styles from './FormActions.module.css'
+import Link from 'next/link'
 
 export default function FormActions({
-  setShowEdit,
   handleClick
 }: {
-  setShowEdit: (show: boolean) => void
   handleClick?: () => void
 }): ReactElement {
-  const { isAssetNetwork } = useAsset()
+  const { isAssetNetwork, asset } = useAsset()
   const { isValid }: FormikContextType<Partial<any>> = useFormikContext()
 
   return (
@@ -23,9 +22,9 @@ export default function FormActions({
       >
         Submit
       </Button>
-      <Button style="text" onClick={() => setShowEdit(false)}>
+      <Link href={`/asset/${asset?.id}`} key={asset?.id}>
         Cancel
-      </Button>
+      </Link>
     </footer>
   )
 }

src/components/Asset/Edit/FormEditComputeDataset.tsx

@@ -27,7 +27,6 @@ export default function FormEditComputeDataset({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { asset } = useAsset()
-  const [showEditCompute, setShowEditCompute] = useState<boolean>()
   const { values }: FormikContextType<ComputePrivacyForm> = useFormikContext()
   const [allAlgorithms, setAllAlgorithms] = useState<AssetSelectionAsset[]>()
   const newCancelToken = useCancelToken()
@@ -83,8 +82,7 @@ export default function FormEditComputeDataset({
         />
       ))}
 
-      {/* <FormActions setShowEdit={setShowEdit} /> */}
-      <FormActions setShowEdit={setShowEditCompute} />
+      <FormActions />
     </Form>
   )
 }

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -53,19 +53,14 @@ function handleTimeoutCustomOption(
 
 export default function FormEditMetadata({
   data,
-  setTimeoutStringValue,
-  values,
   showPrice,
   isComputeDataset
 }: {
   data: InputProps[]
-  setTimeoutStringValue: (value: string) => void
-  values: Partial<MetadataEditForm>
   showPrice: boolean
   isComputeDataset: boolean
 }): ReactElement {
   const { oceanConfig } = useAsset()
-  const [showEdit, setShowEdit] = useState<boolean>()
   const {
     validateField,
     setFieldValue
@@ -118,10 +113,7 @@ export default function FormEditMetadata({
           )
       )}
 
-      <FormActions
-        setShowEdit={setShowEdit}
-        // handleClick={() => setTimeoutStringValue(values?.services[0]?.timeout)}
-      />
+      <FormActions />
     </Form>
   )
 }

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

@@ -32,6 +32,8 @@
 
 .description {
   font-size: var(--font-size-large);
+  margin: calc(var(--spacer) * 0.3 / var(--line-height)) 0
+    calc(var(--spacer) / var(--line-height)) 0;
 }
 
 .title {

src/components/Asset/Edit/index.tsx

@@ -11,24 +11,19 @@ import { useWeb3 } from '@context/Web3'
 import Alert from '@shared/atoms/Alert'
 
 export default function Edit({ uri }: { uri: string }): ReactElement {
-  const { asset, error, loading, owner } = useAsset()
+  const { asset, error, isInPurgatory, owner, title } = useAsset()
   const [isCompute, setIsCompute] = useState(false)
-  const [isOnwer, setIsOwner] = useState(false)
+  const [pageTitle, setPageTitle] = useState<string>('')
   const { accountId } = useWeb3()
 
-  // Switch type value upon tab change
-  function handleTabChange(tabName: string) {
-    LoggerInstance.log('switched to tab', tabName)
-    // add store restore from
-  }
-
   useEffect(() => {
-    if (!asset || error) {
+    if (!asset || error || accountId !== owner) {
+      setPageTitle('Edit action not available')
       return
     }
+    setPageTitle(isInPurgatory ? '' : `Edit ${title}`)
     setIsCompute(asset?.services[0]?.type === 'compute')
-    setIsOwner(owner === accountId)
-  }, [asset, error])
+  }, [asset, error, isInPurgatory, title])
 
   const tabs = [
     {
@@ -42,23 +37,14 @@ export default function Edit({ uri }: { uri: string }): ReactElement {
     }
   ].filter((tab) => tab !== undefined)
 
-  return asset && !loading && isOnwer ? (
-    <Page uri={uri}>
-      <div className={styles.contianer}>
-        <Tabs
-          items={tabs}
-          handleTabChange={handleTabChange}
-          defaultIndex={0}
-          className={styles.edit}
-        />
+  return asset && asset?.accessDetails && accountId === owner ? (
+    <Page title={pageTitle} noPageHeader uri={uri}>
+      <div className={styles.container}>
+        <Tabs items={tabs} defaultIndex={0} className={styles.edit} />
       </div>
     </Page>
-  ) : !isOnwer ? (
-    <Page
-      title="Edit action available only to asset owner"
-      noPageHeader
-      uri={uri}
-    >
+  ) : asset && asset?.accessDetails && accountId !== owner ? (
+    <Page title={pageTitle} noPageHeader uri={uri}>
       <Alert
         title="Edit action available only to asset owner"
         text={error}
@@ -66,7 +52,7 @@ export default function Edit({ uri }: { uri: string }): ReactElement {
       />
     </Page>
   ) : (
-    <Page title={undefined} uri={uri}>
+    <Page title={pageTitle} noPageHeader uri={uri}>
       <Loader />
     </Page>
   )