@openneuro/app 4.4.10 → 4.6.0-alpha.0

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}
+    />
+  </>
+)

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

@@ -0,0 +1,148 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import semver from 'semver'
+import SnapshotDataset from '../mutations/snapshot'
+import EditList from '../fragments/edit-list.jsx'
+import { Button } from '@openneuro/components/button'
+import { DatasetPageBorder } from './styles/dataset-page-border'
+import { HeaderRow4 } from './styles/header-row'
+import FileView from '../files/file-view'
+import styled from '@emotion/styled'
+
+const FormRow = styled.div`
+  margin-top: 0;
+  margin-bottom: 1.3em;
+`
+
+export const NoErrors = ({ issues, children }) => {
+  const noErrors =
+    issues && issues.filter(issue => issue.severity === 'error').length === 0
+  // zero authors will cause DOI minting to fail
+  const hasAuthor =
+    issues && issues.filter(issue => issue.code === 113).length === 0
+  if (noErrors && hasAuthor) {
+    return children
+  } else {
+    const correctErrorsMessage =
+      'BIDS validation must be complete and all errors corrected'
+    const noAuthorMessage =
+      '"Authors" must include at least one entry in dataset_description.json'
+    const includedMessages = []
+    if (!noErrors) includedMessages.push(correctErrorsMessage)
+    if (!hasAuthor) includedMessages.push(noAuthorMessage)
+    return (
+      <span className="text-danger">
+        {`${includedMessages.join(' and ')} to create a version`}
+      </span>
+    )
+  }
+}
+
+const SnapshotRoute = ({ datasetId, snapshots, issues, description }) => {
+  const [changes, setChanges] = useState([])
+  const [semanticLevel, setSemanticLevel] = useState('patch')
+  const draftLicense = (description && description.License) || 'none'
+  const requiredLicense = 'CC0'
+  const updateToCC0 = draftLicense !== requiredLicense
+
+  const latestSnapshot = snapshots.length && snapshots[snapshots.length - 1]
+  const newVersion =
+    snapshots.length && semver.valid(latestSnapshot.tag)
+      ? semver.inc(latestSnapshot.tag, semanticLevel)
+      : '1.0.0'
+
+  const majorActive = semanticLevel === 'major' && 'active'
+  const minorActive = semanticLevel === 'minor' && 'active'
+  const patchActive = semanticLevel === 'patch' && 'active'
+
+  return (
+    <DatasetPageBorder>
+      <div className="dataset-snapshot-form">
+        <div className="dataset-form-body">
+          <HeaderRow4>New Version</HeaderRow4>
+          {updateToCC0 && (
+            <p>
+              <strong>Notice:</strong> The current license{' '}
+              <i>&quote;{draftLicense}&quote;</i> will be updated to
+              &quote;CC0&quote; when the version is created. Please see FAQ item
+              &quote;Are there any restrictions on the uploaded data?&quote; for
+              details.
+            </p>
+          )}
+          <p>
+            Create a new version of this dataset for download and public access.
+            This will begin an export of this dataset to GitHub and S3 if it has
+            been made public.
+          </p>
+          <FormRow className="snapshot-input-group">
+            {newVersion}
+            <div className="input-group-btn">
+              <Button
+                secondary={true}
+                label="Major"
+                size="xsmall"
+                className={`btn btn-default ${majorActive}`}
+                onClick={() => setSemanticLevel('major')}
+              />
+              <Button
+                secondary={true}
+                label="Minor"
+                size="xsmall"
+                className={`btn btn-default ${minorActive}`}
+                onClick={() => setSemanticLevel('minor')}
+              />
+              <Button
+                secondary={true}
+                label="Patch"
+                size="xsmall"
+                className={`btn btn-default ${patchActive}`}
+                onClick={() => setSemanticLevel('patch')}
+              />
+            </div>
+          </FormRow>
+          {latestSnapshot ? (
+            <FormRow>
+              <HeaderRow4>Current Changelog</HeaderRow4>
+              <FileView
+                datasetId={datasetId}
+                snapshotTag={latestSnapshot.tag}
+                path="CHANGES"
+              />
+            </FormRow>
+          ) : null}
+          <HeaderRow4>New Changelog</HeaderRow4>
+          <p>Add CHANGES file lines describing the new version.</p>
+          <EditList
+            placeholder="Enter new changes here..."
+            elements={changes}
+            setElements={setChanges}
+          />
+        </div>
+        <NoErrors issues={issues}>
+          {changes.length ? null : (
+            <small className="text-danger">
+              You must add at least one change message to create a new version
+            </small>
+          )}
+        </NoErrors>
+        <div className="dataset-form-controls">
+          <SnapshotDataset
+            datasetId={datasetId}
+            tag={newVersion}
+            changes={changes}
+            disabled={changes.length < 1}
+          />
+        </div>
+      </div>
+    </DatasetPageBorder>
+  )
+}
+
+SnapshotRoute.propTypes = {
+  datasetId: PropTypes.string,
+  snapshots: PropTypes.array,
+  issues: PropTypes.array,
+  description: PropTypes.object,
+}
+
+export default SnapshotRoute

package/src/scripts/dataset/routes/styles/dataset-page-border.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled'
+
+export const DatasetPageBorder = styled.div`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 20px 15px;
+  margin-bottom: 25px;
+`

package/src/scripts/dataset/routes/styles/dataset-page-tab-container.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled'
+
+export const DatasetPageTabContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 50px;
+  flex-direction: column;
+`

package/src/scripts/dataset/routes/styles/draft-background.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled'
+
+export const DraftBackground = styled.div`
+  background: #fff;
+  background-image: radial-gradient(#ddd 1px, #fff 1px);
+  background-size: 20px 20px;
+`