@openneuro/app 4.30.2 → 4.31.0

package/src/scripts/users/user-notification-list.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react"
+import styles from "./scss/usernotifications.module.scss"
+import { NotificationAccordion } from "./user-notification-accordion"
+
+// NotificationsList Component
+export const NotificationsList = ({ notificationdata }) => {
+  const [notifications, setNotifications] = useState(notificationdata)
+
+  const handleUpdateNotification = (id, updates) => {
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) =>
+        notification.id === id ? { ...notification, ...updates } : notification
+      )
+    )
+  }
+  return (
+    <ul className={styles.notificationsList}>
+      {notifications.map((notification) => (
+        <NotificationAccordion
+          key={notification.id}
+          notification={notification}
+          onUpdate={handleUpdateNotification}
+        />
+      ))}
+    </ul>
+  )
+}

package/src/scripts/users/user-notifications-tab-content.tsx

@@ -0,0 +1,85 @@
+import React from "react"
+import { NotificationsList } from "./user-notification-list"
+
+// Dummy notifications
+const dummyNotifications = [
+  {
+    id: 1,
+    title: "New Comment on Your dataset",
+    content: "A user has commented on your dataset. View here",
+    status: "unread",
+    type: "general",
+    approval: "",
+  },
+  {
+    id: 2,
+    title: "Example No Approval State ",
+    content: "",
+    status: "unread",
+    type: "approval",
+    approval: "not provided",
+  },
+  {
+    id: 3,
+    title: "Example Denied State",
+    content: "",
+    status: "unread",
+    type: "approval",
+    approval: "denied",
+  },
+  {
+    id: 4,
+    title: "Example Approved State",
+    content: "",
+    status: "unread",
+    type: "approval",
+    approval: "approved",
+  },
+  {
+    id: 5,
+    title: "Saved Notification Example",
+    content: "This is an example of a saved notification.",
+    status: "saved",
+    type: "general",
+    approval: "",
+  },
+  {
+    id: 6,
+    title: "Archived Notification Example",
+    content: "This is an example of an archived notification.",
+    status: "archived",
+    type: "general",
+    approval: "",
+  },
+]
+
+// Tab Components for Different Notifications
+export const UnreadNotifications = () => (
+  <div className="tabContentUnread">
+    <NotificationsList
+      notificationdata={dummyNotifications.filter(
+        (notification) => notification.status === "unread",
+      )}
+    />
+  </div>
+)
+
+export const SavedNotifications = () => (
+  <div className="tabContentSaved">
+    <NotificationsList
+      notificationdata={dummyNotifications.filter(
+        (notification) => notification.status === "saved",
+      )}
+    />
+  </div>
+)
+
+export const ArchivedNotifications = () => (
+  <div className="tabContentArchived">
+    <NotificationsList
+      notificationdata={dummyNotifications.filter(
+        (notification) => notification.status === "archived",
+      )}
+    />
+  </div>
+)

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

@@ -1,11 +1,109 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
+import {
+  NavLink,
+  Outlet,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom"
+import styles from "./scss/usernotifications.module.scss"
+import iconUnread from "../../assets/icon-unread.png"
+import iconSaved from "../../assets/icon-saved.png"
+import iconArchived from "../../assets/icon-archived.png"
 
 export const UserNotificationsView = ({ user }) => {
-  // this is a placeholder for the user notification feature
+  const tabsRef = useRef<HTMLUListElement | null>(null)
+  const { tab = "unread" } = useParams()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  // Explicitly define the type of indicatorStyle
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
+    width: "0px",
+    transform: "translateX(0px)",
+    position: "absolute",
+    bottom: "0px",
+    height: "2px",
+    backgroundColor: "#000",
+    transition: "transform 0.3s ease, width 0.3s ease",
+  })
+
+  // Update the indicator position based on active tab whenever location changes
+  useEffect(() => {
+    const activeLink = tabsRef.current?.querySelector(`.${styles.active}`)
+    if (activeLink) {
+      const li = activeLink.parentElement as HTMLElement
+      if (li) {
+        setIndicatorStyle({
+          width: `${li.offsetWidth}px`,
+          transform: `translateX(${li.offsetLeft}px)`,
+          position: "absolute",
+          bottom: "0px",
+          height: "2px",
+          backgroundColor: "#000",
+          transition: "transform 0.3s ease, width 0.3s ease",
+        })
+      }
+    }
+  }, [location])
+
+  // Redirect to default tab if no tab is specified
+  useEffect(() => {
+    if (!["unread", "saved", "archived"].includes(tab)) {
+      navigate(`/user/${user.orcid}/notifications/unread`, { replace: true })
+    }
+  }, [tab, user.orcid, navigate])
+
   return (
     <div data-testid="user-notifications-view">
-      <h3>UserNotificationsPAge for {user.name}</h3>
-      <p>This should show user info</p>
+      <h3>Notifications for {user.name}</h3>
+      <div className={styles.tabContainer}>
+        <ul className={styles.tabs} ref={tabsRef}>
+          <li>
+            <NavLink
+              to={`/user/${user.orcid}/notifications/unread`}
+              className={({ isActive }) =>
+                isActive
+                  ? `${styles.active} ${styles.tabUnread}`
+                  : styles.tabUnread}
+            >
+              <img className={styles.tabicon} src={iconUnread} alt="" /> Unread
+              <span className={styles.count}>121</span>
+            </NavLink>
+          </li>
+          <li>
+            <NavLink
+              to={`/user/${user.orcid}/notifications/saved`}
+              className={({ isActive }) =>
+                isActive
+                  ? `${styles.active} ${styles.tabSaved}`
+                  : styles.tabSaved}
+            >
+              <img className={styles.tabicon} src={iconSaved} alt="" /> Saved
+              <span className={styles.count}>121</span>
+            </NavLink>
+          </li>
+          <li>
+            <NavLink
+              to={`/user/${user.orcid}/notifications/archived`}
+              className={({ isActive }) =>
+                isActive
+                  ? `${styles.active} ${styles.tabArchived}`
+                  : styles.tabArchived}
+            >
+              <img className={styles.tabicon} src={iconArchived} alt="" />{" "}
+              Archived
+              <span className={styles.count}>121</span>
+            </NavLink>
+          </li>
+        </ul>
+
+        {/* This is the indicator that will follow the active tab */}
+        <span style={indicatorStyle}></span>
+      </div>
+      <div className={styles.tabContent}>
+        <Outlet />
+      </div>
     </div>
   )
 }

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

@@ -35,18 +35,6 @@ mutation updateUser($id: ID!, $location: String, $links: [String], $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)
@@ -57,6 +45,7 @@ export const UserQuery: React.FC = () => {
 
   const [cookies] = useCookies()
   const profile = getProfile(cookies)
+  const isAdminUser = isAdmin()
 
   if (!isOrcidValid) {
     return <FourOFourPage />
@@ -68,9 +57,12 @@ export const UserQuery: React.FC = () => {
     return <FourOFourPage />
   }
 
-  // is admin or profile matches id from the user data being returned
-  const hasEdit = isAdmin || data.user.id !== profile.sub ? true : false
+  if (!profile || !profile.sub) {
+    return <FourOFourPage />
+  }
 
+  // is admin or profile matches id from the user data being returned
+  const hasEdit = isAdminUser || (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

@@ -6,23 +6,13 @@ import { UserNotificationsView } from "./user-notifications-view"
 import { UserDatasetsView } from "./user-datasets-view"
 import FourOFourPage from "../errors/404page"
 import FourOThreePage from "../errors/403page"
+import {
+  ArchivedNotifications,
+  SavedNotifications,
+  UnreadNotifications,
+} from "./user-notifications-tab-content"
 
-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
-}
+import type { UserRoutesProps } from "../types/user-types"
 
 export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
   return (
@@ -32,7 +22,10 @@ export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
         path="*"
         element={<UserAccountContainer user={user} hasEdit={hasEdit} />}
       >
-        <Route path="" element={<UserDatasetsView user={user} />} />
+        <Route
+          path=""
+          element={<UserDatasetsView user={user} hasEdit={hasEdit} />}
+        />
         <Route
           path="account"
           element={hasEdit
@@ -40,11 +33,17 @@ export const UserRoutes: React.FC<UserRoutesProps> = ({ user, hasEdit }) => {
             : <FourOThreePage />}
         />
         <Route
-          path="notifications"
+          path="notifications/*"
           element={hasEdit
             ? <UserNotificationsView user={user} />
             : <FourOThreePage />}
-        />
+        >
+          <Route index element={<UnreadNotifications />} />
+          <Route path="unread" element={<UnreadNotifications />} />
+          <Route path="saved" element={<SavedNotifications />} />
+          <Route path="archived" element={<ArchivedNotifications />} />
+          <Route path="*" element={<FourOFourPage />} />
+        </Route>
         <Route path="*" element={<FourOFourPage />} />
       </Route>
     </Routes>

package/src/scripts/utils/__tests__/user-datasets.spec.tsx

@@ -0,0 +1,86 @@
+import { filterAndSortDatasets } from "../user-datasets"
+import type { Dataset } from "../../types/user-types"
+
+describe("filterAndSortDatasets", () => {
+  const datasets: Dataset[] = [
+    {
+      id: "1",
+      name: "Dataset Bel",
+      created: "2025-01-21T12:00:00Z",
+      latestSnapshot: {
+        id: "1.0.0",
+        size: 1024,
+        issues: [{ severity: "low" }],
+        created: "2025-01-22T12:00:00Z",
+      },
+      public: true,
+      analytics: { downloads: 0, views: 10 },
+    },
+    {
+      id: "2",
+      name: "Dataset Ael",
+      created: "2025-01-22T12:00:00Z",
+      latestSnapshot: {
+        id: "2.0.0",
+        size: 2048,
+        issues: [{ severity: "high" }],
+        created: "2025-01-23T12:00:00Z",
+      },
+      public: false,
+      analytics: { downloads: 5, views: 20 },
+    },
+    {
+      id: "3",
+      name: "Dataset Cel",
+      created: "2025-01-20T12:00:00Z",
+      latestSnapshot: {
+        id: "3.0.0",
+        size: 4096,
+        issues: [{ severity: "medium" }],
+        created: "2025-01-20T12:00:00Z",
+      },
+      public: true,
+      analytics: { downloads: 15, views: 30 },
+    },
+  ]
+
+  it("filters and sorts datasets by name ascending", () => {
+    const result = filterAndSortDatasets(datasets, {
+      searchQuery: "",
+      publicFilter: "all",
+      sortOrder: "name-asc",
+    })
+    expect(result.map((d) => d.name)).toEqual([
+      "Dataset Ael",
+      "Dataset Bel",
+      "Dataset Cel",
+    ])
+  })
+
+  it("filters datasets by public visibility and sorts by name descending", () => {
+    const result = filterAndSortDatasets(datasets, {
+      searchQuery: "",
+      publicFilter: "public",
+      sortOrder: "name-desc",
+    })
+    expect(result.map((d) => d.name)).toEqual(["Dataset Cel", "Dataset Bel"])
+  })
+
+  it("filters datasets by search query and sorts by newest date", () => {
+    const result = filterAndSortDatasets(datasets, {
+      searchQuery: "Ael",
+      publicFilter: "all",
+      sortOrder: "date-newest",
+    })
+    expect(result.map((d) => d.name)).toEqual(["Dataset Ael"])
+  })
+
+  it("returns datasets unchanged for unknown sort order", () => {
+    const result = filterAndSortDatasets(datasets, {
+      searchQuery: "",
+      publicFilter: "all",
+      sortOrder: "unknown-order",
+    })
+    expect(result).toEqual(datasets)
+  })
+})

package/src/scripts/utils/gtag.js

@@ -1,8 +1,9 @@
 /*global globalThis*/
 globalThis.dataLayer = globalThis.dataLayer || []
 
-function gtag(...args) {
-  globalThis.dataLayer.push(args)
+function gtag() {
+  // eslint-disable-next-line prefer-rest-params
+  globalThis.dataLayer.push(arguments)
 }
 
 gtag("js", new Date())

package/src/scripts/utils/user-datasets.tsx

@@ -0,0 +1,60 @@
+import type { Dataset } from "../types/user-types"
+export interface FilterOptions {
+  searchQuery: string
+  publicFilter: string
+  sortOrder: string
+}
+
+export function filterAndSortDatasets(
+  datasets: Dataset[],
+  { searchQuery, publicFilter, sortOrder }: FilterOptions,
+): Dataset[] {
+  const filteredDatasets = datasets.filter((dataset) => {
+    const matchesSearch = searchQuery === "" ||
+      (dataset.name &&
+        dataset.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
+      (dataset.id &&
+        dataset.id.toLowerCase().includes(searchQuery.toLowerCase()))
+
+    const matchesPublicFilter = publicFilter === "all" ||
+      (publicFilter === "public" && dataset.public) ||
+      (publicFilter === "private" && !dataset.public)
+
+    return matchesSearch && matchesPublicFilter
+  })
+
+  const sortedDatasets = filteredDatasets.sort((a, b) => {
+    let comparisonResult = 0
+
+    // Move declarations outside the switch block
+    let aUpdated: Date | string
+    let bUpdated: Date | string
+
+    switch (sortOrder) {
+      case "name-asc":
+        comparisonResult = (a.name || "").localeCompare(b.name || "")
+        break
+      case "name-desc":
+        comparisonResult = (b.name || "").localeCompare(a.name || "")
+        break
+      case "date-newest":
+        comparisonResult =
+          new Date(b.latestSnapshot?.created || b.created).getTime() -
+          new Date(a.latestSnapshot?.created || a.created).getTime()
+        break
+      case "date-updated":
+        aUpdated = a.latestSnapshot?.created || a.created
+        bUpdated = b.latestSnapshot?.created || b.created
+        comparisonResult = new Date(bUpdated).getTime() -
+          new Date(aUpdated).getTime()
+        break
+      default:
+        comparisonResult = 0
+        break
+    }
+
+    return comparisonResult
+  })
+
+  return sortedDatasets
+}

package/src/scripts/validation/__tests__/__snapshots__/validation-issues.spec.tsx.snap

@@ -67,128 +67,7 @@ exports[`Issues component > renders multiple issues 1`] = `
       </div>
       <div
         class="accordion-item  collapsed "
-      >
-        <div
-          class="accordion-content"
-        >
-          <div
-            class="em-body"
-          >
-            <div
-              class="e-meta"
-            >
-              <label>
-                /dataset_description.json
-              </label>
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Rule:
-              </label>
-               rules.dataset_metadata.dataset_description
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Messages:
-              </label>
-              <p>
-                A JSON file is missing a key listed as recommended.
-              </p>
-            </div>
-          </div>
-          <div
-            class="em-body"
-          >
-            <div
-              class="e-meta"
-            >
-              <label>
-                /dataset_description.json
-              </label>
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Rule:
-              </label>
-               rules.dataset_metadata.dataset_description
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Messages:
-              </label>
-              <p>
-                A JSON file is missing a key listed as recommended.
-              </p>
-            </div>
-          </div>
-          <div
-            class="em-body"
-          >
-            <div
-              class="e-meta"
-            >
-              <label>
-                /dataset_description.json
-              </label>
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Rule:
-              </label>
-               rules.dataset_metadata.dataset_description
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Messages:
-              </label>
-              <p>
-                A JSON file is missing a key listed as recommended.
-              </p>
-            </div>
-          </div>
-          <div
-            class="em-body"
-          >
-            <div
-              class="e-meta"
-            >
-              <label>
-                /dataset_description.json
-              </label>
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Rule:
-              </label>
-               rules.dataset_metadata.dataset_description
-            </div>
-            <div
-              class="e-meta"
-            >
-              <label>
-                Messages:
-              </label>
-              <p>
-                A JSON file is missing a key listed as recommended.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
+      />
     </article>
   </div>
 </DocumentFragment>

package/src/scripts/validation/validation-results-query.ts

@@ -0,0 +1,44 @@
+import { DatasetIssues } from "@bids/validator/issues"
+import { gql, useQuery } from "@apollo/client"
+import { VALIDATION_FIELDS } from "../datalad/dataset/dataset-query-fragments"
+
+export const VALIDATION_DATA_QUERY = gql`
+query ($datasetId: ID!, $version: String!) {
+  snapshot(datasetId: $datasetId, tag: $version) {
+    validation {
+      id
+      datasetId
+      warnings
+      errors
+      issues {
+        ${VALIDATION_FIELDS}
+      }
+      codeMessages {
+        code
+        message
+      }
+    }
+  }
+}
+`
+
+export const useValidationResults = (datasetId: string, version: string) => {
+  const { loading, error, data } = useQuery(VALIDATION_DATA_QUERY, {
+    variables: { datasetId, version },
+  })
+  const issues = new DatasetIssues()
+  // After loading, construct the dataset issues object for our hook
+  if (!loading && !error) {
+    const validation = data.snapshot.validation
+    // Reconstruct DatasetIssues from JSON
+    issues.issues = validation.issues
+    issues.codeMessages = validation.codeMessages.reduce(
+      (acc, curr) => {
+        acc.set(curr.code, curr.message)
+        return acc
+      },
+      new Map<string, string>(),
+    )
+  }
+  return { loading, error, issues }
+}