@openneuro/app 4.2.0 → 4.2.4

package/src/scripts/datalad/dataset/__tests__/dataset-query.spec.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import DatasetQuery, { getDatasetPage } from '../dataset-query.jsx'
-
-describe('DatasetQuery', () => {
-  describe('getDatasetPage', () => {
-    it('is a valid query', () => {
-      expect(getDatasetPage.kind).toBe('Document')
-      expect(getDatasetPage.definitions[0].operation).toBe('query')
-    })
-  })
-  describe('component', () => {
-    it('renders with common params', () => {
-      const wrapper = shallow(
-        <DatasetQuery match={{ params: { datasetId: 'ds000001' } }} />,
-      )
-      expect(wrapper).toMatchSnapshot()
-    })
-  })
-})

package/src/scripts/datalad/dataset/__tests__/left-siderbar.spec.jsx

@@ -1,106 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import LeftSidebar, { SidebarRow } from '../left-sidebar.jsx'
-import cookies from '../../../refactor_2021/utils/cookies.js'
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: '/dataset/ds000001',
-  }),
-}))
-
-const fixedDate = new Date('2019-04-02T19:56:41.222Z').toISOString()
-
-describe('LeftSidebar component', () => {
-  it('renders with basic props', () => {
-    const testDataset = {
-      permissions: {
-        userPermissions: [],
-      },
-      draft: {
-        partial: false,
-      },
-    }
-    expect(
-      shallow(
-        <LeftSidebar
-          dataset={testDataset}
-          datasetId="ds000001"
-          draftModified={fixedDate}
-          snapshots={[]}
-        />,
-      ),
-    ).toMatchSnapshot()
-  })
-  describe('SidebarRow', () => {
-    it('renders draft version correctly', () => {
-      const wrapper = shallow(
-        <SidebarRow
-          datasetId="ds000001"
-          id="draft"
-          draft
-          modified={fixedDate}
-        />,
-      )
-      expect(wrapper).toMatchSnapshot()
-    })
-    it('renders snapshot version correctly', () => {
-      const wrapper = shallow(
-        <SidebarRow
-          datasetId="ds000001"
-          id="ds000001:1.0.0"
-          modified={fixedDate}
-        />,
-      )
-      expect(wrapper).toMatchSnapshot()
-    })
-    it('toggles the active state for matching snapshot versions', () => {
-      const wrapper = shallow(
-        <SidebarRow
-          datasetId="ds000001"
-          id="ds000001:1.0.0"
-          version="1.0.0"
-          modified={fixedDate}
-          active="1.0.0"
-        />,
-      )
-      expect(wrapper.find('Link').hasClass('active')).toBeTruthy()
-    })
-    it('disables the active state for non-matching snapshot versions', () => {
-      const wrapper = shallow(
-        <SidebarRow
-          datasetId="ds000001"
-          id="ds000001:1.0.0"
-          modified={fixedDate}
-          active="1.0.5"
-        />,
-      )
-      expect(wrapper.find('Link').hasClass('active')).toBeFalsy()
-    })
-    it('toggles the active state for matching draft versions', () => {
-      const wrapper = shallow(
-        <SidebarRow
-          datasetId="ds000001"
-          id="ds000001:1.0.0"
-          modified={fixedDate}
-          draft
-          active="draft"
-        />,
-      )
-      expect(wrapper.find('Link').hasClass('active')).toBeTruthy()
-    })
-    it('disables the active state for non-matching draft versions', () => {
-      const wrapper = shallow(
-        <SidebarRow
-          datasetId="ds000001"
-          id="ds000001:1.0.0"
-          modified={fixedDate}
-          draft
-          active="1.0.0"
-        />,
-      )
-      expect(wrapper.find('Link').hasClass('active')).toBeFalsy()
-    })
-  })
-})

package/src/scripts/datalad/dataset/comment.jsx

@@ -1,90 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { generateGravatarUrl } from '../../utils/user.js'
-import parseISO from 'date-fns/parseISO'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-import { Editor, EditorState, convertFromRaw } from 'draft-js'
-import CommentEditor from '../comments/comment-editor.jsx'
-import DeleteComment from '../mutations/delete-comment.jsx'
-import AdminUser from '../../authentication/admin-user.jsx'
-import LoggedIn from '../../authentication/logged-in.jsx'
-import { toast } from 'react-toastify'
-import ToastContent from '../../common/partials/toast-content.jsx'
-
-const Comment = ({ datasetId, data, children }) => {
-  const [replyMode, setReplyMode] = useState(false)
-  const [editMode, setEditMode] = useState(false)
-  const parsedText = JSON.parse(data.text)
-  const editorState = EditorState.createWithContent(convertFromRaw(parsedText))
-  return (
-    <>
-      <div className="comment">
-        <div className="row comment-header">
-          {`By ${data.user.email} - ${formatDistanceToNow(
-            parseISO(data.createDate),
-          )} ago`}
-        </div>
-        <div className="row comment-body">
-          <img
-            src={generateGravatarUrl(data.user)}
-            className="comment-avatar"
-          />
-          {editMode ? (
-            <CommentEditor
-              datasetId={datasetId}
-              commentId={data.id}
-              state={editorState}
-              done={() => setEditMode(false)}
-            />
-          ) : (
-            <Editor
-              editorKey={data.id}
-              editorState={editorState}
-              onChange={() => {
-                /* Not editable, this shouldn't fire */
-              }}
-            />
-          )}
-        </div>
-        <LoggedIn>
-          <div className="row comment-controls">
-            <a className="reply" onClick={() => setReplyMode(!replyMode)}>
-              <i className="fa fa-comment" />
-              {replyMode ? 'Hide' : 'Reply'}
-            </a>
-            <a className="edit" onClick={() => setEditMode(!editMode)}>
-              <i className="fa fa-edit" />
-              {editMode ? 'Hide' : 'Edit'}
-            </a>
-            <AdminUser>
-              <DeleteComment datasetId={datasetId} commentId={data.id} />
-            </AdminUser>
-          </div>
-        </LoggedIn>
-      </div>
-      <div className="row replies">
-        <div className="comment-reply">
-          {replyMode ? (
-            <CommentEditor
-              datasetId={datasetId}
-              parentId={data.id}
-              done={() => {
-                setReplyMode(false)
-                toast.success(<ToastContent title="Reply Posted" />)
-              }}
-            />
-          ) : null}
-        </div>
-        {children}
-      </div>
-    </>
-  )
-}
-
-Comment.propTypes = {
-  datasetId: PropTypes.string,
-  data: PropTypes.object,
-  children: PropTypes.object,
-}
-
-export default Comment

package/src/scripts/datalad/dataset/comments.jsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Comment from './comment.jsx'
-import CommentEditor from '../comments/comment-editor.jsx'
-import LoggedIn from '../../authentication/logged-in.jsx'
-import LoggedOut from '../../authentication/logged-out.jsx'
-import ErrorBoundary from '../../errors/errorBoundary.jsx'
-import { toast } from 'react-toastify'
-import ToastContent from '../../common/partials/toast-content.jsx'
-
-const CommentTree = ({ datasetId, uploader, comments, commentMap }) => (
-  <>
-    {comments.map(comment => {
-      if (!comment) return null
-      // Join any replies
-      const nextLevel = comment.hasOwnProperty('replies')
-        ? comment.replies.map(reply => commentMap[reply.id])
-        : []
-      return (
-        <Comment key={comment.id} datasetId={datasetId} data={comment}>
-          {nextLevel.length ? (
-            <CommentTree
-              datasetId={datasetId}
-              uploader={uploader}
-              comments={nextLevel}
-              commentMap={commentMap}
-            />
-          ) : null}
-        </Comment>
-      )
-    })}
-  </>
-)
-
-CommentTree.propTypes = {
-  datasetId: PropTypes.string,
-  uploader: PropTypes.object,
-  comments: PropTypes.array,
-  commentMap: PropTypes.object,
-}
-
-const Comments = ({ datasetId, uploader, comments }) => {
-  // Fast access map to dereference replies in CommentTree component
-  const commentMap = Object.fromEntries(
-    comments.map(comment => [comment.id, comment]),
-  )
-  // Get only top level comments
-  const rootComments = comments.filter(comment => comment.parent === null)
-  return (
-    <div className="col-xs-12">
-      <div className="dataset-comments">
-        <h2>Comments</h2>
-        <ErrorBoundary subject="error in dataset comments">
-          <LoggedIn>
-            <CommentEditor
-              datasetId={datasetId}
-              done={() =>
-                toast.success(<ToastContent title="Comment Posted" />)
-              }
-            />
-          </LoggedIn>
-          <LoggedOut>
-            <div>Please sign in to contribute to the discussion.</div>
-          </LoggedOut>
-          <CommentTree
-            datasetId={datasetId}
-            uploader={uploader}
-            comments={rootComments}
-            commentMap={commentMap}
-          />
-        </ErrorBoundary>
-      </div>
-    </div>
-  )
-}
-
-Comments.propTypes = {
-  datasetId: PropTypes.string,
-  uploader: PropTypes.object,
-  comments: PropTypes.array,
-}
-
-export default Comments

package/src/scripts/datalad/dataset/dataset-description.jsx

@@ -1,111 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Markdown from 'markdown-to-jsx'
-import EditDescriptionField from '../fragments/edit-description-field.jsx'
-import EditDescriptionList from '../fragments/edit-description-list.jsx'
-
-const arrayToMarkdown = arr => {
-  return arr ? arr.map(element => ` * ${element}\n`).join('') : ''
-}
-
-const DatasetDescription = ({ datasetId, description, editMode = false }) => (
-  <>
-    <div className="description-item">
-      <h2>Authors</h2>
-      <EditDescriptionList
-        datasetId={datasetId}
-        description={description}
-        field="Authors"
-        editMode={editMode}>
-        <div className="cte-display fade-in">
-          <Markdown>{arrayToMarkdown(description.Authors) || ''}</Markdown>
-        </div>
-      </EditDescriptionList>
-    </div>
-    <div className="description-item">
-      <h2>Dataset DOI</h2>
-      <span>
-        {description.DatasetDOI ||
-          'Create a new snapshot to obtain a DOI for the snapshot.'}
-      </span>
-    </div>
-    <div className="description-item">
-      <h2>License</h2>
-      <div className="cte-display fade-in">
-        <Markdown>{description.License || ''}</Markdown>
-      </div>
-    </div>
-    <div className="description-item">
-      <h2>Acknowledgements</h2>
-      <EditDescriptionField
-        datasetId={datasetId}
-        field="Acknowledgements"
-        description={description}
-        editMode={editMode}>
-        <div className="cte-display fade-in">
-          <Markdown>{description.Acknowledgements || ''}</Markdown>
-        </div>
-      </EditDescriptionField>
-    </div>
-    <div className="description-item">
-      <h2>How to Acknowledge</h2>
-      <EditDescriptionField
-        datasetId={datasetId}
-        field="HowToAcknowledge"
-        description={description}
-        editMode={editMode}>
-        <div className="cte-display fade-in">
-          <Markdown>{description.HowToAcknowledge || ''}</Markdown>
-        </div>
-      </EditDescriptionField>
-    </div>
-    <div className="description-item">
-      <h2>Funding</h2>
-      <EditDescriptionList
-        datasetId={datasetId}
-        description={description}
-        field="Funding"
-        editMode={editMode}>
-        <div className="cte-display fade-in">
-          <Markdown>{arrayToMarkdown(description.Funding) || ''}</Markdown>
-        </div>
-      </EditDescriptionList>
-    </div>
-    <div className="description-item">
-      <h2>References and Links</h2>
-      <EditDescriptionList
-        datasetId={datasetId}
-        description={description}
-        field="ReferencesAndLinks"
-        editMode={editMode}>
-        <div className="cte-display fade-in">
-          <Markdown>
-            {arrayToMarkdown(description.ReferencesAndLinks) || ''}
-          </Markdown>
-        </div>
-      </EditDescriptionList>
-    </div>
-    <div className="description-item">
-      <h2>Ethics Approvals</h2>
-      <EditDescriptionList
-        datasetId={datasetId}
-        description={description}
-        field="EthicsApprovals"
-        editMode={editMode}>
-        <div className="cte-display fade-in">
-          <Markdown>
-            {arrayToMarkdown(description.EthicsApprovals) || ''}
-          </Markdown>
-        </div>
-      </EditDescriptionList>
-    </div>
-  </>
-)
-
-DatasetDescription.propTypes = {
-  datasetId: PropTypes.string,
-  description: PropTypes.object,
-  editMode: PropTypes.bool,
-}
-
-export default DatasetDescription

package/src/scripts/datalad/dataset/dataset-main.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import DatasetRoutes from '../routes/dataset-routes.jsx'
-import Comments from './comments.jsx'
-import { ErrorBoundaryDeletePageException } from '../../errors/errorBoundary.jsx'
-import DatasetQueryContext from './dataset-query-context.js'
-
-const DatasetMain = ({ dataset }) => {
-  return (
-    <>
-      <ErrorBoundaryDeletePageException>
-        <DatasetQueryContext.Consumer>
-          {({ error }) => <DatasetRoutes dataset={dataset} error={error} />}
-        </DatasetQueryContext.Consumer>
-      </ErrorBoundaryDeletePageException>
-      <Comments
-        datasetId={dataset.id}
-        uploader={dataset.uploader}
-        comments={dataset.comments}
-      />
-    </>
-  )
-}
-
-DatasetMain.propTypes = {
-  dataset: PropTypes.object,
-}
-
-export default DatasetMain

package/src/scripts/datalad/dataset/dataset-page.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import LeftSidebar from './left-sidebar.jsx'
-import DatasetMain from './dataset-main.jsx'
-import DatasetTools from '../fragments/dataset-tools.jsx'
-
-class DatasetPage extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      sidebar: true,
-    }
-  }
-
-  toggleSidebar = () => {
-    this.setState({ sidebar: !this.state.sidebar })
-  }
-
-  render() {
-    const { dataset } = this.props
-    return (
-      <div className="page dataset">
-        <div
-          className={
-            this.state.sidebar ? 'open dataset-container' : 'dataset-container'
-          }>
-          <LeftSidebar
-            dataset={dataset}
-            datasetId={dataset.id}
-            snapshots={dataset.snapshots}
-            draftModified={dataset.draft.modified}
-          />
-          <span className="show-nav-btn" onClick={this.toggleSidebar}>
-            {this.state.sidebar ? (
-              <i className="fa fa-angle-double-left" aria-hidden="true" />
-            ) : (
-              <i className="fa fa-angle-double-right" aria-hidden="true" />
-            )}
-          </span>
-          <DatasetTools dataset={dataset} />
-          <div className="fade-in inner-route dataset-route light">
-            <div className="clearfix dataset-wrap">
-              <div className="dataset-animation dataset-inner">
-                <DatasetMain dataset={dataset} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-DatasetPage.propTypes = {
-  dataset: PropTypes.shape({
-    id: PropTypes.string,
-    draft: PropTypes.object,
-    snapshots: PropTypes.array,
-    onBrainlife: PropTypes.bool,
-  }),
-}
-
-export default DatasetPage

package/src/scripts/datalad/dataset/dataset-query.jsx

@@ -1,192 +0,0 @@
-import { apm } from '../../apm'
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
-import { useQuery, gql } from '@apollo/client'
-
-import Spinner from '../../common/partials/spinner.jsx'
-import DatasetQueryContext from './dataset-query-context.js'
-import DatasetContext from './dataset-context.js'
-import DatasetPage from './dataset-page.jsx'
-import FilesSubscription from '../subscriptions/files-subscription.jsx'
-import usePermissionsSubscription from '../subscriptions/usePermissionsSubscription'
-import useSnapshotsUpdatedSubscriptions from '../subscriptions/useSnapshotsUpdatedSubscriptions'
-import useDatasetDeletedSubscription, {
-  datasetDeletedToast,
-} from '../subscriptions/useDatasetDeletedSubscription.jsx'
-import useDraftSubscription from '../subscriptions/useDraftSubscription.js'
-import * as DatasetQueryFragments from './dataset-query-fragments.js'
-import { DATASET_COMMENTS } from './comments-fragments.js'
-import ErrorBoundary, {
-  ErrorBoundaryAssertionFailureException,
-} from '../../errors/errorBoundary.jsx'
-import DatasetRedirect from '../routes/dataset-redirect'
-import FourOThreePage from '../../errors/403page'
-import FourOFourPage from '../../errors/404page'
-
-/**
- * Generate the dataset page query
- */
-export const getDatasetPage = gql`
-  query dataset($datasetId: ID!) {
-    dataset(id: $datasetId) {
-      id
-      created
-      public
-      following
-      starred
-      ...DatasetDraft
-      ...DatasetPermissions
-      ...DatasetSnapshots
-      ...DatasetIssues
-      ...DatasetMetadata
-      ...DatasetComments
-      uploader {
-        id
-        name
-        email
-      }
-      analytics {
-        downloads
-        views
-      }
-      onBrainlife
-    }
-  }
-  ${DatasetQueryFragments.DRAFT_FRAGMENT}
-  ${DatasetQueryFragments.PERMISSION_FRAGMENT}
-  ${DatasetQueryFragments.DATASET_SNAPSHOTS}
-  ${DatasetQueryFragments.DATASET_ISSUES}
-  ${DatasetQueryFragments.DATASET_METADATA}
-  ${DATASET_COMMENTS}
-`
-
-/**
- * Add files fragment for draft route
- */
-export const getDraftPage = gql`
-  query dataset($datasetId: ID!) {
-    dataset(id: $datasetId) {
-      id
-      created
-      public
-      following
-      starred
-      worker
-      ...DatasetDraft
-      ...DatasetDraftFiles
-      ...DatasetPermissions
-      ...DatasetSnapshots
-      ...DatasetIssues
-      ...DatasetMetadata
-      ...DatasetComments
-      uploader {
-        id
-        name
-        email
-      }
-      analytics {
-        downloads
-        views
-      }
-      onBrainlife
-    }
-  }
-  ${DatasetQueryFragments.DRAFT_FRAGMENT}
-  ${DatasetQueryFragments.DRAFT_FILES_FRAGMENT}
-  ${DatasetQueryFragments.PERMISSION_FRAGMENT}
-  ${DatasetQueryFragments.DATASET_SNAPSHOTS}
-  ${DatasetQueryFragments.DATASET_ISSUES}
-  ${DatasetQueryFragments.DATASET_METADATA}
-  ${DATASET_COMMENTS}
-`
-
-/**
- * Query to load and render dataset page - most dataset loading is done here
- * @param {Object} props
- * @param {Object} props.datasetId Accession number / id for dataset to query
- * @param {Object} props.draft Is this the draft page?
- * @param {Object} props.history React router history
- */
-export const DatasetQueryHook = ({ datasetId, draft, history }) => {
-  const { data, loading, error, fetchMore } = useQuery(
-    draft ? getDraftPage : getDatasetPage,
-    {
-      variables: { datasetId },
-      fetchPolicy: 'cache-and-network',
-      nextFetchPolicy: 'cache-first',
-    },
-  )
-  usePermissionsSubscription([datasetId])
-  useSnapshotsUpdatedSubscriptions(datasetId)
-  useDatasetDeletedSubscription([datasetId], ({ data: subData }) => {
-    if (subData && subData.datasetDeleted === datasetId) {
-      history.push('/dashboard/datasets')
-      datasetDeletedToast(datasetId, data?.dataset?.draft?.description?.Name)
-    }
-  })
-  useDraftSubscription(datasetId)
-
-  if (loading) return <Spinner text="Loading Dataset" active />
-  if (error) {
-    if (error.message === 'You do not have access to read this dataset.') {
-      return <FourOThreePage />
-    } else {
-      try {
-        apm.captureError(error)
-      } catch (err) {
-        // Ignore failure to write to APM
-      }
-      return <FourOFourPage />
-    }
-  }
-
-  return (
-    <DatasetContext.Provider value={data.dataset}>
-      <ErrorBoundary subject={'error in dataset page'}>
-        <DatasetQueryContext.Provider
-          value={{
-            datasetId,
-            fetchMore,
-            error,
-          }}
-        >
-          <DatasetPage dataset={data.dataset} />
-          <FilesSubscription datasetId={datasetId} />
-        </DatasetQueryContext.Provider>
-      </ErrorBoundary>
-    </DatasetContext.Provider>
-  )
-}
-
-DatasetQueryHook.propTypes = {
-  datasetId: PropTypes.string,
-  draft: PropTypes.bool,
-  history: PropTypes.object,
-}
-
-/**
- * Routing wrapper for dataset query
- * @param {Object} props
- * @param {Object} props.match React router match object
- * @param {Object} props.draft Is this the draft page?
- * @param {Object} props.history React router history
- */
-const DatasetQuery = ({ match, history }) => (
-  <>
-    <DatasetRedirect />
-    <ErrorBoundaryAssertionFailureException subject={'error in dataset query'}>
-      <DatasetQueryHook
-        datasetId={match.params.datasetId}
-        draft={!match.params.snapshotId}
-        history={history}
-      />
-    </ErrorBoundaryAssertionFailureException>
-  </>
-)
-
-DatasetQuery.propTypes = {
-  match: PropTypes.object,
-  history: PropTypes.object,
-}
-
-export default DatasetQuery