@openneuro/app 4.1.1 → 4.2.2

package/src/scripts/datalad/dashboard/datasets/__tests__/dataset-sorter.spec.jsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { SortField } from '../dataset-sorter.jsx'
-
-describe('dashboard/datasets/DatasetSorter', () => {
-  describe('SortField', () => {
-    it('renders successfully', () => {
-      expect(
-        shallow(<SortField field="created" queryVariables={{ orderBy: {} }} />),
-      ).toMatchSnapshot()
-    })
-    it('calls refetch on click', () => {
-      const refetch = jest.fn()
-      const wrapper = shallow(
-        <SortField
-          field="created"
-          queryVariables={{ orderBy: {} }}
-          refetch={refetch}
-        />,
-      )
-      wrapper.simulate('click')
-      expect(refetch).toHaveBeenCalled()
-    })
-    it('switches ascending to descending field when clicked', () => {
-      const refetch = jest.fn()
-      const wrapper = shallow(
-        <SortField
-          field="created"
-          queryVariables={{ orderBy: { created: 'ascending' } }}
-          refetch={refetch}
-        />,
-      )
-      wrapper.simulate('click')
-      expect(refetch).toHaveBeenCalledWith({
-        orderBy: { created: 'descending' },
-      })
-    })
-    it('switches to a new sort field when clicked', () => {
-      const refetch = jest.fn()
-      const wrapper = shallow(
-        <SortField
-          field="stars"
-          queryVariables={{ orderBy: { created: 'ascending' } }}
-          refetch={refetch}
-        />,
-      )
-      wrapper.simulate('click')
-      expect(refetch).toHaveBeenCalledWith({ orderBy: { stars: 'descending' } })
-    })
-    it('preserves unrelated fields when clicked', () => {
-      const refetch = jest.fn()
-      const wrapper = shallow(
-        <SortField
-          field="created"
-          queryVariables={{
-            orderBy: { created: 'ascending' },
-            filterBy: { public: true },
-          }}
-          refetch={refetch}
-        />,
-      )
-      wrapper.simulate('click')
-      expect(refetch).toHaveBeenCalledWith({
-        orderBy: { created: 'descending' },
-        filterBy: { public: true },
-      })
-    })
-  })
-})

package/src/scripts/datalad/dashboard/datasets/__tests__/dataset-virtual-scroller.spec.jsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import DatasetVirtualScroller from '../dataset-virtual-scroller.jsx'
-
-const defProps = {
-  datasets: [{ id: 1 }, { id: 2 }, { id: 3 }],
-  pageInfo: {
-    count: 3,
-  },
-  loadMoreRows: jest.fn(),
-}
-
-describe('dashboard/datasets/DatasetVirtualScroller', () => {
-  it('shallow renders successfully', () => {
-    expect(shallow(<DatasetVirtualScroller {...defProps} />)).toMatchSnapshot()
-  })
-  describe('_isRowLoaded()', () => {
-    it('is bounded to pageInfo.count', () => {
-      const wrapper = shallow(<DatasetVirtualScroller {...defProps} />)
-      const instance = wrapper.instance()
-      expect(instance._isRowLoaded({ index: 0 })).toBe(true)
-      expect(instance._isRowLoaded({ index: 5 })).toBe(false)
-      expect(instance._isRowLoaded({ index: 2 })).toBe(true)
-    })
-  })
-  describe('shouldComponentUpdate()', () => {
-    it('returns true with different dataset counts', () => {
-      const wrapper = shallow(<DatasetVirtualScroller {...defProps} />)
-      const instance = wrapper.instance()
-      expect(instance.shouldComponentUpdate({ datasets: [] })).toBe(true)
-    })
-    it('returns true with the same list sorted differently', () => {
-      const wrapper = shallow(<DatasetVirtualScroller {...defProps} />)
-      const instance = wrapper.instance()
-      expect(
-        instance.shouldComponentUpdate({
-          datasets: [
-            defProps.datasets[1],
-            defProps.datasets[0],
-            defProps.datasets[2],
-          ],
-        }),
-      ).toBe(true)
-    })
-    it('returns false for the same list', () => {
-      const wrapper = shallow(<DatasetVirtualScroller {...defProps} />)
-      const instance = wrapper.instance()
-      expect(
-        instance.shouldComponentUpdate({
-          datasets: [...defProps.datasets],
-        }),
-      ).toBe(false)
-    })
-    it('returns false for the same list if another prop changes', () => {
-      const wrapper = shallow(<DatasetVirtualScroller {...defProps} />)
-      const instance = wrapper.instance()
-      expect(
-        instance.shouldComponentUpdate({
-          datasets: [...defProps.datasets],
-          loadMoreRows: jest.fn(),
-        }),
-      ).toBe(false)
-    })
-  })
-})

package/src/scripts/datalad/dashboard/datasets/__tests__/uploaded.spec.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import Uploaded from '../uploaded.jsx'
-
-const defProps = {
-  uploader: {
-    name: 'A User',
-  },
-  created: null, // Avoid testing the current date
-}
-
-describe('dashboard/datasets/Uploaded', () => {
-  it('renders successfully', () => {
-    const wrapper = shallow(<Uploaded {...defProps} />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})

package/src/scripts/datalad/dashboard/datasets/dataset-filter.jsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useCookies } from 'react-cookie'
-import Capitalized from '../../../styles/capitalized.jsx'
-import { getProfile } from '../../../refactor_2021/authentication/profile.js'
-
-// DatasetFilter GraphQL fields
-const filterFields = ['public', 'shared', 'invalid']
-const filterIcons = {
-  public: 'fa-globe',
-  shared: 'fa-user',
-  invalid: 'fa-exclamation-circle',
-  all: 'fa-magic',
-}
-
-export const FilterField = ({ field, queryVariables, refetch }) => {
-  const fieldValue =
-    field in queryVariables.filterBy && queryVariables.filterBy[field]
-  const filterBy = () => {
-    const newQueryVariables = { ...queryVariables }
-    // Clear existing sorts
-    newQueryVariables.filterBy = {}
-    // Apply (or toggle) based on previous sort
-    newQueryVariables.filterBy[field] =
-      queryVariables.filterBy[field] === true ? false : true
-    refetch(newQueryVariables)
-  }
-  const icon = filterIcons[field]
-  return (
-    <button
-      key={field}
-      className={
-        fieldValue
-          ? `btn-filter name active filter-${field}`
-          : `btn-filter name filter-${field}`
-      }
-      onClick={filterBy}>
-      <Capitalized>
-        <i className={`fa ${icon}`} />
-        <span className="filter-text">{field}</span>
-      </Capitalized>
-    </button>
-  )
-}
-
-FilterField.propTypes = {
-  field: PropTypes.string,
-  queryVariables: PropTypes.object,
-  refetch: PropTypes.func,
-}
-
-const DatasetFilter = ({ queryVariables, refetch }) => {
-  const [cookies] = useCookies()
-  const profile = getProfile(cookies)
-  let fields = filterFields
-  if (profile && 'admin' in profile && profile.admin) {
-    fields = [...filterFields, 'all']
-  }
-  return (
-    <>
-      {fields.map(field => (
-        <FilterField
-          field={field}
-          queryVariables={queryVariables}
-          refetch={refetch}
-          key={field}
-        />
-      ))}
-    </>
-  )
-}
-
-DatasetFilter.propTypes = {
-  queryVariables: PropTypes.object,
-  refetch: PropTypes.func,
-}
-
-export default DatasetFilter

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

@@ -1,102 +0,0 @@
-/* eslint react/prop-types: 0, react/display-name: 0 */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Query } from '@apollo/client/react/components'
-import { datasets } from '@openneuro/client'
-import DatasetTab from './dataset-tab.jsx'
-import ErrorBoundary from '../../../../scripts/errors/errorBoundary.jsx'
-
-export const updateQuery = (previousResult, { fetchMoreResult }) => {
-  const newEdges = fetchMoreResult.datasets.edges
-  const pageInfo = fetchMoreResult.datasets.pageInfo
-  return {
-    datasets: {
-      __typename: previousResult.datasets.__typename,
-      edges: [
-        ...previousResult.datasets.edges,
-        ...newEdges.filter(
-          n =>
-            !previousResult.datasets.edges.some(e => e.node.id === n.node.id),
-        ),
-      ],
-      pageInfo,
-    },
-  }
-}
-
-/**
- * Load additional datasets based on next data cursor
- * @param {object} data Next data cursor
- * @param {function} fetchMore Apollo fetchMore function from the original query
- */
-export const loadMoreRows = (data, fetchMore) => {
-  // Last cursor loaded (the pending promise)
-  let loadingCursor
-  // Pending promise to chain to if we need to delay a load
-  let loadingPromise
-  const loadMoreInner = cursor => {
-    // Is an update fetch in progress?
-    if (loadingCursor !== cursor) {
-      // No, start a new fetch
-      loadingPromise = fetchMore({
-        variables: {
-          cursor,
-        },
-        updateQuery,
-      })
-      loadingCursor = cursor
-      return loadingPromise
-    } else {
-      // Yes, wait for the previous request to continue
-      return loadingPromise.then(({ data }) =>
-        loadMoreInner(data.datasets.pageInfo.endCursor),
-      )
-    }
-  }
-  return () => loadMoreInner(data.datasets.pageInfo.endCursor)
-}
-
-export const datasetQueryDisplay =
-  (isPublic, isSaved) =>
-  ({ loading, data, fetchMore, refetch, variables, error = null }) => {
-    return (
-      <DatasetTab
-        loading={loading}
-        data={data}
-        error={error}
-        loadMoreRows={
-          loading
-            ? () => {
-                /* No op while loading */
-              }
-            : loadMoreRows(data, fetchMore)
-        }
-        refetch={refetch}
-        queryVariables={variables}
-        publicDashboard={isPublic}
-        savedDashboard={isSaved}
-      />
-    )
-  }
-
-const DatasetQuery = ({ public: isPublic, saved: isSaved }) => (
-  <ErrorBoundary subject="Error loading dashboard">
-    <Query
-      query={datasets.getDatasets}
-      variables={{
-        filterBy: { public: isPublic, starred: isSaved },
-        myDatasets: !(isPublic || isSaved),
-      }}
-      errorPolicy="all"
-      fetchPolicy="cache-and-network"
-      nextFetchPolicy="cache-first">
-      {datasetQueryDisplay(isPublic, isSaved)}
-    </Query>
-  </ErrorBoundary>
-)
-
-DatasetQuery.propTypes = {
-  public: PropTypes.bool,
-}
-
-export default DatasetQuery

package/src/scripts/datalad/dashboard/datasets/dataset-row-error-boundary.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import RowHeight from './row-height.jsx'
-import { apm } from '../../../apm'
-
-/**
- * Don't prevent rendering all of the other results if one has failed to load
- */
-class DatasetRowErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { hasError: false, eventId: null }
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true }
-  }
-
-  componentDidCatch(error) {
-    apm.captureError(error)
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="panel panel-default">
-          <RowHeight className="panel-heading">
-            <div className="header clearfix">
-              <h4 className="dataset-title">
-                An error occurred while displaying this result
-              </h4>
-            </div>
-            <div className="clearfix minimal-summary">
-              <div className="summary-data">
-                <strong>If this persists, contact support</strong>
-              </div>
-            </div>
-          </RowHeight>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-DatasetRowErrorBoundary.propTypes = {
-  datasetId: PropTypes.string,
-  children: PropTypes.node,
-}
-
-export default DatasetRowErrorBoundary

package/src/scripts/datalad/dashboard/datasets/dataset-row-skeleton.jsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import RowHeight from './row-height.jsx'
-
-const DatasetRowSkeleton = () => (
-  <div className="panel panel-default">
-    <RowHeight className="panel-heading">&nbsp;</RowHeight>
-  </div>
-)
-
-export default DatasetRowSkeleton

package/src/scripts/datalad/dashboard/datasets/dataset-row.jsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Statuses from './dataset-statuses.jsx'
-import Metrics from '../../../dataset/dataset.metrics.jsx'
-import Uploaded from './uploaded.jsx'
-import Summary from '../../fragments/dataset-summary.jsx'
-import { Link } from 'react-router-dom'
-import RowHeight from './row-height.jsx'
-
-const sortByDate = (a, b) =>
-  new Date(b.created).getTime() - new Date(a.created).getTime()
-
-export const genLinkTarget = (dataset, publicDashboard) => {
-  const linkTarget = '/datasets/' + dataset.id
-  if (dataset.snapshots.length > 0 && publicDashboard) {
-    const sortedSnapshots = [...dataset.snapshots].sort(sortByDate)
-    const newestSnapshot = sortedSnapshots[0]
-    return `${linkTarget}/versions/${newestSnapshot.tag}`
-  } else {
-    return linkTarget
-  }
-}
-
-class DatasetRow extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    return this.props.dataset.id !== nextProps.dataset.id
-  }
-
-  render() {
-    const dataset = this.props.dataset
-    return (
-      <div className="panel panel-default">
-        <RowHeight className="panel-heading">
-          <div className="header clearfix">
-            <Link to={genLinkTarget(dataset, this.props.publicDashboard)}>
-              <h4 className="dataset-name">{dataset.draft.description.Name}</h4>
-              <Uploaded uploader={dataset.uploader} created={dataset.created} />
-            </Link>
-            <div className="metric-container">
-              <Metrics dataset={dataset} fromDashboard />
-            </div>
-            <div className="status-container">
-              <Statuses dataset={dataset} minimal={true} />
-            </div>
-          </div>
-          <Summary summary={dataset.draft.summary} minimal={true} />
-        </RowHeight>
-      </div>
-    )
-  }
-}
-
-DatasetRow.propTypes = {
-  dataset: PropTypes.object,
-  publicDashboard: PropTypes.bool,
-}
-
-export default DatasetRow

package/src/scripts/datalad/dashboard/datasets/dataset-sorter.jsx

@@ -1,148 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Capitalized from '../../../styles/capitalized.jsx'
-import { Media } from '../../../styles/media'
-
-// DatasetSort GraphQL fields
-const sortFields = ['created', 'name', 'stars', 'downloads', 'subscriptions']
-
-// Sort fields and variables for mobile dropdown
-const ASC = 'ascending'
-const DESC = 'descending'
-
-const sortFieldsMobile = [
-  {
-    field: 'created',
-    order: ASC,
-  },
-  {
-    field: 'name',
-    order: ASC,
-  },
-  {
-    field: 'stars',
-    order: ASC,
-  },
-  {
-    field: 'downloads',
-    order: ASC,
-  },
-  {
-    field: 'subscriptions',
-    order: ASC,
-  },
-  {
-    field: 'created',
-    order: DESC,
-  },
-  {
-    field: 'name',
-    order: DESC,
-  },
-  {
-    field: 'stars',
-    order: DESC,
-  },
-  {
-    field: 'downloads',
-    order: DESC,
-  },
-  {
-    field: 'subscriptions',
-    order: DESC,
-  },
-]
-
-export const SortField = ({ field, queryVariables, refetch }) => {
-  // Disable sorts that are not in the original query
-  if (!queryVariables.hasOwnProperty('orderBy')) return null
-  const fieldValue =
-    field in queryVariables.orderBy && queryVariables.orderBy[field]
-  let icon
-  if (fieldValue) {
-    if (fieldValue === 'ascending') {
-      icon = <i className="fa fa-sort-asc" />
-    } else {
-      icon = <i className="fa fa-sort-desc" />
-    }
-  }
-  const sortBy = () => {
-    const newQueryVariables = { ...queryVariables }
-    // Clear existing sorts
-    newQueryVariables.orderBy = {}
-    // Apply (or toggle) based on previous sort
-    newQueryVariables.orderBy[field] =
-      queryVariables.orderBy[field] === 'descending'
-        ? 'ascending'
-        : 'descending'
-    refetch(newQueryVariables)
-  }
-  return (
-    <a
-      key={field}
-      className={fieldValue ? 'btn-sort name active' : 'btn-sort name'}
-      onClick={sortBy}>
-      <Capitalized>{field}</Capitalized> {icon}
-    </a>
-  )
-}
-
-SortField.propTypes = {
-  field: PropTypes.string,
-  queryVariables: PropTypes.object,
-  refetch: PropTypes.func,
-}
-
-const DatasetSorter = ({ queryVariables, refetch }) => {
-  const onChange = event => {
-    const newQueryVariables = { ...queryVariables }
-    // Clear existing sorts
-    newQueryVariables.orderBy = {}
-    // grab sort order (custom data attribute) from selected option
-    newQueryVariables.orderBy[event.target.value] = event.target[
-      event.target.selectedIndex
-    ].getAttribute('data-order')
-    refetch(newQueryVariables)
-  }
-  return (
-    <>
-      <Media greaterThanOrEqual="medium">
-        <div>
-          {sortFields.map(field => (
-            <SortField
-              field={field}
-              queryVariables={queryVariables}
-              refetch={refetch}
-              key={field}
-            />
-          ))}
-        </div>
-      </Media>
-      <Media at="small">
-        <select
-          defaultValue={'DEFAULT'}
-          className="mobile-dropdown"
-          onChange={onChange}>
-          <option value="DEFAULT" disabled>
-            Sort by...
-          </option>
-          {sortFieldsMobile.map((sortField, i) => (
-            <option
-              value={sortField.field}
-              data-order={sortField.order}
-              key={`${i}:${sortField.field}`}>
-              {`${sortField.field} (${sortField.order})`}
-            </option>
-          ))}
-        </select>
-      </Media>
-    </>
-  )
-}
-
-DatasetSorter.propTypes = {
-  queryVariables: PropTypes.object,
-  refetch: PropTypes.func,
-}
-
-export default DatasetSorter

package/src/scripts/datalad/dashboard/datasets/dataset-statuses.jsx

@@ -1,44 +0,0 @@
-// This version of Statuses works with the native GraphQL data structure
-import React from 'react'
-import PropTypes from 'prop-types'
-import Status from '../../../common/partials/status.jsx'
-import withProfile from '../../../authentication/withProfile.jsx'
-
-class Statuses extends React.PureComponent {
-  // life cycle events --------------------------------------------------
-
-  render() {
-    const uploading = false
-    const dataset = this.props.dataset
-    const minimal = this.props.minimal
-    const profile = this.props.profile
-    const uploaderSubscribed = dataset.followers.some(
-      follower => follower.userId === dataset.uploader.id,
-    )
-    const invalid =
-      !dataset.draft.issues ||
-      dataset.draft.issues.some(issue => issue.severity === 'error')
-    const shared = !dataset.public && dataset.uploader.id !== profile.sub
-    return (
-      <span className="status-wrap">
-        <Status type="public" minimal={minimal} display={dataset.public} />
-        <Status type="shared" minimal={minimal} display={shared} />
-        <Status type="inProgress" minimal={minimal} display={uploading} />
-        <Status type="invalid" minimal={minimal} display={invalid && minimal} />
-        <Status type="monitored" display={uploaderSubscribed && !minimal} />
-      </span>
-    )
-  }
-}
-
-Statuses.defaultProps = {
-  minimal: false,
-}
-
-Statuses.propTypes = {
-  dataset: PropTypes.object,
-  profile: PropTypes.object,
-  minimal: PropTypes.bool,
-}
-
-export default withProfile(Statuses)