@openneuro/app 5.0.0 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "437b7f1a10abf79d6e49058b86cf0ddb625de684"
+  "gitHead": "035b0b4544d4b287506ea00aff3b424ed816611a"
 }

package/src/scripts/dataset/download/download-native.js

@@ -43,65 +43,48 @@ class DownloadAbortError extends Error {
 let downloadCanceled
 
 /**
- * Recursive download for file trees via browser file access API
+ * Download for file trees via browser file access API
  */
 const downloadTree = async (
   { datasetId, snapshotTag, client, dirHandle, toastId },
   path = "",
-  tree = null,
 ) => {
   const filesToDownload = await downloadDataset(client)({
     datasetId,
     snapshotTag,
-    tree,
   })
   for (const [_index, file] of filesToDownload.entries()) {
     const downloadPath = path ? `${path}/${file.filename}` : file.filename
-    if (file.directory) {
-      // Next tree level
-      await downloadTree(
-        {
+    // Regular file
+    if (downloadCanceled) {
+      throw new DownloadAbortError("Download canceled by user request")
+    }
+    const fileHandle = await openFileTree(
+      dirHandle,
+      path ? `${path}/${file.filename}` : file.filename,
+    )
+    // Skip files which are already complete
+    if (fileHandle.size == file.size) continue
+    const writable = await fileHandle.createWritable()
+    const { body, status, statusText } = await fetch(file.urls[0])
+    let loaded = 0
+    const progress = new TransformStream({
+      transform(chunk, controller) {
+        downloadToastUpdate(toastId, loaded / file.size, {
           datasetId,
           snapshotTag,
-          client,
-          dirHandle,
-          toastId,
-        },
-        downloadPath,
-        file.key,
-      )
+          downloadPath,
+          dirName: dirHandle.name,
+        })
+        loaded += chunk.length
+        controller.enqueue(chunk)
+      },
+    })
+    if (status === 200) {
+      await body.pipeThrough(progress).pipeTo(writable)
     } else {
-      // Regular file
-      if (downloadCanceled) {
-        throw new DownloadAbortError("Download canceled by user request")
-      }
-      const fileHandle = await openFileTree(
-        dirHandle,
-        path ? `${path}/${file.filename}` : file.filename,
-      )
-      // Skip files which are already complete
-      if (fileHandle.size == file.size) continue
-      const writable = await fileHandle.createWritable()
-      const { body, status, statusText } = await fetch(file.urls[0])
-      let loaded = 0
-      const progress = new TransformStream({
-        transform(chunk, controller) {
-          downloadToastUpdate(toastId, loaded / file.size, {
-            datasetId,
-            snapshotTag,
-            downloadPath,
-            dirName: dirHandle.name,
-          })
-          loaded += chunk.length
-          controller.enqueue(chunk)
-        },
-      })
-      if (status === 200) {
-        await body.pipeThrough(progress).pipeTo(writable)
-      } else {
-        Sentry.captureException(statusText)
-        return requestFailureToast(file.filename)
-      }
+      Sentry.captureException(statusText)
+      return requestFailureToast(file.filename)
     }
   }
 }

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

@@ -1,31 +1,29 @@
 import { gql } from "@apollo/client"
 
 export const DOWNLOAD_DATASET = gql`
-query downloadDraft($datasetId: ID!, $tree: String) {
-  dataset(id: $datasetId) {
-    id
-    draft {
+  query downloadDraft($datasetId: ID!) {
+    dataset(id: $datasetId) {
       id
-      files(tree: $tree) {
+      draft {
         id
-        key
-        directory
-        filename
-        size
-        urls
+        files(recursive: true) {
+          id
+          directory
+          filename
+          size
+          urls
+        }
       }
     }
   }
-}
 `
 
 export const DOWNLOAD_SNAPSHOT = gql`
-  query downloadSnapshot($datasetId: ID!, $tag: String!, $tree: String) {
+  query downloadSnapshot($datasetId: ID!, $tag: String!) {
     snapshot(datasetId: $datasetId, tag: $tag) {
       id
-      files(tree: $tree) {
+      files(recursive: true) {
         id
-        key
         directory
         filename
         size
@@ -36,14 +34,13 @@ export const DOWNLOAD_SNAPSHOT = gql`
 `
 
 export const downloadDataset =
-  (client) => async ({ datasetId, snapshotTag, tree = null }) => {
+  (client) => async ({ datasetId, snapshotTag }) => {
     if (snapshotTag) {
       const { data } = await client.query({
         query: DOWNLOAD_SNAPSHOT,
         variables: {
           datasetId,
           tag: snapshotTag,
-          tree: tree,
         },
       })
       return data.snapshot.files
@@ -52,7 +49,6 @@ export const downloadDataset =
         query: DOWNLOAD_DATASET,
         variables: {
           datasetId,
-          tree,
         },
       })
       return data.dataset.draft.files

package/src/scripts/queries/user.ts

@@ -64,7 +64,8 @@ export const GET_USER = gql`
           status
         }
       }
-      orcidConsent 
+      orcidConsent
+      profilePrivate
     }
   }
 `
@@ -74,22 +75,25 @@ export const UPDATE_USER = gql`
   mutation updateUser(
     $id: ID!
     $location: String
-    $links: [String]
+    $links: [String!]
     $institution: String
-    $orcidConsent: Boolean 
+    $orcidConsent: Boolean
+    $profilePrivate: Boolean
   ) {
     updateUser(
       id: $id
       location: $location
       links: $links
       institution: $institution
-      orcidConsent: $orcidConsent 
+      orcidConsent: $orcidConsent
+      profilePrivate: $profilePrivate
     ) {
       id
       location
       links
       institution
       orcidConsent
+      profilePrivate
     }
   }
 `
@@ -207,8 +211,15 @@ export const ADVANCED_SEARCH_DATASETS_QUERY = gql`
   }
 `
 
+interface UseUserOptions {
+  errorPolicy: "none" | "ignore" | "all"
+}
+
 // Reusable hook to fetch user data
-export const useUser = (userId?: string) => {
+export const useUser = (
+  userId?: string,
+  options: UseUserOptions = { errorPolicy: "none" },
+) => {
   const [cookies] = useCookies()
   const profile = getProfile(cookies)
   const profileSub = profile?.sub
@@ -222,6 +233,7 @@ export const useUser = (userId?: string) => {
   } = useQuery(GET_USER, {
     variables: { userId: finalUserId },
     skip: !finalUserId,
+    errorPolicy: options.errorPolicy,
   })
 
   if (userError) {

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

@@ -212,6 +212,7 @@ export const SearchResultItem = ({
     </Tooltip>
   )
 
+  // eslint-disable-next-line no-useless-assignment
   let invalid = false
   if (node.latestSnapshot.issues) {
     invalid = node.latestSnapshot.issues.some(

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

@@ -93,6 +93,7 @@ export const mapRawEventToMappedNotification = (
     reason,
   } = event
 
+  // eslint-disable-next-line no-useless-assignment
   let title = "General Notification"
   const mappedType: MappedNotification["type"] = type
   let approval: MappedNotification["approval"]

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

@@ -20,6 +20,7 @@ export interface User {
   githubSynced?: Date
   notifications?: Event[]
   orcidConsent?: boolean | null
+  profilePrivate?: boolean
 }
 
 export interface UserRoutesProps {
@@ -33,6 +34,7 @@ export interface UserCardProps {
 
 export interface UserAccountViewProps {
   orcidUser: User
+  hasEdit: boolean
 }
 
 /** ------------------ Dataset ------------------ */

package/src/scripts/users/__tests__/user-account-view.spec.tsx

@@ -68,7 +68,7 @@ describe("<UserAccountView />", () => {
     render(
       <BrowserRouter>
         <MockedProvider mocks={mocks} addTypename={false}>
-          <UserAccountView orcidUser={baseUser} />
+          <UserAccountView orcidUser={baseUser} hasEdit={true} />
         </MockedProvider>
       </BrowserRouter>,
     )
@@ -106,7 +106,7 @@ describe("<UserAccountView />", () => {
     render(
       <BrowserRouter>
         <MockedProvider mocks={mocks} addTypename={false}>
-          <UserAccountView orcidUser={baseUser} />
+          <UserAccountView orcidUser={baseUser} hasEdit={true} />
         </MockedProvider>
       </BrowserRouter>,
     )
@@ -146,7 +146,7 @@ describe("<UserAccountView />", () => {
     render(
       <BrowserRouter>
         <MockedProvider mocks={mocks} addTypename={false}>
-          <UserAccountView orcidUser={baseUser} />
+          <UserAccountView orcidUser={baseUser} hasEdit={true} />
         </MockedProvider>,
       </BrowserRouter>,
     )
@@ -186,7 +186,7 @@ describe("<UserAccountView />", () => {
     render(
       <BrowserRouter>
         <MockedProvider mocks={mocks} addTypename={false}>
-          <UserAccountView orcidUser={baseUser} />
+          <UserAccountView orcidUser={baseUser} hasEdit={true} />
         </MockedProvider>,
       </BrowserRouter>,
     )
@@ -226,7 +226,7 @@ describe("<UserAccountView />", () => {
     render(
       <BrowserRouter>
         <MockedProvider mocks={mocks} addTypename={false}>
-          <UserAccountView orcidUser={baseUser} />
+          <UserAccountView orcidUser={baseUser} hasEdit={true} />
         </MockedProvider>,
       </BrowserRouter>,
     )

package/src/scripts/users/__tests__/user-routes.spec.tsx

@@ -285,11 +285,6 @@ describe("UserRoutes Component", () => {
     expect(await screen.findByTestId("404-page")).toBeInTheDocument()
   })
 
-  it("renders FourOThreePage for restricted route /account when hasEdit is false", async () => {
-    setupUserRoutes(userToPass, "/account", false, true)
-    expect(await screen.findByTestId("403-page")).toBeInTheDocument()
-  })
-
   it("renders FourOThreePage for restricted route /notifications when hasEdit is false", async () => {
     setupUserRoutes(userToPass, "/notifications", false, true)
     expect(await screen.findByTestId("403-page")).toBeInTheDocument()

package/src/scripts/users/__tests__/user-tabs.spec.tsx

@@ -23,14 +23,14 @@ const UserAccountTabsWrapper: React.FC = () => {
 }
 
 describe("UserAccountTabs Component", () => {
-  it("should not render tabs when hasEdit is false", () => {
+  it("should not notification render tab when hasEdit is false", () => {
     render(<UserAccountTabsWrapper />)
 
     expect(screen.getByText("My Datasets")).toBeInTheDocument()
 
     fireEvent.click(screen.getByText("Toggle hasEdit"))
 
-    expect(screen.queryByText("My Datasets")).not.toBeInTheDocument()
+    expect(screen.queryByText("Notifications")).not.toBeInTheDocument()
   })
 
   it("should render tabs when hasEdit is toggled back to true", () => {
@@ -39,10 +39,10 @@ describe("UserAccountTabs Component", () => {
     expect(screen.getByText("My Datasets")).toBeInTheDocument()
 
     fireEvent.click(screen.getByText("Toggle hasEdit"))
-    expect(screen.queryByText("My Datasets")).not.toBeInTheDocument()
+    expect(screen.queryByText("Notifications")).not.toBeInTheDocument()
 
     fireEvent.click(screen.getByText("Toggle hasEdit"))
-    expect(screen.getByText("My Datasets")).toBeInTheDocument()
+    expect(screen.getByText("Notifications")).toBeInTheDocument()
   })
 
   it("should update active class on the correct NavLink based on route", () => {

package/src/scripts/users/components/editable-content.tsx

@@ -13,6 +13,7 @@ interface EditableContentProps {
   heading: string
   validation?: RegExp | ((value: string) => boolean)
   validationMessage?: string
+  hasEdit?: boolean
   "data-testid"?: string
 }
 
@@ -23,6 +24,7 @@ export const EditableContent: React.FC<EditableContentProps> = ({
   heading,
   validation,
   validationMessage,
+  hasEdit,
   "data-testid": testId,
 }) => {
   const [editing, setEditing] = useState(false)
@@ -52,7 +54,7 @@ export const EditableContent: React.FC<EditableContentProps> = ({
         <h4>{heading}</h4>
         {editing
           ? <CloseButton action={closeEditing} />
-          : <EditButton action={() => setEditing(true)} />}
+          : hasEdit && <EditButton action={() => setEditing(true)} />}
       </span>
       {editing
         ? (

package/src/scripts/users/components/profile-privacy.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react"
+import * as Sentry from "@sentry/react"
+import { useMutation } from "@apollo/client"
+import { GET_USER, UPDATE_USER } from "../../queries/user"
+import { RadioGroup } from "../../components/radio/RadioGroup"
+
+export interface ProfilePrivacyProps {
+  userId: string
+  initialProfilePrivate: boolean
+}
+
+export const ProfilePrivacy: React.FC<ProfilePrivacyProps> = ({
+  userId,
+  initialProfilePrivate,
+}) => {
+  const initialValue = initialProfilePrivate ? "true" : "false"
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialProfilePrivate ? "true" : "false")
+  }, [initialProfilePrivate])
+
+  const [updateUser] = useMutation(UPDATE_USER, {
+    refetchQueries: [{ query: GET_USER, variables: { userId } }],
+    onError: (error) => {
+      Sentry.captureException(error)
+    },
+  })
+
+  const handleChange = async (newValue: string) => {
+    setValue(newValue)
+    try {
+      await updateUser({
+        variables: { id: userId, profilePrivate: newValue === "true" },
+      })
+    } catch (error) {
+      Sentry.captureException(error)
+    }
+  }
+
+  const radioOptions = [
+    { label: "Public", value: "false" },
+    { label: "Private", value: "true" },
+  ]
+
+  return (
+    <div>
+      <p>
+        Set your profile to private to hide your profile page from public view.
+        Your datasets and contributions will still be visible based on each
+        dataset's published state.
+      </p>
+      <RadioGroup
+        name="profilePrivate"
+        layout="row"
+        radioArr={radioOptions}
+        selected={value}
+        setSelected={handleChange}
+      />
+    </div>
+  )
+}

package/src/scripts/users/user-account-view.tsx

@@ -8,11 +8,13 @@ import styles from "./scss/useraccountview.module.scss"
 import { GitHubAuthButton } from "./github-auth-button"
 import type { UserAccountViewProps } from "../types/user-types"
 import { OrcidConsentForm } from "./components/orcid-consent-form"
+import { ProfilePrivacy } from "./components/profile-privacy"
 import { validateHttpHttpsUrl } from "../utils/validationUtils"
 import { pageTitle } from "../resources/strings.js"
 
 export const UserAccountView: React.FC<UserAccountViewProps> = ({
   orcidUser,
+  hasEdit,
 }) => {
   const [userLinks, setLinks] = useState<string[]>(orcidUser.links ?? [])
   const [userLocation, setLocation] = useState<string>(
@@ -89,7 +91,7 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
     <>
       <Helmet>
         <title>
-            {orcidUser.name || "User"} profile - {pageTitle}
+          {orcidUser.name || "User"} profile - {pageTitle}
         </title>
       </Helmet>
       <div data-testid="user-account-view" className={styles.useraccountview}>
@@ -114,21 +116,26 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
                 {orcidUser.github}
               </li>
             )}
-          <li>
-            <GitHubAuthButton sync={orcidUser.githubSynced} />
-          </li>
+          {hasEdit && (
+            <li>
+              <GitHubAuthButton sync={orcidUser.githubSynced} />
+            </li>
+          )}
         </ul>
 
-        <EditableContent
-          editableContent={userLinks}
-          setRows={handleLinksChange}
-          heading="Links"
-          validation={validateHttpHttpsUrl}
-          validationMessage="Invalid URL format. Please start with http:// or https://"
-          data-testid="links-section"
-        />
+        {hasEdit && (
+          <div className={styles.umbOrcidConsent}>
+            <div className={styles.umbOrcidHeading}>
+              <h4>Profile Privacy</h4>
+            </div>
+            <ProfilePrivacy
+              userId={orcidUser.id}
+              initialProfilePrivate={orcidUser.profilePrivate ?? false}
+            />
+          </div>
+        )}
 
-        {orcidUser.orcid !== undefined && (
+        {hasEdit && orcidUser.orcid !== undefined && (
           <div className={styles.umbOrcidConsent}>
             <div className={styles.umbOrcidHeading}>
               <h4>ORCID Integration</h4>
@@ -140,15 +147,26 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
           </div>
         )}
 
+        <EditableContent
+          editableContent={userLinks}
+          setRows={handleLinksChange}
+          heading="Links"
+          validation={validateHttpHttpsUrl}
+          validationMessage="Invalid URL format. Please start with http:// or https://"
+          data-testid="links-section"
+          hasEdit={hasEdit}
+        />
         <EditableContent
           editableContent={userLocation}
           setRows={handleLocationChange}
           heading="Location"
+          hasEdit={hasEdit}
           data-testid="location-section"
         />
         <EditableContent
           editableContent={userInstitution}
           setRows={handleInstitutionChange}
+          hasEdit={hasEdit}
           heading="Institution"
           data-testid="institution-section"
         />

package/src/scripts/users/user-datasets-view.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react"
 import { useQuery } from "@apollo/client"
 import * as Sentry from "@sentry/react"
+import Helmet from "react-helmet"
+import { pageTitle } from "../resources/strings"
 import { DatasetCard } from "./dataset-card"
 import { UserDatasetFilters } from "./components/user-dataset-filters"
 import { ADVANCED_SEARCH_DATASETS_QUERY } from "../queries/user"
@@ -260,6 +262,11 @@ export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({
       className={styles.userDatasetsWrapper}
       data-testid="user-datasets-view"
     >
+      <Helmet>
+        <title>
+          {orcidUser.name || "User"}'s Datasets - {pageTitle}
+        </title>
+      </Helmet>
       <h3>{orcidUser.name}'s Datasets</h3>
 
       <UserDatasetFilters

package/src/scripts/users/user-menu.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom"
 import { Dropdown } from "../components/dropdown/Dropdown"
 import { useUser } from "../queries/user"
 import { useNotifications } from "./notifications/user-notifications-context"
+import orcidIcon from "../../assets/orcid_24x24.png"
 import "./scss/user-menu.scss"
 
 interface UserMenuListProps {
@@ -101,10 +102,18 @@ export const UserMenu: React.FC<UserMenuProps> = ({ signOutAndRedirect }) => {
               <p>
                 <span>Hello</span> <br />
                 {user.name} <br />
-                {user.email}
               </p>
               <p>
                 <span>signed in via {user.provider}</span>
+                {user?.orcid && (
+                      <a
+                        href={`https://orcid.org/${user.orcid}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <img src={orcidIcon} alt="ORCID iD" /> {user.orcid}
+                      </a>
+                    ) || user.email}
               </p>
             </li>
 

package/src/scripts/users/user-query.tsx

@@ -7,24 +7,24 @@ import { isAdmin } from "../authentication/admin-user"
 import { useCookies } from "react-cookie"
 import { getProfile } from "../authentication/profile"
 import { useUser } from "../queries/user"
+import FourOThreePage from "../errors/403page"
 
 export const UserQuery: React.FC = () => {
   const { orcid } = useParams()
-  const isOrcidValid = orcid && isValidOrcid(orcid)
-  const { user, loading, error } = useUser(orcid)
+  const { user, loading } = useUser(orcid, { errorPolicy: "all" })
 
   const [cookies] = useCookies()
   const profile = getProfile(cookies)
   const isAdminUser = isAdmin()
 
-  if (!isOrcidValid) {
+  if (!isValidOrcid(orcid)) {
     return <FourOFourPage />
   }
 
   if (loading) return <div>Loading...</div>
 
-  if (error || !user) {
-    return <FourOFourPage />
+  if (!profile?.admin && user.profilePrivate) {
+    return <FourOThreePage />
   }
 
   // is admin or profile matches id from the user data being returned

package/src/scripts/users/user-routes.tsx

@@ -60,9 +60,9 @@ export const UserRoutes: React.FC<UserRoutesProps> = (
           {/* This route handles the user account page */}
           <Route
             path="account"
-            element={hasEdit
-              ? <UserAccountView orcidUser={orcidUser} />
-              : <FourOThreePage />}
+            element={
+              <UserAccountView orcidUser={orcidUser} hasEdit={hasEdit} />
+            }
           />
           {/* This route handles the user notifications and its sub-routes */}
           <Route

package/src/scripts/users/user-tabs.tsx

@@ -29,8 +29,6 @@ export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
     setClicked(true)
   }
 
-  if (!hasEdit) return null
-
   return (
     <div className={styles.userAccountTabLinks}>
       <ul
@@ -50,16 +48,19 @@ export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
             {isUser ? "My" : "User"} Datasets
           </NavLink>
         </li>
-        <li>
-          <NavLink
-            data-testid="user-notifications-tab"
-            to="notifications"
-            className={({ isActive }) => (isActive ? styles.active : "")}
-            onClick={handleClick}
-          >
-            Notifications
-          </NavLink>
-        </li>
+
+        {hasEdit && (
+          <li>
+            <NavLink
+              data-testid="user-notifications-tab"
+              to="notifications"
+              className={({ isActive }) => (isActive ? styles.active : "")}
+              onClick={handleClick}
+            >
+              Notifications
+            </NavLink>
+          </li>
+        )}
 
         <li>
           <NavLink

package/src/scripts/utils/user-datasets.tsx

@@ -24,6 +24,7 @@ export function filterAndSortDatasets(
   })
 
   const sortedDatasets = filteredDatasets.sort((a, b) => {
+    // eslint-disable-next-line no-useless-assignment
     let comparisonResult = 0
 
     // Move declarations outside the switch block

package/src/scripts/workers/schema.worker.ts

@@ -1,4 +1,3 @@
-/* eslint-env worker */
 import { fileListToTree, validate } from "@bids/validator/main"
 import type { ValidationResult } from "@bids/validator/main"
 import type { Config, ValidatorOptions } from "@bids/validator/options"