Skip to content

Commit 2dd4d74

Browse files
SeboboSebobo
committed
FEATURE: Filter for inspector properties
1 parent 9bbb3c6 commit 2dd4d74

File tree

3 files changed

+58
-26
lines changed

3 files changed

+58
-26
lines changed

‎packages/neos-ui-contentrepository/src/registry/NodeTypesRegistry.ts

+19-6
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import mapValues from 'lodash.mapvalues';
44
import {SynchronousRegistry} from '@neos-project/neos-ui-extensibility/src';
55
import positionalArraySorter from '@neos-project/positional-array-sorter/src/positionalArraySorter';
66
import {NodeTypeName, NodeType} from '@neos-project/neos-ts-interfaces';
7+
import {translate} from '@neos-project/neos-ui-i18n'
78

89
interface Constraint {
910
childNodes: {
@@ -209,37 +210,37 @@ export default class NodeTypesRegistry extends SynchronousRegistry<NodeType> {
209210
.map(property => ({
210211
type: 'editor',
211212
id: property.id,
212-
label: property.ui?.label,
213+
label: this.translateLabel(property.ui?.label),
213214
editor: property.ui?.inspector?.editor,
214215
editorOptions: property.ui?.inspector?.editorOptions,
215216
position: property.ui?.inspector?.position,
216217
hidden: property.ui?.inspector?.hidden,
217-
helpMessage: property.ui?.help?.message,
218+
helpMessage: this.translateLabel(property.ui?.help?.message),
218219
helpThumbnail: property.ui?.help?.thumbnail
219220
})
220221
),
221222
...references.filter(p => p.ui?.inspector?.group === group.id)
222223
.map(reference => ({
223224
type: 'editor',
224225
id: reference.id,
225-
label: reference.ui?.label,
226+
label: this.translateLabel(reference.ui?.label),
226227
editor: reference.ui?.inspector?.editor,
227228
editorOptions: reference.ui?.inspector?.editorOptions,
228229
position: reference.ui?.inspector?.position,
229230
hidden: reference.ui?.inspector?.hidden,
230-
helpMessage: reference.ui?.help?.message,
231+
helpMessage: this.translateLabel(reference.ui?.help?.message),
231232
helpThumbnail: reference.ui?.help?.thumbnail
232233
})
233234
),
234235
...views.filter(v => v.group === group.id)
235236
.map(property => ({
236237
type: 'view',
237238
id: property.id,
238-
label: property.label,
239+
label: this.translateLabel(property.label),
239240
view: property.view,
240241
viewOptions: property.viewOptions,
241242
position: property.position,
242-
helpMessage: property.helpMessage
243+
helpMessage: this.translateLabel(property.helpMessage)
243244
})
244245
)
245246
], 'position', 'id')
@@ -304,4 +305,16 @@ export default class NodeTypesRegistry extends SynchronousRegistry<NodeType> {
304305
propertyName => propertyDefinitions[propertyName]?.ui?.inlineEditable || false
305306
);
306307
}
308+
309+
private translateLabel(label: string | undefined): string | undefined {
310+
if (!label) {
311+
return label;
312+
}
313+
// The method throws an error if the label is not a valid translation address
314+
try {
315+
return translate(label, label);
316+
} catch {
317+
return label;
318+
}
319+
}
307320
}

‎packages/neos-ui-editors/src/EditorEnvelope/index.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ import ReactMarkdown from 'react-markdown';
55
import omit from 'lodash.omit';
66

77
import {Tooltip, Label, Icon} from '@neos-project/react-ui-components';
8-
import I18n from '@neos-project/neos-ui-i18n';
98
import {neos} from '@neos-project/neos-ui-decorators';
109

1110
import style from './style.module.css';
1211

1312
@neos(globalRegistry => ({
14-
editorRegistry: globalRegistry.get('inspector').get('editors'),
15-
i18nRegistry: globalRegistry.get('i18n')
13+
editorRegistry: globalRegistry.get('inspector').get('editors')
1614
}))
1715
export default class EditorEnvelope extends PureComponent {
1816
state = {
@@ -34,7 +32,6 @@ export default class EditorEnvelope extends PureComponent {
3432
renderSecondaryInspector: PropTypes.func,
3533
editor: PropTypes.string.isRequired,
3634
editorRegistry: PropTypes.object.isRequired,
37-
i18nRegistry: PropTypes.object.isRequired,
3835
validationErrors: PropTypes.array,
3936
onEnterKey: PropTypes.func,
4037
helpMessage: PropTypes.string,
@@ -104,7 +101,7 @@ export default class EditorEnvelope extends PureComponent {
104101

105102
return (
106103
<Label className={style.envelope__label} htmlFor={this.generateIdentifier()}>
107-
<I18n id={label}/>
104+
{label}
108105
{this.renderHelpIcon()}
109106
</Label>
110107
);
@@ -126,14 +123,13 @@ export default class EditorEnvelope extends PureComponent {
126123
}
127124

128125
renderHelpMessage() {
129-
const {i18nRegistry, helpMessage, helpThumbnail, label} = this.props;
126+
const {helpMessage, helpThumbnail, label} = this.props;
130127

131-
const translatedHelpMessage = i18nRegistry.translate(helpMessage);
132128
const helpThumbnailSrc = this.getThumbnailSrc(helpThumbnail);
133129

134130
return (
135131
<Tooltip renderInline className={style.envelope__helpmessage}>
136-
{helpMessage ? <ReactMarkdown children={translatedHelpMessage} linkTarget="_blank" /> : ''}
132+
{helpMessage ? <ReactMarkdown children={helpMessage} linkTarget="_blank" /> : ''}
137133
{helpThumbnail ? <img alt={label} src={helpThumbnailSrc} className={style.envelope__helpThumbnail} /> : ''}
138134
</Tooltip>
139135
);

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

+35-12
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import mapValues from 'lodash.mapvalues';
66
import {connect} from 'react-redux';
77

88
import I18n from '@neos-project/neos-ui-i18n';
9-
import {Bar, Button, Tabs, Icon, Badge} from '@neos-project/react-ui-components';
9+
import {Bar, Button, Tabs, Icon, Badge, IconButton} from '@neos-project/react-ui-components';
1010
import debounce from 'lodash.debounce';
1111

1212
import {SecondaryInspector} from '@neos-project/neos-ui-inspector';
@@ -83,7 +83,8 @@ export default class Inspector extends PureComponent {
8383
toggledPanels: {},
8484
viewConfiguration: null,
8585
originalViewConfiguration: null,
86-
propertyFilter: null
86+
propertyFilter: null,
87+
isFilterBarVisible: false
8788
};
8889

8990
configurationIsProcessed = false;
@@ -244,24 +245,30 @@ export default class Inspector extends PureComponent {
244245
});
245246
}
246247

248+
handleFilterToggle = () => {
249+
this.setState({
250+
isFilterBarVisible: !this.state.isFilterBarVisible
251+
});
252+
}
253+
247254
closeSecondaryInspectorIfNeeded = () => {
248255
if (this.state.secondaryInspectorComponent) {
249256
this.props.closeSecondaryInspector();
250257
}
251258
}
252259

253260
isPropertyEnabled = item => {
254-
const {propertyFilter} = this.state;
255-
if (propertyFilter && item.id.toLowerCase().indexOf(propertyFilter) === -1) {
256-
// console.debug('Property not matching filter', item.label, propertyFilter);
261+
const {focusedNode, propertyFilter} = this.state;
262+
263+
// Only show properties that have their label matching the filter
264+
if (propertyFilter && item.label.toLowerCase().indexOf(propertyFilter) === -1) {
257265
return false;
258266
}
259267

260268
if (item.type !== 'editor') {
261269
return true;
262270
}
263271

264-
const {focusedNode} = this.props;
265272
if (item?.hidden || (focusedNode?.isAutoCreated === true && item?.id === '_hidden')) {
266273
// This accounts for the fact that auto-created child nodes cannot
267274
// be hidden via the inspector (see: #2282)
@@ -340,6 +347,12 @@ export default class Inspector extends PureComponent {
340347
i18nRegistry,
341348
isWorkspaceReadOnly
342349
} = this.props;
350+
const {
351+
isFilterBarVisible,
352+
viewConfiguration,
353+
secondaryInspectorComponent
354+
} = this.state;
355+
343356
if (focusedContentNodesContextPaths.length > 1) {
344357
return (
345358
<div
@@ -372,7 +385,7 @@ export default class Inspector extends PureComponent {
372385
return this.renderFallback();
373386
}
374387

375-
if (!this.state.viewConfiguration?.tabs) {
388+
if (!viewConfiguration?.tabs) {
376389
return this.renderFallback();
377390
}
378391

@@ -386,15 +399,25 @@ export default class Inspector extends PureComponent {
386399
/>,
387400
document.body
388401
)}
389-
<SelectedElement/>
390-
<input type="text" placeholder="Filter properties…" onChange={this.handleFilter} />
402+
<div>
403+
<SelectedElement/>
404+
<IconButton
405+
id="btn-ToggleInspectorFilter"
406+
className=""
407+
icon="ellipsis-v"
408+
onClick={this.handleFilterToggle}
409+
/>
410+
{isFilterBarVisible && (
411+
<input type="search" placeholder="Filter properties…" onChange={this.handleFilter} />
412+
)}
413+
</div>
391414
<Tabs
392415
className={style.tabs}
393416
theme={{
394417
tabs__content: style.tabsContent // eslint-disable-line camelcase
395418
}}
396419
>
397-
{this.state.viewConfiguration?.tabs
420+
{viewConfiguration?.tabs
398421
//
399422
// Only display tabs, that have groups and these groups have properties
400423
//
@@ -456,11 +479,11 @@ export default class Inspector extends PureComponent {
456479
</Bar>
457480
{
458481
shouldShowSecondaryInspector &&
459-
this.state.secondaryInspectorComponent &&
482+
secondaryInspectorComponent &&
460483
<SecondaryInspector
461484
onClose={this.handleCloseSecondaryInspector}
462485
>
463-
{this.state.secondaryInspectorComponent}
486+
{secondaryInspectorComponent}
464487
</SecondaryInspector>
465488
}
466489
</div>

0 commit comments

Comments
 (0)