@openneuro/app 4.35.0 → 4.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.35.0",
+  "version": "4.36.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -14,7 +14,7 @@
   },
   "author": "Squishymedia",
   "dependencies": {
-    "@apollo/client": "3.11.8",
+    "@apollo/client": "3.13.8",
     "@artsy/fresnel": "^1.3.1",
     "@bids/validator": "npm:@jsr/bids__validator@^2.0.3",
     "@emotion/react": "11.11.1",
@@ -75,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ce3f98fbbe9da0c9463dcae9fe6357c1000d0fa5"
+  "gitHead": "ac7fa1782779cfdf1f46c9a5add8865155177b99"
 }

package/src/client.jsx

@@ -30,6 +30,7 @@ const client = new ApolloClient({
       },
     },
   }),
+  connectToDevTools: config.sentry.environment !== "production",
 })
 
 container.render(

package/src/scripts/components/button/button.scss

@@ -138,3 +138,17 @@
     }
   }
 }
+
+.load-more {
+  .on-button {
+    display: block;
+    border: 1px solid;
+    width: 100%;
+    background-color: #fff;
+    transition: background-color 0.3s;
+    &:hover {
+      text-decoration: none;
+      background-color: $newspaper;
+    }
+  }
+}

package/src/scripts/components/page/page.scss

@@ -27,7 +27,7 @@
 // admin page
 .admin.route-wrapper {
   margin: 20px auto;
-  max-width: 1000px;
+  max-width: 1500px;
   width: 90%;
   .nav-pills.tabs {
     display: flex;
@@ -39,80 +39,12 @@
       display: block;
     }
   }
-  input {
-    display: inline-block;
-    appearance: none;
-    box-sizing: border-box;
-    border-radius: 0;
-    border: 0.1rem solid #dfdfdf;
-    padding: 10px 12px;
-    max-width: 100%;
-    line-height: 12px;
-  }
+
   .header-wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-
-  .filters {
-    button {
-      margin: 0 10px;
-    }
-  }
-  .users-panel-wrap {
-    .user-panel {
-      display: flex;
-      justify-content: space-between;
-      margin: 20px 0;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      padding: 10px;
-      > .user-col {
-        flex: auto;
-        label {
-          display: block;
-          font-weight: 600;
-          font-size: 14px;
-        }
-      }
-      .user-panel-inner {
-        display: flex;
-        justify-content: space-between;
-        > .user-col {
-          flex: 1;
-        }
-      }
-      .uc-summary .summary-data,
-      .uc-provider {
-        font-size: 12px;
-        margin: 0 0 10px;
-      }
-      .uc-name {
-        font-size: 20px;
-        display: flex;
-        align-items: flex-start;
-        .badge {
-          font-size: 12px;
-          color: #fff;
-          background: red;
-          display: inline-block;
-          padding: 5px;
-          border-radius: 4px;
-          font-weight: bold;
-        }
-        .dataset-tools-wrap-admin .tools {
-          display: flex;
-          button {
-            background-color: transparent;
-            border: 0;
-            outline: 0;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
 }
 
 //api page

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

@@ -127,6 +127,8 @@ export const SearchResultItem = ({
   const hasEdit = hasEditPermissions(node.permissions, profileSub) || isAdmin
 
   const heading = node.latestSnapshot.description?.Name
+    ? node.latestSnapshot.description?.Name
+    : node.id
   const summary = node.latestSnapshot?.summary
   const datasetId = node.id
   const numSessions = summary?.sessions.length > 0 ? summary.sessions.length : 1
@@ -134,7 +136,7 @@ export const SearchResultItem = ({
   const accessionNumber = (
     <span className="result-summary-meta">
       <strong>Openneuro Accession Number:</strong>
-      <span>{node.id}</span>
+      <Link to={"/datasets/" + datasetId}>{node.id}</Link>
     </span>
   )
   const sessions = (

package/src/scripts/components/search-page/search-page.scss

@@ -302,19 +302,7 @@
       border-bottom: 1px solid $newspaper;
     }
   }
-  .load-more {
-    .on-button {
-      display: block;
-      border: 1px solid;
-      width: 100%;
-      background-color: #fff;
-      transition: background-color 0.3s;
-      &:hover {
-        text-decoration: none;
-        background-color: $newspaper;
-      }
-    }
-  }
+
 }
 
 .search-sort {

package/src/scripts/config.ts

@@ -15,6 +15,9 @@ export interface OpenNeuroConfig {
       clientID: string
       ORCID_API_ENDPOINT: string
     }
+    github?: {
+      clientID: string
+    }
     globus?: {
       clientID: string
     }
@@ -48,6 +51,9 @@ export const config: OpenNeuroConfig = {
       clientID: globalThis.OpenNeuroConfig.ORCID_CLIENT_ID,
       ORCID_API_ENDPOINT: globalThis.OpenNeuroConfig.ORCID_API_ENDPOINT,
     },
+    github: {
+      clientID: globalThis.OpenNeuroConfig.GITHUB_CLIENT_ID,
+    },
   },
   analytics: {
     trackingIds: globalThis.OpenNeuroConfig.GOOGLE_TRACKING_IDS.split(",").map(

package/src/scripts/dataset/files/__tests__/__snapshots__/file.spec.jsx.snap

@@ -29,7 +29,7 @@ exports[`File component > renders for dataset snapshots 1`] = `
         >
           <a
             aria-label="download file"
-            download=""
+            download="README"
             href="/crn/datasets/ds001/snapshots/1.0.0/files/README"
           >
             <i
@@ -90,7 +90,7 @@ exports[`File component > renders with common props 1`] = `
         >
           <a
             aria-label="download file"
-            download=""
+            download="README"
             href="/crn/datasets/ds001/files/README"
           >
             <i

package/src/scripts/dataset/files/file.tsx

@@ -149,7 +149,7 @@ const File = ({
                 <a
                   href={urls?.[0] ||
                     apiPath(datasetId, snapshotTag, filePath(path, filename))}
-                  download
+                  download={filename}
                   aria-label="download file"
                 >
                   <i className="fa fa-download" />
@@ -170,7 +170,7 @@ const File = ({
         {editMode && (
           <Media greaterThanOrEqual="medium">
             <Tooltip tooltip="Update">
-              <UpdateFile datasetId={datasetId} path={path}>
+              <UpdateFile datasetId={datasetId} path={path} filename={filename}>
                 <i className="fa fa-cloud-upload" />
               </UpdateFile>
             </Tooltip>

package/src/scripts/dataset/mutations/__tests__/update-file.spec.tsx

@@ -0,0 +1,126 @@
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { vi } from "vitest"
+import UpdateFile from "../update-file"
+import UploaderContext from "../../../uploader/uploader-context.js"
+
+describe("UpdateFile Component", () => {
+  const mockResumeDataset = vi.fn()
+  const mockUploader = {
+    resumeDataset: vi.fn(() => mockResumeDataset),
+  }
+
+  const datasetId = "ds000001"
+  const path = "sub-01/anat"
+
+  const renderComponent = (props = {}, uploader = mockUploader) => {
+    return render(
+      <UploaderContext.Provider value={uploader}>
+        <UpdateFile datasetId={datasetId} path={path} {...props}>
+          <button>Upload Button</button>
+        </UpdateFile>
+      </UploaderContext.Provider>,
+    )
+  }
+
+  it("renders children correctly", () => {
+    renderComponent()
+    expect(screen.getByText("Upload Button")).toBeInTheDocument()
+  })
+
+  it("sets webkitdirectory attribute when directory prop is true", () => {
+    renderComponent({ directory: true })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling // The input is before the children
+    expect(inputElement).toHaveAttribute("webkitdirectory", "true")
+  })
+
+  it("does not set webkitdirectory attribute when directory prop is false", () => {
+    renderComponent({ directory: false })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling
+    expect(inputElement).not.toHaveAttribute("webkitdirectory")
+  })
+
+  it("sets multiple attribute when multiple prop is true", () => {
+    renderComponent({ multiple: true })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling
+    expect(inputElement).toHaveAttribute("multiple")
+  })
+
+  it("does not set multiple attribute when multiple prop is false", () => {
+    renderComponent({ multiple: false })
+    const inputElement = screen.getByRole("button", { name: "Upload Button" })
+      .previousSibling
+    expect(inputElement).not.toHaveAttribute("multiple")
+  })
+
+  describe("onChange event", () => {
+    const file1 = new File(["content1"], "original1.txt", {
+      type: "text/plain",
+    })
+    const file2 = new File(["content2"], "original2.txt", {
+      type: "text/plain",
+    })
+
+    it("calls uploader.resumeDataset with renamed file when filename is provided and one file is selected", () => {
+      const customFilename = "new_filename.txt"
+      renderComponent({ filename: customFilename })
+      const inputElement = screen.getByRole("button", { name: "Upload Button" })
+        .previousSibling
+
+      fireEvent.change(inputElement, {
+        target: { files: [file1] },
+      })
+
+      expect(mockUploader.resumeDataset).toHaveBeenCalledWith(
+        datasetId,
+        path,
+        false,
+      )
+      expect(mockResumeDataset).toHaveBeenCalledTimes(1)
+      const calledWithArgs = mockResumeDataset.mock.calls[0][0]
+      expect(calledWithArgs.files).toHaveLength(1)
+      expect(calledWithArgs.files[0].name).toBe(customFilename)
+      expect(calledWithArgs.files[0].type).toBe(file1.type)
+    })
+
+    it("calls uploader.resumeDataset with original files when filename is not provided", () => {
+      renderComponent()
+      const inputElement = screen.getByRole("button", { name: "Upload Button" })
+        .previousSibling
+
+      fireEvent.change(inputElement, {
+        target: { files: [file1, file2] },
+      })
+
+      expect(mockUploader.resumeDataset).toHaveBeenCalledWith(
+        datasetId,
+        path,
+        false,
+      )
+      expect(mockResumeDataset).toHaveBeenCalledTimes(1)
+      expect(mockResumeDataset).toHaveBeenCalledWith({ files: [file1, file2] })
+    })
+
+    it("calls uploader.resumeDataset with original files when multiple files are selected, even if filename is provided", () => {
+      const customFilename = "new_filename.txt"
+      renderComponent({ filename: customFilename, multiple: true })
+      const inputElement = screen.getByRole("button", { name: "Upload Button" })
+        .previousSibling
+
+      fireEvent.change(inputElement, {
+        target: { files: [file1, file2] },
+      })
+
+      expect(mockUploader.resumeDataset).toHaveBeenCalledWith(
+        datasetId,
+        path,
+        false,
+      )
+      expect(mockResumeDataset).toHaveBeenCalledTimes(1)
+      expect(mockResumeDataset).toHaveBeenCalledWith({ files: [file1, file2] })
+    })
+  })
+})

package/src/scripts/dataset/mutations/update-file.jsx

@@ -7,6 +7,7 @@ const UpdateFile = ({
   directory = false,
   multiple = false,
   path = null,
+  filename = null,
   children,
 }) => {
   return (
@@ -18,11 +19,25 @@ const UpdateFile = ({
             className="update-file"
             onChange={(e) => {
               e.preventDefault()
-              uploader.resumeDataset(
-                datasetId,
-                path,
-                false,
-              )({ files: e.target.files })
+              if (filename && e.target.files.length === 1) {
+                // In the case that a single file was selected,
+                // name that file based on the original path and not the client side name.
+                const target = e.target.files[0]
+                const files = [
+                  new File([target], filename, { type: target.type }),
+                ]
+                uploader.resumeDataset(
+                  datasetId,
+                  path,
+                  false,
+                )({ files })
+              } else {
+                uploader.resumeDataset(
+                  datasetId,
+                  path,
+                  false,
+                )({ files: e.target.files })
+              }
             }}
             webkitdirectory={directory ? "true" : undefined}
             multiple={multiple && true}

package/src/scripts/dataset/routes/snapshot.tsx

@@ -18,7 +18,7 @@ const FormRow = styled.div`
 export const NoErrors = ({ validation, authors, children }) => {
   const noErrors = validation?.errors === 0
   // zero authors will cause DOI minting to fail
-  const hasAuthor = authors.length > 0
+  const hasAuthor = authors?.length > 0
   if (noErrors && hasAuthor) {
     return children
   } else {

package/src/scripts/errors/errorRoute.tsx

@@ -6,12 +6,14 @@ 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"
+import FourOThreePage from "./403page.js"
 
 function ErrorRoute() {
   return (
     <div className="container errors">
       <div className="panel">
         <Routes>
+          <Route path="github" element={<FourOThreePage />} />
           <Route path="orcid" element={<OrcidGeneral />} />
           <Route path="email-warning" element={<OrcidEmailWarning />} />
           <Route path="*" element={<FourOFourPage />} />

package/src/scripts/pages/admin/__tests__/users.spec.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import { fireEvent, render, screen } from "@testing-library/react"
 import { MockedProvider } from "@apollo/client/testing"
-import { GET_USERS, UsersQuery } from "../users"
 import { vi } from "vitest"
+import { UserQuery } from "../../../users/user-query"
+import { GET_USERS } from "../../../queries/users"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
 
 // Mock admin login
 vi.mock("../../../authentication/profile", (_importOriginal) => {
@@ -16,6 +18,21 @@ vi.mock("../../../authentication/profile", (_importOriginal) => {
   }
 })
 
+// MOCK THE USERQUERY COMPONENT
+
+vi.mock("../../../users/user-query", () => {
+  return {
+    UserQuery: vi.fn(() => (
+      <div data-testid="mock-user-query-admin-view">
+        <h3>Current Users (Mocked UserQuery)</h3>
+        <input type="text" placeholder="Search Name or Email" />
+        <div data-testid="user-list-container">
+        </div>
+      </div>
+    )),
+  }
+})
+
 const users = [
   {
     __typename: "User",
@@ -31,6 +48,10 @@ const users = [
 ]
 
 describe("Users", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it("renders users", async () => {
     const mocks = [
       {
@@ -44,25 +65,33 @@ describe("Users", () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <UsersQuery />
+        <MemoryRouter initialEntries={["/admin/users"]}>
+          <Routes>
+            <Route path="/admin/users" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
       </MockedProvider>,
     )
 
-    expect(await screen.findByText("Current Users")).toBeInTheDocument()
-    expect(await screen.findByText(users[0].name)).toBeInTheDocument()
+    expect(await screen.findByText("Current Users (Mocked UserQuery)"))
+      .toBeInTheDocument()
   })
+
   it("handles filtering users with no email", async () => {
-    const emailLessUsers = [...users, {
-      __typename: "User",
-      id: "db3e7a0b-950b-4951-9059-c003ca3c1669",
-      name: "New User",
-      admin: false,
-      email: null,
-      blocked: false,
-      provider: "orcid",
-      lastSeen: "2019-09-24T19:26:07.704Z",
-      created: "2013-09-24T19:26:07.704Z",
-    }]
+    const emailLessUsers = [
+      ...users,
+      {
+        __typename: "User",
+        id: "db3e7a0b-950b-4951-9059-c003ca3c1669",
+        name: "New User",
+        admin: false,
+        email: null,
+        blocked: false,
+        provider: "orcid",
+        lastSeen: "2019-09-24T19:26:07.704Z",
+        created: "2013-09-24T19:26:07.704Z",
+      },
+    ]
     const mocks = [
       {
         delay: 30,
@@ -75,7 +104,11 @@ describe("Users", () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <UsersQuery />
+        <MemoryRouter initialEntries={["/admin/users"]}>
+          <Routes>
+            <Route path="/admin/users" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
       </MockedProvider>,
     )
 
@@ -83,7 +116,7 @@ describe("Users", () => {
     fireEvent.change(input, { target: { value: "test" } })
     fireEvent.keyDown(input, { key: "a" })
 
-    expect(await screen.findByText("Current Users")).toBeInTheDocument()
-    expect(await screen.findByText(users[0].name)).toBeInTheDocument()
+    expect(await screen.findByText("Current Users (Mocked UserQuery)"))
+      .toBeInTheDocument()
   })
 })

package/src/scripts/pages/admin/admin.jsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { Navigate, NavLink, Route, Routes } from "react-router-dom"
-import Users from "./users"
+import { UsersPage } from "./users"
 import FlaggedFiles from "./flagged-files.jsx"
 import AdminUser from "../../authentication/admin-user.jsx"
 
@@ -28,7 +28,7 @@ class Dashboard extends React.Component {
                 </li>
               </ul>
               <Routes>
-                <Route path="/users" element={<Users />} />
+                <Route path="/users" element={<UsersPage />} />
                 <Route path="/flagged-files" element={<FlaggedFiles />} />
                 <Route
                   path="/"

package/src/scripts/pages/admin/user-fragment.ts

@@ -4,11 +4,18 @@ export const USER_FRAGMENT = gql`
   fragment userFields on User {
     id
     name
+    admin
+    blocked
     email
     provider
-    admin
-    created
     lastSeen
-    blocked
+    created
+    avatar
+    github
+    institution
+    location
+    modified
+    orcid
+  
   }
 `

package/src/scripts/pages/admin/user-summary.tsx

@@ -0,0 +1,100 @@
+import React from "react"
+import parseISO from "date-fns/parseISO"
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
+import { formatDate } from "../../utils/date.js"
+import type { User } from "../../types/user-types"
+import styles from "./users.module.scss"
+import { Tooltip } from "../../components/tooltip/Tooltip"
+import { UserTools } from "./user-tools.js"
+
+interface UserSummaryProps {
+  user: User
+  refetchCurrentPage: () => void
+}
+
+const UserSummary = ({ user, refetchCurrentPage }: UserSummaryProps) => {
+  const adminBadge = user.admin
+    ? (
+      <Tooltip tooltip="Admin">
+        <span className={`${styles.badge} ${styles.admin}`}>
+          <i className="fa fa-star"></i>
+        </span>
+      </Tooltip>
+    )
+    : null
+  const blockedBadge = user.blocked
+    ? (
+      <Tooltip tooltip="Blocked">
+        <span className={`${styles.badge} ${styles.blocked}`}>
+          <i className="fa fa-lock"></i>
+        </span>
+      </Tooltip>
+    )
+    : (
+      <Tooltip tooltip="Active">
+        <span className={`${styles.badge}`}>
+          <i className="fa fa-lock-open"></i>
+        </span>
+      </Tooltip>
+    )
+  const userEmail = <a href={`mailto:${user.email}`}>{user.email}</a>
+  const userOrcid = <a href={`/user/${user.orcid}`}>{user.orcid}</a>
+  return (
+    <div className={styles.gridRow}>
+      <div className={`${styles.gtCell} ${styles.colLarge}`}>
+        <h3>
+          {user.name}
+          {adminBadge && adminBadge}
+          {blockedBadge}
+          <br />
+        </h3>
+      </div>
+
+      <div className={`${styles.gtCell} ${styles.colXLarge}`}>
+        <div>{user.email && userEmail}</div>
+        {user.orcid && userOrcid}
+        <span>
+          Provider:{" "}
+          <b style={{ textTransform: "uppercase" }}>{user.provider}</b>
+        </span>
+      </div>
+      <div className={`${styles.gtCell} ${styles.colSmall}`}>
+        <>
+          <div>
+            <b>{formatDate(user.created)}</b>
+          </div>
+          Created
+        </>
+      </div>
+      <div className={`${styles.gtCell} ${styles.colSmall}`}>
+        {user.lastSeen !== null && (
+          <>
+            <div>
+              <b>{formatDistanceToNow(parseISO(user.lastSeen))} ago</b>
+            </div>
+            Last Login
+          </>
+        )}
+      </div>
+      <div className={`${styles.gtCell} ${styles.colSmall}`}>
+        {user.modified !== null && (
+          <>
+            <div>
+              <b>{formatDistanceToNow(parseISO(user.modified))} ago</b>
+            </div>
+            Modified
+          </>
+        )}
+      </div>
+
+      <div className={`${styles.gtCell} ${styles.colFlex}`}>
+        <UserTools
+          user={user}
+          refetchCurrentPage={refetchCurrentPage}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UserSummary