@jbrowse/plugin-config 1.7.7 → 1.7.10

package/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
 import { getPropertyMembers, getEnv } from 'mobx-state-tree'
-import { FileSelector } from '@jbrowse/core/ui'
+import { FileSelector, SanitizedHTML } from '@jbrowse/core/ui'
 import {
   getPropertyType,
   getSubType,
@@ -18,8 +18,6 @@ import {
   IconButton,
   InputAdornment,
   InputLabel,
-  List,
-  ListItem,
   MenuItem,
   Paper,
   SvgIcon,
@@ -33,16 +31,32 @@ import AddIcon from '@material-ui/icons/Add'
 import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'
 
 // locals
+import StringArrayEditor from './StringArrayEditor'
 import CallbackEditor from './CallbackEditor'
 import ColorEditor from './ColorEditor'
 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
+      {...props}
+      helperText={<SanitizedHTML html={helperText} />}
+      FormHelperTextProps={{
+        component: 'div',
+      }}
+      fullWidth
+    />
+  )
+}
+
 const StringEditor = observer(({ slot }) => (
-  <TextField
+  <MyTextField
     label={slot.name}
-    // error={filterError}
     helperText={slot.description}
-    fullWidth
     value={slot.value}
     onChange={evt => slot.set(evt.target.value)}
   />
@@ -52,7 +66,6 @@ const TextEditor = observer(({ slot }) => (
   <TextField
     label={slot.name}
     helperText={slot.description}
-    fullWidth
     multiline
     value={slot.value}
     onChange={evt => slot.set(evt.target.value)}
@@ -66,62 +79,6 @@ 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 => ({
   card: {
     marginTop: theme.spacing(1),
@@ -268,7 +225,7 @@ const NumberEditor = observer(({ slot }) => {
     }
   }, [slot, val])
   return (
-    <TextField
+    <MyTextField
       label={slot.name}
       helperText={slot.description}
       value={val}
@@ -287,7 +244,7 @@ const IntegerEditor = observer(({ slot }) => {
     }
   }, [slot, val])
   return (
-    <TextField
+    <MyTextField
       label={slot.name}
       helperText={slot.description}
       value={val}
@@ -297,7 +254,7 @@ const IntegerEditor = observer(({ slot }) => {
   )
 })
 
-const booleanEditor = observer(({ slot }) => (
+const BooleanEditor = observer(({ slot }) => (
   <FormControl>
     <FormControlLabel
       label={slot.name}
@@ -312,20 +269,18 @@ const booleanEditor = observer(({ slot }) => (
   </FormControl>
 ))
 
-const stringEnumEditor = observer(({ slot, slotSchema }) => {
+const StringEnumEditor = observer(({ slot, slotSchema }) => {
   const p = getPropertyMembers(getSubType(slotSchema))
   const choices = getUnionSubTypes(
     getUnionSubTypes(getSubType(getPropertyType(p, 'value')))[1],
   ).map(t => t.value)
 
   return (
-    <TextField
+    <MyTextField
       value={slot.value}
       label={slot.name}
       select
-      // error={filterError}
       helperText={slot.description}
-      fullWidth
       onChange={evt => slot.set(evt.target.value)}
     >
       {choices.map(str => (
@@ -333,7 +288,7 @@ const stringEnumEditor = observer(({ slot, slotSchema }) => {
           {str}
         </MenuItem>
       ))}
-    </TextField>
+    </MyTextField>
   )
 })
 
@@ -359,8 +314,8 @@ const valueComponents = {
   number: NumberEditor,
   integer: IntegerEditor,
   color: ColorEditor,
-  stringEnum: stringEnumEditor,
-  boolean: booleanEditor,
+  stringEnum: StringEnumEditor,
+  boolean: BooleanEditor,
   frozen: JsonEditor,
   configRelationships: JsonEditor,
 }

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 '@material-ui/core'
+
+// icons
+import DeleteIcon from '@material-ui/icons/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