@openneuro/app 4.35.0 → 4.36.0-alpha.0

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

@@ -2,16 +2,20 @@ import React, { useState } from "react"
 import * as Sentry from "@sentry/react"
 import { useMutation } from "@apollo/client"
 import { EditableContent } from "./components/editable-content"
-import { GET_USER, UPDATE_USER, useUser } from "../queries/user"
+import { GET_USER, UPDATE_USER } from "../queries/user"
 import styles from "./scss/useraccountview.module.scss"
+import { GitHubAuthButton } from "./github-auth-button"
+import type { UserAccountViewProps } from "../types/user-types"
 
-export const UserAccountView: React.FC = () => {
-  const { user, loading, error } = useUser()
-
-  const [userLinks, setLinks] = useState<string[]>(user?.links || [])
-  const [userLocation, setLocation] = useState<string>(user?.location || "")
+export const UserAccountView: React.FC<UserAccountViewProps> = ({
+  orcidUser,
+}) => {
+  const [userLinks, setLinks] = useState<string[]>(orcidUser?.links || [])
+  const [userLocation, setLocation] = useState<string>(
+    orcidUser?.location || "",
+  )
   const [userInstitution, setInstitution] = useState<string>(
-    user?.institution || "",
+    orcidUser?.institution || "",
   )
   const [updateUser] = useMutation(UPDATE_USER)
 
@@ -20,13 +24,13 @@ export const UserAccountView: React.FC = () => {
     try {
       await updateUser({
         variables: {
-          id: user?.orcid,
+          id: orcidUser?.orcid,
           links: newLinks,
         },
         refetchQueries: [
           {
             query: GET_USER,
-            variables: { id: user?.orcid },
+            variables: { id: orcidUser?.orcid },
           },
         ],
       })
@@ -41,13 +45,13 @@ export const UserAccountView: React.FC = () => {
     try {
       await updateUser({
         variables: {
-          id: user?.orcid,
+          id: orcidUser?.orcid,
           location: newLocation,
         },
         refetchQueries: [
           {
             query: GET_USER,
-            variables: { id: user?.orcid },
+            variables: { id: orcidUser?.orcid },
           },
         ],
       })
@@ -62,13 +66,13 @@ export const UserAccountView: React.FC = () => {
     try {
       await updateUser({
         variables: {
-          id: user?.orcid,
+          id: orcidUser?.orcid,
           institution: newInstitution,
         },
         refetchQueries: [
           {
             query: GET_USER,
-            variables: { id: user?.orcid },
+            variables: { id: orcidUser?.orcid },
           },
         ],
       })
@@ -77,16 +81,20 @@ export const UserAccountView: React.FC = () => {
     }
   }
 
-  if (loading) {
-    return <div>Loading Account Information...</div>
-  }
-
-  if (error) {
-    return <div>Error loading account information. Please try again.</div>
-  }
-
-  if (!user) {
-    return <div>Could not load account information.</div>
+  // --- URL VALIDATION FUNCTION ---
+  const validateHttpHttpsUrl = (url: string): boolean => {
+    if (!url) {
+      return false // Empty string is not a valid URL
+    }
+    try {
+      const parsedUrl = new URL(url)
+      // Check if the protocol is either http: or https:
+      return parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:"
+    } catch (error) {
+      // If new URL() throws an error, the string is not a valid URL
+      Sentry.captureException(error)
+      return false
+    }
   }
 
   return (
@@ -95,24 +103,26 @@ export const UserAccountView: React.FC = () => {
       <ul className={styles.accountDetail}>
         <li>
           <span>Name:</span>
-          {user.name}
+          {orcidUser.name}
         </li>
         <li>
           <span>Email:</span>
-          {user.email}
+          {orcidUser.email}
         </li>
         <li>
           <span>ORCID:</span>
-          {user.orcid}
+          {orcidUser.orcid}
         </li>
-        {user.github
-          ? (
+        {orcidUser?.github &&
+          (
             <li>
               <span>GitHub:</span>
-              {user.github}
+              {orcidUser.github}
             </li>
-          )
-          : <li>Connect your GitHub</li>}
+          )}
+        <li>
+          <GitHubAuthButton sync={orcidUser.githubSynced} />
+        </li>
       </ul>
 
       <EditableContent
@@ -120,9 +130,8 @@ export const UserAccountView: React.FC = () => {
         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."
+        validation={validateHttpHttpsUrl}
+        validationMessage="Invalid URL format. Please start with http:// or https://"
         data-testid="links-section"
       />
 

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

@@ -2,8 +2,9 @@ import React from "react"
 import styles from "./scss/usercard.module.scss"
 import type { UserCardProps } from "../types/user-types"
 
-export const UserCard: React.FC<UserCardProps> = ({ user }) => {
-  const { location, institution, email, orcid, links = [], github, name } = user
+export const UserCard: React.FC<UserCardProps> = ({ orcidUser }) => {
+  const { location, institution, email, orcid, links = [], github, name } =
+    orcidUser
 
   return (
     <div className={styles.userCard}>
@@ -22,11 +23,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
         )}
         <li>
           <i className="fas fa-envelope"></i>
-          <a
-            href={"mailto:" + email}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href={"mailto:" + email} target="_blank" rel="noopener noreferrer">
             {email}
           </a>
         </li>
@@ -57,16 +54,14 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
           </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>
-            ))}
+          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

@@ -6,7 +6,7 @@ import styles from "./scss/usercontainer.module.scss"
 import type { AccountContainerProps } from "../types/user-types"
 
 export const UserAccountContainer: React.FC<AccountContainerProps> = ({
-  user,
+  orcidUser,
   hasEdit,
   isUser,
 }) => {
@@ -14,15 +14,19 @@ export const UserAccountContainer: React.FC<AccountContainerProps> = ({
     <>
       <div className="container">
         <header className={styles.userHeader}>
-          {user.avatar && (
-            <img className={styles.avatar} src={user.avatar} alt={user.name} />
+          {orcidUser.avatar && (
+            <img
+              className={styles.avatar}
+              src={orcidUser.avatar}
+              alt={orcidUser.name}
+            />
           )}
-          <h2 className={styles.username}>{user.name}</h2>
+          <h2 className={styles.username}>{orcidUser.name}</h2>
         </header>
       </div>
       <div className={styles.usercontainer + " container"}>
         <section className={styles.userSidebar}>
-          <UserCard user={user} />
+          <UserCard orcidUser={orcidUser} />
           <UserAccountTabs hasEdit={hasEdit} isUser={isUser} />
         </section>
         <section className={styles.userViews}>

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

@@ -1,68 +1,378 @@
-import React, { useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
+import { useQuery } from "@apollo/client"
+import * as Sentry from "@sentry/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 { ADVANCED_SEARCH_DATASETS_QUERY } from "../queries/user"
+import { Button } from "../components/button/Button"
+import { Loading } from "../components/loading/Loading"
 import type { Dataset, UserDatasetsViewProps } from "../types/user-types"
-import { INDEX_DATASET_FRAGMENT } from "./fragments/query"
-import { filterAndSortDatasets } from "../utils/user-datasets"
-
-export const DATASETS_QUERY = gql`
-query Datasets($first: Int) {
-  datasets(first: $first) {
-      edges {
-        node {
-         ...DatasetIndex
+import styles from "./scss/datasetcard.module.scss"
+
+type SortByType = {
+  [key: string]: "asc" | "desc"
+} | null
+
+interface ElasticsearchQuery {
+  bool: {
+    filter: (
+      | { terms: { "permissions.userPermissions.user.id": string[] } }
+      | { term: { public: boolean | null } }
+    )[]
+    must: (
+      | {
+        bool: {
+          should: (
+            | {
+              multi_match: {
+                query: string
+                fields: string[]
+                fuzziness: number
+              }
+            }
+            | { prefix: { name: string } }
+            | { prefix: { "description.Name": string } }
+          )[]
+          minimum_should_match: number
         }
       }
-    }
+      | { match_all: Record<string, never> }
+    )[]
   }
-  ${INDEX_DATASET_FRAGMENT}
-`
+}
 
-export const UserDatasetsView: React.FC<UserDatasetsViewProps> = (
-  { user, hasEdit },
-) => {
+export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({
+  orcidUser,
+  hasEdit,
+}) => {
   const [searchQuery, setSearchQuery] = useState("")
   const [publicFilter, setPublicFilter] = useState<string>("all")
   const [sortOrder, setSortOrder] = useState<string>("date-updated")
+  const [visibleDatasets, setVisibleDatasets] = useState<Dataset[]>([])
+  const [loadMoreLoading, setLoadMoreLoading] = useState(false)
+  const [cursor, setCursor] = useState<string | null>(null)
+  const [hasNextPage, setHasNextPage] = useState(false)
+  const [sortBy, setSortBy] = useState<SortByType>(null)
+  const loadAmount = 26
+
+  const generateElasticsearchQuery = useCallback(
+    (
+      currentSearchQuery: string,
+      currentPublicFilter: string,
+    ): ElasticsearchQuery => {
+      const baseQuery: ElasticsearchQuery = {
+        bool: {
+          filter: [],
+          must: [],
+        },
+      }
+
+      if (orcidUser?.id) {
+        baseQuery.bool.filter.push({
+          terms: {
+            "permissions.userPermissions.user.id": [orcidUser.id],
+          },
+        })
+      }
+
+      if (hasEdit) {
+        if (currentPublicFilter === "public") {
+          baseQuery.bool.filter.push({ term: { public: true } })
+        }
+      } else {
+        baseQuery.bool.filter.push({ term: { public: true } })
+      }
+
+      if (currentSearchQuery) {
+        baseQuery.bool.must.push({
+          bool: {
+            should: [
+              {
+                multi_match: {
+                  query: currentSearchQuery,
+                  fields: [
+                    "id^3",
+                    "name^3",
+                    "description.Name^3",
+                    "description.Authors^3",
+                    "latestSnapshot.description.Name",
+                    "latestSnapshot.description.Authors",
+                    "latestSnapshot.readme",
+                  ],
+                  fuzziness: 1,
+                },
+              },
+              {
+                prefix: {
+                  name: currentSearchQuery.toLowerCase(),
+                },
+              },
+              {
+                prefix: {
+                  "description.Name": currentSearchQuery.toLowerCase(),
+                },
+              },
+            ],
+            minimum_should_match: 1,
+          },
+        })
+      } else {
+        baseQuery.bool.must.push({ match_all: {} })
+      }
+
+      return baseQuery
+    },
+    [orcidUser?.id, hasEdit],
+  )
+
+  const [elasticsearchQuery, setElasticsearchQuery] = useState(() =>
+    generateElasticsearchQuery("", "all")
+  )
+
+  const { data, loading, error, fetchMore, refetch } = useQuery(
+    ADVANCED_SEARCH_DATASETS_QUERY,
+    {
+      variables: {
+        first: loadAmount,
+        query: elasticsearchQuery,
+        sortBy: sortBy,
+        cursor: null,
+        allDatasets: true,
+        datasetStatus: undefined,
+      },
+      onCompleted: (initialData) => {
+        const initialEdges = initialData?.datasets?.edges || []
+        const initialDatasets = initialEdges.map((edge) => edge.node)
+        setVisibleDatasets(initialDatasets)
+        setCursor(initialData?.datasets?.pageInfo?.endCursor || null)
+        setHasNextPage(initialData?.datasets?.pageInfo?.hasNextPage || false)
+      },
+      onError: (err) => {
+        Sentry.captureException(err)
+      },
+      errorPolicy: "ignore",
+      fetchPolicy: "cache-and-network",
+      nextFetchPolicy: "cache-first",
+      notifyOnNetworkStatusChange: true,
+    },
+  )
+
+  const handleSearch = useCallback(
+    (newSearchQuery: string, currentPublicFilter: string) => {
+      setSearchQuery(newSearchQuery)
+      setPublicFilter(currentPublicFilter)
+      const newElasticsearchQuery = generateElasticsearchQuery(
+        newSearchQuery,
+        currentPublicFilter,
+      )
+      setElasticsearchQuery(newElasticsearchQuery)
+      refetch({
+        query: newElasticsearchQuery,
+        cursor: null,
+        sortBy: sortBy,
+        datasetStatus: undefined,
+      })
+    },
+    [
+      generateElasticsearchQuery,
+      refetch,
+      setSearchQuery,
+      setPublicFilter,
+      setElasticsearchQuery,
+      sortBy,
+      hasEdit,
+      orcidUser?.id,
+    ],
+  )
+
+  const handlePublicFilterChange = useCallback(
+    (newPublicFilter) => {
+      setPublicFilter(newPublicFilter)
+      const newElasticsearchQuery = generateElasticsearchQuery(
+        searchQuery,
+        newPublicFilter,
+      )
+      setElasticsearchQuery(newElasticsearchQuery)
+      refetch({
+        query: newElasticsearchQuery,
+        cursor: null,
+        sortBy: sortBy,
+        datasetStatus: undefined,
+      })
+    },
+    [
+      setPublicFilter,
+      generateElasticsearchQuery,
+      refetch,
+      searchQuery,
+      sortBy,
+      hasEdit,
+      orcidUser?.id,
+    ],
+  )
+
+  const handleSortOrderChange = useCallback(
+    (newSortOrder) => {
+      setSortOrder(newSortOrder)
+      let newSortBy = null
+      switch (newSortOrder) {
+        case "name-asc":
+          newSortBy = { "metadata.datasetName": "asc" }
+          break
+        case "name-desc":
+          newSortBy = { "metadata.datasetName": "desc" }
+          break
+        case "date-newest":
+          newSortBy = { created: "desc" }
+          break
+        case "date-oldest":
+          newSortBy = { created: "asc" }
+          break
+        case "date-updated":
+          newSortBy = { "metadata.latestSnapshotCreatedAt": "desc" }
+          break
+        default:
+          newSortBy = null
+      }
+      setSortBy(newSortBy)
+      refetch({
+        sortBy: newSortBy,
+        first: loadAmount,
+        cursor: null,
+        query: elasticsearchQuery,
+        datasetStatus: undefined,
+      })
+    },
+    [setSortOrder, refetch, setSortBy, elasticsearchQuery, hasEdit],
+  )
+
+  const handleLoadMore = useCallback(() => {
+    if (!hasNextPage || loadMoreLoading || !cursor) {
+      return
+    }
 
-  const { data, loading, error } = useQuery(DATASETS_QUERY, {
-    variables: { first: 25 },
-  })
+    setLoadMoreLoading(true)
+    fetchMore({
+      variables: {
+        first: loadAmount,
+        cursor: cursor,
+        query: elasticsearchQuery,
+        sortBy: sortBy,
+        allDatasets: true,
+        datasetStatus: undefined,
+      },
+      updateQuery: (previousResult, { fetchMoreResult }) => {
+        if (!fetchMoreResult?.datasets?.edges) {
+          return previousResult
+        }
+
+        const newEdges = fetchMoreResult.datasets.edges
+        const newCursor = fetchMoreResult.datasets.pageInfo.endCursor
+        const newHasNextPage = fetchMoreResult.datasets.pageInfo.hasNextPage
+
+        setCursor(newCursor)
+        setHasNextPage(newHasNextPage)
+
+        return {
+          datasets: {
+            __typename: previousResult.datasets.__typename,
+            edges: [...previousResult.datasets.edges, ...newEdges],
+            pageInfo: {
+              ...previousResult.datasets.pageInfo,
+              endCursor: newCursor,
+              hasNextPage: newHasNextPage,
+            },
+          },
+        }
+      },
+    }).finally(() => {
+      setLoadMoreLoading(false)
+    })
+  }, [
+    fetchMore,
+    hasNextPage,
+    loadMoreLoading,
+    cursor,
+    elasticsearchQuery,
+    sortBy,
+    hasEdit,
+  ])
 
-  if (loading) return <p>Loading datasets...</p>
-  if (error) return <p>Failed to fetch datasets: {error.message}</p>
+  useEffect(() => {
+    if (data?.datasets?.edges) {
+      const fetched = data.datasets.edges.map((edge) => edge.node)
+      setVisibleDatasets(fetched)
+      setHasNextPage(data?.datasets?.pageInfo?.hasNextPage || false)
+    }
+  }, [data, hasEdit, loadAmount])
 
-  const datasets: Dataset[] =
-    data?.datasets?.edges?.map((edge: { node: Dataset }) => edge.node) || []
+  useEffect(() => {
+    const newElasticsearchQuery = generateElasticsearchQuery(
+      searchQuery,
+      publicFilter,
+    )
+    setElasticsearchQuery(newElasticsearchQuery)
+  }, [searchQuery, publicFilter, generateElasticsearchQuery])
 
-  const filteredAndSortedDatasets = filterAndSortDatasets(datasets, {
-    searchQuery,
-    publicFilter,
-    sortOrder,
-  })
+  useEffect(() => {
+    if (elasticsearchQuery) {
+      refetch({
+        query: elasticsearchQuery,
+        cursor: null,
+        sortBy: sortBy,
+        datasetStatus: undefined,
+      })
+    }
+  }, [elasticsearchQuery, refetch, sortBy, hasEdit])
 
+  if (loading) return <Loading />
+  if (error) {
+    return (
+      <p>
+        Failed to load datasets. Please contact an administrator if the error
+        persists.
+      </p>
+    )
+  }
+
+  const visibleToRender = visibleDatasets
   return (
-    <div data-testid="user-datasets-view">
-      <h3>{user.name}'s Datasets</h3>
+    <div
+      className={styles.userDatasetsWrapper}
+      data-testid="user-datasets-view"
+    >
+      <h3>{orcidUser.name}'s Datasets</h3>
 
       <UserDatasetFilters
         publicFilter={publicFilter}
-        setPublicFilter={setPublicFilter}
+        setPublicFilter={handlePublicFilterChange}
         sortOrder={sortOrder}
-        setSortOrder={setSortOrder}
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
+        setSortOrder={handleSortOrderChange}
+        onSearch={handleSearch}
+        currentSearchTerm={searchQuery}
+        hasEdit={hasEdit}
       />
 
       <div className={styles.userDsWrap}>
-        {filteredAndSortedDatasets.length > 0
-          ? filteredAndSortedDatasets.map((dataset) => (
-            <DatasetCard key={dataset.id} dataset={dataset} hasEdit={hasEdit} />
-          ))
+        {visibleToRender.length > 0
+          ? (
+            visibleToRender.map((dataset) => (
+              <DatasetCard
+                key={dataset.id}
+                dataset={dataset}
+                hasEdit={hasEdit}
+              />
+            ))
+          )
           : <p>No datasets found.</p>}
       </div>
+
+      {visibleToRender.length >= loadAmount && !loadMoreLoading &&
+        hasNextPage && (
+        <div className="load-more">
+          <Button label="Load More" onClick={handleLoadMore} />
+        </div>
+      )}
     </div>
   )
 }

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

@@ -64,23 +64,18 @@ export const UserMenu = (
                 </p>
               </li>
               <li>
-                {
-                  /* {user?.orcid
+                {user?.orcid
                   ? <Link to={`/user/${user?.orcid}`}>My Datasets</Link>
-                  : <Link to="/search?mydatasets">My Datasets</Link>} */
-                }
-                <Link to="/search?mydatasets">My Datasets</Link>
+                  : <Link to="/search?mydatasets">My Datasets</Link>}
               </li>
 
-              {
-                /* {user?.orcid && (
+              {user?.orcid && (
                 <li>
                   <Link to={`/user/${user?.orcid}/account`}>
                     Account Info
                   </Link>
                 </li>
-              )} */
-              }
+              )}
 
               <li className="user-menu-link">
                 <Link to="/keygen">Obtain an API Key</Link>