@openneuro/app 4.21.0-alpha.3 → 4.21.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.21.0-alpha.3",
+  "version": "4.21.0-alpha.8",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -20,8 +20,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.21.0-alpha.3",
-    "@openneuro/components": "^4.21.0-alpha.3",
+    "@openneuro/client": "^4.21.0-alpha.8",
+    "@openneuro/components": "^4.21.0-alpha.8",
     "@tanstack/react-table": "^8.9.3",
     "bids-validator": "1.13.0",
     "bytes": "^3.0.0",
@@ -64,11 +64,11 @@
     "sass": "^1.32.8",
     "stream-browserify": "^3.0.0",
     "typescript": "5.1.6",
-    "vite": "4.4.9",
+    "vite": "4.4.12",
     "vitest": "0.34.4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bf7cd2056ff18856d46c269d70544f385c30731e"
+  "gitHead": "336a59858d951d9d44c093ef190d44af505cffbf"
 }

package/src/scripts/components/agreement.tsx

@@ -8,7 +8,6 @@ const AgreementDiv = styled.div`
   overflow: hidden;
   position: fixed;
   bottom: 0;
-  height: 96px;
   width: 100%;
   background: white;
   z-index: 1005;
@@ -21,7 +20,8 @@ const AgreementDiv = styled.div`
 const AgreementButton = styled.div`
   position: relative;
   top: 50%;
-  transform: translateY(-50%);
+  left: 50%;
+  transform: translate(-50%, -50%);
 `
 
 /**
@@ -45,19 +45,17 @@ export const Agreement = () => {
         <div className="container">
           <div className="grid grid-between">
             <div className="col col-lg col-11">
-              The agreement text goes here. Lorem ipsum dolor sit amet,
-              consectetur adipiscing elit. Vivamus a condimentum nibh.
-              Pellentesque aliquet volutpat odio sit amet imperdiet. Praesent
-              erat lorem, varius in libero sit amet, pulvinar placerat enim. Sed
-              lacus nibh, dapibus vitae fermentum sit amet, volutpat at purus.
-              Cras accumsan, massa vitae sagittis cursus, magna lorem finibus
-              orci, sit amet sollicitudin arcu turpis quis mi. Aenean vel
-              feugiat arcu. Morbi congue nulla quam, eu hendrerit metus viverra
-              vel. Vestibulum non urna dignissim, tincidunt enim sit amet,
-              molestie nisi. Pellentesque sed lacus eu quam ultricies ultricies
-              at eu sem. Suspendisse sed eleifend lorem, vel fermentum odio.
-              Vivamus nunc lorem, ultricies vel tellus eget, molestie tristique
-              metus.
+              <p>
+                By clicking "I Agree", I affirm that I have the appropriate
+                institutional permissions to receive de-identified data for
+                secondary data analysis, and that neither I nor my collaborators
+                will attempt to reidentify individuals whose data are contained
+                in downloads from OpenNeuro. Further, if for any reason the
+                identity of participants contained in downloads from OpenNeuro
+                become known to me I will make no effort to recontact such
+                participants and will provide immediate notice to OpenNeuro
+                staff.
+              </p>
             </div>
             <div className="col col-lg col-1">
               <AgreementButton
@@ -65,7 +63,7 @@ export const Agreement = () => {
                 onClick={() => setAgreed(true)}
                 role="button"
               >
-                I Agree
+                I&nbsp;Agree
               </AgreementButton>
             </div>
           </div>

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

@@ -408,7 +408,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
               class="css-1dvuowd"
             >
               <span
-                class="css-1an2ojl"
+                class="css-1mdlu11"
               >
                 <span
                   class=" "
@@ -432,7 +432,31 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                 </span>
               </span>
               <span
-                class="css-1an2ojl"
+                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=" "

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

@@ -7,6 +7,7 @@ import { useLocation } from "react-router-dom"
 
 interface DatasetToolStyleProps {
   active: boolean
+  disable: boolean
 }
 
 export const DatasetToolStyle: StyledComponent<DatasetToolStyleProps> = styled
@@ -18,7 +19,10 @@ export const DatasetToolStyle: StyledComponent<DatasetToolStyleProps> = styled
   padding: 0 15px;
   justify-content: center;
   a {
-    color: var(--current-theme-primary);
+    pointer-events: ${props.disable ? "none" : "auto"};
+    color: ${
+      props.disable ? "rgba(0, 0, 0, 0.5);" : "var(--current-theme-primary);"
+    }
     font-size: 17px;
     text-decoration: none;
     font-weight: 400;
@@ -38,10 +42,20 @@ export const DatasetToolStyle: StyledComponent<DatasetToolStyleProps> = styled
 `,
   )
 
-export const DatasetToolButton = ({ path, icon, tooltip, label }) => {
+interface DatasetToolButtonProps {
+  path: string
+  label: string
+  tooltip: string
+  icon: string
+  disable?: boolean
+}
+
+export const DatasetToolButton = (
+  { path, icon, tooltip, label, disable = false }: DatasetToolButtonProps,
+) => {
   const location = useLocation()
   return (
-    <DatasetToolStyle active={location.pathname == path}>
+    <DatasetToolStyle active={location.pathname == path} disable={disable}>
       <Tooltip tooltip={tooltip} flow="up">
         <Link to={path}>
           <Icon icon={`fa ${icon}`} label={label} />

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

@@ -98,16 +98,15 @@ export const DatasetTools = ({
           label="Admin"
         />
       )}
-      {agree && (
-        <DatasetToolButton
-          tooltip="How to Download"
-          path={snapshotId
-            ? `/datasets/${datasetId}/versions/${snapshotId}/download`
-            : `/datasets/${datasetId}/download`}
-          icon="fa-download"
-          label="Download"
-        />
-      )}
+      <DatasetToolButton
+        tooltip="How to Download"
+        path={snapshotId
+          ? `/datasets/${datasetId}/versions/${snapshotId}/download`
+          : `/datasets/${datasetId}/download`}
+        icon="fa-download"
+        label="Download"
+        disable={!agree}
+      />
       {hasDerivatives && (
         <DatasetToolButton
           tooltip="Available Derivatives"