@openneuro/app 4.2.4 → 4.3.0-alpha.1

package/src/scripts/refactor_2021/dataset/mutations/__tests__/description.spec.jsx

@@ -1,47 +1,60 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
 import UpdateDescription, {
   mergeFieldValue,
   UPDATE_DESCRIPTION,
   UPDATE_DESCRIPTION_LIST,
 } from '../description.jsx'
 
+const mockMutation = jest.fn()
+jest.mock('@apollo/client/react/components', () => ({
+  ...jest.requireActual('@apollo/client/react/components'),
+  Mutation: props => {
+    mockMutation(props)
+    return <>Mutation mock</>
+  },
+}))
+
 describe('UpdateDescription mutation', () => {
   it('renders with common props', () => {
-    const wrapper = shallow(
+    const { asFragment } = render(
       <UpdateDescription
         datasetId="ds001"
         field="Name"
         value="New Name"
         done={jest.fn()}
       />,
+      { wrapper: MockedProvider },
     )
-    expect(wrapper).toMatchSnapshot()
+    expect(asFragment()).toMatchSnapshot()
   })
   it('uses the scalar mutation for scalar values', () => {
-    const wrapper = shallow(
+    render(
       <UpdateDescription
         datasetId="ds001"
         field="Name"
         value="New Name"
         done={jest.fn()}
       />,
+      { wrapper: MockedProvider },
     )
-    expect(wrapper.find('Mutation').props().mutation).toEqual(
-      UPDATE_DESCRIPTION,
+    expect(mockMutation).toHaveBeenCalledWith(
+      expect.objectContaining({ mutation: UPDATE_DESCRIPTION }),
     )
   })
   it('uses the list mutation for array values', () => {
-    const wrapper = shallow(
+    render(
       <UpdateDescription
         datasetId="ds001"
         field="Authors"
         value={['John Doe', 'Jane Doe']}
         done={jest.fn()}
       />,
+      { wrapper: MockedProvider },
     )
-    expect(wrapper.find('Mutation').props().mutation).toEqual(
-      UPDATE_DESCRIPTION_LIST,
+    expect(mockMutation).toHaveBeenCalledWith(
+      expect.objectContaining({ mutation: UPDATE_DESCRIPTION_LIST }),
     )
   })
   describe('mergeFieldValue()', () => {

package/src/scripts/refactor_2021/dataset/mutations/deprecate-version.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react'
+import { gql, useMutation } from '@apollo/client'
+import { Button } from '@openneuro/components/button'
+import { useHistory } from 'react-router-dom'
+
+export const DEPRECATE_VERSION = gql`
+  mutation deprecateSnapshot($datasetId: ID!, $tag: String!, $reason: String!) {
+    deprecateSnapshot(datasetId: $datasetId, tag: $tag, reason: $reason) {
+      id
+      deprecated {
+        reason
+      }
+    }
+  }
+`
+
+interface DeprecateVersionProps {
+  datasetId: string
+  tag: string
+  reason: string
+}
+
+export const DeprecateVersion: FC<DeprecateVersionProps> = ({
+  datasetId,
+  tag,
+  reason,
+}) => {
+  const history = useHistory()
+  const [DeprecateVersionMutation] = useMutation(DEPRECATE_VERSION)
+
+  return (
+    <Button
+      className="btn-modal-action"
+      primary={true}
+      label="Deprecate Version"
+      size="small"
+      onClick={() =>
+        DeprecateVersionMutation({
+          variables: { datasetId, tag, reason },
+        }).then(() => {
+          history.push(`/datasets/${datasetId}/versions/${tag}`)
+        })
+      }
+    />
+  )
+}

package/src/scripts/refactor_2021/dataset/mutations/description.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
 import { SaveButton } from '../fragments/save-button'
-import { DRAFT_FRAGMENT } from '../queries/dataset-query-fragments.js'
+import { DRAFT_FRAGMENT } from '../../../datalad/dataset/dataset-query-fragments'
 import { datasetCacheId } from './cache-id.js'
 
 export const UPDATE_DESCRIPTION = gql`

package/src/scripts/refactor_2021/dataset/mutations/readme.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
 import { SaveButton } from '../fragments/save-button'
-import { DRAFT_FRAGMENT } from '../queries/dataset-query-fragments.js'
+import { DRAFT_FRAGMENT } from '../../../datalad/dataset/dataset-query-fragments'
 import { datasetCacheId } from './cache-id.js'
 
 const UPDATE_README = gql`

package/src/scripts/refactor_2021/dataset/mutations/submit-metadata.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { gql } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
-import { DATASET_METADATA } from '../dataset-query-fragments.js'
+import { DATASET_METADATA } from '../../../datalad/dataset/dataset-query-fragments'
 import { datasetCacheId } from './cache-id.js'
 import { Button } from '@openneuro/components/button'
 

package/src/scripts/refactor_2021/dataset/mutations/undo-deprecate-version.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react'
+import { gql, useMutation } from '@apollo/client'
+import { Button } from '@openneuro/components/button'
+import { Tooltip } from '@openneuro/components/tooltip'
+
+const UNDO_DEPRECATE_VERSION = gql`
+  mutation undoDeprecateSnapshot($datasetId: ID!, $tag: String!) {
+    undoDeprecateSnapshot(datasetId: $datasetId, tag: $tag) {
+      id
+      deprecated {
+        reason
+      }
+    }
+  }
+`
+
+interface UndoDeprecateVersionProps {
+  datasetId: string
+  tag: string
+}
+
+export const UndoDeprecateVersion: FC<UndoDeprecateVersionProps> = ({
+  datasetId,
+  tag,
+}) => {
+  const [UndoDeprecateVersion] = useMutation(UNDO_DEPRECATE_VERSION)
+
+  return (
+    <Tooltip tooltip="Undo Deprecation" flow="right">
+      <Button
+        icon="fa fa-undo"
+        iconOnly
+        label="Undo"
+        size="xsmall"
+        onClick={() =>
+          UndoDeprecateVersion({
+            variables: { datasetId, tag },
+          })
+        }
+      />
+    </Tooltip>
+  )
+}

package/src/scripts/refactor_2021/dataset/mutations/update-file.jsx

@@ -1,37 +1,33 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import UploaderContext from '../../uploader/uploader-context.js'
-import { Tooltip } from '@openneuro/components/tooltip'
 
 const UpdateFile = ({
   datasetId,
   directory = false,
   multiple = false,
   path = null,
-  tooltip = '',
   children,
 }) => {
   return (
     <UploaderContext.Consumer>
       {uploader => (
         <div className="edit-file">
-          <Tooltip tooltip={tooltip}>
-            <input
-              type="file"
-              className="update-file"
-              onChange={e => {
-                e.preventDefault()
-                uploader.resumeDataset(
-                  datasetId,
-                  path,
-                  false,
-                )({ files: e.target.files })
-              }}
-              webkitdirectory={directory && 'true'}
-              multiple={multiple && true}
-            />
-            {children}
-          </Tooltip>
+          <input
+            type="file"
+            className="update-file"
+            onChange={e => {
+              e.preventDefault()
+              uploader.resumeDataset(
+                datasetId,
+                path,
+                false,
+              )({ files: e.target.files })
+            }}
+            webkitdirectory={directory && 'true'}
+            multiple={multiple && true}
+          />
+          {children}
         </div>
       )}
     </UploaderContext.Consumer>

package/src/scripts/refactor_2021/dataset/routes/__tests__/__snapshots__/publish.spec.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Publish dataset route renders with common props 1`] = `[Function]`;

package/src/scripts/refactor_2021/dataset/routes/__tests__/publish.spec.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import Publish from '../publish.jsx'
+
+describe('Publish dataset route', () => {
+  it('renders with common props', () => {
+    const { asFragment } = render(<Publish datasetId="ds00001" />, {
+      wrapper: MemoryRouter,
+    })
+    expect(asFragment).toMatchSnapshot()
+  })
+})

package/src/scripts/refactor_2021/dataset/routes/add-metadata.jsx

@@ -112,7 +112,6 @@ const AddMetadata = ({ dataset }) => {
     const errors = runValidations(newValues)
     if (hasChanged(errors, validationErrors)) setValidationErrors(errors)
   }
-  // @ts-expect-error Weak type definition for state
   const submitPath = location.state && location.state.submitPath
   const user = getProfile(cookies)
   const hasEdit =

package/src/scripts/refactor_2021/dataset/routes/deprecate-snapshot-page.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Link, useRouteMatch } from 'react-router-dom'
+import { DeprecateVersion } from '../mutations/deprecate-version'
+import { Input } from '@openneuro/components/input'
+import LoggedIn from '../../authentication/logged-in.jsx'
+
+interface DeprecateSnapshotRouteParams {
+  datasetId: string
+  snapshotTag: string
+}
+
+export const DeprecateSnapshotPage = (): React.ReactElement => {
+  const {
+    params: { datasetId, snapshotTag },
+  } = useRouteMatch<DeprecateSnapshotRouteParams>()
+  const [reason, setReason] = useState('')
+
+  return (
+    <div className="container">
+      <h2>Deprecate Version</h2>
+      <p>
+        {`Deprecate ${datasetId} version ${snapshotTag} to let other users know about an issue with this version. The reason provided will be displayed for users visiting the version.`}
+      </p>
+      <Input
+        placeholder="Explanation for deprecation"
+        type="text"
+        name="front-page-search"
+        labelStyle="default"
+        setValue={setReason}
+      />
+      <hr />
+      <div className="dataset-form-controls">
+        <LoggedIn>
+          <DeprecateVersion
+            datasetId={datasetId}
+            tag={snapshotTag}
+            reason={reason}
+          />
+        </LoggedIn>
+        <Link className="return-link" to={`/datasets/${datasetId}`}>
+          Return to Dataset
+        </Link>
+      </div>
+    </div>
+  )
+}

package/src/scripts/refactor_2021/dataset/snapshot-container.tsx

@@ -12,6 +12,7 @@ import Validation from '../validation/validation.jsx'
 import { config } from '../../config'
 import Comments from './comments/comments.jsx'
 import DatasetCitation from './fragments/dataset-citation.jsx'
+import { DatasetAlertVersion } from './fragments/dataset-alert-version'
 
 import {
   ModalitiesMetaDataBlock,
@@ -31,16 +32,16 @@ import { Loading } from '@openneuro/components/loading'
 import {
   getUnexpiredProfile,
   hasEditPermissions,
+  hasDatasetAdminPermissions,
 } from '../authentication/profile'
 import { useCookies } from 'react-cookie'
-import { Modal } from '@openneuro/components/modal'
 
 import { ReadMore } from '@openneuro/components/read-more'
 
 import { FollowDataset } from './mutations/follow'
 import { StarDataset } from './mutations/star'
 
-import { SNAPSHOT_FIELDS } from './queries/dataset-query-fragments.js'
+import { SNAPSHOT_FIELDS } from '../../datalad/dataset/dataset-query-fragments.js'
 import { DOILink } from './fragments/doi-link'
 
 const formatDate = dateObject =>
@@ -67,8 +68,6 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
   const activeDataset = snapshotVersion(location) || 'draft'
 
   const [selectedVersion, setSelectedVersion] = React.useState(activeDataset)
-  const [deprecatedmodalIsOpen, setDeprecatedModalIsOpen] =
-    React.useState(false)
 
   const summary = snapshot.summary
   const description = snapshot.description
@@ -81,18 +80,15 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
   const dateAddedDifference = formatDistanceToNow(parseISO(dataset.created))
   const dateModified = formatDate(snapshot.created)
   const dateUpdatedDifference = formatDistanceToNow(parseISO(snapshot.created))
-  const rootPath = `/datasets/${datasetId}/versions/${activeDataset}`
 
-  //TODO deprecated needs to be added to the dataset snapshot obj and an admin needs to be able to say a version is deprecated somehow.
   const [cookies] = useCookies()
   const profile = getUnexpiredProfile(cookies)
   const isAdmin = profile?.admin
   const hasEdit =
     hasEditPermissions(dataset.permissions, profile?.sub) || isAdmin
-  const hasDraftChanges =
-    dataset.snapshots.length === 0 ||
-    dataset.draft.head !==
-      dataset.snapshots[dataset.snapshots.length - 1].hexsha
+  const isDatasetAdmin =
+    hasDatasetAdminPermissions(dataset.permissions, profile?.sub) || isAdmin
+
   return (
     <>
       <DatasetPage
@@ -107,6 +103,18 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             )}
           </>
         )}
+        renderAlert={() => (
+          <>
+            {snapshot?.deprecated && (
+              <DatasetAlertVersion
+                datasetId={dataset.id}
+                tag={snapshot.tag}
+                reason={snapshot.deprecated.reason}
+                hasEdit={hasEdit}
+              />
+            )}
+          </>
+        )}
         renderHeaderMeta={() => (
           <>
             {summary && (
@@ -166,6 +174,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             datasetId={datasetId}
             isSnapshot={true}
             isAdmin={isAdmin}
+            isDatasetAdmin={isDatasetAdmin}
           />
         )}
         renderFiles={() => (
@@ -233,7 +242,6 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                     dateModified={dateModified}
                     selected={selectedVersion}
                     setSelected={setSelectedVersion}
-                    setDeprecatedModalIsOpen={setDeprecatedModalIsOpen}
                   />
                 </div>
               }
@@ -371,18 +379,6 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             />
           </>
         )}
-        renderDeprecatedModal={() => (
-          <Modal
-            isOpen={deprecatedmodalIsOpen}
-            toggle={() => setDeprecatedModalIsOpen(prevIsOpen => !prevIsOpen)}
-            closeText={'close'}
-            className="deprecated-modal">
-            <p>
-              You have selected a deprecated version. The author of the dataset
-              does not recommend this specific version.
-            </p>
-          </Modal>
-        )}
         renderComments={() => (
           <Comments
             datasetId={dataset.id}

package/src/scripts/refactor_2021/routes.tsx

@@ -17,15 +17,15 @@ import FourOFourPage from '../errors/404page'
 
 const Routes: React.VoidFunctionComponent = () => (
   <Switch>
-    <Route name="faq" exact path="/faq" component={FAQS} />
-    <Route name="front-page" exact path="/" component={FrontPageContainer} />
-    <Route name="api-key" exact path="/keygen" component={APIKey} />
-    <Route name="dataset" path="/datasets" component={Dataset} />
-    <Route name="search" path="/search" component={SearchRoutes} />
-    <Route name="admin" path="/admin" component={Admin} />
-    <Route name="error" path="/error" component={ErrorRoute} />
-    <Route name="pet-landing" path="/pet" component={PETRedirect} />
-    <Route name="citation" path="/cite" component={Citation} />
+    <Route exact path="/faq" component={FAQS} />
+    <Route exact path="/" component={FrontPageContainer} />
+    <Route exact path="/keygen" component={APIKey} />
+    <Route path="/datasets" component={Dataset} />
+    <Route path="/search" component={SearchRoutes} />
+    <Route path="/admin" component={Admin} />
+    <Route path="/error" component={ErrorRoute} />
+    <Route path="/pet" component={PETRedirect} />
+    <Route path="/cite" component={Citation} />
     <Redirect from="/public" to="/search" />
     <Redirect from="/saved" to="/search?bookmarks" />
     <Redirect from="/dashboard" to="/search?mydatasets" />

package/src/scripts/refactor_2021/uploader/uploader-setup-routes.jsx

@@ -14,30 +14,10 @@ const UploaderSetupRoutes = props => (
     <div className="tasks-col fade-in">
       <div id="upload-tabs" className="uploader">
         <Switch location={props.location}>
-          <Route
-            name="upload-select"
-            path="/upload"
-            exact
-            component={UploadSelect}
-          />
-          <Route
-            name="upload-issues"
-            path="/upload/issues"
-            exact
-            component={UploadIssues}
-          />
-          <Route
-            name="upload-metadata"
-            path="/upload/metadata"
-            exact
-            component={UploadMetadata}
-          />
-          <Route
-            name="upload-disclaimer"
-            path="/upload/disclaimer"
-            exact
-            component={UploadDisclaimer}
-          />
+          <Route path="/upload" exact component={UploadSelect} />
+          <Route path="/upload/issues" exact component={UploadIssues} />
+          <Route path="/upload/metadata" exact component={UploadMetadata} />
+          <Route path="/upload/disclaimer" exact component={UploadDisclaimer} />
         </Switch>
       </div>
     </div>

package/src/scripts/refactor_2021/uploader/uploader-status-routes.jsx

@@ -9,12 +9,7 @@ const UploaderStatusRoutes = props => (
     <div className="tasks-col fade-in">
       <div id="upload-tabs" className="uploader">
         <Switch location={props.location}>
-          <Route
-            name="upload-status"
-            path="/upload"
-            exact
-            component={UploadStatus}
-          />
+          <Route path="/upload" exact component={UploadStatus} />
         </Switch>
       </div>
     </div>

package/src/scripts/common/forms/__tests__/__snapshots__/input.spec.jsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`common/forms/Input renders successfully 1`] = `
-<div
-  className="form-group float-label-input "
->
-  <label />
-  <input
-    onChange={[Function]}
-    value="test-value"
-  />
-</div>
-`;

package/src/scripts/common/forms/__tests__/input.spec.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { shallow, mount } from 'enzyme'
-import Input from '../input'
-
-describe('common/forms/Input', () => {
-  it('renders successfully', () => {
-    const wrapper = shallow(<Input initialValue="test-value" />)
-    expect(wrapper).toMatchSnapshot()
-  })
-  it('resets when remounted', () => {
-    const initValue = 'one'
-    const newValue = 'two'
-    const component = mount(<Input initialValue={initValue} />)
-    const input = component.find('input')
-    expect(component.state('value')).toBe(initValue)
-
-    // User types in a value
-    input.simulate('change', { target: { value: newValue } })
-    expect(component.state('value')).toBe(newValue)
-
-    // Reset by parent component (cleared)
-    component.setProps({ value: initValue })
-    expect(component.state('value')).toBe(initValue)
-  })
-})

package/src/scripts/common/forms/input.jsx

@@ -1,98 +0,0 @@
-// dependencies -------------------------------------------------------
-
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-// component setup ----------------------------------------------------
-
-class Input extends React.Component {
-  // life cycle events --------------------------------------------------
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: props.initialValue ? props.initialValue : '',
-    }
-  }
-
-  static getDerivedStateFromProps(nextProps) {
-    // Will reset value when prop changes
-    if ('value' in nextProps) {
-      return { value: nextProps.value }
-    } else {
-      return null
-    }
-  }
-
-  render() {
-    const placeholder = this.props.placeholder
-    const type = this.props.type
-    const name = this.props.name
-    const value = this.state.value || this.props.value
-
-    return (
-      <div
-        className={`form-group float-label-input ${
-          this.props.containerClass || ''
-        }`}>
-        {value && value.length > 0 ? <label>{placeholder}</label> : null}
-        {this._input(type, name, placeholder, value)}
-      </div>
-    )
-  }
-
-  // custom methods -----------------------------------------------------
-
-  _input(type, name, placeholder, value) {
-    if (type === 'textarea') {
-      return (
-        <textarea
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={this._handleChange.bind(this)}
-        />
-      )
-    } else {
-      return (
-        <input
-          type={type}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={this._handleChange.bind(this)}
-          disabled={this.props.disabled}
-        />
-      )
-    }
-  }
-
-  _handleChange(event) {
-    this.setState({ value: event.target.value })
-
-    if (this.props.onChange) {
-      this.props.onChange(event)
-    }
-  }
-
-  _toggleCheckbox(event) {
-    this.setState({ value: event.target.checked })
-    if (this.props.onChange) {
-      this.props.onChange(event)
-    }
-  }
-}
-
-Input.propTypes = {
-  initialValue: PropTypes.string,
-  placeholder: PropTypes.string,
-  name: PropTypes.string,
-  type: PropTypes.string,
-  value: PropTypes.node,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  checked: PropTypes.bool,
-  containerClass: PropTypes.string,
-}
-
-export default Input

package/src/scripts/datalad/routes/__tests__/__snapshots__/publish.spec.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Publish dataset route renders with common props 1`] = `
-<Redirect
-  to={
-    Object {
-      "pathname": "/datasets/ds00001/metadata",
-      "state": Object {
-        "submitPath": "/datasets/ds00001/publish",
-      },
-    }
-  }
-/>
-`;

package/src/scripts/datalad/routes/__tests__/publish.spec.jsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import Publish from '../publish.jsx'
-
-describe('Publish dataset route', () => {
-  it('renders with common props', () => {
-    const wrapper = shallow(<Publish datasetId="ds00001" />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})