Merge pull request #3272 from OpenNeuroOrg/userSchema

update user schema to include new fields and ability to updateUser

Author: nellh

packages/openneuro-app/src/scripts/routes.tsx

@@ -18,6 +18,9 @@ import { ImportDataset } from "./pages/import-dataset"
 import { DatasetMetadata } from "./pages/metadata/dataset-metadata"
 import { TermsPage } from "./pages/terms"
 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"
 
 const AppRoutes: React.VoidFunctionComponent = () => (
   <Routes>
@@ -34,7 +37,19 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/import" element={<ImportDataset />} />
     <Route path="/metadata" element={<DatasetMetadata />} />
     <Route path="/public" element={<Navigate to="/search" replace />} />
-    <Route path="/user/:orcid/*" element={<UserQuery />} />
+    <Route
+      path="/user/:orcid/*"
+      element={
+        <>
+          <LoggedIn>
+            <UserQuery />
+          </LoggedIn>
+          <LoggedOut>
+            <FourOThreePage />
+          </LoggedOut>
+        </>
+      }
+    />
     <Route
       path="/saved"
       element={<Navigate to="/search?bookmarks" replace />}

packages/openneuro-app/src/scripts/users/__tests__/user-account-view.spec.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { MockedProvider } from "@apollo/client/testing"
 import {
   fireEvent,
   render,
@@ -7,8 +8,10 @@ import {
   within,
 } from "@testing-library/react"
 import { UserAccountView } from "../user-account-view"
+import { GET_USER_BY_ORCID, UPDATE_USER } from "../user-query"
 
 const baseUser = {
+  id: "1",
   name: "John Doe",
   email: "[email protected]",
   orcid: "0000-0001-2345-6789",
@@ -18,61 +21,132 @@ const baseUser = {
   github: "johndoe",
 }
 
+const mocks = [
+  {
+    request: {
+      query: GET_USER_BY_ORCID,
+      variables: { userId: baseUser.id },
+    },
+    result: {
+      data: {
+        user: baseUser,
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: baseUser.id,
+        location: "Marin, CA",
+        links: ["https://newlink.com"],
+        institution: "New University",
+      },
+    },
+    result: {
+      data: {
+        updateUser: {
+          id: baseUser.id,
+          location: "Marin, CA",
+          links: ["https://newlink.com"],
+          institution: "New University",
+        },
+      },
+    },
+  },
+]
+
 describe("<UserAccountView />", () => {
   it("should render the user details correctly", () => {
-    render(<UserAccountView user={baseUser} />)
-
-    // Check if user details are rendered
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserAccountView user={baseUser} />
+      </MockedProvider>,
+    )
     expect(screen.getByText("Name:")).toBeInTheDocument()
     expect(screen.getByText("John Doe")).toBeInTheDocument()
     expect(screen.getByText("Email:")).toBeInTheDocument()
     expect(screen.getByText("[email protected]")).toBeInTheDocument()
     expect(screen.getByText("ORCID:")).toBeInTheDocument()
     expect(screen.getByText("0000-0001-2345-6789")).toBeInTheDocument()
+    expect(screen.getByText("GitHub:")).toBeInTheDocument()
     expect(screen.getByText("johndoe")).toBeInTheDocument()
   })
 
-  it("should render links with EditableContent", async () => {
-    render(<UserAccountView user={baseUser} />)
-    const institutionSection = within(
-      screen.getByText("Institution").closest(".user-meta-block"),
+  it("should render location with EditableContent", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserAccountView user={baseUser} />
+      </MockedProvider>,
     )
+    const locationSection = within(screen.getByTestId("location-section"))
+    expect(screen.getByText("Location")).toBeInTheDocument()
+    const editButton = locationSection.getByText("Edit")
+    fireEvent.click(editButton)
+    const textbox = locationSection.getByRole("textbox")
+    fireEvent.change(textbox, { target: { value: "Marin, CA" } })
+    const saveButton = locationSection.getByText("Save")
+    fireEvent.click(saveButton)
+    await waitFor(() => {
+      expect(locationSection.getByText("Marin, CA")).toBeInTheDocument()
+    })
+  })
+
+  it("should render institution with EditableContent", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserAccountView user={baseUser} />
+      </MockedProvider>,
+    )
+    const institutionSection = within(screen.getByTestId("institution-section"))
     expect(screen.getByText("Institution")).toBeInTheDocument()
     const editButton = institutionSection.getByText("Edit")
     fireEvent.click(editButton)
     const textbox = institutionSection.getByRole("textbox")
     fireEvent.change(textbox, { target: { value: "New University" } })
     const saveButton = institutionSection.getByText("Save")
-    const closeButton = institutionSection.getByText("Close")
     fireEvent.click(saveButton)
-    fireEvent.click(closeButton)
-    // Add debug step
-    await waitFor(() => screen.debug())
-    // Use a flexible matcher to check for text
-    await waitFor(() =>
+    await waitFor(() => {
       expect(institutionSection.getByText("New University")).toBeInTheDocument()
-    )
+    })
   })
 
-  it("should render location with EditableContent", async () => {
-    render(<UserAccountView user={baseUser} />)
-    const locationSection = within(
-      screen.getByText("Location").closest(".user-meta-block"),
+  it("should render links with EditableContent and validation", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserAccountView user={baseUser} />
+      </MockedProvider>,
     )
-    expect(screen.getByText("Location")).toBeInTheDocument()
-    const editButton = locationSection.getByText("Edit")
+    const linksSection = within(screen.getByTestId("links-section"))
+    expect(screen.getByText("Links")).toBeInTheDocument()
+    const editButton = linksSection.getByText("Edit")
     fireEvent.click(editButton)
-    const textbox = locationSection.getByRole("textbox")
-    fireEvent.change(textbox, { target: { value: "Marin, CA" } })
-    const saveButton = locationSection.getByText("Save")
-    const closeButton = locationSection.getByText("Close")
+    const textbox = linksSection.getByRole("textbox")
+    fireEvent.change(textbox, { target: { value: "https://newlink.com" } })
+    const saveButton = linksSection.getByText("Add")
     fireEvent.click(saveButton)
-    fireEvent.click(closeButton)
-    // Add debug step
-    await waitFor(() => screen.debug())
-    // Use a flexible matcher to check for text
-    await waitFor(() =>
-      expect(locationSection.getByText("Marin, CA")).toBeInTheDocument()
+    await waitFor(() => {
+      expect(linksSection.getByText("https://newlink.com")).toBeInTheDocument()
+    })
+  })
+
+  it("should show an error message when invalid URL is entered in links section", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserAccountView user={baseUser} />
+      </MockedProvider>,
     )
+    const linksSection = within(screen.getByTestId("links-section"))
+    const editButton = linksSection.getByText("Edit")
+    fireEvent.click(editButton)
+    const textbox = linksSection.getByRole("textbox")
+    fireEvent.change(textbox, { target: { value: "invalid-url" } })
+    const saveButton = linksSection.getByText("Add")
+    fireEvent.click(saveButton)
+    await waitFor(() => {
+      expect(
+        linksSection.getByText("Invalid URL format. Please use a valid link."),
+      ).toBeInTheDocument()
+    })
   })
 })

packages/openneuro-app/src/scripts/users/__tests__/user-routes.spec.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import { cleanup, render, screen } from "@testing-library/react"
 import { MemoryRouter } from "react-router-dom"
+import { MockedProvider } from "@apollo/client/testing"
 import { UserRoutes } from "../user-routes"
 import type { User } from "../user-routes"
+import { UPDATE_USER } from "../user-query"
 
 const defaultUser: User = {
   id: "1",
@@ -16,11 +18,40 @@ const defaultUser: User = {
   links: [],
 }
 
+const mocks = [
+  {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: "1",
+        name: "John Doe",
+        location: "Unknown",
+        github: "",
+        institution: "Unknown Institution",
+        email: "[email protected]",
+        avatar: "https://dummyimage.com/200x200/000/fff",
+        orcid: "0000-0000-0000-0000",
+        links: [],
+      },
+    },
+    result: {
+      data: {
+        updateUser: {
+          id: "1",
+          name: "John Doe",
+        },
+      },
+    },
+  },
+]
+
 const renderWithRouter = (user: User, route: string, hasEdit: boolean) => {
   return render(
-    <MemoryRouter initialEntries={[route]}>
-      <UserRoutes user={user} hasEdit={hasEdit} />
-    </MemoryRouter>,
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <MemoryRouter initialEntries={[route]}>
+        <UserRoutes user={user} hasEdit={hasEdit} />
+      </MemoryRouter>
+    </MockedProvider>,
   )
 }
 

packages/openneuro-app/src/scripts/users/components/edit-list.tsx

@@ -6,39 +6,54 @@ interface EditListProps {
   placeholder?: string
   elements?: string[]
   setElements: (elements: string[]) => void
+  validation?: RegExp
+  validationMessage?: string
 }
 
 /**
  * EditList Component
  * Allows adding and removing strings from a list.
  */
 export const EditList: React.FC<EditListProps> = (
-  { placeholder = "Enter item", elements = [], setElements },
+  {
+    placeholder = "Enter item",
+    elements = [],
+    setElements,
+    validation,
+    validationMessage,
+  },
 ) => {
   const [newElement, setNewElement] = useState<string>("")
   const [warnEmpty, setWarnEmpty] = useState<boolean>(false)
+  const [warnValidation, setWarnValidation] = useState<string | null>(null)
 
-  /**
-   * Remove an element from the list by index
-   * @param index - The index of the element to remove
-   */
   const removeElement = (index: number): void => {
     setElements(elements.filter((_, i) => i !== index))
   }
 
-  /**
-   * Add a new element to the list
-   */
+  // Add a new element to the list
   const addElement = (): void => {
     if (!newElement.trim()) {
       setWarnEmpty(true)
+      setWarnValidation(null)
+    } else if (validation && !validation.test(newElement.trim())) {
+      setWarnValidation(validationMessage || "Invalid input format")
+      setWarnEmpty(false)
     } else {
       setElements([...elements, newElement.trim()])
       setWarnEmpty(false)
+      setWarnValidation(null)
       setNewElement("")
     }
   }
 
+  // Handle Enter/Return key press to add element
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === "Enter") {
+      addElement()
+    }
+  }
+
   return (
     <div className="edit-list-container">
       <div className="el-group">
@@ -48,6 +63,7 @@ export const EditList: React.FC<EditListProps> = (
           placeholder={placeholder}
           value={newElement}
           onChange={(e) => setNewElement(e.target.value)}
+          onKeyDown={handleKeyDown}
         />
         <Button
           className="edit-list-add"
@@ -62,6 +78,9 @@ export const EditList: React.FC<EditListProps> = (
           Your input was empty
         </small>
       )}
+      {warnValidation && (
+        <small className="warning-text">{warnValidation}</small>
+      )}
       <div className="edit-list-items">
         {elements.map((element, index) => (
           <div key={index} className="edit-list-group-item">