@jbrowse/plugin-config 1.7.9 → 1.7.10

package/dist/ConfigurationEditorWidget/components/SlotEditor.js

@@ -31,6 +31,8 @@ var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
 
 var _RadioButtonUnchecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonUnchecked"));
 
+var _StringArrayEditor = _interopRequireDefault(require("./StringArrayEditor"));
+
 var _CallbackEditor = _interopRequireDefault(require("./CallbackEditor"));
 
 var _ColorEditor = _interopRequireDefault(require("./ColorEditor"));
@@ -89,59 +91,6 @@ var SvgCheckbox = function SvgCheckbox() {
   }));
 };
 
-var StringArrayEditor = (0, _mobxReact.observer)(function (_ref3) {
-  var slot = _ref3.slot;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slot.name ? /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name) : null, /*#__PURE__*/_react.default.createElement(_core.List, {
-    disablePadding: true
-  }, slot.value.map(function (val, idx) {
-    return /*#__PURE__*/_react.default.createElement(_core.ListItem, {
-      key: idx,
-      disableGutters: true
-    }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
-      value: val,
-      onChange: function onChange(evt) {
-        return slot.setAtIndex(idx, evt.target.value);
-      },
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-          color: "secondary",
-          onClick: function onClick() {
-            return slot.removeAtIndex(idx);
-          }
-        }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))
-      }
-    }));
-  }), /*#__PURE__*/_react.default.createElement(_core.ListItem, {
-    disableGutters: true
-  }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    value: value,
-    placeholder: "add new",
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    },
-    InputProps: {
-      endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        onClick: function onClick() {
-          slot.add(value);
-          setValue('');
-        },
-        disabled: value === '',
-        color: "secondary",
-        "data-testid": "stringArrayAdd-".concat(slot.name)
-      }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
-});
 var useMapEditorStyles = (0, _core.makeStyles)(function (theme) {
   return {
     card: {
@@ -149,19 +98,19 @@ var useMapEditorStyles = (0, _core.makeStyles)(function (theme) {
     }
   };
 });
-var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
-  var slot = _ref4.slot;
+var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref3) {
+  var slot = _ref3.slot;
   var classes = useMapEditorStyles();
 
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref5) {
-    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        key = _ref6[0],
-        val = _ref6[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        val = _ref5[1];
 
     return /*#__PURE__*/_react.default.createElement(_core.Card, {
       raised: true,
@@ -175,7 +124,7 @@ var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
           return slot.remove(key);
         }
       }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))
-    }), /*#__PURE__*/_react.default.createElement(_core.CardContent, null, /*#__PURE__*/_react.default.createElement(StringArrayEditor, {
+    }), /*#__PURE__*/_react.default.createElement(_core.CardContent, null, /*#__PURE__*/_react.default.createElement(_StringArrayEditor.default, {
       slot: {
         value: val,
         description: "Values associated with entry ".concat(key),
@@ -217,19 +166,19 @@ var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
     })
   })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
 });
-var NumberMapEditor = (0, _mobxReact.observer)(function (_ref7) {
-  var slot = _ref7.slot;
+var NumberMapEditor = (0, _mobxReact.observer)(function (_ref6) {
+  var slot = _ref6.slot;
   var classes = useMapEditorStyles();
 
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref8) {
-    var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
-        key = _ref9[0],
-        val = _ref9[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref7) {
+    var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+        key = _ref8[0],
+        val = _ref8[1];
 
     return /*#__PURE__*/_react.default.createElement(_core.Card, {
       raised: true,
@@ -278,13 +227,13 @@ var NumberMapEditor = (0, _mobxReact.observer)(function (_ref7) {
     })
   })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
 });
-var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
-  var slot = _ref10.slot;
+var NumberEditor = (0, _mobxReact.observer)(function (_ref9) {
+  var slot = _ref9.slot;
 
-  var _useState7 = (0, _react.useState)(slot.value),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      val = _useState8[0],
-      setVal = _useState8[1];
+  var _useState5 = (0, _react.useState)(slot.value),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      val = _useState6[0],
+      setVal = _useState6[1];
 
   (0, _react.useEffect)(function () {
     var num = parseFloat(val, 10);
@@ -305,13 +254,13 @@ var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
     }
   });
 });
-var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
-  var slot = _ref11.slot;
+var IntegerEditor = (0, _mobxReact.observer)(function (_ref10) {
+  var slot = _ref10.slot;
 
-  var _useState9 = (0, _react.useState)(slot.value),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      val = _useState10[0],
-      setVal = _useState10[1];
+  var _useState7 = (0, _react.useState)(slot.value),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      val = _useState8[0],
+      setVal = _useState8[1];
 
   (0, _react.useEffect)(function () {
     var num = parseInt(val, 10);
@@ -330,8 +279,8 @@ var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
     }
   });
 });
-var BooleanEditor = (0, _mobxReact.observer)(function (_ref12) {
-  var slot = _ref12.slot;
+var BooleanEditor = (0, _mobxReact.observer)(function (_ref11) {
+  var slot = _ref11.slot;
   return /*#__PURE__*/_react.default.createElement(_core.FormControl, null, /*#__PURE__*/_react.default.createElement(_core.FormControlLabel, {
     label: slot.name,
     control: /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
@@ -342,9 +291,9 @@ var BooleanEditor = (0, _mobxReact.observer)(function (_ref12) {
     })
   }), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
 });
-var StringEnumEditor = (0, _mobxReact.observer)(function (_ref13) {
-  var slot = _ref13.slot,
-      slotSchema = _ref13.slotSchema;
+var StringEnumEditor = (0, _mobxReact.observer)(function (_ref12) {
+  var slot = _ref12.slot,
+      slotSchema = _ref12.slotSchema;
   var p = (0, _mobxStateTree.getPropertyMembers)((0, _mstReflection.getSubType)(slotSchema));
   var choices = (0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getSubType)((0, _mstReflection.getPropertyType)(p, 'value')))[1]).map(function (t) {
     return t.value;
@@ -364,10 +313,10 @@ var StringEnumEditor = (0, _mobxReact.observer)(function (_ref13) {
     }, str);
   }));
 });
-var FileSelectorWrapper = (0, _mobxReact.observer)(function (_ref14) {
+var FileSelectorWrapper = (0, _mobxReact.observer)(function (_ref13) {
   var _getEnv$pluginManager;
 
-  var slot = _ref14.slot;
+  var slot = _ref13.slot;
   return /*#__PURE__*/_react.default.createElement(_ui.FileSelector, {
     location: slot.value,
     setLocation: function setLocation(location) {
@@ -382,7 +331,7 @@ var valueComponents = {
   string: StringEditor,
   text: TextEditor,
   fileLocation: FileSelectorWrapper,
-  stringArray: StringArrayEditor,
+  stringArray: _StringArrayEditor.default,
   stringArrayMap: StringArrayMapEditor,
   numberMap: NumberMapEditor,
   number: NumberEditor,
@@ -413,9 +362,9 @@ var useSlotEditorStyles = (0, _core.makeStyles)(function (theme) {
   };
 });
 exports.useSlotEditorStyles = useSlotEditorStyles;
-var SlotEditor = (0, _mobxReact.observer)(function (_ref15) {
-  var slot = _ref15.slot,
-      slotSchema = _ref15.slotSchema;
+var SlotEditor = (0, _mobxReact.observer)(function (_ref14) {
+  var slot = _ref14.slot,
+      slotSchema = _ref14.slotSchema;
   var classes = useSlotEditorStyles();
   var type = slot.type;
   var ValueComponent = slot.isCallback ? _CallbackEditor.default : valueComponents[type];

package/dist/ConfigurationEditorWidget/components/StringArrayEditor.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const StringArrayEditor: ({ slot, }: {
+    slot: {
+        name: string;
+        value: string[];
+        setAtIndex: Function;
+        removeAtIndex: Function;
+        add: Function;
+        description: string;
+    };
+}) => JSX.Element;
+export default StringArrayEditor;

package/dist/ConfigurationEditorWidget/components/StringArrayEditor.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _core = require("@material-ui/core");
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// icons
+var StringArrayEditor = (0, _mobxReact.observer)(function (_ref) {
+  var slot = _ref.slot;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      addNew = _useState4[0],
+      setAddNew = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slot.name ? /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name) : null, /*#__PURE__*/_react.default.createElement(_core.List, {
+    disablePadding: true
+  }, slot.value.map(function (val, idx) {
+    return /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+      key: idx,
+      disableGutters: true
+    }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+      value: val,
+      onChange: function onChange(evt) {
+        return slot.setAtIndex(idx, evt.target.value);
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          color: "secondary",
+          onClick: function onClick() {
+            return slot.removeAtIndex(idx);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))
+      }
+    }));
+  }), addNew ? /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+    disableGutters: true
+  }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+    value: value,
+    placeholder: "add new",
+    onChange: function onChange(event) {
+      return setValue(event.target.value);
+    },
+    InputProps: {
+      endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+        color: "primary",
+        variant: "contained",
+        style: {
+          margin: 2
+        },
+        "data-testid": "stringArrayAdd-".concat(slot.name),
+        onClick: function onClick() {
+          setAddNew(false);
+          slot.add(value);
+          setValue('');
+        }
+      }, "OK"), /*#__PURE__*/_react.default.createElement(_core.Button, {
+        color: "primary",
+        variant: "contained",
+        style: {
+          margin: 2
+        },
+        onClick: function onClick() {
+          setAddNew(false);
+          setValue('');
+        }
+      }, "Cancel")))
+    }
+  })) : null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    color: "primary",
+    variant: "contained",
+    style: {
+      margin: 4
+    },
+    disabled: addNew,
+    onClick: function onClick() {
+      return setAddNew(true);
+    }
+  }, "Add item")), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
+});
+var _default = StringArrayEditor;
+exports.default = _default;

package/dist/ConfigurationEditorWidget/index.js

@@ -26,7 +26,7 @@ exports.configSchema = configSchema;
 var HeadingComponent = (0, _mobxReact.observer)(function (_ref) {
   var model = _ref.model;
 
-  if (model && model.target) {
+  if (model !== null && model !== void 0 && model.target) {
     if (model.target.type) {
       return "".concat(model.target.type, " settings");
     }
@@ -34,7 +34,7 @@ var HeadingComponent = (0, _mobxReact.observer)(function (_ref) {
     if ((0, _mobxStateTree.isStateTreeNode)(model.target)) {
       var type = (0, _mobxStateTree.getType)(model.target);
 
-      if (type && type.name) {
+      if (type !== null && type !== void 0 && type.name) {
         return "".concat(type.name.replace('ConfigurationSchema', ''), " settings");
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6504c385d703ce6e755d05652ef659ffe28c864"
+  "gitHead": "02d8c1e88e5603ea5855faed4ccb814e28071b32"
 }

package/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -18,8 +18,6 @@ import {
   IconButton,
   InputAdornment,
   InputLabel,
-  List,
-  ListItem,
   MenuItem,
   Paper,
   SvgIcon,
@@ -33,6 +31,7 @@ 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'
@@ -80,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),

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

package/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.js.snap

@@ -310,51 +310,21 @@ exports[`ConfigurationEditor widget renders all the different types of built-in
                       </div>
                     </div>
                   </li>
-                  <li
-                    class="MuiListItem-root"
+                  <button
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+                    style="margin: 4px;"
+                    tabindex="0"
+                    type="button"
                   >
-                    <div
-                      class="MuiFormControl-root MuiTextField-root"
+                    <span
+                      class="MuiButton-label"
                     >
-                      <div
-                        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
-                          placeholder="add new"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
-                        >
-                          <button
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
-                            data-testid="stringArrayAdd-stringArrayTest"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <span
-                              class="MuiIconButton-label"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                                />
-                              </svg>
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </li>
+                      Add item
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </ul>
                 <p
                   class="MuiFormHelperText-root"
@@ -516,51 +486,21 @@ exports[`ConfigurationEditor widget renders all the different types of built-in
                           </div>
                         </div>
                       </li>
-                      <li
-                        class="MuiListItem-root"
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+                        style="margin: 4px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <div
-                          class="MuiFormControl-root MuiTextField-root"
+                        <span
+                          class="MuiButton-label"
                         >
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
-                              placeholder="add new"
-                              type="text"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
-                            >
-                              <button
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
-                                data-testid="stringArrayAdd-undefined"
-                                disabled=""
-                                tabindex="-1"
-                                type="button"
-                              >
-                                <span
-                                  class="MuiIconButton-label"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                                    />
-                                  </svg>
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </li>
+                          Add item
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
                     </ul>
                     <p
                       class="MuiFormHelperText-root"

package/src/ConfigurationEditorWidget/index.js

@@ -5,13 +5,13 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration'
 export { default as stateModelFactory } from './model'
 export const configSchema = ConfigurationSchema('ConfigurationEditorWidget', {})
 export const HeadingComponent = observer(({ model }) => {
-  if (model && model.target) {
+  if (model?.target) {
     if (model.target.type) {
       return `${model.target.type} settings`
     }
     if (isStateTreeNode(model.target)) {
       const type = getType(model.target)
-      if (type && type.name) {
+      if (type?.name) {
         return `${type.name.replace('ConfigurationSchema', '')} settings`
       }
     }