@openneuro/app 4.20.5 → 4.20.6-alpha.2

package/src/scripts/__mocks__/config.ts

@@ -2,10 +2,10 @@ export const config = {
   /**
    * CRN
    */
-  url: 'localhost:9876/crn/',
+  url: "localhost:9876/crn/",
 
   graphql: {
-    uri: 'http://server:8111',
+    uri: "http://server:8111",
   },
 
   /**
@@ -13,17 +13,17 @@ export const config = {
    */
   auth: {
     google: {
-      clientID: 'google-client-id',
+      clientID: "google-client-id",
     },
     orcid: {
-      clientID: 'orcid-client-id',
+      clientID: "orcid-client-id",
     },
   },
 
   sentry: {
-    environment: 'unit-tests',
+    environment: "unit-tests",
   },
   support: {
-    url: 'https://example.com/test-suite',
+    url: "https://example.com/test-suite",
   },
 }

package/src/scripts/__utils__/mock-app-shell.tsx

@@ -1,19 +1,20 @@
-import React from 'react'
-import { MemoryRouter } from 'react-router-dom'
-import { MockedProvider } from '@apollo/client/testing'
-import { SearchParamsCtx } from '../search/search-params-ctx'
-import { UserModalOpenCtx } from '../utils/user-login-modal-ctx'
-import initialSearchParams from '../search/initial-search-params'
+import React from "react"
+import { MemoryRouter } from "react-router-dom"
+import { MockedProvider } from "@apollo/client/testing"
+import { SearchParamsCtx } from "../search/search-params-ctx"
+import { UserModalOpenCtx } from "../utils/user-login-modal-ctx"
+import initialSearchParams from "../search/initial-search-params"
 
 /**
  * Reusable shell component that provides any context required by major component trees
  */
-export const MockAppShell = ({ children, route = '/' }) => (
+export const MockAppShell = ({ children, route = "/" }) => (
   <MockedProvider>
     <SearchParamsCtx.Provider
       value={{
         searchParams: initialSearchParams,
-      }}>
+      }}
+    >
       <UserModalOpenCtx.Provider value={false}>
         <MemoryRouter initialEntries={[route]}>{children}</MemoryRouter>
       </UserModalOpenCtx.Provider>

package/src/scripts/apm.js

@@ -1,17 +1,17 @@
-import { init as initApm } from '@elastic/apm-rum'
-import { config } from './config'
-import { version } from '../lerna.json'
+import { init as initApm } from "@elastic/apm-rum"
+import { config } from "./config"
+import { version } from "../lerna.json"
 
 export let apm
 
 export function setupApm() {
   if (
-    config.sentry.environment === 'production' ||
-    config.sentry.environment === 'staging'
+    config.sentry.environment === "production" ||
+    config.sentry.environment === "staging"
   ) {
     apm = initApm({
       serverUrl: config.ELASTIC_APM_SERVER_URL,
-      serviceName: 'openneuro-app',
+      serviceName: "openneuro-app",
       serviceVersion: version,
       environment: config.sentry.environment,
     })

package/src/scripts/app.tsx

@@ -1,10 +1,10 @@
-import React, { FC, ReactNode } from 'react'
-import Helmet from 'react-helmet'
-import { frontPage } from './pages/front-page/front-page-content'
-import { CookiesProvider, Cookies } from 'react-cookie'
-import { ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import { MediaContextProvider } from './styles/media'
+import React, { FC, ReactNode } from "react"
+import Helmet from "react-helmet"
+import { frontPage } from "./pages/front-page/front-page-content"
+import { Cookies, CookiesProvider } from "react-cookie"
+import { ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
+import { MediaContextProvider } from "./styles/media"
 
 interface AppProps {
   children: ReactNode

package/src/scripts/authentication/__tests__/profile.spec.js

@@ -1,22 +1,22 @@
-import { parseJwt } from '../profile'
+import { parseJwt } from "../profile"
 
 const asciiToken =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
 const utf8Token =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Iuelnue1jOenkeWtpuiAhSIsImlhdCI6MTUxNjIzOTAyMn0.pUw2ARoXv4LkJXB1ZR3Th6xG83URT6mn1TftC7ac_O8'
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Iuelnue1jOenkeWtpuiAhSIsImlhdCI6MTUxNjIzOTAyMn0.pUw2ARoXv4LkJXB1ZR3Th6xG83URT6mn1TftC7ac_O8"
 
-describe('authentication/profile', () => {
-  it('decodes a JWT to Javascript object', () => {
+describe("authentication/profile", () => {
+  it("decodes a JWT to Javascript object", () => {
     expect(parseJwt(asciiToken)).toEqual({
-      sub: '1234567890',
-      name: 'John Doe',
+      sub: "1234567890",
+      name: "John Doe",
       iat: 1516239022,
     })
   })
-  it('decodes a JWT with Unicode strings', () => {
+  it("decodes a JWT with Unicode strings", () => {
     expect(parseJwt(utf8Token)).toEqual({
-      sub: '1234567890',
-      name: '神経科学者',
+      sub: "1234567890",
+      name: "神経科学者",
       iat: 1516239022,
     })
   })

package/src/scripts/authentication/admin-user.jsx

@@ -1,5 +1,5 @@
-import { useCookies } from 'react-cookie'
-import { getProfile } from './profile'
+import { useCookies } from "react-cookie"
+import { getProfile } from "./profile"
 
 export const isAdmin = () => {
   const [cookies] = useCookies()

package/src/scripts/authentication/logged-in.jsx

@@ -1,5 +1,5 @@
-import { useCookies } from 'react-cookie'
-import { loginCheck } from './loginCheck.js'
+import { useCookies } from "react-cookie"
+import { loginCheck } from "./loginCheck.js"
 
 /**
  * Render children if logged in

package/src/scripts/authentication/logged-out.jsx

@@ -1,5 +1,5 @@
-import { useCookies } from 'react-cookie'
-import { loginCheck } from './loginCheck.js'
+import { useCookies } from "react-cookie"
+import { loginCheck } from "./loginCheck.js"
 
 /**
  * Render children if logged out

package/src/scripts/authentication/loginCheck.js

@@ -1,4 +1,4 @@
-import { getProfile, guardExpired } from './profile'
+import { getProfile, guardExpired } from "./profile"
 
 // Expects a universal cookie
-export const loginCheck = cookies => guardExpired(getProfile(cookies))
+export const loginCheck = (cookies) => guardExpired(getProfile(cookies))

package/src/scripts/authentication/loginUrls.ts

@@ -1,4 +1,4 @@
-import { config } from '../config'
+import { config } from "../config"
 
 export default {
   google: `${config.api}auth/google`,

package/src/scripts/authentication/profile.ts

@@ -1,4 +1,4 @@
-import jwtDecode from 'jwt-decode'
+import jwtDecode from "jwt-decode"
 
 interface OpenNeuroTokenProfile {
   sub: string
@@ -20,7 +20,7 @@ export const parseJwt = jwtDecode
  * Retrieve the user profile from JWT cookie
  */
 export function getProfile(cookies): OpenNeuroTokenProfile {
-  const accessToken = cookies['accessToken']
+  const accessToken = cookies["accessToken"]
   return accessToken ? parseJwt(accessToken) : null
 }
 
@@ -28,7 +28,7 @@ export function getProfile(cookies): OpenNeuroTokenProfile {
  * Return profile if token is not expired.
  * @param {*} cookies
  */
-export const getUnexpiredProfile = cookies => {
+export const getUnexpiredProfile = (cookies) => {
   const profile = getProfile(cookies)
   if (guardExpired(profile)) return profile
 }
@@ -51,10 +51,10 @@ export const guardExpired = (profile: OpenNeuroTokenProfile): boolean => {
  * Returns true if active user has at least one of the permissions in expectedLevels
  * @param {string[]} expectedLevels
  */
-const hasDatasetPermissions = expectedLevels => (permissions, userId) => {
+const hasDatasetPermissions = (expectedLevels) => (permissions, userId) => {
   if (userId) {
     const permission = permissions.userPermissions.find(
-      perm => perm.user.id === userId,
+      (perm) => perm.user.id === userId,
     )
     return (permission && expectedLevels.includes(permission.level)) || false
   }
@@ -62,7 +62,7 @@ const hasDatasetPermissions = expectedLevels => (permissions, userId) => {
 }
 
 // Return true if the active user has write permission
-export const hasEditPermissions = hasDatasetPermissions(['admin', 'rw'])
+export const hasEditPermissions = hasDatasetPermissions(["admin", "rw"])
 
 //
-export const hasDatasetAdminPermissions = hasDatasetPermissions(['admin'])
+export const hasDatasetAdminPermissions = hasDatasetPermissions(["admin"])

package/src/scripts/authentication/regular-user.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { useCookies } from 'react-cookie'
-import { getProfile } from './profile'
+import React from "react"
+import { useCookies } from "react-cookie"
+import { getProfile } from "./profile"
 
 interface RegularUserProps {
   children?: React.ReactNode

package/src/scripts/authentication/signOut.ts

@@ -1,8 +1,8 @@
-import cookies from '../utils/cookies.js'
+import cookies from "../utils/cookies.js"
 
 const signOut = () => {
   // Delete the token will reset client login state
-  cookies.remove('accessToken')
+  cookies.remove("accessToken")
 }
 
 export default signOut

package/src/scripts/authentication/withProfile.jsx

@@ -1,11 +1,11 @@
 /* eslint-disable */
-import React from 'react'
-import { useCookies } from 'react-cookie'
-import { getProfile, guardExpired } from './profile'
+import React from "react"
+import { useCookies } from "react-cookie"
+import { getProfile, guardExpired } from "./profile"
 
-const withProfile = WrappedComponent => {
-  return props => {
-    const [cookies] = useCookies(['accessToken'])
+const withProfile = (WrappedComponent) => {
+  return (props) => {
+    const [cookies] = useCookies(["accessToken"])
     const profile = getProfile(cookies)
     // If we have a profile and it is unexpired
     if (profile && guardExpired(profile)) {

package/src/scripts/common/block-navigation.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from "react"
+import PropTypes from "prop-types"
 
 class BlockNavigation extends React.Component {
   componentDidMount() {
     // Attempt to set a message even though browsers do not display it
-    window.onbeforeunload = () =>
-      this.props.message ? this.props.message : true
+    window.onbeforeunload = () => this.props.message ? this.props.message : true
   }
 
   componentWillUnmount() {

package/src/scripts/common/containers/__tests__/header.spec.tsx

@@ -1,31 +1,31 @@
-import { vi } from 'vitest'
-import React from 'react'
-import { MockAppShell } from '../../../__utils__/mock-app-shell'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { HeaderContainer } from '../header'
+import { vi } from "vitest"
+import React from "react"
+import { MockAppShell } from "../../../__utils__/mock-app-shell"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { HeaderContainer } from "../header"
 
 const navigate = vi.fn()
-vi.mock('../../../config.ts')
-vi.mock('../../../uploader/uploader-view.jsx', () => ({
-  default: () => 'mocked UploaderView',
+vi.mock("../../../config.ts")
+vi.mock("../../../uploader/uploader-view.jsx", () => ({
+  default: () => "mocked UploaderView",
 }))
-vi.mock('react-router-dom', async () => ({
+vi.mock("react-router-dom", async () => ({
   // @ts-ignore-check
-  ...(await vi.importActual('react-router-dom')),
+  ...(await vi.importActual("react-router-dom")),
   useNavigate: () => navigate,
 }))
 
-describe('HeaderContainer component', () => {
-  it('navigates prepopulated search when you use the home page search box', async () => {
+describe("HeaderContainer component", () => {
+  it("navigates prepopulated search when you use the home page search box", async () => {
     render(<HeaderContainer />, { wrapper: MockAppShell })
-    const searchbox = screen.getByRole('textbox')
-    const button = screen.getByLabelText('Search')
-    await fireEvent.change(searchbox, { target: { value: 'test argument' } })
+    const searchbox = screen.getByRole("textbox")
+    const button = screen.getByLabelText("Search")
+    await fireEvent.change(searchbox, { target: { value: "test argument" } })
     await fireEvent.click(button)
     await waitFor(() =>
       expect(navigate).toHaveBeenCalledWith(
         '/search?query={"keywords":["test argument"]}',
-      ),
+      )
     )
   })
 })

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

@@ -1,6 +1,6 @@
-import React, { FC } from 'react'
-import { Footer } from '@openneuro/components/footer'
-import { version as openneuroVersion } from '../../../lerna.json'
+import React, { FC } from "react"
+import { Footer } from "@openneuro/components/footer"
+import { version as openneuroVersion } from "../../../lerna.json"
 
 const FooterContainer: FC = () => {
   return (

package/src/scripts/common/containers/header.tsx

@@ -1,45 +1,45 @@
-import React, { FC, useContext } from 'react'
-import useState from 'react-usestateref'
-import UploaderContext from '../../uploader/uploader-context.js'
-import UploadProgress from '../../uploader/upload-progress.jsx'
-import { Header, LandingExpandedHeader } from '@openneuro/components/header'
-import { Input } from '@openneuro/components/input'
-import ModalitySelect from '../../search/inputs/modality-select'
-import { UserModalOpenCtx } from '../../utils/user-login-modal-ctx'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useCookies } from 'react-cookie'
-import signOut from '../../authentication/signOut'
-import { getUnexpiredProfile } from '../../authentication/profile'
-import FreshdeskWidget from '../partials/freshdesk-widget'
-import AggregateCountsContainer from '../../pages/front-page/aggregate-queries/aggregate-counts-container'
-import loginUrls from '../../authentication/loginUrls'
-import UploaderView from '../../uploader/uploader-view.jsx'
-import UploadButton from '../../uploader/upload-button.jsx'
-import UploadProgressButton from '../../uploader/upload-progress-button.jsx'
+import React, { FC, useContext } from "react"
+import useState from "react-usestateref"
+import UploaderContext from "../../uploader/uploader-context.js"
+import UploadProgress from "../../uploader/upload-progress.jsx"
+import { Header, LandingExpandedHeader } from "@openneuro/components/header"
+import { Input } from "@openneuro/components/input"
+import ModalitySelect from "../../search/inputs/modality-select"
+import { UserModalOpenCtx } from "../../utils/user-login-modal-ctx"
+import { useLocation, useNavigate } from "react-router-dom"
+import { useCookies } from "react-cookie"
+import signOut from "../../authentication/signOut"
+import { getUnexpiredProfile } from "../../authentication/profile"
+import FreshdeskWidget from "../partials/freshdesk-widget"
+import AggregateCountsContainer from "../../pages/front-page/aggregate-queries/aggregate-counts-container"
+import loginUrls from "../../authentication/loginUrls"
+import UploaderView from "../../uploader/uploader-view.jsx"
+import UploadButton from "../../uploader/upload-button.jsx"
+import UploadProgressButton from "../../uploader/upload-progress-button.jsx"
 
 export const HeaderContainer: FC = () => {
   const navigate = useNavigate()
 
   const { pathname: currentPath } = useLocation()
-  const expanded = currentPath === '/'
+  const expanded = currentPath === "/"
 
   const [cookies] = useCookies()
   const profile = getUnexpiredProfile(cookies)
 
   const { userModalOpen, setUserModalOpen } = useContext(UserModalOpenCtx)
 
-  const [newKeyword, setNewKeyword, newKeywordRef] = useState('')
+  const [newKeyword, setNewKeyword, newKeywordRef] = useState("")
 
   const handleSubmit = () => {
     const query = JSON.stringify({
       keywords: newKeywordRef.current ? [newKeywordRef.current] : [],
     })
-    setNewKeyword('')
+    setNewKeyword("")
     navigate(`/search?query=${query}`)
   }
 
   const toggleLoginModal = (): void => {
-    setUserModalOpen(prevState => ({
+    setUserModalOpen((prevState) => ({
       ...prevState,
       userModalOpen: !prevState.userModalOpen,
     }))
@@ -47,19 +47,19 @@ export const HeaderContainer: FC = () => {
 
   const signOutAndRedirect = () => {
     signOut()
-    const homepage = '/'
+    const homepage = "/"
     if (window.location.pathname === homepage) window.location.reload()
     else window.location.pathname = homepage
   }
 
   const [isOpenSupport, setSupportIsOpen] = React.useState(false)
 
-  const toggleSupport = () => setSupportIsOpen(prevIsOpen => !prevIsOpen)
+  const toggleSupport = () => setSupportIsOpen((prevIsOpen) => !prevIsOpen)
 
   return (
     <>
       <UploaderContext.Consumer>
-        {uploader => {
+        {(uploader) => {
           if (uploader?.uploading) {
             return (
               <span className="header-progress-wrap">
@@ -81,13 +81,13 @@ export const HeaderContainer: FC = () => {
         navigateToNewSearch={handleSubmit}
         renderUploader={() => (
           <UploaderContext.Consumer>
-            {uploader => {
+            {(uploader) => {
               if (uploader?.uploading) {
                 return <UploadProgressButton />
               } else {
                 return (
                   <UploadButton
-                    onClick={() => uploader.setLocation('/upload')}
+                    onClick={() => uploader.setLocation("/upload")}
                   />
                 )
               }
@@ -95,7 +95,7 @@ export const HeaderContainer: FC = () => {
           </UploaderContext.Consumer>
         )}
         renderOnFreshDeskWidget={() => <FreshdeskWidget />}
-        renderOnExpanded={profile => (
+        renderOnExpanded={(profile) => (
           <LandingExpandedHeader
             user={profile}
             loginUrls={loginUrls}
@@ -118,7 +118,7 @@ export const HeaderContainer: FC = () => {
                 labelStyle="default"
                 value={newKeyword}
                 setValue={setNewKeyword}
-                onKeyDown={e => {
+                onKeyDown={(e) => {
                   if (e.keyCode === 13) {
                     handleSubmit()
                   }
@@ -132,7 +132,7 @@ export const HeaderContainer: FC = () => {
         )}
       />
       <UploaderContext.Consumer>
-        {uploader => <UploaderView uploader={uploader} />}
+        {(uploader) => <UploaderView uploader={uploader} />}
       </UploaderContext.Consumer>
     </>
   )

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

@@ -1,13 +1,13 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import WarnButton from '../warn-button'
+import React from "react"
+import { render } from "@testing-library/react"
+import WarnButton from "../warn-button"
 
-describe('common/forms/WarnButton', () => {
-  it('renders successfully', () => {
+describe("common/forms/WarnButton", () => {
+  it("renders successfully", () => {
     const { asFragment } = render(<WarnButton message="A Button!" />)
     expect(asFragment()).toMatchSnapshot()
   })
-  it('renders with warnings disable', () => {
+  it("renders with warnings disable", () => {
     const { asFragment } = render(
       <WarnButton message="A Button!" warn={false} />,
     )

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

@@ -1,10 +1,10 @@
 // dependencies -------------------------------------------------------
 
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Tooltip } from '@openneuro/components/tooltip'
-import { toast } from 'react-toastify'
-import ToastContent from '../partials/toast-content.jsx'
+import React from "react"
+import PropTypes from "prop-types"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { toast } from "react-toastify"
+import ToastContent from "../partials/toast-content.jsx"
 
 class WarnButton extends React.Component {
   constructor(props) {
@@ -49,7 +49,8 @@ class WarnButton extends React.Component {
         <a
           className="btn-warn-component success"
           onClick={this.toggle.bind(this, this.props.action)}
-          href={this.state.link}>
+          href={this.state.link}
+        >
           {confirm}
         </a>
       )
@@ -57,8 +58,9 @@ class WarnButton extends React.Component {
 
     const confirmBtn = (
       <button
-        className={'btn-warn-component success'}
-        onClick={this.toggle.bind(this, this.props.action)}>
+        className={"btn-warn-component success"}
+        onClick={this.toggle.bind(this, this.props.action)}
+      >
         {confirm}
       </button>
     )
@@ -67,7 +69,8 @@ class WarnButton extends React.Component {
       <span className="btn-group slide-in-right-fast" role="group">
         <button
           className="btn-warn-component cancel"
-          onClick={this.toggle.bind(this)}>
+          onClick={this.toggle.bind(this)}
+        >
           {cancel}
         </button>
         {link ? link : confirmBtn}
@@ -75,12 +78,13 @@ class WarnButton extends React.Component {
     )
 
     const hideAction = (
-      <span className={disabled ? ' disabled' : ''}>
+      <span className={disabled ? " disabled" : ""}>
         <button
           className="btn-warn-component warning"
           onClick={this.toggle.bind(this, this.props.action)}
-          disabled={this.props.lock}>
-          <i className={'fa ' + this.props.icon} /> {message}
+          disabled={this.props.lock}
+        >
+          <i className={"fa " + this.props.icon} /> {message}
         </button>
       </span>
     )
@@ -130,7 +134,7 @@ class WarnButton extends React.Component {
       // generate download links
       if (this.props.prepDownload) {
         this.setState({ loading: true })
-        this.props.prepDownload(link => {
+        this.props.prepDownload((link) => {
           this.setState({ displayOptions: true, link: link, loading: false })
         })
         return
@@ -154,9 +158,9 @@ class WarnButton extends React.Component {
       }
     }
 
-    if (typeof action === 'function') {
+    if (typeof action === "function") {
       this.setState({ loading: true })
-      action(e => {
+      action((e) => {
         if (e && e.error) {
           toast.error(<ToastContent title="Error" body={e.error} />)
         }
@@ -190,10 +194,10 @@ WarnButton.propTypes = {
 }
 
 WarnButton.defaultProps = {
-  message: '',
+  message: "",
   cancel: <i className="fa fa-times" />,
   confirm: <i className="fa fa-check" />,
-  icon: 'fa-trash-o',
+  icon: "fa-trash-o",
   warn: true,
   tooltip: null,
 }

package/src/scripts/common/partials/block-navigation.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from "react"
+import PropTypes from "prop-types"
 
 class BlockNavigation extends React.Component {
   componentDidMount() {
     // Attempt to set a message even though browsers do not display it
-    window.onbeforeunload = () =>
-      this.props.message ? this.props.message : true
+    window.onbeforeunload = () => this.props.message ? this.props.message : true
   }
 
   componentWillUnmount() {