@openneuro/app 4.5.0 → 4.6.0-alpha.1

package/src/scripts/{refactor_2021/dataset → dataset}/mutations/snapshot.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { gql, useMutation } from '@apollo/client'
 import { useHistory } from 'react-router-dom'
-import ErrorBoundary from '../../../errors/errorBoundary.jsx'
+import ErrorBoundary from '../../errors/errorBoundary.jsx'
 import { Button } from '@openneuro/components/button'
 
 const CREATE_SNAPSHOT = gql`
@@ -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/{refactor_2021/dataset → dataset}/mutations/star.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useContext } from 'react'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
-import { datasetCacheId } from '../../../datalad/mutations/cache-id.js'
+import { datasetCacheId } from '../../datalad/mutations/cache-id.js'
 import { CountToggle } from '@openneuro/components/count-toggle'
-import { UserModalOpenCtx } from '../../user-login-modal-ctx'
+import { UserModalOpenCtx } from '../../utils/user-login-modal-ctx'
 
 const STAR_DATASET = gql`
   mutation starDataset($datasetId: ID!) {

package/src/scripts/{refactor_2021/dataset → dataset}/mutations/submit-metadata.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
-import { DATASET_METADATA } from '../../../datalad/dataset/dataset-query-fragments'
+import { DATASET_METADATA } from '../../datalad/dataset/dataset-query-fragments'
 import { datasetCacheId } from './cache-id.js'
 import { Button } from '@openneuro/components/button'
 

package/src/scripts/{refactor_2021/dataset → dataset}/routes/add-metadata.jsx

@@ -1,13 +1,15 @@
 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'
 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 { 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>
   )
 }
 

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DatasetHistory from '../fragments/dataset-history.jsx'
+import CacheClear from '../mutations/cache-clear.jsx'
+import AdminExports from '../mutations/admin-exports'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3, HeaderRow4 } from './styles/header-row'
+
+const AdminDataset = ({ dataset }) => (
+  <DatasetPageBorder className="datalad-dataset-form">
+    <HeaderRow3>Site Admin Tools</HeaderRow3>
+    <p>
+      Delete dataset cache drops this dataset's caches (snapshot index,
+      draft/snapshot file listings, current dataset description) and the cache
+      is repopulated on the next API call.
+    </p>
+    <div className="dataset-form-controls">
+      <CacheClear datasetId={dataset.id} />
+    </div>
+    <hr />
+    <HeaderRow4>Rerun Exports</HeaderRow4>
+    <p>
+      Correct most temporary issues with a dataset export by reattempting to
+      push to S3 and GitHub.
+    </p>
+    <div className="dataset-form-controls">
+      <AdminExports />
+    </div>
+    <hr />
+    <HeaderRow4>Draft Head</HeaderRow4>
+    {dataset.draft.head}
+    <DatasetHistory datasetId={dataset.id} />
+  </DatasetPageBorder>
+)
+
+AdminDataset.propTypes = {
+  dataset: PropTypes.object,
+}
+
+export default AdminDataset

package/src/scripts/dataset/routes/dataset-default.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Markdown from 'markdown-to-jsx'
+import { ReadMore } from '@openneuro/components/read-more'
+import { MetaDataBlock } from '@openneuro/components/dataset'
+import Files from '../files/files'
+import Comments from '../comments/comments'
+import EditDescriptionField from '../fragments/edit-description-field'
+
+/**
+ * Default tab for dataset draft pages
+ */
+export const DatasetDefault = ({ dataset, hasEdit }) => (
+  <>
+    <ReadMore
+      fileTree={true}
+      id="collapse-tree"
+      expandLabel="Expand File Tree"
+      collapseLabel="Collapse File Tree">
+      <Files
+        datasetId={dataset.id}
+        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={dataset.id}
+          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}
+    />
+  </>
+)

package/src/scripts/{refactor_2021/dataset → dataset}/routes/delete-page.tsx

@@ -6,8 +6,8 @@ import DeleteDatasetForm from '../mutations/delete-dataset-form.jsx'
 import DeleteDataset from '../mutations/delete.jsx'
 import LoggedIn from '../../authentication/logged-in.jsx'
 import { hasEditPermissions, getProfile } from '../../authentication/profile.js'
-import styled from '@emotion/styled'
-import { Button } from '@openneuro/components/button'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3 } from './styles/header-row'
 
 interface DeletePageProps extends RouteComponentProps {
   dataset: {
@@ -35,9 +35,8 @@ const DeletePage = ({ dataset }: DeletePageProps): React.ReactElement => {
     hasEditPermissions(dataset.permissions, user && user.sub)
   const datasetId = dataset.id
   return (
-    <div className="container">
-      <h2>Delete Dataset</h2>
-      <hr />
+    <DatasetPageBorder>
+      <HeaderRow3>Delete Dataset</HeaderRow3>
       <DeleteDatasetForm
         values={values}
         onChange={handleInputChange}
@@ -54,11 +53,8 @@ const DeletePage = ({ dataset }: DeletePageProps): React.ReactElement => {
         <LoggedIn>
           <DeleteDataset datasetId={datasetId} metadata={values} />
         </LoggedIn>
-        <Link className="return-link" to={`/datasets/${datasetId}`}>
-          Return to Dataset
-        </Link>
       </div>
-    </div>
+    </DatasetPageBorder>
   )
 }
 

package/src/scripts/{refactor_2021/dataset → dataset}/routes/deprecate-snapshot-page.tsx

@@ -3,6 +3,8 @@ import { Link, useRouteMatch } from 'react-router-dom'
 import { DeprecateVersion } from '../mutations/deprecate-version'
 import { Input } from '@openneuro/components/input'
 import LoggedIn from '../../authentication/logged-in.jsx'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3 } from './styles/header-row'
 
 interface DeprecateSnapshotRouteParams {
   datasetId: string
@@ -16,8 +18,8 @@ export const DeprecateSnapshotPage = (): React.ReactElement => {
   const [reason, setReason] = useState('')
 
   return (
-    <div className="container">
-      <h2>Deprecate Version</h2>
+    <DatasetPageBorder>
+      <HeaderRow3>Deprecate Version</HeaderRow3>
       <p>
         {`Deprecate ${datasetId} version ${snapshotTag} to let other users know about an issue with this version. The reason provided will be displayed for users visiting the version.`}
       </p>
@@ -28,7 +30,7 @@ export const DeprecateSnapshotPage = (): React.ReactElement => {
         labelStyle="default"
         setValue={setReason}
       />
-      <hr />
+      <br />
       <div className="dataset-form-controls">
         <LoggedIn>
           <DeprecateVersion
@@ -37,10 +39,7 @@ export const DeprecateSnapshotPage = (): React.ReactElement => {
             reason={reason}
           />
         </LoggedIn>
-        <Link className="return-link" to={`/datasets/${datasetId}`}>
-          Return to Dataset
-        </Link>
       </div>
-    </div>
+    </DatasetPageBorder>
   )
 }

package/src/scripts/dataset/routes/download-dataset.tsx

@@ -0,0 +1,53 @@
+/* global globalThis */
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useRouteMatch } from 'react-router-dom'
+import DownloadLink from '../download/download-link.jsx'
+import DownloadS3 from '../download/download-s3.jsx'
+import DownloadCommandLine from '../download/download-command-line.jsx'
+import DownloadDatalad from '../download/download-datalad.jsx'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3 } from './styles/header-row'
+
+interface SnapshotRouteParams {
+  datasetId?: string
+  snapshotId?: string
+}
+
+const DownloadDataset = ({ worker, datasetPermissions }) => {
+  const {
+    params: { datasetId, snapshotId: snapshotTag },
+  } = useRouteMatch<SnapshotRouteParams>()
+  const workerId = worker?.split('-').pop()
+  return (
+    <DatasetPageBorder>
+      <HeaderRow3>How to Download</HeaderRow3>
+      <div className="grid grid-between">
+        {'showDirectoryPicker' in globalThis ? (
+          <DownloadLink datasetId={datasetId} snapshotTag={snapshotTag} />
+        ) : (
+          <DownloadCommandLine
+            datasetId={datasetId}
+            snapshotTag={snapshotTag}
+          />
+        )}
+        <DownloadS3 datasetId={datasetId} />
+      </div>
+      {'showDirectoryPicker' in globalThis && (
+        <DownloadCommandLine datasetId={datasetId} snapshotTag={snapshotTag} />
+      )}
+      <DownloadDatalad
+        datasetId={datasetId}
+        workerId={workerId}
+        datasetPermissions={datasetPermissions}
+      />
+    </DatasetPageBorder>
+  )
+}
+
+DownloadDataset.propTypes = {
+  worker: PropTypes.string,
+  datasetPermissions: PropTypes.object,
+}
+
+export default DownloadDataset

package/src/scripts/{refactor_2021/dataset → dataset}/routes/manage-anonymous-reviewers.tsx

@@ -2,6 +2,8 @@ import React, { FC } from 'react'
 
 import { DeleteReviewerLink } from '../mutations/delete-anonymous-reviewer'
 import { CreateReviewLink } from '../mutations/create-anonymous-reviewer'
+import { HeaderRow4 } from './styles/header-row'
+
 const formatDate = dateObject =>
   new Date(dateObject).toISOString().split('T')[0]
 
@@ -18,12 +20,16 @@ export const AnonymousReviewer: FC<AnonymousReviewerProps> = ({
   reviewers,
 }) => {
   return (
-    <div className="dataset-anonymous-form container">
+    <div className="dataset-anonymous-form">
       <div className="dataset-form-header">
         <div className="form-group">
-          <h2>Create Anonymous Reviewer</h2>
+          <HeaderRow4>Create Anonymous Reviewer Link</HeaderRow4>
+          <p>
+            Create an anonymous review link to share this dataset for anonymous
+            access. A review user has read only access and tokens are valid for
+            one year or until they are removed.
+          </p>
         </div>
-        <hr />
         <CreateReviewLink datasetId={datasetId} />
         {reviewers.length ? (
           <div className="dataset-form-body">

package/src/scripts/{refactor_2021/dataset → dataset}/routes/manage-permissions.jsx

@@ -6,6 +6,8 @@ import { Button } from '@openneuro/components/button'
 import { RemovePermissions } from '../mutations/remove-permissions'
 import { UpdateDatasetPermissions } from '../mutations/update-permissions'
 import { AnonymousReviewer } from './manage-anonymous-reviewers'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3 } from './styles/header-row'
 
 const description = {
   admin: 'Edit dataset and edit permissions',
@@ -71,15 +73,13 @@ const Share = ({ datasetId, permissions, reviewers }) => {
   const adminActive = access === 'admin' && 'active'
 
   return (
-    <>
-      <div className="dataset-share-form container">
+    <DatasetPageBorder>
+      <div className="dataset-share-form">
         <div className="dataset-form-header">
           <div className="form-group">
-            <h2>Share Dataset</h2>
+            <HeaderRow3>Share Dataset</HeaderRow3>
           </div>
-          <hr />
           <div className="dataset-form-body">
-            <h3>Dataset shared with:</h3>
             <ShareTable datasetId={datasetId} permissions={permissions} />
             <p>
               Enter a user&#39;s email address and select access level to share
@@ -123,15 +123,12 @@ const Share = ({ datasetId, permissions, reviewers }) => {
               metadata={access}
               done={() => setUserEmail('')}
             />
-            <Link className="return-link" to={`/datasets/${datasetId}`}>
-              Return to Dataset
-            </Link>
           </div>
         </div>
       </div>
-      <br />
+      <hr />
       <AnonymousReviewer datasetId={datasetId} reviewers={reviewers} />
-    </>
+    </DatasetPageBorder>
   )
 }
 

package/src/scripts/{refactor_2021/dataset → dataset}/routes/publish.jsx

@@ -1,32 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link, Redirect } from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
 import PublishDataset from '../mutations/publish.jsx'
-import { Button } from '@openneuro/components/button'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow3 } from './styles/header-row'
+
 const hasExpectedMetadata = metadata =>
   typeof metadata === 'object' && metadata !== null
 
 const Publish = ({ datasetId, metadata }) =>
   hasExpectedMetadata(metadata) ? (
-    <div className="dataset-form container">
-      <h2>Publish</h2>
-      <hr />
-      <div className="col-xs-12 dataset-form-body">
+    <DatasetPageBorder className="dataset-form">
+      <HeaderRow3>Publish</HeaderRow3>
+      <div className="dataset-form-body">
         <p className="text-danger">
           All existing and future snapshots of this dataset will be released
           publicly under a{' '}
           <a href="https://wiki.creativecommons.org/wiki/CC0">CC0 license</a>.
         </p>
       </div>
-      <div className="col-xs-12 dataset-form-controls">
-        <div className="col-xs-12 modal-actions">
+      <div className="dataset-form-controls">
+        <div className="modal-actions">
           <PublishDataset datasetId={datasetId} />
-          <Link to={`/datasets/${datasetId}`}>
-            <Button nobg={true} label="Return to Dataset" />
-          </Link>
         </div>
       </div>
-    </div>
+    </DatasetPageBorder>
   ) : (
     <Redirect
       to={{

package/src/scripts/dataset/routes/snapshot-default.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Markdown from 'markdown-to-jsx'
+import { ReadMore } from '@openneuro/components/read-more'
+import { MetaDataBlock } from '@openneuro/components/dataset'
+import Files from '../files/files'
+import Comments from '../comments/comments'
+
+/**
+ * Default tab for snapshot pages
+ */
+export const SnapshotDefault = ({ dataset, snapshot }) => (
+  <>
+    <ReadMore
+      fileTree={true}
+      id="collapse-tree"
+      expandLabel="Read More"
+      collapseLabel="Collapse">
+      <Files
+        datasetId={dataset.id}
+        snapshotTag={snapshot.tag}
+        datasetName={snapshot.description.Name}
+        files={snapshot.files}
+        editMode={false}
+        datasetPermissions={dataset.permissions}
+      />
+    </ReadMore>
+    <MetaDataBlock
+      heading="README"
+      item={
+        <ReadMore id="readme" expandLabel="Read More" collapseLabel="Collapse">
+          <Markdown>
+            {snapshot.readme == null ? 'N/A' : snapshot.readme}
+          </Markdown>
+        </ReadMore>
+      }
+      className="dataset-readme markdown-body"
+    />
+    <Comments
+      datasetId={dataset.id}
+      uploader={dataset.uploader}
+      comments={dataset.comments}
+    />
+  </>
+)