@openneuro/app 4.20.6 → 4.21.0-alpha.3

package/src/scripts/dataset/components/__tests__/DatasetTools.spec.tsx

@@ -0,0 +1,133 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { DatasetTools } from "../DatasetTools"
+import { LocalStorageProvider } from "../../../utils/local-storage"
+
+const wrapper = ({ children }) => (
+  <MemoryRouter>
+    <LocalStorageProvider defaultValue={{ agreement: true }}>
+      {children}
+    </LocalStorageProvider>
+  </MemoryRouter>
+)
+
+describe("DatasetTools component", () => {
+  it("provides expected tools for a draft (admin)", () => {
+    render(
+      <DatasetTools
+        hasEdit={true}
+        isPublic={true}
+        isAdmin={true}
+        datasetId={"test000001"}
+        hasSnapshot={true}
+        isDatasetAdmin={true}
+      />,
+      { wrapper },
+    )
+    expect(screen.queryByLabelText("Files")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Share")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Versioning")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Admin")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Download")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Metadata")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Delete")).toBeInTheDocument()
+    expect(screen.queryByLabelText("View Draft")).not.toBeInTheDocument()
+  })
+  it("provides expected tools for a snapshot (admin)", () => {
+    render(
+      <DatasetTools
+        hasEdit={true}
+        isPublic={true}
+        isAdmin={true}
+        snapshotId={"1.0.0"}
+        datasetId={"test000001"}
+        hasSnapshot={true}
+        isDatasetAdmin={true}
+      />,
+      { wrapper },
+    )
+    expect(screen.queryByLabelText("Files")).toBeInTheDocument()
+    expect(screen.queryByLabelText("View Draft")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Download")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Metadata")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Deprecate Version")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Delete")).not.toBeInTheDocument()
+  })
+  it("provides expected tools for a draft (read only)", () => {
+    render(
+      <DatasetTools
+        hasEdit={false}
+        isPublic={true}
+        isAdmin={false}
+        datasetId={"test000001"}
+        hasSnapshot={true}
+        isDatasetAdmin={false}
+      />,
+      { wrapper },
+    )
+    expect(screen.queryByLabelText("Files")).toBeInTheDocument()
+    expect(screen.queryByLabelText("View Draft")).not.toBeInTheDocument()
+    expect(screen.queryByLabelText("Download")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Metadata")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Deprecate Version")).not.toBeInTheDocument()
+    expect(screen.queryByLabelText("Delete")).not.toBeInTheDocument()
+  })
+  it("provides expected tools for a snapshot (read only)", () => {
+    render(
+      <DatasetTools
+        hasEdit={false}
+        isPublic={true}
+        isAdmin={false}
+        snapshotId={"1.0.0"}
+        datasetId={"test000001"}
+        hasSnapshot={true}
+        isDatasetAdmin={false}
+      />,
+      { wrapper },
+    )
+    expect(screen.queryByLabelText("Files")).toBeInTheDocument()
+    expect(screen.queryByLabelText("View Draft")).not.toBeInTheDocument()
+    expect(screen.queryByLabelText("Download")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Metadata")).toBeInTheDocument()
+    expect(screen.queryByLabelText("Deprecate Version")).not.toBeInTheDocument()
+    expect(screen.queryByLabelText("Delete")).not.toBeInTheDocument()
+  })
+  it("links to draft page when snapshotId is undefined", () => {
+    render(
+      <DatasetTools
+        hasEdit={false}
+        isPublic={true}
+        isAdmin={false}
+        datasetId={"test000001"}
+        hasSnapshot={true}
+        isDatasetAdmin={false}
+      />,
+      { wrapper },
+    )
+    expect(screen.queryByLabelText("Download")).toBeInTheDocument()
+    expect(screen.queryByRole("link", { name: "Download" })).toHaveAttribute(
+      "href",
+      "/datasets/test000001/download",
+    )
+  })
+  it("links to snapshot page when snapshotId is defined", () => {
+    render(
+      <DatasetTools
+        hasEdit={false}
+        isPublic={true}
+        isAdmin={false}
+        datasetId={"test000001"}
+        snapshotId={"1.0.0"}
+        hasSnapshot={true}
+        isDatasetAdmin={false}
+      />,
+      { wrapper },
+    )
+    expect(screen.queryByLabelText("Download")).toBeInTheDocument()
+    expect(screen.queryByRole("link", { name: "Download" })).toHaveAttribute(
+      "href",
+      "/datasets/test000001/versions/1.0.0/download",
+    )
+  })
+})

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

@@ -17,17 +17,15 @@ import {
 } from "../authentication/profile"
 import { useCookies } from "react-cookie"
 import { DatasetAlertDraft } from "./fragments/dataset-alert-draft"
-import {
-  BrainLifeButton,
-  CloneDropdown,
-  DatasetGitAccess,
-  DatasetHeader,
-  DatasetTools,
-  MetaDataBlock,
-  ModalitiesMetaDataBlock,
-  ValidationBlock,
-  VersionList,
-} from "@openneuro/components/dataset"
+import { BrainLifeButton } from "./components/BrainLifeButton"
+import { CloneDropdown } from "./components/CloneDropdown"
+import { DatasetGitAccess } from "./components/DatasetGitAccess"
+import { DatasetHeader } from "./components/DatasetHeader"
+import { DatasetTools } from "./components/DatasetTools"
+import { MetaDataBlock } from "./components/MetaDataBlock"
+import { ModalitiesMetaDataBlock } from "./components/ModalitiesMetaDataBlock"
+import { ValidationBlock } from "./components/ValidationBlock"
+import { VersionList } from "./components/VersionList"
 import { Username } from "../users/username"
 
 import { FollowDataset } from "./mutations/follow"

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

@@ -1,13 +1,22 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import { MemoryRouter } from "react-router-dom"
+import { LocalStorageProvider } from "../../../utils/local-storage.tsx"
 import File from "../file"
 
+const wrapper = ({ children }) => (
+  <MemoryRouter>
+    <LocalStorageProvider defaultValue={{ agreement: true }}>
+      {children}
+    </LocalStorageProvider>
+  </MemoryRouter>
+)
+
 describe("File component", () => {
   it("renders with common props", () => {
     const { asFragment } = render(
       <File datasetId="ds001" path="" filename="README" size={500} />,
-      { wrapper: MemoryRouter },
+      { wrapper },
     )
     expect(asFragment()).toMatchSnapshot()
   })
@@ -20,13 +29,13 @@ describe("File component", () => {
         filename="README"
         size={500}
       />,
-      { wrapper: MemoryRouter },
+      { wrapper },
     )
     expect(asFragment()).toMatchSnapshot()
   })
   it("generates correct download links for top level files", () => {
     render(<File datasetId="ds001" path="" filename="README" size={500} />, {
-      wrapper: MemoryRouter,
+      wrapper,
     })
     expect(screen.getByRole("link", { name: "download file" })).toHaveAttribute(
       "href",
@@ -41,7 +50,7 @@ describe("File component", () => {
         filename="sub-01_T1w.nii.gz"
         size={2000000}
       />,
-      { wrapper: MemoryRouter },
+      { wrapper },
     )
     expect(screen.getByRole("link", { name: "download file" })).toHaveAttribute(
       "href",

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

@@ -11,6 +11,7 @@ import { getProfile, hasEditPermissions } from "../../authentication/profile"
 import { Icon } from "@openneuro/components/icon"
 import { Tooltip } from "@openneuro/components/tooltip"
 import { useCookies } from "react-cookie"
+import { useAgreement } from "../../components/agreement"
 
 const filePath = (path, filename) => `${(path && path + ":") || ""}${filename}`
 
@@ -130,6 +131,7 @@ const File = ({
         filename,
       )
     }`
+  const [agreed] = useAgreement()
   const [cookies] = useCookies()
   const user = getProfile(cookies)
   return (
@@ -138,29 +140,33 @@ const File = ({
         
       {filename}
       <span className="filetree-editfile">
-        <Media greaterThanOrEqual="medium">
-          <Tooltip
-            tooltip={`Download: ${bytes.format(Number(size)) as string}`}
-          >
-            <span className="edit-file download-file">
-              <a
-                href={urls?.[0] ||
-                  apiPath(datasetId, snapshotTag, filePath(path, filename))}
-                download
-                aria-label="download file"
-              >
-                <i className="fa fa-download" />
-              </a>
+        {agreed && (
+          <Media greaterThanOrEqual="medium">
+            <Tooltip
+              tooltip={`Download: ${bytes.format(Number(size)) as string}`}
+            >
+              <span className="edit-file download-file">
+                <a
+                  href={urls?.[0] ||
+                    apiPath(datasetId, snapshotTag, filePath(path, filename))}
+                  download
+                  aria-label="download file"
+                >
+                  <i className="fa fa-download" />
+                </a>
+              </span>
+            </Tooltip>
+          </Media>
+        )}
+        {agreed && (
+          <Tooltip tooltip="View">
+            <span className="edit-file view-file">
+              <Link to={viewerPath} aria-label="view file">
+                <i className="fa fa-eye" />
+              </Link>
             </span>
           </Tooltip>
-        </Media>
-        <Tooltip tooltip="View">
-          <span className="edit-file view-file">
-            <Link to={viewerPath} aria-label="view file">
-              <i className="fa fa-eye" />
-            </Link>
-          </span>
-        </Tooltip>
+        )}
         {editMode && (
           <Media greaterThanOrEqual="medium">
             <Tooltip tooltip="Update">

package/src/scripts/dataset/fragments/dataset-alert-draft.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Link } from "react-router-dom"
-import { DatasetAlert } from "@openneuro/components/dataset"
+import { DatasetAlert } from "../components/DatasetAlert"
 
 export interface DatasetAlertDraftProps {
   isPrivate: boolean

package/src/scripts/dataset/fragments/dataset-alert-version.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { DatasetAlert } from "@openneuro/components/dataset"
+import { DatasetAlert } from "../components/DatasetAlert"
 import { UndoDeprecateVersion } from "../mutations/undo-deprecate-version"
 
 export interface DatasetAlertVersionProps {

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

@@ -1,7 +1,7 @@
 import React from "react"
 import Markdown from "markdown-to-jsx"
 import { ReadMore } from "@openneuro/components/read-more"
-import { MetaDataBlock } from "@openneuro/components/dataset"
+import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"
 import Comments from "../comments/comments"
 import EditDescriptionField from "../fragments/edit-description-field"

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

@@ -1,7 +1,7 @@
 /* global globalThis */
 import React from "react"
 import PropTypes from "prop-types"
-import { useParams } from "react-router-dom"
+import { Navigate, useParams } from "react-router-dom"
 import DownloadLink from "../download/download-link.jsx"
 import DownloadS3 from "../download/download-s3.jsx"
 import DownloadCommandLine from "../download/download-command-line.jsx"
@@ -9,9 +9,15 @@ import DownloadDatalad from "../download/download-datalad.jsx"
 import { DatasetPageBorder } from "./styles/dataset-page-border"
 import { HeaderRow3 } from "./styles/header-row"
 import { DownloadScript } from "../download/download-script"
+import { useAgreement } from "../../components/agreement"
 
 const DownloadDataset = ({ worker, datasetPermissions }) => {
   const { datasetId, tag: snapshotTag } = useParams()
+  const [agreed] = useAgreement()
+  // If the download page is directly visited without the agreement, return to the dataset page
+  if (!agreed) {
+    return <Navigate to={`/datasets/${datasetId}`} replace={true} />
+  }
   const workerId = worker?.split("-").pop()
   return (
     <DatasetPageBorder>

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

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

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

@@ -13,18 +13,16 @@ import { config } from "../config"
 import DatasetCitation from "./fragments/dataset-citation.jsx"
 import { DatasetAlertVersion } from "./fragments/dataset-alert-version"
 
-import {
-  BrainLifeButton,
-  CloneDropdown,
-  DatasetGitAccess,
-  DatasetHeader,
-  DatasetTools,
-  MetaDataBlock,
-  ModalitiesMetaDataBlock,
-  NemarButton,
-  ValidationBlock,
-  VersionList,
-} from "@openneuro/components/dataset"
+import { BrainLifeButton } from "./components/BrainLifeButton"
+import { CloneDropdown } from "./components/CloneDropdown"
+import { DatasetGitAccess } from "./components/DatasetGitAccess"
+import { DatasetHeader } from "./components/DatasetHeader"
+import { DatasetTools } from "./components/DatasetTools"
+import { MetaDataBlock } from "./components/MetaDataBlock"
+import { ModalitiesMetaDataBlock } from "./components/ModalitiesMetaDataBlock"
+import { ValidationBlock } from "./components/ValidationBlock"
+import { VersionList } from "./components/VersionList"
+import { NemarButton } from "./components/NemarButton"
 import { Username } from "../users/username"
 import { Loading } from "@openneuro/components/loading"
 

package/src/scripts/scss/README.md

@@ -0,0 +1,3 @@
+Adding to the global SASS should be avoided if possible. New styles should be added as reusable components with the [Emotion package](https://emotion.sh).
+
+These global styles cross many components that haven't been refactored. Style changes that can do this would allow for more isolated component styles with less chance of breaking on cross component changes.

package/src/scripts/scss/dataset/comments.scss

@@ -0,0 +1,152 @@
+/*Globals*/
+.RichEditor-root {
+  background: #f9f9f9;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.comment-reply .RichEditor-root {
+  border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.RichEditor-editor {
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.RichEditor-editor .public-DraftEditorPlaceholder-root {
+  padding: 3px;
+  margin: 0 -10px;
+  background: #f9f9f9;
+  color: #000;
+  cursor: default;
+}
+.RichEditor-editor .public-DraftEditor-content {
+  min-height: 6em;
+  padding: 5px 3px;
+}
+
+.RichEditor-controls {
+  font-size: 14px;
+  margin-bottom: 5px;
+  user-select: none;
+  text-align: left;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.RichEditor-styleButton {
+  color: #000;
+  cursor: pointer;
+  margin-right: 10px;
+  padding: 5px;
+  border: 2px solid transparent;
+  display: block;
+}
+
+.RichEditor-activeButton {
+  color: var(--current-theme-primary);
+  border-color: var(--current-theme-primary);
+}
+
+// updated
+.dataset-comments {
+  .comment-header {
+    label {
+      font-size: 18px;
+      color: #424242;
+      line-height: 10px;
+      padding: 0;
+    }
+  }
+}
+
+.comment-input {
+  width: 80%;
+}
+
+.deleted-comment {
+  padding: 15px;
+}
+
+.parent-comment {
+  margin-left: 0px;
+  padding-left: 0px;
+  border-left: none;
+}
+
+/*Editor Block*/
+.DraftEditor-root {
+  padding: 0px 10px 10px 10px;
+  min-height: 2em;
+}
+
+.RichEditor-root > .RichEditor-editor > .DraftEditor-root {
+  min-height: 6em;
+  background-color: white;
+  // &:focus-within {
+  //   box-shadow: inset 0px 0px 3px #666;
+  // }
+}
+
+.dataset-comments {
+  margin-bottom: 40px;
+  > .comment {
+    margin-top: 40px;
+  }
+  .comment {
+    border: 1px solid #eee;
+    border-bottom: 0;
+    background: white;
+    padding: 10px;
+    .comment-header {
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 20px;
+    }
+    .comment-controls {
+      font-size: 12px;
+      margin-top: 20px;
+    }
+  }
+
+  .replies {
+    background: white;
+
+    .replies {
+      border: 0;
+      border-top: 1px solid #eee;
+      border-left: 20px solid #eee;
+    }
+    .comment {
+      border: 0;
+      border-left: 20px solid #eee;
+    }
+  }
+  > .replies {
+    border: 1px solid #eee;
+    border-bottom: 0;
+  }
+}
+
+.dataset-owner-flag {
+  padding: 0px 2px;
+  background-color: red;
+
+  color: white;
+}
+
+.login-for-comments {
+  text-align: center;
+}
+
+.reply,
+.delete,
+.edit,
+.cancel-edit {
+  padding-left: 1em;
+}