Rebased with v1.0.0 and added support for upload selection and launch token forwarding.

• Rebased with v1.0.0 to get access to the improved Datatable used in upload selection for NORTH
• New layout for NORTH main page that includes the selection of an upload against which a tool is launched.
• Added the retrieval of a launch token for a selected upload, token gets added to the NORTH instance launch call.

gui/src/components/north/NORTHMainPage.js

@@ -18,17 +18,18 @@
  */
 import React, { useState, useEffect, useCallback } from 'react'
 import {
+  Grid,
   List,
   Paper,
   Divider,
   Step,
-  StepContent,
   StepLabel,
   Stepper,
   makeStyles
 } from '@material-ui/core'
+import Alert from '@material-ui/lab/Alert'
 import Page from '../Page'
-import { useApi } from '../api'
+import { useApi, withLoginRequired } from '../api'
 import { useErrors } from '../errors'
 import NORTHToolItem from './NORTHToolItem'
 import {
@@ -58,15 +59,17 @@ addColumnDefaults(columns, {align: 'left'})
  */
 
 const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    marginTop: theme.spacing(1)
+  },
   stepper: {
-    alignItems: 'flex-start',
-    paddingTop: theme.spacing(2),
+    padding: 0,
     backgroundColor: 'inherit'
   },
   stepContent: {
     marginTop: theme.spacing(2),
-    marginLeft: 0,
-    border: 'none'
+    marginLeft: theme.spacing(3)
   }
 }))
 const NORTHMainPage = React.memo(() => {
@@ -76,7 +79,7 @@ const NORTHMainPage = React.memo(() => {
   const toolValues = tools && Object.values(tools)
   const {api} = useApi()
   const errors = useErrors()
-  const [data, setData] = useState(null)
+  const [uploads, setUploads] = useState(null)
   const [selected, setSelected] = useState([])
   const [pagination, setPagination] = useState({
     page_size: 10,
@@ -85,12 +88,13 @@ const NORTHMainPage = React.memo(() => {
   })
   const canLaunch = selected.length > 0
 
+  // Fetch the list of unpublished uploads.
   useEffect(() => {
     const {page_size, page} = pagination
     api.get(`/uploads?is_published=false&page_size=${page_size}&page=${page}`)
-      .then(setData)
+      .then(data => setUploads(data))
       .catch(errors.raiseError)
-  }, [pagination, setData, errors, api])
+  }, [pagination, setUploads, errors, api])
 
   // Only one upload can be selected at this time
   const handleSelect = useCallback((callBack) => {
@@ -103,36 +107,45 @@ const NORTHMainPage = React.memo(() => {
     })
   }, [])
 
-  return data
+  return (uploads && tools)
     ? <Page limitedWidth>
-      <Stepper className={styles.stepper} orientation="horizontal" nonLinear>
-        <Step expanded active={false}>
-          <StepLabel>Select an upload</StepLabel>
-          <StepContent className={styles.stepContent}>
-            <Paper>
-              <Datatable
+      <Grid container spacing={1}>
+        <Grid item xs={8}>
+          <Stepper className={styles.stepper} orientation="horizontal" nonLinear>
+            <Step active>
+              <StepLabel icon={1}>Select an upload</StepLabel>
+            </Step>
+          </Stepper>
+          <Paper className={styles.stepContent}>
+            {uploads.data.length > 0
+              ? <Datatable
                 multiple={false}
                 selected={selected}
                 onSelectedChanged={handleSelect}
                 columns={columns}
                 selectedColumns={columns.map(column => column.key)}
-                data={data.data || []}
-                pagination={combinePagination(pagination, data.pagination)}
+                data={uploads.data || []}
+                pagination={combinePagination(pagination, uploads.pagination)}
                 onPaginationChanged={setPagination}
               >
                 <DatatableTable>
                   <DatatableLoadMorePagination />
                 </DatatableTable>
               </Datatable>
-            </Paper>
-          </StepContent>
-        </Step>
-        <Step expanded active={false}>
-          <StepLabel>Select tool</StepLabel>
-          <StepContent className={styles.stepContent}>
-            <Paper>
-              <List>
-                {toolValues && toolValues.map((tool, index) => <div key={tool.name}>
+              : <Alert severity="info">No uploads available. Notice that you can only work on unpublished uploads.</Alert>
+            }
+          </Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Stepper className={styles.stepper} orientation="horizontal" nonLinear>
+            <Step active={canLaunch}>
+              <StepLabel icon={2}>Select a tool</StepLabel>
+            </Step>
+          </Stepper>
+          <Paper className={styles.stepContent}>
+            {toolValues?.length > 0
+              ? <List>
+                {toolValues.map((tool, index) => <div key={tool.name}>
                   <NORTHToolItem
                     {...tool}
                     running={instances ? tool.name in instances : false}
@@ -142,15 +155,16 @@ const NORTHMainPage = React.memo(() => {
                   {index !== toolValues.length - 1 && <Divider/>}
                 </div>)}
               </List>
-            </Paper>
-          </StepContent>
-        </Step>
-      </Stepper>
+              : <Alert severity="info">No tools available.</Alert>
+            }
+          </Paper>
+        </Grid>
+      </Grid>
     </Page>
     : null
 })
 
-export default NORTHMainPage
+export default withLoginRequired(NORTHMainPage)
 
 // Extra, GUI specific data for each tool.
 const toolMap = {