@openneuro/app 4.4.8 → 4.5.0

package/src/scripts/refactor_2021/dataset/files/file-viewer-type.jsx

@@ -14,6 +14,8 @@ const FileViewerType = ({ path, url, data }) => {
   if (
     path.endsWith('README') ||
     path.endsWith('CHANGES') ||
+    path.endsWith('.bidsignore') ||
+    path.endsWith('.gitignore') ||
     path.endsWith('.txt')
   ) {
     return <FileViewerText data={data} />

package/src/scripts/refactor_2021/dataset/fragments/__tests__/doi-link.spec.tsx

@@ -5,9 +5,12 @@ import { MemoryRouter } from 'react-router-dom'
 
 describe('DoiLink component', () => {
   it('Renders usable link with raw DOI value', () => {
-    render(<DOILink DOI="10.18112/openneuro.ds000001.v1.0.0" />, {
-      wrapper: MemoryRouter,
-    })
+    render(
+      <DOILink DOI="10.18112/openneuro.ds000001.v1.0.0" datasetId="ds000001" />,
+      {
+        wrapper: MemoryRouter,
+      },
+    )
     expect(screen.getByRole('link')).toHaveTextContent(
       'doi:10.18112/openneuro.ds000001.v1.0.0',
     )
@@ -17,26 +20,53 @@ describe('DoiLink component', () => {
     )
   })
   it('Renders usable link with URI DOI value', () => {
-    render(<DOILink DOI="doi:10.18112/openneuro.ds000001.v1.0.0" />, {
-      wrapper: MemoryRouter,
-    })
+    render(
+      <DOILink
+        DOI="doi:10.18112/openneuro.ds000001.v1.0.0"
+        datasetId="ds000001"
+      />,
+      {
+        wrapper: MemoryRouter,
+      },
+    )
     expect(screen.getByRole('link')).toHaveTextContent(
       'doi:10.18112/openneuro.ds000001.v1.0.0',
     )
   })
   it('Renders usage link with URL DOI value', () => {
     render(
-      <DOILink DOI="https://doi.org/10.18112/openneuro.ds000001.v1.0.0" />,
+      <DOILink
+        DOI="https://doi.org/10.18112/openneuro.ds000001.v1.0.0"
+        datasetId="ds000001"
+      />,
       { wrapper: MemoryRouter },
     )
     expect(screen.getByRole('link')).toHaveTextContent(
       'doi:10.18112/openneuro.ds000001.v1.0.0',
     )
   })
+  it('Renders fallback link with invalid DOI value', () => {
+    render(<DOILink DOI="doi:x" datasetId="ds000001" />, {
+      wrapper: MemoryRouter,
+    })
+    expect(screen.getByRole('link')).toHaveTextContent(
+      'Create a new snapshot to obtain a DOI for the snapshot.',
+    )
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      '/datasets/ds000001/snapshot',
+    )
+  })
   it('Renders fallback text if no valid DOI string is found', () => {
-    render(<DOILink DOI={null} />, { wrapper: MemoryRouter })
+    render(<DOILink DOI={null} datasetId="ds000001" />, {
+      wrapper: MemoryRouter,
+    })
     expect(screen.getByRole('link')).toHaveTextContent(
       'Create a new snapshot to obtain a DOI for the snapshot.',
     )
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      '/datasets/ds000001/snapshot',
+    )
   })
 })

package/src/scripts/refactor_2021/dataset/fragments/doi-link.tsx

@@ -4,7 +4,13 @@ import { Link } from 'react-router-dom'
 // See https://www.crossref.org/blog/dois-and-matching-regular-expressions/
 export const DOIPattern = /^10.\d{4,9}\/[-._;()/:A-Z0-9]+$/i
 
-export const DOILink = ({ DOI }) => {
+export const DOILinkFallback = ({ datasetId }) => (
+  <Link to={`/datasets/${datasetId}/snapshot`}>
+    Create a new snapshot to obtain a DOI for the snapshot.
+  </Link>
+)
+
+export const DOILink = ({ DOI, datasetId }) => {
   if (
     DOI &&
     (DOI.match(DOIPattern) ||
@@ -20,11 +26,8 @@ export const DOILink = ({ DOI }) => {
     if (DOI.startsWith('https://doi.org/')) {
       return <a href={DOI}>{`doi:${DOI.slice(16)}`}</a>
     }
+    return <DOILinkFallback datasetId={datasetId} />
   } else {
-    return (
-      <Link to="snapshot">
-        Create a new snapshot to obtain a DOI for the snapshot.
-      </Link>
-    )
+    return <DOILinkFallback datasetId={datasetId} />
   }
 }

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

@@ -96,7 +96,7 @@ export const DatasetRelations = ({ datasetId, hasEdit }) => {
             return (
               <React.Fragment key={obj.id}>
                 <GridItem>
-                  <DOILink DOI={obj.id} />
+                  <DOILink DOI={obj.id} datasetId={datasetId} />
                 </GridItem>
                 <GridItem>{obj.description}</GridItem>
                 <GridItem>
@@ -107,8 +107,7 @@ export const DatasetRelations = ({ datasetId, hasEdit }) => {
                         variables: { datasetId, doi: obj.id },
                       })
                       await refetch()
-                    }}
-                  >
+                    }}>
                     Delete
                   </button>
                 </GridItem>

package/src/scripts/refactor_2021/dataset/snapshot-container.tsx

@@ -22,7 +22,6 @@ import {
   CloneDropdown,
   DatasetHeader,
   DatasetHeaderMeta,
-  DatasetPage,
   DatasetGitAccess,
   VersionList,
   DatasetTools,
@@ -88,35 +87,28 @@ 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}
@@ -124,10 +116,8 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                 datasetId={datasetId}
               />
             )}
-          </>
-        )}
-        renderFollowBookmark={() => (
-          <>
+          </div>
+          <div className="col follow-bookmark">
             <FollowDataset
               profile={profile}
               datasetId={dataset.id}
@@ -140,78 +130,79 @@ 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}
+            </div>
+            <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>
+            <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}
             />
-          </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>
+          <div className="col sidebar">
             <MetaDataBlock
               heading="Authors"
               item={
@@ -337,7 +328,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 +371,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/uploader/upload-issues.jsx

@@ -67,6 +67,7 @@ class UploadValidator extends React.Component {
       config: {
         error: ['NO_AUTHORS'],
         ignoreSubjectConsistency: true,
+        blacklistModalities: ['Microscopy'],
       },
     }
     validate(this.props.files, options).then(this.done)

package/src/scripts/{refactor_2021/routes.tsx → routes.tsx}

@@ -2,19 +2,19 @@ import React from 'react'
 import { Route, Switch, Redirect } from 'react-router-dom'
 
 // TODO - Re-enable code splitting these when we can
-import Dataset from './dataset/draft-snapshot-routes'
+import Dataset from './refactor_2021/dataset/draft-snapshot-routes'
 //import PreRefactorDatasetProps from './dataset/dataset-pre-refactor-container'
 
 import { FAQS } from '@openneuro/components/faqs'
-import FrontPageContainer from './containers/front-page-container'
-import Admin from './admin/admin'
-import SearchRoutes from './search/search-routes'
-import APIKey from './user/api'
-import ErrorRoute from '../errors/errorRoute'
-import { PETRedirect } from '../pet/redirect'
-import Citation from '../pages/citation-page'
-import FourOFourPage from '../errors/404page'
-import { ImportDataset } from '../pages/import-dataset'
+import FrontPageContainer from './pages/front-page/front-page'
+import Admin from './pages/admin/admin'
+import SearchRoutes from './refactor_2021/search/search-routes'
+import APIKey from './refactor_2021/user/api'
+import ErrorRoute from './errors/errorRoute'
+import { PETRedirect } from './pages/pet-redirect'
+import Citation from './pages/citation-page'
+import FourOFourPage from './errors/404page'
+import { ImportDataset } from './pages/import-dataset'
 
 const Routes: React.VoidFunctionComponent = () => (
   <Switch>

package/src/scripts/mobile/collapsible-wrapper.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-interface IsOpenProps {
-  isOpen: boolean
-}
-
-// wrapper for collapsible content on mobile
-const Content = styled.div<IsOpenProps>`
-  height: 7em;
-  overflow: hidden;
-  text-align: left;
-  ${(props): string =>
-    props.isOpen &&
-    `
-      display: block;
-      height: auto;
-      overflow: auto;
-    `};
-`
-
-const Collapse = ({ children, isOpen }): React.ReactElement => {
-  return <Content isOpen={isOpen}>{children}</Content>
-}
-
-Collapse.propTypes = {
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool,
-}
-
-Collapse.defaultProps = {
-  isOpen: undefined,
-}
-
-const Item = styled.button`
-  background-color: transparent;
-  border: 0;
-  font-weight: 700;
-  padding: 0;
-  &,
-  &:hover {
-    text-decoration: none;
-  }
-  &:focus {
-    outline: 0;
-  }
-`
-
-const Wrapper = styled.span`
-  display: flex;
-  align-items: center;
-`
-
-const Title = styled.p`
-  padding-right: 0.5rem;
-  cursor: pointer;
-  color: #00505c;
-  text-decoration: none;
-  font-family: 'Cabin', sans-serif;
-  font-size: 12px;
-`
-
-const Collapsible = ({ children, ...otherProps }): React.ReactElement => {
-  const [isOpen, setOpen] = useState(false)
-  const toggleItem = (): void => {
-    setOpen(prevState => !prevState)
-  }
-  return (
-    <>
-      <div>
-        <Collapse isOpen={isOpen}>{children}</Collapse>
-      </div>
-      <Item onClick={toggleItem}>
-        <Wrapper>
-          <Title>{!isOpen ? otherProps.title[0] : otherProps.title[1]}</Title>
-        </Wrapper>
-      </Item>
-    </>
-  )
-}
-
-Collapsible.propTypes = {
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool,
-}
-
-Collapsible.defaultProps = {
-  icon: 'down-chevron',
-  isOpen: false,
-}
-
-export default Collapsible