@openneuro/app 4.5.1 → 4.6.0-alpha.3

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

@@ -1,43 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router-dom'
 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 }) => (
-  <div className="datalad-dataset-form container">
-    <div className="grid">
-      <div className="col col-12">
-        <h2>Admin: Datalad Tools</h2>
-      </div>
-      <div className="col col-12">
-        <p>
-          Delete dataset cache drops all dataset caches (snapshot index,
-          draft/snapshot file listings, current dataset description) and the
-          cache is repopulated on the next API call.
-        </p>
-        <p>
-          Reset draft head will move the draft to a given commit and rerun
-          validation.
-        </p>
-      </div>
-      <div className="col col-12">
-        <h3>Draft Head</h3> {dataset.draft.head}
-      </div>
-      <DatasetHistory datasetId={dataset.id} />
-      <hr />
-      <div className="col col-12 dataset-form-controls">
-        <div className="grid">
-          <CacheClear datasetId={dataset.id} />
-          <Link
-            className="return-link col-middle"
-            to={`/datasets/${dataset.id}`}>
-            Return to Dataset
-          </Link>
-        </div>
-      </div>
+  <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>
-  </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 = {

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/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/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

@@ -1,11 +1,13 @@
 /* global globalThis */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link, useRouteMatch } from 'react-router-dom'
+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
@@ -18,53 +20,28 @@ const DownloadDataset = ({ worker, datasetPermissions }) => {
   } = useRouteMatch<SnapshotRouteParams>()
   const workerId = worker?.split('-').pop()
   return (
-    <div>
-      <div className="container">
-        <div className="grid grid-between">
-          <div className="col col-12">
-            <h3>How to Download</h3>
-          </div>
-          <div className="col col-lg">
-            {'showDirectoryPicker' in globalThis ? (
-              <DownloadLink datasetId={datasetId} snapshotTag={snapshotTag} />
-            ) : (
-              <DownloadCommandLine
-                datasetId={datasetId}
-                snapshotTag={snapshotTag}
-              />
-            )}
-          </div>
-          <div className="col col-lg">
-            <DownloadS3 datasetId={datasetId} />
-          </div>
-        </div>
-        <hr />
-        <div className="grid grid-between">
-          {'showDirectoryPicker' in globalThis && (
-            <div className="col col-lg">
-              <DownloadCommandLine
-                datasetId={datasetId}
-                snapshotTag={snapshotTag}
-              />
-            </div>
-          )}
-          <div className="col col-lg">
-            <DownloadDatalad
-              datasetId={datasetId}
-              workerId={workerId}
-              datasetPermissions={datasetPermissions}
-            />
-          </div>
-        </div>
-        <div className="grid grid-between">
-          <div className="col">
-            <Link className="return-link m-l-0" to={`/datasets/${datasetId}`}>
-              Return to Dataset
-            </Link>
-          </div>
-        </div>
+    <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>
-    </div>
+      {'showDirectoryPicker' in globalThis && (
+        <DownloadCommandLine datasetId={datasetId} snapshotTag={snapshotTag} />
+      )}
+      <DownloadDatalad
+        datasetId={datasetId}
+        workerId={workerId}
+        datasetPermissions={datasetPermissions}
+      />
+    </DatasetPageBorder>
   )
 }
 

package/src/scripts/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/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/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

@@ -1,11 +1,18 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import semver from 'semver'
-import { Link } from 'react-router-dom'
 import SnapshotDataset from '../mutations/snapshot'
-import ValidationStatus from '../../validation/validation-status'
 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 =
@@ -49,83 +56,85 @@ const SnapshotRoute = ({ datasetId, snapshots, issues, description }) => {
   const patchActive = semanticLevel === 'patch' && 'active'
 
   return (
-    <div className="dataset-snapshot-form container">
-      <div className="dataset-form-header">
-        <h3>Create Version</h3>
-        <hr />
-      </div>
-      <div className="dataset-form-body">
-        {updateToCC0 && (
-          <div className="alert-warning padded-message">
-            <span>
-              <strong>Notice:</strong>
-              {` the current license "${draftLicense}" will be updated to "CC0" when the version is created. Please see FAQ item "Are there any restrictions on the uploaded data?" for details.`}
-            </span>
-          </div>
-        )}
-        <ValidationStatus issues={issues} />
-        <h4>Version</h4>
-        <div 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>
-        </div>
-        <h4>Changelog</h4>
-        <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="col-xs-12 dataset-form-controls">
-        <div className="col-xs-12 modal-actions">
-          <NoErrors issues={issues}>
-            {changes.length ? (
-              <SnapshotDataset
+    <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}
-                tag={newVersion}
-                changes={changes}
+                snapshotTag={latestSnapshot.tag}
+                path="CHANGES"
               />
-            ) : null}
-          </NoErrors>{' '}
-          <Link to={`/datasets/${datasetId}`}>
-            <Button
-              className="return-link"
-              nobg={true}
-              label="Return to Dataset"
-            />
-          </Link>
+            </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>
-    </div>
+    </DatasetPageBorder>
   )
 }
 

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;
+`