Add Contributor Request/Response Workflow and Events UI

packages/openneuro-app/src/scripts/components/button/button.scss

@@ -10,6 +10,7 @@
   line-height: 1.4em;
 }
 
+
 .on-button--primary {
   color: #fff;
   background-color: var(--current-theme-primary);
@@ -40,6 +41,20 @@
     border-color: $on-light-green;
   }
 }
+.on-button--ghost {
+  color: $on-dark-aqua;
+  background-color: transparent;
+  text-transform: uppercase;
+  transition: background-color 0.3s;
+  box-shadow:none;
+  border: 2px solid transparent;
+  &:hover,
+  &.active {
+    background-color: transparent;
+    color: $on-dark-aqua;
+    border: 2px solid $on-dark-aqua;
+  }
+}
 
 .icon-text {
   display: flex;

packages/openneuro-app/src/scripts/components/select/SelectGroup.tsx

@@ -7,7 +7,7 @@ export interface SelectGroupProps {
     value: string
   }[]
   value: string
-  setValue: (string) => void
+  setValue: (value: string) => void
   label?: string
   id: string
   layout: "inline" | "stacked"
@@ -19,6 +19,7 @@ export const SelectGroup = ({
   label,
   id,
   layout,
+  value,
 }: SelectGroupProps) => {
   return (
     <span
@@ -29,11 +30,14 @@ export const SelectGroup = ({
       {label && <label htmlFor={id}>{label}</label>}
       <select
         className="on-select"
-        onChange={(e) => setValue(e.target.value)}
         id={id}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
       >
         {options.map((item, index) => (
-          <option key={index} label={item.label} value={item.value} />
+          <option key={index} value={item.value}>
+            {item.label}
+          </option>
         ))}
       </select>
     </span>

packages/openneuro-app/src/scripts/components/select/select.scss

@@ -1,4 +1,4 @@
-@import "../scss/variables.scss";
+@import "../../scss/variables.scss";
 
 .on-select-wrapper {
   label {

packages/openneuro-app/src/scripts/contributors/__tests__/contributor-form.spec.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import { vi } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { ContributorFormRow } from "../contributor-form-row"
+import type { Contributor } from "../../types/datacite"
+
+describe("ContributorFormRow", () => {
+  const mockContributor: Contributor = {
+    name: "Jane Doe",
+    givenName: "Jane",
+    familyName: "Doe",
+    orcid: "",
+    contributorType: "Researcher",
+    order: 1,
+  }
+
+  const defaultProps = {
+    contributor: mockContributor,
+    index: 0,
+    errors: {},
+    onChange: vi.fn(),
+    onMove: vi.fn(),
+    onRemove: vi.fn(),
+    isFirst: true,
+    isLast: false,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("renders contributor name input", () => {
+    render(<ContributorFormRow {...defaultProps} />)
+    expect(screen.getByPlaceholderText("Name")).toHaveValue("Jane Doe")
+  })
+
+  it("calls onChange when name is updated", () => {
+    render(<ContributorFormRow {...defaultProps} />)
+    const input = screen.getByPlaceholderText("Name")
+    fireEvent.change(input, { target: { value: "New Name" } })
+    expect(defaultProps.onChange).toHaveBeenCalledWith(0, "name", "New Name")
+  })
+
+  it("calls onMove when up or down buttons are clicked", () => {
+    render(<ContributorFormRow {...defaultProps} isFirst={false} />)
+    const upButton = screen.getByText("↑")
+    fireEvent.click(upButton)
+    expect(defaultProps.onMove).toHaveBeenCalledWith(0, "up")
+  })
+
+  it("calls onRemove when trash button is clicked", () => {
+    render(<ContributorFormRow {...defaultProps} />)
+    const trashButton = screen.getByRole("button", { name: "" })
+    fireEvent.click(trashButton)
+    expect(defaultProps.onRemove).toHaveBeenCalledWith(0)
+  })
+})

packages/openneuro-app/src/scripts/contributors/__tests__/contributor-list.spec.tsx

@@ -0,0 +1,92 @@
+import React from "react"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { MockedProvider } from "@apollo/client/testing"
+import { ContributorsListDisplay } from "../contributors-list"
+import type { Contributor } from "../../types/datacite"
+
+describe("ContributorsListDisplay", () => {
+  const baseContributors: Contributor[] = [
+    {
+      name: "Jane Doe",
+      givenName: "Jane",
+      familyName: "Doe",
+      orcid: "",
+      contributorType: "Researcher",
+      order: 1,
+    },
+    {
+      name: "John Smith",
+      givenName: "John",
+      familyName: "Smith",
+      orcid: "0000-0000-0000-0000",
+      contributorType: "DataCollector",
+      order: 2,
+    },
+  ]
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <MockedProvider>
+        <ContributorsListDisplay
+          contributors={baseContributors}
+          datasetId="ds000001"
+          editable
+          {...props}
+        />
+      </MockedProvider>,
+    )
+  }
+
+  it("renders contributors list", async () => {
+    renderComponent()
+    expect(await screen.findByText(/Jane Doe/)).toBeInTheDocument()
+    expect(screen.getByText(/John Smith/)).toBeInTheDocument()
+  })
+
+  it("shows edit button when editable", async () => {
+    renderComponent()
+    expect(await screen.findByText("Edit")).toBeInTheDocument()
+  })
+
+  it("enters edit mode when edit button clicked", async () => {
+    renderComponent()
+
+    const editButton = await screen.findByText("Edit")
+    fireEvent.click(editButton)
+
+    const nameInputs = await screen.findAllByPlaceholderText("Name")
+    expect(nameInputs.length).toBe(2)
+    expect(nameInputs[0]).toHaveValue("Jane Doe")
+    expect(nameInputs[1]).toHaveValue("John Smith")
+  })
+
+  it("adds a new contributor when 'Add Contributor' clicked", async () => {
+    renderComponent()
+    const editButton = await screen.findByText("Edit")
+    fireEvent.click(editButton)
+
+    const addButton = await screen.findByText("Add Contributor")
+    fireEvent.click(addButton)
+
+    expect(await screen.findAllByPlaceholderText("Name")).toHaveLength(3)
+  })
+
+  it("shows an error when trying to submit with empty name", async () => {
+    renderComponent()
+
+    const editButton = await screen.findByText("Edit")
+    fireEvent.click(editButton)
+
+    const addButton = await screen.findByText("Add Contributor")
+    fireEvent.click(addButton)
+
+    const saveButton = await screen.findByText("Save")
+    fireEvent.click(saveButton)
+
+    // Check that the new field has the browser validation pseudo-state
+    const nameInputs = await screen.findAllByPlaceholderText("Name")
+
+    expect(nameInputs[2]).toBeInvalid()
+    expect(nameInputs[2]).toBeRequired()
+  })
+})

packages/openneuro-app/src/scripts/contributors/__tests__/contributor-utils.spec.tsx

@@ -0,0 +1,27 @@
+import { cloneContributor, CONTRIBUTOR_TYPES } from "../contributor-utils"
+import type { Contributor } from "../../types/datacite"
+
+describe("contributor-utils", () => {
+  it("clones a contributor deeply", () => {
+    const contributor: Contributor = {
+      name: "Jane Doe",
+      givenName: "Jane",
+      familyName: "Doe",
+      orcid: "0000-0000-0000-0000",
+      contributorType: "Researcher",
+      order: 1,
+    }
+
+    const cloned = cloneContributor(contributor)
+    expect(cloned).toEqual(contributor)
+    expect(cloned).not.toBe(contributor)
+  })
+
+  it("includes Researcher as a valid contributor type", () => {
+    expect(CONTRIBUTOR_TYPES).toContain("Researcher")
+  })
+
+  it("contains at least one contributor type", () => {
+    expect(CONTRIBUTOR_TYPES.length).toBeGreaterThan(0)
+  })
+})

packages/openneuro-app/src/scripts/users/__tests__/contributor.spec.tsx → packages/openneuro-app/src/scripts/contributors/__tests__/contributor.spec.tsx

@@ -56,22 +56,28 @@ describe("SingleContributorDisplay - Basic Loading", () => {
   it("renders the component and displays the contributor name", async () => {
     const contributor = { name: "Jane Doe", orcid: null }
     renderComponent({ contributor })
-    expect(screen.getByText("Jane Doe")).toBeInTheDocument()
+
+    // wait for async rendering
+    expect(await screen.findByText("Jane Doe")).toBeInTheDocument()
   })
 
   it("renders 'Unknown Contributor' if the contributor name is missing", async () => {
     const contributor = { name: undefined, orcid: null }
     renderComponent({ contributor })
-    expect(screen.getByText("Unknown Contributor")).toBeInTheDocument()
+
+    expect(await screen.findByText("Unknown Contributor")).toBeInTheDocument()
   })
 
-  it("renders the component and displays the ORCID link if an ID is provided", async () => {
+  it("renders the ORCID link if an ID is provided", async () => {
     const testOrcid = "0000-0000-0000-0000"
     const contributor = { name: "Author With ORCID", orcid: testOrcid }
     renderComponent({ contributor })
-    const orcidLink = screen.getByLabelText(
-      `ORCID profile for ${contributor.name}`,
-    )
+
+    // check link by role
+    const orcidLink = await screen.findByRole("link", {
+      name: /ORCID profile for Author With ORCID/,
+    })
+
     expect(orcidLink).toBeInTheDocument()
     expect(orcidLink).toHaveAttribute(
       "href",

packages/openneuro-app/src/scripts/contributors/contributor-form-row.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+import type { Contributor } from "../types/datacite"
+import { SelectGroup } from "../components/select/SelectGroup"
+import { CONTRIBUTOR_TYPES } from "./contributor-utils"
+
+interface ContributorFormRowProps {
+  contributor: Contributor
+  index: number
+  errors: Record<number, string>
+  onChange: (index: number, field: keyof Contributor, value: string) => void
+  onMove: (index: number, direction: "up" | "down") => void
+  onRemove: (index: number) => void
+  isFirst: boolean
+  isLast: boolean
+}
+
+export const ContributorFormRow: React.FC<ContributorFormRowProps> = ({
+  contributor,
+  index,
+  errors,
+  onChange,
+  onMove,
+  onRemove,
+  isFirst,
+  isLast,
+}) => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      marginBottom: 8,
+      gap: 8,
+      flexWrap: "wrap",
+    }}
+  >
+    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      <button
+        type="button"
+        onClick={() => onMove(index, "up")}
+        disabled={isFirst}
+      >
+        ↑
+      </button>
+      <button
+        type="button"
+        onClick={() => onMove(index, "down")}
+        disabled={isLast}
+      >
+        ↓
+      </button>
+    </div>
+
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <input
+        type="text"
+        placeholder="Name"
+        value={contributor.name || ""}
+        onChange={(e) => onChange(index, "name", e.target.value)}
+        style={{
+          borderColor: errors[index] ? "red" : undefined,
+          borderWidth: errors[index] ? 2 : undefined,
+        }}
+        required
+      />
+      {errors[index] && (
+        <span style={{ color: "red", fontSize: "0.8em" }}>{errors[index]}</span>
+      )}
+    </div>
+
+    <SelectGroup
+      id={`contributor-type-${index}`}
+      layout="inline"
+      options={CONTRIBUTOR_TYPES.map((t) => ({ label: t, value: t }))}
+      value={contributor.contributorType?.trim() ?? ""}
+      setValue={(v) => onChange(index, "contributorType", v)}
+    />
+
+    <button
+      type="button"
+      onClick={() => onRemove(index)}
+      style={{ color: "#C82429", border: 0, background: "none" }}
+    >
+      <i className="fa fa-trash"></i>
+    </button>
+  </div>
+)

packages/openneuro-app/src/scripts/contributors/contributor-utils.ts

@@ -0,0 +1,29 @@
+import type { Contributor } from "../types/datacite"
+
+export const CONTRIBUTOR_TYPES = [
+  "ContactPerson",
+  "DataCollector",
+  "DataCurator",
+  "DataManager",
+  "Distributor",
+  "Editor",
+  "HostingInstitution",
+  "Producer",
+  "ProjectLeader",
+  "ProjectManager",
+  "ProjectMember",
+  "RegistrationAgency",
+  "RegistrationAuthority",
+  "RelatedPerson",
+  "Researcher",
+  "ResearchGroup",
+  "RightsHolder",
+  "Sponsor",
+  "Supervisor",
+  "WorkPackageLeader",
+  "Other",
+]
+
+// Utility to deep clone a contributor
+export const cloneContributor = (c: Contributor): Contributor =>
+  structuredClone(c)