@openneuro/app 4.34.2 → 4.35.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.34.2",
+  "version": "4.35.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -69,11 +69,11 @@
     "sass": "^1.32.8",
     "stream-browserify": "^3.0.0",
     "typescript": "5.6.3",
-    "vite": "5.4.18",
+    "vite": "5.4.19",
     "vitest": "2.1.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6420eabb1a1b5068990523eb57991597faffb73e"
+  "gitHead": "aef6b8ec1097cd7cd19ca9de82e17d8dfa87be71"
 }

package/src/scripts/authentication/profile.ts

@@ -2,12 +2,10 @@ import jwtDecode from "jwt-decode"
 
 export interface OpenNeuroTokenProfile {
   sub: string
-  email: string
-  provider: string
-  name: string
   admin: boolean
   iat: number
   exp: number
+  scopes?: string[]
 }
 
 /**
@@ -21,9 +19,9 @@ export const parseJwt = jwtDecode
  */
 export function getProfile(cookies): OpenNeuroTokenProfile {
   const accessToken = cookies["accessToken"]
-  return accessToken ? parseJwt(accessToken) : null
+  if (!accessToken) return null
+  return parseJwt(accessToken) as OpenNeuroTokenProfile
 }
-
 /**
  * Return profile if token is not expired.
  * @param {*} cookies

package/src/scripts/common/containers/header.tsx

@@ -105,9 +105,8 @@ export const HeaderContainer: FC = () => {
           </UploaderContext.Consumer>
         )}
         renderOnFreshDeskWidget={() => <FreshdeskWidget />}
-        renderOnExpanded={(profile) => (
+        renderOnExpanded={() => (
           <LandingExpandedHeader
-            user={profile}
             loginUrls={loginUrls}
             renderAggregateCounts={(modality: string) => (
               <AggregateCountsContainer modality={modality} />

package/src/scripts/common/partials/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,11 +32,14 @@ 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,
   }
+
   return (
     <>
       <script

package/src/scripts/components/header/Header.tsx

@@ -3,16 +3,12 @@ import { NavLink } from "react-router-dom"
 import { Button } from "../button/Button"
 import { Logo } from "../logo/Logo"
 import { Modal } from "../modal/Modal"
-import { UserMenu } from "../user/UserMenu"
+import { UserMenu } from "../../users/user-menu"
+import type { OpenNeuroTokenProfile } from "../../authentication/profile"
 import "./header.scss"
 
 export interface HeaderProps {
-  profile?: {
-    name: string
-    admin: boolean
-    email: string
-    provider: string
-  }
+  profile: OpenNeuroTokenProfile
   expanded?: boolean
   isOpenSupport: boolean
   toggleLoginModal: (
@@ -39,7 +35,6 @@ export const Header = ({
   renderUploader,
 }: HeaderProps) => {
   const [isOpen, setOpen] = React.useState(false)
-
   return (
     <>
       <header>
@@ -109,7 +104,6 @@ export const Header = ({
               ? (
                 <div className="header-account-btn">
                   <UserMenu
-                    profile={profile}
                     signOutAndRedirect={signOutAndRedirect}
                   />
                 </div>
@@ -120,7 +114,7 @@ export const Header = ({
                     navbar
                     onClick={toggleLoginModal}
                     label="Sign in"
-                    size="large"
+                    size="small"
                   />
                 </>
               )}

package/src/scripts/components/header/LandingExpandedHeader.tsx

@@ -6,11 +6,12 @@ import { ModalityCube } from "../modality-cube/ModalityCube"
 import { frontPage } from "../../common/content/front-page-content"
 import { cubeData } from "../../common/content/modality-cube-content"
 import orcidIcon from "../../../assets/orcid_24x24.png"
+import { loginCheck } from "../../authentication/loginCheck"
+import { useCookies } from "react-cookie"
 
 import "./header.scss"
 
 export interface LandingExpandedHeaderProps {
-  user?: object
   loginUrls?: Record<string, string>
   renderAggregateCounts?: (modality?: string) => React.ReactNode
   renderFacetSelect: () => React.ReactNode
@@ -19,7 +20,6 @@ export interface LandingExpandedHeaderProps {
 }
 
 export const LandingExpandedHeader: React.FC<LandingExpandedHeaderProps> = ({
-  user,
   loginUrls,
   renderAggregateCounts,
   renderFacetSelect,
@@ -29,6 +29,7 @@ export const LandingExpandedHeader: React.FC<LandingExpandedHeaderProps> = ({
   const aggregateCounts = (modality: string): React.ReactNode =>
     renderAggregateCounts ? renderAggregateCounts(modality) : null
   const navigate = useNavigate()
+  const [cookies] = useCookies()
   const hexGrid = (
     <ul id="hexGrid">
       {cubeData.map((item, index) => (
@@ -47,6 +48,7 @@ export const LandingExpandedHeader: React.FC<LandingExpandedHeaderProps> = ({
       ))}
     </ul>
   )
+  const isLoggedIn = loginCheck(cookies)
 
   return (
     <div className="expaned-header" style={{ minHeight: "720px" }}>
@@ -72,28 +74,28 @@ export const LandingExpandedHeader: React.FC<LandingExpandedHeaderProps> = ({
               </div>
             </div>
 
-            {!user
+            {!isLoggedIn
               ? (
                 <div className="grid  grid-start hero-signin">
                   <div className=" hero-sigin-label">
                     <h3>SIGN IN</h3>
                   </div>
                   <div>
-                    <a href={loginUrls.google}>
+                    <a href={loginUrls.orcid}>
                       <Button
-                        label="Google"
+                        label="ORCID"
                         color="#fff"
-                        icon="fab fa-google"
+                        imgSrc={orcidIcon}
                         iconSize="23px"
                       />
                     </a>
                   </div>
                   <div>
-                    <a href={loginUrls.orcid}>
+                    <a href={loginUrls.google}>
                       <Button
-                        label="ORCID"
+                        label="Google"
                         color="#fff"
-                        imgSrc={orcidIcon}
+                        icon="fab fa-google"
                         iconSize="23px"
                       />
                     </a>

package/src/scripts/components/header/header.scss

@@ -34,6 +34,8 @@ header {
 }
 
 .navbar-navigation {
+  margin-left: auto;
+  margin-right: 20px;
   @media (max-width: 800px) {
     margin-top: 20px;
     margin-left: auto;
@@ -133,6 +135,7 @@ header {
       right: 8px;
       top: 8px;
     }
+
     &.nav-open {
       .navbar-navigation ul {
         transform: translateY(0);
@@ -200,8 +203,7 @@ header {
     align-items: center;
   }
   > div {
-    flex-basis: 50%;
-    max-width: 50%;
+    flex-basis: 100%;
     margin: 0 10px 0 0;
     &:last-child {
       margin: 0 0 0 10px;

package/src/scripts/components/logo/Logo.tsx

@@ -13,7 +13,7 @@ export interface LogoProps {
 
 export const Logo: React.FC<LogoProps> = ({
   dark = true,
-  width = "300px",
+  width = "225px",
   horizontal = true,
   ...props
 }) => {

package/src/scripts/components/modal/UserLoginModal.tsx

@@ -29,17 +29,6 @@ export const UserLoginModal = ({
           <h2>Sign in</h2>
         </div>
         <div className="sign-in-modal-content">
-          <div>
-            <a href={loginUrls.google + `?redirectPath=${btoa(redirectPath)}`}>
-              <Button
-                className="login-button"
-                primary
-                label="Google"
-                icon="fab fa-google"
-                iconSize="23px"
-              />
-            </a>
-          </div>
           <div>
             <a href={loginUrls.orcid + `?redirectPath=${btoa(redirectPath)}`}>
               <Button
@@ -66,6 +55,18 @@ export const UserLoginModal = ({
                 }
               />
             </AccordionWrap>
+            <div>
+              <a
+                href={loginUrls.google + `?redirectPath=${btoa(redirectPath)}`}
+              >
+                <Button
+                  className="login-button"
+                  label="Migrate Google to ORCID"
+                  icon="fab fa-google"
+                  iconSize="23px"
+                />
+              </a>
+            </div>
           </div>
         </div>
       </Modal>

package/src/scripts/components/modal/__tests__/UserLoginModal.spec.tsx

@@ -31,7 +31,7 @@ describe("UserLoginModal component", () => {
       </MemoryRouter>,
     )
     expect(
-      screen.getByRole("link", { name: /orcid/i }).getAttribute("href"),
+      screen.getByRole("link", { name: "ORCID" }).getAttribute("href"),
     ).toBe("https://openneuro.org/crn/auth/orcid?redirectPath=L2ltcG9ydA==")
   })
 })

package/src/scripts/components/page/Page.tsx

@@ -32,9 +32,8 @@ export const Page = ({ children, headerArgs, className }: PageProps) => {
           navigateToNewSearch={() => console.log("go to /search")}
           renderUploader={() => <li>Upload</li>}
           renderOnFreshDeskWidget={() => <>This is a freshdesk widget</>}
-          renderOnExpanded={(profile) => (
+          renderOnExpanded={() => (
             <LandingExpandedHeader
-              user={profile}
               renderFacetSelect={() => <>front facet example</>}
               renderSearchInput={() => (
                 <Input

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

@@ -3,14 +3,15 @@ import bytes from "bytes"
 import parseISO from "date-fns/parseISO"
 import formatDistanceToNow from "date-fns/formatDistanceToNow"
 import { Link } from "react-router-dom"
-
 import { Tooltip } from "../../components/tooltip/Tooltip"
 import { Icon } from "../../components/icon/Icon"
-
+import { useCookies } from "react-cookie"
+import { getProfile } from "../../authentication/profile"
+import { useUser } from "../../queries/user"
 import "./search-result.scss"
 import activityPulseIcon from "../../../assets/activity-icon.png"
 import { ModalityLabel } from "../../components/formatting/modality-label"
-
+import { hasEditPermissions } from "../../authentication/profile"
 /**
  * Return an equivalent to moment(date).format('L') without moment
  * @param {*} dateObject
@@ -110,20 +111,20 @@ export interface SearchResultItemProps {
       },
     ]
   }
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  profile: Record<string, any> // TODO - Use the actual user type here
   datasetTypeSelected?: string
-  hasEditPermissions: (permissions: object, userId: string) => boolean
 }
 
 export const SearchResultItem = ({
   node,
-  profile,
   datasetTypeSelected,
-  hasEditPermissions,
 }: SearchResultItemProps) => {
-  const isAdmin = profile?.admin
-  const hasEdit = hasEditPermissions(node.permissions, profile?.sub) || isAdmin
+  const { user } = useUser()
+  const [cookies] = useCookies()
+  const profile = getProfile(cookies)
+  const profileSub = profile?.sub
+
+  const isAdmin = user?.admin
+  const hasEdit = hasEditPermissions(node.permissions, profileSub) || isAdmin
 
   const heading = node.latestSnapshot.description?.Name
   const summary = node.latestSnapshot?.summary
@@ -209,7 +210,7 @@ export const SearchResultItem = ({
   const uploader = (
     <div className="uploader">
       <span>Uploaded by:</span>
-      {node.uploader.name} on {dateAdded} - {dateAddedDifference} ago
+      {node.uploader?.name} on {dateAdded} - {dateAddedDifference} ago
     </div>
   )
   const downloads = node.analytics.downloads
@@ -318,11 +319,11 @@ export const SearchResultItem = ({
     // Test if there's any schema validator errors
     invalid = node.latestSnapshot.validation?.errors > 0
   }
-  const shared = !node.public && node.uploader.id !== profile.sub
+  const shared = !node.public && node.uploader?.id !== profileSub
 
   const MyDatasetsPage = datasetTypeSelected === "My Datasets"
   const datasetPerms = node.permissions.userPermissions.map((item) => {
-    if (item.user.id === profile?.sub && item.access !== null) {
+    if (item.user.id === profileSub && item.access !== null) {
       if (item.access === "ro") {
         return "Read Only"
       } else if (item.access === "rw") {

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

@@ -1,32 +1,15 @@
 import React from "react"
-
 import { SearchResultItem } from "./SearchResultItem"
-
 import "./search-page.scss"
 
-// TODO - unify this type with the one in the app package
-export interface OpenNeuroTokenProfile {
-  sub: string
-  email: string
-  provider: string
-  name: string
-  admin: boolean
-  iat: number
-  exp: number
-}
-
 export interface SearchResultsListProps {
   items
-  profile?: OpenNeuroTokenProfile
   datasetTypeSelected: string
-  hasEditPermissions: (permissions: object, userId: string) => boolean
 }
 
 export const SearchResultsList = ({
   items,
-  profile,
   datasetTypeSelected,
-  hasEditPermissions,
 }: SearchResultsListProps) => {
   return (
     <div className="search-results">
@@ -36,8 +19,6 @@ export const SearchResultsList = ({
             <SearchResultItem
               node={data.node}
               key={data.node.id}
-              profile={profile}
-              hasEditPermissions={hasEditPermissions}
               datasetTypeSelected={datasetTypeSelected}
             />
           )

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

@@ -50,7 +50,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
   const activeDataset = snapshotVersion(location) || "draft"
 
   const [selectedVersion, setSelectedVersion] = React.useState(activeDataset)
-
   const summary = dataset.draft.summary
   const description = dataset.draft.description
   const datasetId = dataset.id

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/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/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={