User datasets, general styling and layouts, getting query started, and various filtering and sorting

packages/openneuro-app/src/scripts/types/user-types.ts

@@ -0,0 +1,72 @@
+export interface User {
+  id: string
+  name: string
+  location?: string
+  github?: string
+  institution?: string
+  email: string
+  avatar?: string
+  orcid?: string
+  links?: string[]
+}
+
+export interface UserRoutesProps {
+  user: User
+  hasEdit: boolean
+}
+export interface UserCardProps {
+  user: User
+}
+
+export interface UserAccountViewProps {
+  user: {
+    name: string
+    email: string
+    orcid?: string
+    links?: string[]
+    location?: string
+    institution?: string
+    github?: string
+  }
+}
+
+export interface Dataset {
+  id: string
+  created: string
+  name: string
+  public: boolean
+  analytics: {
+    views: number
+    downloads: number
+  }
+  stars?: { userId: string; datasetId: string }[]
+  followers?: { userId: string; datasetId: string }[]
+  latestSnapshot?: {
+    id: string
+    size: number
+    issues: { severity: string }[]
+    created?: string
+    description?: {
+      Authors: string[]
+    }
+  }
+  draft?: {
+    size?: number
+    created?: string
+  }
+}
+
+export interface DatasetCardProps {
+  dataset: Dataset
+  hasEdit: boolean
+}
+
+export interface UserDatasetsViewProps {
+  user: User
+  hasEdit: boolean
+}
+
+export interface AccountContainerProps {
+  user: User
+  hasEdit: boolean
+}

packages/openneuro-app/src/scripts/users/__tests__/datasest-card.spec.tsx

@@ -0,0 +1,201 @@
+import React from "react"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { DATASETS_QUERY, UserDatasetsView } from "../user-datasets-view"
+import { MockedProvider } from "@apollo/client/testing"
+import DatasetCard from "../dataset-card"
+
+// Mocked datasets
+const mockDatasets = [
+  {
+    node: {
+      id: "ds000001",
+      name: "The DBS-fMRI dataset",
+      created: "2025-01-22T19:55:49.997Z",
+      followers: [
+        { userId: "user1", datasetId: "ds000001" },
+        { userId: "user2", datasetId: "ds000001" },
+      ],
+      stars: [
+        { userId: "user1", datasetId: "ds000001" },
+      ],
+      latestSnapshot: {
+        id: "ds000001:1.0.0",
+        size: 6000,
+        created: "2025-01-22T19:55:49.997Z",
+        issues: [{ severity: "low" }],
+        description: {
+          Name: "DBS-FMRI",
+          Authors: ["John Doe"],
+          SeniorAuthor: "Dr. Smith",
+          DatasetType: "fMRI",
+        },
+      },
+    },
+  },
+  {
+    node: {
+      id: "ds000002",
+      name: "The DBS-fMRI dataset 2",
+      created: "2025-01-22T19:55:49.997Z",
+      followers: [
+        { userId: "user1", datasetId: "ds000002" },
+        { userId: "user2", datasetId: "ds000002" },
+      ],
+      stars: [
+        { userId: "user1", datasetId: "ds000002" },
+      ],
+      latestSnapshot: {
+        id: "ds000002:1.0.0",
+        size: 6000,
+        created: "2025-01-22T19:55:49.997Z",
+        issues: [{ severity: "medium" }],
+        description: {
+          Name: "DBS-FMRI 2",
+          Authors: ["Jane Doe"],
+          SeniorAuthor: "Dr. Johnson",
+          DatasetType: "fMRI",
+        },
+      },
+    },
+  },
+]
+
+describe("<UserDatasetsView />", () => {
+  const mockUser = {
+    id: "user1",
+    name: "John Doe",
+    location: "Somewhere",
+    institution: "Some University",
+    email: "john.doe@example.com",
+  }
+  const mockHasEdit = true
+
+  it("renders loading state", () => {
+    const mockLoadingQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      result: { data: { datasets: { edges: [] } } },
+    }
+
+    render(
+      <MockedProvider mocks={[mockLoadingQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    expect(screen.getByText("Loading datasets...")).toBeInTheDocument()
+  })
+
+  it("renders error state", async () => {
+    const mockErrorQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      error: new Error("Failed to fetch datasets"),
+    }
+
+    render(
+      <MockedProvider mocks={[mockErrorQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("Failed to fetch datasets: Failed to fetch datasets"),
+      ).toBeInTheDocument()
+    })
+  })
+
+  it("filters datasets by public filter", async () => {
+    const mockDatasetQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      result: { data: { datasets: { edges: mockDatasets } } },
+    }
+
+    render(
+      <MockedProvider mocks={[mockDatasetQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    await waitFor(() => screen.getByTestId("public-filter"))
+    fireEvent.click(screen.getByTestId("public-filter"))
+    await waitFor(() => screen.getByText("Public"))
+    fireEvent.click(screen.getByText("Public"))
+
+    expect(screen.getByTestId("public-filter")).toHaveTextContent(
+      "Filter by: Public",
+    )
+  })
+
+  it("handles sorting datasets", async () => {
+    const mockDatasetQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      result: { data: { datasets: { edges: mockDatasets } } },
+    }
+
+    render(
+      <MockedProvider mocks={[mockDatasetQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    await waitFor(() => screen.queryByText(mockDatasets[0].node.name))
+
+    fireEvent.click(screen.getByTestId("sort-order"))
+    await waitFor(() => screen.getByText("Name (A-Z)"))
+    fireEvent.click(screen.getByText("Name (Z-A)"))
+
+    expect(screen.getByTestId("sort-order")).toHaveTextContent("Name (Z-A)")
+  })
+})
+
+const mockDataset = {
+  id: "ds000001",
+  name: "Test Dataset",
+  created: "2025-01-01T00:00:00Z",
+  date: "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: {
+      Authors: ["John Doe"],
+      SeniorAuthor: "Dr. Smith",
+      DatasetType: "fMRI",
+    },
+  },
+}
+
+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()
+    expect(screen.getByText("1.00 GB")).toBeInTheDocument()
+  })
+})

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

@@ -1,17 +1,30 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import type { User } from "../user-card"
 import { UserCard } from "../user-card"
 
+interface User {
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
+}
+
 describe("UserCard Component", () => {
   const baseUser: User = {
+    id: "123",
     name: "John Doe",
     email: "johndoe@example.com",
     orcid: "0000-0001-2345-6789",
     location: "San Francisco, CA",
     institution: "University of California",
     links: ["https://example.com", "https://example.org"],
     github: "johndoe",
+    avatar: "https://example.com/avatar.jpg",
   }
 
   it("renders all user details when all data is provided", () => {
@@ -44,10 +57,14 @@ describe("UserCard Component", () => {
 
   it("renders without optional fields", () => {
     const minimalUser: User = {
+      id: "124",
       name: "Jane Doe",
       email: "janedoe@example.com",
       orcid: "0000-0002-3456-7890",
       links: [],
+      avatar: "https://example.com/avatar.jpg",
+      location: "",
+      institution: "",
     }
 
     render(<UserCard user={minimalUser} />)
@@ -70,8 +87,14 @@ describe("UserCard Component", () => {
 
   it("renders correctly when links are empty", () => {
     const userWithEmptyLinks: User = {
-      ...baseUser,
-      links: [],
+      id: "125",
+      name: "John Smith",
+      email: "johnsmith@example.com",
+      orcid: "0000-0003-4567-8901",
+      links: [], // Empty links
+      avatar: "https://example.com/avatar.jpg",
+      location: "New York, NY",
+      institution: "NYU",
     }
 
     render(<UserCard user={userWithEmptyLinks} />)
@@ -84,10 +107,14 @@ describe("UserCard Component", () => {
 
   it("renders correctly when location and institution are missing", () => {
     const userWithoutLocationAndInstitution: User = {
+      id: "126",
       name: "Emily Doe",
       email: "emilydoe@example.com",
       orcid: "0000-0003-4567-8901",
       links: ["https://example.com"],
+      avatar: "https://example.com/avatar.jpg",
+      location: "",
+      institution: "",
     }
 
     render(<UserCard user={userWithoutLocationAndInstitution} />)