@openneuro/app 4.20.5 → 4.20.6-alpha.3

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

@@ -1,68 +1,68 @@
-import React from 'react'
-import bytes from 'bytes'
-import { Link } from 'react-router-dom'
-import UpdateFile from '../mutations/update-file.jsx'
-import DeleteFile from '../mutations/delete-file.jsx'
-import { Media } from '../../styles/media'
-import RemoveAnnexObject from '../mutations/remove-annex-object.jsx'
-import FlagAnnexObject from '../mutations/flag-annex-object.jsx'
-import { isAdmin } from '../../authentication/admin-user.jsx'
-import { getProfile, hasEditPermissions } from '../../authentication/profile'
-import { Icon } from '@openneuro/components/icon'
-import { Tooltip } from '@openneuro/components/tooltip'
-import { useCookies } from 'react-cookie'
+import React from "react"
+import bytes from "bytes"
+import { Link } from "react-router-dom"
+import UpdateFile from "../mutations/update-file.jsx"
+import DeleteFile from "../mutations/delete-file.jsx"
+import { Media } from "../../styles/media"
+import RemoveAnnexObject from "../mutations/remove-annex-object.jsx"
+import FlagAnnexObject from "../mutations/flag-annex-object.jsx"
+import { isAdmin } from "../../authentication/admin-user.jsx"
+import { getProfile, hasEditPermissions } from "../../authentication/profile"
+import { Icon } from "@openneuro/components/icon"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { useCookies } from "react-cookie"
 
-const filePath = (path, filename) => `${(path && path + ':') || ''}${filename}`
+const filePath = (path, filename) => `${(path && path + ":") || ""}${filename}`
 
 const filetypeIcons = {
   md: {
-    icon: 'fab fa-markdown',
-    color: 'deepskyblue',
+    icon: "fab fa-markdown",
+    color: "deepskyblue",
   },
   json: {
-    icon: 'fab fa-node-js',
-    color: 'limegreen',
+    icon: "fab fa-node-js",
+    color: "limegreen",
   },
   tsv: {
-    icon: 'fas fa-file-excel',
-    color: 'lightgreen',
+    icon: "fas fa-file-excel",
+    color: "lightgreen",
   },
   csv: {
-    icon: 'fas fa-file-csv',
-    color: 'lightgreen',
+    icon: "fas fa-file-csv",
+    color: "lightgreen",
   },
   nii: {
-    icon: 'fas fa-brain',
-    color: 'mediumpurple',
+    icon: "fas fa-brain",
+    color: "mediumpurple",
   },
   bval: {
-    icon: 'fas fa-file-alt',
-    color: 'cornflowerblue',
+    icon: "fas fa-file-alt",
+    color: "cornflowerblue",
   },
   bvec: {
-    icon: 'fas fa-file-alt',
-    color: 'cornflowerblue',
+    icon: "fas fa-file-alt",
+    color: "cornflowerblue",
   },
 }
 const specialFileIcons = {
   README: filetypeIcons.md,
   CHANGES: {
-    icon: 'fas fa-file-alt',
-    color: 'orange',
+    icon: "fas fa-file-alt",
+    color: "orange",
   },
   LICENSE: {
-    icon: 'fas fa-file-alt',
-    color: 'darkslateblue',
+    icon: "fas fa-file-alt",
+    color: "darkslateblue",
   },
 }
 const defaultFileIcon = {
-  icon: 'fas fa-file',
-  color: 'black',
+  icon: "fas fa-file",
+  color: "black",
 }
 
 const fileExtPattern = /\.([0-9a-z]+)(\.gz)?$/i
 
-const getFileIcon = filename => {
+const getFileIcon = (filename) => {
   if (Object.keys(specialFileIcons).includes(filename)) {
     return specialFileIcons[filename]
   }
@@ -75,7 +75,7 @@ const getFileIcon = filename => {
 }
 
 export const apiPath = (datasetId, snapshotTag, filePath) => {
-  const snapshotPath = snapshotTag ? `/snapshots/${snapshotTag}` : ''
+  const snapshotPath = snapshotTag ? `/snapshots/${snapshotTag}` : ""
   return `/crn/datasets/${datasetId}${snapshotPath}/files/${filePath}`
 }
 
@@ -121,12 +121,15 @@ const File = ({
   urls,
 }: FileProps): JSX.Element => {
   const { icon, color } = getFileIcon(filename)
-  const snapshotVersionPath = snapshotTag ? `/versions/${snapshotTag}` : ''
+  const snapshotVersionPath = snapshotTag ? `/versions/${snapshotTag}` : ""
   // React route to display the file
-  const viewerPath = `/datasets/${datasetId}${snapshotVersionPath}/file-display/${filePath(
-    path,
-    filename,
-  )}`
+  const viewerPath =
+    `/datasets/${datasetId}${snapshotVersionPath}/file-display/${
+      filePath(
+        path,
+        filename,
+      )
+    }`
   const [cookies] = useCookies()
   const user = getProfile(cookies)
   return (
@@ -137,15 +140,15 @@ const File = ({
       <span className="filetree-editfile">
         <Media greaterThanOrEqual="medium">
           <Tooltip
-            tooltip={`Download: ${bytes.format(Number(size)) as string}`}>
+            tooltip={`Download: ${bytes.format(Number(size)) as string}`}
+          >
             <span className="edit-file download-file">
               <a
-                href={
-                  urls?.[0] ||
-                  apiPath(datasetId, snapshotTag, filePath(path, filename))
-                }
+                href={urls?.[0] ||
+                  apiPath(datasetId, snapshotTag, filePath(path, filename))}
                 download
-                aria-label="download file">
+                aria-label="download file"
+              >
                 <i className="fa fa-download" />
               </a>
             </span>
@@ -167,7 +170,7 @@ const File = ({
             </Tooltip>
           </Media>
         )}
-        {editMode && filename !== 'dataset_description.json' && (
+        {editMode && filename !== "dataset_description.json" && (
           <>
             <Media greaterThanOrEqual="medium">
               <Tooltip tooltip="Delete">
@@ -180,24 +183,22 @@ const File = ({
             </Media>
             <Media greaterThanOrEqual="medium">
               <Tooltip
-                tooltip={
-                  isFileToBeDeleted(id)
-                    ? 'Added to Bulk Delete'
-                    : 'Add to Bulk Delete'
-                }>
+                tooltip={isFileToBeDeleted(id)
+                  ? "Added to Bulk Delete"
+                  : "Add to Bulk Delete"}
+              >
                 <div
-                  className={
-                    isFileToBeDeleted(id)
-                      ? 'added-to-bd bulk-delete-checkbox-group delete-file'
-                      : 'bulk-delete-checkbox-group delete-file'
-                  }>
+                  className={isFileToBeDeleted(id)
+                    ? "added-to-bd bulk-delete-checkbox-group delete-file"
+                    : "bulk-delete-checkbox-group delete-file"}
+                >
                   <input
-                    id={'cb-' + filename}
+                    id={"cb-" + filename}
                     type="checkbox"
                     checked={isFileToBeDeleted(id)}
                     onChange={() => toggleFileToDelete({ id, path, filename })}
                   />
-                  <label htmlFor={'cb-' + filename}>
+                  <label htmlFor={"cb-" + filename}>
                     <Icon icon="fas fa-dumpster" />
                     {isFileToBeDeleted(id) && (
                       <span className="added-to-bulk">Added</span>
@@ -211,26 +212,30 @@ const File = ({
 
         {!isMobile &&
           annexed &&
-          (isAdmin() ? (
-            <Media greaterThanOrEqual="medium">
-              <RemoveAnnexObject
-                datasetId={datasetId}
-                snapshot={snapshotTag}
-                annexKey={annexKey}
-                path={path}
-                filename={filename}
-              />
-            </Media>
-          ) : hasEditPermissions(datasetPermissions, user && user.sub) ? (
-            <Media greaterThanOrEqual="medium">
-              <FlagAnnexObject
-                datasetId={datasetId}
-                snapshot={snapshotTag}
-                filepath={filePath(path, filename)}
-                annexKey={annexKey}
-              />
-            </Media>
-          ) : null)}
+          (isAdmin()
+            ? (
+              <Media greaterThanOrEqual="medium">
+                <RemoveAnnexObject
+                  datasetId={datasetId}
+                  snapshot={snapshotTag}
+                  annexKey={annexKey}
+                  path={path}
+                  filename={filename}
+                />
+              </Media>
+            )
+            : hasEditPermissions(datasetPermissions, user && user.sub)
+            ? (
+              <Media greaterThanOrEqual="medium">
+                <FlagAnnexObject
+                  datasetId={datasetId}
+                  snapshot={snapshotTag}
+                  filepath={filePath(path, filename)}
+                  annexKey={annexKey}
+                />
+              </Media>
+            )
+            : null)}
       </span>
     </>
   )

package/src/scripts/dataset/files/files.tsx

@@ -1,14 +1,14 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import FileTree from './file-tree'
-import { Media } from '../../styles/media'
-import { useMutation, gql } from '@apollo/client'
-import { WarnButton } from '@openneuro/components/warn-button'
-import { AccordionWrap } from '@openneuro/components/accordion'
-import styled from '@emotion/styled'
-import { Tooltip } from '@openneuro/components/tooltip'
-import { DatasetFile } from '../../types/dataset-file'
-import bytes from 'bytes'
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import FileTree from "./file-tree"
+import { Media } from "../../styles/media"
+import { gql, useMutation } from "@apollo/client"
+import { WarnButton } from "@openneuro/components/warn-button"
+import { AccordionWrap } from "@openneuro/components/accordion"
+import styled from "@emotion/styled"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { DatasetFile } from "../../types/dataset-file"
+import bytes from "bytes"
 
 const FileTreeMeta = styled.span`
   position: absolute;
@@ -59,7 +59,7 @@ const Files = ({
   const isFileToBeDeleted = (id: string): boolean => id in filesToDelete
 
   const toggleFileToDelete = ({ id, path, filename }): void =>
-    setFilesToDelete(prevFilesToDelete => {
+    setFilesToDelete((prevFilesToDelete) => {
       if (isFileToBeDeleted(id)) {
         delete prevFilesToDelete[id]
         return { ...prevFilesToDelete }
@@ -84,30 +84,31 @@ const Files = ({
 
   const disableBtn = Object.values(filesToDelete).length ? null : true
   const filesCount = Object.values(filesToDelete).length
-  const bulkDeleteButton =
-    editMode &&
-    (isDeleting ? (
-      <span>Deleting...</span>
-    ) : (
-      <span className="delete-file bulk-delete">
-        <span className="bulk-delete-count">
-          {disableBtn ? (
-            <Tooltip tooltip="Click the dumpster icon to add files to Bulk Delete">
-              <b>Bulk Delete (0)</b>
-            </Tooltip>
-          ) : (
-            <WarnButton
-              message={`Bulk Delete (${filesCount})`}
-              icon="fas fa-dumpster"
-              iconOnly={true}
-              className="edit-file"
-              tooltip={`Delete ${filesCount}`}
-              onConfirmedClick={bulkDelete}
-            />
-          )}
+  const bulkDeleteButton = editMode &&
+    (isDeleting
+      ? <span>Deleting...</span>
+      : (
+        <span className="delete-file bulk-delete">
+          <span className="bulk-delete-count">
+            {disableBtn
+              ? (
+                <Tooltip tooltip="Click the dumpster icon to add files to Bulk Delete">
+                  <b>Bulk Delete (0)</b>
+                </Tooltip>
+              )
+              : (
+                <WarnButton
+                  message={`Bulk Delete (${filesCount})`}
+                  icon="fas fa-dumpster"
+                  iconOnly={true}
+                  className="edit-file"
+                  tooltip={`Delete ${filesCount}`}
+                  onConfirmedClick={bulkDelete}
+                />
+              )}
+          </span>
         </span>
-      </span>
-    ))
+      ))
   return (
     <StyleWrapper>
       <AccordionWrap className="filetree-wrapper">
@@ -116,7 +117,7 @@ const Files = ({
             <FileTree
               datasetId={datasetId}
               snapshotTag={snapshotTag}
-              path={''}
+              path={""}
               files={files}
               name={datasetName}
               editMode={editMode}
@@ -132,16 +133,16 @@ const Files = ({
           <div className="filetree-item">
             {summary && (
               <FileTreeMeta>
-                <FileTreeMetaLabel>Files:</FileTreeMetaLabel>{' '}
-                {summary.totalFiles}{' '}
-                <FileTreeMetaLabel>Size:</FileTreeMetaLabel>{' '}
+                <FileTreeMetaLabel>Files:</FileTreeMetaLabel>{" "}
+                {summary.totalFiles}{" "}
+                <FileTreeMetaLabel>Size:</FileTreeMetaLabel>{" "}
                 {bytes(summary.size)}
               </FileTreeMeta>
             )}
             <FileTree
               datasetId={datasetId}
               snapshotTag={snapshotTag}
-              path={''}
+              path={""}
               files={files}
               name={datasetName}
               editMode={editMode}

package/src/scripts/dataset/files/index.tsx

@@ -1,5 +1,5 @@
-import Files from './files'
-import FileDisplay from './file-display'
+import Files from "./files"
+import FileDisplay from "./file-display"
 
 export { FileDisplay }
 

package/src/scripts/dataset/files/viewers/__tests__/__snapshots__/file-viewer-json.spec.jsx.snap

@@ -1,29 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`File Viewer - JSON > renders with invalid JSON 1`] = `
-<DocumentFragment>
-  <h3>
-    Tree
-  </h3>
-  <hr />
-  <p>
-    JSON failed to parse
-  </p>
-  <pre>
-    Unexpected token ; in JSON at position 4
-  </pre>
-  <h3>
-    Raw
-  </h3>
-  <hr />
-  <pre
-    class="css-ffm88e"
-  >
-    1234;
-  </pre>
-</DocumentFragment>
-`;
-
 exports[`File Viewer - JSON > renders with valid JSON 1`] = `
 <DocumentFragment>
   <h3>

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

@@ -1,15 +1,15 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { FileViewerJsonRaw } from '../file-viewer-json.jsx'
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { FileViewerJsonRaw } from "../file-viewer-json.jsx"
 
-describe('File Viewer - JSON', () => {
-  it('renders with valid JSON', () => {
-    const validJson = JSON.stringify({ thing: 1, name: 'string' })
+describe("File Viewer - JSON", () => {
+  it("renders with valid JSON", () => {
+    const validJson = JSON.stringify({ thing: 1, name: "string" })
     const { asFragment } = render(<FileViewerJsonRaw jsonRaw={validJson} />)
     expect(asFragment()).toMatchSnapshot()
   })
-  it('renders with invalid JSON', () => {
-    const { asFragment } = render(<FileViewerJsonRaw jsonRaw="1234;" />)
-    expect(asFragment()).toMatchSnapshot()
+  it("renders with invalid JSON", () => {
+    render(<FileViewerJsonRaw jsonRaw="1234;" />)
+    expect(screen.getByText("JSON failed to parse")).toBeInTheDocument()
   })
 })

package/src/scripts/dataset/files/viewers/__tests__/parse-tabular.spec.js

@@ -1,4 +1,4 @@
-import parseTabular from '../parse-tabular.js'
+import parseTabular from "../parse-tabular.js"
 
 const demoCsv = `participant_id,age,sex
 sub-01,M,28
@@ -11,14 +11,14 @@ sub-01  M 28
 sub-02  F 30
 `
 
-describe('parseTabular()', () => {
-  it('returns an array', () => {
-    expect(Array.isArray(parseTabular(demoCsv, ','))).toBe(true)
+describe("parseTabular()", () => {
+  it("returns an array", () => {
+    expect(Array.isArray(parseTabular(demoCsv, ","))).toBe(true)
   })
-  it('returns the expected number of data rows', () => {
-    expect(parseTabular(demoCsv, ',')).toHaveLength(3)
+  it("returns the expected number of data rows", () => {
+    expect(parseTabular(demoCsv, ",")).toHaveLength(3)
   })
-  it('works with tab separators', () => {
-    expect(parseTabular(demoTsv, '\t')).toHaveLength(2)
+  it("works with tab separators", () => {
+    expect(parseTabular(demoTsv, "\t")).toHaveLength(2)
   })
 })

package/src/scripts/dataset/files/viewers/file-viewer-csv.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import parseTabular from './parse-tabular.js'
-import FileViewerTable from './file-viewer-table'
+import React from "react"
+import PropTypes from "prop-types"
+import parseTabular from "./parse-tabular.js"
+import FileViewerTable from "./file-viewer-table"
 
 const FileViewerCsv = ({ data }) => {
   const decoder = new TextDecoder()
-  const tableData = parseTabular(decoder.decode(data), ',')
+  const tableData = parseTabular(decoder.decode(data), ",")
   return <FileViewerTable tableData={tableData} />
 }
 

package/src/scripts/dataset/files/viewers/file-viewer-html.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "@emotion/styled"
 
 const ScaledIframe = styled.iframe`
   width: 100%;

package/src/scripts/dataset/files/viewers/file-viewer-json.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-import { RecursiveProperty } from '@openneuro/components/json-tree'
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "@emotion/styled"
+import { RecursiveProperty } from "@openneuro/components/json-tree"
 
 const WrappedPre = styled.pre`
   white-space: pre-wrap;

package/src/scripts/dataset/files/viewers/file-viewer-nifti.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react'
-import PropTypes from 'prop-types'
-import { Niivue } from '@niivue/niivue'
+import React, { useEffect, useRef } from "react"
+import PropTypes from "prop-types"
+import { Niivue } from "@niivue/niivue"
 
 const FileViewerNifti = ({
   imageUrl,
@@ -12,7 +12,7 @@ const FileViewerNifti = ({
     const volumeList = [
       {
         url: imageUrl,
-        colorMap: 'gray',
+        colorMap: "gray",
         opacity: 1,
         visible: true,
         limitFrames4D: 5,

package/src/scripts/dataset/files/viewers/file-viewer-table.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { DataTable } from '../../../components/data-table'
-import styled from '@emotion/styled'
+import React from "react"
+import { DataTable } from "../../../components/data-table"
+import styled from "@emotion/styled"
 
 const TableOverlow = styled.div`
   overflow-x: scroll;

package/src/scripts/dataset/files/viewers/file-viewer-text.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "@emotion/styled"
 
 const Pre = styled.pre`
   margin: 0 15px;

package/src/scripts/dataset/files/viewers/file-viewer-tsv.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import parseTabular from './parse-tabular.js'
-import FileViewerTable from './file-viewer-table'
+import React from "react"
+import PropTypes from "prop-types"
+import parseTabular from "./parse-tabular.js"
+import FileViewerTable from "./file-viewer-table"
 
 const FileViewerTsv = ({ data }) => {
   const decoder = new TextDecoder()
-  const tableData = parseTabular(decoder.decode(data), '\t')
+  const tableData = parseTabular(decoder.decode(data), "\t")
   return <FileViewerTable tableData={tableData} />
 }
 

package/src/scripts/dataset/files/viewers/parse-tabular.js

@@ -1,17 +1,17 @@
 const parseTabular = (data, separator) => {
-  const rows = data.split('\n')
+  const rows = data.split("\n")
   // Remove any whitespace rows (usually trailing)
-  const trimmedRows = rows.filter(row => !/^\s*$/.test(row))
+  const trimmedRows = rows.filter((row) => !/^\s*$/.test(row))
   // remove header from rows
   const header = trimmedRows.shift().split(separator)
 
-  return trimmedRows.map(row =>
+  return trimmedRows.map((row) =>
     row
       .split(separator)
       .reduce(
         (rowObj, col, colIndex) => ((rowObj[header[colIndex]] = col), rowObj),
         {},
-      ),
+      )
   )
 }
 

package/src/scripts/dataset/fragments/__tests__/cancel-button.spec.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { CancelButton } from '../cancel-button'
+import React from "react"
+import { render } from "@testing-library/react"
+import { CancelButton } from "../cancel-button"
 
-describe('CancelButton component', () => {
-  it('renders with default props', () => {
+describe("CancelButton component", () => {
+  it("renders with default props", () => {
     const { asFragment } = render(<CancelButton action={() => {}} />)
     expect(asFragment()).toMatchSnapshot()
   })

package/src/scripts/dataset/fragments/__tests__/dataset-alert-draft.spec.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { MemoryRouter } from 'react-router-dom'
-import { DatasetAlertDraft } from '../dataset-alert-draft'
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { DatasetAlertDraft } from "../dataset-alert-draft"
 
-describe('DatasetAlertDraft component', () => {
-  it('renders the correct text for private drafts with changes', () => {
+describe("DatasetAlertDraft component", () => {
+  it("renders the correct text for private drafts with changes", () => {
     render(
       <DatasetAlertDraft
         isPrivate
@@ -19,7 +19,7 @@ describe('DatasetAlertDraft component', () => {
       screen.queryByText(/there have been changes to the draft/i),
     ).toBeInTheDocument()
   })
-  it('renders the correct text for private drafts with no snapshots', () => {
+  it("renders the correct text for private drafts with no snapshots", () => {
     render(
       <DatasetAlertDraft
         isPrivate
@@ -34,7 +34,7 @@ describe('DatasetAlertDraft component', () => {
       screen.queryByText(/before it can be published/i),
     ).toBeInTheDocument()
   })
-  it('renders the correct text for public drafts with changes', () => {
+  it("renders the correct text for public drafts with changes", () => {
     render(
       <DatasetAlertDraft
         hasDraftChanges
@@ -51,7 +51,7 @@ describe('DatasetAlertDraft component', () => {
       screen.queryByText(/there are currently unsaved changes to this draft/i),
     ).toBeInTheDocument()
   })
-  it('renders the correct text for public drafts without changes', () => {
+  it("renders the correct text for public drafts without changes", () => {
     render(
       <DatasetAlertDraft
         hasDraftChanges={false}