@openneuro/app 4.1.0 → 4.2.1

package/src/scripts/uploader/uploader.jsx

@@ -1,388 +0,0 @@
-import { apm } from '../apm'
-import { toast } from 'react-toastify'
-import ToastContent from '../common/partials/toast-content.jsx'
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ApolloConsumer } from '@apollo/client'
-import * as gtag from '../utils/gtag'
-import UploaderContext from './uploader-context.js'
-import FileSelect from '../common/forms/file-select'
-import { locationFactory } from './uploader-location.js'
-import * as mutation from './upload-mutation.js'
-import { datasets, uploads } from '@openneuro/client'
-import { withRouter } from 'react-router-dom'
-import { uploadFiles } from './file-upload.js'
-import { UploadProgress } from './upload-progress-class'
-import { addPathToFiles } from './add-path-to-files.js'
-
-/**
- * Stateful uploader workflow and status
- *
- * Usable from anywhere, so this button sets up a modal and
- * virtual router to navigate within it.
- */
-export class UploadClient extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      // An upload is processing
-      uploading: false,
-      // Which step in the modal
-      location: locationFactory('/hidden'),
-      // List of files being uploaded
-      files: [],
-      // Files selected, regardless of if they will be uploaded
-      selectedFiles: {},
-      // Relabel dataset during upload
-      name: '',
-      // Dataset description - null if it doesn't exist
-      description: null,
-      progress: 0,
-      // Resume an existing dataset
-      resume: null,
-      // Control if the top level path is trimmed out (good for initial uploads, bad for adding to dataset)
-      stripRelativePath: true,
-      // Allow context consumers to change routes
-      setLocation: this.setLocation,
-      // Set a dataset to resume upload for
-      resumeDataset: this.resumeDataset,
-      // Get files from the browser
-      selectFiles: this.selectFiles,
-      // Capture metadata from form
-      captureMetadata: this.captureMetadata,
-      // Start an upload
-      upload: this.upload,
-      // Upload XHR request
-      xhr: null,
-      // Id of the uploaded dataset
-      datasetId: null,
-      // Cancel current upload
-      cancel: this.cancel,
-      // dataset metadata
-      metadata: {},
-      // Track currently uploading files
-      uploadingFiles: new Set(),
-      // Track any failed files
-      failedFiles: new Set(),
-      // Abort controller for abandoning the upload
-      abortController: null,
-    }
-  }
-
-  /**
-   * Change to a new step in upload setup
-   *
-   * @param {string} path Virtual router path for upload modal
-   */
-  setLocation = path => {
-    gtag.pageview(path)
-    this.setState({ location: locationFactory(path) })
-  }
-
-  /**
-   * Specify a dataset to resume upload for
-   * @param {string} datasetId
-   * @param {string} [path] Optional path to prefix all files with
-   * @param {boolean} [stripRelativePath] Don't strip the first path (useful for adding directories)
-   */
-  resumeDataset = (datasetId, path, stripRelativePath) => {
-    return ({ files }) => {
-      this.props.client
-        .query({
-          query: datasets.getDraftFiles,
-          variables: { id: datasetId },
-        })
-        .then(
-          ({
-            data: {
-              dataset: { draft, metadata },
-            },
-          }) => {
-            const affirmedDefaced = metadata?.affirmedDefaced || null
-            const affirmedConsent = metadata?.affirmedConsent || null
-            // Create a new array of files to upload
-            const filesToUpload = []
-            // Create hashmap of filename -> size
-            const existingFiles = draft.files.reduce((existingFiles, f) => {
-              existingFiles[f.filename] = f.size
-              return existingFiles
-            }, {})
-            for (const newFile of files) {
-              const newFilePath = newFile.webkitRelativePath.split(/\/(.*)/)[1]
-              // Skip any existing files
-              if (existingFiles[newFilePath] !== newFile.size) {
-                filesToUpload.push(newFile)
-              }
-            }
-            this.setState({
-              datasetId,
-              resume: true,
-              stripRelativePath,
-              files: addPathToFiles(filesToUpload, path),
-              selectedFiles: files,
-            })
-            this.upload({ affirmedDefaced, affirmedConsent })
-          },
-        )
-    }
-  }
-
-  /**
-   * Select the files for upload
-   * @param {object} event onChange event from multi file select
-   */
-  selectFiles = ({ files }) => {
-    // First get the name from dataset_description.json
-    return new Promise(resolve => {
-      const descriptionFile = [...files].find(
-        f => f.name === 'dataset_description.json',
-      )
-      if (!descriptionFile) {
-        // Use directory name if no dataset_description
-        resolve(files[0].webkitRelativePath.split('/')[0])
-      }
-      const descriptionReader = new FileReader()
-      descriptionReader.onload = event => {
-        try {
-          // Read Name field from dataset_description.json
-          const description = JSON.parse(event.target.result.toString())
-          // Save description to state for writing later
-          this.setState({ description })
-          resolve(description.Name)
-        } catch (e) {
-          // Fallback to directory name if JSON parse failed
-          resolve(files[0].webkitRelativePath.split('/')[0])
-        }
-      }
-      descriptionReader.readAsText(descriptionFile)
-    }).then(name => {
-      if (files.length > 0) {
-        this.setState({
-          files,
-          selectedFiles: files,
-          name,
-        })
-        this.setLocation('/upload/issues')
-      } else {
-        throw new Error('No files selected')
-      }
-    })
-  }
-
-  captureMetadata = metadata => {
-    this.setState({
-      metadata,
-    })
-  }
-
-  uploadMetadata = () =>
-    mutation.submitMetadata(this.props.client)(
-      this.state.datasetId,
-      this.state.metadata,
-    )
-
-  upload = ({ affirmedDefaced, affirmedConsent }) => {
-    // Track the start of uploads
-    gtag.event({
-      category: 'Upload',
-      action: 'Started web upload',
-      label: this.state.datasetId,
-    })
-    this.setState({
-      uploading: true,
-      abortController: new AbortController(),
-    })
-    this.setLocation('/hidden')
-    if (this.state.resume && this.state.datasetId) {
-      // Just add files since this is an existing dataset
-      this._addFiles()
-    } else {
-      // Create dataset and then add files
-      mutation
-        .createDataset(this.props.client)({
-          affirmedDefaced,
-          affirmedConsent,
-        })
-        .then(datasetId => {
-          // Note chain to this._addFiles
-          this.setState({ datasetId }, () => {
-            this.uploadMetadata()
-            this._addFiles()
-          })
-        })
-        .catch(error => {
-          apm.captureError(error)
-          toast.error(
-            <ToastContent
-              title="Dataset creation failed"
-              body="Please check your connection"
-            />,
-            { autoClose: false },
-          )
-          this.setState({
-            error,
-            uploading: false,
-          })
-          this.setLocation('/hidden')
-        })
-    }
-  }
-
-  /**
-   * Check for CHANGES file and add if it does not exist
-   */
-  _includeChanges() {
-    const files = [...this.state.files]
-    // Determine if the files list has a CHANGES file already
-    const hasChanges = files.some(f => f.name === 'CHANGES')
-
-    // Do nothing if the file already exists
-    if (hasChanges) return files
-
-    // Construct the initial CHANGES file and add to the files array
-    const initialChangesFile = new Blob([], {
-      type: 'text/plain',
-    })
-    initialChangesFile.name = 'CHANGES'
-    initialChangesFile.webkitRelativePath = '/CHANGES'
-    files.push(initialChangesFile)
-    return files
-  }
-
-  /**
-   * Do the actual upload
-   */
-  async _addFiles() {
-    // Uploads the version of files with dataset_description formatted and Name updated
-    // Adds a CHANGES file if it is not present
-    const filesToUpload = this.state.resume
-      ? this.state.files
-      : this._includeChanges()
-
-    // Call prepare upload to find the bucket needed and endpoint
-    const {
-      data: {
-        prepareUpload: { id: uploadId, endpoint, token },
-      },
-    } = await mutation.prepareUpload(this.props.client)({
-      datasetId: this.state.datasetId,
-      uploadId: uploads.hashFileList(this.state.datasetId, filesToUpload),
-    })
-
-    try {
-      await uploadFiles({
-        uploadId,
-        datasetId: this.state.datasetId,
-        endpoint,
-        filesToUpload,
-        token,
-        uploadProgress: new UploadProgress(
-          this.uploadProgress,
-          filesToUpload.length,
-        ),
-        abortController: this.state.abortController,
-        stripRelativePath: this.state.stripRelativePath,
-      })
-      if (!this.state.abortController.signal.aborted) {
-        await mutation.finishUpload(this.props.client)(uploadId)
-        this.setState({ uploading: false })
-        this.uploadCompleteAction()
-      }
-    } catch (error) {
-      apm.captureError(error)
-      const toastId = toast.error(
-        <ToastContent
-          title="Dataset upload failed"
-          body="Please check your connection">
-          <FileSelect
-            onChange={event => {
-              toast.dismiss(toastId)
-              this.resumeDataset(this.state.datasetId)(event)
-            }}
-            resume
-          />
-        </ToastContent>,
-        { autoClose: false },
-      )
-      this.setState({
-        error,
-        uploading: false,
-      })
-      this.setLocation('/hidden')
-      if (this.state.xhr) {
-        try {
-          this.state.xhr.abort()
-        } catch (e) {
-          apm.captureError(e)
-        }
-      }
-    }
-  }
-
-  uploadCompleteAction = () => {
-    // Record upload finished successfully with Google Analytics
-    gtag.event({
-      category: 'Upload',
-      action: 'Finished web upload',
-      label: this.state.datasetId,
-    })
-    const datasetURL = `/datasets/${this.state.datasetId}`
-    if (this.state.location.pathname !== locationFactory('/hidden').pathname) {
-      this.props.history.push(datasetURL)
-      this.setLocation('/hidden')
-    } else {
-      toast.success(
-        <ToastContent
-          title="Upload complete"
-          body="Dataset successfully uploaded">
-          <a href={datasetURL}>Click here to browse your dataset.</a>
-        </ToastContent>,
-        { autoClose: false },
-      )
-    }
-  }
-
-  uploadProgress = state => {
-    this.setState(state)
-  }
-
-  cancel = () => {
-    this.state.abortController.abort()
-    this.setState({ uploading: false, progress: 0 })
-  }
-
-  render() {
-    return (
-      <UploaderContext.Provider value={this.state}>
-        {this.props.children}
-      </UploaderContext.Provider>
-    )
-  }
-}
-
-UploadClient.propTypes = {
-  client: PropTypes.object,
-  history: PropTypes.object,
-  children: PropTypes.element,
-}
-
-const UploadClientWithRouter = withRouter(UploadClient)
-
-const Uploader = ({ children }) => (
-  <ApolloConsumer>
-    {client => (
-      <div className="uploader">
-        <UploadClientWithRouter client={client}>
-          {children}
-        </UploadClientWithRouter>
-      </div>
-    )}
-  </ApolloConsumer>
-)
-
-Uploader.propTypes = {
-  children: PropTypes.element,
-}
-
-export default Uploader

package/src/scripts/user/__mocks__/user.store.js

@@ -1 +0,0 @@
-export default {}

package/src/scripts/user/api.jsx

@@ -1,132 +0,0 @@
-import React from 'react'
-import Spinner from '../common/partials/spinner.jsx'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
-import crn from '../utils/crn.js'
-import Helmet from 'react-helmet'
-import { pageTitle } from '../resources/strings.js'
-
-/**
- * Create API Key
- *
- * Given the current user, creates an api key
- * for use with the standalone CLI
- */
-const createAPIKey = () => {
-  return crn.createAPIKey().then(res => (res && res.body ? res.body.key : null))
-}
-
-class APIKeyGen extends React.Component {
-  constructor(props) {
-    super(props)
-    this.requestKey = this._requestKey.bind(this)
-    this.state = {
-      loading: false,
-      key: null,
-    }
-  }
-
-  _requestKey() {
-    this.setState({ loading: true })
-    createAPIKey()
-      .then(key => {
-        this.setState({ key, loading: false })
-      })
-      .catch(() => {
-        this.setState({ loading: false })
-      })
-  }
-
-  _requestButton() {
-    return (
-      <button
-        className="btn btn-lg btn-primary"
-        onClick={this.requestKey.bind(this)}>
-        GENERATE NEW API KEY
-      </button>
-    )
-  }
-
-  _loadingSpinner() {
-    if (this.state.loading) {
-      return <Spinner active={true} />
-    } else {
-      return null
-    }
-  }
-
-  _key() {
-    const content = (
-      <div className="api-key-div">
-        <div className="api-key">{this.state.key}</div>
-        <div className="copy-key">
-          <CopyToClipboard
-            text={this.state.key}
-            onCopy={this._onCopy.bind(this)}>
-            <span className="copy-key">
-              <i className="fa fa-link" aria-hidden="true" />{' '}
-              {this._copyNotification()}
-            </span>
-          </CopyToClipboard>
-        </div>
-      </div>
-    )
-    if (this.state.key) {
-      return content
-    } else {
-      return null
-    }
-  }
-  _copyNotification() {
-    const copyClass = this.state.linkCopied
-      ? 'copy-notification-active copy-notification-copied'
-      : 'copy-notification-active'
-    const copyText = this.state.linkCopied ? 'Copied!' : 'Copy key to clipboard'
-    return (
-      <span>
-        <span className={copyClass}>{copyText}</span>
-      </span>
-    )
-  }
-
-  _onCopy() {
-    this.setState({ linkCopied: true })
-    setTimeout(() => {
-      this.setState({ linkCopied: false })
-    }, 3000)
-  }
-
-  render() {
-    const helperText = this.state.key
-      ? 'Your API Key:'
-      : 'Click the button below to generate an API key'
-    return (
-      <>
-        <Helmet>
-          <title>Generate API key for openneuro-cli - {pageTitle}</title>
-        </Helmet>
-        <div className="container api">
-          <div className="panel">
-            <div className="panel-heading">CLI API Key Generator</div>
-            <div className="panel-body explanation">
-              Users that wish to use the CLI uploader will be required to
-              authenticate their requests with an API key. Please store your API
-              key in a safe place. If you lose your key, you can obtain a new
-              one on this page. Once a new key is obtained, the previous key
-              will become invalid.
-            </div>
-          </div>
-          <div className="panel">
-            <div className="panel-heading">{helperText}</div>
-            <div className="panel-body">
-              {this._loadingSpinner()}
-              {this._key()}
-              {this._requestButton()}
-            </div>
-          </div>
-        </div>
-      </>
-    )
-  }
-}
-
-export default APIKeyGen

package/src/scripts/user/avatar.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { generateGravatarUrl } from '../utils/user.js'
-
-class Avatar extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const profile = this.props.profile
-
-    if (!profile) {
-      return null
-    }
-    const imageUrl = generateGravatarUrl(profile)
-    let thumbnail
-    if (imageUrl) {
-      const username = profile && profile.name ? profile.name : null
-      thumbnail = (
-        <img src={imageUrl} alt={username} className="user-img-thumb" />
-      )
-    } else {
-      const firstLetter =
-        profile && profile.name ? profile.name.slice(0, 1) : null
-      thumbnail = (
-        <div className="user-generic-thumb">
-          <div className="user-generic-thumb-letter">{firstLetter}</div>
-        </div>
-      )
-    }
-    return thumbnail
-  }
-}
-
-Avatar.propTypes = {
-  profile: PropTypes.object,
-}
-
-export default Avatar

package/src/scripts/utils/crn.js

@@ -1,15 +0,0 @@
-import request from './request'
-import { config } from '../config'
-
-/**
- * CRN
- *
- * A library for interacting with the CRN server side
- * application.
- */
-export default {
-  // API Key ----------------------------------------------------------------------
-  createAPIKey() {
-    return request.post(config.api + 'keygen', {})
-  },
-}

package/src/scripts/utils/request.js

@@ -1,107 +0,0 @@
-import request from 'superagent'
-
-/*
- * Upload retries limit
- */
-const maxRetries = 3
-
-/**
- * Normalize Options
- *
- * Takes a request options object and
- * normalizes it so requests won't fail.
- */
-function normalizeOptions(options) {
-  options = options ? options : {}
-  if (!options.headers) {
-    options.headers = {}
-  }
-  if (!options.query) {
-    options.query = {}
-  }
-  if (!options.hasOwnProperty('auth')) {
-    options.auth = true
-  }
-  return options
-}
-
-/**
- * Handle Request
- *
- * A generic request handler used to intercept
- * requests before they request out. Ensures
- * access_token isn't expired sets it as the
- * Authorization header.
- *
- * Available options
- *   - headers: An object with keys set to the header name
- *   and values set to the corresponding header value.
- *   - query: An object with keys set to url query parameters
- *   and values set to the corresponding query values.
- *   - body: A http request body.
- *   - auth: A boolean determining whether the access token
- *   should be supplied with the request.
- *   - snapshot: A boolean that will add a 'snapshots' url
- *   param to scitran requests.
- */
-function handleRequest(url, options, callback) {
-  // normalize options to play nice with superagent requests
-  options = normalizeOptions(options)
-
-  return callback(url, options)
-}
-
-/**
- * Request
- *
- * A wrapper for the superagent request library.
- * Provides a place for global request settings
- * and response handling.
- */
-const Request = {
-  get(url, options) {
-    return handleRequest(url, options, (url, options) => {
-      return request.get(url).set(options.headers).query(options.query)
-    })
-  },
-
-  post(url, options) {
-    return handleRequest(url, options, (url, options) => {
-      return request
-        .post(url)
-        .set(options.headers)
-        .query(options.query)
-        .send(options.body)
-    })
-  },
-
-  put(url, options) {
-    return handleRequest(url, options, (url, options) => {
-      return request
-        .put(url)
-        .set(options.headers)
-        .query(options.query)
-        .send(options.body)
-    })
-  },
-
-  del(url, options) {
-    return handleRequest(url, options, (url, options) => {
-      return request.del(url).set(options.headers).query(options.query)
-    })
-  },
-
-  upload(url, options) {
-    return handleRequest(url, options, (url, options) => {
-      return request
-        .post(url)
-        .query(options.query)
-        .set(options.headers)
-        .field('tags', options.fields.tags)
-        .attach('file', options.fields.file, options.fields.name)
-        .retry(maxRetries)
-    })
-  },
-}
-
-export default Request

package/src/scripts/utils/user.js

@@ -1,18 +0,0 @@
-import md5 from 'md5'
-
-/**
- * Generate Gravatar Url
- *
- * Given a user profile, generate a gravatar identicon url
- * to use as source for an image
- */
-export function generateGravatarUrl(userProfile) {
-  const email = userProfile.email
-  if (email) {
-    const hash = md5(email)
-    const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon`
-    return gravatarUrl
-  } else {
-    return null
-  }
-}