@openneuro/app 4.4.10 → 4.6.0-alpha.0

package/src/scripts/dataset/routes/styles/header-row.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled'
+
+const headerRowStyle = `
+  margin-top: 0;
+  margin-bottom: 1.3em;
+`
+
+export const HeaderRow2 = styled.h2(headerRowStyle)
+
+export const HeaderRow3 = styled.h3(headerRowStyle)
+
+export const HeaderRow4 = styled.h4(headerRowStyle)

package/src/scripts/dataset/routes/tab-routes-draft.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import { DatasetDefault } from './dataset-default'
+import AdminDataset from './admin-datalad'
+import DeletePage from './delete-page'
+import DownloadDataset from './download-dataset'
+import Publish from './publish'
+import Share from './manage-permissions'
+import Snapshot from './snapshot'
+import AddMetadata from './add-metadata'
+import FileDisplay from '../files/file-display'
+
+export const TabRoutesDraft = ({ dataset, hasEdit }) => {
+  return (
+    <Switch>
+      <Route
+        exact
+        path="/datasets/:datasetId"
+        component={() => <DatasetDefault dataset={dataset} hasEdit={hasEdit} />}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/download"
+        component={() => (
+          <DownloadDataset
+            worker={dataset.worker}
+            datasetPermissions={dataset.permissions}
+          />
+        )}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/delete"
+        component={() => <DeletePage dataset={dataset} />}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/admin"
+        component={() => <AdminDataset 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
+        path="/datasets/:datasetId/file-display/:filePath"
+        render={({
+          match: {
+            params: { datasetId, filePath },
+          },
+        }) => {
+          return <FileDisplay datasetId={datasetId} filePath={filePath} />
+        }}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/metadata"
+        component={() => <AddMetadata dataset={dataset} />}
+      />
+    </Switch>
+  )
+}

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import { SnapshotDefault } from './snapshot-default'
+import DownloadDataset from './download-dataset'
+import { DeprecateSnapshotPage } from './deprecate-snapshot-page'
+import FileDisplay from '../files/file-display'
+import AddMetadata from './add-metadata'
+
+export const TabRoutesSnapshot = ({ dataset, snapshot }) => {
+  return (
+    <Switch>
+      <Route
+        exact
+        path="/datasets/:datasetId/versions/:snapshotId"
+        component={() => (
+          <SnapshotDefault dataset={dataset} snapshot={snapshot} />
+        )}
+      />
+      <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/versions/:snapshotTag/metadata"
+        component={() => <AddMetadata dataset={dataset} />}
+      />
+    </Switch>
+  )
+}

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

@@ -1,16 +1,14 @@
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
-import DatasetQueryContext from '../../datalad/dataset/dataset-query-context.js'
-import Markdown from 'markdown-to-jsx'
+import { DatasetPageTabContainer } from './routes/styles/dataset-page-tab-container'
+import DatasetQueryContext from '../datalad/dataset/dataset-query-context.js'
 import { Link, useLocation } from 'react-router-dom'
 import pluralize from 'pluralize'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import parseISO from 'date-fns/parseISO'
 
-import Files from './files'
 import Validation from '../validation/validation.jsx'
-import { config } from '../../config'
-import Comments from './comments/comments.jsx'
+import { config } from '../config'
 import DatasetCitation from './fragments/dataset-citation.jsx'
 import { DatasetAlertVersion } from './fragments/dataset-alert-version'
 
@@ -22,7 +20,6 @@ import {
   CloneDropdown,
   DatasetHeader,
   DatasetHeaderMeta,
-  DatasetPage,
   DatasetGitAccess,
   VersionList,
   DatasetTools,
@@ -36,13 +33,12 @@ import {
 } from '../authentication/profile'
 import { useCookies } from 'react-cookie'
 
-import { ReadMore } from '@openneuro/components/read-more'
-
 import { FollowDataset } from './mutations/follow'
 import { StarDataset } from './mutations/star'
 
-import { SNAPSHOT_FIELDS } from '../../datalad/dataset/dataset-query-fragments.js'
+import { SNAPSHOT_FIELDS } from '../datalad/dataset/dataset-query-fragments.js'
 import { DOILink } from './fragments/doi-link'
+import { TabRoutesSnapshot } from './routes/tab-routes-snapshot'
 
 const formatDate = dateObject =>
   new Date(dateObject).toISOString().split('T')[0]
@@ -88,46 +84,37 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
     hasEditPermissions(dataset.permissions, profile?.sub) || isAdmin
   const isDatasetAdmin =
     hasDatasetAdminPermissions(dataset.permissions, profile?.sub) || isAdmin
+  const modality: string = summary?.modalities[0] || ''
 
   return (
-    <>
-      <DatasetPage
-        modality={summary?.modalities[0]}
-        renderHeader={() => (
-          <>
-            {summary && (
-              <DatasetHeader
-                pageHeading={description.Name}
-                modality={summary?.modalities[0]}
-              />
-            )}
-          </>
-        )}
-        renderAlert={() => (
-          <>
-            {snapshot?.deprecated && (
-              <DatasetAlertVersion
-                datasetId={dataset.id}
-                tag={snapshot.tag}
-                reason={snapshot.deprecated.reason}
-                hasEdit={hasEdit}
-              />
-            )}
-          </>
-        )}
-        renderHeaderMeta={() => (
-          <>
+    <div
+      className={`dataset dataset-draft dataset-page dataset-page-${modality?.toLowerCase()}`}>
+      {summary && (
+        <DatasetHeader
+          pageHeading={description.Name}
+          modality={summary?.modalities[0]}
+        />
+      )}
+      {snapshot?.deprecated && (
+        <DatasetAlertVersion
+          datasetId={dataset.id}
+          tag={snapshot.tag}
+          reason={snapshot.deprecated.reason}
+          hasEdit={hasEdit}
+        />
+      )}
+      <div className="container">
+        <div className="grid grid-between dataset-header-meta">
+          <div className="col col-8 col-lg">
             {summary && (
               <DatasetHeaderMeta
-                size={summary.size}
+                size={snapshot.size}
                 totalFiles={summary.totalFiles}
                 datasetId={datasetId}
               />
             )}
-          </>
-        )}
-        renderFollowBookmark={() => (
-          <>
+          </div>
+          <div className="col follow-bookmark">
             <FollowDataset
               profile={profile}
               datasetId={dataset.id}
@@ -140,78 +127,49 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
               starred={dataset.starred}
               stars={dataset.stars.length}
             />
-          </>
-        )}
-        renderBrainLifeButton={() => (
-          <BrainLifeButton
-            datasetId={datasetId}
-            onBrainlife={snapshot.onBrainlife}
-            snapshotVersion={snapshot.tag}
-          />
-        )}
-        renderValidationBlock={() => (
-          <ValidationBlock>
-            <Validation datasetId={dataset.id} issues={snapshot.issues} />
-          </ValidationBlock>
-        )}
-        renderCloneDropdown={() => (
-          <CloneDropdown
-            gitAccess={
-              <DatasetGitAccess
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="grid grid-between">
+          <div className="col col-lg col-8">
+            <div className="dataset-validation">
+              <ValidationBlock>
+                <Validation datasetId={dataset.id} issues={snapshot.issues} />
+              </ValidationBlock>
+              <BrainLifeButton
+                datasetId={datasetId}
+                onBrainlife={snapshot.onBrainlife}
+                snapshotVersion={snapshot.tag}
+              />
+              <CloneDropdown
+                gitAccess={
+                  <DatasetGitAccess
+                    hasEdit={hasEdit}
+                    configGithub={config.github}
+                    configUrl={config.url}
+                    worker={dataset.worker}
+                    datasetId={datasetId}
+                    gitHash={snapshot.hexsha}
+                  />
+                }
+              />
+            </div>
+            <div className="dataset-tool-buttons">
+              <DatasetTools
                 hasEdit={hasEdit}
-                configGithub={config.github}
-                configUrl={config.url}
-                worker={dataset.worker}
+                isPublic={dataset.public}
                 datasetId={datasetId}
-                gitHash={snapshot.hexsha}
+                snapshotId={snapshot.tag}
+                isAdmin={isAdmin}
+                isDatasetAdmin={isDatasetAdmin}
               />
-            }
-          />
-        )}
-        renderToolButtons={() => (
-          <DatasetTools
-            hasEdit={hasEdit}
-            isPublic={dataset.public}
-            datasetId={datasetId}
-            snapshotId={snapshot.tag}
-            isAdmin={isAdmin}
-            isDatasetAdmin={isDatasetAdmin}
-          />
-        )}
-        renderFiles={() => (
-          <ReadMore
-            fileTree={true}
-            id="collapse-tree"
-            expandLabel="Read More"
-            collapseLabel="Collapse">
-            <Files
-              datasetId={datasetId}
-              snapshotTag={snapshot.tag}
-              datasetName={description.Name}
-              files={snapshot.files}
-              editMode={false}
-              datasetPermissions={dataset.permissions}
-            />
-          </ReadMore>
-        )}
-        renderReadMe={() => (
-          <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"
-          />
-        )}
-        renderSidebar={() => (
-          <>
+            </div>
+            <DatasetPageTabContainer>
+              <TabRoutesSnapshot dataset={dataset} snapshot={snapshot} />
+            </DatasetPageTabContainer>
+          </div>
+          <div className="col sidebar">
             <MetaDataBlock
               heading="Authors"
               item={
@@ -337,7 +295,9 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
 
             <MetaDataBlock
               heading="Dataset DOI"
-              item={<DOILink DOI={description.DatasetDOI} />}
+              item={
+                <DOILink DOI={description.DatasetDOI} datasetId={datasetId} />
+              }
             />
             <MetaDataBlock heading="License" item={description.License} />
 
@@ -378,17 +338,10 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
               item={description.EthicsApprovals}
               className="dmb-list"
             />
-          </>
-        )}
-        renderComments={() => (
-          <Comments
-            datasetId={dataset.id}
-            uploader={dataset.uploader}
-            comments={dataset.comments}
-          />
-        )}
-      />
-    </>
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }
 

package/src/scripts/{refactor_2021 → errors}/freshdesk-widget.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useCookies } from 'react-cookie'
-import { getProfile } from './authentication/profile'
+import { getProfile } from '../authentication/profile'
 import { config } from '../config'
 
 const buildCustomQuery = (customText, prepopulatedFields) => {

package/src/scripts/errors/freshdeskInterface.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import FreshdeskWidget from '../datalad/fragments/freshdesk-widget.jsx'
+import FreshdeskWidget from './freshdesk-widget.jsx'
 import {
   Overlay,
   ModalContainer,

package/src/scripts/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import Uploader from './refactor_2021/uploader/uploader.jsx'
-import Routes from './refactor_2021/routes'
-import HeaderContainer from './refactor_2021/containers/header'
-import FooterContainer from './refactor_2021/containers/footer'
-import { SearchParamsProvider } from './refactor_2021/search/search-params-ctx'
-import { UserModalOpenProvider } from './refactor_2021/user-login-modal-ctx'
+import Uploader from './uploader/uploader.jsx'
+import Routes from './routes'
+import HeaderContainer from './common/containers/header'
+import FooterContainer from './common/containers/footer'
+import { SearchParamsProvider } from './search/search-params-ctx'
+import { UserModalOpenProvider } from './utils/user-login-modal-ctx'
 
 import '../assets/email-header.png'
 

package/src/scripts/{refactor_2021 → pages}/admin/admin.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Redirect, Switch, Route, NavLink } from 'react-router-dom'
 import Users from './users.jsx'
 import FlaggedFiles from './flagged-files.jsx'
-import AdminUser from '../authentication/admin-user.jsx'
+import AdminUser from '../../authentication/admin-user.jsx'
 
 class Dashboard extends React.Component {
   // life cycle events --------------------------------------------------

package/src/scripts/{refactor_2021 → pages}/admin/user-tools.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactElement } from 'react'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
 import { WarnButton } from '@openneuro/components/warn-button'
-import { getProfile } from '../authentication/profile.js'
+import { getProfile } from '../../authentication/profile.js'
 import { useCookies } from 'react-cookie'
 import { USER_FRAGMENT } from './user-fragment'
 

package/src/scripts/{refactor_2021/user → pages}/api.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Loading } from '@openneuro/components/loading'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import Helmet from 'react-helmet'
-import { pageTitle } from '../../resources/strings.js'
+import { pageTitle } from '../resources/strings.js'
 import { Button } from '@openneuro/components/button'
-import { config } from '../../config'
+import { config } from '../config'
 
 /**
  * Create API Key

package/src/scripts/pages/citation-page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { frontPage } from '../front-page/front-page-content'
+import { frontPage } from './front-page/front-page-content'
 import styled from '@emotion/styled'
 
 const CitationPageStyle = styled.div`

package/src/scripts/{faq → pages/faq}/__tests__/__snapshots__/faq.spec.jsx.snap

@@ -221,7 +221,7 @@ exports[`faq/faq/Faq renders successfully 1`] = `
           <span>
             We offer two options for uploading data onto OpenNeuro. The first is to upload via the web interface. The second is to upload via our 
             <a
-              href="https://docs.openneuro.org/packages-openneuro-cli-readme"
+              href="https://docs.openneuro.org/openneuro-packages-openneuro-cli-readme"
             >
               command-line utility tool
             </a>

package/src/scripts/{faq → pages/faq}/faq-content.js

@@ -48,8 +48,7 @@ export const faq = [
       '[Ultimate consent form GDPR edition](https://open-brain-consent.readthedocs.io/en/stable/gdpr/ultimate_gdpr.html).',
   },
   {
-    faq:
-      'Do I need to format my data in some special way before uploading it to OpenNeuro?',
+    faq: 'Do I need to format my data in some special way before uploading it to OpenNeuro?',
     answer:
       'Yes! OpenNeuro only accepts data in the Brain Imaging Data Structure ' +
       '(BIDS) format. You can read about it more at ' +
@@ -58,8 +57,7 @@ export const faq = [
       'post them at [neurostars.org](https://neurostars.org/tags/bids).',
   },
   {
-    faq:
-      'Do I need to remove facial features from structural images before uploading the data?',
+    faq: 'Do I need to remove facial features from structural images before uploading the data?',
     answer:
       'OpenNeuro does not accept datasets that have not been defaced for ' +
       'privacy considerations. Datasets found to not have been defaced will ' +
@@ -80,7 +78,7 @@ export const faq = [
     answer:
       'We offer two options for uploading data onto OpenNeuro. ' +
       'The first is to upload via the web interface. ' +
-      'The second is to upload via our [command-line utility tool](https://docs.openneuro.org/packages-openneuro-cli-readme)',
+      'The second is to upload via our [command-line utility tool](https://docs.openneuro.org/openneuro-packages-openneuro-cli-readme)',
   },
   {
     faq: 'Why can I not use CC-BY (or other CC license)?',

package/src/scripts/{faq → pages/faq}/faq.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import Markdown from 'markdown-to-jsx'
 import { faq } from './faq-content'
 import Helmet from 'react-helmet'
-import { pageTitle } from '../resources/strings.js'
+import { pageTitle } from '../../resources/strings.js'
 
 class Faq extends React.Component {
   render() {

package/src/scripts/{front-page → pages/front-page}/front-page-content.ts

@@ -1,13 +1,13 @@
-import ljaf from '../../assets/ljaf.png'
-import nsf from '../../assets/nsf.png'
-import nih from '../../assets/nih.png'
-import squishymedia from '../../assets/squishymedia.png'
-import stanford from '../../assets/stanford.png'
-import logo_app from '../../assets/logo_app.png'
-import logo_cube from '../../assets/logo_cube.png'
-import logo_data from '../../assets/logo_data.png'
-import logo_users from '../../assets/logo_users.png'
-import brand_mark from '../../assets/brand_mark.png'
+import ljaf from '../../../assets/ljaf.png'
+import nsf from '../../../assets/nsf.png'
+import nih from '../../../assets/nih.png'
+import squishymedia from '../../../assets/squishymedia.png'
+import stanford from '../../../assets/stanford.png'
+import logo_app from '../../../assets/logo_app.png'
+import logo_cube from '../../../assets/logo_cube.png'
+import logo_data from '../../../assets/logo_data.png'
+import logo_users from '../../../assets/logo_users.png'
+import brand_mark from '../../../assets/brand_mark.png'
 
 export const frontPage = {
   pageTitle: 'OpenNeuro',