From 82a12a915ddc0e13bfbb867e672bb0fd1f0165b8 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Feb 2021 16:15:22 +0100 Subject: [PATCH 1/8] refactor publish page for tab usage --- .../organisms/AssetActions/index.tsx | 1 - .../pages/Publish/PublishType.module.css | 29 ---- src/components/pages/Publish/PublishType.tsx | 48 ------ src/components/pages/Publish/index.module.css | 5 + src/components/pages/Publish/index.tsx | 141 +++++++++++------- 5 files changed, 89 insertions(+), 135 deletions(-) delete mode 100644 src/components/pages/Publish/PublishType.module.css delete mode 100644 src/components/pages/Publish/PublishType.tsx 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/PublishType.module.css b/src/components/pages/Publish/PublishType.module.css deleted file mode 100644 index 5f7809068..000000000 --- a/src/components/pages/Publish/PublishType.module.css +++ /dev/null @@ -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); -} diff --git a/src/components/pages/Publish/PublishType.tsx b/src/components/pages/Publish/PublishType.tsx deleted file mode 100644 index 0bb8370d8..000000000 --- a/src/components/pages/Publish/PublishType.tsx +++ /dev/null @@ -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> -}): 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..162f5a277 100644 --- a/src/components/pages/Publish/index.module.css +++ b/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); diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index accbdd865..bb8cd99f9 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,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 + | Partial +}) { + return ( +
+ {publishType === 'dataset' ? : } + + +
+ ) +} + export default function PublishPage({ content }: { @@ -48,12 +74,12 @@ export default function PublishPage({ const [error, setError] = useState() const [title, setTitle] = useState() const [did, setDid] = useState() - const [publishType, setPublishType] = useState() + const [publishType, setPublishType] = useState() 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 : ( { // 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 ? ( - - ) : ( - <> - - + + + {hasFeedback ? ( + -
- {publishType === TypeOfPublish.dataset ? ( - - ) : ( - - )} + ) : ( + <> + - -
- - )} +
+ + setPublishType( + title.toLowerCase().replace(' ', '') as any + ) + } + /> +
+ + )} - {debug === true && } - - )} + {debug === true && } + + ) + }} ) } From 41fd894ce6f0516bca7e095e7e060734e5a14cbb Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Feb 2021 16:28:56 +0100 Subject: [PATCH 2/8] output form titles --- content/pages/form-algorithm.json | 2 +- content/pages/form-dataset.json | 2 +- src/components/pages/Publish/FormAlgoPublish.tsx | 2 ++ src/components/pages/Publish/FormPublish.tsx | 2 ++ src/components/pages/Publish/index.module.css | 4 ++++ src/components/pages/Publish/index.tsx | 4 +--- 6 files changed, 11 insertions(+), 5 deletions(-) diff --git a/content/pages/form-algorithm.json b/content/pages/form-algorithm.json index b4cf7bac0..7ad1f8895 100644 --- a/content/pages/form-algorithm.json +++ b/content/pages/form-algorithm.json @@ -1,5 +1,5 @@ { - "title": "Publish", + "title": "Publish an Alorithm", "data": [ { "name": "name", diff --git a/content/pages/form-dataset.json b/content/pages/form-dataset.json index 6f85d26e4..8e9682778 100644 --- a/content/pages/form-dataset.json +++ b/content/pages/form-dataset.json @@ -1,5 +1,5 @@ { - "title": "Publish", + "title": "Publish a Data Set", "data": [ { "name": "name", diff --git a/src/components/pages/Publish/FormAlgoPublish.tsx b/src/components/pages/Publish/FormAlgoPublish.tsx index 6757c800e..045af21f4 100644 --- a/src/components/pages/Publish/FormAlgoPublish.tsx +++ b/src/components/pages/Publish/FormAlgoPublish.tsx @@ -7,6 +7,7 @@ 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 { @@ -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) => ( - | Partial + values: Partial }) { return (
From f79d8c2c91de7e4af158eba19ac3bb2cb407d72d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Feb 2021 16:37:50 +0100 Subject: [PATCH 3/8] content updates --- content/pages/{ => publish}/form-algorithm.json | 0 content/pages/{ => publish}/form-dataset.json | 0 content/pages/{ => publish}/index.json | 2 +- src/components/atoms/Tabs.module.css | 3 ++- src/components/pages/Publish/FormAlgoPublish.tsx | 6 +++--- src/components/pages/Publish/FormPublish.tsx | 6 +++--- src/components/pages/Publish/index.tsx | 4 +++- src/pages/publish.tsx | 8 +++++--- 8 files changed, 17 insertions(+), 12 deletions(-) rename content/pages/{ => publish}/form-algorithm.json (100%) rename content/pages/{ => publish}/form-dataset.json (100%) rename content/pages/{ => publish}/index.json (82%) diff --git a/content/pages/form-algorithm.json b/content/pages/publish/form-algorithm.json similarity index 100% rename from content/pages/form-algorithm.json rename to content/pages/publish/form-algorithm.json diff --git a/content/pages/form-dataset.json b/content/pages/publish/form-dataset.json similarity index 100% rename from content/pages/form-dataset.json rename to content/pages/publish/form-dataset.json 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/pages/Publish/FormAlgoPublish.tsx b/src/components/pages/Publish/FormAlgoPublish.tsx index 045af21f4..5b148e9a8 100644 --- a/src/components/pages/Publish/FormAlgoPublish.tsx +++ b/src/components/pages/Publish/FormAlgoPublish.tsx @@ -12,11 +12,11 @@ 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 @@ -39,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, diff --git a/src/components/pages/Publish/FormPublish.tsx b/src/components/pages/Publish/FormPublish.tsx index 96e67e66e..7433e573a 100644 --- a/src/components/pages/Publish/FormPublish.tsx +++ b/src/components/pages/Publish/FormPublish.tsx @@ -12,11 +12,11 @@ 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 @@ -39,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, diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 1c85bf02b..86dd6ddcc 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -72,7 +72,9 @@ 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 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 From 193670ed5f2a77991adb36d3a968e3e00a21df63 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Feb 2021 16:42:01 +0100 Subject: [PATCH 4/8] more tab switching --- src/components/pages/Publish/index.tsx | 29 +++++++++++++++----------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 86dd6ddcc..36664181e 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -32,7 +32,8 @@ import Debug from './Debug' import Alert from '../../atoms/Alert' import MetadataFeedback from '../../molecules/MetadataFeedback' -const formName = 'ocean-publish-form' +const formNameDatasets = 'ocean-publish-form-datasets' +const formNameAlgorithms = 'ocean-publish-form-algorithms' function TabContent({ publishType, @@ -192,7 +193,14 @@ export default function PublishPage({ return ( <> - + {hasFeedback ? ( -
- - setPublishType( - title.toLowerCase().replace(' ', '') as any - ) - } - /> -
+ + setPublishType(title.toLowerCase().replace(' ', '') as any) + } + /> )} From d27812fc51dc854c31c185219fd54fa4d7f4cb6e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Feb 2021 17:18:40 +0100 Subject: [PATCH 5/8] typecheck fix --- tests/unit/pages/publish.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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', () => { From e157278e37a82305852581a89f28b00c96cf953f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Feb 2021 18:36:11 +0100 Subject: [PATCH 6/8] form tabs thingy --- src/components/molecules/MetadataPreview.module.css | 1 + src/components/pages/Publish/FormPublish.module.css | 3 +++ src/components/pages/Publish/index.module.css | 13 +++++++++++++ 3 files changed, 17 insertions(+) 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/pages/Publish/FormPublish.module.css b/src/components/pages/Publish/FormPublish.module.css index 668d286a3..6b4b09367 100644 --- a/src/components/pages/Publish/FormPublish.module.css +++ b/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 { diff --git a/src/components/pages/Publish/index.module.css b/src/components/pages/Publish/index.module.css index f15964a24..af5f8bbf5 100644 --- a/src/components/pages/Publish/index.module.css +++ b/src/components/pages/Publish/index.module.css @@ -1,6 +1,14 @@ +.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 { @@ -21,6 +29,11 @@ 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); From ea9952cc5631a1514aed607a2a4933078b8525f5 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 23 Feb 2021 10:50:15 +0100 Subject: [PATCH 7/8] typo --- content/pages/publish/form-algorithm.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/pages/publish/form-algorithm.json b/content/pages/publish/form-algorithm.json index 7ad1f8895..fc7be3b4e 100644 --- a/content/pages/publish/form-algorithm.json +++ b/content/pages/publish/form-algorithm.json @@ -1,5 +1,5 @@ { - "title": "Publish an Alorithm", + "title": "Publish an Algorithm", "data": [ { "name": "name", From e532ec3891c5698d196823b95cf48fecedcb5807 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 23 Feb 2021 11:14:41 +0100 Subject: [PATCH 8/8] remove value reset on mount --- src/components/pages/Publish/FormAlgoPublish.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/Publish/FormAlgoPublish.tsx b/src/components/pages/Publish/FormAlgoPublish.tsx index 5b148e9a8..a37b5c2c0 100644 --- a/src/components/pages/Publish/FormAlgoPublish.tsx +++ b/src/components/pages/Publish/FormAlgoPublish.tsx @@ -57,7 +57,7 @@ export default function FormPublish(): ReactElement { useEffect(() => { setErrors({}) setTouched({}) - resetForm({ values: initialValues, status: 'empty' }) + // setSubmitting(false) }, [setErrors, setTouched])