@openneuro/app 5.1.0 → 5.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e3444f63f43cb7e9d3ecfac51d2a42cdcc4f4e60"
+  "gitHead": "bccaddf537a2950100549b992a846768c32d683e"
 }

package/src/scripts/queries/user.ts

@@ -64,7 +64,8 @@ export const GET_USER = gql`
           status
         }
       }
-      orcidConsent 
+      orcidConsent
+      profilePrivate
     }
   }
 `
@@ -74,22 +75,25 @@ export const UPDATE_USER = gql`
   mutation updateUser(
     $id: ID!
     $location: String
-    $links: [String]
+    $links: [String!]
     $institution: String
-    $orcidConsent: Boolean 
+    $orcidConsent: Boolean
+    $profilePrivate: Boolean
   ) {
     updateUser(
       id: $id
       location: $location
       links: $links
       institution: $institution
-      orcidConsent: $orcidConsent 
+      orcidConsent: $orcidConsent
+      profilePrivate: $profilePrivate
     ) {
       id
       location
       links
       institution
       orcidConsent
+      profilePrivate
     }
   }
 `

package/src/scripts/types/user-types.ts

@@ -20,6 +20,7 @@ export interface User {
   githubSynced?: Date
   notifications?: Event[]
   orcidConsent?: boolean | null
+  profilePrivate?: boolean
 }
 
 export interface UserRoutesProps {

package/src/scripts/users/components/profile-privacy.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react"
+import * as Sentry from "@sentry/react"
+import { useMutation } from "@apollo/client"
+import { GET_USER, UPDATE_USER } from "../../queries/user"
+import { RadioGroup } from "../../components/radio/RadioGroup"
+
+export interface ProfilePrivacyProps {
+  userId: string
+  initialProfilePrivate: boolean
+}
+
+export const ProfilePrivacy: React.FC<ProfilePrivacyProps> = ({
+  userId,
+  initialProfilePrivate,
+}) => {
+  const initialValue = initialProfilePrivate ? "true" : "false"
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialProfilePrivate ? "true" : "false")
+  }, [initialProfilePrivate])
+
+  const [updateUser] = useMutation(UPDATE_USER, {
+    refetchQueries: [{ query: GET_USER, variables: { userId } }],
+    onError: (error) => {
+      Sentry.captureException(error)
+    },
+  })
+
+  const handleChange = async (newValue: string) => {
+    setValue(newValue)
+    try {
+      await updateUser({
+        variables: { id: userId, profilePrivate: newValue === "true" },
+      })
+    } catch (error) {
+      Sentry.captureException(error)
+    }
+  }
+
+  const radioOptions = [
+    { label: "Public", value: "false" },
+    { label: "Private", value: "true" },
+  ]
+
+  return (
+    <div>
+      <p>
+        Set your profile to private to hide your profile page from public view.
+        Your datasets and contributions will still be visible based on each
+        dataset's published state.
+      </p>
+      <RadioGroup
+        name="profilePrivate"
+        layout="row"
+        radioArr={radioOptions}
+        selected={value}
+        setSelected={handleChange}
+      />
+    </div>
+  )
+}

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

@@ -8,6 +8,7 @@ import styles from "./scss/useraccountview.module.scss"
 import { GitHubAuthButton } from "./github-auth-button"
 import type { UserAccountViewProps } from "../types/user-types"
 import { OrcidConsentForm } from "./components/orcid-consent-form"
+import { ProfilePrivacy } from "./components/profile-privacy"
 import { validateHttpHttpsUrl } from "../utils/validationUtils"
 import { pageTitle } from "../resources/strings.js"
 
@@ -115,20 +116,24 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
                 {orcidUser.github}
               </li>
             )}
-          <li>
-            <GitHubAuthButton sync={orcidUser.githubSynced} />
-          </li>
+          {hasEdit && (
+            <li>
+              <GitHubAuthButton sync={orcidUser.githubSynced} />
+            </li>
+          )}
         </ul>
 
-        <EditableContent
-          editableContent={userLinks}
-          setRows={handleLinksChange}
-          heading="Links"
-          validation={validateHttpHttpsUrl}
-          validationMessage="Invalid URL format. Please start with http:// or https://"
-          data-testid="links-section"
-          hasEdit={hasEdit}
-        />
+        {hasEdit && (
+          <div className={styles.umbOrcidConsent}>
+            <div className={styles.umbOrcidHeading}>
+              <h4>Profile Privacy</h4>
+            </div>
+            <ProfilePrivacy
+              userId={orcidUser.id}
+              initialProfilePrivate={orcidUser.profilePrivate ?? false}
+            />
+          </div>
+        )}
 
         {hasEdit && orcidUser.orcid !== undefined && (
           <div className={styles.umbOrcidConsent}>
@@ -142,6 +147,15 @@ export const UserAccountView: React.FC<UserAccountViewProps> = ({
           </div>
         )}
 
+        <EditableContent
+          editableContent={userLinks}
+          setRows={handleLinksChange}
+          heading="Links"
+          validation={validateHttpHttpsUrl}
+          validationMessage="Invalid URL format. Please start with http:// or https://"
+          data-testid="links-section"
+          hasEdit={hasEdit}
+        />
         <EditableContent
           editableContent={userLocation}
           setRows={handleLocationChange}

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

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react"
 import { useQuery } from "@apollo/client"
 import * as Sentry from "@sentry/react"
+import Helmet from "react-helmet"
+import { pageTitle } from "../resources/strings"
 import { DatasetCard } from "./dataset-card"
 import { UserDatasetFilters } from "./components/user-dataset-filters"
 import { ADVANCED_SEARCH_DATASETS_QUERY } from "../queries/user"
@@ -260,6 +262,11 @@ export const UserDatasetsView: React.FC<UserDatasetsViewProps> = ({
       className={styles.userDatasetsWrapper}
       data-testid="user-datasets-view"
     >
+      <Helmet>
+        <title>
+          {orcidUser.name || "User"}'s Datasets - {pageTitle}
+        </title>
+      </Helmet>
       <h3>{orcidUser.name}'s Datasets</h3>
 
       <UserDatasetFilters

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

@@ -7,6 +7,7 @@ import { isAdmin } from "../authentication/admin-user"
 import { useCookies } from "react-cookie"
 import { getProfile } from "../authentication/profile"
 import { useUser } from "../queries/user"
+import FourOThreePage from "../errors/403page"
 
 export const UserQuery: React.FC = () => {
   const { orcid } = useParams()
@@ -22,6 +23,10 @@ export const UserQuery: React.FC = () => {
 
   if (loading) return <div>Loading...</div>
 
+  if (!profile?.admin && user.profilePrivate) {
+    return <FourOThreePage />
+  }
+
   // is admin or profile matches id from the user data being returned
   const isUser = (user?.id === profile?.sub) ? true : false
   const hasEdit = isAdminUser || (user?.id === profile?.sub) ? true : false