@openneuro/app 4.4.9 → 4.5.1

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
-import DatasetQueryContext from '../../datalad/dataset/dataset-query-context.js'
+import DatasetQueryContext from '../datalad/dataset/dataset-query-context.js'
 import Markdown from 'markdown-to-jsx'
 import { Link, useLocation } from 'react-router-dom'
 import pluralize from 'pluralize'
@@ -9,7 +9,7 @@ import parseISO from 'date-fns/parseISO'
 
 import Files from './files'
 import Validation from '../validation/validation.jsx'
-import { config } from '../../config'
+import { config } from '../config'
 import Comments from './comments/comments.jsx'
 import DatasetCitation from './fragments/dataset-citation.jsx'
 import { DatasetAlertVersion } from './fragments/dataset-alert-version'
@@ -22,7 +22,6 @@ import {
   CloneDropdown,
   DatasetHeader,
   DatasetHeaderMeta,
-  DatasetPage,
   DatasetGitAccess,
   VersionList,
   DatasetTools,
@@ -41,7 +40,7 @@ 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'
 
 const formatDate = dateObject =>
@@ -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 → 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',

package/src/scripts/{refactor_2021/containers/front-page-container.tsx → pages/front-page/front-page.tsx}

@@ -2,9 +2,9 @@ import { apm } from '../../apm'
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
+import styled from '@emotion/styled'
 
 import {
-  FrontPage,
   AffiliateBlock,
   ActivityHeader,
   Contributors,
@@ -154,37 +154,58 @@ export const FrontPageNewQuery = ({ query }) => {
     )
   }
 }
-const FrontPageContainer: React.FC = () => {
-  return (
-    <>
-      <FrontPage
-        className="front-page"
-        renderAffiliateBlock={() => <AffiliateBlock />}
-        renderInfographic={() => <Infographic />}
-        renderActivitySliderFront={() => (
-          <>
-            <ActivityHeader />
-            <FrontPageTopQuery query={TOP_VIEWED} />
-            <FrontPageNewQuery query={RECENTLY_PUBLISHED} />
-          </>
-        )}
-        renderGetUpdates={() => (
-          <Mutation mutation={SUBSCRIBE_TO_NEWSLETTER}>
-            {subscribeToNewsletter => (
-              <GetUpdates
-                subscribe={(email, cb) => {
-                  subscribeToNewsletter({ variables: { email } })
-                    .then(cb)
-                    .catch(cb)
-                }}
-              />
-            )}
-          </Mutation>
+
+const FrontPageSection = styled.section`
+  margin: 100px 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.gray-bg {
+    margin: 0;
+    padding: 100px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+`
+
+const FrontPageContainer: React.FC = () => (
+  <div className="front-page page">
+    <FrontPageSection>
+      <AffiliateBlock />
+    </FrontPageSection>
+    <FrontPageSection>
+      <div className="container">
+        <Infographic />
+      </div>
+    </FrontPageSection>
+    <FrontPageSection className="front-page-activity">
+      <div className="activity-swoop">
+        <div></div>
+      </div>
+      <div className="swoop-content gray-bg">
+        <div className="container">
+          <ActivityHeader />
+          <FrontPageTopQuery query={TOP_VIEWED} />
+          <FrontPageNewQuery query={RECENTLY_PUBLISHED} />
+        </div>
+      </div>
+    </FrontPageSection>
+    <FrontPageSection className="gray-bg">
+      <Mutation mutation={SUBSCRIBE_TO_NEWSLETTER}>
+        {subscribeToNewsletter => (
+          <GetUpdates
+            subscribe={(email, cb) => {
+              subscribeToNewsletter({ variables: { email } }).then(cb).catch(cb)
+            }}
+          />
         )}
-        renderContributors={() => <Contributors />}
-      />
-    </>
-  )
-}
+      </Mutation>
+    </FrontPageSection>
+    <FrontPageSection className="gray-bg">
+      <Contributors />
+    </FrontPageSection>
+  </div>
+)
 
 export default FrontPageContainer

package/src/scripts/pages/front-page-comp.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from '@emotion/styled'
+
+const FrontPageSection = styled.section`
+  margin: 100px 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.gray-bg {
+    margin: 0;
+    padding: 100px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+`
+
+export interface FrontPageProps {
+  renderAffiliateBlock: () => React.ReactNode
+  renderInfographic: () => React.ReactNode
+  renderActivitySliderFront: () => React.ReactNode
+  renderGetUpdates: () => React.ReactNode
+  renderContributors: () => React.ReactNode
+  className?: string
+}
+
+export const FrontPage: React.FC<FrontPageProps> = ({
+  renderAffiliateBlock,
+  renderInfographic,
+  renderActivitySliderFront,
+  renderGetUpdates,
+  renderContributors,
+  className,
+}) => (
+  <>
+    <div className={className + ' page'}>
+      <FrontPageSection>{renderAffiliateBlock()}</FrontPageSection>
+      <FrontPageSection>
+        <div className="container">{renderInfographic()}</div>
+      </FrontPageSection>
+      <FrontPageSection className="front-page-activity">
+        <div className="activity-swoop">
+          <div></div>
+        </div>
+        <div className="swoop-content gray-bg">
+          <div className="container">{renderActivitySliderFront()}</div>
+        </div>
+      </FrontPageSection>
+      <FrontPageSection className="gray-bg">
+        {renderGetUpdates()}
+      </FrontPageSection>
+      <FrontPageSection className="gray-bg">
+        {renderContributors()}
+      </FrontPageSection>
+    </div>
+  </>
+)

package/src/scripts/pages/import-dataset.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
-import { ImportDatasetMutation } from '../refactor_2021/dataset/mutations/import-dataset'
+import { ImportDatasetMutation } from '../dataset/mutations/import-dataset'
 import { useLocation } from 'react-router-dom'
-import LoggedIn from '../refactor_2021/authentication/logged-in'
-import LoggedOut from '../refactor_2021/authentication/logged-out'
-import { testAffirmed } from '../refactor_2021/uploader/upload-disclaimer'
-import { UploadDisclaimerInput } from '../refactor_2021/uploader/upload-disclaimer-input'
+import LoggedIn from '../authentication/logged-in'
+import LoggedOut from '../authentication/logged-out'
+import { testAffirmed } from '../uploader/upload-disclaimer'
+import { UploadDisclaimerInput } from '../uploader/upload-disclaimer-input'
 
 function useQuery() {
   const { search } = useLocation()