@openneuro/app 4.35.0 → 4.36.0

package/src/scripts/queries/users.ts

@@ -0,0 +1,247 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { gql, useQuery } from "@apollo/client"
+import * as Sentry from "@sentry/react"
+import type { User } from "../types/user-types"
+
+// --- Fragments ---
+export const USER_FRAGMENT = gql`
+  fragment userFields on User {
+    id
+    name
+    admin
+    blocked
+    email
+    provider
+    lastSeen
+    created
+    avatar
+    github
+    institution
+    location
+    modified
+    orcid
+  }
+`
+
+// --- GET_USERS QUERY ---
+export const GET_USERS = gql`
+  query GetUsers(
+    $orderBy: [UserSortInput!]
+    $isAdmin: Boolean
+    $isBlocked: Boolean
+    $search: String
+    $limit: Int
+    $offset: Int
+  ) {
+    users(
+      orderBy: $orderBy
+      isAdmin: $isAdmin
+      isBlocked: $isBlocked
+      search: $search
+      limit: $limit
+      offset: $offset
+    ) {
+      users {
+        ...userFields
+      }
+      totalCount
+    }
+  }
+  ${USER_FRAGMENT}
+`
+
+export const SET_ADMIN_MUTATION = gql`
+  mutation SetAdmin($id: ID!, $admin: Boolean!) {
+    setAdmin(id: $id, admin: $admin) {
+      ...userFields
+    }
+  }
+  ${USER_FRAGMENT}
+`
+
+export const SET_BLOCKED_MUTATION = gql`
+  mutation SetBlocked($id: ID!, $blocked: Boolean!) {
+    setBlocked(id: $id, blocked: $blocked) {
+      ...userFields
+    }
+  }
+  ${USER_FRAGMENT}
+`
+
+// --- INTERFACES ---
+export interface GetUsersQueryResult {
+  users?: {
+    users: User[]
+    totalCount: number
+  }
+}
+
+export interface GetUsersQueryVariables {
+  orderBy?: { field: string; order: "ascending" | "descending" }[]
+  isAdmin?: boolean
+  isBlocked?: boolean
+  search?: string
+  limit?: number
+  offset?: number
+}
+
+export interface UseUsersOptions {
+  orderBy?: { field: string | null; order: "ascending" | "descending" }
+  isAdmin?: boolean | null
+  isBlocked?: boolean | null
+  search?: string | undefined
+  initialLimit?: number
+}
+
+// --- useUsers HOOK ---
+export const useUsers = (options: UseUsersOptions = {}) => {
+  const [currentLimit] = useState(options.initialLimit || 100)
+  const [offset, setOffset] = useState(0)
+
+  const filterSortSearchVariables = useRef({
+    orderBy: options.orderBy?.field
+      ? [{ field: options.orderBy.field, order: options.orderBy.order }]
+      : undefined,
+    search: options.search,
+    isAdmin: typeof options.isAdmin === "boolean" ? options.isAdmin : undefined,
+    isBlocked: typeof options.isBlocked === "boolean"
+      ? options.isBlocked
+      : undefined,
+  })
+
+  // Effect to update the ref when options change and reset offset
+  useEffect(() => {
+    filterSortSearchVariables.current = {
+      orderBy: options.orderBy?.field
+        ? [{ field: options.orderBy.field, order: options.orderBy.order }]
+        : undefined,
+      search: options.search,
+      isAdmin: typeof options.isAdmin === "boolean"
+        ? options.isAdmin
+        : undefined,
+      isBlocked: typeof options.isBlocked === "boolean"
+        ? options.isBlocked
+        : undefined,
+    }
+    // When filters/sort/search change, reset the offset to 0 to start a new list
+    setOffset(0)
+  }, [options.orderBy, options.search, options.isAdmin, options.isBlocked])
+
+  const { data, loading, error, fetchMore, refetch } = useQuery<
+    GetUsersQueryResult
+  >(GET_USERS, {
+    variables: {
+      ...filterSortSearchVariables.current,
+      limit: currentLimit,
+      offset: offset,
+    },
+    notifyOnNetworkStatusChange: true,
+    fetchPolicy: "cache-and-network",
+  })
+
+  const [allUsers, setAllUsers] = useState<User[]>([])
+
+  useEffect(() => {
+    if (data?.users?.users) {
+      if (offset === 0) {
+        setAllUsers(data.users.users)
+      } else {
+        setAllUsers((prevUsers) => {
+          const newUsers = data.users!.users
+          const uniqueNewUsers = newUsers.filter(
+            (newUser) =>
+              !prevUsers.some((existingUser) => existingUser.id === newUser.id),
+          )
+          return [...prevUsers, ...uniqueNewUsers]
+        })
+      }
+    }
+  }, [data?.users?.users, offset])
+
+  const totalCount = data?.users?.totalCount || 0
+  const hasMore = totalCount > allUsers.length || loading
+
+  const loadMore = useCallback(() => {
+    if (hasMore && !loading) {
+      const newOffset = allUsers.length
+      fetchMore({
+        variables: {
+          ...filterSortSearchVariables.current,
+          offset: newOffset,
+          limit: currentLimit,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev
+
+          const incomingUsers = fetchMoreResult.users.users
+          const currentUsers = prev.users?.users || []
+
+          const combinedUsers = currentUsers.concat(
+            incomingUsers.filter(
+              (newUser) =>
+                !currentUsers.some(
+                  (existingUser) => existingUser.id === newUser.id,
+                ),
+            ),
+          )
+
+          return {
+            users: {
+              ...prev.users,
+              users: combinedUsers,
+              totalCount: fetchMoreResult.users.totalCount,
+            },
+          }
+        },
+      })
+    }
+  }, [
+    allUsers.length,
+    hasMore,
+    loading,
+    fetchMore,
+    currentLimit,
+    filterSortSearchVariables,
+  ])
+
+  const refetchFullList = useCallback(
+    async (variablesToRefetch?: GetUsersQueryVariables) => {
+      setOffset(0)
+      await refetch({
+        ...filterSortSearchVariables.current,
+        ...variablesToRefetch,
+        offset: 0,
+        limit: currentLimit,
+      })
+    },
+    [refetch, filterSortSearchVariables, currentLimit],
+  )
+
+  const refetchCurrentPage = useCallback(async () => {
+    await refetch({
+      ...filterSortSearchVariables.current,
+      offset: 0,
+      limit: allUsers.length > 0 ? allUsers.length : currentLimit,
+    })
+  }, [refetch, filterSortSearchVariables, allUsers.length, currentLimit])
+
+  useEffect(() => {
+    if (error) {
+      Sentry.captureException(error)
+    }
+  }, [error])
+
+  return {
+    users: allUsers,
+    loading,
+    error,
+    refetchFullList,
+    refetchCurrentPage,
+    loadMore,
+    hasMore,
+    totalCount,
+    currentLimit,
+    currentOffset: allUsers.length,
+    filterSortSearchVariables: filterSortSearchVariables.current,
+  }
+}

package/src/scripts/routes.tsx

@@ -4,7 +4,7 @@ import { Navigate, Route, Routes } from "react-router-dom"
 // TODO - Re-enable code splitting these when we can
 import DatasetQuery from "./dataset/dataset-query"
 //import PreRefactorDatasetProps from './dataset/dataset-pre-refactor-container'
-
+import { isAdmin } from "./authentication/admin-user.jsx"
 import FaqPage from "./pages/faq/faq"
 import FrontPageContainer from "./pages/front-page/front-page"
 import Admin from "./pages/admin/admin"
@@ -19,10 +19,8 @@ import { DatasetMetadata } from "./pages/metadata/dataset-metadata"
 import { TermsPage } from "./pages/terms"
 import { ImageAttribution } from "./pages/image-attribution"
 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"
+import FourOThreePage from "./errors/403page"
 
 const AppRoutes: React.VoidFunctionComponent = () => (
   <Routes>
@@ -31,7 +29,10 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/keygen" element={<APIKey />} />
     <Route path="/datasets/:datasetId/*" element={<DatasetQuery />} />
     <Route path="/search/*" element={<SearchRoutes />} />
-    <Route path="/admin/*" element={<Admin />} />
+    <Route
+      path="/admin/*"
+      element={isAdmin() ? <Admin /> : <FourOThreePage />}
+    />
     <Route path="/error/*" element={<ErrorRoute />} />
     <Route path="/pet" element={<PETRedirect />} />
     <Route path="/cite" element={<Citation />} />
@@ -43,16 +44,7 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/orcid-link" element={<OrcidLinkPage />} />
     <Route
       path="/user/:orcid/*"
-      element={
-        <>
-          <LoggedIn>
-            <UserQuery />
-          </LoggedIn>
-          <LoggedOut>
-            <FourOThreePage />
-          </LoggedOut>
-        </>
-      }
+      element={<UserQuery />}
     />
     <Route
       path="/saved"

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

@@ -8,27 +8,26 @@ export interface User {
   avatar?: string
   orcid?: string
   links?: string[]
+  admin?: boolean
+  blocked?: boolean
+  lastSeen?: string
+  created?: string
+  provider?: string
+  modified?: string
+  githubSynced?: Date
 }
 
 export interface UserRoutesProps {
-  user: User
+  orcidUser: User
   hasEdit: boolean
   isUser: boolean
 }
 export interface UserCardProps {
-  user: User
+  orcidUser: User
 }
 
 export interface UserAccountViewProps {
-  user: {
-    name: string
-    email: string
-    orcid?: string
-    links?: string[]
-    location?: string
-    institution?: string
-    github?: string
-  }
+  orcidUser: User
 }
 
 export interface Dataset {
@@ -63,12 +62,12 @@ export interface DatasetCardProps {
 }
 
 export interface UserDatasetsViewProps {
-  user: User
+  orcidUser: User
   hasEdit: boolean
 }
 
 export interface AccountContainerProps {
-  user: User
+  orcidUser: User
   hasEdit: boolean
   isUser: boolean
 }

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

@@ -1,73 +1,58 @@
-// dependencies -------------------------------------------------------
-
 import React from "react"
-import PropTypes from "prop-types"
 
-type UploadProps = {
+type UploadFileSelectProps = {
   resume?: boolean
   onClick?: React.MouseEventHandler<HTMLButtonElement>
-  onChange?: (e?: { files: File[] }) => void
+  onChange: (e?: { files: File[] }) => void
   disabled?: boolean
 }
 
-class Upload extends React.Component<UploadProps> {
-  public static propTypes = {}
-  // life cycle events --------------------------------------------------
-  render(): React.ReactNode {
-    const resumeIcon = (
-      <span>
-        <i className="fa fa-repeat" />
-        &nbsp;
-      </span>
-    )
-    const icon = this.props.resume ? resumeIcon : null
-    const text = this.props.resume ? "Resume" : "Select folder"
-
-    return (
-      <div
-        className={"fileupload-btn" + (this.props.disabled ? " disabled" : "")}
-      >
-        <span>
-          {icon}
-          {text}
-        </span>
-        <input
-          type="file"
-          id="multifile-select"
-          className="multifile-select-btn"
-          onClick={this._click.bind(this)}
-          onChange={this._onFileSelect.bind(this)}
-          webkitdirectory="true"
-          directory="true"
-          disabled={this.props.disabled}
-        />
-      </div>
-    )
-  }
-
-  // custom methods -----------------------------------------------------
-
-  _click(e): void {
+export const UploadFileSelect: React.FC<UploadFileSelectProps> = (
+  { resume, onClick, onChange, disabled },
+) => {
+  const handleClick = (e: React.MouseEvent<HTMLInputElement>): void => {
     e.stopPropagation()
-    e.target.value = null
-    if (this.props.onClick) {
-      this.props.onClick(e)
+    // Reset the input value to allow selecting the same file/folder again
+    if (e.target instanceof HTMLInputElement) {
+      e.target.value = ""
     }
+    if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>)
   }
 
-  _onFileSelect(e): void {
-    if (e.target && e.target.files.length > 0) {
-      const files = e.target.files
-      this.props.onChange({ files })
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    if (e.target && e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files)
+      onChange({ files })
     }
   }
-}
 
-Upload.propTypes = {
-  resume: PropTypes.bool,
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
+  const resumeIcon = (
+    <span>
+      <i className="fa fa-repeat" />
+      &nbsp;
+    </span>
+  )
+  const icon = resume ? resumeIcon : null
+  const text = resume ? "Resume" : "Select folder"
+
+  return (
+    <div className={`fileupload-btn${disabled ? " disabled" : ""}`}>
+      <span>
+        {icon}
+        {text}
+      </span>
+      <input
+        type="file"
+        id="multifile-select"
+        className="multifile-select-btn"
+        onClick={handleClick}
+        onChange={handleFileSelect}
+        webkitdirectory="true"
+        directory="true"
+        disabled={disabled}
+      />
+    </div>
+  )
 }
 
-export default Upload
+export default UploadFileSelect

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

@@ -6,7 +6,7 @@ import { useUser } from "../queries/user"
 const UploadSelect = () => {
   const { user, loading, error } = useUser()
   const disabled = loading || Boolean(error) || !user || !user.email
-  const noEmail = !user.email
+  const noEmail = !(user?.email)
   return (
     <div>
       <UploaderContext.Consumer>

package/src/scripts/users/__tests__/dataset-card.spec.tsx

@@ -0,0 +1,127 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import DatasetCard from "../dataset-card"
+
+const mockDataset = {
+  id: "ds000001",
+  name: "Test Dataset",
+  created: "2025-01-01T00:00:00Z",
+  public: true,
+  analytics: {
+    downloads: 12345,
+    views: 67890,
+  },
+  followers: [
+    { userId: "user1", datasetId: "ds000001" },
+    { userId: "user2", datasetId: "ds000001" },
+  ],
+  stars: [
+    { userId: "user1", datasetId: "ds000001" },
+  ],
+  latestSnapshot: {
+    id: "ds000001:1.0.0",
+    size: 1024 ** 3,
+    issues: [{ severity: "low" }],
+    created: "2025-01-01T00:00:00Z",
+    description: {
+      Name: "Test Dataset Description",
+      Authors: ["John Doe"],
+      SeniorAuthor: "Dr. Smith",
+      DatasetType: "fMRI",
+    },
+    summary: {
+      modalities: ["fMRI"],
+      secondaryModalities: [],
+      sessions: 1,
+      subjects: 1,
+      subjectMetadata: [],
+      tasks: ["rest"],
+      size: 1024 ** 3,
+      totalFiles: 10,
+      dataProcessed: true,
+      pet: null,
+    },
+    validation: {
+      errors: [],
+      warnings: [],
+    },
+  },
+  uploader: {
+    id: "uploaderId123",
+    name: "Uploader Name",
+    orcid: "1234-5678-9012-3456",
+  },
+  permissions: {
+    id: "somePermId",
+    userPermissions: [
+      {
+        userId: "someUserId",
+        level: "admin",
+        access: "admin",
+        user: {
+          id: "someUser",
+          name: "Some User",
+          email: "some@user.com",
+          provider: "github",
+        },
+      },
+    ],
+  },
+  metadata: { ages: [20] },
+  snapshots: [
+    {
+      id: "ds000001:1.0.0",
+      created: "2025-01-01T00:00:00Z",
+      tag: "1.0.0",
+    },
+  ],
+}
+
+describe("DatasetCard", () => {
+  it("should render dataset information correctly", () => {
+    render(<DatasetCard dataset={mockDataset} hasEdit={false} />)
+    expect(screen.getByText("Test Dataset")).toBeInTheDocument()
+    expect(screen.getByText("ds000001")).toBeInTheDocument()
+  })
+
+  it("should hide the dataset if not public and hasEdit is false", () => {
+    const privateDataset = { ...mockDataset, public: false }
+    const { container } = render(
+      <DatasetCard dataset={privateDataset} hasEdit={false} />,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it("should show the dataset if not public but hasEdit is true", () => {
+    const privateDataset = { ...mockDataset, public: false }
+    render(<DatasetCard dataset={privateDataset} hasEdit={true} />)
+    expect(screen.getByText("Test Dataset")).toBeInTheDocument()
+  })
+
+  it("should render activity details correctly", () => {
+    render(<DatasetCard dataset={mockDataset} hasEdit={false} />)
+    expect(screen.getByRole("img", { name: /activity/i })).toBeInTheDocument()
+  })
+
+  it("should render public icon if dataset is public", () => {
+    render(<DatasetCard dataset={mockDataset} hasEdit={false} />)
+    expect(screen.getByLabelText("Public")).toBeInTheDocument()
+  })
+
+  it("should not render public icon if dataset is not public", () => {
+    const privateDataset = { ...mockDataset, public: false }
+    render(<DatasetCard dataset={privateDataset} hasEdit={true} />)
+    expect(screen.queryByLabelText("Public")).not.toBeInTheDocument()
+  })
+
+  it("should display 'Unknown size' if latestSnapshot or size is missing", () => {
+    const datasetWithoutSize = {
+      ...mockDataset,
+      latestSnapshot: { ...mockDataset.latestSnapshot, size: undefined },
+    }
+    render(<DatasetCard dataset={datasetWithoutSize} hasEdit={false} />)
+    expect(screen.getByText("Dataset Size:")).toHaveTextContent(
+      "Dataset Size: Unknown size",
+    )
+  })
+})