@openneuro/app 4.21.3 → 4.22.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.21.3",
+  "version": "4.22.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -20,18 +20,19 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.21.3",
-    "@openneuro/components": "^4.21.3",
+    "@openneuro/client": "^4.22.0-alpha.0",
+    "@openneuro/components": "^4.22.0-alpha.0",
     "@tanstack/react-table": "^8.9.3",
     "bids-validator": "1.13.0",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "date-fns": "^2.16.1",
+    "dompurify": "^3.0.8",
     "draft-js": "^0.11.7",
     "email-validator": "^2.0.4",
     "graphql": "16.8.1",
     "jwt-decode": "^2.2.0",
-    "markdown-to-jsx": "^7.1.2",
+    "markdown-to-jsx": "^7.4.0",
     "pluralize": "8.0.0",
     "prop-types": "^15.6.0",
     "react": "^17.0.1",
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "^11.1.0",
+    "@types/dompurify": "^3",
     "@types/jsdom": "^16",
     "@types/node": "18.11.9",
     "@types/react": "^17.0.8",
@@ -64,11 +66,11 @@
     "sass": "^1.32.8",
     "stream-browserify": "^3.0.0",
     "typescript": "5.1.6",
-    "vite": "4.4.12",
+    "vite": "4.5.2",
     "vitest": "0.34.4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a1bc17ea73966bc27be4a4bed41729cbdee20beb"
+  "gitHead": "9931842bb7afcac659af2a7b5a5d045aae1f4776"
 }

package/src/scripts/common/containers/header.tsx

@@ -31,11 +31,18 @@ export const HeaderContainer: FC = () => {
   const [newKeyword, setNewKeyword, newKeywordRef] = useState("")
 
   const handleSubmit = () => {
-    const query = JSON.stringify({
+    const newQuery = {
       keywords: newKeywordRef.current ? [newKeywordRef.current] : [],
-    })
+    }
+    const query = JSON.stringify(newQuery)
     setNewKeyword("")
-    navigate(`/search?query=${query}`)
+    if (
+      newQuery?.keywords?.length && newQuery.keywords[0].match(/^ds[0-9]{6,6}$/)
+    ) {
+      navigate(`/datasets/${newQuery.keywords[0]}`)
+    } else {
+      navigate(`/search?query=${query}`)
+    }
   }
 
   const toggleLoginModal = (): void => {

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

@@ -156,6 +156,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                 >
                   <div
                     class="accordion-title "
+                    role="switch"
                   >
                     <div>
                       <h3
@@ -204,6 +205,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                         >
                           <div
                             class="accordion-title "
+                            role="switch"
                           >
                             <span>
                               view 1 warning in 1 file
@@ -223,6 +225,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                                 >
                                   <div
                                     class="accordion-title "
+                                    role="switch"
                                   >
                                     <span
                                       class="file-header"
@@ -556,6 +559,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                     >
                       <div
                         class="accordion-title "
+                        role="switch"
                       >
                         <span
                           aria-label="DS003-downsampled (only T1)"
@@ -675,6 +679,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                               >
                                 <div
                                   class="accordion-title "
+                                  role="switch"
                                 >
                                   <span
                                     aria-label="sub-01"
@@ -708,6 +713,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                               >
                                 <div
                                   class="accordion-title "
+                                  role="switch"
                                 >
                                   <span
                                     aria-label="sub-02"
@@ -766,6 +772,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                     >
                       <div
                         class="accordion-title open"
+                        role="switch"
                       >
                         <span
                           aria-label="DS003-downsampled (only T1)"
@@ -885,6 +892,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                               >
                                 <div
                                   class="accordion-title "
+                                  role="switch"
                                 >
                                   <span
                                     aria-label="sub-01"
@@ -918,6 +926,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                               >
                                 <div
                                   class="accordion-title "
+                                  role="switch"
                                 >
                                   <span
                                     aria-label="sub-02"
@@ -1279,6 +1288,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
             >
               Funding
             </h2>
+            <ul />
           </div>
           <div
             class="dataset-meta-block dmb-list"
@@ -1288,6 +1298,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
             >
               References and Links
             </h2>
+            <ul />
           </div>
           <div
             class="dataset-meta-block dmb-list"
@@ -1297,6 +1308,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
             >
               Ethics Approvals
             </h2>
+            <ul />
           </div>
         </div>
       </div>

package/src/scripts/dataset/components/MetaDataBlock.tsx

@@ -1,4 +1,4 @@
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 import React from "react"
 
 export interface MetaDataBlockProps {

package/src/scripts/dataset/components/MetaDataListBlock.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Markdown } from "../../utils/markdown"
 
 export interface MetaDataListBlockProps {
   heading: string
@@ -17,7 +18,15 @@ export const MetaDataListBlock = ({
   return (
     <div className={"dataset-meta-block " + className}>
       <h2 className="dmb-heading">{heading}</h2>
-      {fieldContent}
+      <ul>
+        {Array.isArray(fieldContent)
+          ? fieldContent.map((item, index) => (
+            <li key={index}>
+              <Markdown>{item}</Markdown>
+            </li>
+          ))
+          : item}
+      </ul>
     </div>
   )
 }

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

@@ -1,5 +1,5 @@
 import React from "react"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../utils/markdown"
 import Helmet from "react-helmet"
 import { Navigate, useLocation } from "react-router-dom"
 import pluralize from "pluralize"

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

@@ -7,6 +7,7 @@ exports[`FileTree component > renders with default props 1`] = `
   >
     <div
       class="accordion-title "
+      role="switch"
     >
       <span
         aria-label=""

package/src/scripts/dataset/fragments/edit-description-list.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import UpdateDescription from "../mutations/description.jsx"
 import { CancelButton } from "./cancel-button"
 import { EditButton } from "./edit-button"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 
 import EditList from "./edit-list.jsx"
 

package/src/scripts/dataset/routes/dataset-default.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 import { ReadMore } from "@openneuro/components/read-more"
 import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"

package/src/scripts/dataset/routes/snapshot-default.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 import { ReadMore } from "@openneuro/components/read-more"
 import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"

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

@@ -17,6 +17,7 @@ import { DatasetGitAccess } from "./components/DatasetGitAccess"
 import { DatasetHeader } from "./components/DatasetHeader"
 import { DatasetTools } from "./components/DatasetTools"
 import { MetaDataBlock } from "./components/MetaDataBlock"
+import { MetaDataListBlock } from "./components/MetaDataListBlock"
 import { ModalitiesMetaDataBlock } from "./components/ModalitiesMetaDataBlock"
 import { ValidationBlock } from "./components/ValidationBlock"
 import { VersionList } from "./components/VersionList"
@@ -316,19 +317,19 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                 heading="How to Acknowledge"
                 item={description.HowToAcknowledge}
               />
-              <MetaDataBlock
+              <MetaDataListBlock
                 heading="Funding"
                 item={description.Funding}
                 className="dmb-list"
               />
 
-              <MetaDataBlock
+              <MetaDataListBlock
                 heading="References and Links"
                 item={description.ReferencesAndLinks}
                 className="dmb-list"
               />
 
-              <MetaDataBlock
+              <MetaDataListBlock
                 heading="Ethics Approvals"
                 item={description.EthicsApprovals}
                 className="dmb-list"

package/src/scripts/search/search-container.tsx

@@ -10,6 +10,7 @@ import {
 } from "../authentication/profile"
 import { Button } from "@openneuro/components/button"
 import { Loading } from "@openneuro/components/loading"
+import { NeurobagelSearch } from "@openneuro/components/search-page"
 import {
   AgeRangeInput,
   AllDatasetsToggle,
@@ -156,6 +157,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
         )}
         renderSearchFacets={() => (
           <>
+            <NeurobagelSearch />
             <KeywordInput />
             <AdminUser>
               <AllDatasetsToggle />

package/src/scripts/search/use-search-results.tsx

@@ -157,7 +157,7 @@ export const useSearchResults = () => {
     boolQuery.addClause(
       "must",
       simpleQueryString(sqsJoinWithAND(keywords), [
-        "id^6",
+        "id^20",
         "latestSnapshot.readme",
         "latestSnapshot.description.Name^6",
         "latestSnapshot.description.Authors^3",

package/src/scripts/utils/__tests__/__snapshots__/markdown.spec.tsx.snap

@@ -0,0 +1,57 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test <Markdown> component > allows a href with certain protocols 1`] = `
+<DocumentFragment>
+  <a
+    href="https://example.com"
+  >
+    Example link that should work.
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > does not allow href with unknown protocols 1`] = `
+<DocumentFragment>
+  <a>
+    Example link that should not work.
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > filters close-break tags 1`] = `
+<DocumentFragment>
+  <span>
+    <br />
+    sample text
+    <br />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > filters out disallowed tags 1`] = `
+<DocumentFragment>
+  <ul>
+    <li>
+      Markdown document
+    </li>
+  </ul>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > safely handles broken HTML tags 1`] = `
+<DocumentFragment>
+  <ul>
+    <li>
+      Markdown document
+
+      <br />
+      <br />
+      <ul>
+        <li>
+          test content
+        </li>
+      </ul>
+    </li>
+  </ul>
+</DocumentFragment>
+`;

package/src/scripts/utils/__tests__/markdown.spec.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { Markdown } from "../markdown"
+
+describe("Test <Markdown> component", () => {
+  it("safely handles broken HTML tags", () => {
+    const brokenTagInput = "* Markdown document\n<br><br>\n * test content"
+    const { asFragment } = render(<Markdown>{brokenTagInput}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("filters out disallowed tags", () => {
+    const badTags =
+      '* Markdown document\n<script type="text/javascript">alert("this should not happen")</script>\n'
+    const { asFragment } = render(<Markdown>{badTags}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("allows a href with certain protocols", () => {
+    const hrefExample =
+      '<a href="https://example.com">Example link that should work.</a>'
+    const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("does not allow href with unknown protocols", () => {
+    const hrefExample =
+      '<a href="about:memory">Example link that should not work.</a>'
+    const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("filters close-break tags", () => {
+    const hrefExample =
+      '<br>sample text</br>'
+    const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

package/src/scripts/utils/markdown.tsx

@@ -0,0 +1,167 @@
+import React from "react"
+import MarkdownToJsx from "markdown-to-jsx"
+import DOMPurify from "dompurify"
+
+interface MarkdownProps {
+  children: string
+}
+
+// Closely aligned with GitHub Markdown
+// See https://github.com/gjtorikian/html-pipeline/blob/7e562219f9814777b73b48f32aece874452c0c5e/lib/html_pipeline/sanitization_filter.rb
+
+const ALLOWED_TAGS = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "br",
+  "b",
+  "i",
+  "strong",
+  "em",
+  "a",
+  "pre",
+  "code",
+  "img",
+  "tt",
+  "div",
+  "ins",
+  "del",
+  "sup",
+  "sub",
+  "p",
+  "picture",
+  "ol",
+  "ul",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "blockquote",
+  "dl",
+  "dt",
+  "dd",
+  "kbd",
+  "q",
+  "samp",
+  "var",
+  "hr",
+  "ruby",
+  "rt",
+  "rp",
+  "li",
+  "tr",
+  "td",
+  "th",
+  "s",
+  "strike",
+  "summary",
+  "details",
+  "caption",
+  "figure",
+  "figcaption",
+  "abbr",
+  "bdo",
+  "cite",
+  "dfn",
+  "mark",
+  "small",
+  "source",
+  "span",
+  "time",
+  "wbr",
+]
+
+const ALLOWED_ATTR = [
+  "abbr",
+  "accept",
+  "accept-charset",
+  "accesskey",
+  "action",
+  "align",
+  "alt",
+  "aria-describedby",
+  "aria-hidden",
+  "aria-label",
+  "aria-labelledby",
+  "axis",
+  "border",
+  "char",
+  "charoff",
+  "charset",
+  "checked",
+  "clear",
+  "cols",
+  "colspan",
+  "compact",
+  "coords",
+  "datetime",
+  "dir",
+  "disabled",
+  "enctype",
+  "for",
+  "frame",
+  "headers",
+  "height",
+  "hreflang",
+  "hspace",
+  "id",
+  "ismap",
+  "label",
+  "lang",
+  "maxlength",
+  "media",
+  "method",
+  "multiple",
+  "name",
+  "nohref",
+  "noshade",
+  "nowrap",
+  "open",
+  "progress",
+  "prompt",
+  "readonly",
+  "rel",
+  "rev",
+  "role",
+  "rows",
+  "rowspan",
+  "rules",
+  "scope",
+  "selected",
+  "shape",
+  "size",
+  "span",
+  "start",
+  "summary",
+  "tabindex",
+  "title",
+  "type",
+  "usemap",
+  "valign",
+  "value",
+  "width",
+  "itemprop",
+  "href",
+  "cite",
+  "src",
+  "longdesc",
+]
+
+/**
+ * Sanitize disallowed HTML tags and attributes and convert from Markdown to JSX
+ */
+export function Markdown({ children }: MarkdownProps) {
+  const sanitizedMarkdown = DOMPurify.sanitize(children, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOW_ARIA_ATTR: false,
+  })
+  return (
+    <>
+      <MarkdownToJsx>{sanitizedMarkdown}</MarkdownToJsx>
+    </>
+  )
+}