@openneuro/app 4.5.1 → 4.6.0-alpha.0

package/src/scripts/dataset/routes/styles/header-row.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled'
+
+const headerRowStyle = `
+  margin-top: 0;
+  margin-bottom: 1.3em;
+`
+
+export const HeaderRow2 = styled.h2(headerRowStyle)
+
+export const HeaderRow3 = styled.h3(headerRowStyle)
+
+export const HeaderRow4 = styled.h4(headerRowStyle)

package/src/scripts/dataset/routes/tab-routes-draft.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import { DatasetDefault } from './dataset-default'
+import AdminDataset from './admin-datalad'
+import DeletePage from './delete-page'
+import DownloadDataset from './download-dataset'
+import Publish from './publish'
+import Share from './manage-permissions'
+import Snapshot from './snapshot'
+import AddMetadata from './add-metadata'
+import FileDisplay from '../files/file-display'
+
+export const TabRoutesDraft = ({ dataset, hasEdit }) => {
+  return (
+    <Switch>
+      <Route
+        exact
+        path="/datasets/:datasetId"
+        component={() => <DatasetDefault dataset={dataset} hasEdit={hasEdit} />}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/download"
+        component={() => (
+          <DownloadDataset
+            worker={dataset.worker}
+            datasetPermissions={dataset.permissions}
+          />
+        )}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/delete"
+        component={() => <DeletePage dataset={dataset} />}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/admin"
+        component={() => <AdminDataset dataset={dataset} />}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/publish"
+        component={() => (
+          <Publish datasetId={dataset.id} metadata={dataset.metadata} />
+        )}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/snapshot"
+        component={() => (
+          <Snapshot
+            datasetId={dataset.id}
+            snapshots={dataset.snapshots}
+            issues={dataset.draft.issues}
+            description={dataset.draft.description}
+          />
+        )}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/share"
+        component={() => (
+          <Share
+            datasetId={dataset.id}
+            permissions={dataset.permissions}
+            reviewers={dataset.reviewers}
+          />
+        )}
+      />
+      <Route
+        path="/datasets/:datasetId/file-display/:filePath"
+        render={({
+          match: {
+            params: { datasetId, filePath },
+          },
+        }) => {
+          return <FileDisplay datasetId={datasetId} filePath={filePath} />
+        }}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/metadata"
+        component={() => <AddMetadata dataset={dataset} />}
+      />
+    </Switch>
+  )
+}

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import { SnapshotDefault } from './snapshot-default'
+import DownloadDataset from './download-dataset'
+import { DeprecateSnapshotPage } from './deprecate-snapshot-page'
+import FileDisplay from '../files/file-display'
+import AddMetadata from './add-metadata'
+
+export const TabRoutesSnapshot = ({ dataset, snapshot }) => {
+  return (
+    <Switch>
+      <Route
+        exact
+        path="/datasets/:datasetId/versions/:snapshotId"
+        component={() => (
+          <SnapshotDefault dataset={dataset} snapshot={snapshot} />
+        )}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/versions/:snapshotId/download"
+        component={() => (
+          <DownloadDataset
+            worker={dataset.worker}
+            datasetPermissions={dataset.permissions}
+          />
+        )}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/versions/:snapshotTag/deprecate"
+        component={() => <DeprecateSnapshotPage />}
+      />
+      <Route
+        path="/datasets/:datasetId/versions/:snapshotTag/file-display/:filePath"
+        render={({
+          match: {
+            params: { datasetId, filePath, snapshotTag },
+          },
+        }) => {
+          return (
+            <FileDisplay
+              datasetId={datasetId}
+              snapshotTag={snapshotTag}
+              filePath={filePath}
+            />
+          )
+        }}
+      />
+      <Route
+        exact
+        path="/datasets/:datasetId/versions/:snapshotTag/metadata"
+        component={() => <AddMetadata dataset={dataset} />}
+      />
+    </Switch>
+  )
+}

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

@@ -1,16 +1,14 @@
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
+import { DatasetPageTabContainer } from './routes/styles/dataset-page-tab-container'
 import DatasetQueryContext from '../datalad/dataset/dataset-query-context.js'
-import Markdown from 'markdown-to-jsx'
 import { Link, useLocation } from 'react-router-dom'
 import pluralize from 'pluralize'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import parseISO from 'date-fns/parseISO'
 
-import Files from './files'
 import Validation from '../validation/validation.jsx'
 import { config } from '../config'
-import Comments from './comments/comments.jsx'
 import DatasetCitation from './fragments/dataset-citation.jsx'
 import { DatasetAlertVersion } from './fragments/dataset-alert-version'
 
@@ -35,13 +33,12 @@ import {
 } from '../authentication/profile'
 import { useCookies } from 'react-cookie'
 
-import { ReadMore } from '@openneuro/components/read-more'
-
 import { FollowDataset } from './mutations/follow'
 import { StarDataset } from './mutations/star'
 
 import { SNAPSHOT_FIELDS } from '../datalad/dataset/dataset-query-fragments.js'
 import { DOILink } from './fragments/doi-link'
+import { TabRoutesSnapshot } from './routes/tab-routes-snapshot'
 
 const formatDate = dateObject =>
   new Date(dateObject).toISOString().split('T')[0]
@@ -111,7 +108,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
           <div className="col col-8 col-lg">
             {summary && (
               <DatasetHeaderMeta
-                size={summary.size}
+                size={snapshot.size}
                 totalFiles={summary.totalFiles}
                 datasetId={datasetId}
               />
@@ -168,39 +165,9 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                 isDatasetAdmin={isDatasetAdmin}
               />
             </div>
-            <ReadMore
-              fileTree={true}
-              id="collapse-tree"
-              expandLabel="Read More"
-              collapseLabel="Collapse">
-              <Files
-                datasetId={datasetId}
-                snapshotTag={snapshot.tag}
-                datasetName={description.Name}
-                files={snapshot.files}
-                editMode={false}
-                datasetPermissions={dataset.permissions}
-              />
-            </ReadMore>
-            <MetaDataBlock
-              heading="README"
-              item={
-                <ReadMore
-                  id="readme"
-                  expandLabel="Read More"
-                  collapseLabel="Collapse">
-                  <Markdown>
-                    {snapshot.readme == null ? 'N/A' : snapshot.readme}
-                  </Markdown>
-                </ReadMore>
-              }
-              className="dataset-readme markdown-body"
-            />
-            <Comments
-              datasetId={dataset.id}
-              uploader={dataset.uploader}
-              comments={dataset.comments}
-            />
+            <DatasetPageTabContainer>
+              <TabRoutesSnapshot dataset={dataset} snapshot={snapshot} />
+            </DatasetPageTabContainer>
           </div>
           <div className="col sidebar">
             <MetaDataBlock

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

@@ -59,6 +59,7 @@ const searchQuery = gql`
             ages
           }
           latestSnapshot {
+            size
             summary {
               modalities
               secondaryModalities

package/src/scripts/dataset/routes/admin-exports.jsx

@@ -1,130 +0,0 @@
-// dependencies -------------------------------------------------------
-
-import React from 'react'
-import { gql, useMutation } from '@apollo/client'
-import Helmet from 'react-helmet'
-import { Link } from 'react-router-dom'
-import PropTypes from 'prop-types'
-import { reexporterLogsURL } from '../../resources/kibana'
-import styled from '@emotion/styled'
-
-const ButtonsContainer = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  minWidth: '300px',
-})
-
-const NormalizedButton = styled.button({
-  margin: 0,
-  fontWeight: 400,
-  fontSize: '12pt',
-  textAlign: 'center',
-  padding: '9px 12px',
-  width: '100%',
-})
-
-const SuccessMessage = styled.p({
-  color: 'rgb(92, 184, 92)',
-})
-const InProgressMessage = styled.p({
-  color: 'orange',
-})
-const ErrorMessage = styled.p({
-  color: 'red',
-})
-
-const DividerContainer = styled.div({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-})
-const HBar = styled.div({
-  height: '2px',
-  backgroundColor: 'lightgrey',
-  flexGrow: 1,
-})
-const DividerText = styled.p({
-  padding: '19px 1rem',
-  margin: 0,
-  fontWeight: 400,
-  fontSize: '14pt',
-  textAlign: 'center',
-})
-
-const Divider = ({ text }) => (
-  <DividerContainer>
-    <HBar />
-    <DividerText>{text}</DividerText>
-    <HBar />
-  </DividerContainer>
-)
-
-Divider.propTypes = {
-  text: PropTypes.string,
-}
-
-const REEXPORT_REMOTES = gql`
-  mutation reexportRemotes($datasetId: ID!) {
-    reexportRemotes(datasetId: $datasetId)
-  }
-`
-
-const AdminExports = ({ dataset }) => {
-  const [reexportRemotes, { data, loading, error }] =
-    useMutation(REEXPORT_REMOTES)
-  const success = data && data.reexportRemotes
-  return (
-    <>
-      <Helmet>
-        <title>Admin Dashboard - OpenNeuro</title>
-      </Helmet>
-      <div className="dataset-form container">
-        <div className="grid">
-          <div className="col col-12 grid m-t-10 m-b-20">
-            <h3>Admin: Remote Exports</h3>
-          </div>
-
-          <div className="col col-4">
-            <ButtonsContainer>
-              {loading && (
-                <InProgressMessage>Your export is starting.</InProgressMessage>
-              )}
-              {error && <ErrorMessage>An error has occurred.</ErrorMessage>}
-              {success && (
-                <SuccessMessage>Your export has begun.</SuccessMessage>
-              )}
-              <NormalizedButton
-                className="n-button on-button--primary"
-                onClick={() =>
-                  reexportRemotes({ variables: { datasetId: dataset.id } })
-                }>
-                Run Export
-              </NormalizedButton>
-              <Divider text="or" />
-              <NormalizedButton
-                className="on-button on-button--nobg"
-                onClick={() => {
-                  window.open(reexporterLogsURL, '_blank')
-                }}>
-                View Export Logs
-              </NormalizedButton>
-            </ButtonsContainer>
-          </div>
-          <div className="col col-12 m-t-20">
-            <Link className="return-link m-l-0 " to={`/datasets/${dataset.id}`}>
-              Return to Dataset
-            </Link>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-AdminExports.propTypes = {
-  dataset: PropTypes.object,
-}
-
-export default AdminExports