diff --git a/content/pages/form-algorithm.json b/content/pages/publish/form-algorithm.json similarity index 98% rename from content/pages/form-algorithm.json rename to content/pages/publish/form-algorithm.json index b4cf7bac0..fc7be3b4e 100644 --- a/content/pages/form-algorithm.json +++ b/content/pages/publish/form-algorithm.json @@ -1,5 +1,5 @@ { - "title": "Publish", + "title": "Publish an Algorithm", "data": [ { "name": "name", diff --git a/content/pages/form-dataset.json b/content/pages/publish/form-dataset.json similarity index 98% rename from content/pages/form-dataset.json rename to content/pages/publish/form-dataset.json index 6f85d26e4..8e9682778 100644 --- a/content/pages/form-dataset.json +++ b/content/pages/publish/form-dataset.json @@ -1,5 +1,5 @@ { - "title": "Publish", + "title": "Publish a Data Set", "data": [ { "name": "name", diff --git a/content/pages/index.json b/content/pages/publish/index.json similarity index 82% rename from content/pages/index.json rename to content/pages/publish/index.json index 36b3947f0..00d2d5d91 100644 --- a/content/pages/index.json +++ b/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)." } diff --git a/src/components/atoms/Tabs.module.css b/src/components/atoms/Tabs.module.css index 1495753a1..3d76fc0d6 100644 --- a/src/components/atoms/Tabs.module.css +++ b/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); } diff --git a/src/components/molecules/MetadataPreview.module.css b/src/components/molecules/MetadataPreview.module.css index e1a14e9b6..3e894e133 100644 --- a/src/components/molecules/MetadataPreview.module.css +++ b/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); } diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index 3d1c38f12..cf2084ea4 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/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' diff --git a/src/components/pages/Publish/FormAlgoPublish.tsx b/src/components/pages/Publish/FormAlgoPublish.tsx index 6757c800e..a37b5c2c0 100644 --- a/src/components/pages/Publish/FormAlgoPublish.tsx +++ b/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)} > +

{content.title}

{content.data.map((field: FormFieldProps) => ( status === 'empty' && setStatus(null)} > +

{content.title}

{content.data.map((field: FormFieldProps) => ( > -}): ReactElement { - useEffect(() => { - setType(TypeOfPublish.dataset) - }, []) - - return ( -
- {Object.keys(TypeOfPublish).map((key, index) => { - const tabElement = cx({ - [styles.selected]: key === type, - [styles.tabElement]: true - }) - return ( - - ) - })} -
- ) -} diff --git a/src/components/pages/Publish/index.module.css b/src/components/pages/Publish/index.module.css index 4a6d8a9df..af5f8bbf5 100644 --- a/src/components/pages/Publish/index.module.css +++ b/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); +} diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index accbdd865..36664181e 100644 --- a/src/components/pages/Publish/index.tsx +++ b/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 +}) { + return ( +
+ {publishType === 'dataset' ? : } + + +
+ ) +} export default function PublishPage({ content @@ -48,12 +73,14 @@ export default function PublishPage({ const [error, setError] = useState() const [title, setTitle] = useState() const [did, setDid] = useState() - const [publishType, setPublishType] = useState() + const [publishType, setPublishType] = useState( + 'dataset' + ) const hasFeedback = isLoading || error || success useEffect(() => { - publishType === TypeOfPublish.dataset + publishType === 'dataset' ? setTitle('Publishing Data Set') : setTitle('Publishing Algorithm') }, [publishType]) @@ -137,73 +164,78 @@ export default function PublishPage({ return isInPurgatory && purgatoryData ? null : ( { // 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: + }, + { + title: 'Algorithm', + content: + } + ] - {hasFeedback ? ( - + - ) : ( - <> - - -
- {publishType === TypeOfPublish.dataset ? ( - - ) : ( - - )} + ) : ( + <> + - -
- - )} + + setPublishType(title.toLowerCase().replace(' ', '') as any) + } + /> + + )} - {debug === true && } - - )} + {debug === true && } + + ) + }} ) } diff --git a/src/pages/publish.tsx b/src/pages/publish.tsx index 8292951ba..02f7d47da 100644 --- a/src/pages/publish.tsx +++ b/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 diff --git a/tests/unit/pages/publish.test.tsx b/tests/unit/pages/publish.test.tsx index 8c09f6b16..387ea5bb1 100644 --- a/tests/unit/pages/publish.test.tsx +++ b/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', () => {