@openneuro/app 5.0.0-alpha.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "5.0.0-alpha.0",
+  "version": "5.1.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ee5b58a1623626ef79a439918e6c065a1c7d5e2e"
+  "gitHead": "e3444f63f43cb7e9d3ecfac51d2a42cdcc4f4e60"
 }

package/src/scripts/dataset/__tests__/dataset-canonical-url.spec.ts

@@ -0,0 +1,20 @@
+import { datasetCanonicalUrl } from "../dataset-canonical-url"
+import { dataset } from "../../fixtures/dataset-query"
+import { vitest } from "vitest"
+
+vitest.mock("../../config", () => ({
+  config: { url: "http://localhost:9876" },
+}))
+
+describe("datasetCanonicalUrl", () => {
+  it("returns the canonical URL for a dataset with snapshots", () => {
+    const url = datasetCanonicalUrl(dataset)
+    expect(url.href).toBe("http://localhost:9876/datasets/ds001032/versions/2.0.0")
+  })
+
+  it("returns the canonical URL for a draft dataset", () => {
+    const draftDataset = { ...dataset, snapshots: [] }
+    const url = datasetCanonicalUrl(draftDataset)
+    expect(url.href).toBe("http://localhost:9876/datasets/ds001032")
+  })
+})

package/src/scripts/dataset/dataset-canonical-url.ts

@@ -0,0 +1,14 @@
+import { config } from "../config"
+
+export function datasetCanonicalUrl(dataset): URL {
+  const siteUrl = config.url
+  if (dataset.snapshots.length) {
+    const latestSnapshot = dataset.snapshots.slice(-1)[0]
+    return new URL(
+      `/datasets/${dataset.id}/versions/${latestSnapshot.tag}`,
+      siteUrl,
+    )
+  } else {
+    return new URL(`/datasets/${dataset.id}`, siteUrl)
+  }
+}

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

@@ -3,6 +3,7 @@ import * as Sentry from "@sentry/react"
 import PropTypes from "prop-types"
 import { useNavigate, useParams } from "react-router-dom"
 import { useApolloClient, useQuery } from "@apollo/client"
+import Helmet from "react-helmet"
 import { Loading } from "../components/loading/Loading"
 
 import DatasetQueryContext from "../datalad/dataset/dataset-query-context.js"
@@ -16,6 +17,7 @@ import { trackAnalytics } from "../utils/datalad"
 import FourOFourPage from "../errors/404page"
 import FourOThreePage from "../errors/403page"
 import { getDatasetPage, getDraftPage } from "../queries/dataset"
+import { datasetCanonicalUrl } from "./dataset-canonical-url"
 
 /**
  * Query to load and render dataset page - most dataset loading is done here
@@ -63,6 +65,12 @@ export const DatasetQueryHook = ({ datasetId, draft }) => {
   }
   return (
     <DatasetContext.Provider value={data.dataset}>
+      <Helmet>
+        <link
+          rel="canonical"
+          href={datasetCanonicalUrl(data.dataset).toString()}
+        />
+      </Helmet>
       <ErrorBoundary subject={"error in dataset page"}>
         <DatasetQueryContext.Provider
           value={{

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

@@ -207,8 +207,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 +229,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

@@ -33,6 +33,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/user-account-view.tsx

@@ -13,6 +13,7 @@ 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 +90,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}>
@@ -126,9 +127,10 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
           validation={validateHttpHttpsUrl}
           validationMessage="Invalid URL format. Please start with http:// or https://"
           data-testid="links-section"
+          hasEdit={hasEdit}
         />
 
-        {orcidUser.orcid !== undefined && (
+        {hasEdit && orcidUser.orcid !== undefined && (
           <div className={styles.umbOrcidConsent}>
             <div className={styles.umbOrcidHeading}>
               <h4>ORCID Integration</h4>
@@ -144,11 +146,13 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
           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-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

@@ -10,23 +10,18 @@ import { useUser } from "../queries/user"
 
 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 />
-  }
-
   // is admin or profile matches id from the user data being returned
   const isUser = (user?.id === profile?.sub) ? true : false
   const hasEdit = isAdminUser || (user?.id === profile?.sub) ? true : false

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"