@openneuro/app 4.5.1 → 4.6.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.5.1",
+  "version": "4.6.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,8 +19,8 @@
     "@elastic/apm-rum": "5.9.1",
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@openneuro/client": "^4.5.1",
-    "@openneuro/components": "^4.5.1",
+    "@openneuro/client": "^4.6.0-alpha.0",
+    "@openneuro/components": "^4.6.0-alpha.0",
     "babel-runtime": "^6.26.0",
     "bids-validator": "1.9.3",
     "bytes": "^3.0.0",
@@ -116,5 +116,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92a2879d0f00400c240bfe3319f26c38db8ef866"
+  "gitHead": "ce2db27f750c2614e9cf2f0461add04ca8c3cb48"
 }

package/src/scripts/datalad/dataset/dataset-query-fragments.js

@@ -8,6 +8,7 @@ export const DRAFT_FRAGMENT = gql`
       modified
       readme
       head
+      size
       description {
         Name
         Authors
@@ -136,6 +137,7 @@ export const SNAPSHOT_FIELDS = gql`
     tag
     created
     readme
+    size
     deprecated {
       id
       user

package/src/scripts/dataset/dataset-routes.jsx

@@ -1,23 +1,8 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Route, Switch } from 'react-router-dom'
-import AdminDataset from './routes/admin-datalad.jsx'
-import AdminExports from './routes/admin-exports.jsx'
-
 import SnapshotContainer from './snapshot-container'
 import DraftContainer from './draft-container'
-import DownloadDataset from './routes/download-dataset'
-import Publish from './routes/publish.jsx'
-import Share from './routes/manage-permissions.jsx'
-import Snapshot from './routes/snapshot.jsx'
-import AddMetadata from './routes/add-metadata.jsx'
-import DeletePage from './routes/delete-page'
-import { DeprecateSnapshotPage } from './routes/deprecate-snapshot-page'
-import { FileDisplay } from './files'
-
-//TODO imports
-
-const stubComponent = () => null
 
 const DatasetRoutes = ({ dataset, error }) => {
   useEffect(() => {
@@ -29,78 +14,6 @@ const DatasetRoutes = ({ dataset, error }) => {
   return (
     <Switch>
       <Route
-        exact
-        path="/datasets/:datasetId"
-        render={() => <DraftContainer dataset={dataset} />}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/download"
-        component={() => (
-          <DownloadDataset
-            worker={dataset.worker}
-            datasetPermissions={dataset.permissions}
-          />
-        )}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/admin-datalad"
-        component={() => <AdminDataset dataset={dataset} />}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/admin-exports"
-        component={() => <AdminExports dataset={dataset} />}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/publish"
-        component={() => (
-          <Publish datasetId={dataset.id} metadata={dataset.metadata} />
-        )}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/snapshot"
-        component={() => (
-          <Snapshot
-            datasetId={dataset.id}
-            snapshots={dataset.snapshots}
-            issues={dataset.draft.issues}
-            description={dataset.draft.description}
-          />
-        )}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/share"
-        component={() => (
-          <Share
-            datasetId={dataset.id}
-            permissions={dataset.permissions}
-            reviewers={dataset.reviewers}
-          />
-        )}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/file-edit"
-        component={stubComponent}
-      />
-      <Route
-        path="/datasets/:datasetId/file-display/:filePath"
-        render={({
-          match: {
-            params: { datasetId, filePath },
-          },
-        }) => {
-          return <FileDisplay datasetId={datasetId} filePath={filePath} />
-        }}
-      />
-      {/* Snapshot routes */}
-      <Route
-        exact
         path="/datasets/:datasetId/versions/:tag"
         render={({
           match: {
@@ -111,45 +24,8 @@ const DatasetRoutes = ({ dataset, error }) => {
         }}
       />
       <Route
-        exact
-        path="/datasets/:datasetId/versions/:snapshotId/download"
-        component={() => (
-          <DownloadDataset
-            worker={dataset.worker}
-            datasetPermissions={dataset.permissions}
-          />
-        )}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/versions/:snapshotTag/deprecate"
-        component={() => <DeprecateSnapshotPage />}
-      />
-      <Route
-        path="/datasets/:datasetId/versions/:snapshotTag/file-display/:filePath"
-        render={({
-          match: {
-            params: { datasetId, filePath, snapshotTag },
-          },
-        }) => {
-          return (
-            <FileDisplay
-              datasetId={datasetId}
-              snapshotTag={snapshotTag}
-              filePath={filePath}
-            />
-          )
-        }}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/metadata"
-        component={() => <AddMetadata dataset={dataset} />}
-      />
-      <Route
-        exact
-        path="/datasets/:datasetId/delete"
-        component={() => <DeletePage dataset={dataset} />}
+        path="/datasets/:datasetId"
+        render={() => <DraftContainer dataset={dataset} />}
       />
     </Switch>
   )

package/src/scripts/dataset/draft-container.tsx

@@ -5,8 +5,8 @@ import pluralize from 'pluralize'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import parseISO from 'date-fns/parseISO'
 
+import { DatasetPageTabContainer } from './routes/styles/dataset-page-tab-container'
 import Validation from '../validation/validation.jsx'
-import Files from './files'
 import { config } from '../config'
 import {
   getUnexpiredProfile,
@@ -14,7 +14,6 @@ import {
   hasDatasetAdminPermissions,
 } from '../authentication/profile'
 import { useCookies } from 'react-cookie'
-import Comments from './comments/comments.jsx'
 import { DatasetAlertDraft } from './fragments/dataset-alert-draft'
 import {
   MetaDataBlock,
@@ -28,7 +27,6 @@ import {
   VersionList,
   DatasetTools,
 } from '@openneuro/components/dataset'
-import { ReadMore } from '@openneuro/components/read-more'
 
 import { FollowDataset } from './mutations/follow'
 import { StarDataset } from './mutations/star'
@@ -37,6 +35,8 @@ import EditDescriptionField from './fragments/edit-description-field.jsx'
 import EditDescriptionList from './fragments/edit-description-list.jsx'
 import { DOILink } from './fragments/doi-link'
 
+import { TabRoutesDraft } from './routes/tab-routes-draft'
+
 export interface DraftContainerProps {
   dataset
   tag?: string
@@ -120,7 +120,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
             <div className="col col-8 col-lg">
               {summary && (
                 <DatasetHeaderMeta
-                  size={summary.size}
+                  size={dataset.draft.size}
                   totalFiles={summary.totalFiles}
                   datasetId={datasetId}
                 />
@@ -169,55 +169,17 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                   }
                 />
               </div>
-              <div className="dataset-tool-buttons">
-                <DatasetTools
-                  hasEdit={hasEdit}
-                  isPublic={dataset.public}
-                  datasetId={datasetId}
-                  isAdmin={isAdmin}
-                  hasSnapshot={dataset.snapshots.length !== 0}
-                  isDatasetAdmin={isDatasetAdmin}
-                />
-              </div>
-              <ReadMore
-                fileTree={true}
-                id="collapse-tree"
-                expandLabel="Expand File Tree"
-                collapseLabel="Collapse File Tree">
-                <Files
-                  datasetId={datasetId}
-                  snapshotTag={null}
-                  datasetName={dataset.draft.description.Name}
-                  files={dataset.draft.files}
-                  editMode={hasEdit}
-                  datasetPermissions={dataset.permissions}
-                />
-              </ReadMore>
-              <MetaDataBlock
-                heading="README"
-                className="dataset-readme markdown-body"
-                item={dataset.draft.readme}
-                renderEditor={() => (
-                  <EditDescriptionField
-                    datasetId={datasetId}
-                    field="readme"
-                    rows={12}
-                    description={dataset.draft.readme}
-                    editMode={hasEdit}>
-                    <ReadMore
-                      id="readme"
-                      expandLabel="Read More"
-                      collapseLabel="Collapse">
-                      <Markdown>{dataset.draft.readme || 'N/A'}</Markdown>
-                    </ReadMore>
-                  </EditDescriptionField>
-                )}
-              />
-              <Comments
-                datasetId={dataset.id}
-                uploader={dataset.uploader}
-                comments={dataset.comments}
+              <DatasetTools
+                hasEdit={hasEdit}
+                isPublic={dataset.public}
+                datasetId={datasetId}
+                isAdmin={isAdmin}
+                hasSnapshot={dataset.snapshots.length !== 0}
+                isDatasetAdmin={isDatasetAdmin}
               />
+              <DatasetPageTabContainer>
+                <TabRoutesDraft dataset={dataset} hasEdit={hasEdit} />
+              </DatasetPageTabContainer>
             </div>
             <div className="col sidebar">
               {' '}

package/src/scripts/dataset/fragments/dataset-history.jsx

@@ -48,49 +48,45 @@ const DatasetHistory = ({ datasetId }) => {
     return <div className="dataset-history">Loading...</div>
   } else {
     return (
-      <div className="grid dataset-history">
-        <div className="col col-12">
-          <h3>Worker Assignment</h3> {data.dataset.worker}
-        </div>
-        <div className="col col-12">
-          <h3>Git History</h3>
-          <DatasetHistoryTable>
-            <div className="grid faux-table-header">
-              <h4 className="col-lg col col-4">Commit</h4>
-              <h4 className="col-lg col col-2">Date</h4>
-              <h4 className="col-lg col col-2">Author</h4>
-              <h4 className="col-lg col col-2">References</h4>
-              <h4 className="col-lg col col-2 text--right">Action</h4>
-            </div>
-            {data.dataset.history.map(commit => (
-              <React.Fragment key={commit.id}>
-                <div className="grid faux-table">
-                  <div className="commit col-lg col col-4">
-                    <label>Commit: </label>
-                    {commit.id}
-                  </div>
-                  <div className="col-lg col col-2">
-                    <label>Date: </label>
-                    {commit.date}
-                  </div>
-                  <div className="col-lg col col-2">
-                    <label>Author: </label>
-                    {commit.authorName} &lt;{commit.authorEmail}&gt;
-                  </div>
-                  <div className="col-lg col col-2">
-                    <label>References: </label>
-                    {commit.references}
-                  </div>
-                  <div className="col-lg col col-2 grid actions">
-                    <Revalidate datasetId={datasetId} revision={commit.id} />
-                    <UpdateRef datasetId={datasetId} revision={commit.id} />
-                  </div>
-                  <div className="col-lg col col-12">{commit.message}</div>
+      <div className="dataset-history">
+        <h4>Worker Assignment</h4> {data.dataset.worker}
+        <h4>Git History</h4>
+        <DatasetHistoryTable>
+          <div className="grid faux-table-header">
+            <h4 className="col-lg col col-2">Commit</h4>
+            <h4 className="col-lg col col-3">Date</h4>
+            <h4 className="col-lg col col-3">Author</h4>
+            <h4 className="col-lg col col-2">References</h4>
+            <h4 className="col-lg col col-2 text--right">Action</h4>
+          </div>
+          {data.dataset.history.map(commit => (
+            <React.Fragment key={commit.id}>
+              <div className="grid faux-table">
+                <div className="commit col-lg col col-2">
+                  <label>Commit: </label>
+                  {commit.id.slice(0, 8)}
                 </div>
-              </React.Fragment>
-            ))}
-          </DatasetHistoryTable>
-        </div>
+                <div className="col-lg col col-3">
+                  <label>Date: </label>
+                  {commit.date}
+                </div>
+                <div className="col-lg col col-3">
+                  <label>Author: </label>
+                  {commit.authorName} &lt;{commit.authorEmail}&gt;
+                </div>
+                <div className="col-lg col col-2">
+                  <label>References: </label>
+                  {commit.references}
+                </div>
+                <div className="col-lg col col-2 grid actions">
+                  <Revalidate datasetId={datasetId} revision={commit.id} />
+                  <UpdateRef datasetId={datasetId} revision={commit.id} />
+                </div>
+                <div className="col-lg col col-12">{commit.message}</div>
+              </div>
+            </React.Fragment>
+          ))}
+        </DatasetHistoryTable>
       </div>
     )
   }

package/src/scripts/dataset/mutations/admin-exports.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { gql, useMutation } from '@apollo/client'
+import PropTypes from 'prop-types'
+import { reexporterLogsURL } from '../../resources/kibana'
+import { Button } from '@openneuro/components/button'
+import styled from '@emotion/styled'
+
+const ButtonRow = styled.div`
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-gap: 1.3em;
+  place-items: start;
+`
+
+const SuccessMessage = styled.p({
+  color: 'rgb(92, 184, 92)',
+})
+const InProgressMessage = styled.p({
+  color: 'orange',
+})
+const ErrorMessage = styled.p({
+  color: 'red',
+})
+
+const REEXPORT_REMOTES = gql`
+  mutation reexportRemotes($datasetId: ID!) {
+    reexportRemotes(datasetId: $datasetId)
+  }
+`
+
+const AdminExports = ({ dataset }) => {
+  const [reexportRemotes, { data, loading, error }] =
+    useMutation(REEXPORT_REMOTES)
+  const success = data && data.reexportRemotes
+  return (
+    <div className="dataset-form">
+      {loading && (
+        <InProgressMessage>Your export is starting.</InProgressMessage>
+      )}
+      {error && <ErrorMessage>An error has occurred.</ErrorMessage>}
+      {success && <SuccessMessage>Your export has begun.</SuccessMessage>}
+      <ButtonRow>
+        <Button
+          icon="fa fa-rocket"
+          label="Run Export"
+          primary={true}
+          size="small"
+          onClick={() => {
+            reexportRemotes({ variables: { datasetId: dataset.id } })
+          }}
+        />
+        <Button
+          icon="fa fa-file-text"
+          label="View Export Logs"
+          secondary={true}
+          size="small"
+          onClick={() => {
+            window.open(reexporterLogsURL, '_blank')
+          }}
+        />
+      </ButtonRow>
+    </div>
+  )
+}
+
+AdminExports.propTypes = {
+  dataset: PropTypes.object,
+}
+
+export default AdminExports

package/src/scripts/dataset/mutations/create-anonymous-reviewer.tsx

@@ -61,9 +61,6 @@ export const CreateReviewLink: FC<CreateReviewLinkProps> = ({ datasetId }) => {
           size="small"
           onClick={() => CreateReviewLink({ variables: { datasetId } })}
         />
-        <Link className="return-link" to={`/datasets/${datasetId}`}>
-          Return to Dataset
-        </Link>
       </div>
     </>
   )

package/src/scripts/dataset/mutations/dataset-relations.tsx

@@ -50,20 +50,9 @@ const deleteDatasetRelation = gql`
   }
 `
 
-const RightColumn = styled.div({
-  maxWidth: '700px',
-  float: 'right',
-})
-
-const InfoText = styled.p({
-  fontWeight: 100,
-  textAlign: 'right',
-})
-
 const TableContainer = styled.div({
   display: 'grid',
   gridTemplateColumns: '2fr 3fr 1fr',
-  textAlign: 'right',
 })
 
 const GridItem = styled.div({
@@ -120,15 +109,15 @@ export const DatasetRelations = ({ datasetId, hasEdit }) => {
       loadedData = <p>No related DOIs have been added.</p>
     }
     return (
-      <RightColumn>
-        <InfoText>
+      <>
+        <p>
           Add a related DOI such as other repositories where this dataset can be
           found. DOI values should be formatted according to the{' '}
           <a href="https://bids-specification.readthedocs.io/en/stable/02-common-principles.html#uniform-resource-indicator">
             BIDS recommended URI format
           </a>
           .
-        </InfoText>
+        </p>
         {loadedData}
         {hasEdit && (
           <div>
@@ -195,7 +184,7 @@ export const DatasetRelations = ({ datasetId, hasEdit }) => {
             />
           </div>
         )}
-      </RightColumn>
+      </>
     )
   } else {
     return null

package/src/scripts/dataset/mutations/metadata-form.jsx

@@ -321,7 +321,7 @@ const MetadataForm = ({
   hasEdit,
   validationErrors = [],
 }) => (
-  <Form id="metadata-form" className="col col-6">
+  <Form id="metadata-form">
     <InfoText>
       Incomplete fields in this form will make it more difficult for users to
       search for your dataset.

package/src/scripts/dataset/mutations/remove-annex-object.jsx

@@ -41,7 +41,6 @@ const RemoveAnnexObject = ({
           iconOnly={true}
           icon="fa-frown-o"
           className="edit-file"
-          tooltip={'Delete ' + name}
           onConfirmedClick={() => {
             removeAnnexObject({
               variables: {

package/src/scripts/dataset/mutations/snapshot.tsx

@@ -18,12 +18,14 @@ interface CreateSnapshotMutationProps {
   datasetId: string
   tag: string
   changes: Array<string>
+  disabled: boolean
 }
 
 const CreateSnapshotMutation = ({
   datasetId,
   tag,
   changes,
+  disabled,
 }: CreateSnapshotMutationProps) => {
   const history = useHistory()
   const [snapshotDataset, { loading, error }] = useMutation(CREATE_SNAPSHOT)
@@ -42,6 +44,7 @@ const CreateSnapshotMutation = ({
             variables: { datasetId, tag, changes },
           }).then(() => history.push(`/datasets/${datasetId}/versions/${tag}`))
         }}
+        disabled={disabled}
         label="Create Version"
       />
     )
@@ -52,11 +55,22 @@ interface SnapshotDatasetProps {
   datasetId: string
   tag: string
   changes: Array<string>
+  disabled: boolean
 }
 
-const SnapshotDataset = ({ datasetId, tag, changes }: SnapshotDatasetProps) => (
+const SnapshotDataset = ({
+  datasetId,
+  tag,
+  changes,
+  disabled,
+}: SnapshotDatasetProps) => (
   <ErrorBoundary subject="error creating version">
-    <CreateSnapshotMutation datasetId={datasetId} tag={tag} changes={changes} />
+    <CreateSnapshotMutation
+      datasetId={datasetId}
+      tag={tag}
+      changes={changes}
+      disabled={disabled}
+    />
   </ErrorBoundary>
 )
 

package/src/scripts/dataset/routes/add-metadata.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Link, useHistory, useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useCookies } from 'react-cookie'
 import MetadataForm from '../mutations/metadata-form.jsx'
 import { DatasetRelations } from '../mutations/dataset-relations'
@@ -8,6 +8,8 @@ import SubmitMetadata from '../mutations/submit-metadata.jsx'
 import LoggedIn from '../../authentication/logged-in.jsx'
 import { hasEditPermissions, getProfile } from '../../authentication/profile.js'
 import { getDatasetUrl } from '../../utils/dataset-url'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3, HeaderRow4 } from './styles/header-row'
 
 export const compileMetadata = dataset => {
   const getFromMetadata = key => dataset.metadata && dataset.metadata[key]
@@ -119,25 +121,15 @@ const AddMetadata = ({ dataset }) => {
     hasEditPermissions(dataset.permissions, user && user.sub)
 
   return (
-    <div className="container metadata-form">
-      <header>
-        <h1>{hasEdit && 'Add '}Metadata</h1>
-        <hr />
-      </header>
-      <div className="grid m-b-20">
-        <MetadataForm
-          values={values}
-          onChange={handleInputChange}
-          hideDisabled={false}
-          hasEdit={hasEdit}
-          validationErrors={validationErrors}
-        />
-        {hasEdit && (
-          <div className="col col-6">
-            <DatasetRelations datasetId={dataset.id} hasEdit={hasEdit} />
-          </div>
-        )}
-      </div>
+    <DatasetPageBorder className="metadata-form">
+      <HeaderRow3>{hasEdit && 'Add '}Metadata</HeaderRow3>
+      <MetadataForm
+        values={values}
+        onChange={handleInputChange}
+        hideDisabled={false}
+        hasEdit={hasEdit}
+        validationErrors={validationErrors}
+      />
       <div className="dataset-form-controls ">
         {hasEdit && (
           <LoggedIn>
@@ -149,11 +141,15 @@ const AddMetadata = ({ dataset }) => {
             />
           </LoggedIn>
         )}
-        <Link className="return-link " to={`/datasets/${dataset.id}`}>
-          Return to Dataset
-        </Link>
       </div>
-    </div>
+      <hr />
+      {hasEdit && (
+        <>
+          <HeaderRow4>Relations</HeaderRow4>
+          <DatasetRelations datasetId={dataset.id} hasEdit={hasEdit} />
+        </>
+      )}
+    </DatasetPageBorder>
   )
 }