@openneuro/app 4.2.0 → 4.2.4

package/src/scripts/common/partials/metric.jsx

@@ -1,73 +0,0 @@
-// dependencies --------------------------------------------------------------
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import Tooltip from './tooltip.jsx'
-
-// component setup -----------------------------------------------------------
-
-class Metric extends React.PureComponent {
-  // lifecycle events ----------------------------------------------------------
-  render() {
-    if (!this.props.display) {
-      return false
-    }
-
-    let spanClass, tip, iconClass
-    const value = this.props.value ? this.props.value : 0
-    const noun = this.props.snapshot ? 'snapshot' : 'dataset'
-
-    switch (this.props.type) {
-      case 'stars':
-        spanClass = 'dataset-status ds-primary'
-        iconClass = 'fa fa-star'
-        tip = `This ${noun} has ${value} likes.`
-        break
-      case 'downloads':
-        spanClass = 'dataset-status ds-primary'
-        iconClass = 'fa fa-download'
-        tip = `This ${noun} has ${value} downloads.`
-        break
-      case 'followers':
-        spanClass = 'dataset-status ds-primary'
-        iconClass = 'fa fa-users'
-        tip = `This ${noun} has ${value} followers.`
-        break
-      case 'views':
-        spanClass = 'dataset-status ds-primary'
-        iconClass = 'fa fa-eye'
-        tip = `This ${noun} has ${value} views.`
-        break
-      default:
-        throw new Error('Invalid type provided')
-    }
-
-    let content = (
-      <span className="icon-wrap">
-        <i className={iconClass} />
-        {value}
-      </span>
-    )
-
-    if (tip) {
-      content = <Tooltip tooltip={tip}>{content}</Tooltip>
-    }
-
-    return (
-      <span className="metric">
-        <span>
-          <span className={spanClass}>{content}</span>
-        </span>
-      </span>
-    )
-  }
-}
-
-Metric.propTypes = {
-  type: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  display: PropTypes.bool,
-  snapshot: PropTypes.bool,
-}
-
-export default Metric

package/src/scripts/common/partials/spinner.jsx

@@ -1,34 +0,0 @@
-// dependencies ------------------------------------------------------------------------------
-
-import React from 'react'
-import PropTypes from 'prop-types'
-
-// component setup ---------------------------------------------------------------------------
-
-class Spinner extends React.Component {
-  // life cycle events -------------------------------------------------------------------------
-
-  render() {
-    const spinner = (
-      <div className="loading-wrap fade-in">
-        <div className="spinner">
-          <div className="spinnerinner" />
-        </div>
-        <span>{this.props.text}</span>
-      </div>
-    )
-    return this.props.active ? spinner : null
-  }
-}
-
-Spinner.propTypes = {
-  text: PropTypes.string,
-  active: PropTypes.bool,
-}
-
-Spinner.defaultProps = {
-  text: 'Loading',
-  active: false,
-}
-
-export default Spinner

package/src/scripts/common/partials/status.jsx

@@ -1,96 +0,0 @@
-// dependencies --------------------------------------------------------------
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import Tooltip from './tooltip.jsx'
-import UploadResume from '../../uploader/upload-resume.jsx'
-
-// component setup -----------------------------------------------------------
-
-class Status extends React.PureComponent {
-  // lifecycle events ----------------------------------------------------------
-  render() {
-    if (!this.props.display) {
-      return false
-    }
-
-    let spanClass, tip, iconClass, fileSelect
-    let title = this.props.title ? this.props.title : null
-    const minimal = this.props.minimal
-
-    switch (this.props.type) {
-      case 'public':
-        spanClass = 'dataset-status ds-success'
-        tip = minimal ? 'Viewable to all visitors' : null
-        title = 'Published'
-        iconClass = 'fa fa-globe'
-        break
-      case 'incomplete':
-        spanClass = 'dataset-status ds-warning'
-        tip = 'Click resume to try again'
-        title = 'Incomplete'
-        iconClass = 'fa fa-warning'
-        fileSelect = minimal ? (
-          <span className="file-wrap clearfix">
-            <UploadResume datasetId={this.props.dataset.id} />
-          </span>
-        ) : null
-        break
-      case 'shared':
-        spanClass = 'dataset-status ds-info'
-        tip = minimal ? 'Shared with me' : null
-        title = 'Shared with me'
-        iconClass = 'fa fa-user'
-        break
-      case 'inProgress':
-        spanClass = 'dataset-status ds-primary'
-        tip = minimal ? 'Upload in progress' : null
-        title = 'In progress'
-        iconClass = 'fa fa-spin fa-circle-o-notch'
-        break
-      case 'invalid':
-        spanClass = 'dataset-status ds-danger'
-        tip = minimal ? 'Invalid' : null
-        title = 'Invalid'
-        iconClass = 'fa fa-exclamation-circle'
-        break
-      case 'monitored':
-        spanClass = 'dataset-status ds-primary'
-        tip =
-          'The person who uploaded this dataset will be notified of all new comments posted here.'
-        title = 'Uploader is Following'
-        iconClass = 'fa fa-user'
-        break
-    }
-
-    let content = (
-      <span className="icon-wrap">
-        <i className={iconClass} />
-        {minimal ? null : title}
-      </span>
-    )
-
-    if (tip) {
-      content = <Tooltip tooltip={tip}>{content}</Tooltip>
-    }
-
-    return (
-      <span className="clearfix status">
-        {fileSelect}
-        <span>
-          <span className={spanClass}>{content}</span>
-        </span>
-      </span>
-    )
-  }
-}
-
-Status.propTypes = {
-  display: PropTypes.bool,
-  minimal: PropTypes.bool,
-  type: PropTypes.string,
-  dataset: PropTypes.object,
-  title: PropTypes.string,
-}
-
-export default Status

package/src/scripts/common/partials/timeout.jsx

@@ -1,47 +0,0 @@
-// dependencies ------------------------------------------------------------------------------
-
-import React from 'react'
-import PropTypes from 'prop-types'
-
-// component setup ---------------------------------------------------------------------------
-
-class Timeout extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { timedOut: false }
-  }
-  // life cycle events -------------------------------------------------------------------------
-  componentDidMount() {
-    const timeoutId = setTimeout(() => {
-      this.setState({ timedOut: true })
-    }, this.props.timeout)
-    this.timeoutId = timeoutId
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeoutId)
-  }
-
-  render() {
-    if (!this.state.timedOut) {
-      return this.props.children
-    } else {
-      throw new Error(
-        'The component has been loading for too long. Reverting render to component error boundary.',
-      )
-    }
-  }
-}
-
-Timeout.propTypes = {
-  timeout: PropTypes.number,
-  timeoutId: PropTypes.number,
-  children: PropTypes.object,
-}
-
-Timeout.defaultProps = {
-  timeout: null,
-  timeoutId: null,
-}
-
-export default Timeout

package/src/scripts/common/partials/tooltip.jsx

@@ -1,36 +0,0 @@
-// dependencies ------------------------------------------------------------------
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Tooltip, OverlayTrigger } from 'react-bootstrap'
-import newId from '../../utils/newid'
-
-class TooltipTop extends React.PureComponent {
-  constructor(props) {
-    super(props)
-    this.id = newId('tooltip-id-')
-  }
-
-  render() {
-    const tooltip = <Tooltip id={this.id}>{this.props.tooltip}</Tooltip>
-
-    return this.props.tooltip ? (
-      <OverlayTrigger
-        placement="top"
-        overlay={tooltip}
-        delayShow={300}
-        delayHide={150}>
-        {this.props.children}
-      </OverlayTrigger>
-    ) : (
-      this.props.children
-    )
-  }
-}
-
-TooltipTop.propTypes = {
-  tooltip: PropTypes.string,
-  children: PropTypes.object,
-}
-
-export default TooltipTop

package/src/scripts/components/__tests__/dropdown-button.spec.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { DropdownButton } from '../dropdown-button'
-
-const titleid = 'test-title'
-const dropdownid = 'test-dropdown'
-function renderDropdownButton() {
-  const title = <i className="fa fa-gear" data-testid={titleid} />
-  render(
-    <DropdownButton id="user-menu" title={title}>
-      <ul data-testid={dropdownid}>
-        <li>Menu Item 1</li>
-        <li>Menu Item 2</li>
-        <li>Menu Item 3</li>
-      </ul>
-    </DropdownButton>,
-  )
-}
-
-describe('DropdownButton component', () => {
-  it('does not open on hover', async () => {
-    renderDropdownButton()
-
-    fireEvent.mouseOver(screen.getByTestId(titleid))
-
-    expect(screen.queryByText('Menu Item 1')).not.toBeInTheDocument()
-    expect(screen.queryByText('Menu Item 2')).not.toBeInTheDocument()
-    expect(screen.queryByText('Menu Item 3')).not.toBeInTheDocument()
-  })
-  it('toggle expands the dropdown menu (children) on click', async () => {
-    renderDropdownButton()
-
-    expect(screen.queryByText('Menu Item 1')).not.toBeInTheDocument()
-    expect(screen.queryByText('Menu Item 2')).not.toBeInTheDocument()
-    expect(screen.queryByText('Menu Item 3')).not.toBeInTheDocument()
-
-    fireEvent.click(screen.getByTestId(titleid))
-
-    expect(screen.getByText('Menu Item 1')).toBeInTheDocument()
-    expect(screen.getByText('Menu Item 2')).toBeInTheDocument()
-    expect(screen.getByText('Menu Item 3')).toBeInTheDocument()
-
-    fireEvent.click(screen.getByTestId(titleid))
-
-    expect(screen.queryByText('Menu Item 1')).not.toBeInTheDocument()
-    expect(screen.queryByText('Menu Item 2')).not.toBeInTheDocument()
-    expect(screen.queryByText('Menu Item 3')).not.toBeInTheDocument()
-  })
-})

package/src/scripts/components/dropdown-button.tsx

@@ -1,42 +0,0 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
-
-interface DropdownButtonProps {
-  id: string
-  title: string | ReactNode
-  children: ReactNode
-}
-
-/**
- * Replacement for react-bootstrap 0.31.0 DropdownButton
- * Only covers the OpenNeuro use case
- */
-export const DropdownButton: FC<DropdownButtonProps> = ({
-  id,
-  title,
-  children,
-}): ReactElement => {
-  const [open, setOpen] = useState(false)
-  const onClick = (): void => {
-    setOpen(!open)
-  }
-  const computedClasses = `dropdown btn-group${open ? ' open' : ''}`
-  return (
-    <div className={computedClasses}>
-      <button
-        id={id}
-        className="dropdown-toggle btn btn-default"
-        role="button"
-        aria-haspopup
-        aria-expanded={open}
-        type="button"
-        onClick={onClick}>
-        {title}
-      </button>
-      {open && (
-        <ul className="dropdown-menu" aria-labelledby={id} role="menu">
-          {children}
-        </ul>
-      )}
-    </div>
-  )
-}

package/src/scripts/components/panel-group.tsx

@@ -1,24 +0,0 @@
-import React, { FC, ReactElement, ReactNode } from 'react'
-
-interface PanelGroupProps {
-  children: ReactNode
-  accordion?: boolean
-  activeKey?: string
-  className?: string
-  onSelect?: () => void
-}
-
-/**
- * Replacement for react-bootstrap 0.31.0 Panel
- * Only covers OpenNeuro use case
- */
-export const PanelGroup: FC<PanelGroupProps> = ({
-  children,
-  className,
-}): ReactElement => {
-  return (
-    <div className={`panel-group ${className}`} role="tablist">
-      {children}
-    </div>
-  )
-}

package/src/scripts/components/panel.tsx

@@ -1,42 +0,0 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
-
-interface PanelProps {
-  children: ReactNode
-  header?: ReactNode
-  eventKey?: string
-  className?: string
-}
-
-/**
- * Replacement for react-bootstrap 0.31.0 Panel
- * Only covers OpenNeuro use case
- */
-export const Panel: FC<PanelProps> = ({
-  header,
-  className,
-  children,
-}): ReactElement => {
-  const [expanded, setExpanded] = useState(false)
-  return (
-    <div className={`panel panel-default ${className}`}>
-      <div className="panel-heading">
-        <div className="panel-title">
-          <a
-            role="tab"
-            className={expanded ? null : 'collapsed'}
-            aria-expanded={expanded}
-            aria-selected={expanded}
-            onClick={(): void => {
-              setExpanded(!expanded)
-            }}>
-            {header}
-          </a>
-        </div>
-      </div>
-      <div
-        className={`panel-collapse ${expanded ? 'collapse in' : 'collapse'}`}>
-        <div className="panel-body">{children}</div>
-      </div>
-    </div>
-  )
-}

package/src/scripts/datalad/__tests__/snapshotVersion.spec.js

@@ -1,21 +0,0 @@
-import snapshotVersion from '../snapshotVersion.js'
-
-describe('LeftSidebar', () => {
-  describe('snapshotVersion', () => {
-    it('matches a draft URL', () => {
-      expect(snapshotVersion({ pathname: '/datasets/ds00001' })).toBe(null)
-    })
-    it('matches a versioned URL', () => {
-      expect(
-        snapshotVersion({ pathname: '/datasets/ds001079/versions/1.0.0' }),
-      ).toBe('1.0.0')
-    })
-    it('matches correctly with dataset action routes', () => {
-      expect(
-        snapshotVersion({
-          pathname: '/datasets/ds001079/versions/1.0.0/publish',
-        }),
-      ).toBe('1.0.0')
-    })
-  })
-})

package/src/scripts/datalad/comments/__tests__/comment-editor.spec.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import CommentEditor from '../comment-editor.jsx'
-
-describe('CommentEditor component', () => {
-  it('renders with default props', () => {
-    const wrapper = mount(<CommentEditor />)
-    // No snapshot since EditorState is not stable
-    expect(wrapper).toBeTruthy()
-  })
-  it('renders edit mutation when commentId is specified', () => {
-    const wrapper = mount(<CommentEditor commentId="1" />)
-    expect(wrapper.find('CommentEditMutation')).toBeTruthy()
-  })
-  it('renders new comment mutation when commentId is not specified', () => {
-    const wrapper = mount(<CommentEditor commentId="1" />)
-    expect(wrapper.find('CommentMutation')).toBeTruthy()
-  })
-})

package/src/scripts/datalad/comments/block-style-controls.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StyleButton from './style-button.jsx'
-
-const BLOCK_TYPES = [
-  { label: 'H1', style: 'header-one' },
-  { label: 'H2', style: 'header-two' },
-  { label: 'H3', style: 'header-three' },
-  { label: 'H4', style: 'header-four' },
-  { label: 'H5', style: 'header-five' },
-  { label: 'H6', style: 'header-six' },
-  { label: 'Blockquote', style: 'blockquote' },
-  { label: 'UL', style: 'unordered-list-item' },
-  { label: 'OL', style: 'ordered-list-item' },
-  { label: 'Code Block', style: 'code-block' },
-]
-
-const BlockStyleControls = props => {
-  const { editorState } = props
-  const selection = editorState.getSelection()
-  const blockType = editorState
-    .getCurrentContent()
-    .getBlockForKey(selection.getStartKey())
-    .getType()
-
-  return (
-    <div className="RichEditor-controls">
-      {BLOCK_TYPES.map(type => (
-        <StyleButton
-          key={type.label}
-          active={type.style === blockType}
-          label={type.label}
-          onToggle={props.onToggle}
-          style={type.style}
-        />
-      ))}
-    </div>
-  )
-}
-
-BlockStyleControls.propTypes = {
-  editorState: PropTypes.object,
-  onToggle: PropTypes.func,
-}
-
-export default BlockStyleControls

package/src/scripts/datalad/comments/comment-editor.jsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { Editor, EditorState, RichUtils } from 'draft-js'
-import CommentMutation from '../mutations/comment.jsx'
-import BlockStyleControls from './block-style-controls.jsx'
-import InlineStyleControls from './inline-style-controls.jsx'
-
-const getBlockStyle = block =>
-  block.getType() === 'blockquote' ? 'RichEditor-blockquote' : null
-
-const CommentEditor = ({
-  datasetId,
-  parentId = null,
-  commentId = null,
-  state = null,
-  done,
-}) => {
-  const [editorState, setEditorState] = useState(
-    state || EditorState.createEmpty(),
-  )
-  const doAfterSubmit = () => {
-    setEditorState(EditorState.createEmpty())
-    done && done()
-  }
-  const disabled = editorState.getUndoStack().size === 0
-  return (
-    <div className="RichEditor-root">
-      <BlockStyleControls
-        editorState={editorState}
-        onToggle={blockType =>
-          setEditorState(RichUtils.toggleBlockType(editorState, blockType))
-        }
-      />
-      <InlineStyleControls
-        editorState={editorState}
-        onToggle={inlineStyle =>
-          setEditorState(RichUtils.toggleInlineStyle(editorState, inlineStyle))
-        }
-      />
-      <div className="RichEditor-editor">
-        <Editor
-          editorKey={commentId}
-          blockStyleFn={getBlockStyle}
-          editorState={editorState}
-          onChange={setEditorState}
-          placeholder="Type your comment here..."
-          spellCheck
-        />
-        {commentId ? (
-          <CommentMutation
-            datasetId={datasetId}
-            commentId={commentId}
-            comment={editorState.getCurrentContent()}
-            disabled={disabled}
-            done={doAfterSubmit}
-          />
-        ) : (
-          <CommentMutation
-            datasetId={datasetId}
-            parentId={parentId}
-            comment={editorState.getCurrentContent()}
-            disabled={disabled}
-            done={doAfterSubmit}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
-
-CommentEditor.propTypes = {
-  datasetId: PropTypes.string,
-  parentId: PropTypes.string,
-  commentId: PropTypes.string,
-  state: PropTypes.object,
-  done: PropTypes.func,
-}
-
-export default CommentEditor

package/src/scripts/datalad/comments/inline-style-controls.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StyleButton from './style-button.jsx'
-
-const INLINE_STYLES = [
-  { label: 'Bold', style: 'BOLD' },
-  { label: 'Italic', style: 'ITALIC' },
-  { label: 'Underline', style: 'UNDERLINE' },
-  { label: 'Monospace', style: 'CODE' },
-]
-
-const InlineStyleControls = props => {
-  const currentStyle = props.editorState.getCurrentInlineStyle()
-  return (
-    <div className="RichEditor-controls">
-      {INLINE_STYLES.map(type => (
-        <StyleButton
-          key={type.label}
-          active={currentStyle.has(type.style)}
-          label={type.label}
-          onToggle={props.onToggle}
-          style={type.style}
-        />
-      ))}
-    </div>
-  )
-}
-
-InlineStyleControls.propTypes = {
-  editorState: PropTypes.object,
-  onToggle: PropTypes.func,
-}
-
-export default InlineStyleControls

package/src/scripts/datalad/comments/style-button.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const StyleButton = ({ style, label, active, onToggle }) => {
-  return (
-    <span
-      className={
-        active
-          ? 'RichEditor-styleButton RichEditor-activeButton'
-          : 'RichEditor-styleButton'
-      }
-      onMouseDown={e => {
-        e.preventDefault()
-        onToggle(style)
-      }}>
-      {label}
-    </span>
-  )
-}
-
-StyleButton.propTypes = {
-  style: PropTypes.string,
-  onToggle: PropTypes.func,
-  active: PropTypes.bool,
-  label: PropTypes.string,
-}
-
-export default StyleButton