diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js
index 87a8739dc..cc13aa791 100644
--- a/ui/src/app/admin/component/ConfigurationForm.js
+++ b/ui/src/app/admin/component/ConfigurationForm.js
@@ -29,8 +29,11 @@ export function ConfigurationForm({ configuration = {}, loading, onSave, onCance
const properties = useProperties();
const addProperties = (props) => {
+
const parsed = props.reduce((coll, prop, idx) => {
if (prop.isCategory) {
+ console.log(properties.filter(p => p.category === prop.category))
+
return [...coll, ...properties.filter(p => p.category === prop.category)];
} else {
return [...coll, prop];
diff --git a/ui/src/app/admin/component/PropertySelector.js b/ui/src/app/admin/component/PropertySelector.js
index 976e0d220..f0016e42e 100644
--- a/ui/src/app/admin/component/PropertySelector.js
+++ b/ui/src/app/admin/component/PropertySelector.js
@@ -1,5 +1,5 @@
import React, { Fragment, useCallback } from 'react';
-import { groupBy } from 'lodash';
+import { groupBy, orderBy } from 'lodash';
import { Highlighter, Menu, MenuItem, Token, Typeahead } from 'react-bootstrap-typeahead';
import Button from 'react-bootstrap/Button';
@@ -7,34 +7,44 @@ import { ToggleButton } from '../../form/component/ToggleButton';
export function PropertySelector ({ properties, options, onAddProperties }) {
- // React.useEffect(() => console.log(properties), [properties]);
-
const menu = useCallback((results, menuProps, state) => {
let index = 0;
- const mapped = results.map(p => !p.category || p.category === '?' ? { ...p, category: 'Misc' } : p);
- const grouped = groupBy(mapped, 'category');
- const items = Object.keys(grouped).sort().map((item) => (
-