prototype adding multiple files UI

package-lock.json

@@ -1164,6 +1164,11 @@
       "integrity": "sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==",
       "dev": true
     },
+    "@types/is-url": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@types/is-url/-/is-url-1.2.28.tgz",
+      "integrity": "sha1-kU2r1QVG2bAUKAbkLHK8fCt+B4c="
+    },
     "@types/jest": {
       "version": "24.0.0",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.0.0.tgz",
@@ -1247,6 +1252,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz",
+      "integrity": "sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
@@ -5616,6 +5629,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -9865,6 +9886,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
+    },
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
@@ -16571,6 +16597,11 @@
         "react-side-effect": "^1.1.0"
       }
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -16938,6 +16969,17 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-transition-group": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",
+      "integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==",
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -17,14 +17,18 @@
   "dependencies": {
     "@oceanprotocol/art": "^2.2.0",
     "@oceanprotocol/squid": "^0.2.8",
+    "@types/is-url": "^1.2.28",
     "@types/react-helmet": "^5.0.8",
+    "@types/react-transition-group": "^2.0.15",
     "classnames": "^2.2.6",
     "eslint": "^5.6.0",
+    "is-url": "^1.2.4",
     "query-string": "^6.2.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1",
+    "react-transition-group": "^2.5.3",
     "slugify": "^1.3.4",
     "web3": "^1.0.0-beta.43"
   },

src/Routes.tsx

@@ -5,7 +5,7 @@ import About from './routes/About'
 import Details from './routes/Details'
 import Home from './routes/Home'
 import NotFound from './routes/NotFound'
-import Publish from './routes/Publish'
+import Publish from './routes/Publish/'
 import Search from './routes/Search'
 import Styleguide from './routes/Styleguide'
 

src/components/atoms/Form/Input.tsx

@@ -22,6 +22,7 @@ interface InputProps {
     onChange?: any
     rows?: number
     group?: any
+    multiple?: boolean
 }
 
 interface InputState {
@@ -150,7 +151,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
     }
 
     public render() {
-        const { name, label, required, help, additionalComponent } = this.props
+        const {
+            name,
+            label,
+            required,
+            help,
+            additionalComponent,
+            multiple
+        } = this.props
 
         return (
             <Row>
@@ -162,6 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
 
                 {help && <Help>{help}</Help>}
 
+                {multiple && 'hello'}
+
                 {additionalComponent && additionalComponent}
             </Row>
         )

src/data/form-publish.json

@@ -32,7 +32,8 @@
       "label": "Files",
       "placeholder": "i.e. https://file.com/file.json",
       "type": "text",
-      "required": true
+      "required": true,
+      "help": "Provide one or multiple links to your data asset(s)."
     },
     "type": {
       "label": "Type",

src/routes/Publish/Files/Item.module.scss

@@ -0,0 +1,39 @@
+@import '../../../styles/variables';
+
+.linkType {
+    margin-left: $spacer / 4;
+    font-size: $font-size-small;
+}
+
+.linkUrl {
+    font-size: $font-size-mini;
+    display: block;
+    font-family: $font-family-base;
+
+    // TODO: truncate long urls with ellipsis
+}
+
+.remove {
+    margin: 0;
+    padding: 0;
+    appearance: none;
+    border: 0;
+    background: none;
+    font-family: $font-family-button;
+    font-size: $font-size-h4;
+    color: $brand-grey-light;
+    line-height: $line-height;
+    cursor: pointer;
+    margin-left: $spacer / 2;
+    display: inline-block;
+    vertical-align: middle;
+    position: absolute;
+    top: $spacer / 4;
+    right: 0;
+    transition: .2s ease-out;
+
+    &:hover,
+    &:focus {
+        opacity: .7;
+    }
+}

src/routes/Publish/Files/Item.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './Item.module.scss'
+
+const Item = ({ item, removeItem }: { item: string; removeItem: any }) => (
+    <li>
+        <a href={item}>{item}</a>
+        <button
+            type="button"
+            className={styles.remove}
+            title="Remove item"
+            onClick={removeItem}
+        >
+            &times;
+        </button>
+    </li>
+)
+
+export default Item

src/routes/Publish/Files/ItemForm.module.scss

@@ -0,0 +1,57 @@
+@import '../../../styles/variables';
+
+.itemForm {
+    margin-top: $spacer / 2;
+    margin-bottom: $spacer / 1.5;
+    padding-left: $spacer / 2;
+
+    > div {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    :global(.input-wrap) {
+        flex: 1 1 100%;
+    }
+
+    :global(.form__group) {
+        margin-bottom: $spacer / 2;
+        flex: 1 1 100%;
+
+        @media (min-width: $break-point--small) {
+            flex: 0 0 48%;
+        }
+    }
+
+    label,
+    input,
+    select,
+    textarea,
+    input::placeholder,
+    button {
+        font-size: $font-size-small;
+    }
+
+    label {
+        margin-bottom: $spacer / 8;
+    }
+
+    input,
+    select,
+    button {
+        height: 37px;
+        min-height: 37px;
+    }
+
+    button {
+        padding: 0 $spacer / 2;
+        margin-top: $spacer / 8;
+    }
+}
+
+.error {
+    font-size: $font-size-small;
+    color: $red;
+    margin-left: $spacer / 4;
+}

src/routes/Publish/Files/ItemForm.tsx

@@ -0,0 +1,89 @@
+import React, { PureComponent } from 'react'
+import isUrl from 'is-url'
+import Input from '../../../components/atoms/Form/Input'
+import Button from '../../../components/atoms/Button'
+import styles from './ItemForm.module.scss'
+
+interface ItemFormProps {
+    addItem: any
+}
+
+interface ItemFormStates {
+    url: string
+    hasError: boolean
+    noUrl: boolean
+}
+
+export default class ItemForm extends PureComponent<
+    ItemFormProps,
+    ItemFormStates
+> {
+    public state: ItemFormStates = {
+        url: '',
+        hasError: false,
+        noUrl: false
+    }
+
+    public handleSubmit = (e: Event) => {
+        e.preventDefault()
+
+        const { url } = this.state
+
+        // return when required fields are empty, and url value is no url
+        // Can't use browser validation cause we are in a form within a form
+        if (!url) {
+            this.setState({ hasError: true })
+            return
+        }
+
+        if (url && !isUrl(url)) {
+            this.setState({ noUrl: true })
+            return
+        }
+
+        this.props.addItem(url)
+    }
+
+    public onChangeUrl = (e: Event) => {
+        // this.setState({ url: e.target.value })
+        this.clearErrors()
+    }
+
+    public clearErrors() {
+        if (this.state.hasError) this.setState({ hasError: false })
+        if (this.state.noUrl) this.setState({ noUrl: true })
+    }
+
+    public render() {
+        const { url, hasError, noUrl } = this.state
+
+        return (
+            <fieldset className={styles.itemForm}>
+                <Input
+                    label="Url"
+                    name="url"
+                    required
+                    type="url"
+                    placeholder="e.g. https://url.com/info"
+                    value={url}
+                    onChange={this.onChangeUrl}
+                />
+
+                <Button onClick={(e: Event) => this.handleSubmit(e)}>
+                    Add Link
+                </Button>
+
+                {hasError && (
+                    <span className={styles.error}>
+                        Please fill in all required fields.
+                    </span>
+                )}
+                {noUrl && (
+                    <span className={styles.error}>
+                        Please enter a valid URL.
+                    </span>
+                )}
+            </fieldset>
+        )
+    }
+}

src/routes/Publish/Files/index.module.scss

@@ -0,0 +1,26 @@
+@import '../../../styles/variables';
+
+.newItems {
+    margin-top: $spacer / 2;
+    border-top: 1px solid $brand-grey-lighter;
+}
+
+.itemsList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    margin-bottom: $spacer / 2;
+    font-family: $font-family-button;
+    color: $brand-grey-light;
+
+    li {
+        border-bottom: 1px solid $brand-grey-lighter;
+        padding: $spacer / 3 $spacer / 2 $spacer / 3 $spacer / 2;
+        position: relative;
+        display: block;
+    }
+
+    a {
+        color: $brand-grey;
+    }
+}

src/routes/Publish/Files/index.tsx

@@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import Button from '../../../components/atoms/Button'
+import ItemForm from './ItemForm'
+import Item from './Item'
+import styles from './index.module.scss'
+
+interface FilesProps {
+    files: any
+    // resetForm: any
+}
+
+interface FilesStates {
+    isFormShown: boolean
+}
+
+export default class Files extends PureComponent<FilesProps, FilesStates> {
+    public state: FilesStates = { isFormShown: false }
+
+    public toggleForm = (e: Event) => {
+        e.preventDefault()
+
+        this.setState({ isFormShown: !this.state.isFormShown })
+    }
+
+    public addItem = (value: string) => {
+        this.props.files.push(value)
+        // this.props.resetForm()
+        this.setState({ isFormShown: !this.state.isFormShown })
+    }
+
+    public removeItem = (index: number) => {
+        this.props.files.remove(index)
+    }
+
+    public render() {
+        const { isFormShown } = this.state
+
+        return (
+            <div className={styles.newItems}>
+                {this.props.files && (
+                    <TransitionGroup
+                        component="ul"
+                        className={styles.itemsList}
+                    >
+                        {this.props.files.map((item: string, index: number) => (
+                            <CSSTransition
+                                key={index}
+                                timeout={400}
+                                classNames="fade"
+                            >
+                                <Item
+                                    item={item}
+                                    removeItem={() => this.removeItem(index)}
+                                />
+                            </CSSTransition>
+                        ))}
+                    </TransitionGroup>
+                )}
+
+                <Button link onClick={this.toggleForm}>
+                    {isFormShown ? '- Cancel' : '+ Add a file'}
+                </Button>
+
+                <CSSTransition
+                    classNames="grow"
+                    in={isFormShown}
+                    timeout={200}
+                    unmountOnExit
+                    onExit={() => this.setState({ isFormShown: false })}
+                >
+                    <ItemForm addItem={this.addItem} />
+                </CSSTransition>
+            </div>
+        )
+    }
+}

src/routes/Publish/index.tsx

@@ -1,14 +1,15 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
-import Route from '../components/templates/Route'
-import Button from '../components/atoms/Button'
-import Form from '../components/atoms/Form/Form'
-import Input from '../components/atoms/Form/Input'
-import { User } from '../context/User'
-import AssetModel from '../models/AssetModel'
-import Web3message from '../components/Web3message'
+import Route from '../../components/templates/Route'
+import Button from '../../components/atoms/Button'
+import Form from '../../components/atoms/Form/Form'
+import Input from '../../components/atoms/Form/Input'
+import { User } from '../../context/User'
+import AssetModel from '../../models/AssetModel'
+import Web3message from '../../components/Web3message'
+import Files from './Files/'
 
-import form from '../data/form-publish.json'
+import form from '../../data/form-publish.json'
 
 type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
@@ -69,6 +70,9 @@ class Publish extends Component<{}, PublishState> {
                     onChange={onChange}
                     rows={value.rows}
                     value={(this.state as any)[key]}
+                    additionalComponent={
+                        key === 'files' && <Files files={this.state.files} />
+                    }
                 />
             )
         })
@@ -143,6 +147,7 @@ class Publish extends Component<{}, PublishState> {
                 AssetModel.additionalInformation
             )
         }
+
         try {
             const asset = await this.context.ocean.registerAsset(
                 newAsset,