refactor publish page for tab usage

src/components/organisms/AssetActions/index.tsx

@@ -3,7 +3,6 @@ import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
 import { Logger } from '@oceanprotocol/lib'
-import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 import Tabs from '../../atoms/Tabs'
 import { useOcean } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'

src/components/pages/Publish/PublishType.module.css

@@ -1,29 +0,0 @@
-.tabElement,
-button.tabElement,
-.tabElement:hover,
-.tabElement:active,
-.tabElement:focus {
-  border: 1px solid var(--border-color);
-  text-transform: uppercase;
-  border-radius: var(--border-radius);
-  margin-right: calc(var(--spacer) / 6);
-  margin-bottom: calc(var(--spacer) / 6);
-  color: var(--color-secondary);
-  background: var(--background-body);
-
-  /* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
-  padding: calc(var(--spacer) / 5) !important;
-}
-
-.tabElement:hover,
-.tabElement:focus {
-  color: var(--font-color-text);
-  background: inherit;
-  transform: none;
-}
-
-.tabElement.selected {
-  color: var(--background-body);
-  background: var(--font-color-text);
-  border-color: var(--background-body);
-}

src/components/pages/Publish/PublishType.tsx

@@ -1,48 +0,0 @@
-import React, { ReactElement, useEffect } from 'react'
-import styles from './PublishType.module.css'
-import classNames from 'classnames/bind'
-import Button from '../../atoms/Button'
-
-const cx = classNames.bind(styles)
-
-export const TypeOfPublish = {
-  dataset: 'dataset',
-  algorithm: 'algorithm'
-} as const
-type TypeOfPublish = typeof TypeOfPublish[keyof typeof TypeOfPublish]
-
-export function PublishType({
-  type,
-  setType
-}: {
-  type: string
-  setType: React.Dispatch<React.SetStateAction<string>>
-}): ReactElement {
-  useEffect(() => {
-    setType(TypeOfPublish.dataset)
-  }, [])
-
-  return (
-    <div>
-      {Object.keys(TypeOfPublish).map((key, index) => {
-        const tabElement = cx({
-          [styles.selected]: key === type,
-          [styles.tabElement]: true
-        })
-        return (
-          <Button
-            size="small"
-            style="text"
-            key={index}
-            className={tabElement}
-            onClick={async () => {
-              setType(key)
-            }}
-          >
-            {key}
-          </Button>
-        )
-      })}
-    </div>
-  )
-}

src/components/pages/Publish/index.module.css

@@ -1,3 +1,8 @@
+.tabs div[class*='tabContent'] {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 1.5);

src/components/pages/Publish/index.tsx

@@ -4,9 +4,8 @@ import { usePublish, useOcean } from '@oceanprotocol/react'
 import styles from './index.module.css'
 import FormPublish from './FormPublish'
 import FormAlgoPublish from './FormAlgoPublish'
-import { PublishType, TypeOfPublish } from './PublishType'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
-import { FormContent } from '../../../@types/Form'
+import Tabs from '../../atoms/Tabs'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
 import {
   initialValues as initialValuesAlgorithm,
@@ -27,15 +26,42 @@ import {
   MetadataPublishFormAlgorithm
 } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
-import { Logger, Metadata } from '@oceanprotocol/lib'
+import { Logger, Metadata, MetadataMain } from '@oceanprotocol/lib'
 import { Persist } from '../../atoms/FormikPersist'
 import Debug from './Debug'
 import Alert from '../../atoms/Alert'
 import MetadataFeedback from '../../molecules/MetadataFeedback'
-import Button from '../../atoms/Button'
 
 const formName = 'ocean-publish-form'
 
+function TabContent({
+  publishType,
+  values
+}: {
+  publishType: MetadataMain['type']
+  values:
+    | Partial<MetadataPublishFormDataset>
+    | Partial<MetadataPublishFormAlgorithm>
+}) {
+  return (
+    <article className={styles.grid}>
+      {publishType === 'dataset' ? <FormPublish /> : <FormAlgoPublish />}
+
+      <aside>
+        <div className={styles.sticky}>
+          {publishType === 'dataset' ? (
+            <MetadataPreview values={values} />
+          ) : (
+            <MetadataAlgorithmPreview values={values} />
+          )}
+
+          <Web3Feedback />
+        </div>
+      </aside>
+    </article>
+  )
+}
+
 export default function PublishPage({
   content
 }: {
@@ -48,12 +74,12 @@ export default function PublishPage({
   const [error, setError] = useState<string>()
   const [title, setTitle] = useState<string>()
   const [did, setDid] = useState<string>()
-  const [publishType, setPublishType] = useState<string>()
+  const [publishType, setPublishType] = useState<MetadataMain['type']>()
 
   const hasFeedback = isLoading || error || success
 
   useEffect(() => {
-    publishType === TypeOfPublish.dataset
+    publishType === 'dataset'
       ? setTitle('Publishing Data Set')
       : setTitle('Publishing Algorithm')
   }, [publishType])
@@ -137,73 +163,74 @@ export default function PublishPage({
   return isInPurgatory && purgatoryData ? null : (
     <Formik
       initialValues={
-        publishType === TypeOfPublish.dataset
-          ? initialValues
-          : initialValuesAlgorithm
+        publishType === 'dataset' ? initialValues : initialValuesAlgorithm
       }
       initialStatus="empty"
       validationSchema={
-        publishType === TypeOfPublish.dataset
-          ? validationSchema
-          : validationSchemaAlgorithm
+        publishType === 'dataset' ? validationSchema : validationSchemaAlgorithm
       }
       onSubmit={async (values, { resetForm }) => {
         // move user's focus to top of screen
         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
         // kick off publishing
-        publishType === TypeOfPublish.dataset
+        publishType === 'dataset'
           ? await handleSubmit(values, resetForm)
           : await handleAlgorithmSubmit(values, resetForm)
       }}
     >
-      {({ values }) => (
-        <>
-          <Persist name={formName} ignoreFields={['isSubmitting']} />
+      {({ values }) => {
+        const tabs = [
+          {
+            title: 'Data Set',
+            content: <TabContent values={values} publishType={publishType} />
+          },
+          {
+            title: 'Algorithm',
+            content: <TabContent values={values} publishType={publishType} />
+          }
+        ]
 
-          {hasFeedback ? (
-            <MetadataFeedback
-              title={title}
-              error={error}
-              success={success}
-              loading={publishStepText}
-              setError={setError}
-              successAction={{
-                name: 'Go to data set →',
-                to: `/asset/${did}`
-              }}
-            />
-          ) : (
-            <>
-              <PublishType type={publishType} setType={setPublishType} />
-              <Alert
-                text={content.warning}
-                state="info"
-                className={styles.alert}
+        return (
+          <>
+            <Persist name={formName} ignoreFields={['isSubmitting']} />
+
+            {hasFeedback ? (
+              <MetadataFeedback
+                title={title}
+                error={error}
+                success={success}
+                loading={publishStepText}
+                setError={setError}
+                successAction={{
+                  name: 'Go to data set →',
+                  to: `/asset/${did}`
+                }}
               />
-              <article className={styles.grid}>
-                {publishType === TypeOfPublish.dataset ? (
-                  <FormPublish />
-                ) : (
-                  <FormAlgoPublish />
-                )}
+            ) : (
+              <>
+                <Alert
+                  text={content.warning}
+                  state="info"
+                  className={styles.alert}
+                />
 
-                <aside>
-                  <div className={styles.sticky}>
-                    {publishType === TypeOfPublish.dataset ? (
-                      <MetadataPreview values={values} />
-                    ) : (
-                      <MetadataAlgorithmPreview values={values} />
-                    )}
-                    <Web3Feedback />
-                  </div>
-                </aside>
-              </article>
-            </>
-          )}
+                <div className={styles.tabs}>
+                  <Tabs
+                    items={tabs}
+                    handleTabChange={(title) =>
+                      setPublishType(
+                        title.toLowerCase().replace(' ', '') as any
+                      )
+                    }
+                  />
+                </div>
+              </>
+            )}
 
-          {debug === true && <Debug values={values} />}
-        </>
-      )}
+            {debug === true && <Debug values={values} />}
+          </>
+        )
+      }}
     </Formik>
   )
 }