Merge pull request #394 from oceanprotocol/publish-algo-tabs

refactor publish page for tab usage

content/pages/publish/form-algorithm.json

@@ -1,5 +1,5 @@
 {
-  "title": "Publish",
+  "title": "Publish an Algorithm",
   "data": [
     {
       "name": "name",

content/pages/publish/form-dataset.json

@@ -1,5 +1,5 @@
 {
-  "title": "Publish",
+  "title": "Publish a Data Set",
   "data": [
     {
       "name": "name",

content/pages/publish/index.json

@@ -1,5 +1,5 @@
 {
   "title": "Publish",
-  "description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers.",
+  "description": "Highlight the important features of your data set or algorithm to make it more discoverable and catch the interest of data consumers.",
   "warning": "Given the beta status, publishing on Ropsten or Rinkeby first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms)."
 }

src/components/atoms/Tabs.module.css

@@ -13,6 +13,7 @@
   text-transform: uppercase;
   cursor: pointer;
   color: var(--color-secondary);
+  background-color: var(--background-body);
   border: 1px solid var(--border-color);
   margin-right: -1px;
   min-width: 100px;
@@ -29,7 +30,7 @@
 }
 
 .tab[aria-selected='true'] {
-  background: var(--font-color-heading);
+  background-color: var(--font-color-heading);
   color: var(--background-body);
   border-color: var(--font-color-heading);
 }

src/components/molecules/MetadataPreview.module.css

@@ -1,5 +1,6 @@
 .preview {
   font-size: var(--font-size-small);
+  margin-top: calc(var(--spacer) / 2);
   margin-bottom: var(--spacer);
 }
 

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/FormAlgoPublish.tsx

@@ -7,15 +7,16 @@ import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 import { MetadataPublishFormAlgorithm } from '../../../@types/MetaData'
+import stylesIndex from './index.module.css'
 
 const query = graphql`
   query {
     content: allFile(
-      filter: { relativePath: { eq: "pages/form-algorithm.json" } }
+      filter: { relativePath: { eq: "pages/publish/form-algorithm.json" } }
     ) {
       edges {
         node {
-          childPagesJson {
+          childPublishJson {
             title
             data {
               name
@@ -38,7 +39,7 @@ const query = graphql`
 
 export default function FormPublish(): ReactElement {
   const data = useStaticQuery(query)
-  const content: FormContent = data.content.edges[0].node.childPagesJson
+  const content: FormContent = data.content.edges[0].node.childPublishJson
   const { ocean, account } = useOcean()
   const {
     status,
@@ -56,7 +57,7 @@ export default function FormPublish(): ReactElement {
   useEffect(() => {
     setErrors({})
     setTouched({})
-    resetForm({ values: initialValues, status: 'empty' })
+
     // setSubmitting(false)
   }, [setErrors, setTouched])
 
@@ -124,6 +125,7 @@ export default function FormPublish(): ReactElement {
       // do we need this?
       onChange={() => status === 'empty' && setStatus(null)}
     >
+      <h2 className={stylesIndex.formTitle}>{content.title}</h2>
       {content.data.map((field: FormFieldProps) => (
         <Field
           key={field.name}

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

@@ -1,6 +1,9 @@
 .form {
   composes: box from '../../atoms/Box.module.css';
   margin-bottom: var(--spacer);
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .actions {

src/components/pages/Publish/FormPublish.tsx

@@ -7,15 +7,16 @@ import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 import { MetadataPublishFormDataset } from '../../../@types/MetaData'
+import stylesIndex from './index.module.css'
 
 const query = graphql`
   query {
     content: allFile(
-      filter: { relativePath: { eq: "pages/form-dataset.json" } }
+      filter: { relativePath: { eq: "pages/publish/form-dataset.json" } }
     ) {
       edges {
         node {
-          childPagesJson {
+          childPublishJson {
             title
             data {
               name
@@ -38,7 +39,7 @@ const query = graphql`
 
 export default function FormPublish(): ReactElement {
   const data = useStaticQuery(query)
-  const content: FormContent = data.content.edges[0].node.childPagesJson
+  const content: FormContent = data.content.edges[0].node.childPublishJson
   const { ocean, account } = useOcean()
   const {
     status,
@@ -82,6 +83,7 @@ export default function FormPublish(): ReactElement {
       // do we need this?
       onChange={() => status === 'empty' && setStatus(null)}
     >
+      <h2 className={stylesIndex.formTitle}>{content.title}</h2>
       {content.data.map((field: FormFieldProps) => (
         <Field
           key={field.name}

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,16 @@
+.tabs ul[class*='tabList'] {
+  background-color: var(--background-body);
+  border: 1px solid var(--border-color);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.tabs div[class*='tabContent'] {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 1.5);
@@ -16,8 +29,17 @@ div.alert {
     grid-template-columns: 1.618fr 1fr;
   }
 
+  .tabs ul[class*='tabList'] {
+    /* fake the above 1.618fr column */
+    max-width: calc((100% / 1.618) - calc(var(--spacer) / 1.075));
+  }
+
   .sticky {
     position: sticky;
     top: calc(var(--spacer) / 2);
   }
 }
+
+.formTitle {
+  font-size: var(--font-size-h4);
+}

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,14 +26,40 @@ 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'
+const formNameDatasets = 'ocean-publish-form-datasets'
+const formNameAlgorithms = 'ocean-publish-form-algorithms'
+
+function TabContent({
+  publishType,
+  values
+}: {
+  publishType: MetadataMain['type']
+  values: Partial<MetadataPublishFormAlgorithm | MetadataPublishFormDataset>
+}) {
+  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 +73,14 @@ 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']>(
+    'dataset'
+  )
 
   const hasFeedback = isLoading || error || success
 
   useEffect(() => {
-    publishType === TypeOfPublish.dataset
+    publishType === 'dataset'
       ? setTitle('Publishing Data Set')
       : setTitle('Publishing Algorithm')
   }, [publishType])
@@ -137,28 +164,43 @@ 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 }) => (
+      {({ values }) => {
+        const tabs = [
+          {
+            title: 'Data Set',
+            content: <TabContent values={values} publishType={publishType} />
+          },
+          {
+            title: 'Algorithm',
+            content: <TabContent values={values} publishType={publishType} />
+          }
+        ]
+
+        return (
           <>
-          <Persist name={formName} ignoreFields={['isSubmitting']} />
+            <Persist
+              name={
+                publishType === 'dataset'
+                  ? formNameDatasets
+                  : formNameAlgorithms
+              }
+              ignoreFields={['isSubmitting']}
+            />
 
             {hasFeedback ? (
               <MetadataFeedback
@@ -174,36 +216,26 @@ export default function PublishPage({
               />
             ) : (
               <>
-              <PublishType type={publishType} setType={setPublishType} />
                 <Alert
                   text={content.warning}
                   state="info"
                   className={styles.alert}
                 />
-              <article className={styles.grid}>
-                {publishType === TypeOfPublish.dataset ? (
-                  <FormPublish />
-                ) : (
-                  <FormAlgoPublish />
-                )}
 
-                <aside>
-                  <div className={styles.sticky}>
-                    {publishType === TypeOfPublish.dataset ? (
-                      <MetadataPreview values={values} />
-                    ) : (
-                      <MetadataAlgorithmPreview values={values} />
-                    )}
-                    <Web3Feedback />
-                  </div>
-                </aside>
-              </article>
+                <Tabs
+                  className={styles.tabs}
+                  items={tabs}
+                  handleTabChange={(title) =>
+                    setPublishType(title.toLowerCase().replace(' ', '') as any)
+                  }
+                />
               </>
             )}
 
             {debug === true && <Debug values={values} />}
           </>
-      )}
+        )
+      }}
     </Formik>
   )
 }

src/pages/publish.tsx

@@ -4,7 +4,7 @@ import Page from '../components/templates/Page'
 import { graphql, PageProps } from 'gatsby'
 
 export default function PageGatsbyPublish(props: PageProps): ReactElement {
-  const content = (props.data as any).content.edges[0].node.childPagesJson
+  const content = (props.data as any).content.edges[0].node.childPublishJson
   const { title, description } = content
 
   return (
@@ -16,10 +16,12 @@ export default function PageGatsbyPublish(props: PageProps): ReactElement {
 
 export const contentQuery = graphql`
   query PublishPageQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/index.json" } }) {
+    content: allFile(
+      filter: { relativePath: { eq: "pages/publish/index.json" } }
+    ) {
       edges {
         node {
-          childPagesJson {
+          childPublishJson {
             title
             description
             warning

tests/unit/pages/publish.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Publish from '../../../src/components/pages/Publish'
-import content from '../../../content/pages/index.json'
+import content from '../../../content/pages/publish/index.json'
 
 describe('Home', () => {
   it('renders without crashing', () => {