@openneuro/app 4.20.4 → 4.20.6-alpha.2

package/src/scripts/dataset/files/__tests__/file-tree.spec.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { MockedProvider } from '@apollo/client/testing'
-import FileTree, { unescapePath, fileTreeLevels } from '../file-tree'
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { MockedProvider } from "@apollo/client/testing"
+import FileTree, { fileTreeLevels, unescapePath } from "../file-tree"
 
 // official Jest workaround for mocking methods not implemented in JSDOM
-window.matchMedia =
-  window.matchMedia ||
+window.matchMedia = window.matchMedia ||
   function () {
     return {
       matches: false,
@@ -16,33 +15,33 @@ window.matchMedia =
 
 const datasetFiles = [
   {
-    id: 'b42624c6aea63fc5e3f6f3e712d9e44adc4dbfdc',
-    key: '834b88a80109f1b38e0ab85999090170889469ce',
-    filename: 'CHANGES',
+    id: "b42624c6aea63fc5e3f6f3e712d9e44adc4dbfdc",
+    key: "834b88a80109f1b38e0ab85999090170889469ce",
+    filename: "CHANGES",
     size: 59,
     directory: false,
     annexed: false,
   },
   {
-    id: '63888a199a5ce37377b1cd708cda59577dad218f',
-    key: 'fa84e5f958ec72d42b3e196e592f6db9f7104b19',
-    filename: 'README',
+    id: "63888a199a5ce37377b1cd708cda59577dad218f",
+    key: "fa84e5f958ec72d42b3e196e592f6db9f7104b19",
+    filename: "README",
     size: 709,
     directory: false,
     annexed: false,
   },
   {
-    id: 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
-    key: '0b1856b91c11f67098ce60114417a62dd55730a5',
-    filename: 'dataset_description.json',
+    id: "a2922b427c5c997e77ce058e0ce57ffd17123a7f",
+    key: "0b1856b91c11f67098ce60114417a62dd55730a5",
+    filename: "dataset_description.json",
     size: 172,
     directory: false,
     annexed: false,
   },
   {
-    id: 'a6378eea201d9cad639e0bee328e03132d30489d',
+    id: "a6378eea201d9cad639e0bee328e03132d30489d",
     key: null,
-    filename: 'sub-01',
+    filename: "sub-01",
     size: 0,
     directory: true,
     annexed: false,
@@ -50,113 +49,113 @@ const datasetFiles = [
 ]
 
 const anatDir = {
-  id: '9703f3f6b4137c2b86a3a712eb34d78bdec9fd72',
+  id: "9703f3f6b4137c2b86a3a712eb34d78bdec9fd72",
   key: null,
-  filename: 'sub-01:anat',
+  filename: "sub-01:anat",
   size: 0,
   directory: true,
   annexed: false,
 }
 
 const niftiFile = {
-  id: '69fd3617b27125c433ea5f8e0e2052c31828c253',
-  key: 'MD5E-s311112--bc8bbbacfd2ff823c2047ead1afec9b3.nii.gz',
-  filename: 'sub-01:anat:sub-01_T1w.nii.gz',
+  id: "69fd3617b27125c433ea5f8e0e2052c31828c253",
+  key: "MD5E-s311112--bc8bbbacfd2ff823c2047ead1afec9b3.nii.gz",
+  filename: "sub-01:anat:sub-01_T1w.nii.gz",
   size: 311112,
   directory: false,
   annexed: true,
 }
 
-describe('fileTreeLevels()', () => {
-  it('handles top level files correctly', () => {
-    const { childFiles, currentFiles } = fileTreeLevels('', datasetFiles)
+describe("fileTreeLevels()", () => {
+  it("handles top level files correctly", () => {
+    const { childFiles, currentFiles } = fileTreeLevels("", datasetFiles)
     expect(currentFiles).toEqual(
       expect.arrayContaining([
         currentFiles.find(
-          f => f.id === 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+          (f) => f.id === "a2922b427c5c997e77ce058e0ce57ffd17123a7f",
         ),
       ]),
     )
     expect(childFiles).toEqual({})
   })
-  it('passes childFiles to the next level', () => {
+  it("passes childFiles to the next level", () => {
     const levelOneFiles = [...datasetFiles, anatDir]
-    const { childFiles, currentFiles } = fileTreeLevels('', levelOneFiles)
+    const { childFiles, currentFiles } = fileTreeLevels("", levelOneFiles)
     expect(currentFiles).toEqual(
       expect.arrayContaining([
         currentFiles.find(
-          f => f.id === 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+          (f) => f.id === "a2922b427c5c997e77ce058e0ce57ffd17123a7f",
         ),
       ]),
     )
-    expect(childFiles['sub-01']).toEqual(expect.arrayContaining([anatDir]))
+    expect(childFiles["sub-01"]).toEqual(expect.arrayContaining([anatDir]))
   })
-  it('passes two level deep childFiles to the next level', () => {
+  it("passes two level deep childFiles to the next level", () => {
     const levelTwoFiles = [...datasetFiles, anatDir, niftiFile]
-    const { childFiles, currentFiles } = fileTreeLevels('', levelTwoFiles)
+    const { childFiles, currentFiles } = fileTreeLevels("", levelTwoFiles)
     expect(currentFiles).toEqual(
       expect.arrayContaining([
         currentFiles.find(
-          f => f.id === 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+          (f) => f.id === "a2922b427c5c997e77ce058e0ce57ffd17123a7f",
         ),
       ]),
     )
-    expect(childFiles['sub-01']).toEqual(expect.arrayContaining([niftiFile]))
+    expect(childFiles["sub-01"]).toEqual(expect.arrayContaining([niftiFile]))
   })
-  it('passes two level deep childFiles to the next level', () => {
+  it("passes two level deep childFiles to the next level", () => {
     const levelTwoFiles = [anatDir, niftiFile]
-    const { childFiles, currentFiles } = fileTreeLevels('sub-01', levelTwoFiles)
+    const { childFiles, currentFiles } = fileTreeLevels("sub-01", levelTwoFiles)
     expect(currentFiles).toEqual(
       expect.arrayContaining([
         currentFiles.find(
-          f => f.id === '9703f3f6b4137c2b86a3a712eb34d78bdec9fd72',
+          (f) => f.id === "9703f3f6b4137c2b86a3a712eb34d78bdec9fd72",
         ),
       ]),
     )
-    expect(childFiles['sub-01:anat']).toEqual(
+    expect(childFiles["sub-01:anat"]).toEqual(
       expect.arrayContaining([niftiFile]),
     )
   })
 })
 
-describe('FileTree component', () => {
-  it('renders with default props', () => {
+describe("FileTree component", () => {
+  it("renders with default props", () => {
     const { asFragment } = render(<FileTree />)
     expect(asFragment()).toMatchSnapshot()
   })
-  it('expands and closes when clicked', () => {
+  it("expands and closes when clicked", () => {
     render(
       <MockedProvider>
         <FileTree name="Top Level" />
       </MockedProvider>,
     )
     // Test the folder icon is closed
-    expect(screen.getByLabelText('Top Level').firstChild).toHaveClass(
-      'fa-folder',
+    expect(screen.getByLabelText("Top Level").firstChild).toHaveClass(
+      "fa-folder",
     )
-    expect(screen.getByLabelText('Top Level').firstChild).not.toHaveClass(
-      'fa-folder-open',
+    expect(screen.getByLabelText("Top Level").firstChild).not.toHaveClass(
+      "fa-folder-open",
     )
     // Click it
-    fireEvent.click(screen.getByLabelText('Top Level'))
+    fireEvent.click(screen.getByLabelText("Top Level"))
     // Test that it is now open
-    expect(screen.getByLabelText('Top Level').firstChild).toHaveClass(
-      'fa-folder-open',
+    expect(screen.getByLabelText("Top Level").firstChild).toHaveClass(
+      "fa-folder-open",
     )
-    expect(screen.getByLabelText('Top Level').firstChild).not.toHaveClass(
-      'fa-folder',
+    expect(screen.getByLabelText("Top Level").firstChild).not.toHaveClass(
+      "fa-folder",
     )
   })
-  describe('unescapePath()', () => {
-    it('does not alter an already escaped path', () => {
-      expect(unescapePath('sub-01/anat')).toBe('sub-01/anat')
+  describe("unescapePath()", () => {
+    it("does not alter an already escaped path", () => {
+      expect(unescapePath("sub-01/anat")).toBe("sub-01/anat")
     })
-    it('does unescapes any : characters', () => {
-      expect(unescapePath('sub-01:anat')).toBe('sub-01/anat')
+    it("does unescapes any : characters", () => {
+      expect(unescapePath("sub-01:anat")).toBe("sub-01/anat")
     })
-    it('unescapes multiple : characters', () => {
-      expect(unescapePath('sub-01:anat:image.nii.gz')).toBe(
-        'sub-01/anat/image.nii.gz',
+    it("unescapes multiple : characters", () => {
+      expect(unescapePath("sub-01:anat:image.nii.gz")).toBe(
+        "sub-01/anat/image.nii.gz",
       )
     })
   })

package/src/scripts/dataset/files/__tests__/file-viewer-type.spec.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import FileViewerType from '../file-viewer-type.jsx'
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import FileViewerType from "../file-viewer-type.jsx"
 
-describe('FileViewerType component', () => {
-  it('displays a fallback when an unknown file is specified', () => {
+describe("FileViewerType component", () => {
+  it("displays a fallback when an unknown file is specified", () => {
     const component = render(
       <FileViewerType
         path="unknown-file-extension.xyz"
@@ -12,6 +12,6 @@ describe('FileViewerType component', () => {
     )
     expect(
       screen.getByText(/this file must be downloaded to view it/i),
-    ).toHaveClass('file-viewer-fallback')
+    ).toHaveClass("file-viewer-fallback")
   })
 })

package/src/scripts/dataset/files/__tests__/file.spec.jsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { MemoryRouter } from 'react-router-dom'
-import File from '../file'
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import File from "../file"
 
-describe('File component', () => {
-  it('renders with common props', () => {
+describe("File component", () => {
+  it("renders with common props", () => {
     const { asFragment } = render(
       <File datasetId="ds001" path="" filename="README" size={500} />,
       { wrapper: MemoryRouter },
     )
     expect(asFragment()).toMatchSnapshot()
   })
-  it('renders for dataset snapshots', () => {
+  it("renders for dataset snapshots", () => {
     const { asFragment } = render(
       <File
         datasetId="ds001"
@@ -24,16 +24,16 @@ describe('File component', () => {
     )
     expect(asFragment()).toMatchSnapshot()
   })
-  it('generates correct download links for top level files', () => {
+  it("generates correct download links for top level files", () => {
     render(<File datasetId="ds001" path="" filename="README" size={500} />, {
       wrapper: MemoryRouter,
     })
-    expect(screen.getByRole('link', { name: 'download file' })).toHaveAttribute(
-      'href',
-      '/crn/datasets/ds001/files/README',
+    expect(screen.getByRole("link", { name: "download file" })).toHaveAttribute(
+      "href",
+      "/crn/datasets/ds001/files/README",
     )
   })
-  it('generates correct download links for nested files', () => {
+  it("generates correct download links for nested files", () => {
     render(
       <File
         datasetId="ds001"
@@ -43,9 +43,9 @@ describe('File component', () => {
       />,
       { wrapper: MemoryRouter },
     )
-    expect(screen.getByRole('link', { name: 'download file' })).toHaveAttribute(
-      'href',
-      '/crn/datasets/ds001/files/sub-01:anat:sub-01_T1w.nii.gz',
+    expect(screen.getByRole("link", { name: "download file" })).toHaveAttribute(
+      "href",
+      "/crn/datasets/ds001/files/sub-01:anat:sub-01_T1w.nii.gz",
     )
   })
 })

package/src/scripts/dataset/files/file-display.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useParams } from 'react-router-dom'
-import FileView from './file-view.jsx'
-import { apiPath } from './file'
-import styled from '@emotion/styled'
-import { Media } from '../../styles/media'
-import { DatasetPageBorder } from '../routes/styles/dataset-page-border'
+import React from "react"
+import PropTypes from "prop-types"
+import { useParams } from "react-router-dom"
+import FileView from "./file-view.jsx"
+import { apiPath } from "./file"
+import styled from "@emotion/styled"
+import { Media } from "../../styles/media"
+import { DatasetPageBorder } from "../routes/styles/dataset-page-border"
 
 const PathBreadcrumb = styled.div`
   font-size: 14px;
@@ -24,21 +24,21 @@ const PathBreadcrumb = styled.div`
  * Create dataset -> dir -> filename breadcrumbs
  */
 export const FileDisplayBreadcrumb = ({ filePath }) => {
-  const tokens = filePath.split(':')
+  const tokens = filePath.split(":")
   return (
     <>
       {tokens.map((token, index) => {
         if (token === tokens.slice(-1)[0]) {
           return (
             <span className="display-file" key={index}>
-              {' '}
+              {" "}
               <i className="fa fa-file-o" /> {token}
             </span>
           )
         } else {
           return (
             <span className="display-file" key={index}>
-              {' '}
+              {" "}
               <i className="fa fa-folder-open-o" /> {token}
             </span>
           )

package/src/scripts/dataset/files/file-tree-unloaded-directory.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useContext, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import DatasetQueryContext from '../../datalad/dataset/dataset-query-context.js'
-import { gql } from '@apollo/client'
-import { AccordionTab } from '@openneuro/components/accordion'
+import React, { useContext, useEffect, useState } from "react"
+import PropTypes from "prop-types"
+import DatasetQueryContext from "../../datalad/dataset/dataset-query-context.js"
+import { gql } from "@apollo/client"
+import { AccordionTab } from "@openneuro/components/accordion"
 
 export const DRAFT_FILES_QUERY = gql`
   query dataset($datasetId: ID!, $tree: String!) {
@@ -41,7 +41,7 @@ export const SNAPSHOT_FILES_QUERY = gql`
 /**
  * Prepend paths to the tree object returned to get absolute filenames
  */
-export const nestFiles = path => file => ({
+export const nestFiles = (path) => (file) => ({
   ...file,
   filename: `${path}:${file.filename}`,
 })
@@ -50,8 +50,7 @@ export const nestFiles = path => file => ({
  * Merge cached dataset files with newly received data
  */
 export const mergeNewFiles =
-  (directory, snapshotTag) =>
-  (past, { fetchMoreResult }) => {
+  (directory, snapshotTag) => (past, { fetchMoreResult }) => {
     // Deep clone the old dataset object
     const path = directory.filename
     const newDatasetObj = JSON.parse(JSON.stringify(past))
@@ -81,12 +80,13 @@ const FileTreeUnloadedDirectory = ({ datasetId, snapshotTag, directory }) => {
   const { fetchMore } = useContext(DatasetQueryContext)
   return (
     <AccordionTab
-      label={directory.filename.split(':').pop()}
+      label={directory.filename.split(":").pop()}
       accordionStyle="file-tree"
       onClick={() => {
         fetchMoreDirectory(fetchMore, datasetId, snapshotTag, directory)
         // No need to clear since this component is unmounted immediately
-      }}>
+      }}
+    >
       <div>Loading...</div>
     </AccordionTab>
   )

package/src/scripts/dataset/files/file-tree.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-import File from './file'
-import UpdateFile from '../mutations/update-file.jsx'
-import DeleteFile from '../mutations/delete-file.jsx'
-import FileTreeUnloadedDirectory from './file-tree-unloaded-directory.jsx'
-import { Media } from '../../styles/media'
-import { AccordionTab } from '@openneuro/components/accordion'
-import { DatasetFile } from '../../types/dataset-file'
+import React from "react"
+import File from "./file"
+import UpdateFile from "../mutations/update-file.jsx"
+import DeleteFile from "../mutations/delete-file.jsx"
+import FileTreeUnloadedDirectory from "./file-tree-unloaded-directory.jsx"
+import { Media } from "../../styles/media"
+import { AccordionTab } from "@openneuro/components/accordion"
+import { DatasetFile } from "../../types/dataset-file"
 
-export const unescapePath = (path: string): string => path.replace(/:/g, '/')
+export const unescapePath = (path: string): string => path.replace(/:/g, "/")
 
 interface FileTreeProps {
   datasetId: string
@@ -34,14 +34,13 @@ export function fileTreeLevels(
   for (const f of files) {
     // Any paths in this filename below the current path value
     const lowerPath = f.filename.substring(`${path}:`.length)
-    if (path === '' ? f.filename.includes(':') : lowerPath.includes(':')) {
+    if (path === "" ? f.filename.includes(":") : lowerPath.includes(":")) {
       // At the top level, use the directory component (first segment)
       // Below that, use all paths before the filename (sub-01:anat) for (sub-01:anat:sub-01_T1w.nii.gz)
-      const components = f.filename.split(':')
-      const childPath =
-        path === ''
-          ? components[0]
-          : components.slice(0, path.split(':').length + 1).join(':')
+      const components = f.filename.split(":")
+      const childPath = path === ""
+        ? components[0]
+        : components.slice(0, path.split(":").length + 1).join(":")
       if (childFiles.hasOwnProperty(childPath)) {
         childFiles[childPath].push(f)
       } else {
@@ -57,8 +56,8 @@ export function fileTreeLevels(
 const FileTree = ({
   datasetId,
   snapshotTag = null,
-  path = '',
-  name = '',
+  path = "",
+  name = "",
   files = [],
   editMode = false,
   defaultExpanded = false,
@@ -73,7 +72,8 @@ const FileTree = ({
       className=""
       label={name}
       accordionStyle="file-tree"
-      startOpen={defaultExpanded}>
+      startOpen={defaultExpanded}
+    >
       {editMode && (
         <Media className="filetree-dir-tools" greaterThanOrEqual="medium">
           <span className="filetree-dir">
@@ -81,21 +81,21 @@ const FileTree = ({
               datasetId={datasetId}
               path={unescapePath(path)}
               tooltip={`Choose one or more files to be added to ${name}.`}
-              multiple>
+              multiple
+            >
               <i className="fa fa-plus" /> Add Files
             </UpdateFile>
             <UpdateFile
               datasetId={datasetId}
               path={unescapePath(path)}
               tooltip={`Choose a folder to be added to ${name}. Adding a folder with an existing name will overwrite that folder.`}
-              directory>
+              directory
+            >
               <i className="fa fa-plus" /> Add Directory
             </UpdateFile>
-            {path === '' ? (
-              bulkDeleteButton
-            ) : (
-              <DeleteFile datasetId={datasetId} path={path} />
-            )}
+            {path === ""
+              ? bulkDeleteButton
+              : <DeleteFile datasetId={datasetId} path={path} />}
           </span>
         </Media>
       )}
@@ -115,7 +115,7 @@ const FileTree = ({
                     isFileToBeDeleted={isFileToBeDeleted}
                     files={childFiles[file.filename]}
                     path={file.filename}
-                    name={file.filename.split(':').pop()}
+                    name={file.filename.split(":").pop()}
                     bulkDeleteButton={bulkDeleteButton}
                   />
                 </li>
@@ -144,7 +144,7 @@ const FileTree = ({
                   editMode={editMode}
                   toggleFileToDelete={toggleFileToDelete}
                   isFileToBeDeleted={isFileToBeDeleted}
-                  filename={file.filename.split(':').pop()}
+                  filename={file.filename.split(":").pop()}
                   annexKey={file.key}
                   datasetPermissions={datasetPermissions}
                   annexed={file.annexed}

package/src/scripts/dataset/files/file-view.jsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import { Loading } from '@openneuro/components/loading'
-import { apiPath } from './file'
-import FileViewerType from './file-viewer-type.jsx'
+import React, { useEffect, useState } from "react"
+import { Loading } from "@openneuro/components/loading"
+import { apiPath } from "./file"
+import FileViewerType from "./file-viewer-type.jsx"
 
 const FileView = ({ datasetId, snapshotTag, path }) => {
   const url = apiPath(datasetId, snapshotTag, path)

package/src/scripts/dataset/files/file-viewer-type.jsx

@@ -1,38 +1,38 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import FileViewerText from './viewers/file-viewer-text.jsx'
-import FileViewerNifti from './viewers/file-viewer-nifti'
-import FileViewerJson from './viewers/file-viewer-json.jsx'
-import FileViewerTsv from './viewers/file-viewer-tsv.jsx'
-import FileViewerCsv from './viewers/file-viewer-csv.jsx'
-import FileViewerHtml from './viewers/file-viewer-html.jsx'
+import React from "react"
+import PropTypes from "prop-types"
+import FileViewerText from "./viewers/file-viewer-text.jsx"
+import FileViewerNifti from "./viewers/file-viewer-nifti"
+import FileViewerJson from "./viewers/file-viewer-json.jsx"
+import FileViewerTsv from "./viewers/file-viewer-tsv.jsx"
+import FileViewerCsv from "./viewers/file-viewer-csv.jsx"
+import FileViewerHtml from "./viewers/file-viewer-html.jsx"
 
 /**
  * Choose the right viewer for each file type
  */
 const FileViewerType = ({ path, url, data }) => {
   if (
-    path.endsWith('README') ||
-    path.endsWith('CHANGES') ||
-    path.endsWith('.bidsignore') ||
-    path.endsWith('.gitignore') ||
-    path.endsWith('.txt')
+    path.endsWith("README") ||
+    path.endsWith("CHANGES") ||
+    path.endsWith(".bidsignore") ||
+    path.endsWith(".gitignore") ||
+    path.endsWith(".txt")
   ) {
     return <FileViewerText data={data} />
   } else if (
-    path.endsWith('.nii.gz') ||
-    path.endsWith('.nii') ||
-    path.endsWith('.mgh') ||
-    path.endsWith('.mgz')
+    path.endsWith(".nii.gz") ||
+    path.endsWith(".nii") ||
+    path.endsWith(".mgh") ||
+    path.endsWith(".mgz")
   ) {
     return <FileViewerNifti imageUrl={url} />
-  } else if (path.endsWith('.json')) {
+  } else if (path.endsWith(".json")) {
     return <FileViewerJson data={data} />
-  } else if (path.endsWith('.tsv')) {
+  } else if (path.endsWith(".tsv")) {
     return <FileViewerTsv data={data} />
-  } else if (path.endsWith('.csv')) {
+  } else if (path.endsWith(".csv")) {
     return <FileViewerCsv data={data} />
-  } else if (path.endsWith('.html')) {
+  } else if (path.endsWith(".html")) {
     return <FileViewerHtml data={data} />
   } else {
     return (