@openneuro/app 4.1.2 → 4.2.3

package/src/scripts/datalad/fragments/dataset-tools.jsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useHistory, useLocation } from 'react-router-dom'
-import { useCookies } from 'react-cookie'
-import snapshotVersion from '../snapshotVersion.js'
-import WarnButton from '../../common/forms/warn-button.jsx'
-import FollowDataset from '../mutations/follow.jsx'
-import StarDataset from '../mutations/star.jsx'
-import ShareDatasetLink from '../fragments/share-dataset-button.jsx'
-import DatasetMetadata from './metadata-tool.jsx'
-import LoggedIn from '../../authentication/logged-in.jsx'
-import DeletePage from '../dataset/delete-page'
-import AdminUser from '../../authentication/admin-user.jsx'
-import {
-  getProfile,
-  hasEditPermissions,
-} from '../../refactor_2021/authentication/profile.js'
-import {
-  Overlay,
-  ModalContainer,
-  ExitButton,
-} from '../../styles/support-modal.jsx'
-import { Media } from '../../styles/media'
-
-/**
- * Immediate redirect to a dataset or snapshot route
- * @param {object} history react-router-dom history
- * @param {*} rootPath base path for relative redirects
- * @param {*} path target path for redirect
- */
-const toolRedirect = (history, rootPath, path) => {
-  history.push(`${rootPath}/${path}`)
-}
-/**
- * Toolbar parent component
- *
- * Dataset is the API object for the context (dataset or snapshot)
- */
-const DatasetTools = ({ dataset }) => {
-  const history = useHistory()
-  const location = useLocation()
-  const snapshot = snapshotVersion(location)
-  const rootPath = snapshot
-    ? `/datasets/${dataset.id}/versions/${snapshot}`
-    : `/datasets/${dataset.id}`
-  // TODO - disable if you lack write access to the draft
-  const edit = snapshot ? false : true
-  const [showDeleteModal, setShowDeleteModal] = React.useState(false)
-  const [cookies] = useCookies()
-  const user = getProfile(cookies)
-  const hasEdit =
-    (user && user.admin) ||
-    hasEditPermissions(dataset.permissions, user && user.sub)
-  const hasSnapshot = !!dataset.snapshots.length
-
-  return (
-    <>
-      {showDeleteModal && (
-        <Overlay className="delete-modal">
-          <ModalContainer>
-            <ExitButton onClick={() => setShowDeleteModal(false)}>
-              &times;
-            </ExitButton>
-            <DeletePage
-              dataset={dataset}
-              returnToDataset={() => setShowDeleteModal(false)}
-            />
-          </ModalContainer>
-        </Overlay>
-      )}
-      <div className="col-xs-12 dataset-tools-wrap">
-        <div className="tools clearfix">
-          <LoggedIn>
-            <div role="presentation" className="tool">
-              {!dataset.public && edit && hasSnapshot && (
-                <WarnButton
-                  tooltip="Publish Dataset"
-                  icon="fa-globe icon-plus"
-                  warn={false}
-                  action={cb => {
-                    toolRedirect(history, rootPath, 'publish')
-                    cb()
-                  }}
-                />
-              )}
-            </div>
-            {hasEdit && (
-              <div role="presentation" className="tool">
-                <span>
-                  <button
-                    className="btn-warn-component warning"
-                    onClick={() => setShowDeleteModal(true)}>
-                    <i className="fa fa-trash" />
-                  </button>
-                </span>
-              </div>
-            )}
-            <div role="presentation" className="tool">
-              {edit && (
-                <WarnButton
-                  tooltip="Manage Dataset Permissions"
-                  icon="fa-user icon-plus"
-                  warn={false}
-                  action={cb => {
-                    toolRedirect(history, rootPath, 'share')
-                    cb()
-                  }}
-                />
-              )}
-            </div>
-            <div role="presentation" className="tool">
-              {edit && (
-                <Media greaterThanOrEqual="medium">
-                  <WarnButton
-                    tooltip="Create Snapshot"
-                    icon="fa-camera-retro icon-plus"
-                    warn={false}
-                    action={cb => {
-                      toolRedirect(history, rootPath, 'snapshot')
-                      cb()
-                    }}
-                  />
-                </Media>
-              )}
-            </div>
-            <div role="presentation" className="tool">
-              <FollowDataset
-                datasetId={dataset.id}
-                following={dataset.following}
-              />
-            </div>
-            <div role="presentation" className="tool">
-              <StarDataset datasetId={dataset.id} starred={dataset.starred} />
-            </div>
-            <div role="presentation" className="tool">
-              {edit && (
-                <Media greaterThanOrEqual="medium">
-                  <AdminUser>
-                    <WarnButton
-                      tooltip="Admin Datalad Tools"
-                      icon="fa-magic"
-                      warn={false}
-                      action={cb => {
-                        toolRedirect(history, rootPath, 'admin-datalad')
-                        cb()
-                      }}
-                    />
-                  </AdminUser>
-                </Media>
-              )}
-            </div>
-            <div role="presentation" className="tool">
-              {edit && (
-                <Media greaterThanOrEqual="medium">
-                  <AdminUser>
-                    <WarnButton
-                      tooltip="Admin Remote Export Tools"
-                      icon="fa-cloud-upload"
-                      warn={false}
-                      action={cb => {
-                        toolRedirect(history, rootPath, 'admin-exports')
-                        cb()
-                      }}
-                    />
-                  </AdminUser>
-                </Media>
-              )}
-            </div>
-            <Media at="small">
-              <div role="presentation" className="tool">
-                <ShareDatasetLink url={`https://openneuro.org${rootPath}`} />
-              </div>
-            </Media>
-          </LoggedIn>
-          <div role="presentation" className="tool">
-            <DatasetMetadata
-              datasetId={dataset.id}
-              metadata={dataset.metadata}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-DatasetTools.propTypes = {
-  dataset: PropTypes.object,
-  edit: PropTypes.bool,
-}
-export default DatasetTools

package/src/scripts/datalad/fragments/dataset-uploaded.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { formatDate } from '../../utils/date.js'
-import parseISO from 'date-fns/parseISO'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-
-const DatasetUploaded = ({ uploader, created, testDifference }) => {
-  const dateAdded = formatDate(created)
-  const difference = testDifference || formatDistanceToNow(parseISO(created))
-  return (
-    <h6>
-      {`uploaded by ${uploader.name} on ${dateAdded} - ${difference} ago`}
-    </h6>
-  )
-}
-
-DatasetUploaded.propTypes = {
-  uploader: PropTypes.object,
-  created: PropTypes.string,
-
-  // Ensures deterministic snapshot test
-  testDifference: PropTypes.string,
-}
-
-export default DatasetUploaded

package/src/scripts/datalad/fragments/edit-button.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import WarnButton from '../../common/forms/warn-button.jsx'
-import PropTypes from 'prop-types'
-
-/**
- * An edit button, calls action when clicked
- */
-const EditButton = ({ action }) => (
-  <WarnButton
-    message="Edit"
-    icon="fa-edit"
-    warn={false}
-    action={cb => {
-      action()
-      cb()
-    }}
-  />
-)
-
-EditButton.propTypes = {
-  action: PropTypes.func,
-}
-
-export default EditButton

package/src/scripts/datalad/fragments/edit-description-field.jsx

@@ -1,54 +0,0 @@
-import React, { useState } from 'react'
-import UpdateDescription from '../mutations/description.jsx'
-import CancelButton from './cancel-button.jsx'
-import EditButton from './edit-button.jsx'
-import { Media } from '../../styles/media'
-
-/**
- * This is a hopefully less confusing click-to-edit component
- *
- * Editing is standardized but display is handled by any child component
- */
-const EditDescriptionField = ({
-  datasetId,
-  description,
-  field,
-  children,
-  editMode,
-  rows = 1,
-}) => {
-  const [editing, setEditing] = useState(false)
-  const [value, setValue] = useState(description[field] || '')
-
-  if (editing) {
-    return (
-      <>
-        <textarea
-          rows={rows}
-          onChange={e => setValue(e.target.value)}
-          value={value}
-        />
-        <UpdateDescription
-          datasetId={datasetId}
-          field={field}
-          value={value}
-          done={() => setEditing(false)}
-        />
-        <CancelButton action={() => setEditing(false)} />
-      </>
-    )
-  } else {
-    return (
-      <>
-        {children}
-        {editMode && (
-          <Media greaterThanOrEqual="medium">
-            <EditButton action={() => setEditing(true)} />
-          </Media>
-        )}
-      </>
-    )
-  }
-}
-
-export default EditDescriptionField

package/src/scripts/datalad/fragments/edit-description-list.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react'
-import UpdateDescription from '../mutations/description.jsx'
-import CancelButton from './cancel-button.jsx'
-import EditButton from './edit-button.jsx'
-import EditList from './edit-list.jsx'
-import { Media } from '../../styles/media'
-
-const EditDescriptionList = ({
-  datasetId,
-  description,
-  field,
-  children,
-  editMode,
-}) => {
-  const [editing, setEditing] = useState(false)
-  const [rows, setRows] = useState(description[field] || [])
-
-  if (editing) {
-    return (
-      <>
-        <EditList
-          placeholder="Add new item"
-          elements={rows}
-          setElements={setRows}
-        />
-        <UpdateDescription
-          datasetId={datasetId}
-          field={field}
-          value={rows}
-          done={() => setEditing(false)}
-        />
-        <CancelButton action={() => setEditing(false)} />
-      </>
-    )
-  } else {
-    return (
-      <>
-        {children}
-        {editMode && (
-          <Media greaterThanOrEqual="medium">
-            <EditButton action={() => setEditing(true)} />
-          </Media>
-        )}
-      </>
-    )
-  }
-}
-
-export default EditDescriptionList

package/src/scripts/datalad/fragments/edit-list.jsx

@@ -1,82 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const EditListButton = styled.button`
-  min-width: 6em;
-`
-
-const EditListRow = styled.div`
-  margin-top: 6px;
-  margin-bottom: 6px;
-`
-
-/**
- * Generic add/remove strings from an Array list
- */
-const EditList = ({ placeholder, elements = [], setElements }) => {
-  const [newElement, updateNewElement] = useState('')
-
-  /**
-   * Remove one element from list
-   * @param {number} index Which entry to remove
-   */
-  const removeElement = index => () => {
-    // Avoid mutating elements array directly
-    const newElements = [...elements]
-    newElements.splice(index, 1)
-    setElements(newElements)
-  }
-
-  return (
-    <>
-      <div className="input-group">
-        <input
-          type="text"
-          className="form-control"
-          placeholder={placeholder}
-          value={newElement}
-          onChange={e => updateNewElement(e.target.value)}
-        />
-        <span className="input-group-btn">
-          <EditListButton
-            className="btn btn-default"
-            type="button"
-            onClick={() => {
-              setElements([...elements, newElement])
-              updateNewElement('')
-            }}>
-            Add
-          </EditListButton>
-        </span>
-      </div>
-      <div>
-        {elements.map((element, index) => (
-          <EditListRow key={index}>
-            <div className="input-group">
-              <span className="input-group-addon" style={{ width: '100%' }}>
-                {element}
-              </span>
-              <div className="input-group-btn">
-                <EditListButton
-                  className="btn btn-default"
-                  onClick={removeElement(index)}>
-                  <i className="fa fa-times" />
-                  Remove
-                </EditListButton>
-              </div>
-            </div>
-          </EditListRow>
-        ))}
-      </div>
-    </>
-  )
-}
-
-EditList.propTypes = {
-  placeholder: PropTypes.string,
-  elements: PropTypes.array,
-  setElements: PropTypes.func,
-}
-
-export default EditList

package/src/scripts/datalad/fragments/edit-readme.jsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react'
-import UpdateReadme from '../mutations/readme.jsx'
-import EditButton from './edit-button.jsx'
-import CancelButton from './cancel-button.jsx'
-import { Media } from '../../styles/media'
-
-/**
- * This extends EditDescriptionField with Markdown display and a custom mutation
- */
-const EditReadme = ({ datasetId, content, children, hasEdit }) => {
-  const [editing, setEditing] = useState(false)
-  const [value, setValue] = useState(content || '')
-
-  if (editing) {
-    return (
-      <>
-        <textarea
-          rows={12}
-          onChange={e => setValue(e.target.value)}
-          value={value}
-        />
-        <UpdateReadme
-          datasetId={datasetId}
-          value={value}
-          done={() => setEditing(false)}
-        />
-        <CancelButton action={() => setEditing(false)} />
-      </>
-    )
-  } else {
-    return (
-      <>
-        {children}
-        {hasEdit && (
-          <Media greaterThanOrEqual="medium">
-            <EditButton action={() => setEditing(true)} />
-          </Media>
-        )}
-      </>
-    )
-  }
-}
-
-export default EditReadme

package/src/scripts/datalad/fragments/incomplete-dataset.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Panel } from '../../components/panel'
-import { PanelGroup } from '../../components/panel-group'
-import UploadResume from '../../uploader/upload-resume.jsx'
-
-const IncompleteDataset = ({ datasetId }) => (
-  <div className="fade-in col-xs-12 validation">
-    <h3 className="metaheader">Incomplete Upload or Edit</h3>
-    <PanelGroup accordion className="validation-wrap">
-      <Panel className="status">
-        <p>An upload or edit may have been interrupted.</p>
-        <UploadResume datasetId={datasetId} />
-      </Panel>
-    </PanelGroup>
-  </div>
-)
-
-IncompleteDataset.propTypes = {
-  datasetId: PropTypes.string,
-}
-
-export default IncompleteDataset

package/src/scripts/datalad/fragments/metadata-tool.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useLocation, useHistory } from 'react-router-dom'
-import WarnButton from '../../common/forms/warn-button.jsx'
-
-const MetadataTool = ({ datasetId, metadata }) => {
-  const history = useHistory()
-  const location = useLocation()
-  const hasMetadata = metadata !== null
-  return (
-    <WarnButton
-      tooltip={hasMetadata ? 'Metadata' : 'Add Metadata'}
-      icon={hasMetadata ? 'fa-file-code-o' : 'fa-file-code-o icon-plus'}
-      warn={false}
-      action={cb => {
-        history.push({
-          pathname: `/datasets/${datasetId}/metadata`,
-          state: {
-            submitPath: location.pathname,
-          },
-        })
-        cb()
-      }}
-    />
-  )
-}
-
-MetadataTool.propTypes = {
-  metadata: PropTypes.object,
-  following: PropTypes.object,
-  datasetId: PropTypes.string,
-}
-
-export default MetadataTool

package/src/scripts/datalad/fragments/number-input.tsx

@@ -1,126 +0,0 @@
-import React, { useState, createRef } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const Container = styled.div({
-  position: 'relative',
-  width: '100%',
-  height: '4.5rem',
-  marginBottom: '0.5rem',
-  borderRadius: '5px',
-  border: '2px inset #eee',
-})
-const centerLabelStyles = {
-  top: '1rem',
-  fontSize: '1em',
-}
-const pushedUpLabelStyles = {
-  top: '0.4rem',
-  fontSize: '0.75em',
-}
-
-interface NumberInputLabelProps {
-  hasValue: boolean
-  hasFocus: boolean
-}
-
-const Label = styled.label<NumberInputLabelProps>(
-  {
-    position: 'absolute',
-    left: '1rem',
-    right: '1rem',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    color: '#999',
-    transition: 'top 100ms, font-size 100ms',
-    transitionTimingFunction: 'ease-out',
-    textAlign: 'left',
-  },
-  ({ hasValue, hasFocus }) => ({
-    ...(hasValue || hasFocus ? pushedUpLabelStyles : centerLabelStyles),
-    ':focus': pushedUpLabelStyles,
-  }),
-)
-const DisabledIcon = styled.i({
-  position: 'absolute',
-  top: '0.4rem',
-  right: '0.4rem',
-  color: '#5cb85c',
-})
-const Input = styled.input({
-  width: '100%',
-  height: '100%',
-  border: 'none',
-  padding: '1.5rem 0.8rem 0.3rem',
-  textAlign: 'left',
-})
-
-const NumberInput = ({
-  name,
-  label,
-  value,
-  min,
-  max,
-  disabled,
-  annotated,
-  required,
-  onChange,
-}): React.ReactElement => {
-  const [hasFocus, setHasFocus] = useState(false)
-
-  const input = createRef<HTMLInputElement>()
-
-  const focusInput = (): void => {
-    input.current.focus()
-    setHasFocus(true)
-  }
-
-  const removeFocus = (): void => {
-    setHasFocus(false)
-  }
-
-  const handleChange = (e): void => {
-    onChange(e.target.name, parseInt(e.target.value))
-  }
-
-  return (
-    <Container>
-      <Label
-        htmlFor={name}
-        hasValue={Boolean(value)}
-        hasFocus={hasFocus}
-        onClick={focusInput}>
-        {label}
-      </Label>
-      {annotated && <DisabledIcon className="fa fa-asterisk" />}
-      <Input
-        type="number"
-        ref={input}
-        name={name}
-        value={value}
-        min={min}
-        max={max}
-        disabled={disabled}
-        required={required}
-        onFocus={focusInput}
-        onBlur={removeFocus}
-        onChange={handleChange}
-      />
-    </Container>
-  )
-}
-
-NumberInput.propTypes = {
-  min: PropTypes.number,
-  max: PropTypes.number,
-  disabled: PropTypes.bool,
-  annotated: PropTypes.bool,
-  required: PropTypes.bool,
-  name: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onChange: PropTypes.func,
-}
-
-export default NumberInput

package/src/scripts/datalad/fragments/save-button.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import WarnButton from '../../common/forms/warn-button.jsx'
-
-/**
- * A save button, calls action when clicked
- */
-const SaveButton = ({ action }) => (
-  <WarnButton
-    message="Save"
-    icon="fa-save"
-    warn={false}
-    action={async cb => {
-      await action()
-      cb()
-    }}
-  />
-)
-
-SaveButton.propTypes = {
-  action: PropTypes.func,
-}
-
-export default SaveButton