@openneuro/app 4.20.4 → 4.20.6-alpha.2

package/src/scripts/dataset/comments/__tests__/comments.spec.jsx

@@ -1,27 +1,27 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import Comments from '../comments.jsx'
-import { vi } from 'vitest'
+import React from "react"
+import { render } from "@testing-library/react"
+import Comments from "../comments.jsx"
+import { vi } from "vitest"
 
-vi.mock('../../../config.ts')
+vi.mock("../../../config.ts")
 
 const emptyState =
   '{"blocks":[{"key":"3sm42","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}'
 const exampleComment = {
-  id: 'xyz',
+  id: "xyz",
   text: emptyState,
-  user: { id: '1234', email: 'example@example.com' },
+  user: { id: "1234", email: "example@example.com" },
   replies: [],
 }
 
-describe('Comments component', () => {
-  it('renders one top level comment', () => {
+describe("Comments component", () => {
+  it("renders one top level comment", () => {
     const { asFragment } = render(
       <Comments datasetId="ds000001" comments={[exampleComment]} />,
     )
     expect(asFragment()).toMatchSnapshot()
   })
-  it('recursively renders a tree of comments', () => {
+  it("recursively renders a tree of comments", () => {
     const comments = [{ ...exampleComment, replies: [exampleComment] }]
     const { asFragment } = render(
       <Comments datasetId="ds000001" comments={comments} />,

package/src/scripts/dataset/comments/block-style-controls.jsx

@@ -1,21 +1,21 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StyleButton from './style-button.jsx'
+import React from "react"
+import PropTypes from "prop-types"
+import StyleButton from "./style-button.jsx"
 
 const BLOCK_TYPES = [
-  { label: 'H1', style: 'header-one' },
-  { label: 'H2', style: 'header-two' },
-  { label: 'H3', style: 'header-three' },
-  { label: 'H4', style: 'header-four' },
-  { label: 'H5', style: 'header-five' },
-  { label: 'H6', style: 'header-six' },
-  { label: 'Blockquote', style: 'blockquote' },
-  { label: 'UL', style: 'unordered-list-item' },
-  { label: 'OL', style: 'ordered-list-item' },
-  { label: 'Code Block', style: 'code-block' },
+  { label: "H1", style: "header-one" },
+  { label: "H2", style: "header-two" },
+  { label: "H3", style: "header-three" },
+  { label: "H4", style: "header-four" },
+  { label: "H5", style: "header-five" },
+  { label: "H6", style: "header-six" },
+  { label: "Blockquote", style: "blockquote" },
+  { label: "UL", style: "unordered-list-item" },
+  { label: "OL", style: "ordered-list-item" },
+  { label: "Code Block", style: "code-block" },
 ]
 
-const BlockStyleControls = props => {
+const BlockStyleControls = (props) => {
   const { editorState } = props
   const selection = editorState.getSelection()
   const blockType = editorState
@@ -25,7 +25,7 @@ const BlockStyleControls = props => {
 
   return (
     <div className="RichEditor-controls">
-      {BLOCK_TYPES.map(type => (
+      {BLOCK_TYPES.map((type) => (
         <StyleButton
           key={type.label}
           active={type.style === blockType}

package/src/scripts/dataset/comments/comment-editor.jsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { Editor, EditorState, RichUtils } from 'draft-js'
-import CommentMutation from '../mutations/comment.jsx'
-import BlockStyleControls from './block-style-controls.jsx'
-import InlineStyleControls from './inline-style-controls.jsx'
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import { Editor, EditorState, RichUtils } from "draft-js"
+import CommentMutation from "../mutations/comment.jsx"
+import BlockStyleControls from "./block-style-controls.jsx"
+import InlineStyleControls from "./inline-style-controls.jsx"
 
-const getBlockStyle = block =>
-  block.getType() === 'blockquote' ? 'RichEditor-blockquote' : null
+const getBlockStyle = (block) =>
+  block.getType() === "blockquote" ? "RichEditor-blockquote" : null
 
 const CommentEditor = ({
   datasetId,
@@ -27,15 +27,13 @@ const CommentEditor = ({
     <div className="RichEditor-root">
       <BlockStyleControls
         editorState={editorState}
-        onToggle={blockType =>
-          setEditorState(RichUtils.toggleBlockType(editorState, blockType))
-        }
+        onToggle={(blockType) =>
+          setEditorState(RichUtils.toggleBlockType(editorState, blockType))}
       />
       <InlineStyleControls
         editorState={editorState}
-        onToggle={inlineStyle =>
-          setEditorState(RichUtils.toggleInlineStyle(editorState, inlineStyle))
-        }
+        onToggle={(inlineStyle) =>
+          setEditorState(RichUtils.toggleInlineStyle(editorState, inlineStyle))}
       />
       <div className="RichEditor-editor">
         <Editor
@@ -46,23 +44,25 @@ const CommentEditor = ({
           placeholder=""
           spellCheck
         />
-        {commentId ? (
-          <CommentMutation
-            datasetId={datasetId}
-            commentId={commentId}
-            comment={editorState.getCurrentContent()}
-            disabled={disabled}
-            done={doAfterSubmit}
-          />
-        ) : (
-          <CommentMutation
-            datasetId={datasetId}
-            parentId={parentId}
-            comment={editorState.getCurrentContent()}
-            disabled={disabled}
-            done={doAfterSubmit}
-          />
-        )}
+        {commentId
+          ? (
+            <CommentMutation
+              datasetId={datasetId}
+              commentId={commentId}
+              comment={editorState.getCurrentContent()}
+              disabled={disabled}
+              done={doAfterSubmit}
+            />
+          )
+          : (
+            <CommentMutation
+              datasetId={datasetId}
+              parentId={parentId}
+              comment={editorState.getCurrentContent()}
+              disabled={disabled}
+              done={doAfterSubmit}
+            />
+          )}
       </div>
     </div>
   )

package/src/scripts/dataset/comments/comment.jsx

@@ -1,17 +1,17 @@
-import React, { useState } from 'react'
-import { Editor, EditorState, convertFromRaw } from 'draft-js'
-import PropTypes from 'prop-types'
-import parseISO from 'date-fns/parseISO'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import React, { useState } from "react"
+import { convertFromRaw, Editor, EditorState } from "draft-js"
+import PropTypes from "prop-types"
+import parseISO from "date-fns/parseISO"
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
 
-import CommentEditor from './comment-editor.jsx'
-import DeleteComment from '../mutations/delete-comment.jsx'
-import AdminUser from '../../authentication/admin-user.jsx'
-import LoggedIn from '../../authentication/logged-in.jsx'
-import { toast } from 'react-toastify'
-import ToastContent from '../../common/partials/toast-content'
-import { Icon } from '@openneuro/components/icon'
-import { Username } from '../../users/username'
+import CommentEditor from "./comment-editor.jsx"
+import DeleteComment from "../mutations/delete-comment.jsx"
+import AdminUser from "../../authentication/admin-user.jsx"
+import LoggedIn from "../../authentication/logged-in.jsx"
+import { toast } from "react-toastify"
+import ToastContent from "../../common/partials/toast-content"
+import { Icon } from "@openneuro/components/icon"
+import { Username } from "../../users/username"
 
 const Comment = ({ datasetId, data, children }) => {
   const [replyMode, setReplyMode] = useState(false)
@@ -26,45 +26,43 @@ const Comment = ({ datasetId, data, children }) => {
           {` - ${formatDistanceToNow(parseISO(data.createDate))} ago`}
         </div>
         <div className="row comment-body">
-          {editMode ? (
-            <CommentEditor
-              datasetId={datasetId}
-              commentId={data.id}
-              state={editorState}
-              done={() => setEditMode(false)}
-            />
-          ) : (
-            <Editor
-              editorKey={data.id}
-              editorState={editorState}
-              readOnly={true}
-              onChange={() => {
-                /* Not editable, this shouldn't fire */
-              }}
-            />
-          )}
+          {editMode
+            ? (
+              <CommentEditor
+                datasetId={datasetId}
+                commentId={data.id}
+                state={editorState}
+                done={() => setEditMode(false)}
+              />
+            )
+            : (
+              <Editor
+                editorKey={data.id}
+                editorState={editorState}
+                readOnly={true}
+                onChange={() => {
+                  /* Not editable, this shouldn't fire */
+                }}
+              />
+            )}
         </div>
         <LoggedIn>
           <div className="row comment-controls grid grid-start">
             {editMode ? null : (
               <div className="col col-fixed">
                 <a className="reply" onClick={() => setReplyMode(!replyMode)}>
-                  {replyMode ? (
-                    <Icon icon="fa fa-times" label="Close" />
-                  ) : (
-                    <Icon icon="fa fa-comment" label="Reply" />
-                  )}
+                  {replyMode
+                    ? <Icon icon="fa fa-times" label="Close" />
+                    : <Icon icon="fa fa-comment" label="Reply" />}
                 </a>
               </div>
             )}
             {replyMode ? null : (
               <div className="col col-fixed">
                 <a className="edit" onClick={() => setEditMode(!editMode)}>
-                  {editMode ? (
-                    <Icon icon="fa fa-times" label="Close" />
-                  ) : (
-                    <Icon icon="fa fa-edit" label="Edit" />
-                  )}
+                  {editMode
+                    ? <Icon icon="fa fa-times" label="Close" />
+                    : <Icon icon="fa fa-edit" label="Edit" />}
                 </a>
               </div>
             )}
@@ -76,16 +74,18 @@ const Comment = ({ datasetId, data, children }) => {
       </div>
       <div className="row replies">
         <div className="comment-reply">
-          {replyMode ? (
-            <CommentEditor
-              datasetId={datasetId}
-              parentId={data.id}
-              done={() => {
-                setReplyMode(false)
-                toast.success(<ToastContent title="Reply Posted" />)
-              }}
-            />
-          ) : null}
+          {replyMode
+            ? (
+              <CommentEditor
+                datasetId={datasetId}
+                parentId={data.id}
+                done={() => {
+                  setReplyMode(false)
+                  toast.success(<ToastContent title="Reply Posted" />)
+                }}
+              />
+            )
+            : null}
         </div>
         {children}
       </div>

package/src/scripts/dataset/comments/comments.jsx

@@ -1,32 +1,34 @@
-import React from 'react'
-import { toast } from 'react-toastify'
-import PropTypes from 'prop-types'
-import Comment from './comment.jsx'
-import CommentEditor from './comment-editor.jsx'
-import LoggedIn from '../../authentication/logged-in.jsx'
-import LoggedOut from '../../authentication/logged-out.jsx'
-import ErrorBoundary from '../../errors/errorBoundary.jsx'
+import React from "react"
+import { toast } from "react-toastify"
+import PropTypes from "prop-types"
+import Comment from "./comment.jsx"
+import CommentEditor from "./comment-editor.jsx"
+import LoggedIn from "../../authentication/logged-in.jsx"
+import LoggedOut from "../../authentication/logged-out.jsx"
+import ErrorBoundary from "../../errors/errorBoundary.jsx"
 
-import ToastContent from '../../common/partials/toast-content.jsx'
+import ToastContent from "../../common/partials/toast-content.jsx"
 
 const CommentTree = ({ datasetId, uploader, comments, commentMap }) => (
   <>
-    {comments.map(comment => {
+    {comments.map((comment) => {
       if (!comment) return null
       // Join any replies
-      const nextLevel = comment.hasOwnProperty('replies')
-        ? comment.replies.map(reply => commentMap[reply.id])
+      const nextLevel = comment.hasOwnProperty("replies")
+        ? comment.replies.map((reply) => commentMap[reply.id])
         : []
       return (
         <Comment key={comment.id} datasetId={datasetId} data={comment}>
-          {nextLevel.length ? (
-            <CommentTree
-              datasetId={datasetId}
-              uploader={uploader}
-              comments={nextLevel}
-              commentMap={commentMap}
-            />
-          ) : null}
+          {nextLevel.length
+            ? (
+              <CommentTree
+                datasetId={datasetId}
+                uploader={uploader}
+                comments={nextLevel}
+                commentMap={commentMap}
+              />
+            )
+            : null}
         </Comment>
       )
     })}
@@ -43,10 +45,10 @@ CommentTree.propTypes = {
 const Comments = ({ datasetId, uploader, comments }) => {
   // Fast access map to dereference replies in CommentTree component
   const commentMap = Object.fromEntries(
-    comments.map(comment => [comment.id, comment]),
+    comments.map((comment) => [comment.id, comment]),
   )
   // Get only top level comments
-  const rootComments = comments.filter(comment => comment.parent === null)
+  const rootComments = comments.filter((comment) => comment.parent === null)
   return (
     <div className="dataset-comments">
       <h2>Comments</h2>

package/src/scripts/dataset/comments/inline-style-controls.jsx

@@ -1,19 +1,19 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StyleButton from './style-button.jsx'
+import React from "react"
+import PropTypes from "prop-types"
+import StyleButton from "./style-button.jsx"
 
 const INLINE_STYLES = [
-  { label: 'Bold', style: 'BOLD' },
-  { label: 'Italic', style: 'ITALIC' },
-  { label: 'Underline', style: 'UNDERLINE' },
-  { label: 'Monospace', style: 'CODE' },
+  { label: "Bold", style: "BOLD" },
+  { label: "Italic", style: "ITALIC" },
+  { label: "Underline", style: "UNDERLINE" },
+  { label: "Monospace", style: "CODE" },
 ]
 
-const InlineStyleControls = props => {
+const InlineStyleControls = (props) => {
   const currentStyle = props.editorState.getCurrentInlineStyle()
   return (
     <div className="RichEditor-controls">
-      {INLINE_STYLES.map(type => (
+      {INLINE_STYLES.map((type) => (
         <StyleButton
           key={type.label}
           active={currentStyle.has(type.style)}

package/src/scripts/dataset/comments/style-button.jsx

@@ -1,18 +1,17 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from "react"
+import PropTypes from "prop-types"
 
 const StyleButton = ({ style, label, active, onToggle }) => {
   return (
     <span
-      className={
-        active
-          ? 'RichEditor-styleButton RichEditor-activeButton'
-          : 'RichEditor-styleButton'
-      }
-      onMouseDown={e => {
+      className={active
+        ? "RichEditor-styleButton RichEditor-activeButton"
+        : "RichEditor-styleButton"}
+      onMouseDown={(e) => {
         e.preventDefault()
         onToggle(style)
-      }}>
+      }}
+    >
       {label}
     </span>
   )

package/src/scripts/dataset/common/follow-toggles.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import '@emotion/react'
+import React from "react"
+import styled from "@emotion/styled"
+import "@emotion/react"
 
 export const FollowToggles = styled.div`
   display: flex;

package/src/scripts/dataset/dataset-query-context.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 // Default comment depth is set here
 const DatasetQueryContext = React.createContext({

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

@@ -1,29 +1,29 @@
-import { apm } from '../apm'
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useParams, useNavigate } from 'react-router-dom'
-import { useQuery, gql, useApolloClient } from '@apollo/client'
-import { Loading } from '@openneuro/components/loading'
+import { apm } from "../apm"
+import React from "react"
+import PropTypes from "prop-types"
+import { useNavigate, useParams } from "react-router-dom"
+import { gql, useApolloClient, useQuery } from "@apollo/client"
+import { Loading } from "@openneuro/components/loading"
 
-import DatasetQueryContext from '../datalad/dataset/dataset-query-context.js'
-import DatasetContext from '../datalad/dataset/dataset-context.js'
-import DatasetRoutes from './dataset-routes'
-import FilesSubscription from '../datalad/subscriptions/files-subscription.jsx'
-import usePermissionsSubscription from '../datalad/subscriptions/usePermissionsSubscription'
-import useSnapshotsUpdatedSubscriptions from '../datalad/subscriptions/useSnapshotsUpdatedSubscriptions'
+import DatasetQueryContext from "../datalad/dataset/dataset-query-context.js"
+import DatasetContext from "../datalad/dataset/dataset-context.js"
+import DatasetRoutes from "./dataset-routes"
+import FilesSubscription from "../datalad/subscriptions/files-subscription.jsx"
+import usePermissionsSubscription from "../datalad/subscriptions/usePermissionsSubscription"
+import useSnapshotsUpdatedSubscriptions from "../datalad/subscriptions/useSnapshotsUpdatedSubscriptions"
 import useDatasetDeletedSubscription, {
   datasetDeletedToast,
-} from '../datalad/subscriptions/useDatasetDeletedSubscription.jsx'
-import useDraftSubscription from '../datalad/subscriptions/useDraftSubscription.js'
+} from "../datalad/subscriptions/useDatasetDeletedSubscription.jsx"
+import useDraftSubscription from "../datalad/subscriptions/useDraftSubscription.js"
 
 import ErrorBoundary, {
   ErrorBoundaryAssertionFailureException,
-} from '../errors/errorBoundary.jsx'
-import DatasetRedirect from '../datalad/routes/dataset-redirect'
-import { trackAnalytics } from '../utils/datalad'
-import FourOFourPage from '../errors/404page'
-import FourOThreePage from '../errors/403page'
-import { getDatasetPage, getDraftPage } from '../queries/dataset'
+} from "../errors/errorBoundary.jsx"
+import DatasetRedirect from "../datalad/routes/dataset-redirect"
+import { trackAnalytics } from "../utils/datalad"
+import FourOFourPage from "../errors/404page"
+import FourOThreePage from "../errors/403page"
+import { getDatasetPage, getDraftPage } from "../queries/dataset"
 
 /**
  * Query to load and render dataset page - most dataset loading is done here
@@ -37,27 +37,27 @@ export const DatasetQueryHook = ({ datasetId, draft }) => {
     draft ? getDraftPage : getDatasetPage,
     {
       variables: { datasetId },
-      fetchPolicy: 'cache-and-network',
-      nextFetchPolicy: 'cache-first',
+      fetchPolicy: "cache-and-network",
+      nextFetchPolicy: "cache-first",
     },
   )
   usePermissionsSubscription([datasetId])
   useSnapshotsUpdatedSubscriptions(datasetId)
   useDatasetDeletedSubscription([datasetId], ({ data: subData }) => {
     if (subData && subData.datasetDeleted === datasetId) {
-      navigate('/dashboard/datasets')
+      navigate("/dashboard/datasets")
       datasetDeletedToast(datasetId, data?.dataset?.draft?.description?.Name)
     }
   })
   useDraftSubscription(datasetId)
 
   if (error) {
-    if (error.message === 'You do not have access to read this dataset.') {
+    if (error.message === "You do not have access to read this dataset.") {
       return <FourOThreePage />
-    } else if (error.message.includes('has been deleted')) {
+    } else if (error.message.includes("has been deleted")) {
       for (const err of error.graphQLErrors) {
         if (
-          err.extensions.code === 'DELETED_DATASET' &&
+          err.extensions.code === "DELETED_DATASET" &&
           err.extensions.redirect
         ) {
           navigate(err.extensions.redirect)
@@ -73,24 +73,26 @@ export const DatasetQueryHook = ({ datasetId, draft }) => {
       return <FourOFourPage />
     }
   } else {
-    if (loading || !data)
+    if (loading || !data) {
       return (
         <div className="loading-dataset">
           <Loading />
           Loading Dataset
         </div>
       )
+    }
   }
 
   return (
     <DatasetContext.Provider value={data.dataset}>
-      <ErrorBoundary subject={'error in dataset page'}>
+      <ErrorBoundary subject={"error in dataset page"}>
         <DatasetQueryContext.Provider
           value={{
             datasetId,
             fetchMore,
             error,
-          }}>
+          }}
+        >
           <DatasetRoutes dataset={data.dataset} />
           <FilesSubscription datasetId={datasetId} />
         </DatasetQueryContext.Provider>
@@ -115,13 +117,14 @@ const DatasetQuery = () => {
   trackAnalytics(client, datasetId, {
     snapshot: true,
     tag: snapshotId,
-    type: 'views',
+    type: "views",
   })
   return (
     <>
       <DatasetRedirect />
       <ErrorBoundaryAssertionFailureException
-        subject={'error in dataset query'}>
+        subject={"error in dataset query"}
+      >
         <DatasetQueryHook datasetId={datasetId} draft={!snapshotId} />
       </ErrorBoundaryAssertionFailureException>
     </>

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

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
-import { Route, Routes } from 'react-router-dom'
-import SnapshotContainer from './snapshot-container'
-import DraftContainer from './draft-container'
+import React, { useEffect } from "react"
+import PropTypes from "prop-types"
+import { Route, Routes } from "react-router-dom"
+import SnapshotContainer from "./snapshot-container"
+import DraftContainer from "./draft-container"
 
 const DatasetRoutes = ({ dataset, error }) => {
   useEffect(() => {

package/src/scripts/dataset/download/__tests__/download-command-line.spec.jsx

@@ -1,24 +1,24 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { DownloadSampleCommand } from '../download-command-line.jsx'
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { DownloadSampleCommand } from "../download-command-line.jsx"
 
-const defProps = { datasetId: 'ds000001' }
+const defProps = { datasetId: "ds000001" }
 
-describe('dataset/download', () => {
-  describe('DownloadSampleCommand component', () => {
-    it('renders successfully', () => {
+describe("dataset/download", () => {
+  describe("DownloadSampleCommand component", () => {
+    it("renders successfully", () => {
       const { asFragment } = render(<DownloadSampleCommand {...defProps} />)
       expect(asFragment()).toMatchSnapshot()
     })
-    it('drafts show draft flag', () => {
+    it("drafts show draft flag", () => {
       render(<DownloadSampleCommand {...defProps} />)
-      expect(screen.getByRole('figure')).toHaveTextContent('--draft')
-      expect(screen.queryByText('--snapshot')).not.toBeInTheDocument()
+      expect(screen.getByRole("figure")).toHaveTextContent("--draft")
+      expect(screen.queryByText("--snapshot")).not.toBeInTheDocument()
     })
-    it('snapshots show snapshot flag', () => {
+    it("snapshots show snapshot flag", () => {
       render(<DownloadSampleCommand {...defProps} snapshotTag="1.0.0" />)
-      expect(screen.getByRole('figure')).toHaveTextContent('--snapshot')
-      expect(screen.queryByText('--draft')).not.toBeInTheDocument()
+      expect(screen.getByRole("figure")).toHaveTextContent("--snapshot")
+      expect(screen.queryByText("--draft")).not.toBeInTheDocument()
     })
   })
 })