@openneuro/app 4.35.0 → 4.36.0

package/src/scripts/users/components/user-dataset-filters.tsx

@@ -1,13 +1,19 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
+import { useParams } from "react-router-dom"
 import styles from "../scss/datasetcard.module.scss"
+import { isValidOrcid } from "../../utils/validationUtils"
+import { useCookies } from "react-cookie"
+import { getProfile } from "../../authentication/profile"
+import { useUser } from "../../queries/user"
 
 interface UserDatasetFiltersProps {
   publicFilter: string
   setPublicFilter: React.Dispatch<React.SetStateAction<string>>
   sortOrder: string
   setSortOrder: React.Dispatch<React.SetStateAction<string>>
-  searchQuery: string
-  setSearchQuery: React.Dispatch<React.SetStateAction<string>>
+  onSearch: (query: string, publicFilter: string) => void
+  currentSearchTerm: string
+  hasEdit: boolean
 }
 
 export const UserDatasetFilters: React.FC<UserDatasetFiltersProps> = ({
@@ -15,11 +21,15 @@ export const UserDatasetFilters: React.FC<UserDatasetFiltersProps> = ({
   setPublicFilter,
   sortOrder,
   setSortOrder,
-  searchQuery,
-  setSearchQuery,
+  onSearch,
+  currentSearchTerm,
+  hasEdit,
 }) => {
-  const [isFilterOpen, setIsFilterOpen] = React.useState(false)
-  const [isSortOpen, setIsSortOpen] = React.useState(false)
+  const [isFilterOpen, setIsFilterOpen] = useState(false)
+  const [isSortOpen, setIsSortOpen] = useState(false)
+  const [localSearchQuery, setLocalSearchQuery] = useState(currentSearchTerm)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchButtonRef = useRef<HTMLButtonElement>(null)
 
   const currentSortBy = sortOrder === "name-asc"
     ? "Name (A-Z)"
@@ -31,127 +41,201 @@ export const UserDatasetFilters: React.FC<UserDatasetFiltersProps> = ({
     ? "Oldest"
     : "Updated"
 
-  return (
-    <div className={styles.userDSfilters}>
-      {/* Search Input */}
-      <input
-        type="text"
-        placeholder="Keyword Search (Name or ID)"
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-        className={styles.searchInput}
-      />
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalSearchQuery(e.target.value)
+  }
+
+  const triggerSearch = () => {
+    onSearch(localSearchQuery, publicFilter)
+  }
+
+  const handleSearchInputKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (e.key === "Enter") {
+      triggerSearch()
+    }
+  }
+
+  const handleSearchButtonMouseOver = () => {
+    if (document.activeElement === searchButtonRef.current) {
+      triggerSearch()
+    }
+  }
+
+  const handleClearSearch = () => {
+    setLocalSearchQuery("")
+    onSearch("", publicFilter)
+  }
 
-      {/* Filter by Visibility */}
-      <div
-        data-testid="public-filter"
-        className={`${styles.filterDiv} ${isFilterOpen ? styles.open : ""}`}
-        onClick={() => setIsFilterOpen(!isFilterOpen)}
-      >
-        <span>
-          Filter by:{" "}
-          <b>
-            {publicFilter === "all"
-              ? "All"
-              : publicFilter.charAt(0).toUpperCase() + publicFilter.slice(1)}
-          </b>
-        </span>
-        <div className={styles.filterDropdown}>
-          {isFilterOpen && (
-            <ul>
-              <li
-                onClick={() => {
-                  setPublicFilter("all")
-                  setIsFilterOpen(false)
-                }}
-                className={publicFilter === "all" ? styles.active : ""}
-              >
-                All
-              </li>
-              <li
-                onClick={() => {
-                  setPublicFilter("public")
-                  setIsFilterOpen(false)
-                }}
-                className={publicFilter === "public" ? styles.active : ""}
-              >
-                Public
-              </li>
-              <li
-                onClick={() => {
-                  setPublicFilter("private")
-                  setIsFilterOpen(false)
-                }}
-                className={publicFilter === "private" ? styles.active : ""}
-              >
-                Private
-              </li>
-            </ul>
+  useEffect(() => {
+    setLocalSearchQuery(currentSearchTerm)
+  }, [currentSearchTerm])
+  const datasetQuery = {
+    datasetType_selected: "My Datasets",
+  }
+
+  // construct query for "my datasets" search link
+  const jsonString = JSON.stringify(datasetQuery)
+  const encodedJsonString = encodeURIComponent(jsonString)
+  const searchPageUrl = `/search?query=${encodedJsonString}`
+
+  //check if user is current user to provide query to search "My Datasets"
+  const { orcid } = useParams()
+  const isOrcidValid = orcid && isValidOrcid(orcid)
+  const { user } = useUser(orcid)
+  const [cookies] = useCookies()
+  const profile = getProfile(cookies)
+  const isUser = (user?.id === profile?.sub) ? true : false
+
+  return (
+    <>
+      <div className={styles.searchInputContainer}>
+        {/* Search Input */}
+        <div className={styles.searchInputWrap}>
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Keyword Search (Name, Authors, README, or ID)"
+            value={localSearchQuery}
+            onChange={handleSearchInputChange}
+            onKeyDown={handleSearchInputKeyDown}
+            className={styles.searchInput}
+          />
+          {localSearchQuery && (
+            <button
+              onClick={handleClearSearch}
+              className={styles.clearSearchButton}
+            >
+              <span aria-label="Clear Search">X</span>
+            </button>
           )}
         </div>
+        {/* Search Button */}
+        <button
+          ref={searchButtonRef}
+          onClick={triggerSearch}
+          onMouseOver={handleSearchButtonMouseOver}
+          className={styles.searchSubmitButton}
+        >
+          Search
+        </button>
       </div>
 
-      {/* Sort Options */}
-      <div
-        data-testid="sort-order"
-        className={`${styles.sortDiv} ${isSortOpen ? styles.open : ""}`}
-        onClick={() => setIsSortOpen(!isSortOpen)}
-      >
-        <span>
-          Sort by: <b>{currentSortBy}</b>
-        </span>
-        <div className={styles.sortDropdown}>
-          {isSortOpen && (
-            <ul>
-              <li
-                onClick={() => {
-                  setSortOrder("name-asc")
-                  setIsSortOpen(false)
-                }}
-                className={sortOrder === "name-asc" ? styles.active : ""}
-              >
-                Name (A-Z)
-              </li>
-              <li
-                onClick={() => {
-                  setSortOrder("name-desc")
-                  setIsSortOpen(false)
-                }}
-                className={sortOrder === "name-desc" ? styles.active : ""}
-              >
-                Name (Z-A)
-              </li>
-              <li
-                onClick={() => {
-                  setSortOrder("date-newest")
-                  setIsSortOpen(false)
-                }}
-                className={sortOrder === "date-newest" ? styles.active : ""}
-              >
-                Added
-              </li>
-              <li
-                onClick={() => {
-                  setSortOrder("date-oldest")
-                  setIsSortOpen(false)
-                }}
-                className={sortOrder === "date-oldest" ? styles.active : ""}
-              >
-                Oldest
-              </li>
-              <li
-                onClick={() => {
-                  setSortOrder("date-updated")
-                  setIsSortOpen(false)
-                }}
-                className={sortOrder === "date-updated" ? styles.active : ""}
-              >
-                Updated
-              </li>
-            </ul>
+      <div className={styles.userDSfilters}>
+        {/* Filter by Visibility */}
+        {isOrcidValid && hasEdit && isUser && (
+          <a className={styles.searchLink} href={searchPageUrl}>
+            View your datasets on the search page
+          </a>
+        )}
+        {hasEdit &&
+          (
+            <div
+              data-testid="public-filter"
+              className={`${styles.filterDiv} ${
+                isFilterOpen ? styles.open : ""
+              }`}
+              onClick={() => setIsFilterOpen(!isFilterOpen)}
+            >
+              <span>
+                Filter by:{" "}
+                <b>
+                  {publicFilter === "all"
+                    ? "All"
+                    : publicFilter.charAt(0).toUpperCase() +
+                      publicFilter.slice(1)}
+                </b>
+              </span>
+              <div className={styles.filterDropdown}>
+                {isFilterOpen && (
+                  <ul>
+                    <li
+                      onClick={() => {
+                        setPublicFilter("all")
+                        setIsFilterOpen(false)
+                      }}
+                      className={publicFilter === "all" ? styles.active : ""}
+                    >
+                      All
+                    </li>
+                    <li
+                      onClick={() => {
+                        setPublicFilter("public")
+                        setIsFilterOpen(false)
+                      }}
+                      className={publicFilter === "public" ? styles.active : ""}
+                    >
+                      Public
+                    </li>
+                  </ul>
+                )}
+              </div>
+            </div>
           )}
+
+        {/* Sort Options */}
+        <div
+          data-testid="sort-order"
+          className={`${styles.sortDiv} ${isSortOpen ? styles.open : ""}`}
+          onClick={() => setIsSortOpen(!isSortOpen)}
+        >
+          <span>
+            Sort by: <b>{currentSortBy}</b>
+          </span>
+          <div className={styles.sortDropdown}>
+            {isSortOpen && (
+              <ul>
+                <li
+                  onClick={() => {
+                    setSortOrder("name-asc")
+                    setIsSortOpen(false)
+                  }}
+                  className={sortOrder === "name-asc" ? styles.active : ""}
+                >
+                  Name (A-Z)
+                </li>
+                <li
+                  onClick={() => {
+                    setSortOrder("name-desc")
+                    setIsSortOpen(false)
+                  }}
+                  className={sortOrder === "name-desc" ? styles.active : ""}
+                >
+                  Name (Z-A)
+                </li>
+                <li
+                  onClick={() => {
+                    setSortOrder("date-newest")
+                    setIsSortOpen(false)
+                  }}
+                  className={sortOrder === "date-newest" ? styles.active : ""}
+                >
+                  Added
+                </li>
+                <li
+                  onClick={() => {
+                    setSortOrder("date-oldest")
+                    setIsSortOpen(false)
+                  }}
+                  className={sortOrder === "date-oldest" ? styles.active : ""}
+                >
+                  Oldest
+                </li>
+                <li
+                  onClick={() => {
+                    setSortOrder("date-updated")
+                    setIsSortOpen(false)
+                  }}
+                  className={sortOrder === "date-updated" ? styles.active : ""}
+                >
+                  Updated
+                </li>
+              </ul>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }

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

@@ -87,7 +87,6 @@ export const DatasetCard: React.FC<DatasetCardProps> = (
       datasetSize = `${sizeInBytes} bytes`
     }
   }
-
   return (
     <div
       className={styles.userDsCard}
@@ -95,7 +94,9 @@ export const DatasetCard: React.FC<DatasetCardProps> = (
       data-testid={`user-ds-${dataset.id}`}
     >
       <h4>
-        <a href={`/datasets/${dataset.id}`}>{dataset.name}</a>
+        <a href={`/datasets/${dataset.id}`}>
+          {dataset.name ? dataset.name : dataset.id}
+        </a>
       </h4>
       <div className={styles.userDsFooter}>
         <div className={styles.userMetawrap}>

package/src/scripts/users/github-auth-button.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from "react"
+import { AccordionTab } from "@openneuro/components/accordion"
+import { AccordionWrap } from "@openneuro/components/accordion/"
+import styled from "@emotion/styled"
+import { toast } from "react-toastify"
+import { useSearchParams } from "react-router-dom" // React Router for URL parsing
+
+interface GitHubAuthButtonProps {
+  sync: Date | null
+}
+
+const GithubSyncDiv = styled.div`
+  .synced-btn {
+    border-radius: var(--border-radius-default);
+    padding: 2px 10px;
+    transition: background-color 0.3s;
+    border: 1px solid var(--current-theme-secondary);
+    margin: 10px;
+
+    &:hover {
+      background-color: var(--current-theme-primary-light);
+       color: var(--current-theme-primary);
+    }
+    &.active {
+      background-color: transparent;
+      color: var(--current-theme-primary);
+      border-color: var(--current-theme-primary-hover);
+    }
+  }
+
+  img.inline-icon {
+    height: 1.1em;
+    vertical-align: middle;
+  }
+
+  .on-accordion-wrapper {
+    margin-top: 5px;
+    .keyword-accordion {
+      .accordion-title {
+        position: absolute;
+        top: -25px;
+        left: 270px;
+      }
+      &.synced .accordion-title {
+        left: 430px;
+      }
+    }
+  }
+`
+
+export const GitHubAuthButton: React.FC<GitHubAuthButtonProps> = ({ sync }) => {
+  const lastSyncedText = sync ? `Last synced: ${sync.toLocaleString()}` : null
+  const [searchParams] = useSearchParams()
+  useEffect(() => {
+    const error = searchParams.get("error")
+
+    if (error === "orcid_required") {
+      toast.error("Please login with your ORCID account")
+    } else if (error) {
+      toast.error(error.replace(/_/g, " ")) // Replace underscores with spaces for readability
+    }
+
+    const success = searchParams.get("success")
+    if (success === "github_auth_success") {
+      toast.success("GitHub linked!")
+    }
+  }, [searchParams])
+
+  return (
+    <GithubSyncDiv>
+      <a
+        href="/crn/auth/github"
+        className="synced-btn"
+        data-testid="github-sync-button" // Added data-testid here
+      >
+        Link user data from <i className="fab fa-github"></i> GitHub
+      </a>
+      <span>
+        {lastSyncedText && (
+          <small className="synced-text">{lastSyncedText}</small>
+        )}
+      </span>
+      <AccordionWrap>
+        <AccordionTab
+          accordionStyle="plain"
+          label="?"
+          className={lastSyncedText
+            ? "keyword-accordion synced"
+            : "keyword-accordion"}
+        >
+          <span>
+            Link profile data from GitHub (avatar, institution, or location).
+          </span>
+        </AccordionTab>
+      </AccordionWrap>
+    </GithubSyncDiv>
+  )
+}

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

@@ -58,23 +58,27 @@
       }
     }
   }
+
+  .resultsSummary{
+    width: 100%;
+    font-size: 13px;
+    margin: 10px 0 0;
+  }
   
   .userDSfilters {
     display: flex;
     justify-content: flex-end;
     flex-wrap: wrap;
-    margin-bottom: 20px;
+    margin: 20px 0;
     padding-bottom:20px;
     align-items: center;
     z-index: 10000;
     position: relative;
     border-bottom: 2px solid #eee;
-  
-    input {
-      min-width: 50%;
-      margin-right: auto;
-    }
-  
+   
+    .searchLink{
+    margin-right: auto;
+  }
     .filterDiv,
     .sortDiv {
       cursor: pointer;
@@ -144,10 +148,59 @@
       margin-left: 20px;
     }
   }
-  
 
-  .resultsSummary{
+  .userDatasetsWrapper{
+    margin-bottom: 50px;
+  }
+  .searchInputContainer {
+    position: relative;
+    display: flex;
+  
+    .searchInputWrap{
+      position: relative;
     width: 100%;
-    font-size: 13px;
-    margin: 10px 0 0;
-  }
+  .searchInput {
+    flex-grow: 1;
+    padding-right: 30px;
+    margin-right: auto;
+    width: 100%;
+  }
+ 
+
+  .clearSearchButton {
+    position: absolute;
+    top: 50%;
+    right: 5px; /* Adjust position as needed */
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.8em;
+    color: #888;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  
+    &:hover {
+      color: #333;
+    }
+  }}
+    .searchSubmitButton {
+    background-color: var(--current-theme-secondary);
+    color: #fff;
+    border-radius: var(--border-radius-default);
+    font-weight: bold;
+    margin: 0 0 0 5px;
+    font-size: 14px;
+    padding: 10px 15px;
+    border: 0;
+    &:hover {
+      background-color: var(--current-theme-primary);
+    }
+  }
+
+
+}

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

@@ -13,7 +13,7 @@
         }
         span{
             font-weight: 700;
-            margin-right: 10px;
+            margin: 0 10px;
         }
     }
 }