Confirm dialogs on delete upload and assign doi.

gui/src/components/search/DatasetList.js

@@ -15,6 +15,7 @@ import EditUserMetadataDialog from '../EditUserMetadataDialog'
 import DownloadButton from '../DownloadButton'
 import ClipboardIcon from '@material-ui/icons/Assignment'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
+import ConfirmDialog from '../uploads/ConfirmDialog'
 
 class DOIUnstyled extends React.Component {
   static propTypes = {
@@ -70,6 +71,10 @@ class DatasetActionsUnstyled extends React.Component {
     }
   })
 
+  state = {
+    confirmDoi: false
+  }
+
   constructor(props) {
     super(props)
     this.handleClickDOI = this.handleClickDOI.bind(this)
@@ -83,7 +88,7 @@ class DatasetActionsUnstyled extends React.Component {
     this.props.history.push(`/dataset/id/${id}`)
   }
 
-  handleClickDOI() {
+  handleClickDOI(after) {
     const {api, dataset, onChange, raiseError} = this.props
     const datasetName = dataset.name
 
@@ -92,6 +97,9 @@ class DatasetActionsUnstyled extends React.Component {
         if (onChange) {
           onChange(dataset)
         }
+        if (after) {
+          after()
+        }
       })
       .catch(raiseError)
   }
@@ -144,10 +152,23 @@ class DatasetActionsUnstyled extends React.Component {
         total={dataset.total} onEditComplete={this.handleEdit}
       />}
       {editable && canAssignDOI && <Tooltip title="Assign a DOI to this dataset.">
-        <IconButton onClick={this.handleClickDOI}>
+        <IconButton onClick={() => this.setState({confirmDoi: true})}>
           <DOIIcon />
         </IconButton>
       </Tooltip>}
+      <ConfirmDialog
+        open={this.state.confirmDoi}
+        title="Assign a DOI"
+        content={`
+          DOIs are **permanent**. Are you sure that you want to assign a DOI to this
+          dataset? Once the DOI was assigned, entries cannot removed from the dataset and
+          the dataset cannot be deleted.
+        `}
+        onClose={() => this.setState({confirmDoi: false})}
+        onConfirm={() => {
+          this.handleClickDOI(() => this.setState({confirmDoi: false}))
+        }}
+      />
     </FormGroup>
   }
 }

gui/src/components/uploads/ConfirmDialog.js

@@ -10,52 +10,32 @@ import Markdown from '../Markdown'
 
 class ConfirmDialog extends React.Component {
   static propTypes = {
-    onPublish: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired,
+    confirmLabel: PropTypes.string,
+    content: PropTypes.string.isRequired,
+    onConfirm: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     open: PropTypes.bool.isRequired
   }
 
-  state = {
-    withEmbargo: false
-  }
-
   render() {
-    const { onPublish, onClose, open } = this.props
-    const { withEmbargo } = this.state
+    const { onConfirm, onClose, open, title, content,confirmLabel } = this.props
     return (
       <div>
         <Dialog
           open={open}
           onClose={onClose}
         >
-          <DialogTitle>Publish data</DialogTitle>
+          <DialogTitle>{title}</DialogTitle>
           <DialogContent>
-            <Markdown>{`
-              If you agree the selected uploads will move out of your private staging
-              area into the public [NOMAD Repository](https://repository.nomad-coe.eu/NomadRepository-1.1/).
-              If you wish to put an embargo on your data it will last upto 36 month. Afterwards, your data will
-              be made public. All public data will be made available under the Creative
-              Commons Attribution license ([CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)).
-
-              The published data will be added to the NOMAD Repository's index overnight.
-              Therefore, it will take until tomorrow before your data appears in the
-              [NOMAD Repository](https://repository.nomad-coe.eu/NomadRepository-1.1/).
-            `}</Markdown>
-
-            <FormGroup row style={{alignItems: 'center'}}>
-              <Checkbox
-                checked={!withEmbargo}
-                onChange={() => this.setState({withEmbargo: !withEmbargo})}
-              />
-              <FormLabel>publish without embargo</FormLabel>
-            </FormGroup>
+            <Markdown>{content}</Markdown>
           </DialogContent>
           <DialogActions>
             <Button onClick={onClose}>
               Cancel
             </Button>
-            <Button onClick={() => onPublish(withEmbargo)} color="primary" autoFocus>
-              {withEmbargo ? 'Publish with embargo' : 'Publish'}
+            <Button onClick={onConfirm} color="primary" autoFocus>
+              {confirmLabel || 'Confirm'}
             </Button>
           </DialogActions>
         </Dialog>

gui/src/components/uploads/Upload.js

@@ -2,7 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { withStyles, ExpansionPanel, ExpansionPanelSummary, Typography,
   ExpansionPanelDetails, Stepper, Step, StepLabel, Tooltip, CircularProgress,
-  IconButton} from '@material-ui/core'
+  IconButton, DialogTitle, DialogContent, FormGroup, Checkbox, Button, Dialog, FormLabel,
+  DialogActions} from '@material-ui/core'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import ReactJson from 'react-json-view'
 import { compose } from 'recompose'
@@ -13,10 +14,67 @@ import EntryList, { EntryListUnstyled } from '../search/EntryList'
 import { withDomain } from '../domains'
 import DeleteIcon from '@material-ui/icons/Delete'
 import PublishIcon from '@material-ui/icons/Publish'
-import ConfirmDialog from './ConfirmDialog'
 import PublishedIcon from '@material-ui/icons/Visibility'
 import UnPublishedIcon from '@material-ui/icons/Lock'
 import { withApi } from '../api'
+import Markdown from '../Markdown'
+import ConfirmDialog from './ConfirmDialog'
+
+class PublishConfirmDialog extends React.Component {
+  static propTypes = {
+    onPublish: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    open: PropTypes.bool.isRequired
+  }
+
+  state = {
+    withEmbargo: false
+  }
+
+  render() {
+    const { onPublish, onClose, open } = this.props
+    const { withEmbargo } = this.state
+    return (
+      <div>
+        <Dialog
+          open={open}
+          onClose={onClose}
+        >
+          <DialogTitle>Publish data</DialogTitle>
+          <DialogContent>
+            <Markdown>{`
+              If you agree the selected uploads will move out of your private staging
+              area into the public [NOMAD Repository](https://repository.nomad-coe.eu/NomadRepository-1.1/).
+              If you wish to put an embargo on your data it will last upto 36 month. Afterwards, your data will
+              be made public. All public data will be made available under the Creative
+              Commons Attribution license ([CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)).
+
+              The published data will be added to the NOMAD Repository's index overnight.
+              Therefore, it will take until tomorrow before your data appears in the
+              [NOMAD Repository](https://repository.nomad-coe.eu/NomadRepository-1.1/).
+            `}</Markdown>
+
+            <FormGroup row style={{alignItems: 'center'}}>
+              <Checkbox
+                checked={!withEmbargo}
+                onChange={() => this.setState({withEmbargo: !withEmbargo})}
+              />
+              <FormLabel>publish without embargo</FormLabel>
+            </FormGroup>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={() => onPublish(withEmbargo)} color="primary" autoFocus>
+              {withEmbargo ? 'Publish with embargo' : 'Publish'}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    )
+  }
+}
 
 class Upload extends React.Component {
   static propTypes = {
@@ -109,6 +167,8 @@ class Upload extends React.Component {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleDelete = this.handleDelete.bind(this)
+    this.handleDeleteOpen = this.handleDeleteOpen.bind(this)
+    this.handleDeleteCancel = this.handleDeleteCancel.bind(this)
     this.handlePublishCancel = this.handlePublishCancel.bind(this)
     this.handlePublishOpen = this.handlePublishOpen.bind(this)
     this.handlePublishSubmit = this.handlePublishSubmit.bind(this)
@@ -244,13 +304,21 @@ class Upload extends React.Component {
   handleDelete() {
     const { api, upload } = this.props
     api.deleteUpload(upload.upload_id)
-      .then(() => this.update())
+      .then(() => {
+        this.setState({showDeleteDialog: false})
+        this.update()
+      })
       .catch(error => {
         this.props.raiseError(error)
+        this.setState({showDeleteDialog: false})
         this.update()
       })
   }
 
+  handleDeleteOpen() {
+    this.setState({showDeleteDialog: true})
+  }
+
   handlePublishOpen() {
     this.setState({showPublishDialog: true})
   }
@@ -273,6 +341,11 @@ class Upload extends React.Component {
     this.setState({showPublishDialog: false})
   }
 
+
+  handleDeleteCancel() {
+    this.setState({showDeleteDialog: false})
+  }
+
   onCheckboxChanged(_, checked) {
     if (this.props.onCheckboxChanged) {
       this.props.onCheckboxChanged(checked)
@@ -475,7 +548,7 @@ class Upload extends React.Component {
     const running = upload.tasks_running || upload.process_running
 
     const actions = upload.published ? <React.Fragment /> : <React.Fragment>
-      <IconButton onClick={this.handleDelete} disabled={running}>
+      <IconButton onClick={this.handleDeleteOpen} disabled={running}>
         <Tooltip title="Delete upload">
           <DeleteIcon />
         </Tooltip>
@@ -524,7 +597,7 @@ class Upload extends React.Component {
 
   render() {
     const { classes, open } = this.props
-    const { upload, showPublishDialog, expanded } = this.state
+    const { upload, showPublishDialog, showDeleteDialog, expanded } = this.state
     const { errors } = upload
 
     if (this.state.upload) {
@@ -557,11 +630,22 @@ class Upload extends React.Component {
                 </div> : ''}
             </ExpansionPanelDetails>
           </ExpansionPanel>
-          <ConfirmDialog
+          <PublishConfirmDialog
             open={showPublishDialog}
             onClose={this.handlePublishCancel}
             onPublish={this.handlePublishSubmit}
           />
+          <ConfirmDialog
+            title="Delete an upload"
+            content={`
+                You are about to delete a non published upload. This cannot be undone,
+                but you could re-upload the same file again. Are you sure?
+            `}
+            confirmLabel="Delete"
+            open={showDeleteDialog}
+            onClose={this.handleDeleteCancel}
+            onConfirm={this.handleDelete}
+          />
         </div>
       )
     } else {