@openneuro/app 4.34.2 → 4.35.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.34.2",
+  "version": "4.35.0-alpha.1",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,7 +19,7 @@
     "@bids/validator": "npm:@jsr/bids__validator@^2.0.3",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@niivue/niivue": "0.45.1",
+    "@niivue/niivue": "0.57.0",
     "@openneuro/components": "^4.33.4",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-table": "^8.9.3",
@@ -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": "ac9c013877e5d9c1fa9615a177f79e0da0747f84"
 }

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/scss/upload-modal.scss

@@ -146,6 +146,12 @@
     &:hover {
       background-color: var(--current-theme-primary-hover);
     }
+    &.disabled {
+      background-color: $rock;
+      &:hover {
+        background-color: $rock;
+      }
+    }
   }
   .fileupload-btn .multifile-select-btn {
     opacity: 0;

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/fragments/__tests__/dataset-history.spec.tsx

@@ -0,0 +1,155 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MockedProvider } from "@apollo/client/testing"
+import { DatasetHistory, GET_HISTORY } from "../dataset-history"
+
+describe("DatasetHistory", () => {
+  it("renders an example history correctly", async () => {
+    const dataset = {
+      id: "ds000001",
+      name: "Test Dataset",
+      created: "2023-01-01T00:00:00.000Z",
+      downloads: 0,
+      views: 0,
+      stars: 0,
+      size: 0,
+      history: [
+        {
+          id: "adbafb8cc26558e1fe2be02fa782bf9f1a6c2556",
+          date: "2023-01-01T00:00:00.000Z",
+          authorName: "Test Author",
+          authorEmail: "test@example.com",
+          references: "",
+          message: "Initial commit",
+        },
+        {
+          id: "adbafb8cc26558e1fe2be02fa782bf9f1a6c0313",
+          date: "2023-01-02T00:00:00.000Z",
+          authorName: "Test Author",
+          authorEmail: "test@example.com",
+          references: "1.0.0",
+          message: "Test snapshot",
+        },
+      ],
+      authors: [],
+      editors: [],
+      public: true,
+      uploader: null,
+      latestSnapshot: null,
+      relatedDatasets: [],
+      mriqcResults: null,
+      tasks: [],
+      modalities: [],
+      datasetSummary: null,
+      datasetDescription: null,
+      readme: null,
+      license: null,
+      funding: null,
+      acknowledgements: null,
+      howToAcknowledge: null,
+      ethicsApprovals: [],
+      publications: [],
+      datasetMetadata: [],
+      changelog: null,
+      issues: [],
+      starred: false,
+      followers: [],
+      hasOpenIssues: false,
+      createdAt: "2023-01-01T00:00:00.000Z",
+      updatedAt: "2023-01-01T00:00:00.000Z",
+      uploaderId: null,
+      orcid: null,
+      userId: null,
+      user: null,
+      isPrivate: false,
+      onboarded: false,
+      worker: 0,
+      __typename: "Dataset",
+    }
+    const mocks = [
+      {
+        request: {
+          query: GET_HISTORY,
+          variables: { datasetId: dataset.id },
+        },
+        result: {
+          data: {
+            dataset,
+          },
+        },
+      },
+    ]
+    await render(
+      <MockedProvider mocks={mocks}>
+        <DatasetHistory datasetId={dataset.id} />
+      </MockedProvider>,
+    )
+    expect(await screen.findByText("Initial commit")).toBeInTheDocument()
+    expect(await screen.findByText("Test snapshot")).toBeInTheDocument()
+  })
+  it("renders correctly when dataset.history is null", async () => {
+    const dataset = {
+      id: "ds000001",
+      name: "Test Dataset",
+      created: "2023-01-01T00:00:00.000Z",
+      downloads: 0,
+      views: 0,
+      stars: 0,
+      size: 0,
+      history: null,
+      authors: [],
+      editors: [],
+      public: true,
+      uploader: null,
+      latestSnapshot: null,
+      relatedDatasets: [],
+      mriqcResults: null,
+      tasks: [],
+      modalities: [],
+      datasetSummary: null,
+      datasetDescription: null,
+      readme: null,
+      license: null,
+      funding: null,
+      acknowledgements: null,
+      howToAcknowledge: null,
+      ethicsApprovals: [],
+      publications: [],
+      datasetMetadata: [],
+      changelog: null,
+      issues: [],
+      starred: false,
+      followers: [],
+      hasOpenIssues: false,
+      createdAt: "2023-01-01T00:00:00.000Z",
+      updatedAt: "2023-01-01T00:00:00.000Z",
+      uploaderId: null,
+      orcid: null,
+      userId: null,
+      user: null,
+      isPrivate: false,
+      onboarded: false,
+      worker: 0,
+      __typename: "Dataset",
+    }
+    const mocks = [
+      {
+        request: {
+          query: GET_HISTORY,
+          variables: { datasetId: dataset.id },
+        },
+        result: {
+          data: {
+            dataset,
+          },
+        },
+      },
+    ]
+    await render(
+      <MockedProvider mocks={mocks}>
+        <DatasetHistory datasetId={dataset.id} />
+      </MockedProvider>,
+    )
+    expect(await screen.findByText("No history available")).toBeInTheDocument()
+  })
+})

package/src/scripts/dataset/fragments/dataset-history.jsx

@@ -2,10 +2,9 @@ import React from "react"
 import PropTypes from "prop-types"
 import styled from "@emotion/styled"
 import { gql, useQuery } from "@apollo/client"
-
 import Revalidate from "../mutations/revalidate.jsx"
 
-const GET_HISTORY = gql`
+export const GET_HISTORY = gql`
   query getHistory($datasetId: ID!) {
     dataset(id: $datasetId) {
       id
@@ -29,16 +28,16 @@ const DatasetHistoryTable = styled.div`
   .row:nth-of-type(2n) {
     padding-top: 1em;
   }
-  .row:nth-of-type(2n + 1) {
+  .row:nth-of-type(2n+1) {
     padding-bottom: 1em;
   }
   .row:nth-of-type(4n),
-  .row:nth-of-type(4n + 1) {
+  .row:nth-of-type(4n+1) {
     background: #f4f4f4;
   }
 `
 
-const DatasetHistory = ({ datasetId }) => {
+export const DatasetHistory = ({ datasetId }) => {
   const { loading, data } = useQuery(GET_HISTORY, {
     variables: { datasetId },
     errorPolicy: "all",
@@ -58,7 +57,7 @@ const DatasetHistory = ({ datasetId }) => {
             <h4 className="col-lg col col-2">References</h4>
             <h4 className="col-lg col col-2 text--right">Action</h4>
           </div>
-          {data.dataset.history.map((commit) => (
+          {data.dataset?.history?.map((commit) => (
             <React.Fragment key={commit.id}>
               <div className="grid faux-table">
                 <div className="commit col-lg col col-2">
@@ -83,7 +82,7 @@ const DatasetHistory = ({ datasetId }) => {
                 <div className="col-lg col col-12">{commit.message}</div>
               </div>
             </React.Fragment>
-          ))}
+          )) || "No history available"}
         </DatasetHistoryTable>
       </div>
     )