@openneuro/app 4.29.8 → 4.30.0-alpha.0

package/src/scripts/users/__tests__/user-query.spec.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+import { render, screen, waitFor } from "@testing-library/react"
+import { MockedProvider } from "@apollo/client/testing"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
+import { UserQuery } from "../user-query"
+import { GET_USER_BY_ORCID } from "../user-query"
+
+const validOrcid = "0009-0001-9689-7232"
+
+const userMock = {
+  request: {
+    query: GET_USER_BY_ORCID,
+    variables: { userId: validOrcid },
+  },
+  result: {
+    data: {
+      user: {
+        __typename: "User",
+        id: "1",
+        name: "Test User",
+        orcid: validOrcid,
+        email: "test@example.com",
+        avatar: "http://example.com/avatar.png",
+      },
+    },
+  },
+}
+
+const mocks = [userMock]
+
+describe("UserQuery component", () => {
+  it("displays the ORCID on the page for a valid ORCID", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={true}>
+        <MemoryRouter initialEntries={[`/user/${validOrcid}`]}>
+          <Routes>
+            <Route path="/user/:orcid" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
+      </MockedProvider>,
+    )
+
+    await waitFor(() =>
+      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    )
+
+    expect(screen.getByText(validOrcid)).toBeInTheDocument()
+  })
+
+  it("shows 404 page for invalid ORCID", async () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={true}>
+        <MemoryRouter initialEntries={[`/user/invalid-orcid`]}>
+          <Routes>
+            <Route path="/user/:orcid" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
+      </MockedProvider>,
+    )
+
+    await waitFor(() => screen.getByText(/404/i))
+
+    expect(screen.getByText(/404/i)).toBeInTheDocument()
+  })
+})

package/src/scripts/users/__tests__/user-routes.spec.tsx

@@ -0,0 +1,102 @@
+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",
+  name: "John Doe",
+  location: "Unknown",
+  github: "",
+  institution: "Unknown Institution",
+  email: "john.doe@example.com",
+  avatar: "https://dummyimage.com/200x200/000/fff",
+  orcid: "0000-0000-0000-0000",
+  links: [],
+}
+
+const mocks = [
+  {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: "1",
+        name: "John Doe",
+        location: "Unknown",
+        github: "",
+        institution: "Unknown Institution",
+        email: "john.doe@example.com",
+        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(
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <MemoryRouter initialEntries={[route]}>
+        <UserRoutes user={user} hasEdit={hasEdit} />
+      </MemoryRouter>
+    </MockedProvider>,
+  )
+}
+
+describe("UserRoutes Component", () => {
+  const user: User = defaultUser
+
+  it("renders UserDatasetsView for the default route", async () => {
+    renderWithRouter(user, "/", true)
+    expect(screen.getByText(`${user.name}'s Datasets`)).toBeInTheDocument()
+    const datasetsView = await screen.findByTestId("user-datasets-view")
+    expect(datasetsView).toBeInTheDocument()
+  })
+
+  it("renders FourOFourPage for an invalid route", async () => {
+    renderWithRouter(user, "/nonexistent-route", true)
+    const errorMessage = await screen.findByText(
+      /404: The page you are looking for does not exist./i,
+    )
+    expect(errorMessage).toBeInTheDocument()
+  })
+
+  it("renders UserAccountView when hasEdit is true", async () => {
+    renderWithRouter(user, "/account", true)
+    const accountView = await screen.findByTestId("user-account-view")
+    expect(accountView).toBeInTheDocument()
+  })
+
+  it("renders UserNotificationsView when hasEdit is true", async () => {
+    renderWithRouter(user, "/notifications", true)
+    const notificationsView = await screen.findByTestId(
+      "user-notifications-view",
+    )
+    expect(notificationsView).toBeInTheDocument()
+  })
+
+  it("renders FourOThreePage when hasEdit is false for restricted routes", async () => {
+    const restrictedRoutes = ["/account", "/notifications"]
+
+    for (const route of restrictedRoutes) {
+      cleanup()
+      renderWithRouter(user, route, false)
+      const errorMessage = await screen.findByText(
+        /403: You do not have access to this page, you may need to sign in./i,
+      )
+      expect(errorMessage).toBeInTheDocument()
+    }
+  })
+})

package/src/scripts/users/__tests__/user-tabs.spec.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
+import { UserAccountTabs } from "../user-tabs"
+
+// Wrapper component to allow dynamic modification of `hasEdit`
+const UserAccountTabsWrapper: React.FC = () => {
+  const [hasEdit, setHasEdit] = useState(true)
+
+  return (
+    <>
+      <button onClick={() => setHasEdit(!hasEdit)}>Toggle hasEdit</button>
+      <MemoryRouter>
+        <Routes>
+          <Route path="*" element={<UserAccountTabs hasEdit={hasEdit} />} />
+        </Routes>
+      </MemoryRouter>
+    </>
+  )
+}
+
+describe("UserAccountTabs Component", () => {
+  it("should not render tabs when hasEdit is false", () => {
+    render(<UserAccountTabsWrapper />)
+
+    expect(screen.getByText("User Datasets")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText("Toggle hasEdit"))
+
+    expect(screen.queryByText("User Datasets")).not.toBeInTheDocument()
+  })
+
+  it("should render tabs when hasEdit is toggled back to true", () => {
+    render(<UserAccountTabsWrapper />)
+
+    expect(screen.getByText("User Datasets")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText("Toggle hasEdit"))
+    expect(screen.queryByText("User Datasets")).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText("Toggle hasEdit"))
+    expect(screen.getByText("User Datasets")).toBeInTheDocument()
+  })
+
+  it("should update active class on the correct NavLink based on route", () => {
+    render(<UserAccountTabsWrapper />)
+
+    // Utility function to check if an element has 'active' class - used because of CSS module discrepancies between classNames
+    const hasActiveClass = (element) => element.className.includes("active")
+
+    const datasetsTab = screen.getByText("User Datasets")
+    expect(hasActiveClass(datasetsTab)).toBe(true)
+
+    const notificationsTab = screen.getByText("User Notifications")
+
+    fireEvent.click(notificationsTab)
+
+    expect(hasActiveClass(notificationsTab)).toBe(true)
+    expect(hasActiveClass(datasetsTab)).toBe(false)
+
+    const accountTab = screen.getByText("Account Info")
+
+    fireEvent.click(accountTab)
+
+    expect(hasActiveClass(accountTab)).toBe(true)
+    expect(hasActiveClass(datasetsTab)).toBe(false)
+    expect(hasActiveClass(notificationsTab)).toBe(false)
+  })
+
+  it("should trigger animation state when a tab is clicked", async () => {
+    render(<UserAccountTabsWrapper />)
+
+    const notificationsTab = screen.getByText("User Notifications")
+    // Utility function to check if an element has 'clicked' class - used because of CSS module discrepancies between classNames
+    const hasClickedClass = (element) => element.className.includes("clicked")
+    const tabsContainer = await screen.findByRole("list")
+
+    expect(hasClickedClass(tabsContainer)).toBe(false)
+
+    fireEvent.click(notificationsTab)
+
+    expect(hasClickedClass(tabsContainer)).toBe(true)
+  })
+})

package/src/scripts/users/components/close-button.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import type { FC } from "react"
+import { Button } from "@openneuro/components/button"
+
+/**
+ * An edit button, calls action when clicked
+ */
+interface CloseButtonProps {
+  action: () => void
+}
+export const CloseButton: FC<CloseButtonProps> = ({ action }) => {
+  return (
+    <Button
+      className="description-btn description-button-cancel"
+      label="Close"
+      icon="fas fa-times"
+      onClick={() => action()}
+    />
+  )
+}

package/src/scripts/users/components/edit-button.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import type { FC } from "react"
+import { Button } from "@openneuro/components/button"
+
+/**
+ * An edit button, calls action when clicked
+ */
+interface EditButtonProps {
+  action: () => void
+}
+export const EditButton: FC<EditButtonProps> = ({ action }) => {
+  return (
+    <Button
+      className="description-btn description-button-edit"
+      label="Edit"
+      icon="fas fa-edit"
+      onClick={() => action()}
+    />
+  )
+}

package/src/scripts/users/components/edit-list.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react"
+import { Button } from "@openneuro/components/button"
+import "../scss/user-meta-blocks.scss"
+
+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,
+    validation,
+    validationMessage,
+  },
+) => {
+  const [newElement, setNewElement] = useState<string>("")
+  const [warnEmpty, setWarnEmpty] = useState<boolean>(false)
+  const [warnValidation, setWarnValidation] = useState<string | null>(null)
+
+  const removeElement = (index: number): void => {
+    setElements(elements.filter((_, i) => i !== index))
+  }
+
+  // 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">
+        <input
+          type="text"
+          className="form-control"
+          placeholder={placeholder}
+          value={newElement}
+          onChange={(e) => setNewElement(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          className="edit-list-add"
+          primary={true}
+          size="small"
+          label="Add"
+          onClick={addElement}
+        />
+      </div>
+      {warnEmpty && (
+        <small className="warning-text">
+          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">
+            {element}
+            <Button
+              className="edit-list-remove"
+              nobg={true}
+              size="xsmall"
+              icon="fa fa-times"
+              label="Remove"
+              color="red"
+              onClick={() =>
+                removeElement(index)}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/scripts/users/components/edit-string.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react"
+import { Button } from "@openneuro/components/button"
+import "../scss/user-meta-blocks.scss"
+
+interface EditStringProps {
+  value?: string
+  setValue: (value: string) => void
+  placeholder?: string
+  closeEditing: () => void
+  validation?: RegExp
+  validationMessage?: string
+}
+
+export const EditString: React.FC<EditStringProps> = (
+  {
+    value = "",
+    setValue,
+    placeholder = "Enter text",
+    closeEditing,
+    validation,
+    validationMessage,
+  },
+) => {
+  const [currentValue, setCurrentValue] = useState<string>(value)
+  const [warnEmpty, setWarnEmpty] = useState<string | null>(null)
+  const [warnValidation, setWarnValidation] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Show warning only if there was an initial value and it was deleted
+    if (value !== "" && currentValue === "") {
+      setWarnEmpty(
+        "Your input is empty. This will delete the previously saved value..",
+      )
+    } else {
+      setWarnEmpty(null)
+    }
+
+    // Validation logic
+    if (validation && currentValue && !validation.test(currentValue)) {
+      setWarnValidation(validationMessage || "Invalid input")
+    } else {
+      setWarnValidation(null)
+    }
+  }, [currentValue, value, validation, validationMessage])
+
+  const handleSave = (): void => {
+    if (!warnValidation) {
+      setValue(currentValue.trim())
+      closeEditing()
+    }
+  }
+
+  // Handle Enter key press for saving
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      handleSave()
+    }
+  }
+
+  return (
+    <div className="edit-string-container">
+      <div className="edit-string-group">
+        <input
+          type="text"
+          className="form-control"
+          placeholder={placeholder}
+          value={currentValue}
+          onChange={(e) => setCurrentValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          className="edit-string-save"
+          primary={true}
+          size="small"
+          label="Save"
+          onClick={handleSave}
+        />
+      </div>
+      {/* Show empty value warning only if content was deleted */}
+      {warnEmpty && currentValue === "" && (
+        <small className="warning-text">{warnEmpty}</small>
+      )}
+      {/* Show validation error */}
+      {warnValidation && (
+        <small className="warning-text">{warnValidation}</small>
+      )}
+    </div>
+  )
+}

package/src/scripts/users/components/editable-content.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react"
+import { EditList } from "./edit-list"
+import { EditString } from "./edit-string"
+import { EditButton } from "./edit-button"
+import { CloseButton } from "./close-button"
+import { Markdown } from "../../utils/markdown"
+import "../scss/editable-content.scss"
+
+interface EditableContentProps {
+  editableContent: string[] | string
+  setRows: React.Dispatch<React.SetStateAction<string[] | string>>
+  className: string
+  heading: string
+  validation?: RegExp
+  validationMessage?: string
+  "data-testid"?: string
+}
+
+export const EditableContent: React.FC<EditableContentProps> = ({
+  editableContent,
+  setRows,
+  className,
+  heading,
+  validation,
+  validationMessage,
+  "data-testid": testId,
+}) => {
+  const [editing, setEditing] = useState(false)
+
+  const closeEditing = () => {
+    setEditing(false)
+  }
+
+  // Function to handle validation of user input
+  const handleValidation = (value: string): boolean => {
+    if (validation && !validation.test(value)) {
+      return false
+    }
+    return true
+  }
+
+  return (
+    <div className={`user-meta-block ${className}`} data-testid={testId}>
+      <span className="umb-heading">
+        <h4>{heading}</h4>
+        {editing
+          ? <CloseButton action={closeEditing} />
+          : <EditButton action={() => setEditing(true)} />}
+      </span>
+      {editing
+        ? (
+          <>
+            {Array.isArray(editableContent)
+              ? (
+                <EditList
+                  placeholder="Add new item"
+                  elements={editableContent}
+                  setElements={setRows as React.Dispatch<
+                    React.SetStateAction<string[]>
+                  >}
+                  validation={validation}
+                  validationMessage={validationMessage}
+                />
+              )
+              : (
+                <EditString
+                  value={editableContent}
+                  setValue={(newValue: string) => {
+                    if (handleValidation(newValue)) {
+                      setRows(newValue)
+                    }
+                  }}
+                  placeholder="Edit content"
+                  closeEditing={closeEditing}
+                  validation={validation}
+                  validationMessage={validationMessage}
+                />
+              )}
+          </>
+        )
+        : (
+          <>
+            {Array.isArray(editableContent)
+              ? (
+                <ul>
+                  {editableContent.map((item, index) => (
+                    <li key={index}>
+                      <Markdown>{item}</Markdown>
+                    </li>
+                  ))}
+                </ul>
+              )
+              : <Markdown>{editableContent}</Markdown>}
+          </>
+        )}
+    </div>
+  )
+}

package/src/scripts/users/scss/editable-content.scss

@@ -0,0 +1,15 @@
+
+
+.user-meta-block{
+    margin-top: 30px;
+}
+.umb-heading{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+    h4{
+        margin: 0;
+    }
+}
+

package/src/scripts/users/scss/user-meta-blocks.scss

@@ -0,0 +1,14 @@
+.user-meta-block {
+    .edit-string-container,
+    .edit-list-container{
+        margin-top: 20px;   
+    }
+    ul{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+           p{ margin-bottom: 0;}
+        }
+    }
+}

package/src/scripts/users/scss/useraccountview.module.scss

@@ -0,0 +1,20 @@
+.useraccountview{
+    h3{
+        margin-top: 0;
+        font-size: 22px;
+    }
+    .accountDetail{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li{
+            margin: 0 0 10px;
+            font-size: 16px;
+        }
+        span{
+            font-weight: 700;
+            margin-right: 10px;
+        }
+    }
+}
+

package/src/scripts/users/scss/usercard.module.scss

@@ -0,0 +1,24 @@
+/* usercard.module.scss */
+.userCard {
+  padding: 20px;
+  ul{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li{
+      margin-bottom: 5px;
+      font-size: 14px;
+      i{
+        margin-right: 10px;
+        color: #666;
+       
+      }
+      &.orcid i{
+        color: #a6cf39;
+      }
+      &:last-of-type{
+        margin-bottom: 0;
+      }
+    }
+  }
+}