@openneuro/app 4.3.0-alpha.5 → 4.4.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.3.0-alpha.5",
+  "version": "4.4.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,8 +19,8 @@
     "@elastic/apm-rum": "5.9.1",
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@openneuro/client": "^4.3.0-alpha.5",
-    "@openneuro/components": "^4.3.0-alpha.5",
+    "@openneuro/client": "^4.4.0-alpha.0",
+    "@openneuro/components": "^4.4.0-alpha.0",
     "babel-runtime": "^6.26.0",
     "bids-validator": "1.8.8",
     "bytes": "^3.0.0",
@@ -116,5 +116,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ce7aecd560416297947a40014fe246df40a92f5"
+  "gitHead": "732d5f59ef4723e6236974679eabe3cc9c3ad09f"
 }

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

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
+import { ImportDatasetMutation } from '../refactor_2021/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'
+
+function useQuery() {
+  const { search } = useLocation()
+  return React.useMemo(() => new URLSearchParams(search), [search])
+}
+
+const ImportDatasetPageStyle = styled.div`
+  background: white;
+
+  .container {
+    max-width: 60em;
+    min-height: calc(100vh - 125px);
+  }
+`
+
+export const ImportDataset: React.VoidFunctionComponent = () => {
+  const url = useQuery().get('url')
+  const [affirmedDefaced, setAffirmedDefaced] = useState(false)
+  const [affirmedConsent, setAffirmedConsent] = useState(false)
+  return (
+    <ImportDatasetPageStyle>
+      <div className="container">
+        <h2>Import a dataset from remote URL</h2>
+        <p>
+          Use this page to import a new OpenNeuro dataset from{' '}
+          <a href="https://brainlife.io/ezbids/">ezBIDS</a>. After submitting an
+          import, please allow some time for processing and you will receive an
+          email notification when complete.
+        </p>
+        <LoggedIn>
+          <UploadDisclaimerInput
+            affirmedDefaced={affirmedDefaced}
+            affirmedConsent={affirmedConsent}
+            onChange={({ affirmedDefaced, affirmedConsent }): void => {
+              setAffirmedDefaced(affirmedDefaced)
+              setAffirmedConsent(affirmedConsent)
+            }}
+          />
+          <ImportDatasetMutation
+            url={url}
+            disabled={testAffirmed(affirmedDefaced, affirmedConsent)}
+            affirmedDefaced={affirmedDefaced}
+            affirmedConsent={affirmedConsent}
+          />
+        </LoggedIn>
+        <LoggedOut>
+          <p>Please sign in to continue.</p>
+        </LoggedOut>
+      </div>
+    </ImportDatasetPageStyle>
+  )
+}

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

@@ -182,7 +182,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
           <DatasetTools
             hasEdit={hasEdit}
             isPublic={dataset.public}
-            isSnapshot={isSnapshot}
             datasetId={datasetId}
             isAdmin={isAdmin}
             hasSnapshot={dataset.snapshots.length !== 0}
@@ -236,7 +235,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
               heading="Authors"
               description={description.Authors}
               editMode={hasEdit}>
-              {description.Authors?.length ? description.Authors : ['N/A']}
+              {description?.Authors?.length ? description.Authors : ['N/A']}
             </EditDescriptionList>
 
             {summary && (

package/src/scripts/refactor_2021/dataset/mutations/follow.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useContext } from 'react'
-import { useLocation } from 'react-router-dom'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
 import { datasetCacheId } from '../../../datalad/mutations/cache-id.js'
@@ -45,16 +44,11 @@ export const FollowDataset: FC<FollowDatasetProps> = ({
   profile,
   followers,
 }) => {
-  const { setUserModalOpen, setLoginOptions } = useContext(UserModalOpenCtx)
-  const location = useLocation()
+  const { setUserModalOpen } = useContext(UserModalOpenCtx)
   const handleToggle = followDataset => () => {
     if (!profile) {
       // if user is not logged in, give them the option to do so
       // then redirect back to this page
-      setLoginOptions(prevState => ({
-        ...prevState,
-        redirect: `${location.pathname}`,
-      }))
       setUserModalOpen(true)
     } else {
       followDataset({ variables: { datasetId } })

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

@@ -0,0 +1,97 @@
+import React, { FC, useState } from 'react'
+import { gql, useMutation, useApolloClient } from '@apollo/client'
+import { Button } from '@openneuro/components/button'
+import { createDataset } from '../../uploader/upload-mutation'
+import styled from '@emotion/styled'
+
+export const IMPORT_DATASET = gql`
+  mutation importRemoteDataset($datasetId: ID!, $url: String!) {
+    importRemoteDataset(datasetId: $datasetId, url: $url)
+  }
+`
+
+const StatusRow = styled.div`
+  margin-top: 1em;
+`
+
+const URLInput = styled.input`
+  width: 100%;
+`
+
+interface ImportDatasetMutationProps {
+  url: string
+  affirmedDefaced: boolean
+  affirmedConsent: boolean
+  disabled?: boolean | null
+}
+
+export const ImportDatasetMutation: FC<ImportDatasetMutationProps> = ({
+  url,
+  disabled,
+  affirmedDefaced,
+  affirmedConsent,
+}) => {
+  const [importStarted, setImportStarted] = useState(false)
+  const [importFailed, setImportFailed] = useState(false)
+  const [ImportDataset] = useMutation(IMPORT_DATASET)
+  const apolloClient = useApolloClient()
+
+  let status = (
+    <Button
+      className="btn-modal-action"
+      primary={true}
+      label="Start Import"
+      size="medium"
+      disabled={disabled}
+      onClick={async () => {
+        const createDatasetMutation = createDataset(apolloClient)
+        const datasetId = await createDatasetMutation({
+          affirmedDefaced,
+          affirmedConsent,
+        })
+        try {
+          await ImportDataset({
+            variables: { datasetId, url },
+          })
+          setImportStarted(true)
+        } catch (err) {
+          setImportFailed(true)
+        }
+      }}
+    />
+  )
+
+  // User can start import
+
+  // Import is running successfully
+  if (importStarted && !importFailed) {
+    status = (
+      <p>
+        This import has been started and you will receive an email when it is
+        complete.
+      </p>
+    )
+  }
+
+  if (importFailed) {
+    status = (
+      <p>
+        An error was encountered importing this URL. This may indicate the URL
+        is inaccessible or is not the correct zip format. Please contact support
+        if you have verified the bundle is correct and still experience this
+        error.
+      </p>
+    )
+  }
+
+  return (
+    <>
+      <label>
+        Source URL
+        <URLInput type="text" disabled value={url} id="import-url" />
+      </label>
+
+      <StatusRow>{status}</StatusRow>
+    </>
+  )
+}

package/src/scripts/refactor_2021/dataset/mutations/star.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useContext } from 'react'
-import { useLocation } from 'react-router-dom'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
 import { datasetCacheId } from '../../../datalad/mutations/cache-id.js'
@@ -44,16 +43,11 @@ export const StarDataset: FC<StarDatasetProps> = ({
   profile,
   stars,
 }) => {
-  const { setUserModalOpen, setLoginOptions } = useContext(UserModalOpenCtx)
-  const location = useLocation()
+  const { setUserModalOpen } = useContext(UserModalOpenCtx)
   const handleToggle = starDataset => () => {
     if (!profile) {
       // if user is not logged in, give them the option to do so
       // then redirect back to this page
-      setLoginOptions(prevState => ({
-        ...prevState,
-        redirect: `${location.pathname}`,
-      }))
       setUserModalOpen(true)
     } else {
       starDataset({ variables: { datasetId } })

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

@@ -172,7 +172,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             hasEdit={hasEdit}
             isPublic={dataset.public}
             datasetId={datasetId}
-            isSnapshot={true}
+            snapshotId={snapshot.tag}
             isAdmin={isAdmin}
             isDatasetAdmin={isDatasetAdmin}
           />
@@ -214,7 +214,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             <MetaDataBlock
               heading="Authors"
               item={
-                description.Authors.length
+                description?.Authors?.length
                   ? description.Authors.join(', ')
                   : 'N/A'
               }

package/src/scripts/refactor_2021/routes.tsx

@@ -14,6 +14,7 @@ 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'
 
 const Routes: React.VoidFunctionComponent = () => (
   <Switch>
@@ -26,6 +27,7 @@ const Routes: React.VoidFunctionComponent = () => (
     <Route path="/error" component={ErrorRoute} />
     <Route path="/pet" component={PETRedirect} />
     <Route path="/cite" component={Citation} />
+    <Route path="/import" component={ImportDataset} />
     <Redirect from="/public" to="/search" />
     <Redirect from="/saved" to="/search?bookmarks" />
     <Redirect from="/dashboard" to="/search?mydatasets" />

package/src/scripts/refactor_2021/uploader/upload-disclaimer-input.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import styled from '@emotion/styled'
+
+interface UploadDisclaimerInputProps {
+  affirmedDefaced: boolean
+  affirmedConsent: boolean
+  onChange: ({
+    affirmedDefaced,
+    affirmedConsent,
+  }: {
+    affirmedDefaced: boolean
+    affirmedConsent: boolean
+  }) => void
+}
+
+const DisclaimerLabel = styled.label`
+  display: block;
+  font-weight: bold;
+  margin-bottom: 20px;
+  border-top: 1px solid;
+  padding-top: 10px;
+`
+
+export const UploadDisclaimerInput: React.FunctionComponent<UploadDisclaimerInputProps> =
+  ({ affirmedDefaced, affirmedConsent, onChange }) => {
+    return (
+      <>
+        <h4>
+          By uploading this dataset to OpenNeuro I agree to the following
+          conditions:
+        </h4>
+        <p>
+          I am the owner of this dataset and have any necessary ethics
+          permissions to share the data publicly. This dataset does not include
+          any identifiable personal health information as defined by the{' '}
+          <a href="https://www.hhs.gov/hipaa/for-professionals/privacy/laws-regulations/">
+            Health Insurance Portability and Accountability Act of 1996
+          </a>{' '}
+          (including names, zip codes, dates of birth, acquisition dates, etc).
+          I agree to destroy any key linking the personal identity of research
+          participants to the subject codes used in the dataset.
+        </p>
+        <p>
+          I agree that this dataset will become publicly available under a{' '}
+          <a href="https://wiki.creativecommons.org/wiki/CC0">
+            Creative Commons CC0
+          </a>{' '}
+          license after a grace period of 36 months counted from the date of the
+          first snapshot creation for this dataset. You will be able to apply
+          for up to two 6 month extensions to increase the grace period in case
+          the publication of a corresponding paper takes longer than expected.
+          See <a href="/faq">FAQ</a> for details.
+        </p>
+        <p>This dataset is not subject to GDPR protections.</p>
+        <p>
+          Generally, data should only be uploaded to a single data archive. In
+          the rare cases where it is necessary to upload the data to two
+          databases (such as the NIMH Data Archive), I agree to ensure that the
+          datasets are harmonized across archives.
+        </p>
+        <p>Please affirm one of the following:</p>
+        <DisclaimerLabel>
+          <input
+            type="checkbox"
+            onChange={(): void =>
+              onChange({ affirmedDefaced: !affirmedDefaced, affirmedConsent })
+            }
+            defaultChecked={affirmedDefaced}
+          />
+          &nbsp; All structural scans have been defaced, obscuring any tissue on
+          or near the face that could potentially be used to reconstruct the
+          facial structure.
+        </DisclaimerLabel>
+        <DisclaimerLabel>
+          <input
+            type="checkbox"
+            onChange={(): void =>
+              onChange({ affirmedDefaced, affirmedConsent: !affirmedConsent })
+            }
+            defaultChecked={affirmedConsent}
+          />
+          &nbsp; I have explicit participant consent and ethical authorization
+          to publish structural scans without defacing.
+        </DisclaimerLabel>
+      </>
+    )
+  }

package/src/scripts/refactor_2021/uploader/upload-disclaimer.jsx

@@ -1,5 +1,15 @@
 import React, { useState } from 'react'
 import UploaderContext from './uploader-context.js'
+import { UploadDisclaimerInput } from './upload-disclaimer-input'
+
+/**
+ * Defacing/consent input logic
+ */
+export const testAffirmed = (affirmedDefaced, affirmedConsent) =>
+  !(
+    (affirmedDefaced && !affirmedConsent) ||
+    (!affirmedDefaced && affirmedConsent)
+  )
 
 const UploadDisclaimer = () => {
   const [affirmedDefaced, setAffirmedDefaced] = useState(false)
@@ -8,60 +18,14 @@ const UploadDisclaimer = () => {
     <UploaderContext.Consumer>
       {uploader => (
         <div className="disclaimer fade-in">
-          <h4>
-            By uploading this dataset to OpenNeuro I agree to the following
-            conditions:
-          </h4>
-          <p>
-            I am the owner of this dataset and have any necessary ethics
-            permissions to share the data publicly. This dataset does not
-            include any identifiable personal health information as defined by
-            the{' '}
-            <a href="https://www.hhs.gov/hipaa/for-professionals/privacy/laws-regulations/">
-              Health Insurance Portability and Accountability Act of 1996
-            </a>{' '}
-            (including names, zip codes, dates of birth, acquisition dates,
-            etc). I agree to destroy any key linking the personal identity of
-            research participants to the subject codes used in the dataset.
-          </p>
-          <p>
-            I agree that this dataset will become publicly available under a{' '}
-            <a href="https://wiki.creativecommons.org/wiki/CC0">
-              Creative Commons CC0
-            </a>{' '}
-            license after a grace period of 36 months counted from the date of
-            the first snapshot creation for this dataset. You will be able to
-            apply for up to two 6 month extensions to increase the grace period
-            in case the publication of a corresponding paper takes longer than
-            expected. See <a href="/faq">FAQ</a> for details.
-          </p>
-          <p>This dataset is not subject to GDPR protections.</p>
-          <p>
-            Generally, data should only be uploaded to a single data archive. In
-            the rare cases where it is necessary to upload the data to two
-            databases (such as the NIMH Data Archive), I agree to ensure that
-            the datasets are harmonized across archives.
-          </p>
-          <p>Please affirm one of the following:</p>
-          <label>
-            <input
-              type="checkbox"
-              onChange={() => setAffirmedDefaced(!affirmedDefaced)}
-              defaultChecked={affirmedDefaced}
-            />
-            &nbsp; All structural scans have been defaced, obscuring any tissue
-            on or near the face that could potentially be used to reconstruct
-            the facial structure.
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              onChange={() => setAffirmedConsent(!affirmedConsent)}
-              defaultChecked={affirmedConsent}
-            />
-            &nbsp; I have explicit participant consent and ethical authorization
-            to publish structural scans without defacing.
-          </label>
+          <UploadDisclaimerInput
+            affirmedDefaced={affirmedDefaced}
+            affirmedConsent={affirmedConsent}
+            onChange={({ affirmedDefaced, affirmedConsent }) => {
+              setAffirmedDefaced(affirmedDefaced)
+              setAffirmedConsent(affirmedConsent)
+            }}
+          />
           <span className="message">
             <button
               className="fileupload-btn btn-blue"
@@ -73,13 +37,7 @@ const UploadDisclaimer = () => {
                 })
                 uploader.upload({ affirmedDefaced, affirmedConsent })
               }}
-              disabled={
-                !(
-                  (affirmedDefaced && !affirmedConsent) ||
-                  (!affirmedDefaced && affirmedConsent)
-                )
-              }
-            >
+              disabled={testAffirmed(affirmedDefaced, affirmedConsent)}>
               I Agree
             </button>
           </span>

package/src/scripts/refactor_2021/user-login-modal-ctx.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useState, FC, ReactNode } from 'react'
 import { UserLoginModal } from '@openneuro/components/modal'
 import loginUrls from './authentication/loginUrls'
+import { useLocation } from 'react-router-dom'
 
 export const UserModalOpenCtx = createContext(null)
 
@@ -12,20 +13,16 @@ export const UserModalOpenProvider: FC<UserModalOpenProviderProps> = ({
   children,
 }) => {
   const [userModalOpen, setUserModalOpen] = useState(false)
-  const [loginOptions, setLoginOptions] = useState({
-    redirect: null
-  })
   const toggle = (): void => {
     setUserModalOpen(prevState => !prevState)
   }
   return (
-    <UserModalOpenCtx.Provider value={{ userModalOpen, setUserModalOpen, setLoginOptions }}>
+    <UserModalOpenCtx.Provider value={{ userModalOpen, setUserModalOpen }}>
       {children}
       <UserLoginModal
         isOpen={userModalOpen}
         toggle={toggle}
         loginUrls={loginUrls}
-        redirectPathParam={loginOptions.redirect}
       />
     </UserModalOpenCtx.Provider>
   )