@openneuro/app 4.35.0-alpha.1 → 4.36.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.35.0-alpha.1",
+  "version": "4.36.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -14,7 +14,7 @@
   },
   "author": "Squishymedia",
   "dependencies": {
-    "@apollo/client": "3.11.8",
+    "@apollo/client": "3.13.8",
     "@artsy/fresnel": "^1.3.1",
     "@bids/validator": "npm:@jsr/bids__validator@^2.0.3",
     "@emotion/react": "11.11.1",
@@ -75,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ac9c013877e5d9c1fa9615a177f79e0da0747f84"
+  "gitHead": "0d754964177331113f4279c48d6c0fae0f59adc2"
 }

package/src/client.jsx

@@ -30,6 +30,7 @@ const client = new ApolloClient({
       },
     },
   }),
+  connectToDevTools: config.sentry.environment !== "production",
 })
 
 container.render(

package/src/scripts/components/button/button.scss

@@ -138,3 +138,17 @@
     }
   }
 }
+
+.load-more {
+  .on-button {
+    display: block;
+    border: 1px solid;
+    width: 100%;
+    background-color: #fff;
+    transition: background-color 0.3s;
+    &:hover {
+      text-decoration: none;
+      background-color: $newspaper;
+    }
+  }
+}

package/src/scripts/components/search-page/SearchResultItem.tsx

@@ -127,6 +127,8 @@ export const SearchResultItem = ({
   const hasEdit = hasEditPermissions(node.permissions, profileSub) || isAdmin
 
   const heading = node.latestSnapshot.description?.Name
+    ? node.latestSnapshot.description?.Name
+    : node.id
   const summary = node.latestSnapshot?.summary
   const datasetId = node.id
   const numSessions = summary?.sessions.length > 0 ? summary.sessions.length : 1
@@ -134,7 +136,7 @@ export const SearchResultItem = ({
   const accessionNumber = (
     <span className="result-summary-meta">
       <strong>Openneuro Accession Number:</strong>
-      <span>{node.id}</span>
+      <Link to={"/datasets/" + datasetId}>{node.id}</Link>
     </span>
   )
   const sessions = (

package/src/scripts/components/search-page/search-page.scss

@@ -302,19 +302,7 @@
       border-bottom: 1px solid $newspaper;
     }
   }
-  .load-more {
-    .on-button {
-      display: block;
-      border: 1px solid;
-      width: 100%;
-      background-color: #fff;
-      transition: background-color 0.3s;
-      &:hover {
-        text-decoration: none;
-        background-color: $newspaper;
-      }
-    }
-  }
+
 }
 
 .search-sort {

package/src/scripts/config.ts

@@ -15,6 +15,9 @@ export interface OpenNeuroConfig {
       clientID: string
       ORCID_API_ENDPOINT: string
     }
+    github?: {
+      clientID: string
+    }
     globus?: {
       clientID: string
     }
@@ -48,6 +51,9 @@ export const config: OpenNeuroConfig = {
       clientID: globalThis.OpenNeuroConfig.ORCID_CLIENT_ID,
       ORCID_API_ENDPOINT: globalThis.OpenNeuroConfig.ORCID_API_ENDPOINT,
     },
+    github: {
+      clientID: globalThis.OpenNeuroConfig.GITHUB_CLIENT_ID,
+    },
   },
   analytics: {
     trackingIds: globalThis.OpenNeuroConfig.GOOGLE_TRACKING_IDS.split(",").map(

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

@@ -29,7 +29,7 @@ exports[`File component > renders for dataset snapshots 1`] = `
         >
           <a
             aria-label="download file"
-            download=""
+            download="README"
             href="/crn/datasets/ds001/snapshots/1.0.0/files/README"
           >
             <i
@@ -90,7 +90,7 @@ exports[`File component > renders with common props 1`] = `
         >
           <a
             aria-label="download file"
-            download=""
+            download="README"
             href="/crn/datasets/ds001/files/README"
           >
             <i

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

@@ -149,7 +149,7 @@ const File = ({
                 <a
                   href={urls?.[0] ||
                     apiPath(datasetId, snapshotTag, filePath(path, filename))}
-                  download
+                  download={filename}
                   aria-label="download file"
                 >
                   <i className="fa fa-download" />
@@ -170,7 +170,7 @@ const File = ({
         {editMode && (
           <Media greaterThanOrEqual="medium">
             <Tooltip tooltip="Update">
-              <UpdateFile datasetId={datasetId} path={path}>
+              <UpdateFile datasetId={datasetId} path={path} filename={filename}>
                 <i className="fa fa-cloud-upload" />
               </UpdateFile>
             </Tooltip>

package/src/scripts/dataset/mutations/__tests__/update-file.spec.tsx

@@ -0,0 +1,126 @@
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { vi } from "vitest"
+import UpdateFile from "../update-file"
+import UploaderContext from "../../../uploader/uploader-context.js"
+
+describe("UpdateFile Component", () => {
+  const mockResumeDataset = vi.fn()
+  const mockUploader = {
+    resumeDataset: vi.fn(() => mockResumeDataset),
+  }
+
+  const datasetId = "ds000001"
+  const path = "sub-01/anat"
+
+  const renderComponent = (props = {}, uploader = mockUploader) => {
+    return render(
+      <UploaderContext.Provider value={uploader}>
+        <UpdateFile datasetId={datasetId} path={path} {...props}>
+          <button>Upload Button</button>
+        </UpdateFile>
+      </UploaderContext.Provider>,
+    )
+  }
+
+  it("renders children correctly", () => {
+    renderComponent()
+    expect(screen.getByText("Upload Button")).toBeInTheDocument()
+  })
+
+  it("sets webkitdirectory attribute when directory prop is true", () => {
+    renderComponent({ directory: true })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling // The input is before the children
+    expect(inputElement).toHaveAttribute("webkitdirectory", "true")
+  })
+
+  it("does not set webkitdirectory attribute when directory prop is false", () => {
+    renderComponent({ directory: false })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling
+    expect(inputElement).not.toHaveAttribute("webkitdirectory")
+  })
+
+  it("sets multiple attribute when multiple prop is true", () => {
+    renderComponent({ multiple: true })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling
+    expect(inputElement).toHaveAttribute("multiple")
+  })
+
+  it("does not set multiple attribute when multiple prop is false", () => {
+    renderComponent({ multiple: false })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling
+    expect(inputElement).not.toHaveAttribute("multiple")
+  })
+
+  describe("onChange event", () => {
+    const file1 = new File(["content1"], "original1.txt", {
+      type: "text/plain",
+    })
+    const file2 = new File(["content2"], "original2.txt", {
+      type: "text/plain",
+    })
+
+    it("calls uploader.resumeDataset with renamed file when filename is provided and one file is selected", () => {
+      const customFilename = "new_filename.txt"
+      renderComponent({ filename: customFilename })
+      const inputElement = screen.getByRole("button", { name: "Upload Button" })
+        .previousSibling
+
+      fireEvent.change(inputElement, {
+        target: { files: [file1] },
+      })
+
+      expect(mockUploader.resumeDataset).toHaveBeenCalledWith(
+        datasetId,
+        path,
+        false,
+      )
+      expect(mockResumeDataset).toHaveBeenCalledTimes(1)
+      const calledWithArgs = mockResumeDataset.mock.calls[0][0]
+      expect(calledWithArgs.files).toHaveLength(1)
+      expect(calledWithArgs.files[0].name).toBe(customFilename)
+      expect(calledWithArgs.files[0].type).toBe(file1.type)
+    })
+
+    it("calls uploader.resumeDataset with original files when filename is not provided", () => {
+      renderComponent()
+      const inputElement = screen.getByRole("button", { name: "Upload Button" })
+        .previousSibling
+
+      fireEvent.change(inputElement, {
+        target: { files: [file1, file2] },
+      })
+
+      expect(mockUploader.resumeDataset).toHaveBeenCalledWith(
+        datasetId,
+        path,
+        false,
+      )
+      expect(mockResumeDataset).toHaveBeenCalledTimes(1)
+      expect(mockResumeDataset).toHaveBeenCalledWith({ files: [file1, file2] })
+    })
+
+    it("calls uploader.resumeDataset with original files when multiple files are selected, even if filename is provided", () => {
+      const customFilename = "new_filename.txt"
+      renderComponent({ filename: customFilename, multiple: true })
+      const inputElement = screen.getByRole("button", { name: "Upload Button" })
+        .previousSibling
+
+      fireEvent.change(inputElement, {
+        target: { files: [file1, file2] },
+      })
+
+      expect(mockUploader.resumeDataset).toHaveBeenCalledWith(
+        datasetId,
+        path,
+        false,
+      )
+      expect(mockResumeDataset).toHaveBeenCalledTimes(1)
+      expect(mockResumeDataset).toHaveBeenCalledWith({ files: [file1, file2] })
+    })
+  })
+})

package/src/scripts/dataset/mutations/update-file.jsx

@@ -7,6 +7,7 @@ const UpdateFile = ({
   directory = false,
   multiple = false,
   path = null,
+  filename = null,
   children,
 }) => {
   return (
@@ -18,11 +19,25 @@ const UpdateFile = ({
             className="update-file"
             onChange={(e) => {
               e.preventDefault()
-              uploader.resumeDataset(
-                datasetId,
-                path,
-                false,
-              )({ files: e.target.files })
+              if (filename && e.target.files.length === 1) {
+                // In the case that a single file was selected,
+                // name that file based on the original path and not the client side name.
+                const target = e.target.files[0]
+                const files = [
+                  new File([target], filename, { type: target.type }),
+                ]
+                uploader.resumeDataset(
+                  datasetId,
+                  path,
+                  false,
+                )({ files })
+              } else {
+                uploader.resumeDataset(
+                  datasetId,
+                  path,
+                  false,
+                )({ files: e.target.files })
+              }
             }}
             webkitdirectory={directory ? "true" : undefined}
             multiple={multiple && true}

package/src/scripts/dataset/routes/snapshot.tsx

@@ -18,7 +18,7 @@ const FormRow = styled.div`
 export const NoErrors = ({ validation, authors, children }) => {
   const noErrors = validation?.errors === 0
   // zero authors will cause DOI minting to fail
-  const hasAuthor = authors.length > 0
+  const hasAuthor = authors?.length > 0
   if (noErrors && hasAuthor) {
     return children
   } else {

package/src/scripts/errors/errorRoute.tsx

@@ -6,12 +6,14 @@ import { Route, Routes } from "react-router-dom"
 import OrcidGeneral from "./orcid/general.jsx"
 import { OrcidEmailWarning } from "./orcid/email-warning.js"
 import FourOFourPage from "./404page.js"
+import FourOThreePage from "./403page.js"
 
 function ErrorRoute() {
   return (
     <div className="container errors">
       <div className="panel">
         <Routes>
+          <Route path="github" element={<FourOThreePage />} />
           <Route path="orcid" element={<OrcidGeneral />} />
           <Route path="email-warning" element={<OrcidEmailWarning />} />
           <Route path="*" element={<FourOFourPage />} />

package/src/scripts/pages/orcid-link.tsx

@@ -36,6 +36,15 @@ export function OrcidLinkPage() {
           have will be merged into the combined OpenNeuro account linked to your
           ORCID iD.
         </p>
+        <p>
+        </p>
+        <p>
+          Please see{" "}
+          <a href="https://docs.openneuro.org/orcid.html">our documentation</a>
+          {" "}
+          for additional details on how we use ORCID data and how to link your
+          account.
+        </p>
         <h3>Why are we making this change?</h3>
         <p>
           ORCID allows richer researcher metadata for contributions and

package/src/scripts/queries/user.ts

@@ -20,6 +20,8 @@ export const GET_USER = gql`
       created
       lastSeen
       blocked
+      githubSynced
+      github
     }
   }
 `
@@ -45,17 +47,132 @@ export const UPDATE_USER = gql`
   }
 `
 
+export const ADVANCED_SEARCH_DATASETS_QUERY = gql`
+  query advancedSearchDatasets(
+    $query: JSON!
+    $cursor: String
+    $allDatasets: Boolean
+    $datasetStatus: String
+    $sortBy: JSON
+    $first: Int!
+  ) {
+    datasets: advancedSearch(
+      query: $query
+      allDatasets: $allDatasets
+      datasetStatus: $datasetStatus
+      sortBy: $sortBy
+      first: $first
+      after: $cursor
+    ) {
+      edges {
+        id
+        node {
+          id
+          created
+          name
+          uploader {
+            id
+            name
+            orcid
+          }
+          public
+          permissions {
+            id
+            userPermissions {
+              userId
+              level
+              access: level
+              user {
+                id
+                name
+                email
+                provider
+              }
+            }
+          }
+          metadata {
+            ages
+          }
+          latestSnapshot {
+            size
+            summary {
+              modalities
+              secondaryModalities
+              sessions
+              subjects
+              subjectMetadata {
+                participantId
+                age
+                sex
+                group
+              }
+              tasks
+              size
+              totalFiles
+              dataProcessed
+              pet {
+                BodyPart
+                ScannerManufacturer
+                ScannerManufacturersModelName
+                TracerName
+                TracerRadionuclide
+              }
+            }
+            issues {
+              severity
+            }
+            validation {
+              errors
+              warnings
+            }
+            description {
+              Name
+              Authors
+            }
+          }
+          analytics {
+            views
+            downloads
+          }
+          stars {
+            userId
+            datasetId
+          }
+          followers {
+            userId
+            datasetId
+          }
+          snapshots {
+            id
+            created
+            tag
+          }
+        }
+      }
+      pageInfo {
+        startCursor
+        endCursor
+        hasPreviousPage
+        hasNextPage
+        count
+      }
+    }
+  }
+`
+
 // Reusable hook to fetch user data
-export const useUser = () => {
+export const useUser = (userId?: string) => {
   const [cookies] = useCookies()
   const profile = getProfile(cookies)
   const profileSub = profile?.sub
 
+  const finalUserId = userId || profileSub
+
   const { data: userData, loading: userLoading, error: userError } = useQuery(
     GET_USER,
     {
-      variables: { userId: profileSub },
-      skip: !profileSub,
+      variables: { userId: finalUserId },
+      skip: !finalUserId,
     },
   )
 

package/src/scripts/types/user-types.ts

@@ -8,27 +8,25 @@ export interface User {
   avatar?: string
   orcid?: string
   links?: string[]
+  githubSynced?: Date
+  admin?: boolean
+  provider?: string
+  created?: Date
+  lastSeen?: Date
+  blocked?: boolean
 }
 
 export interface UserRoutesProps {
-  user: User
+  orcidUser: User
   hasEdit: boolean
   isUser: boolean
 }
 export interface UserCardProps {
-  user: User
+  orcidUser: User
 }
 
 export interface UserAccountViewProps {
-  user: {
-    name: string
-    email: string
-    orcid?: string
-    links?: string[]
-    location?: string
-    institution?: string
-    github?: string
-  }
+  orcidUser: User
 }
 
 export interface Dataset {
@@ -63,12 +61,12 @@ export interface DatasetCardProps {
 }
 
 export interface UserDatasetsViewProps {
-  user: User
+  orcidUser: User
   hasEdit: boolean
 }
 
 export interface AccountContainerProps {
-  user: User
+  orcidUser: User
   hasEdit: boolean
   isUser: boolean
 }

package/src/scripts/uploader/file-select.tsx

@@ -1,73 +1,58 @@
-// dependencies -------------------------------------------------------
-
 import React from "react"
-import PropTypes from "prop-types"
 
-type UploadProps = {
+type UploadFileSelectProps = {
   resume?: boolean
   onClick?: React.MouseEventHandler<HTMLButtonElement>
-  onChange?: (e?: { files: File[] }) => void
+  onChange: (e?: { files: File[] }) => void
   disabled?: boolean
 }
 
-class Upload extends React.Component<UploadProps> {
-  public static propTypes = {}
-  // life cycle events --------------------------------------------------
-  render(): React.ReactNode {
-    const resumeIcon = (
-      <span>
-        <i className="fa fa-repeat" />
-        &nbsp;
-      </span>
-    )
-    const icon = this.props.resume ? resumeIcon : null
-    const text = this.props.resume ? "Resume" : "Select folder"
-
-    return (
-      <div
-        className={"fileupload-btn" + (this.props.disabled ? " disabled" : "")}
-      >
-        <span>
-          {icon}
-          {text}
-        </span>
-        <input
-          type="file"
-          id="multifile-select"
-          className="multifile-select-btn"
-          onClick={this._click.bind(this)}
-          onChange={this._onFileSelect.bind(this)}
-          webkitdirectory="true"
-          directory="true"
-          disabled={this.props.disabled}
-        />
-      </div>
-    )
-  }
-
-  // custom methods -----------------------------------------------------
-
-  _click(e): void {
+export const UploadFileSelect: React.FC<UploadFileSelectProps> = (
+  { resume, onClick, onChange, disabled },
+) => {
+  const handleClick = (e: React.MouseEvent<HTMLInputElement>): void => {
     e.stopPropagation()
-    e.target.value = null
-    if (this.props.onClick) {
-      this.props.onClick(e)
+    // Reset the input value to allow selecting the same file/folder again
+    if (e.target instanceof HTMLInputElement) {
+      e.target.value = ""
     }
+    if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>)
   }
 
-  _onFileSelect(e): void {
-    if (e.target && e.target.files.length > 0) {
-      const files = e.target.files
-      this.props.onChange({ files })
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    if (e.target && e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files)
+      onChange({ files })
     }
   }
-}
 
-Upload.propTypes = {
-  resume: PropTypes.bool,
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
+  const resumeIcon = (
+    <span>
+      <i className="fa fa-repeat" />
+      &nbsp;
+    </span>
+  )
+  const icon = resume ? resumeIcon : null
+  const text = resume ? "Resume" : "Select folder"
+
+  return (
+    <div className={`fileupload-btn${disabled ? " disabled" : ""}`}>
+      <span>
+        {icon}
+        {text}
+      </span>
+      <input
+        type="file"
+        id="multifile-select"
+        className="multifile-select-btn"
+        onClick={handleClick}
+        onChange={handleFileSelect}
+        webkitdirectory="true"
+        directory="true"
+        disabled={disabled}
+      />
+    </div>
+  )
 }
 
-export default Upload
+export default UploadFileSelect

package/src/scripts/uploader/upload-select.jsx

@@ -6,7 +6,7 @@ import { useUser } from "../queries/user"
 const UploadSelect = () => {
   const { user, loading, error } = useUser()
   const disabled = loading || Boolean(error) || !user || !user.email
-  const noEmail = !user.email
+  const noEmail = !(user?.email)
   return (
     <div>
       <UploaderContext.Consumer>