@openneuro/app 4.30.2 → 4.31.0

package/src/scripts/users/fragments/query.js

@@ -0,0 +1,42 @@
+import { gql } from "@apollo/client"
+
+export const INDEX_DATASET_FRAGMENT = gql`
+  fragment DatasetIndex on Dataset {
+    id
+    created
+    name
+    public
+    analytics {
+        views
+        downloads
+    }
+    stars {
+        userId
+        datasetId
+    }
+    followers {
+        userId
+        datasetId
+    }
+    latestSnapshot {
+        id
+        size
+        created
+        issues {
+        severity
+        }
+        description {
+        Name
+        Authors
+        SeniorAuthor
+        DatasetType
+        }
+    }
+    draft {
+        id
+    }
+    uploader {
+        id
+    }
+  }
+`

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

@@ -0,0 +1,153 @@
+.userDsWrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  
+  .userDsCard {
+    background: #fff;
+    border: 1px solid #ddd;
+    width: calc(50% - 10px);
+    padding: 10px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  
+    h4 {
+      margin: 0 0 30px;
+      font-size: 19px;
+    }
+  
+    .userDsFooter {
+      display: flex;
+      justify-content: space-between;
+  
+      .userMetawrap {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+  
+        span {
+          color: #777;
+  
+          b {
+            color: #000;
+          }
+  
+          &:first-child {
+            font-size: 13px;
+            margin-bottom: 10px;
+          }
+  
+          &:last-child {
+            text-transform: uppercase;
+            font-weight: bold;
+  
+            b {
+              text-transform: none;
+            }
+          }
+        }
+      }
+  
+      .userIconwrap {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+  }
+  
+  .userDSfilters {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+    padding-bottom:20px;
+    align-items: center;
+    z-index: 10000;
+    position: relative;
+    border-bottom: 2px solid #eee;
+  
+    input {
+      min-width: 50%;
+      margin-right: auto;
+    }
+  
+    .filterDiv,
+    .sortDiv {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      position: relative;
+      margin-bottom: 5px;
+    }
+  
+    /* Caret icon */
+    .filterDiv span::after,
+    .sortDiv span::after {
+      content: "";
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid #333;
+      margin-left: 10px;
+      transition: transform 0.3s ease;
+      display: inline-block;
+      margin-bottom: 3px;
+    }
+  
+    .filterDiv.open span::after,
+    .sortDiv.open span::after {
+      transform: rotate(180deg); /* Rotate the caret when open */
+    }
+  
+    .filterDropdown,
+    .sortDropdown {
+      position: relative;
+  
+      ul {
+        position: absolute;
+        list-style-type: none;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding: 20px;
+        background-color: white;
+        border: 1px solid #ddd;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+        right: 0;
+        top: 20px;
+        min-width: 200px;
+        li {
+          padding: 8px;
+          cursor: pointer;
+  
+          &:hover {
+            background-color: #f4f4f4;
+          }
+  
+          &.active {
+            font-weight: bold;
+            color: var(--on-dark-aqua);
+          }
+        }
+      }
+    }
+  
+    .filterDropdown {  
+      ul {min-width: 120px;}
+    }
+    .sortDiv {
+      margin-left: 20px;
+    }
+  }
+  
+
+  .resultsSummary{
+    width: 100%;
+    font-size: 13px;
+    margin: 10px 0 0;
+  }

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

@@ -0,0 +1,159 @@
+.tabContainer {
+  position: relative;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 40px;
+  .tabs {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    li {
+      position: relative;
+      margin: 0 20px 0 0;
+
+      a {
+        &.tabUnread,
+        &.tabSaved,
+        &.tabArchived {
+          display: flex;
+          text-decoration: none;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          position: relative;
+          z-index: 1;
+          .tabicon {
+            width: 20px;
+            margin-right: 5px;
+          }
+          &.tabUnread .tabicon {
+            width: 18px;
+          }
+          &.tabArchived .tabicon {
+            width: 16px;
+          }
+          span {
+            background-color: #eee;
+            padding: 2px 5px;
+            margin: 0 0 0 10px;
+            display: inline-block;
+            border-radius: 4px;
+            color: #000;
+            font-weight: normal;
+            transition: background-color 0.3s, color 0.3s;
+          }
+          &.active {
+            span {
+              color: #fff;
+              background-color: #b20000;
+            }
+          }
+
+          &:hover {
+            color: #555;
+          }
+        }
+      }
+    }
+  }
+}
+.notificationsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  .notificationAccordion {
+    border: 1px solid #eee;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+      
+      .accordiontitle{
+        flex-grow: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      h3 {
+        font-weight: normal;
+        margin: 0;
+      }
+      button {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+        h3 {
+          text-decoration: underline;
+          color: var(--on-dark-aqua);
+        }
+        &:disabled {
+          pointer-events: none;
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+      .readbutton{
+        color: var(--on-dark-aqua);
+        background-color:#f3fdff;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        padding: 5px;
+        font-size: 13px;
+        text-transform: uppercase;
+        margin-right: 5px;
+        > i {
+          margin-right: 5px;
+        }
+      }
+      .actions {
+        display: flex;
+        align-items: stretch;
+        .notificationdeny, .notificationapprove {
+          color: #127B22;
+          background-color: #F5FFF5;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          padding: 5px;
+          font-size: 13px;
+          text-transform: uppercase;
+          margin-right: 5px;
+          > i {
+            margin-right: 5px;
+          }
+        }
+        .notificationdeny {
+          color: #770D0D;
+          background-color: #FFF5F5;
+        }
+
+        .accordionicon {
+          max-width: 21px;
+          height: auto;
+          display: inline-block;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          padding: 5px;
+          margin-right: 5px;
+          &.archiveicon {
+            max-width: 18px;
+          }
+          &.saveicon {
+            max-width: 23px;
+          }
+        }
+      }
+    }
+    .accordionbody{
+      padding: 10px;
+      border-top: 1px solid #eee;
+    }
+  }
+}

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

@@ -3,18 +3,7 @@ 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
-  }
-}
+import type { UserAccountViewProps } from "../types/user-types"
 
 export const UserAccountView: React.FC<UserAccountViewProps> = ({ user }) => {
   const [userLinks, setLinks] = useState<string[]>(user.links || [])

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

@@ -1,19 +1,6 @@
 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
-}
+import type { UserCardProps } from "../types/user-types"
 
 export const UserCard: React.FC<UserCardProps> = ({ user }) => {
   const { location, institution, email, orcid, links = [], github, name } = user

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

@@ -3,23 +3,7 @@ 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
-}
+import type { AccountContainerProps } from "../types/user-types"
 
 export const UserAccountContainer: React.FC<AccountContainerProps> = ({
   user,

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

@@ -1,53 +1,68 @@
-import React from "react"
+import React, { useState } from "react"
+import { DatasetCard } from "./dataset-card"
+import { UserDatasetFilters } from "./components/user-dataset-filters"
+import { gql, useQuery } from "@apollo/client"
+import styles from "./scss/datasetcard.module.scss"
+import type { Dataset, UserDatasetsViewProps } from "../types/user-types"
+import { INDEX_DATASET_FRAGMENT } from "./fragments/query"
+import { filterAndSortDatasets } from "../utils/user-datasets"
 
-interface User {
-  name: string
-}
+export const DATASETS_QUERY = gql`
+query Datasets($first: Int) {
+  datasets(first: $first) {
+      edges {
+        node {
+         ...DatasetIndex
+        }
+      }
+    }
+  }
+  ${INDEX_DATASET_FRAGMENT}
+`
 
-interface Dataset {
-  id: string
-  created: string
-  ownerId: string
-  name: string
-  type: string
-}
+export const UserDatasetsView: React.FC<UserDatasetsViewProps> = (
+  { user, hasEdit },
+) => {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [publicFilter, setPublicFilter] = useState<string>("all")
+  const [sortOrder, setSortOrder] = useState<string>("date-updated")
 
-interface UserDatasetsViewProps {
-  user: User
-}
+  const { data, loading, error } = useQuery(DATASETS_QUERY, {
+    variables: { first: 25 },
+  })
+
+  if (loading) return <p>Loading datasets...</p>
+  if (error) return <p>Failed to fetch datasets: {error.message}</p>
+
+  const datasets: Dataset[] =
+    data?.datasets?.edges?.map((edge: { node: Dataset }) => edge.node) || []
+
+  const filteredAndSortedDatasets = filterAndSortDatasets(datasets, {
+    searchQuery,
+    publicFilter,
+    sortOrder,
+  })
 
-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>
-        ))}
+      <h3>{user.name}'s Datasets</h3>
+
+      <UserDatasetFilters
+        publicFilter={publicFilter}
+        setPublicFilter={setPublicFilter}
+        sortOrder={sortOrder}
+        setSortOrder={setSortOrder}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+      />
+
+      <div className={styles.userDsWrap}>
+        {filteredAndSortedDatasets.length > 0
+          ? filteredAndSortedDatasets.map((dataset) => (
+            <DatasetCard key={dataset.id} dataset={dataset} hasEdit={hasEdit} />
+          ))
+          : <p>No datasets found.</p>}
       </div>
     </div>
   )
 }
-
-export default UserDatasetsView

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

@@ -0,0 +1,160 @@
+import React, { useState } from "react"
+import styles from "./scss/usernotifications.module.scss"
+import { Tooltip } from "@openneuro/components/tooltip"
+import iconUnread from "../../assets/icon-unread.png"
+import iconSaved from "../../assets/icon-saved.png"
+import iconArchived from "../../assets/icon-archived.png"
+
+export const NotificationAccordion = ({ notification, onUpdate }) => {
+  const { id, title, content, status, type, approval } = notification
+
+  const hasContent = content && content.trim().length > 0
+
+  const [isOpen, setIsOpen] = useState(false)
+  const toggleAccordion = () => setIsOpen(!isOpen)
+
+  const handleApprovalChange = (approvalStatus) => {
+    onUpdate(id, { approval: approvalStatus })
+  }
+
+  const handleStatusChange = (newStatus) => {
+    onUpdate(id, { status: newStatus })
+  }
+
+  return (
+    <li
+      className={`${styles.notificationAccordion} ${isOpen ? styles.open : ""}`}
+    >
+      <div className={styles.header}>
+        {/* Render title as button if content exists, otherwise as plain text */}
+        <h3 className={styles.accordiontitle}>{title}</h3>
+
+        {hasContent && (
+          <button className={styles.readbutton} onClick={toggleAccordion}>
+            {isOpen
+              ? (
+                <span>
+                  <i className="fa fa-times"></i> Close
+                </span>
+              )
+              : (
+                <span>
+                  <i className="fa fa-eye"></i> Review
+                </span>
+              )}
+          </button>
+        )}
+        <div className={styles.actions}>
+          {type === "approval" && (
+            <>
+              {(approval === "not provided" || approval === "approved") && (
+                <button
+                  className={`${styles.notificationapprove} ${
+                    approval === "approved" ? styles.active : ""
+                  }`}
+                  onClick={() => handleApprovalChange("approved")}
+                  disabled={approval === "approved"}
+                >
+                  <i className="fa fa-check"></i>{" "}
+                  {approval === "approved" ? "Approved" : "Approve"}
+                </button>
+              )}
+
+              {(approval === "not provided" || approval === "denied") && (
+                <button
+                  className={`${styles.notificationdeny} ${
+                    approval === "denied" ? styles.active : ""
+                  }`}
+                  onClick={() => handleApprovalChange("denied")}
+                  disabled={approval === "denied"}
+                >
+                  <i className="fa fa-times"></i>{" "}
+                  {approval === "denied" ? "Denied" : "Deny"}
+                </button>
+              )}
+            </>
+          )}
+          {/* Render actions based on the notification's status */}
+          {status === "unread" && (
+            <>
+              <Tooltip tooltip="Save and mark as read">
+                <button
+                  className={styles.save}
+                  onClick={() => handleStatusChange("saved")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.saveicon}`}
+                    src={iconSaved}
+                    alt=""
+                  />
+                  <span className="sr-only">Save</span>
+                </button>
+              </Tooltip>
+              <Tooltip tooltip="Archive">
+                <button
+                  className={styles.archive}
+                  onClick={() => handleStatusChange("archived")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.archiveicon}`}
+                    src={iconArchived}
+                    alt=""
+                  />
+                  <span className="sr-only">Archive</span>
+                </button>
+              </Tooltip>
+            </>
+          )}
+          {status === "saved" && (
+            <>
+              <Tooltip tooltip="Mark as Unread">
+                <button
+                  className={styles.unread}
+                  onClick={() => handleStatusChange("unread")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.unreadicon}`}
+                    src={iconUnread}
+                    alt=""
+                  />
+                  <span className="sr-only">Mark as Unread</span>
+                </button>
+              </Tooltip>
+              <Tooltip tooltip="Archive">
+                <button
+                  className={styles.archive}
+                  onClick={() => handleStatusChange("archived")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.archiveicon}`}
+                    src={iconArchived}
+                    alt=""
+                  />
+                  <span className="sr-only">Archive</span>
+                </button>
+              </Tooltip>
+            </>
+          )}
+          {status === "archived" && (
+            <Tooltip tooltip="Mark as Unread">
+              <button
+                className={styles.unarchive}
+                onClick={() => handleStatusChange("unread")}
+              >
+                <img
+                  className={`${styles.accordionicon} ${styles.unreadicon}`}
+                  src={iconUnread}
+                  alt=""
+                />
+                <span className="sr-only">Unarchive</span>
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+      {isOpen && hasContent && (
+        <div className={styles.accordionbody}>{content}</div>
+      )}
+    </li>
+  )
+}