@jbrowse/plugin-config 1.7.9 → 2.0.0

package/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -18,21 +18,20 @@ import {
   IconButton,
   InputAdornment,
   InputLabel,
-  List,
-  ListItem,
   MenuItem,
   Paper,
   SvgIcon,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
-import AddIcon from '@material-ui/icons/Add'
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material/Add'
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
 
 // locals
+import StringArrayEditor from './StringArrayEditor'
 import CallbackEditor from './CallbackEditor'
 import ColorEditor from './ColorEditor'
 import JsonEditor from './JsonEditor'
@@ -40,7 +39,6 @@ import JsonEditor from './JsonEditor'
 // adds ability to have html in helperText. note that FormHelperTextProps is
 // div because the default is p which does not like div children
 const MyTextField = props => {
-  // eslint-disable-next-line react/prop-types
   const { helperText } = props
   return (
     <TextField
@@ -80,70 +78,14 @@ const SvgCheckbox = () => (
   </SvgIcon>
 )
 
-const StringArrayEditor = observer(({ slot }) => {
-  const [value, setValue] = useState('')
-  return (
-    <>
-      {slot.name ? <InputLabel>{slot.name}</InputLabel> : null}
-      <List disablePadding>
-        {slot.value.map((val, idx) => (
-          <ListItem key={idx} disableGutters>
-            <TextField
-              value={val}
-              onChange={evt => slot.setAtIndex(idx, evt.target.value)}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      color="secondary"
-                      onClick={() => slot.removeAtIndex(idx)}
-                    >
-                      <DeleteIcon />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          </ListItem>
-        ))}
-        <ListItem disableGutters>
-          <TextField
-            value={value}
-            placeholder="add new"
-            onChange={event => setValue(event.target.value)}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={() => {
-                      slot.add(value)
-                      setValue('')
-                    }}
-                    disabled={value === ''}
-                    color="secondary"
-                    data-testid={`stringArrayAdd-${slot.name}`}
-                  >
-                    <AddIcon />
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-        </ListItem>
-      </List>
-      <FormHelperText>{slot.description}</FormHelperText>
-    </>
-  )
-})
-
-const useMapEditorStyles = makeStyles(theme => ({
+const useMapEditorStyles = makeStyles()(theme => ({
   card: {
     marginTop: theme.spacing(1),
   },
 }))
 
 const StringArrayMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
+  const { classes } = useMapEditorStyles()
   const [value, setValue] = useState('')
   return (
     <>
@@ -212,7 +154,7 @@ const StringArrayMapEditor = observer(({ slot }) => {
 })
 
 const NumberMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
+  const { classes } = useMapEditorStyles()
   const [value, setValue] = useState('')
   return (
     <>
@@ -377,7 +319,7 @@ const valueComponents = {
   configRelationships: JsonEditor,
 }
 
-export const useSlotEditorStyles = makeStyles(theme => ({
+export const useSlotEditorStyles = makeStyles()(theme => ({
   paper: {
     display: 'flex',
     marginBottom: theme.spacing(2),
@@ -396,7 +338,7 @@ export const useSlotEditorStyles = makeStyles(theme => ({
 }))
 
 const SlotEditor = observer(({ slot, slotSchema }) => {
-  const classes = useSlotEditorStyles()
+  const { classes } = useSlotEditorStyles()
   const { type } = slot
   let ValueComponent = slot.isCallback ? CallbackEditor : valueComponents[type]
   if (!ValueComponent) {

package/src/ConfigurationEditorWidget/components/StringArrayEditor.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+
+import {
+  Button,
+  FormHelperText,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  List,
+  ListItem,
+  TextField,
+} from '@mui/material'
+
+// icons
+import DeleteIcon from '@mui/icons-material/Delete'
+
+const StringArrayEditor = observer(
+  ({
+    slot,
+  }: {
+    slot: {
+      name: string
+      value: string[]
+      setAtIndex: Function
+      removeAtIndex: Function
+      add: Function
+      description: string
+    }
+  }) => {
+    const [value, setValue] = useState('')
+    const [addNew, setAddNew] = useState(false)
+    return (
+      <>
+        {slot.name ? <InputLabel>{slot.name}</InputLabel> : null}
+        <List disablePadding>
+          {slot.value.map((val, idx) => (
+            <ListItem key={idx} disableGutters>
+              <TextField
+                value={val}
+                onChange={evt => slot.setAtIndex(idx, evt.target.value)}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        color="secondary"
+                        onClick={() => slot.removeAtIndex(idx)}
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </ListItem>
+          ))}
+
+          {addNew ? (
+            <ListItem disableGutters>
+              <TextField
+                value={value}
+                placeholder="add new"
+                onChange={event => setValue(event.target.value)}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <>
+                        <Button
+                          color="primary"
+                          variant="contained"
+                          style={{ margin: 2 }}
+                          data-testid={`stringArrayAdd-${slot.name}`}
+                          onClick={() => {
+                            setAddNew(false)
+                            slot.add(value)
+                            setValue('')
+                          }}
+                        >
+                          OK
+                        </Button>
+                        <Button
+                          color="primary"
+                          variant="contained"
+                          style={{ margin: 2 }}
+                          onClick={() => {
+                            setAddNew(false)
+                            setValue('')
+                          }}
+                        >
+                          Cancel
+                        </Button>
+                      </>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </ListItem>
+          ) : null}
+          <Button
+            color="primary"
+            variant="contained"
+            style={{ margin: 4 }}
+            disabled={addNew}
+            onClick={() => setAddNew(true)}
+          >
+            Add item
+          </Button>
+        </List>
+        <FormHelperText>{slot.description}</FormHelperText>
+      </>
+    )
+  },
+)
+
+export default StringArrayEditor

package/src/ConfigurationEditorWidget/components/{TypeSelector.js → TypeSelector.tsx}

@@ -1,13 +1,22 @@
-import MenuItem from '@material-ui/core/MenuItem'
-import Paper from '@material-ui/core/Paper'
-import TextField from '@material-ui/core/TextField'
-import { observer } from 'mobx-react'
 import React from 'react'
+import { MenuItem, Paper, TextField } from '@mui/material'
+import { observer } from 'mobx-react'
 import { useSlotEditorStyles } from './SlotEditor'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 
 const TypeSelector = observer(
-  ({ typeNameChoices, slot, slotName, onChange }) => {
-    const classes = useSlotEditorStyles()
+  ({
+    typeNameChoices,
+    slot,
+    slotName,
+    onChange,
+  }: {
+    typeNameChoices: string[]
+    slot: AnyConfigurationModel
+    slotName: string
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  }) => {
+    const { classes } = useSlotEditorStyles()
     return (
       <Paper className={classes.paper}>
         <div className={classes.paperContent}>
@@ -15,7 +24,6 @@ const TypeSelector = observer(
             value={slot.type}
             label="Type"
             select
-            // error={filterError}
             helperText={`Type of ${slotName} to use`}
             fullWidth
             onChange={onChange}