@openneuro/app 4.36.2 → 4.37.0-alpha.1

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

@@ -39,10 +39,10 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
         class="container"
       >
         <div
-          class="grid grid-between"
+          class="ds-header-inner"
         >
           <div
-            class="col"
+            class="ds-inner-left"
           >
             <h1>
               <a
@@ -52,7 +52,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                   class="hexagon-wrapper"
                 >
                   <div
-                    class="hexagon no-modality"
+                    class="hexagon mri"
                   />
                   <div
                     class="label"
@@ -62,73 +62,157 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                 </div>
               </a>
               DS003-downsampled (only T1)
-              <div
-                class="css-1dyyc64"
+            </h1>
+            <div
+              class="dataset-tool-buttons"
+            >
+              <span
+                class="css-1dvuowd"
               >
-                <div
-                  class="toggle-counter-wrap"
+                <span
+                  class="css-1hlo510"
                 >
                   <span
                     class=" "
                     data-flow="up"
-                    data-tooltip="Get notified on new versions/comments"
+                    data-tooltip="View the dataset file tree"
                   >
-                    <span
-                      class="toggle-counter"
+                    <a
+                      href="/datasets/ds001032/versions/1.0.0"
                     >
-                      <button
-                        aria-label="Following"
-                        class="on-button on-button--medium on-button--default icon-text toggle-btn active"
-                        role="button"
-                        type="button"
+                      <span
+                        aria-label="Files"
+                        class=" on-icon icon-text "
+                        role="img"
                       >
                         <i
-                          aria-hidden="true"
-                          class="fa fa-star css-1qxtz39"
+                          class="fa fa-folder"
                         />
-                        Following
-                        <span
-                          class="count-span"
-                        >
-                          1
-                        </span>
-                      </button>
-                    </span>
+                        Files
+                      </span>
+                    </a>
                   </span>
-                </div>
-                <div
-                  class="toggle-counter-wrap"
+                </span>
+                <span
+                  class="css-126f3py"
                 >
                   <span
                     class=" "
                     data-flow="up"
-                    data-tooltip="Save to your bookmarked datasets"
+                    data-tooltip="Agree to Terms of Service to Download"
                   >
-                    <span
-                      class="toggle-counter"
+                    <a
+                      href="/datasets/ds001032/versions/1.0.0/download"
                     >
-                      <button
-                        aria-label="Bookmark"
-                        class="on-button on-button--medium on-button--default icon-text toggle-btn"
-                        role="button"
-                        type="button"
+                      <span
+                        aria-label="Download"
+                        class=" on-icon icon-text "
+                        role="img"
                       >
                         <i
-                          aria-hidden="true"
-                          class="fa fa-bookmark css-1qxtz39"
+                          class="fa fa-download"
                         />
-                        Bookmark
-                        <span
-                          class="count-span"
-                        >
-                          0
-                        </span>
-                      </button>
-                    </span>
+                        Download
+                      </span>
+                    </a>
                   </span>
-                </div>
+                </span>
+                <span
+                  class="css-1hlo510"
+                >
+                  <span
+                    class=" "
+                    data-flow="up"
+                    data-tooltip="View the dataset metadata"
+                  >
+                    <a
+                      href="/datasets/ds001032/versions/1.0.0/metadata"
+                    >
+                      <span
+                        aria-label="Metadata"
+                        class=" on-icon icon-text "
+                        role="img"
+                      >
+                        <i
+                          class="fa fa-file-code"
+                        />
+                        Metadata
+                      </span>
+                    </a>
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+          <div
+            class="ds-inner-right"
+          >
+            <div
+              class="css-zw18vc"
+            >
+              <div
+                class="toggle-counter-wrap"
+              >
+                <span
+                  class=" "
+                  data-flow="up"
+                  data-tooltip="Get notified on new versions/comments"
+                >
+                  <span
+                    class="toggle-counter"
+                  >
+                    <button
+                      aria-label="Following"
+                      class="on-button on-button--medium on-button--default icon-text toggle-btn active"
+                      role="button"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="fa fa-star css-1qxtz39"
+                      />
+                      Following
+                      <span
+                        class="count-span"
+                      >
+                        1
+                      </span>
+                    </button>
+                  </span>
+                </span>
               </div>
-            </h1>
+              <div
+                class="toggle-counter-wrap"
+              >
+                <span
+                  class=" "
+                  data-flow="up"
+                  data-tooltip="Save to your bookmarked datasets"
+                >
+                  <span
+                    class="toggle-counter"
+                  >
+                    <button
+                      aria-label="Bookmark"
+                      class="on-button on-button--medium on-button--default icon-text toggle-btn"
+                      role="button"
+                      type="button"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="fa fa-bookmark css-1qxtz39"
+                      />
+                      Bookmark
+                      <span
+                        class="count-span"
+                      >
+                        0
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -371,86 +455,6 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
               </div>
             </div>
           </div>
-          <div
-            class="dataset-tool-buttons"
-          >
-            <span
-              class="css-1dvuowd"
-            >
-              <span
-                class="css-1mdlu11"
-              >
-                <span
-                  class=" "
-                  data-flow="up"
-                  data-tooltip="View the dataset file tree"
-                >
-                  <a
-                    href="/datasets/ds001032/versions/1.0.0"
-                  >
-                    <span
-                      aria-label="Files"
-                      class=" on-icon icon-text "
-                      role="img"
-                    >
-                      <i
-                        class="fa fa-folder"
-                      />
-                      Files
-                    </span>
-                  </a>
-                </span>
-              </span>
-              <span
-                class="css-aokf2s"
-              >
-                <span
-                  class=" "
-                  data-flow="up"
-                  data-tooltip="How to Download"
-                >
-                  <a
-                    href="/datasets/ds001032/versions/1.0.0/download"
-                  >
-                    <span
-                      aria-label="Download"
-                      class=" on-icon icon-text "
-                      role="img"
-                    >
-                      <i
-                        class="fa fa-download"
-                      />
-                      Download
-                    </span>
-                  </a>
-                </span>
-              </span>
-              <span
-                class="css-1mdlu11"
-              >
-                <span
-                  class=" "
-                  data-flow="up"
-                  data-tooltip="View the dataset metadata"
-                >
-                  <a
-                    href="/datasets/ds001032/versions/1.0.0/metadata"
-                  >
-                    <span
-                      aria-label="Metadata"
-                      class=" on-icon icon-text "
-                      role="img"
-                    >
-                      <i
-                        class="fa fa-file-code"
-                      />
-                      Metadata
-                    </span>
-                  </a>
-                </span>
-              </span>
-            </span>
-          </div>
           <div
             class="css-1xk6djt"
           >

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

@@ -0,0 +1,136 @@
+import React from "react"
+import { vi } from "vitest"
+import { act, render, screen, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MemoryRouter } from "react-router-dom"
+import { MockedProvider } from "@apollo/client/testing"
+import DraftContainer from "../draft-container"
+import type { DraftContainerProps } from "../draft-container"
+import { UserModalOpenProvider } from "../../utils/user-login-modal-ctx"
+import { Cookies, CookiesProvider } from "react-cookie"
+
+vi.mock("../../config.ts")
+
+// admin: false
+const mockUser =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6ZmFsc2UsInN1YiI6IjcxZGRiMjRjLTczZjgtNDgzYS1iODVjLTU4ZTY1ZmQwN2YyYiIsImV4cCI6MzM5MTg5Nzg3MywiaWF0IjoxNzUwODc3NDkwfQ.vV66iD3RL_3O9Ofa0BazVYesGLengw8qu-MrneKoJOM"
+
+const mockDataset = {
+  id: "ds000001",
+  created: "2023-01-01T00:00:00.000Z",
+  draft: {
+    id: "ds000001",
+    head: "dce4b7b6653bcde9bdb7226a7c2b9499e77f2724",
+    created: "2023-01-01T00:00:00.000Z",
+    modified: "2023-01-01T00:00:00.000Z",
+    description: {
+      Name: "Test Dataset Name",
+      Authors: ["Author One", "Author Two"],
+    },
+    summary: {
+      totalFiles: 10,
+      size: 1234567,
+      modalities: ["T1w", "bold"],
+      sessions: [],
+      tasks: [],
+      subjects: [],
+    },
+    readme: "This is a test dataset readme.",
+  },
+  snapshots: [],
+  derivatives: [],
+  followers: [],
+  stars: [],
+  public: true,
+  permissions: {
+    userPermissions: [],
+  },
+  analytics: {
+    views: 100,
+    downloads: 10,
+  },
+  comments: [],
+  uploader: {
+    name: "Test User",
+    orcid: "1234-5678-9012-3456",
+  },
+}
+
+const renderComponent = (
+  props: DraftContainerProps,
+  mocks = [],
+  token = mockUser,
+) => {
+  // Mock the login state
+  const cookieObject = new Cookies()
+  cookieObject.set("accessToken", token)
+  return render(
+    <MemoryRouter>
+      <UserModalOpenProvider>
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <CookiesProvider cookies={cookieObject}>
+            <DraftContainer {...props} />
+          </CookiesProvider>
+        </MockedProvider>
+      </UserModalOpenProvider>
+    </MemoryRouter>,
+  )
+}
+
+describe("DraftContainer", () => {
+  it("renders dataset name and authors", async () => {
+    renderComponent({ dataset: mockDataset })
+    expect(await screen.findByRole("heading", { level: 1 })).toHaveTextContent(
+      /Test Dataset Name/,
+    )
+    expect(await screen.findByText(/Author One/)).toBeInTheDocument()
+    expect(await screen.findByText(/Author Two/)).toBeInTheDocument()
+  })
+
+  describe("dataset name field", () => {
+    it("is editable for users with permissions", async () => {
+      const datasetWithPermissions = {
+        ...mockDataset,
+        permissions: {
+          userPermissions: [
+            {
+              user: {
+                id: "71ddb24c-73f8-483a-b85c-58e65fd07f2b",
+                email: "test@example.com",
+                orcid: "0000-0003-4848-1153",
+                name: "Test User",
+              },
+              level: "admin",
+            },
+          ],
+        },
+      }
+      const user = userEvent.setup()
+      renderComponent({ dataset: datasetWithPermissions })
+      const h1 = await screen.findByRole("heading", { level: 1 })
+      const editButton = await within(h1).findByRole("button", {
+        name: /edit/i,
+      })
+      await act(async () => {
+        await user.click(editButton)
+      })
+      const textbox = await within(h1).findByRole("textbox")
+      expect(textbox).toHaveValue(mockDataset.draft.description.Name)
+    })
+
+    it("is not editable for users without permissions", async () => {
+      renderComponent({ dataset: mockDataset })
+      const h1 = await screen.findByRole("heading", { level: 1 })
+      expect(
+        within(h1).queryByRole("button", { name: /edit/i }),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  it("renders the readme content if available", async () => {
+    renderComponent({ dataset: mockDataset })
+    expect(
+      await screen.findByText("This is a test dataset readme."),
+    ).toBeInTheDocument()
+  })
+})

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

@@ -4,7 +4,7 @@ import "@emotion/react"
 export const FollowToggles = styled.div`
   display: flex;
   font-size: 14px;
-  margin-left: auto;
+  margin: 10px 0;
 
   .toggle-counter-wrap {
     display: inline-flex;

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

@@ -1,41 +1,38 @@
 import React from "react"
 import { Link } from "react-router-dom"
+import { ModalityHexagon } from "../../components/modality-cube/ModalityHexagon"
 
 export interface DatasetHeaderProps {
-  modality: string
+  modality: string | null | undefined
   pageHeading: string
   renderEditor?: () => React.ReactNode
-  children?: JSX.Element
+  datasetUserActions?: React.ReactNode
+  datasetHeaderTools?: React.ReactNode
 }
 
 export const DatasetHeader: React.FC<DatasetHeaderProps> = ({
   pageHeading,
   modality,
   renderEditor,
-  children,
+  datasetHeaderTools,
+  datasetUserActions,
 }) => {
   return (
     <div className="dataset-header">
       <div className="container">
-        <div className="grid grid-between">
-          <div className="col">
+        <div className="ds-header-inner">
+          <div className="ds-inner-left">
             <h1>
               <Link to={"/search/modality/" + modality}>
-                <div className="hexagon-wrapper">
-                  <div className="hexagon no-modality"></div>
-                  <div className="label">
-                    {modality
-                      ? (
-                        modality.substr(0, 4)
-                      )
-                      : <i className="fa fa-circle-o-notch fa-spin"></i>}
-                  </div>
-                </div>
+                <ModalityHexagon
+                  primaryModality={modality ? modality.substr(0, 4) : null}
+                />
               </Link>
               {renderEditor?.() || pageHeading}
-              {children}
             </h1>
+            {datasetHeaderTools}
           </div>
+          <div className="ds-inner-right">{datasetUserActions}</div>
         </div>
       </div>
     </div>

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

@@ -15,29 +15,28 @@ export const DatasetToolStyle: StyledComponent<DatasetToolStyleProps> = styled
   .span<DatasetToolStyleProps>(
     (props) => `
   display: flex;
-  margin: 0 auto 10px;
+  margin: 0;
   flex-basis: auto;
   padding: 0 15px;
   justify-content: center;
   a {
     pointer-events: ${props.disable ? "none" : "auto"};
-    color: ${
-      props.disable ? "rgba(0, 0, 0, 0.5);" : "var(--current-theme-primary);"
-    }
+    color: ${props.disable ? "rgba(255, 255, 255, 0.7)" : "#fff"};
     font-size: 17px;
     text-decoration: none;
     font-weight: 400;
     padding: 4px;
-    border-bottom: 2px solid transparent;
+    border-bottom: 8px solid transparent;
     border-bottom-color: ${
-      props.active ? "var(--current-theme-primary)" : "transparent"
+      props.active ? "var(--current-theme-primary-light);" : "transparent;"
     };
     i {
       margin-right: 6px;
       font-size: 15px;
     }
     &:hover {
-      border-bottom-color: var(--current-theme-primary);
+      color: #fff;
+      border-bottom-color: #fff;
     }
   }
 `,

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

@@ -99,7 +99,9 @@ export const DatasetTools = ({
         />
       )}
       <DatasetToolButton
-        tooltip="How to Download"
+        tooltip={agree
+          ? "How to Download"
+          : "Agree to Terms of Service to Download"}
         path={snapshotId
           ? `/datasets/${datasetId}/versions/${snapshotId}/download`
           : `/datasets/${datasetId}/download`}
@@ -109,7 +111,9 @@ export const DatasetTools = ({
       />
       {hasDerivatives && (
         <DatasetToolButton
-          tooltip="Available Derivatives"
+          tooltip={agree
+            ? "Available Derivatives"
+            : "Agree to Terms of Service to access Derivatives"}
           path={snapshotId
             ? `/datasets/${datasetId}/versions/${snapshotId}/derivatives`
             : `/datasets/${datasetId}/derivatives`}

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

@@ -93,7 +93,20 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
       >
         <DatasetHeader
           pageHeading={description.Name}
-          modality={modality}
+          modality={summary?.modalities[0]}
+          datasetHeaderTools={
+            <div className="dataset-tool-buttons">
+              <DatasetTools
+                hasEdit={hasEdit}
+                isPublic={dataset.public}
+                datasetId={datasetId}
+                isAdmin={isAdmin}
+                isDatasetAdmin={isDatasetAdmin}
+                hasDerivatives={hasDerivatives}
+                hasSnapshot={dataset.snapshots.length !== 0}
+              />
+            </div>
+          }
           renderEditor={() => (
             <>
               <EditDescriptionField
@@ -105,22 +118,24 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
               >
                 {description.Name}
               </EditDescriptionField>
-              <FollowToggles>
-                <FollowDataset
-                  profile={profile !== null}
-                  datasetId={dataset.id}
-                  following={dataset.following}
-                  followers={dataset.followers.length}
-                />
-                <StarDataset
-                  profile={profile !== null}
-                  datasetId={dataset.id}
-                  starred={dataset.starred}
-                  stars={dataset.stars.length}
-                />
-              </FollowToggles>
             </>
           )}
+          datasetUserActions={
+            <FollowToggles>
+              <FollowDataset
+                profile={profile !== null}
+                datasetId={dataset.id}
+                following={dataset.following}
+                followers={dataset.followers.length}
+              />
+              <StarDataset
+                profile={profile !== null}
+                datasetId={dataset.id}
+                starred={dataset.starred}
+                stars={dataset.stars.length}
+              />
+            </FollowToggles>
+          }
         />
         <DatasetAlertDraft
           isPrivate={!dataset.public}
@@ -151,15 +166,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                   }
                 />
               </div>
-              <DatasetTools
-                hasEdit={hasEdit}
-                isPublic={dataset.public}
-                datasetId={datasetId}
-                isAdmin={isAdmin}
-                hasSnapshot={dataset.snapshots.length !== 0}
-                isDatasetAdmin={isDatasetAdmin}
-                hasDerivatives={hasDerivatives}
-              />
               <DatasetPageTabContainer>
                 <TabRoutesDraft dataset={dataset} hasEdit={hasEdit} />
               </DatasetPageTabContainer>