@openneuro/app 4.19.2 → 4.20.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.19.2",
+  "version": "4.20.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -17,18 +17,19 @@
     "@apollo/client": "3.7.2",
     "@artsy/fresnel": "^1.3.1",
     "@elastic/apm-rum": "5.11.0",
-    "@emotion/react": "11.6.0",
-    "@emotion/styled": "11.6.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.19.2",
-    "@openneuro/components": "^4.19.2",
+    "@openneuro/client": "^4.20.0-alpha.0",
+    "@openneuro/components": "^4.20.0-alpha.0",
+    "@tanstack/react-table": "^8.9.3",
     "bids-validator": "1.10.0",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "date-fns": "^2.16.1",
     "draft-js": "^0.11.7",
     "email-validator": "^2.0.4",
-    "graphql": "14.7.0",
+    "graphql": "16.6.0",
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^7.1.2",
     "pluralize": "8.0.0",
@@ -41,23 +42,11 @@
     "react-router-dom": "6.3.0",
     "react-toastify": "6.0.9",
     "react-usestateref": "^1.0.8",
-    "react-virtualized": "remorses/react-virtualized-fixed-import.git#9.22.3",
     "semver": "^5.5.0",
     "subscriptions-transport-ws": "0.11.0",
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-react": "^7.6.3",
-    "@babel/preset-typescript": "^7.7.4",
-    "@babel/runtime": "^7.6.3",
-    "@babel/runtime-corejs3": "^7.13.10",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@types/jsdom": "^16",
@@ -71,15 +60,15 @@
     "history": "5.3.0",
     "jsdom": "^16.5.3",
     "object.fromentries": "^2.0.0",
-    "rollup-plugin-polyfill-node": "^0.9.0",
+    "rollup-plugin-polyfill-node": "0.12.0",
     "sass": "^1.32.8",
     "stream-browserify": "^3.0.0",
-    "typescript": "4.5.4",
+    "typescript": "5.1.6",
     "vite": "^3.2.7",
-    "vitest": "^0.25.2"
+    "vitest": "0.33.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3074eba3525c3083dbe22495418a91ef02360d32"
+  "gitHead": "cc6822c27d8e66562e325042fc11a2998cb2eef7"
 }

package/src/client.jsx

@@ -23,7 +23,6 @@ ReactDOM.render(
     <ApolloProvider
       client={createClient(`${config.url}/crn/graphql`, {
         clientVersion: version,
-        enableWebsocket: true,
         cache: new InMemoryCache({
           typePolicies: {
             Query: {

package/src/scripts/authentication/__tests__/profile.spec.js

@@ -1,4 +1,4 @@
-import { parseJwt } from '../profile.js'
+import { parseJwt } from '../profile'
 
 const asciiToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'

package/src/scripts/authentication/admin-user.jsx

@@ -1,5 +1,5 @@
 import { useCookies } from 'react-cookie'
-import { getProfile } from './profile.js'
+import { getProfile } from './profile'
 
 export const isAdmin = () => {
   const [cookies] = useCookies()

package/src/scripts/authentication/loginCheck.js

@@ -1,4 +1,4 @@
-import { getProfile, guardExpired } from './profile.js'
+import { getProfile, guardExpired } from './profile'
 
 // Expects a universal cookie
 export const loginCheck = cookies => guardExpired(getProfile(cookies))

package/src/scripts/authentication/{profile.js → profile.ts}

@@ -1,5 +1,15 @@
 import jwtDecode from 'jwt-decode'
 
+interface OpenNeuroTokenProfile {
+  sub: string
+  email: string
+  provider: string
+  name: string
+  admin: boolean
+  iat: number
+  exp: number
+}
+
 /**
  * Read JSON object from JWT string
  * @param {string} token
@@ -9,7 +19,7 @@ export const parseJwt = jwtDecode
 /**
  * Retrieve the user profile from JWT cookie
  */
-export const getProfile = cookies => {
+export function getProfile(cookies): OpenNeuroTokenProfile {
   const accessToken = cookies['accessToken']
   return accessToken ? parseJwt(accessToken) : null
 }
@@ -28,7 +38,7 @@ export const getUnexpiredProfile = cookies => {
  * @param {object} profile A profile returned by getProfile()
  * @returns {boolean} False if expired
  */
-export const guardExpired = profile => {
+export const guardExpired = (profile: OpenNeuroTokenProfile): boolean => {
   const now = new Date().getTime() / 1000
   if (profile && now < profile.exp) {
     return true

package/src/scripts/authentication/regular-user.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useCookies } from 'react-cookie'
-import { getProfile } from './profile.js'
+import { getProfile } from './profile'
 
 interface RegularUserProps {
   children?: React.ReactNode

package/src/scripts/authentication/withProfile.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React from 'react'
 import { useCookies } from 'react-cookie'
-import { getProfile, guardExpired } from './profile.js'
+import { getProfile, guardExpired } from './profile'
 
 const withProfile = WrappedComponent => {
   return props => {

package/src/scripts/common/forms/__tests__/__snapshots__/warn-button.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`common/forms/WarnButton > renders successfully 1`] = `
 <DocumentFragment>

package/src/scripts/components/__tests__/__snapshots__/data-table.spec.tsx.snap

@@ -0,0 +1,84 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DataTable component > renders a basic table 1`] = `
+<DocumentFragment>
+  <table>
+    <thead>
+      <tr
+        class="css-lxeoei"
+      >
+        <th
+          class="css-ysxg9l"
+          colspan="1"
+        >
+          <div
+            class="cursor-pointer select-none"
+          >
+            col1 
+          </div>
+        </th>
+        <th
+          class="css-ysxg9l"
+          colspan="1"
+        >
+          <div
+            class="cursor-pointer select-none"
+          >
+            col2 
+          </div>
+        </th>
+        <th
+          class="css-ysxg9l"
+          colspan="1"
+        >
+          <div
+            class="cursor-pointer select-none"
+          >
+            col3 
+          </div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class="css-lxeoei"
+      >
+        <td
+          class="css-14o8u5y"
+        >
+          text
+        </td>
+        <td
+          class="css-14o8u5y"
+        >
+          50
+        </td>
+        <td
+          class="css-14o8u5y"
+        >
+          string value
+        </td>
+      </tr>
+      <tr
+        class="css-lxeoei"
+      >
+        <td
+          class="css-14o8u5y"
+        >
+          more
+        </td>
+        <td
+          class="css-14o8u5y"
+        >
+          75
+        </td>
+        <td
+          class="css-14o8u5y"
+        >
+          more strings
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;

package/src/scripts/components/__tests__/data-table.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { DataTable } from '../data-table'
+
+const tableData = [
+  { col1: 'text', col2: 50, col3: 'string value' },
+  { col1: 'more', col2: 75, col3: 'more strings' },
+]
+
+describe('DataTable component', () => {
+  it('renders a basic table', () => {
+    const { asFragment } = render(<DataTable data={tableData}></DataTable>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

package/src/scripts/components/data-table.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  createColumnHelper,
+  SortingState,
+} from '@tanstack/react-table'
+import styled from '@emotion/styled'
+import { format, parseISO, isValid } from 'date-fns'
+
+interface DataTableProps {
+  data: any[]
+  downloadFilename?: string
+  hideColumns?: string[]
+}
+
+const TH = styled.th`
+  border-bottom: 1px solid #ccc;
+  margin-right: 2em;
+  div {
+    display: inline-block;
+  }
+`
+
+const TR = styled.tr`
+  margin-right: 1em;
+  margin-bottom: 0.8em;
+`
+
+const TD = styled.td`
+  padding: 3px;
+`
+
+function CellFormat(props): any {
+  const value = props.getValue()
+  if (typeof value === 'string' && isValid(parseISO(value))) {
+    return format(parseISO(value), 'yyyy-MM-dd')
+  } else if (typeof value === 'string' && /^ds[0-9]{6}$/.exec(value)) {
+    return <a href={`/datasets/${value}`}>{value}</a>
+  } else if (Array.isArray(value)) {
+    return value.join(',')
+  } else {
+    return value
+  }
+}
+
+/**
+ * Take a general table-like array of objects (one object per row) and render as a simple table with sortable columns
+ */
+export function DataTable<T>({
+  data,
+  hideColumns = [],
+}: DataTableProps): React.ReactElement {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const columnHelper = createColumnHelper<T>()
+  const columns = React.useMemo(
+    () =>
+      Object.keys(data[0])
+        .filter(name => !hideColumns.includes(name))
+        .map(name =>
+          columnHelper.accessor(name as any, {
+            header: name,
+            cell: CellFormat,
+          }),
+        ),
+    [data, columnHelper, hideColumns],
+  )
+  const memoData = React.useMemo(() => data, [data])
+  const table = useReactTable({
+    data: memoData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+  })
+  return (
+    <table>
+      <thead>
+        {table.getHeaderGroups().map(headerGroup => (
+          <TR key={headerGroup.id}>
+            {headerGroup.headers.map(header => (
+              <TH key={header.id} colSpan={header.colSpan}>
+                {header.isPlaceholder ? null : (
+                  <div
+                    {...{
+                      className: header.column.getCanSort()
+                        ? 'cursor-pointer select-none'
+                        : '',
+                      onClick: header.column.getToggleSortingHandler(),
+                    }}>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                    &nbsp;
+                    {{
+                      asc: '▲',
+                      desc: '▼',
+                    }[header.column.getIsSorted() as string] ?? null}
+                  </div>
+                )}
+              </TH>
+            ))}
+          </TR>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map(row => (
+          <TR key={row.id}>
+            {row.getVisibleCells().map(cell => (
+              <TD key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TD>
+            ))}
+          </TR>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/src/scripts/datalad/subscriptions/__tests__/__snapshots__/files-subscription.spec.jsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FilesSubscription > renders with common props 1`] = `<DocumentFragment />`;

package/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SnapshotContainer component > includes JSON-LD data in the header 1`] = `
 {
@@ -74,7 +74,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                     data-tooltip="Get notified on new versions/comments"
                   >
                     <span
-                      class="toggle-counter disabled"
+                      class="toggle-counter"
                     >
                       <button
                         aria-label="Following"
@@ -105,7 +105,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                     data-tooltip="Save to your bookmarked datasets"
                   >
                     <span
-                      class="toggle-counter disabled"
+                      class="toggle-counter"
                     >
                       <button
                         aria-label="Bookmark"

package/src/scripts/dataset/comments/__tests__/__snapshots__/comment.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Comment component > renders an ORCID user comment 1`] = `
 {

package/src/scripts/dataset/comments/__tests__/__snapshots__/comments.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Comments component > recursively renders a tree of comments 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/common/follow-toggles.tsx

@@ -1,4 +1,6 @@
+import React from 'react'
 import styled from '@emotion/styled'
+import '@emotion/react'
 
 export const FollowToggles = styled.div`
   display: flex;

package/src/scripts/dataset/dataset-query.jsx

@@ -15,8 +15,7 @@ import useDatasetDeletedSubscription, {
   datasetDeletedToast,
 } from '../datalad/subscriptions/useDatasetDeletedSubscription.jsx'
 import useDraftSubscription from '../datalad/subscriptions/useDraftSubscription.js'
-import * as DatasetQueryFragments from '../datalad/dataset/dataset-query-fragments.js'
-import { DATASET_COMMENTS } from '../datalad/dataset/comments-fragments.js'
+
 import ErrorBoundary, {
   ErrorBoundaryAssertionFailureException,
 } from '../errors/errorBoundary.jsx'
@@ -24,113 +23,7 @@ import DatasetRedirect from '../datalad/routes/dataset-redirect'
 import { trackAnalytics } from '../utils/datalad'
 import FourOFourPage from '../errors/404page'
 import FourOThreePage from '../errors/403page'
-
-/**
- * Generate the dataset page query
- */
-export const getDatasetPage = gql`
-  query dataset($datasetId: ID!) {
-    dataset(id: $datasetId) {
-      id
-      created
-      public
-      following
-      followers {
-        userId
-      }
-      starred
-      stars {
-        userId
-      }
-      worker
-      ...DatasetDraft
-      ...DatasetPermissions
-      ...DatasetSnapshots
-      ...DatasetIssues
-      ...DatasetMetadata
-      ...DatasetComments
-      uploader {
-        id
-        name
-        email
-        orcid
-      }
-      analytics {
-        downloads
-        views
-      }
-      derivatives {
-        name
-        s3Url
-        dataladUrl
-        local
-      }
-      onBrainlife
-    }
-  }
-  ${DatasetQueryFragments.DRAFT_FRAGMENT}
-  ${DatasetQueryFragments.PERMISSION_FRAGMENT}
-  ${DatasetQueryFragments.DATASET_SNAPSHOTS}
-  ${DatasetQueryFragments.DATASET_ISSUES}
-  ${DatasetQueryFragments.DATASET_METADATA}
-  ${DATASET_COMMENTS}
-`
-
-/**
- * Add files fragment for draft route
- */
-export const getDraftPage = gql`
-  query dataset($datasetId: ID!) {
-    dataset(id: $datasetId) {
-      id
-      created
-      public
-      following
-      followers {
-        userId
-      }
-      starred
-      stars {
-        userId
-      }
-      reviewers {
-        id
-        expiration
-      }
-      worker
-      ...DatasetDraft
-      ...DatasetDraftFiles
-      ...DatasetPermissions
-      ...DatasetSnapshots
-      ...DatasetIssues
-      ...DatasetMetadata
-      ...DatasetComments
-      uploader {
-        id
-        name
-        email
-        orcid
-      }
-      analytics {
-        downloads
-        views
-      }
-      derivatives {
-        name
-        s3Url
-        dataladUrl
-        local
-      }
-    }
-  }
-  ${DatasetQueryFragments.DRAFT_FRAGMENT}
-  ${DatasetQueryFragments.DRAFT_FILES_FRAGMENT}
-  ${DatasetQueryFragments.PERMISSION_FRAGMENT}
-  ${DatasetQueryFragments.DATASET_SNAPSHOTS}
-  ${DatasetQueryFragments.DATASET_ISSUES}
-  ${DatasetQueryFragments.DATASET_METADATA}
-  ${DATASET_COMMENTS}
-`
+import { getDatasetPage, getDraftPage } from '../queries/dataset'
 
 /**
  * Query to load and render dataset page - most dataset loading is done here

package/src/scripts/dataset/download/__tests__/__snapshots__/download-command-line.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`dataset/download > DownloadSampleCommand component > renders successfully 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/download/__tests__/__snapshots__/download-link.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`dataset/download/DownloadLink > renders successfully 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/download/__tests__/__snapshots__/shell-example.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`dataset/download/ShellExample > renders successfully 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/draft-container.tsx

@@ -121,13 +121,13 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
               </EditDescriptionField>
               <FollowToggles>
                 <FollowDataset
-                  profile={profile}
+                  profile={profile !== null}
                   datasetId={dataset.id}
                   following={dataset.following}
                   followers={dataset.followers.length}
                 />
                 <StarDataset
-                  profile={profile}
+                  profile={profile !== null}
                   datasetId={dataset.id}
                   starred={dataset.starred}
                   stars={dataset.stars.length}

package/src/scripts/dataset/files/__tests__/__snapshots__/file-tree.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FileTree component > renders with default props 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/files/__tests__/__snapshots__/file.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`File component > renders for dataset snapshots 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/files/file.tsx

@@ -7,7 +7,7 @@ import { Media } from '../../styles/media'
 import RemoveAnnexObject from '../mutations/remove-annex-object.jsx'
 import FlagAnnexObject from '../mutations/flag-annex-object.jsx'
 import { isAdmin } from '../../authentication/admin-user.jsx'
-import { getProfile, hasEditPermissions } from '../../authentication/profile.js'
+import { getProfile, hasEditPermissions } from '../../authentication/profile'
 import { Icon } from '@openneuro/components/icon'
 import { Tooltip } from '@openneuro/components/tooltip'
 import { useCookies } from 'react-cookie'
@@ -136,7 +136,8 @@ const File = ({
       {filename}
       <span className="filetree-editfile">
         <Media greaterThanOrEqual="medium">
-          <Tooltip tooltip={`Download: ${bytes.format(size) as string}`}>
+          <Tooltip
+            tooltip={`Download: ${bytes.format(Number(size)) as string}`}>
             <span className="edit-file download-file">
               <a
                 href={

package/src/scripts/dataset/files/viewers/__tests__/__snapshots__/file-viewer-json.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`File Viewer - JSON > renders with invalid JSON 1`] = `
 <DocumentFragment>

package/src/scripts/dataset/files/viewers/file-viewer-csv.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import parseTabular from './parse-tabular.js'
-import FileViewerTable from './file-viewer-table.jsx'
+import FileViewerTable from './file-viewer-table'
 
 const FileViewerCsv = ({ data }) => {
   const decoder = new TextDecoder()