@openneuro/app 4.20.4 → 4.20.6-alpha.2

package/src/scripts/dataset/fragments/doi-link.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React from "react"
+import { Link } from "react-router-dom"
 
 // See https://www.crossref.org/blog/dois-and-matching-regular-expressions/
 export const DOIPattern = /^10.\d{4,9}\/[-._;()/:A-Z0-9]+$/i
@@ -14,16 +14,16 @@ export const DOILink = ({ DOI, datasetId }) => {
   if (
     DOI &&
     (DOI.match(DOIPattern) ||
-      DOI.startsWith('doi:') ||
-      DOI.startsWith('https://doi.org'))
+      DOI.startsWith("doi:") ||
+      DOI.startsWith("https://doi.org"))
   ) {
     if (DOI.match(DOIPattern)) {
       return <a href={`https://doi.org/${DOI}`}>{`doi:${DOI}`}</a>
     }
-    if (DOI.startsWith('doi:') && DOI.slice(4).match(DOIPattern)) {
+    if (DOI.startsWith("doi:") && DOI.slice(4).match(DOIPattern)) {
       return <a href={`https://doi.org/${DOI.slice(4)}`}>{DOI}</a>
     }
-    if (DOI.startsWith('https://doi.org/')) {
+    if (DOI.startsWith("https://doi.org/")) {
       return <a href={DOI}>{`doi:${DOI.slice(16)}`}</a>
     }
     return <DOILinkFallback datasetId={datasetId} />

package/src/scripts/dataset/fragments/edit-button.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react'
-import { Button } from '@openneuro/components/button'
+import React, { FC } from "react"
+import { Button } from "@openneuro/components/button"
 
 /**
  * An edit button, calls action when clicked

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

@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
-import UpdateDescription from '../mutations/description.jsx'
-import UpdateReadme from '../mutations/readme.jsx'
+import React, { useState } from "react"
+import UpdateDescription from "../mutations/description.jsx"
+import UpdateReadme from "../mutations/readme.jsx"
 
-import { CancelButton } from './cancel-button'
-import { EditButton } from './edit-button'
+import { CancelButton } from "./cancel-button"
+import { EditButton } from "./edit-button"
 
 /**
  * This is a hopefully less confusing click-to-edit component
@@ -19,31 +19,33 @@ const EditDescriptionField = ({
   rows = 1,
 }) => {
   const [editing, setEditing] = useState(false)
-  const [value, setValue] = useState(description || '')
+  const [value, setValue] = useState(description || "")
   if (editing) {
     return (
       <>
         <textarea
           className="edit-description-field"
           rows={rows}
-          onChange={e => setValue(e.target.value)}
+          onChange={(e) => setValue(e.target.value)}
           value={value}
         />
         <div className="update-field-save">
-          {field == 'readme' ? (
-            <UpdateReadme
-              datasetId={datasetId}
-              value={value}
-              done={() => setEditing(false)}
-            />
-          ) : (
-            <UpdateDescription
-              datasetId={datasetId}
-              field={field}
-              value={value}
-              done={() => setEditing(false)}
-            />
-          )}
+          {field == "readme"
+            ? (
+              <UpdateReadme
+                datasetId={datasetId}
+                value={value}
+                done={() => setEditing(false)}
+              />
+            )
+            : (
+              <UpdateDescription
+                datasetId={datasetId}
+                field={field}
+                value={value}
+                done={() => setEditing(false)}
+              />
+            )}
 
           <CancelButton action={() => setEditing(false)} />
         </div>

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

@@ -1,10 +1,10 @@
-import React, { useState } from 'react'
-import UpdateDescription from '../mutations/description.jsx'
-import { CancelButton } from './cancel-button'
-import { EditButton } from './edit-button'
-import Markdown from 'markdown-to-jsx'
+import React, { useState } from "react"
+import UpdateDescription from "../mutations/description.jsx"
+import { CancelButton } from "./cancel-button"
+import { EditButton } from "./edit-button"
+import Markdown from "markdown-to-jsx"
 
-import EditList from './edit-list.jsx'
+import EditList from "./edit-list.jsx"
 
 const EditDescriptionList = ({
   datasetId,
@@ -20,7 +20,7 @@ const EditDescriptionList = ({
 
   if (editing) {
     return (
-      <div className={'dataset-meta-block ' + className}>
+      <div className={"dataset-meta-block " + className}>
         <h2 className="dmb-heading">{heading}</h2>
         <EditList
           placeholder="Add new item"
@@ -40,7 +40,7 @@ const EditDescriptionList = ({
     )
   } else {
     return (
-      <div className={'dataset-meta-block ' + className}>
+      <div className={"dataset-meta-block " + className}>
         <h2 className="dmb-heading">{heading}</h2>
 
         <ul>

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

@@ -1,12 +1,12 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { Button } from '@openneuro/components/button'
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import { Button } from "@openneuro/components/button"
 
 /**
  * Generic add/remove strings from an Array list
  */
 const EditList = ({ placeholder, elements = [], setElements }) => {
-  const [newElement, updateNewElement] = useState('')
+  const [newElement, updateNewElement] = useState("")
 
   const [warnEmpty, updateWarnEmpty] = useState(false)
 
@@ -14,7 +14,7 @@ const EditList = ({ placeholder, elements = [], setElements }) => {
    * Remove one element from list
    * @param {number} index Which entry to remove
    */
-  const removeElement = index => () => {
+  const removeElement = (index) => () => {
     // Avoid mutating elements array directly
     const newElements = [...elements]
     newElements.splice(index, 1)
@@ -22,12 +22,12 @@ const EditList = ({ placeholder, elements = [], setElements }) => {
   }
 
   const updateElements = () => {
-    if (newElement === '') {
+    if (newElement === "") {
       updateWarnEmpty(true)
     } else {
       setElements([...elements, newElement])
       updateWarnEmpty(false)
-      updateNewElement('')
+      updateNewElement("")
     }
   }
 
@@ -39,7 +39,7 @@ const EditList = ({ placeholder, elements = [], setElements }) => {
           className="form-control"
           placeholder={placeholder}
           value={newElement}
-          onChange={e => updateNewElement(e.target.value)}
+          onChange={(e) => updateNewElement(e.target.value)}
         />
         <Button
           className="edit-list-add"

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

@@ -1,22 +1,22 @@
-import React, { useState, createRef } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
+import React, { createRef, useState } from "react"
+import PropTypes from "prop-types"
+import styled from "@emotion/styled"
 
 const Container = styled.div({
-  position: 'relative',
-  width: '100%',
-  height: '3rem',
-  marginTop: '30px',
-  backgroundColor: 'white',
-  borderRadius: '4px',
+  position: "relative",
+  width: "100%",
+  height: "3rem",
+  marginTop: "30px",
+  backgroundColor: "white",
+  borderRadius: "4px",
 })
 const centerLabelStyles = {
-  top: '13px',
-  fontSize: '1em',
+  top: "13px",
+  fontSize: "1em",
 }
 const pushedUpLabelStyles = {
-  top: '-17px',
-  fontSize: '0.75em',
+  top: "-17px",
+  fontSize: "0.75em",
 }
 
 interface NumberInputLabelProps {
@@ -26,36 +26,36 @@ interface NumberInputLabelProps {
 
 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',
+    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,
+    ":focus": pushedUpLabelStyles,
   }),
 )
 const DisabledIcon = styled.i({
-  '&&': {
-    position: 'absolute',
-    top: '0.4rem',
-    right: '0.4rem',
-    color: '#5cb85c',
-    fontSize: '8px',
+  "&&": {
+    position: "absolute",
+    top: "0.4rem",
+    right: "0.4rem",
+    color: "#5cb85c",
+    fontSize: "8px",
   },
 })
 const Input = styled.input({
-  width: '100%',
-  height: '100%',
-  padding: '13px',
-  textAlign: 'left',
+  width: "100%",
+  height: "100%",
+  padding: "13px",
+  textAlign: "left",
 })
 
 const NumberInput = ({
@@ -92,7 +92,8 @@ const NumberInput = ({
         htmlFor={name}
         hasValue={Boolean(value)}
         hasFocus={hasFocus}
-        onClick={focusInput}>
+        onClick={focusInput}
+      >
         {label}
       </Label>
       {annotated && <DisabledIcon className="fa fa-asterisk" />}

package/src/scripts/dataset/fragments/save-button.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react'
-import { Button } from '@openneuro/components/button'
+import React, { FC } from "react"
+import { Button } from "@openneuro/components/button"
 
 /**
  * An Save button, calls action when clicked

package/src/scripts/dataset/fragments/select-input.tsx

@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import TextInput from './text-input'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
+import React, { useState } from "react"
+import TextInput from "./text-input"
+import PropTypes from "prop-types"
+import styled from "@emotion/styled"
 
 const Container = styled.div({
-  '&&': {
-    position: 'relative',
-    width: '100%',
-    height: '3rem',
-    marginTop: '30px',
-    backgroundColor: 'white',
-    borderRadius: '4px',
+  "&&": {
+    position: "relative",
+    width: "100%",
+    height: "3rem",
+    marginTop: "30px",
+    backgroundColor: "white",
+    borderRadius: "4px",
   },
 })
 const centerLabelStyles = {
-  '&&': {
-    top: '13px',
-    fontSize: '1em',
+  "&&": {
+    top: "13px",
+    fontSize: "1em",
   },
 }
 const pushedUpLabelStyles = {
-  '&&': { top: '-17px', fontSize: '0.75em' },
+  "&&": { top: "-17px", fontSize: "0.75em" },
 }
 interface SelectInputLabelProps {
   hasValue: boolean
@@ -28,31 +28,31 @@ interface SelectInputLabelProps {
 
 const Label = styled.label<SelectInputLabelProps>(
   {
-    '&&': {
-      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',
+    "&&": {
+      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 }) => ({
     ...(hasValue ? pushedUpLabelStyles : centerLabelStyles),
-    ':focus': pushedUpLabelStyles,
+    ":focus": pushedUpLabelStyles,
   }),
 )
 const DisabledIcon = styled.i({
-  '&&': {
-    position: 'absolute',
-    top: '0.4rem',
-    right: '0.4rem',
-    color: '#5cb85c',
-    fontSize: '8px',
+  "&&": {
+    position: "absolute",
+    top: "0.4rem",
+    right: "0.4rem",
+    color: "#5cb85c",
+    fontSize: "8px",
   },
 })
 
@@ -61,53 +61,53 @@ interface ShowOtherProps {
 }
 const Select = styled.select<ShowOtherProps>(
   {
-    '&&': {
-      position: 'absolute',
+    "&&": {
+      position: "absolute",
       top: 0,
       left: 0,
       right: 0,
-      width: '100%',
-      height: '100%',
-      color: 'rgba(0,0,0,0)',
-      backgroundColor: 'rgba(0,0,0,0)',
-      MozAppearance: 'none',
+      width: "100%",
+      height: "100%",
+      color: "rgba(0,0,0,0)",
+      backgroundColor: "rgba(0,0,0,0)",
+      MozAppearance: "none",
     },
   },
   ({ showOther }) =>
     showOther
       ? {
-          borderBottomRightRadius: 0,
-          borderBottomLeftRadius: 0,
-        }
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      }
       : {},
 )
-Select.displayName = 'styledSelect'
+Select.displayName = "styledSelect"
 const SelectValueDisplay = styled.div({
-  '&&': {
-    position: 'absolute',
+  "&&": {
+    position: "absolute",
     top: 0,
-    width: '100%',
-    height: '100%',
-    padding: '13px',
-    color: 'black',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    textAlign: 'left',
+    width: "100%",
+    height: "100%",
+    padding: "13px",
+    color: "black",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    textAlign: "left",
   },
 })
 const SelectIconContainer = styled.div({
-  '&&': {
-    position: 'absolute',
+  "&&": {
+    position: "absolute",
     top: 0,
     right: 0,
-    height: '100%',
-    width: '3rem',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: '#999',
+    height: "100%",
+    width: "3rem",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "#999",
   },
 })
 const SelectIcon = (): React.ReactElement => (
@@ -117,15 +117,15 @@ const SelectIcon = (): React.ReactElement => (
   </SelectIconContainer>
 )
 const Option = styled.option({
-  color: 'black',
+  color: "black",
 })
 const OtherInputContainer = styled.div<ShowOtherProps>(
   {
-    '&&': {
-      overflow: 'hidden',
-      transition: 'opacity, transform, height',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-out',
+    "&&": {
+      overflow: "hidden",
+      transition: "opacity, transform, height",
+      transitionDuration: "200ms",
+      transitionTimingFunction: "ease-out",
 
       input: {
         borderTopRightRadius: 0,
@@ -136,15 +136,15 @@ const OtherInputContainer = styled.div<ShowOtherProps>(
   ({ showOther }) =>
     showOther
       ? {
-          '&&': {
-            height: '5rem',
-            opacity: 1,
-            transform: 'translateY(0)',
-          },
-        }
-      : {
-          '&&': { height: 0, opacity: 0, transform: 'translateY(-4rem)' },
+        "&&": {
+          height: "5rem",
+          opacity: 1,
+          transform: "translateY(0)",
         },
+      }
+      : {
+        "&&": { height: 0, opacity: 0, transform: "translateY(-4rem)" },
+      },
 )
 const SelectInput = ({
   name,
@@ -155,19 +155,19 @@ const SelectInput = ({
   disabled,
   annotated,
   required,
-  warningOnChange = '',
+  warningOnChange = "",
   onChange,
   hasBooleanValues,
 }): React.ReactElement => {
-  if (hasBooleanValues && typeof value === 'boolean') {
+  if (hasBooleanValues && typeof value === "boolean") {
     value = value.toString()
   }
   const nothingSelected = !value
-  const otherOptionSelected = showOptionOther && value === 'Other'
+  const otherOptionSelected = showOptionOther && value === "Other"
 
   let selectValue
-  if (nothingSelected) selectValue = ''
-  else if (otherOptionSelected) selectValue = 'Other'
+  if (nothingSelected) selectValue = ""
+  else if (otherOptionSelected) selectValue = "Other"
   else selectValue = value
 
   const [changed, setChanged] = useState(false)
@@ -176,8 +176,8 @@ const SelectInput = ({
     const prevValue = value
     let newValue = e.target.value
     if (hasBooleanValues) {
-      if (newValue === 'true') newValue = true
-      else if (newValue === 'false') newValue = false
+      if (newValue === "true") newValue = true
+      else if (newValue === "false") newValue = false
     }
     if (prevValue != newValue) setChanged(true)
     onChange(e.target.name, newValue)
@@ -204,7 +204,8 @@ const SelectInput = ({
           disabled={disabled}
           onChange={handleChange}
           showOther={showOptionOther && otherOptionSelected}
-          required={required}>
+          required={required}
+        >
           <Option value="" disabled hidden />
           {options &&
             options.map((option, i) => (
@@ -219,7 +220,7 @@ const SelectInput = ({
         <TextInput
           name={name}
           label={`Other ${labelString}`}
-          value={value === 'Other' ? '' : value}
+          value={value === "Other" ? "" : value}
           disabled={disabled}
           onChange={onChange}
         />