Report component and UI

client/src/components/templates/Asset/AssetDetails.tsx

@@ -5,6 +5,7 @@ import Markdown from '../../atoms/Markdown'
 import CategoryLink from '../../atoms/CategoryLink'
 import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
+import Report from './Report'
 
 interface AssetDetailsProps {
     metadata: MetaData
@@ -58,6 +59,8 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                     />
                 )}
 
+                <Report did={ddo.id} title={metadata.base.name} />
+
                 <div className={styles.metaFixed}>
                     <h2
                         className={styles.metaFixedTitle}
@@ -97,10 +100,6 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                     files={base.files ? base.files : []}
                     ddo={ddo}
                 />
-
-                {/* <pre>
-                    <code>{JSON.stringify(metadata, null, 2)}</code>
-                </pre> */}
             </>
         )
     }

client/src/components/templates/Asset/Report.module.scss

@@ -0,0 +1,33 @@
+@import '../../../styles/variables';
+
+.actions {
+    text-align: right;
+    margin-top: $spacer;
+}
+
+.openLink {
+    margin: 0;
+    font-size: $font-size-small;
+}
+
+.info {
+    padding: $spacer;
+    border: 1px solid $brand-grey-lighter;
+    border-radius: $border-radius;
+    margin-bottom: $spacer;
+
+    h3 {
+        font-size: $font-size-base;
+        margin-top: 0;
+        margin-bottom: $spacer / 4;
+    }
+
+    p {
+        border-bottom: 1px solid $brand-grey-lighter;
+        padding-bottom: $spacer / 2;
+    }
+
+    code {
+        padding: 0;
+    }
+}

client/src/components/templates/Asset/Report.tsx

@@ -0,0 +1,56 @@
+import React, { PureComponent } from 'react'
+import Modal from '../../atoms/Modal'
+import styles from './Report.module.scss'
+import Button from '../../atoms/Button'
+import Input from '../../atoms/Form/Input'
+import Form from '../../atoms/Form/Form'
+
+export default class Report extends PureComponent<
+    { did: string; title: string },
+    { isModalOpen: boolean }
+> {
+    public state = {
+        isModalOpen: false
+    }
+
+    public toggleModal = () => {
+        this.setState({ isModalOpen: !this.state.isModalOpen })
+    }
+
+    public render() {
+        return (
+            <div className={styles.actions}>
+                <Button
+                    link
+                    className={styles.openLink}
+                    onClick={this.toggleModal}
+                >
+                    Report Data Set
+                </Button>
+                <Modal
+                    title="Report Data Set"
+                    description="Found something wrong with this data set? Tell us about it and we will take a look."
+                    isOpen={this.state.isModalOpen}
+                    toggleModal={this.toggleModal}
+                >
+                    <div className={styles.info}>
+                        <h3>{this.props.title}</h3>
+                        <p>
+                            <code>{this.props.did}</code>
+                        </p>
+
+                        <Form minimal>
+                            <Input
+                                type="textarea"
+                                name="comment"
+                                label="Comment"
+                                help="Briefly describe what is wrong with this asset."
+                            />
+                            <Button primary>Report Data Set</Button>
+                        </Form>
+                    </div>
+                </Modal>
+            </div>
+        )
+    }
+}