@openneuro/app 4.1.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -14,22 +14,19 @@
   },
   "author": "Squishymedia",
   "dependencies": {
-    "@apollo/client": "3.3.14",
+    "@apollo/client": "3.4.17",
     "@artsy/fresnel": "^1.3.1",
-    "@elastic/apm-rum": "^5.8.0",
-    "@emotion/core": "^10.0.4",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^10.0.4",
-    "@loadable/component": "^5.7.0",
-    "@openneuro/client": "^4.1.0",
-    "@openneuro/components": "^4.1.0",
+    "@elastic/apm-rum": "5.9.1",
+    "@emotion/react": "11.6.0",
+    "@emotion/styled": "11.6.0",
+    "@openneuro/client": "^4.2.1",
+    "@openneuro/components": "^4.2.1",
     "babel-runtime": "^6.26.0",
-    "bids-validator": "1.8.4",
+    "bids-validator": "1.8.5",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "core-js": "^3.3.2",
     "cross-fetch": "^3.1.4",
-    "crypto-hash": "^1.3.0",
     "date-fns": "^2.16.1",
     "draft-js": "^0.11.7",
     "email-validator": "^2.0.4",
@@ -38,12 +35,10 @@
     "graphql": "14.7.0",
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^7.1.2",
-    "md5": "^2.3.0",
     "os-browserify": "^0.3.0",
     "pluralize": "8.0.0",
     "prop-types": "^15.6.0",
     "react": "^17.0.1",
-    "react-bootstrap": "0.33.1",
     "react-cookie": "4.0.3",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^17.0.1",
@@ -58,11 +53,9 @@
     "resize-observer-polyfill": "^1.5.1",
     "semver": "^5.5.0",
     "subscriptions-transport-ws": "^0.9.9",
-    "superagent": "^3.6.0",
     "universal-cookie": "^4.0.4",
     "universal-cookie-express": "^4.0.3",
     "url-search-params-polyfill": "^2.0.1",
-    "urlite": "^1.2.8",
     "xmldoc": "^1.1.0"
   },
   "devDependencies": {
@@ -91,14 +84,12 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
-    "connect-history-api-fallback": "^1.5.0",
     "enzyme": "3.9.0",
     "esbuild-plugin-globals": "^0.1.1",
     "jest": "^26.6.3",
     "jest-fetch-mock": "^1.4.1",
     "jsdom": "^16.5.3",
     "object.fromentries": "^2.0.0",
-    "react-addons-test-utils": "^15.6.2",
     "rollup-plugin-polyfill-node": "^0.6.2",
     "sass": "^1.32.8",
     "stream-browserify": "^3.0.0",
@@ -130,5 +121,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "863ab304af812d8122d63c0432724d2e609d32c0"
+  "gitHead": "7d0a56fef0ee15ac3e6c941ca662581de5642fdf"
 }

package/src/scripts/common/forms/warn-button.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import Tooltip from '../partials/tooltip.jsx'
+import { Tooltip } from '@openneuro/components/tooltip'
 import { toast } from 'react-toastify'
 import ToastContent from '../partials/toast-content.jsx'
 

package/src/scripts/{redesign.tsx → index.tsx}

@@ -1,18 +1,18 @@
 import React from 'react'
 import Uploader from './refactor_2021/uploader/uploader.jsx'
-import Routes_REFACTOR from './refactor_2021/routes'
+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'
 
-const Redesign = (): React.ReactElement => (
+const Index = (): React.ReactElement => (
   <Uploader>
     <SearchParamsProvider>
       <UserModalOpenProvider>
         <div className="sticky-content">
           <HeaderContainer />
-          <Routes_REFACTOR />
+          <Routes />
         </div>
         <div className="sticky-footer">
           <FooterContainer />
@@ -22,4 +22,4 @@ const Redesign = (): React.ReactElement => (
   </Uploader>
 )
 
-export default Redesign
+export default Index

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { frontPage } from '../front-page/front-page-content'
+import styled from '@emotion/styled'
+
+const CitationPageStyle = styled.div`
+  background: white;
+
+  .container {
+    max-width: 60em;
+    min-height: calc(100vh - 125px);
+  }
+`
+
+const CitationPage: React.VoidFunctionComponent = () => (
+  <CitationPageStyle>
+    <div className="container">
+      <h2>How to Cite OpenNeuro</h2>
+      <p>
+        When referring to the database, the preferred style is
+        &quot;OpenNeuro&quot; (not OpenNeuro.org). The first usage should be
+        cited in a references section according to the style preferences of the
+        venue.
+      </p>
+      <p>
+        When referring a specific dataset, the dataset may be referred to as
+        &quot;OpenNeuro Dataset ds00WXYZ&quot;, optionally followed by the
+        dataset name in parentheses. The first usage of each dataset should be
+        cited according to the style preferences of the venue.
+      </p>
+      <p>
+        See &quot;How to Cite&quot; on each dataset page for examples generated
+        for each dataset snapshot.
+      </p>
+      <div className="privacy-detail">
+        <span>{frontPage.titlePanel.privacyDetail}</span>
+      </div>
+    </div>
+  </CitationPageStyle>
+)
+
+export default CitationPage

package/src/scripts/refactor_2021/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/admin/flagged-files.jsx

@@ -8,7 +8,8 @@ import Helmet from 'react-helmet'
 import { Loading } from '@openneuro/components/loading'
 import { Link } from 'react-router-dom'
 import { pageTitle } from '../../resources/strings.js'
-import { unescapePath } from '../../file-tree/file-tree.jsx'
+
+export const unescapePath = path => path.replace(/:/g, '/')
 
 export const FLAGGED_FILES = gql`
   query flaggedFiles($flagged: Boolean, $deleted: Boolean) {

package/src/scripts/refactor_2021/admin/user-tools.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactElement } from 'react'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
-import WarnButton from '../../common/forms/warn-button.jsx'
+import { WarnButton } from '@openneuro/components/warn-button'
 import { getProfile } from '../authentication/profile.js'
 import { useCookies } from 'react-cookie'
 import { USER_FRAGMENT } from './user-fragment'
@@ -46,10 +46,9 @@ export const UserTools: FC<UserToolsProps> = ({ user, refetch }) => {
                 <WarnButton
                   message="Admin"
                   icon={adminIcon}
-                  action={(cb): void => {
+                  onConfirmedClick={(): void => {
                     setAdmin().then(() => {
                       refetch()
-                      cb()
                     })
                   }}
                 />
@@ -64,10 +63,9 @@ export const UserTools: FC<UserToolsProps> = ({ user, refetch }) => {
                 <WarnButton
                   message="Block"
                   icon={blacklistIcon}
-                  action={(cb): void => {
+                  onConfirmedClick={(): void => {
                     setBlocked().then(() => {
                       refetch()
-                      cb()
                     })
                   }}
                 />

package/src/scripts/refactor_2021/admin/users.jsx

@@ -6,8 +6,8 @@ import { Query } from '@apollo/client/react/components'
 import { gql } from '@apollo/client'
 import parseISO from 'date-fns/parseISO'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-import Input from '../../common/forms/input.jsx'
-import Spinner from '../../common/partials/spinner.jsx'
+import { Input } from '@openneuro/components/input'
+import { Loading } from '@openneuro/components/loading'
 import { formatDate } from '../../utils/date.js'
 import Helmet from 'react-helmet'
 import { pageTitle } from '../../resources/strings.js'
@@ -25,7 +25,7 @@ export const GET_USERS = gql`
 
 export const UsersQueryResult = ({ loading, data, refetch }) => {
   if (loading) {
-    return <Spinner active message="Loading users" />
+    return <Loading />
   } else {
     return (
       <Users loading={loading} users={data.users || []} refetch={refetch} />
@@ -106,9 +106,10 @@ class Users extends React.Component {
             <h2>Current Users</h2>
 
             <Input
-              className="pull-right"
+              name="Search Name Or Email"
+              type="text"
               placeholder="Search Name or Email"
-              onChange={e => this.setState({ stringFilter: e.target.value })}
+              onKeyDown={e => this.setState({ stringFilter: e.target.value })}
             />
           </div>
 
@@ -167,11 +168,7 @@ class Users extends React.Component {
   // custom methods -----------------------------------------------------
 
   _noResults() {
-    return this.state.loading ? (
-      <Spinner active message="Loading users" />
-    ) : (
-      <h4>No Results Found</h4>
-    )
+    return this.state.loading ? <Loading /> : <h4>No Results Found</h4>
   }
 
   _userSummary(user) {

package/src/scripts/{authentication → refactor_2021/authentication}/__tests__/profile.spec.js

@@ -1,4 +1,4 @@
-import { parseJwt } from '../../refactor_2021/authentication/profile.js'
+import { parseJwt } from '../profile.js'
 
 const asciiToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'

package/src/scripts/refactor_2021/containers/footer.tsx

@@ -1,12 +1,10 @@
-import React, { FC, useContext } from 'react'
+import React, { FC } from 'react'
 import { Footer } from '@openneuro/components/footer'
-import ContactForm from '../redesign-form'
 import { version as openneuroVersion } from '../../../lerna.json'
 
 const FooterContainer: FC = () => {
   return (
     <>
-      <ContactForm />
       <Footer version={openneuroVersion} />
     </>
   )

package/src/scripts/{datalad/dataset → refactor_2021/dataset/comments}/__tests__/__snapshots__/comment.spec.jsx.snap

@@ -16,10 +16,6 @@ Object {
         <div
           class="row comment-body"
         >
-          <img
-            class="comment-avatar"
-            src="https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8?s=200&d=identicon"
-          />
           <div
             class="DraftEditor-root"
           >
@@ -82,10 +78,6 @@ Object {
       <div
         class="row comment-body"
       >
-        <img
-          class="comment-avatar"
-          src="https://www.gravatar.com/avatar/23463b99b62a72f26ed677cc556c44e8?s=200&d=identicon"
-        />
         <div
           class="DraftEditor-root"
         >

package/src/scripts/refactor_2021/dataset/comments/__tests__/__snapshots__/comments.spec.jsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comments component recursively renders a tree of comments 1`] = `
+<Comments
+  comments={
+    Array [
+      Object {
+        "id": "xyz",
+        "replies": Array [
+          Object {
+            "id": "xyz",
+            "replies": Array [],
+            "text": "{\\"blocks\\":[{\\"key\\":\\"3sm42\\",\\"text\\":\\"\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
+            "user": Object {
+              "email": "example@example.com",
+              "id": "1234",
+            },
+          },
+        ],
+        "text": "{\\"blocks\\":[{\\"key\\":\\"3sm42\\",\\"text\\":\\"\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
+        "user": Object {
+          "email": "example@example.com",
+          "id": "1234",
+        },
+      },
+    ]
+  }
+  datasetId="ds000001"
+>
+  <div
+    className="dataset-comments"
+  >
+    <h2>
+      Comments
+    </h2>
+    <ErrorBoundary
+      subject="error in dataset comments"
+    >
+      <LoggedIn />
+      <LoggedOut>
+        <div>
+          Please sign in to contribute to the discussion.
+        </div>
+      </LoggedOut>
+      <CommentTree
+        commentMap={
+          Object {
+            "xyz": Object {
+              "id": "xyz",
+              "replies": Array [
+                Object {
+                  "id": "xyz",
+                  "replies": Array [],
+                  "text": "{\\"blocks\\":[{\\"key\\":\\"3sm42\\",\\"text\\":\\"\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
+                  "user": Object {
+                    "email": "example@example.com",
+                    "id": "1234",
+                  },
+                },
+              ],
+              "text": "{\\"blocks\\":[{\\"key\\":\\"3sm42\\",\\"text\\":\\"\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
+              "user": Object {
+                "email": "example@example.com",
+                "id": "1234",
+              },
+            },
+          }
+        }
+        comments={Array []}
+        datasetId="ds000001"
+      />
+    </ErrorBoundary>
+  </div>
+</Comments>
+`;
+
+exports[`Comments component renders one top level comment 1`] = `
+<Comments
+  comments={
+    Array [
+      Object {
+        "id": "xyz",
+        "replies": Array [],
+        "text": "{\\"blocks\\":[{\\"key\\":\\"3sm42\\",\\"text\\":\\"\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
+        "user": Object {
+          "email": "example@example.com",
+          "id": "1234",
+        },
+      },
+    ]
+  }
+  datasetId="ds000001"
+>
+  <div
+    className="dataset-comments"
+  >
+    <h2>
+      Comments
+    </h2>
+    <ErrorBoundary
+      subject="error in dataset comments"
+    >
+      <LoggedIn />
+      <LoggedOut>
+        <div>
+          Please sign in to contribute to the discussion.
+        </div>
+      </LoggedOut>
+      <CommentTree
+        commentMap={
+          Object {
+            "xyz": Object {
+              "id": "xyz",
+              "replies": Array [],
+              "text": "{\\"blocks\\":[{\\"key\\":\\"3sm42\\",\\"text\\":\\"\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
+              "user": Object {
+                "email": "example@example.com",
+                "id": "1234",
+              },
+            },
+          }
+        }
+        comments={Array []}
+        datasetId="ds000001"
+      />
+    </ErrorBoundary>
+  </div>
+</Comments>
+`;

package/src/scripts/refactor_2021/dataset/dataset-query.jsx

@@ -144,7 +144,7 @@ export const DatasetQueryHook = ({ datasetId, draft, history }) => {
   })
   useDraftSubscription(datasetId)
 
-  if (loading)
+  if (loading || !data)
     return (
       <div className="loading-dataset">
         <Loading />
@@ -172,7 +172,8 @@ export const DatasetQueryHook = ({ datasetId, draft, history }) => {
             datasetId,
             fetchMore,
             error,
-          }}>
+          }}
+        >
           <DatasetRoutes dataset={data.dataset} />
           <FilesSubscription datasetId={datasetId} />
         </DatasetQueryContext.Provider>
@@ -207,7 +208,8 @@ const DatasetQuery = ({ match, history }) => {
     <>
       <DatasetRedirect />
       <ErrorBoundaryAssertionFailureException
-        subject={'error in dataset query'}>
+        subject={'error in dataset query'}
+      >
         <DatasetQueryHook
           datasetId={datasetId}
           draft={!snapshotId}

package/src/scripts/refactor_2021/dataset/dataset-routes.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { Route, Switch, Redirect } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 import AdminDataset from './routes/admin-datalad.jsx'
 import AdminExports from './routes/admin-exports.jsx'
 
 import SnapshotContainer from './snapshot-container'
 import DraftContainer from './draft-container'
-import DownloadDataset from './routes/download-dataset.jsx'
+import DownloadDataset from './routes/download-dataset'
 import Publish from './routes/publish.jsx'
 import Share from './routes/manage-permissions.jsx'
 import Snapshot from './routes/snapshot.jsx'
@@ -37,7 +37,12 @@ const DatasetRoutes = ({ dataset, error }) => {
         name="download"
         exact
         path="/datasets/:datasetId/download"
-        component={DownloadDataset}
+        component={() => (
+          <DownloadDataset
+            worker={dataset.worker}
+            datasetPermissions={dataset.permissions}
+          />
+        )}
       />
       <Route
         name="admin"
@@ -116,7 +121,12 @@ const DatasetRoutes = ({ dataset, error }) => {
         name="snapshot-download"
         exact
         path="/datasets/:datasetId/versions/:snapshotId/download"
-        component={DownloadDataset}
+        component={() => (
+          <DownloadDataset
+            worker={dataset.worker}
+            datasetPermissions={dataset.permissions}
+          />
+        )}
       />
       <Route
         path="/datasets/:datasetId/versions/:snapshotTag/file-display/:filePath"