FEATURE: Filter properties in right sidebar

Author: Sebobo

packages/neos-ui/src/Containers/RightSideBar/Inspector/TabPanel/index.js

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {$get, $contains} from 'plow-js';
+import {$get} from 'plow-js';
 import Tabs from '@neos-project/react-ui-components/src/Tabs/';
 
 import PropertyGroup from '../PropertyGroup/index';
@@ -16,25 +16,20 @@ export default class TabPanel extends PureComponent {
         renderSecondaryInspector: PropTypes.func.isRequired,
         node: PropTypes.object.isRequired,
         commit: PropTypes.func.isRequired,
-        handleInspectorApply: PropTypes.func
-    };
-
-    isPropertyEnabled = item => {
-        const {node} = this.props;
-
-        if (item.type !== 'editor') {
-            return true;
-        }
-
-        if ($get('hidden', item)) {
-            return false;
-        }
-
-        return $get(['policy', 'canEdit'], node) && !$contains(item.id, 'policy.disallowedProperties', node);
+        handleInspectorApply: PropTypes.func,
+        isPropertyEnabled: PropTypes.func
     };
 
     renderTabPanel = groups => {
-        const {handlePanelToggle, handleInspectorApply, toggledPanels, renderSecondaryInspector, node, commit} = this.props;
+        const {
+            handlePanelToggle,
+            handleInspectorApply,
+            toggledPanels,
+            renderSecondaryInspector,
+            node,
+            commit,
+            isPropertyEnabled
+        } = this.props;
 
         return (
             <Tabs.Panel theme={{panel: style.inspectorTabPanel}}>
@@ -47,7 +42,7 @@ export default class TabPanel extends PureComponent {
                         icon={$get('icon', group)}
                         // Overlay default collapsed state over current state
                         collapsed={Boolean($get($get('id', group), toggledPanels)) !== Boolean($get('collapsed', group))}
-                        items={$get('items', group).filter(this.isPropertyEnabled)}
+                        items={$get('items', group).filter(isPropertyEnabled)}
                         renderSecondaryInspector={renderSecondaryInspector}
                         node={node}
                         commit={commit}
@@ -58,9 +53,9 @@ export default class TabPanel extends PureComponent {
     }
 
     render() {
-        const {groups} = this.props;
+        const {groups, isPropertyEnabled} = this.props;
 
-        const visibleGroups = groups ? groups.filter(group => $get('items', group) && $get('items', group).some(this.isPropertyEnabled)) : [];
+        const visibleGroups = groups ? groups.filter(group => $get('items', group) && $get('items', group).some(isPropertyEnabled)) : [];
 
         return this.renderTabPanel(visibleGroups);
     }

packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js

@@ -82,7 +82,8 @@ export default class Inspector extends PureComponent {
         secondaryInspectorComponent: null,
         toggledPanels: {},
         viewConfiguration: null,
-        originalViewConfiguration: null
+        originalViewConfiguration: null,
+        propertyFilter: null
     };
 
     configurationIsProcessed = false;
@@ -228,22 +229,34 @@ export default class Inspector extends PureComponent {
         this.props.escape();
     }
 
+    handleFilter = (e) => {
+        const {value} = e.target;
+        this.setState({
+            propertyFilter: value.toLowerCase()
+        });
+    }
+
     closeSecondaryInspectorIfNeeded = () => {
         if (this.state.secondaryInspectorComponent) {
             this.props.closeSecondaryInspector();
         }
     }
 
     isPropertyEnabled = item => {
-        const {focusedNode} = this.props;
+        const {propertyFilter} = this.state;
+        if (propertyFilter && item.id.toLowerCase().indexOf(propertyFilter) === -1) {
+            // console.debug('Property not matching filter', item.label, propertyFilter);
+            return false;
+        }
 
         if (item.type !== 'editor') {
             return true;
         }
 
+        const {focusedNode} = this.props;
         if ($get('hidden', item) || ($get('isAutoCreated', focusedNode) === true && item.id === '_hidden')) {
             // This accounts for the fact that auto-created child nodes cannot
-            // be hidden via the insprector (see: #2282)
+            // be hidden via the inspector (see: #2282)
             return false;
         }
 
@@ -358,6 +371,7 @@ export default class Inspector extends PureComponent {
                     document.body
                 )}
                 <SelectedElement/>
+                <input type="text" placeholder="Filter properties…" onChange={this.handleFilter} />
                 <Tabs
                     className={style.tabs}
                     theme={{
@@ -411,6 +425,7 @@ export default class Inspector extends PureComponent {
                                         this.handlePanelToggle([$get('id', tab), ...path]);
                                     }}
                                     handleInspectorApply={this.handleApply}
+                                    isPropertyEnabled={this.isPropertyEnabled}
                             />);
                         })
                     }