@openneuro/app 4.34.2 → 4.35.0-alpha.1

package/src/scripts/dataset/snapshot-container.tsx

@@ -80,7 +80,7 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
       dataset.snapshots[dataset.snapshots.length - 1].hexsha
   const modality: string = summary?.modalities[0] || ""
   const hasDerivatives = dataset?.derivatives.length > 0
-
+  const isAnonymousReviewer = profile?.scopes?.includes("dataset:reviewer")
   return (
     <>
       <Helmet>
@@ -263,16 +263,18 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                     />
                   </>
                 ))}
-
-              <MetaDataBlock
-                heading="Uploaded by"
-                item={
-                  <>
-                    <Username user={dataset.uploader} /> on{" "}
-                    <DateDistance date={dataset.created} />
-                  </>
-                }
-              />
+              {!isAnonymousReviewer &&
+                (
+                  <MetaDataBlock
+                    heading="Uploaded by"
+                    item={
+                      <>
+                        <Username user={dataset.uploader} /> on{" "}
+                        <DateDistance date={dataset.created} />
+                      </>
+                    }
+                  />
+                )}
 
               {dataset.snapshots.length && (
                 <MetaDataBlock

package/src/scripts/errors/errorRoute.tsx

@@ -4,6 +4,7 @@
 import React from "react"
 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"
 
 function ErrorRoute() {
@@ -12,6 +13,7 @@ function ErrorRoute() {
       <div className="panel">
         <Routes>
           <Route path="orcid" element={<OrcidGeneral />} />
+          <Route path="email-warning" element={<OrcidEmailWarning />} />
           <Route path="*" element={<FourOFourPage />} />
         </Routes>
       </div>

package/src/scripts/errors/freshdesk-widget.jsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import { useCookies } from "react-cookie"
 import { getProfile } from "../authentication/profile"
 import { config } from "../config"
+import { useUser } from "../queries/user"
 
 const buildCustomQuery = (customText, prepopulatedFields) => {
   const customizerQueries = [
@@ -31,8 +32,11 @@ function FreshdeskWidget({ subject, error, sentryId, description }) {
     screenshot: "No",
     captcha: "yes",
   }
+
+  const { user } = useUser()
+
   const prepopulatedFields = {
-    requester: profile && profile.email,
+    requester: profile && user?.email,
     subject,
     description: joinedDescription,
   }

package/src/scripts/errors/orcid/email-warning.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+export const OrcidEmailWarning = () => (
+  <div className="panel-heading">
+    <h2>No Email Provided</h2>
+    <p>
+      To make contributions to OpenNeuro, please provide a contact email
+      address.
+    </p>
+    <p>
+      Verify an email and make it available either publicly or to trusted
+      institutions to make contributions to OpenNeuro. See our{" "}
+      <a href="https://docs.openneuro.org/orcid.html#enabling-trusted-access-to-emails">
+        ORCID documentation
+      </a>{" "}
+      for detailed instructions.
+    </p>
+  </div>
+)
+
+export default OrcidEmailWarning

package/src/scripts/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import Uploader from "./uploader/uploader.jsx"
 import AppRoutes from "./routes"
 import HeaderContainer from "./common/containers/header"
@@ -6,11 +6,24 @@ import FooterContainer from "./common/containers/footer"
 import { SearchParamsProvider } from "./search/search-params-ctx"
 import { UserModalOpenProvider } from "./utils/user-login-modal-ctx"
 import { useAnalytics } from "./utils/analytics"
-
+import { useLocation, useNavigate } from "react-router-dom"
 import "../assets/email-header.png"
+import { useUser } from "./queries/user.js"
 
 const Index = (): React.ReactElement => {
   useAnalytics()
+  // Redirect authenticated Google users to the migration step if they are in any other route
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { user, loading, error } = useUser()
+  useEffect(() => {
+    if (
+      !loading && !error && location.pathname !== "/orcid-link" &&
+      user?.provider === "google"
+    ) {
+      navigate("/orcid-link")
+    }
+  }, [location.pathname, user])
   return (
     <Uploader>
       <SearchParamsProvider>

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

@@ -0,0 +1,13 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { OrcidLinkPage } from "../orcid-link"
+import { vitest } from "vitest"
+
+vitest.mock("../../config")
+
+describe("OrcidLinkPage", () => {
+  it("renders orcid link button", () => {
+    render(<OrcidLinkPage />)
+    expect(screen.getByRole("button")).toHaveTextContent("Link ORCID")
+  })
+})

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

@@ -0,0 +1,60 @@
+import React from "react"
+import Helmet from "react-helmet"
+import { frontPage } from "./front-page/front-page-content"
+import loginUrls from "../authentication/loginUrls"
+import { Button } from "../components/button/Button"
+import orcidIcon from "../../assets/orcid_24x24.png"
+import styled from "@emotion/styled"
+
+const OrcidLinkPageStyle = styled.div`
+  background: white;
+
+  .container {
+    max-width: 60em;
+    min-height: calc(100vh - 152px);
+  }
+`
+
+export function OrcidLinkPage() {
+  return (
+    <OrcidLinkPageStyle>
+      <Helmet>
+        <title>
+          Link ORCID to your existing account - {frontPage.pageTitle}
+        </title>
+        <meta
+          name="description"
+          content="How to link your ORCID account to your Google based OpenNeuro account"
+        />
+      </Helmet>
+      <div className="container">
+        <h2>ORCID account migration</h2>
+        <p>
+          OpenNeuro is moving to ORCID for all accounts. Please link an ORCID to
+          your account to continue and use ORCID for future logins. If you have
+          used Google login before, any datasets, comments, and permissions you
+          have will be merged into the combined OpenNeuro account linked to your
+          ORCID iD.
+        </p>
+        <h3>Why are we making this change?</h3>
+        <p>
+          ORCID allows richer researcher metadata for contributions and
+          optionally sharing contributions to datasets as works on your ORCID
+          profile.
+        </p>
+        <h3>Will Google accounts continue to work?</h3>
+        <p>
+          To make new contributions you will need link an ORCID but any existing
+          contributions will remain available.
+        </p>
+        <a href={loginUrls.orcid + `?migrate`}>
+          <Button
+            className="login-button"
+            label="Link ORCID"
+            imgSrc={orcidIcon}
+          />
+        </a>
+      </div>
+    </OrcidLinkPageStyle>
+  )
+}

package/src/scripts/queries/user.ts

@@ -0,0 +1,71 @@
+import { gql, useQuery } from "@apollo/client"
+import { useCookies } from "react-cookie"
+import { getProfile } from "../authentication/profile"
+import * as Sentry from "@sentry/react"
+
+// GraphQL query to fetch user data
+export const GET_USER = gql`
+  query User($userId: ID!) {
+    user(id: $userId) {
+      id
+      name
+      orcid
+      email
+      avatar
+      location
+      institution
+      links
+      provider
+      admin
+      created
+      lastSeen
+      blocked
+    }
+  }
+`
+
+export const UPDATE_USER = gql`
+  mutation updateUser(
+    $id: ID!
+    $location: String
+    $links: [String]
+    $institution: String
+  ) {
+    updateUser(
+      id: $id
+      location: $location
+      links: $links
+      institution: $institution
+    ) {
+      id
+      location
+      links
+      institution
+    }
+  }
+`
+
+// Reusable hook to fetch user data
+export const useUser = () => {
+  const [cookies] = useCookies()
+  const profile = getProfile(cookies)
+  const profileSub = profile?.sub
+
+  const { data: userData, loading: userLoading, error: userError } = useQuery(
+    GET_USER,
+    {
+      variables: { userId: profileSub },
+      skip: !profileSub,
+    },
+  )
+
+  if (userError) {
+    Sentry.captureException(userError)
+  }
+
+  return {
+    user: userData?.user,
+    loading: userLoading,
+    error: userError,
+  }
+}

package/src/scripts/routes.tsx

@@ -22,6 +22,7 @@ import { UserQuery } from "./users/user-query"
 import LoggedIn from "../scripts/authentication/logged-in"
 import LoggedOut from "../scripts/authentication/logged-out"
 import FourOThreePage from "./errors/403page"
+import { OrcidLinkPage } from "./pages/orcid-link"
 
 const AppRoutes: React.VoidFunctionComponent = () => (
   <Routes>
@@ -39,6 +40,7 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/import" element={<ImportDataset />} />
     <Route path="/metadata" element={<DatasetMetadata />} />
     <Route path="/public" element={<Navigate to="/search" replace />} />
+    <Route path="/orcid-link" element={<OrcidLinkPage />} />
     <Route
       path="/user/:orcid/*"
       element={

package/src/scripts/scss/variables.scss

@@ -85,6 +85,16 @@ $on-light-orange: rgb(255, 110, 43);
 $primary: $on-dark-aqua;
 
 $chiclet-color: #a2059e;
+//Base unit used for spacing gutters
+$base-unit: 20px;
+
+//Screen Sizes
+$screen-sm: 480px;
+$screen-md: 767px;
+$screen-lg: 989px;
+
+$border-radius-default: 4px;
+
 
 /* CSS HEX */
 :root {
@@ -105,6 +115,9 @@ $chiclet-color: #a2059e;
   --current-theme-primary-light: #{$on-dark-aqua-light};
   --current-theme-header: #333;
   --current-theme-header-dark: #333;
+  --font-sans: #{$font-sans};
+  --border-radius-default: #{$border-radius-default};
+  --newspaper: #{$newspaper};
 }
 
 .mri-theme {
@@ -139,15 +152,6 @@ $chiclet-color: #a2059e;
   background: #f3f3f3;
 }
 
-//Base unit used for spacing gutters
-$base-unit: 20px;
-
-//Screen Sizes
-$screen-sm: 480px;
-$screen-md: 767px;
-$screen-lg: 989px;
-
-$border-radius-default: 4px;
 
 .search-page-mri,
 .dataset-page-mri {

package/src/scripts/search/search-container.tsx

@@ -4,10 +4,6 @@ import { useLocation } from "react-router-dom"
 import { SearchPage } from "../components/search-page/SearchPage"
 import { SearchResultsList } from "../components/search-page/SearchResultsList"
 import { NeurobagelSearch } from "../components/search-page/NeurobagelSearch"
-import {
-  getUnexpiredProfile,
-  hasEditPermissions,
-} from "../authentication/profile"
 import { Button } from "../components/button/Button"
 import { Loading } from "../components/loading/Loading"
 import {
@@ -36,7 +32,6 @@ import {
 } from "./inputs"
 import FiltersBlockContainer from "./filters-block-container"
 import AggregateCountsContainer from "../pages/front-page/aggregate-queries/aggregate-counts-container"
-import { useCookies } from "react-cookie"
 import { useSearchResults } from "./use-search-results"
 import { SearchParamsCtx } from "./search-params-ctx"
 import type { SearchParams } from "./initial-search-params"
@@ -113,8 +108,6 @@ export const setDefaultSearch = (
 }
 
 const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
-  const [cookies] = useCookies()
-  const profile = getUnexpiredProfile(cookies)
   const location = useLocation()
 
   const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
@@ -238,16 +231,13 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
             : (
               <>
                 <SearchResultsList
-                  hasEditPermissions={hasEditPermissions}
                   items={resultsList}
-                  profile={profile}
                   datasetTypeSelected={searchParams.datasetType_selected}
                 />
                 {/* TODO: make div below into display component. */}
                 <div className="grid grid-nogutter" style={{ width: "100%" }}>
-                  {resultsList.length > 0 || !hasNextPage
-                    ? null
-                    : (
+                  {hasNextPage && resultsList.length > 0 &&
+                    (
                       <div className="col col-12 load-more m-t-10">
                         <Button label="Load More" onClick={loadMore} />
                       </div>

package/src/scripts/search/search-params-ctx.tsx

@@ -24,7 +24,7 @@ export const SearchParamsProvider: React.FC<SearchParamsProviderProps> = ({
       Sentry.addBreadcrumb({
         category: "routing",
         message: "No query found in URL. Using initialSearchParams.",
-        level: "info"
+        level: "info",
       })
     }
   } catch (err) {
@@ -79,8 +79,11 @@ export const removeFilterItem = (setSearchParams) => (param, value) => {
     /* Handle simple filter resets. */
     case "datasetType_selected":
       // when datasetType is unset, unset datasetStatus as well
-      updatedParams["datasetStatus_selected"] =
-        initialSearchParams["datasetStatus_selected"]
+      setSearchParams((prevState) => ({
+        ...prevState,
+        [param]: initialSearchParams[param],
+        "datasetStatus_selected": initialSearchParams["datasetStatus_selected"],
+      }))
       break
     case "modality_selected":
     case "brain_initiative":

package/src/scripts/search/use-search-results.tsx

@@ -266,7 +266,7 @@ export const useSearchResults = () => {
       matchQuery(
         "latestSnapshot.description.Authors",
         joinWithOR(authors),
-        "3",
+        "2",
       ),
     )
   }

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

@@ -13,6 +13,7 @@ export interface User {
 export interface UserRoutesProps {
   user: User
   hasEdit: boolean
+  isUser: boolean
 }
 export interface UserCardProps {
   user: User
@@ -69,4 +70,5 @@ export interface UserDatasetsViewProps {
 export interface AccountContainerProps {
   user: User
   hasEdit: boolean
+  isUser: boolean
 }

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

@@ -24,7 +24,9 @@ class Upload extends React.Component<UploadProps> {
     const text = this.props.resume ? "Resume" : "Select folder"
 
     return (
-      <div className="fileupload-btn">
+      <div
+        className={"fileupload-btn" + (this.props.disabled ? " disabled" : "")}
+      >
         <span>
           {icon}
           {text}

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

@@ -1,30 +1,46 @@
 import React from "react"
 import FileSelect from "./file-select"
 import UploaderContext from "./uploader-context.js"
+import { useUser } from "../queries/user"
 
-const UploadSelect = () => (
-  <div>
-    <UploaderContext.Consumer>
-      {(uploader) => (
-        <div className="message fade-in">
-          <p>
-            To protect the privacy of the individuals who have been scanned, we
-            require that all scan data be defaced before publishing a dataset.
-          </p>
-          Select a{" "}
-          <a
-            href="http://bids.neuroimaging.io"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            BIDS dataset
-          </a>{" "}
-          to upload
-          <FileSelect onChange={uploader.selectFiles} />
-        </div>
-      )}
-    </UploaderContext.Consumer>
-  </div>
-)
+const UploadSelect = () => {
+  const { user, loading, error } = useUser()
+  const disabled = loading || Boolean(error) || !user || !user.email
+  const noEmail = !user.email
+  return (
+    <div>
+      <UploaderContext.Consumer>
+        {(uploader) => (
+          <div className="message fade-in">
+            <p>
+              To protect the privacy of the individuals who have been scanned,
+              we require that all scan data be defaced before publishing a
+              dataset.
+            </p>
+            Select a{" "}
+            <a
+              href="http://bids.neuroimaging.io"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              BIDS dataset
+            </a>{" "}
+            to upload
+            <FileSelect onChange={uploader.selectFiles} disabled={disabled} />
+            {noEmail && (
+              <p>
+                Connect a contact email to upload. See our{" "}
+                <a href="https://docs.openneuro.org/orcid.html#enabling-trusted-access-to-emails">
+                  ORCID documentation
+                </a>{" "}
+                for instructions.
+              </p>
+            )}
+          </div>
+        )}
+      </UploaderContext.Consumer>
+    </div>
+  )
+}
 
 export default UploadSelect

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

@@ -1,3 +1,4 @@
+import { vi } from "vitest"
 import React from "react"
 import { MockedProvider } from "@apollo/client/testing"
 import {
@@ -8,24 +9,38 @@ import {
   within,
 } from "@testing-library/react"
 import { UserAccountView } from "../user-account-view"
-import { GET_USER_BY_ORCID, UPDATE_USER } from "../user-query"
+import type { User } from "../../types/user-types"
+import * as userQueries from "../../queries/user"
 
-const baseUser = {
+const baseUser: User = {
   id: "1",
   name: "John Doe",
-  email: "johndoe@example.com",
-  orcid: "0000-0001-2345-6789",
-  location: "San Francisco, CA",
-  institution: "University of California",
-  links: ["https://example.com", "https://example.org"],
-  github: "johndoe",
+  location: "Unknown",
+  github: "",
+  institution: "Unknown Institution",
+  email: "john.doe@example.com",
+  avatar: "https://dummyimage.com/200x200/000/fff",
+  orcid: "0000-0000-0000-0000",
+  links: [],
 }
 
+vi.mock("../../queries/user", async () => {
+  const actual = await vi.importActual("../../queries/user")
+  return {
+    ...actual,
+    useUser: () => ({
+      user: baseUser,
+      loading: false,
+      error: undefined,
+    }),
+  }
+})
+
 const mocks = [
   {
     request: {
-      query: GET_USER_BY_ORCID,
-      variables: { userId: baseUser.id },
+      query: userQueries.GET_USER,
+      variables: { id: baseUser.orcid },
     },
     result: {
       data: {
@@ -35,9 +50,9 @@ const mocks = [
   },
   {
     request: {
-      query: UPDATE_USER,
+      query: userQueries.UPDATE_USER,
       variables: {
-        id: baseUser.id,
+        id: baseUser.orcid,
         location: "Marin, CA",
         links: ["https://newlink.com"],
         institution: "New University",
@@ -46,7 +61,7 @@ const mocks = [
     result: {
       data: {
         updateUser: {
-          id: baseUser.id,
+          id: baseUser.orcid,
           location: "Marin, CA",
           links: ["https://newlink.com"],
           institution: "New University",
@@ -60,23 +75,22 @@ describe("<UserAccountView />", () => {
   it("should render the user details correctly", () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView user={baseUser} />
+        <UserAccountView />
       </MockedProvider>,
     )
     expect(screen.getByText("Name:")).toBeInTheDocument()
     expect(screen.getByText("John Doe")).toBeInTheDocument()
     expect(screen.getByText("Email:")).toBeInTheDocument()
-    expect(screen.getByText("johndoe@example.com")).toBeInTheDocument()
+    expect(screen.getByText("john.doe@example.com")).toBeInTheDocument()
     expect(screen.getByText("ORCID:")).toBeInTheDocument()
-    expect(screen.getByText("0000-0001-2345-6789")).toBeInTheDocument()
-    expect(screen.getByText("GitHub:")).toBeInTheDocument()
-    expect(screen.getByText("johndoe")).toBeInTheDocument()
+    expect(screen.getByText("0000-0000-0000-0000")).toBeInTheDocument()
+    expect(screen.getByText("Connect your GitHub")).toBeInTheDocument()
   })
 
   it("should render location with EditableContent", async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView user={baseUser} />
+        <UserAccountView />
       </MockedProvider>,
     )
     const locationSection = within(screen.getByTestId("location-section"))
@@ -95,7 +109,7 @@ describe("<UserAccountView />", () => {
   it("should render institution with EditableContent", async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView user={baseUser} />
+        <UserAccountView />
       </MockedProvider>,
     )
     const institutionSection = within(screen.getByTestId("institution-section"))
@@ -114,7 +128,7 @@ describe("<UserAccountView />", () => {
   it("should render links with EditableContent and validation", async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView user={baseUser} />
+        <UserAccountView />
       </MockedProvider>,
     )
     const linksSection = within(screen.getByTestId("links-section"))
@@ -133,7 +147,7 @@ describe("<UserAccountView />", () => {
   it("should show an error message when invalid URL is entered in links section", async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView user={baseUser} />
+        <UserAccountView />
       </MockedProvider>,
     )
     const linksSection = within(screen.getByTestId("links-section"))

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

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react"
 import { MockedProvider } from "@apollo/client/testing"
 import { MemoryRouter, Route, Routes } from "react-router-dom"
 import { UserQuery } from "../user-query"
-import { GET_USER_BY_ORCID } from "../user-query"
+import { GET_USER } from "../../queries/user"
 import * as ProfileUtils from "../../authentication/profile"
 
 Object.defineProperty(ProfileUtils, "getProfile", {
@@ -15,8 +15,8 @@ const validOrcid = "0009-0001-9689-7232"
 
 const userMock = {
   request: {
-    query: GET_USER_BY_ORCID,
-    variables: { userId: validOrcid },
+    query: GET_USER,
+    variables: { userId: "1" },
   },
   result: {
     data: {