@openneuro/app 4.29.8 → 4.30.0-alpha.0

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

@@ -0,0 +1,38 @@
+.usercontainer {
+    display: flex;
+    min-height: calc(100vh - 350px);
+}
+
+.userHeader {
+  display: flex;
+  align-items: center;
+    margin: 10px 0 0;
+    height: 100px;
+  .avatar {
+    border-radius: 50%;
+    margin-right: 10px;
+    width: 60px;
+    height: 60px;
+  }
+  .username {
+  }
+  h2 {
+    font-size: 35px;
+    line-height: 38px;
+    font-weight: 400;
+  }
+}
+
+.userSidebar {
+  width: 350px;
+  flex: 0 0 auto;
+  padding: 0;
+  width: 430px;
+}
+.userViews {
+  border-left: 1px solid #e0e0e0;
+  flex: 1;
+  padding: 0 0 0 50px;
+  position: relative;
+  max-width: 100%;
+}

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

@@ -0,0 +1,63 @@
+.userAccountTabLinks {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    position: relative;
+
+    &:before,
+    &:after {
+      content: '';
+      width: calc(100% - 60px);
+      height: 32px;
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: translateY(var(--active-offset, 0));
+      margin-left: 25px;
+      border-radius: 8px;
+      transition: transform 0.3s ease; /* Always apply transition */
+    }
+    /* Apply animation when clicked */
+    // not working for some reason
+    // &.clicked:before,
+    // &.clicked:after {
+    //   transform: translateY(var(--active-offset, 0));
+    //   transition: transform 0.3s ease; /* Ensure transition */
+    // }
+
+    &:before {
+      background: #eee;
+      margin: 0 20px 0 35px;
+    }
+
+    &:after {
+      height: 23px;
+      margin: 5px 0 0px 25px;
+      width: 5px;
+      background: #204e5b;
+    }
+
+    li {
+      margin: 10px 25px;
+      position: relative;
+
+      a {
+        padding: 5px 10px 5px 20px;
+        border-radius: 4px;
+        display: block;
+        text-decoration: none;
+        background-color: transparent;
+        transition: background-color 0.3s;
+        &.active {
+          font-weight: bold;
+          &:hover {
+            color: #204e5b;
+            cursor: default;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+import React, { useState } from "react"
+import { useMutation } from "@apollo/client"
+import { EditableContent } from "./components/editable-content"
+import styles from "./scss/useraccountview.module.scss"
+import { GET_USER_BY_ORCID, UPDATE_USER } from "./user-query"
+
+interface UserAccountViewProps {
+  user: {
+    name: string
+    email: string
+    orcid: string
+    links: string[]
+    location: string
+    institution: string
+    github?: string
+  }
+}
+
+export const UserAccountView: React.FC<UserAccountViewProps> = ({ user }) => {
+  const [userLinks, setLinks] = useState<string[]>(user.links || [])
+  const [userLocation, setLocation] = useState<string>(user.location || "")
+  const [userInstitution, setInstitution] = useState<string>(
+    user.institution || "",
+  )
+  const [updateUser] = useMutation(UPDATE_USER)
+
+  const handleLinksChange = async (newLinks: string[]) => {
+    setLinks(newLinks)
+    try {
+      await updateUser({
+        variables: {
+          id: user.orcid,
+          links: newLinks,
+        },
+        refetchQueries: [
+          {
+            query: GET_USER_BY_ORCID,
+            variables: { id: user.orcid },
+          },
+        ],
+      })
+    } catch {
+      // Error handling can be implemented here if needed
+    }
+  }
+
+  const handleLocationChange = async (newLocation: string) => {
+    setLocation(newLocation)
+
+    try {
+      await updateUser({
+        variables: {
+          id: user.orcid,
+          location: newLocation,
+        },
+        refetchQueries: [
+          {
+            query: GET_USER_BY_ORCID,
+            variables: { id: user.orcid },
+          },
+        ],
+      })
+    } catch {
+      // Error handling can be implemented here if needed
+    }
+  }
+
+  const handleInstitutionChange = async (newInstitution: string) => {
+    setInstitution(newInstitution)
+
+    try {
+      await updateUser({
+        variables: {
+          id: user.orcid,
+          institution: newInstitution,
+        },
+        refetchQueries: [
+          {
+            query: GET_USER_BY_ORCID,
+            variables: { id: user.orcid },
+          },
+        ],
+      })
+    } catch {
+      // Error handling can be implemented here if needed
+    }
+  }
+
+  return (
+    <div data-testid="user-account-view" className={styles.useraccountview}>
+      <h3>Account</h3>
+      <ul className={styles.accountDetail}>
+        <li>
+          <span>Name:</span>
+          {user.name}
+        </li>
+        <li>
+          <span>Email:</span>
+          {user.email}
+        </li>
+        <li>
+          <span>ORCID:</span>
+          {user.orcid}
+        </li>
+        {user.github
+          ? (
+            <li>
+              <span>GitHub:</span>
+              {user.github}
+            </li>
+          )
+          : <li>Connect your GitHub</li>}
+      </ul>
+
+      <EditableContent
+        editableContent={userLinks}
+        setRows={handleLinksChange}
+        className="custom-class"
+        heading="Links"
+        // eslint-disable-next-line no-useless-escape
+        validation={/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/} // URL validation regex
+        validationMessage="Invalid URL format. Please use a valid link."
+        data-testid="links-section"
+      />
+
+      <EditableContent
+        editableContent={userLocation}
+        setRows={handleLocationChange}
+        className="custom-class"
+        heading="Location"
+        data-testid="location-section"
+      />
+      <EditableContent
+        editableContent={userInstitution}
+        setRows={handleInstitutionChange}
+        className="custom-class"
+        heading="Institution"
+        data-testid="institution-section"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,86 @@
+import React from "react"
+import styles from "./scss/usercard.module.scss"
+
+export interface User {
+  name: string
+  location?: string
+  email: string
+  orcid: string
+  institution?: string
+  links?: string[]
+  github?: string
+}
+
+export interface UserCardProps {
+  user: User
+}
+
+export const UserCard: React.FC<UserCardProps> = ({ user }) => {
+  const { location, institution, email, orcid, links = [], github, name } = user
+
+  return (
+    <div className={styles.userCard}>
+      <ul>
+        {institution && (
+          <li>
+            <i className="fa fa-building"></i>
+            {institution}
+          </li>
+        )}
+        {location && (
+          <li>
+            <i className="fas fa-map-marker-alt"></i>
+            {location}
+          </li>
+        )}
+        <li>
+          <i className="fas fa-envelope"></i>
+          <a
+            href={"mailto:" + email}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {email}
+          </a>
+        </li>
+        {orcid && (
+          <li className={styles.orcid}>
+            <i className="fab fa-orcid" aria-hidden="true"></i>
+            <a
+              href={`https://orcid.org/${orcid}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`ORCID profile of ${name}`}
+            >
+              {orcid}
+            </a>
+          </li>
+        )}
+        {github && (
+          <li>
+            <i className="fab fa-github"></i>
+            <a
+              href={`https://github.com/${github}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Github profile of ${name}`}
+            >
+              {github}
+            </a>
+          </li>
+        )}
+        {links.length > 0 &&
+          links
+            .filter(Boolean)
+            .map((link, index) => (
+              <li key={index}>
+                <i className="fa fa-link"></i>
+                <a href={link} target="_blank" rel="noopener noreferrer">
+                  {link}
+                </a>
+              </li>
+            ))}
+      </ul>
+    </div>
+  )
+}

package/src/scripts/users/user-container.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { Outlet } from "react-router-dom"
+import { UserCard } from "./user-card"
+import { UserAccountTabs } from "./user-tabs"
+import styles from "./scss/usercontainer.module.scss"
+
+interface User {
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
+}
+
+interface AccountContainerProps {
+  user: User
+  hasEdit: boolean
+}
+
+export const UserAccountContainer: React.FC<AccountContainerProps> = ({
+  user,
+  hasEdit,
+}) => {
+  return (
+    <>
+      <div className="container">
+        <header className={styles.userHeader}>
+          {user.avatar && (
+            <img className={styles.avatar} src={user.avatar} alt={user.name} />
+          )}
+          <h2 className={styles.username}>{user.name}</h2>
+        </header>
+      </div>
+      <div className={styles.usercontainer + " container"}>
+        <section className={styles.userSidebar}>
+          <UserCard user={user} />
+          <UserAccountTabs hasEdit={hasEdit} />
+        </section>
+        <section className={styles.userViews}>
+          <Outlet />
+        </section>
+      </div>
+    </>
+  )
+}

package/src/scripts/users/user-datasets-view.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+
+interface User {
+  name: string
+}
+
+interface Dataset {
+  id: string
+  created: string
+  ownerId: string
+  name: string
+  type: string
+}
+
+interface UserDatasetsViewProps {
+  user: User
+}
+
+const dummyDatasets: Dataset[] = [
+  {
+    id: "ds00001",
+    created: "2023-11-01T12:00:00Z",
+    ownerId: "1",
+    name: "Dataset 1",
+    type: "public",
+  },
+  {
+    id: "ds00002",
+    created: "2023-11-02T12:00:00Z",
+    ownerId: "2",
+    name: "Dataset 2",
+    type: "private",
+  },
+]
+
+export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({ user }) => {
+  return (
+    <div data-testid="user-datasets-view">
+      <h1>{user.name}'s Datasets</h1>
+      <div>
+        {dummyDatasets.map((dataset) => (
+          <div key={dataset.id} data-testid={`dataset-${dataset.id}`}>
+            <h2>{dataset.name}</h2>
+            <p>Type: {dataset.type}</p>
+            <p>Created: {dataset.created}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default UserDatasetsView

package/src/scripts/users/user-notifications-view.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+export const UserNotificationsView = ({ user }) => {
+  // this is a placeholder for the user notification feature
+  return (
+    <div data-testid="user-notifications-view">
+      <h3>UserNotificationsPAge for {user.name}</h3>
+      <p>This should show user info</p>
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+import React from "react"
+import { useParams } from "react-router-dom"
+import { UserRoutes } from "./user-routes"
+import FourOFourPage from "../errors/404page"
+import { isValidOrcid } from "../utils/validationUtils"
+import { gql, useQuery } from "@apollo/client"
+import { isAdmin } from "../authentication/admin-user"
+import { useCookies } from "react-cookie"
+import { getProfile } from "../authentication/profile"
+
+// GraphQL query to fetch user by ORCID
+export const GET_USER_BY_ORCID = gql`
+  query User($userId: ID!) {
+    user(id: $userId) {
+      id
+      name
+      orcid
+      email
+      avatar
+      location
+      institution
+      links
+    }
+  }
+`
+
+export const UPDATE_USER = gql`
+mutation updateUser($id: ID!, $location: String, $links: [String], $institution: String) {
+  updateUser(id: $id, location: $location, links: $links, institution: $institution) {
+    id
+    location
+    links
+    institution
+  }
+}
+`
+
+export interface User {
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
+}
+
+export const UserQuery: React.FC = () => {
+  const { orcid } = useParams()
+  const isOrcidValid = orcid && isValidOrcid(orcid)
+  const { data, loading, error } = useQuery(GET_USER_BY_ORCID, {
+    variables: { userId: orcid },
+    skip: !isOrcidValid,
+  })
+
+  const [cookies] = useCookies()
+  const profile = getProfile(cookies)
+
+  if (!isOrcidValid) {
+    return <FourOFourPage />
+  }
+
+  if (loading) return <div>Loading...</div>
+
+  if (error || !data?.user || data.user.orcid !== orcid) {
+    return <FourOFourPage />
+  }
+
+  // is admin or profile matches id from the user data being returned
+  const hasEdit = isAdmin || data.user.id !== profile.sub ? true : false
+
+  // Render user data with UserRoutes
+  return <UserRoutes user={data.user} hasEdit={hasEdit} />
+}

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { Route, Routes } from "react-router-dom"
+import { UserAccountContainer } from "./user-container"
+import { UserAccountView } from "./user-account-view"
+import { UserNotificationsView } from "./user-notifications-view"
+import { UserDatasetsView } from "./user-datasets-view"
+import FourOFourPage from "../errors/404page"
+import FourOThreePage from "../errors/403page"
+
+export interface User {
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
+}
+
+interface UserRoutesProps {
+  user: User
+  hasEdit: boolean
+}
+
+export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
+  return (
+    <Routes>
+      <Route path="/*" element={<FourOFourPage />} />
+      <Route
+        path="*"
+        element={<UserAccountContainer user={user} hasEdit={hasEdit} />}
+      >
+        <Route path="" element={<UserDatasetsView user={user} />} />
+        <Route
+          path="account"
+          element={hasEdit
+            ? <UserAccountView user={user} />
+            : <FourOThreePage />}
+        />
+        <Route
+          path="notifications"
+          element={hasEdit
+            ? <UserNotificationsView user={user} />
+            : <FourOThreePage />}
+        />
+        <Route path="*" element={<FourOFourPage />} />
+      </Route>
+    </Routes>
+  )
+}

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useState } from "react"
+import { NavLink, useLocation } from "react-router-dom"
+import styles from "./scss/usertabs.module.scss"
+
+export interface UserAccountTabsProps {
+  hasEdit: boolean
+}
+
+export const UserAccountTabs: React.FC<UserAccountTabsProps> = (
+  { hasEdit },
+) => {
+  const ulRef = useRef<HTMLUListElement>(null)
+  const [activePosition, setActivePosition] = useState<number>(0)
+  const [clicked, setClicked] = useState(false)
+  const location = useLocation()
+
+  useEffect(() => {
+    const activeLink = ulRef.current?.querySelector(
+      `.${styles.active}`,
+    ) as HTMLElement
+    if (activeLink) {
+      const li = activeLink.parentElement as HTMLElement
+      setActivePosition(li.offsetTop)
+    }
+  }, [location])
+
+  const handleClick = () => {
+    setClicked(true)
+  }
+
+  if (!hasEdit) return null
+
+  return (
+    <div className={styles.userAccountTabLinks}>
+      <ul
+        ref={ulRef}
+        className={`${clicked ? "clicked" : ""} ${styles.userAccountTabLinks}`}
+        style={{
+          "--active-offset": `${activePosition}px`,
+        } as React.CSSProperties}
+      >
+        <li>
+          <NavLink
+            to=""
+            end
+            className={({ isActive }) => (isActive ? styles.active : "")}
+            onClick={handleClick}
+          >
+            User Datasets
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            data-testid="user-notifications-tab"
+            to="notifications"
+            className={({ isActive }) => (isActive ? styles.active : "")}
+            onClick={handleClick}
+          >
+            User Notifications
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="account"
+            className={({ isActive }) => (isActive ? styles.active : "")}
+            onClick={handleClick}
+          >
+            Account Info
+          </NavLink>
+        </li>
+      </ul>
+    </div>
+  )
+}

package/src/scripts/utils/__tests__/markdown.spec.tsx

@@ -27,8 +27,7 @@ describe("Test <Markdown> component", () => {
     expect(asFragment()).toMatchSnapshot()
   })
   it("filters close-break tags", () => {
-    const hrefExample =
-      '<br>sample text</br>'
+    const hrefExample = "<br>sample text</br>"
     const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
     expect(asFragment()).toMatchSnapshot()
   })

package/src/scripts/utils/validationUtils.ts

@@ -0,0 +1,8 @@
+/**
+ * Validates an ORCID.
+ * @param orcid - The ORCID string to validate.
+ * @returns `true` if the ORCID is valid, `false` otherwise.
+ */
+export function isValidOrcid(orcid: string): boolean {
+  return /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[0-9X]$/.test(orcid || "")
+}