@openneuro/app 4.36.0-alpha.0 → 4.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.36.0-alpha.0",
+  "version": "4.36.1",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -75,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0d754964177331113f4279c48d6c0fae0f59adc2"
+  "gitHead": "1b95eb2f9fcabcdca1f4fc4e1f2064ed2c4dedf7"
 }

package/src/scripts/components/page/page.scss

@@ -27,7 +27,7 @@
 // admin page
 .admin.route-wrapper {
   margin: 20px auto;
-  max-width: 1000px;
+  max-width: 1500px;
   width: 90%;
   .nav-pills.tabs {
     display: flex;
@@ -39,80 +39,12 @@
       display: block;
     }
   }
-  input {
-    display: inline-block;
-    appearance: none;
-    box-sizing: border-box;
-    border-radius: 0;
-    border: 0.1rem solid #dfdfdf;
-    padding: 10px 12px;
-    max-width: 100%;
-    line-height: 12px;
-  }
+
   .header-wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-
-  .filters {
-    button {
-      margin: 0 10px;
-    }
-  }
-  .users-panel-wrap {
-    .user-panel {
-      display: flex;
-      justify-content: space-between;
-      margin: 20px 0;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      padding: 10px;
-      > .user-col {
-        flex: auto;
-        label {
-          display: block;
-          font-weight: 600;
-          font-size: 14px;
-        }
-      }
-      .user-panel-inner {
-        display: flex;
-        justify-content: space-between;
-        > .user-col {
-          flex: 1;
-        }
-      }
-      .uc-summary .summary-data,
-      .uc-provider {
-        font-size: 12px;
-        margin: 0 0 10px;
-      }
-      .uc-name {
-        font-size: 20px;
-        display: flex;
-        align-items: flex-start;
-        .badge {
-          font-size: 12px;
-          color: #fff;
-          background: red;
-          display: inline-block;
-          padding: 5px;
-          border-radius: 4px;
-          font-weight: bold;
-        }
-        .dataset-tools-wrap-admin .tools {
-          display: flex;
-          button {
-            background-color: transparent;
-            border: 0;
-            outline: 0;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
 }
 
 //api page

package/src/scripts/pages/admin/__tests__/users.spec.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import { fireEvent, render, screen } from "@testing-library/react"
 import { MockedProvider } from "@apollo/client/testing"
-import { GET_USERS, UsersQuery } from "../users"
 import { vi } from "vitest"
+import { UserQuery } from "../../../users/user-query"
+import { GET_USERS } from "../../../queries/users"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
 
 // Mock admin login
 vi.mock("../../../authentication/profile", (_importOriginal) => {
@@ -16,6 +18,21 @@ vi.mock("../../../authentication/profile", (_importOriginal) => {
   }
 })
 
+// MOCK THE USERQUERY COMPONENT
+
+vi.mock("../../../users/user-query", () => {
+  return {
+    UserQuery: vi.fn(() => (
+      <div data-testid="mock-user-query-admin-view">
+        <h3>Current Users (Mocked UserQuery)</h3>
+        <input type="text" placeholder="Search Name or Email" />
+        <div data-testid="user-list-container">
+        </div>
+      </div>
+    )),
+  }
+})
+
 const users = [
   {
     __typename: "User",
@@ -31,6 +48,10 @@ const users = [
 ]
 
 describe("Users", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it("renders users", async () => {
     const mocks = [
       {
@@ -44,25 +65,33 @@ describe("Users", () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <UsersQuery />
+        <MemoryRouter initialEntries={["/admin/users"]}>
+          <Routes>
+            <Route path="/admin/users" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
       </MockedProvider>,
     )
 
-    expect(await screen.findByText("Current Users")).toBeInTheDocument()
-    expect(await screen.findByText(users[0].name)).toBeInTheDocument()
+    expect(await screen.findByText("Current Users (Mocked UserQuery)"))
+      .toBeInTheDocument()
   })
+
   it("handles filtering users with no email", async () => {
-    const emailLessUsers = [...users, {
-      __typename: "User",
-      id: "db3e7a0b-950b-4951-9059-c003ca3c1669",
-      name: "New User",
-      admin: false,
-      email: null,
-      blocked: false,
-      provider: "orcid",
-      lastSeen: "2019-09-24T19:26:07.704Z",
-      created: "2013-09-24T19:26:07.704Z",
-    }]
+    const emailLessUsers = [
+      ...users,
+      {
+        __typename: "User",
+        id: "db3e7a0b-950b-4951-9059-c003ca3c1669",
+        name: "New User",
+        admin: false,
+        email: null,
+        blocked: false,
+        provider: "orcid",
+        lastSeen: "2019-09-24T19:26:07.704Z",
+        created: "2013-09-24T19:26:07.704Z",
+      },
+    ]
     const mocks = [
       {
         delay: 30,
@@ -75,7 +104,11 @@ describe("Users", () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <UsersQuery />
+        <MemoryRouter initialEntries={["/admin/users"]}>
+          <Routes>
+            <Route path="/admin/users" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
       </MockedProvider>,
     )
 
@@ -83,7 +116,7 @@ describe("Users", () => {
     fireEvent.change(input, { target: { value: "test" } })
     fireEvent.keyDown(input, { key: "a" })
 
-    expect(await screen.findByText("Current Users")).toBeInTheDocument()
-    expect(await screen.findByText(users[0].name)).toBeInTheDocument()
+    expect(await screen.findByText("Current Users (Mocked UserQuery)"))
+      .toBeInTheDocument()
   })
 })

package/src/scripts/pages/admin/admin.jsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { Navigate, NavLink, Route, Routes } from "react-router-dom"
-import Users from "./users"
+import { UsersPage } from "./users"
 import FlaggedFiles from "./flagged-files.jsx"
 import AdminUser from "../../authentication/admin-user.jsx"
 
@@ -28,7 +28,7 @@ class Dashboard extends React.Component {
                 </li>
               </ul>
               <Routes>
-                <Route path="/users" element={<Users />} />
+                <Route path="/users" element={<UsersPage />} />
                 <Route path="/flagged-files" element={<FlaggedFiles />} />
                 <Route
                   path="/"

package/src/scripts/pages/admin/user-fragment.ts

@@ -4,11 +4,18 @@ export const USER_FRAGMENT = gql`
   fragment userFields on User {
     id
     name
+    admin
+    blocked
     email
     provider
-    admin
-    created
     lastSeen
-    blocked
+    created
+    avatar
+    github
+    institution
+    location
+    modified
+    orcid
+  
   }
 `

package/src/scripts/pages/admin/user-summary.tsx

@@ -0,0 +1,100 @@
+import React from "react"
+import parseISO from "date-fns/parseISO"
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
+import { formatDate } from "../../utils/date.js"
+import type { User } from "../../types/user-types"
+import styles from "./users.module.scss"
+import { Tooltip } from "../../components/tooltip/Tooltip"
+import { UserTools } from "./user-tools.js"
+
+interface UserSummaryProps {
+  user: User
+  refetchCurrentPage: () => void
+}
+
+const UserSummary = ({ user, refetchCurrentPage }: UserSummaryProps) => {
+  const adminBadge = user.admin
+    ? (
+      <Tooltip tooltip="Admin">
+        <span className={`${styles.badge} ${styles.admin}`}>
+          <i className="fa fa-star"></i>
+        </span>
+      </Tooltip>
+    )
+    : null
+  const blockedBadge = user.blocked
+    ? (
+      <Tooltip tooltip="Blocked">
+        <span className={`${styles.badge} ${styles.blocked}`}>
+          <i className="fa fa-lock"></i>
+        </span>
+      </Tooltip>
+    )
+    : (
+      <Tooltip tooltip="Active">
+        <span className={`${styles.badge}`}>
+          <i className="fa fa-lock-open"></i>
+        </span>
+      </Tooltip>
+    )
+  const userEmail = <a href={`mailto:${user.email}`}>{user.email}</a>
+  const userOrcid = <a href={`/user/${user.orcid}`}>{user.orcid}</a>
+  return (
+    <div className={styles.gridRow}>
+      <div className={`${styles.gtCell} ${styles.colLarge}`}>
+        <h3>
+          {user.name}
+          {adminBadge && adminBadge}
+          {blockedBadge}
+          <br />
+        </h3>
+      </div>
+
+      <div className={`${styles.gtCell} ${styles.colXLarge}`}>
+        <div>{user.email && userEmail}</div>
+        {user.orcid && userOrcid}
+        <span>
+          Provider:{" "}
+          <b style={{ textTransform: "uppercase" }}>{user.provider}</b>
+        </span>
+      </div>
+      <div className={`${styles.gtCell} ${styles.colSmall}`}>
+        <>
+          <div>
+            <b>{formatDate(user.created)}</b>
+          </div>
+          Created
+        </>
+      </div>
+      <div className={`${styles.gtCell} ${styles.colSmall}`}>
+        {user.lastSeen !== null && (
+          <>
+            <div>
+              <b>{formatDistanceToNow(parseISO(user.lastSeen))} ago</b>
+            </div>
+            Last Login
+          </>
+        )}
+      </div>
+      <div className={`${styles.gtCell} ${styles.colSmall}`}>
+        {user.modified !== null && (
+          <>
+            <div>
+              <b>{formatDistanceToNow(parseISO(user.modified))} ago</b>
+            </div>
+            Modified
+          </>
+        )}
+      </div>
+
+      <div className={`${styles.gtCell} ${styles.colFlex}`}>
+        <UserTools
+          user={user}
+          refetchCurrentPage={refetchCurrentPage}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UserSummary

package/src/scripts/pages/admin/user-tools.tsx

@@ -1,79 +1,102 @@
 import React from "react"
-import type { FC, ReactElement } from "react"
-import { gql } from "@apollo/client"
-import { Mutation } from "@apollo/client/react/components"
+import type { FC } from "react"
+import { useMutation } from "@apollo/client"
 import { WarnButton } from "../../components/warn-button/WarnButton"
 import { getProfile } from "../../authentication/profile"
 import { useCookies } from "react-cookie"
-import { USER_FRAGMENT } from "./user-fragment"
+import type { User } from "../../types/user-types"
+import styles from "./users.module.scss"
+import * as Sentry from "@sentry/react"
+
+import { SET_ADMIN_MUTATION, SET_BLOCKED_MUTATION } from "../../queries/users"
 
 interface UserToolsProps {
-  user: Record<string, unknown>
-  refetch: () => Record<string, unknown>
+  user: User
+  refetchCurrentPage: () => void
 }
 
-export const SET_ADMIN = gql`
-  mutation ($id: ID!, $admin: Boolean!) {
-    setAdmin(id: $id, admin: $admin) {
-      ...userFields
-    }
-  }
-  ${USER_FRAGMENT}
-`
-
-export const SET_BLOCKED = gql`
-  mutation ($id: ID!, $blocked: Boolean!) {
-    setBlocked(id: $id, blocked: $blocked) {
-      ...userFields
-    }
-  }
-  ${USER_FRAGMENT}
-`
-
-export const UserTools: FC<UserToolsProps> = ({ user, refetch }) => {
+export const UserTools: FC<UserToolsProps> = ({ user, refetchCurrentPage }) => {
   const [cookies] = useCookies()
   const adminIcon = user.admin ? "fa-check-square-o" : "fa-square-o"
   const blacklistIcon = user.blocked ? "fa-check-square-o" : "fa-square-o"
 
+  // --- useMutation for SET_ADMIN ---
+  const [setAdmin] = useMutation(SET_ADMIN_MUTATION, {
+    update(cache, { data: { setAdmin: updatedUser } }) {
+      cache.modify({
+        id: cache.identify(updatedUser),
+        fields: {
+          admin() {
+            return updatedUser.admin
+          },
+          blocked() {
+            return updatedUser.blocked
+          },
+          modified() {
+            return updatedUser.modified
+          },
+        },
+      })
+    },
+    onCompleted: () => {
+      refetchCurrentPage()
+    },
+    onError: (error) => {
+      Sentry.captureException(error)
+    },
+  })
+
+  // --- useMutation for SET_BLOCKED ---
+  const [setBlocked] = useMutation(SET_BLOCKED_MUTATION, {
+    update(cache, { data: { setBlocked: updatedUser } }) {
+      cache.modify({
+        id: cache.identify(updatedUser),
+        fields: {
+          blocked() {
+            return updatedUser.blocked
+          },
+          admin() {
+            return updatedUser.admin
+          },
+          modified() {
+            return updatedUser.modified
+          },
+        },
+      })
+    },
+    onCompleted: () => {
+      refetchCurrentPage()
+    },
+    onError: (error) => {
+      Sentry.captureException(error)
+    },
+  })
+
   if (user.id !== getProfile(cookies).sub) {
     return (
       <div className="dataset-tools-wrap-admin">
-        <div className="tools clearfix">
+        <div className={styles.tools}>
           <div className="tool">
-            <Mutation
-              mutation={SET_ADMIN}
-              variables={{ id: user.id, admin: !user.admin }}
-            >
-              {(setAdmin): ReactElement => (
-                <WarnButton
-                  message="Admin"
-                  icon={adminIcon}
-                  onConfirmedClick={(): void => {
-                    setAdmin().then(() => {
-                      refetch()
-                    })
-                  }}
-                />
-              )}
-            </Mutation>
+            <WarnButton
+              message="Admin"
+              icon={adminIcon}
+              onConfirmedClick={async (): Promise<void> => {
+                await setAdmin({
+                  variables: { id: user.id, admin: !user.admin },
+                })
+              }}
+            />
           </div>
           <div className="tool">
-            <Mutation
-              mutation={SET_BLOCKED}
-              variables={{ id: user.id, blocked: !user.blocked }}
-            >
-              {(setBlocked): ReactElement => (
-                <WarnButton
-                  message="Block"
-                  icon={blacklistIcon}
-                  onConfirmedClick={(): void => {
-                    setBlocked().then(() => {
-                      refetch()
-                    })
-                  }}
-                />
-              )}
-            </Mutation>
+            <WarnButton
+              message="Block"
+              icon={blacklistIcon}
+              onConfirmedClick={async (): Promise<void> => {
+                await setBlocked({
+                  variables: { id: user.id, blocked: !user.blocked },
+                })
+              }}
+            />
           </div>
         </div>
       </div>