@openneuro/app 4.29.7 → 4.29.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.29.7",
+  "version": "4.29.9",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -20,7 +20,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.45.1",
-    "@openneuro/components": "^4.29.7",
+    "@openneuro/components": "^4.29.9",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-table": "^8.9.3",
     "buffer": "^6.0.3",
@@ -74,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a11e8c6dfe702377946a26e9d86234593465cd04"
+  "gitHead": "992fc9e3044c67f6d85757ecf252845cfda6e809"
 }

package/src/@types/custom.d.ts

@@ -11,6 +11,14 @@ declare module "*.svg" {
   export = value
 }
 
+
+
+// Allow custom scss modules
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
 // Allow .scss imports
 declare module "*.scss" {
   const value: string

package/src/scripts/dataset/mutations/__tests__/update-permissions.spec.jsx

@@ -2,12 +2,13 @@ import React from "react"
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { MockedProvider } from "@apollo/client/testing"
 import {
-  isValidOrcid,
   UPDATE_ORCID_PERMISSIONS,
   UPDATE_PERMISSIONS,
   UpdateDatasetPermissions,
 } from "../update-permissions"
 
+import { isValidOrcid } from "../../../utils/validationUtils.ts";
+
 function permissionMocksFactory(
   updatePermissionsCalled,
   updateOrcidPermissionsCalled,

package/src/scripts/dataset/mutations/update-permissions.tsx

@@ -7,15 +7,7 @@ import ToastContent from "../../common/partials/toast-content"
 import { validate as isValidEmail } from "email-validator"
 import { Button } from "@openneuro/components/button"
 
-export function isValidOrcid(orcid: string) {
-  if (orcid) {
-    return /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[0-9X]$/.test(orcid)
-      ? true
-      : false
-  } else {
-    return false
-  }
-}
+import { isValidOrcid } from "../../utils/validationUtils";
 
 export const UPDATE_PERMISSIONS = gql`
   mutation updatePermissions(

package/src/scripts/routes.tsx

@@ -5,6 +5,8 @@ import { Navigate, Route, Routes } from "react-router-dom"
 import DatasetQuery from "./dataset/dataset-query"
 //import PreRefactorDatasetProps from './dataset/dataset-pre-refactor-container'
 
+
+
 import FaqPage from "./pages/faq/faq"
 import FrontPageContainer from "./pages/front-page/front-page"
 import Admin from "./pages/admin/admin"
@@ -17,6 +19,7 @@ import FourOFourPage from "./errors/404page"
 import { ImportDataset } from "./pages/import-dataset"
 import { DatasetMetadata } from "./pages/metadata/dataset-metadata"
 import { TermsPage } from "./pages/terms"
+import { UserQuery } from "./users/user-query"
 
 const AppRoutes: React.VoidFunctionComponent = () => (
   <Routes>
@@ -33,6 +36,7 @@ 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="/saved"
       element={<Navigate to="/search?bookmarks" replace />}

package/src/scripts/users/__tests__/user-account-view.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen, fireEvent, within, waitFor} from '@testing-library/react';
+import { UserAccountView } from '../user-account-view';
+
+const baseUser = {
+    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",
+  };
+
+describe('<UserAccountView />', () => {
+  it('should render the user details correctly', () => {
+    render(<UserAccountView user={baseUser} />);
+
+    // Check if user details are rendered
+    expect(screen.getByText('Name:')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Email:')).toBeInTheDocument();
+    expect(screen.getByText('johndoe@example.com')).toBeInTheDocument();
+    expect(screen.getByText('ORCID:')).toBeInTheDocument();
+    expect(screen.getByText('0000-0001-2345-6789')).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'));
+    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(() =>
+      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'));
+    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');
+    const closeButton = locationSection.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(() =>
+      expect(locationSection.getByText('Marin, CA')).toBeInTheDocument()
+    );
+  });
+});

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import type { User } from "../user-card";
+import { UserCard } from "../user-card";
+
+describe("UserCard Component", () => {
+  const baseUser: User = {
+    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",
+  };
+
+  it("renders all user details when all data is provided", () => {
+
+    render(<UserCard user={baseUser} />);
+
+    const orcidLink = screen.getByRole("link", {
+      name: "ORCID profile of John Doe",
+    });
+    expect(orcidLink).toHaveAttribute("href", "https://orcid.org/0000-0001-2345-6789");
+    expect(screen.getByText("University of California")).toBeInTheDocument();
+    expect(screen.getByText("San Francisco, CA")).toBeInTheDocument();
+
+    const emailLink = screen.getByRole("link", { name: "johndoe@example.com" });
+    expect(emailLink).toHaveAttribute("href", "mailto:johndoe@example.com");
+
+    const githubLink = screen.getByRole("link", { name: "Github profile of John Doe", });
+    expect(githubLink).toHaveAttribute("href", "https://github.com/johndoe");
+    expect(
+      screen.getByRole("link", { name: "https://example.com" })
+    ).toHaveAttribute("href", "https://example.com");
+    expect(
+      screen.getByRole("link", { name: "https://example.org" })
+    ).toHaveAttribute("href", "https://example.org");
+  });
+
+  it("renders without optional fields", () => {
+    const minimalUser: User = {
+      name: "Jane Doe",
+      email: "janedoe@example.com",
+      orcid: "0000-0002-3456-7890",
+      links: [],
+    };
+
+    render(<UserCard user={minimalUser} />);
+
+    const orcidLink = screen.getByRole("link", {
+      name: "ORCID profile of Jane Doe",
+    });
+    expect(orcidLink).toHaveAttribute("href", "https://orcid.org/0000-0002-3456-7890");
+    const emailLink = screen.getByRole("link", { name: "janedoe@example.com" });
+    expect(emailLink).toHaveAttribute("href", "mailto:janedoe@example.com");
+    expect(screen.queryByText("University of California")).not.toBeInTheDocument();
+    expect(screen.queryByText("San Francisco, CA")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "Github profile of Jane Doe" })).not.toBeInTheDocument();
+  });
+
+  it("renders correctly when links are empty", () => {
+    const userWithEmptyLinks: User = {
+      ...baseUser,
+      links: [],
+    };
+
+    render(<UserCard user={userWithEmptyLinks} />);
+
+    expect(screen.queryByRole("link", { name: "https://example.com" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "https://example.org" })).not.toBeInTheDocument();
+  });
+
+  it("renders correctly when location and institution are missing", () => {
+    const userWithoutLocationAndInstitution: User = {
+      name: "Emily Doe",
+      email: "emilydoe@example.com",
+      orcid: "0000-0003-4567-8901",
+      links: ["https://example.com"],
+    };
+
+    render(<UserCard user={userWithoutLocationAndInstitution} />);
+
+    const orcidLink = screen.getByRole("link", {
+      name: "ORCID profile of Emily Doe",
+    });
+    expect(orcidLink).toHaveAttribute("href", "https://orcid.org/0000-0003-4567-8901");
+    const emailLink = screen.getByRole("link", { name: "emilydoe@example.com" });
+    expect(emailLink).toHaveAttribute("href", "mailto:emilydoe@example.com");
+    const link = screen.getByRole("link", { name: "https://example.com" });
+    expect(link).toHaveAttribute("href", "https://example.com");
+    expect(screen.queryByText("San Francisco, CA")).not.toBeInTheDocument();
+    expect(screen.queryByText("University of California")).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { UserQuery } from "../user-query";
+import FourOFourPage from "../../errors/404page";
+
+
+// TODO update these once the correct query is in place and dummy data is not used.
+// maybe there is a better way to do this
+const VALID_ORCID = "0000-0001-6755-0259";
+const INVALID_ORCID = "0000-000X-1234-5678";
+const UNKNOWN_ORCID = "0000-0000-0000-0000";
+
+const renderWithRouter = (orcid: string) => {
+  return render(
+    <MemoryRouter initialEntries={[`/user/${orcid}`]}>
+      <Routes>
+        <Route path="/user/:orcid" element={<UserQuery />} />
+        <Route path="*" element={<FourOFourPage />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+describe("UserQuery Component", () => {
+  // TODO update these once the correct query is in place and dummy data is not used.
+  // maybe there is a better way to do this
+  it("renders UserRoutes for a valid ORCID", async () => {
+    renderWithRouter(VALID_ORCID);
+    const userName = await screen.findByText("Gregory Noack");
+    expect(userName).toBeInTheDocument();
+
+    const userLocation = screen.getByText("Stanford, CA");
+    expect(userLocation).toBeInTheDocument();
+  });
+
+  it("renders FourOFourPage for an invalid ORCID", async () => {
+    renderWithRouter(INVALID_ORCID);
+    const errorMessage = await screen.findByText(
+      /404: The page you are looking for does not exist./i
+    );
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  it("renders FourOFourPage for a missing ORCID", async () => {
+    renderWithRouter("");
+    const errorMessage = await screen.findByText(
+      /404: The page you are looking for does not exist./i
+    );
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  it("renders FourOFourPage for an unknown ORCID", async () => {
+    renderWithRouter(UNKNOWN_ORCID);
+    const errorMessage = await screen.findByText(
+      /404: The page you are looking for does not exist./i
+    );
+    expect(errorMessage).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { render, screen, cleanup } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { UserRoutes } from "../user-routes";
+import type { User } from "../user-routes"; 
+
+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 renderWithRouter = (user: User, route: string, hasEdit: boolean) => {
+  return render(
+    <MemoryRouter initialEntries={[route]}>
+      <UserRoutes user={user} hasEdit={hasEdit} />
+    </MemoryRouter>
+  );
+};
+
+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,87 @@
+import React, { useState } from "react";
+import { render, screen, fireEvent } 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,79 @@
+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;
+}
+
+/**
+ * EditList Component
+ * Allows adding and removing strings from a list.
+ */
+export const EditList: React.FC<EditListProps> = ({ placeholder = 'Enter item', elements = [], setElements }) => {
+  const [newElement, setNewElement] = useState<string>('');
+  const [warnEmpty, setWarnEmpty] = useState<boolean>(false);
+
+  /**
+   * 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
+   */
+  const addElement = (): void => {
+    if (!newElement.trim()) {
+      setWarnEmpty(true);
+    } else {
+      setElements([...elements, newElement.trim()]);
+      setWarnEmpty(false);
+      setNewElement('');
+    }
+  };
+
+  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)}
+        />
+        <Button
+          className="edit-list-add"
+          primary={true}
+          size="small"
+          label="Add"
+          onClick={addElement}
+        />
+      </div>
+      {warnEmpty && <small className="warning-text">Your input was empty</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,49 @@
+import React, { 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;
+}
+
+/**
+ * EditString Component
+ * Allows editing a single string value.
+ */
+export const EditString: React.FC<EditStringProps> = ({ value = '', setValue, placeholder = 'Enter text' }) => {
+  const [currentValue, setCurrentValue] = useState<string>(value);
+  const [warnEmpty, setWarnEmpty] = useState<boolean>(false);
+
+  const handleSave = (): void => {
+    if (!currentValue.trim()) {
+      setWarnEmpty(true);
+    } else {
+      setWarnEmpty(false);
+      setValue(currentValue.trim());
+    }
+  };
+
+  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)}
+        />
+        <Button
+          className="edit-string-save"
+          primary={true}
+          size="small"
+          label="Save"
+          onClick={handleSave}
+        />
+      </div>
+      {warnEmpty && <small className="warning-text">The input cannot be empty</small>}
+    </div>
+  );
+};