Skip to content

[Property Editor] Can filter properties in the Property Editor #9022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elliette merged 14 commits into from
Mar 20, 2025
Merged

[Property Editor] Can filter properties in the Property Editor #9022

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3cc7607
Add search bar (does not filter yet
elliette Mar 6, 2025
9b3590a
Searching works
elliette Mar 7, 2025
9e53736
Add test cases
elliette Mar 11, 2025
3974a83
Merge branch 'master' into issue-8955
elliette Mar 13, 2025
e56bf7e
Has a few quirks
elliette Mar 13, 2025
322a493
Better
elliette Mar 13, 2025
cdf5b39
Re-order methods
elliette Mar 13, 2025
6700aa3
Fix tests
elliette Mar 13, 2025
34a2c73
Respond to PR comments
elliette Mar 18, 2025
a92d1d7
Delete stranded comment
elliette Mar 18, 2025
d46c813
Update test cases
elliette Mar 18, 2025
fd60357
Merge branch 'master' into issue-8955
elliette Mar 20, 2025
72a2bb2
Respond to PR comments
elliette Mar 20, 2025
c028575
Remove unused import
elliette Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions ...ools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_controller.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ import '../../../shared/analytics/analytics.dart' as ga;
import '../../../shared/analytics/constants.dart' as gac;
import '../../../shared/editor/api_classes.dart';
import '../../../shared/editor/editor_client.dart';
import '../../../shared/ui/filter.dart';
import '../../../shared/utils/utils.dart';
import 'property_editor_types.dart';

typedef EditableWidgetData =
({List<EditableArgument> args, String? name, String? documentation});
({List<EditableProperty> properties, String? name, String? documentation});

typedef EditArgumentFunction =
Future<EditArgumentResponse?> Function<T>({
Expand All @@ -21,7 +23,7 @@ typedef EditArgumentFunction =
});

class PropertyEditorController extends DisposableController
with AutoDisposeControllerMixin {
with AutoDisposeControllerMixin, FilterControllerMixin<EditableProperty> {
PropertyEditorController(this.editorClient) {
init();
}
Expand All @@ -46,6 +48,7 @@ class PropertyEditorController extends DisposableController
super.init();
_editableArgsDebouncer = Debouncer(duration: _editableArgsDebounceDuration);

// Update in response to ActiveLocationChanged events.
autoDisposeStreamSubscription(
editorClient.activeLocationChangedStream.listen((event) async {
final textDocument = event.textDocument;
Expand Down Expand Up @@ -81,6 +84,27 @@ class PropertyEditorController extends DisposableController
super.dispose();
}

@override
void filterData(Filter<EditableProperty> filter) {
super.filterData(filter);
final filtered = (_editableWidgetData.value?.properties ?? []).where(
(property) => property.matchesSearchToken(
RegExp(filter.queryFilter.query, caseSensitive: false),
),
);
filteredData
..clear()
..addAll(filtered);
}

@override
void setActiveFilter({
String? query,
SettingFilters<EditableArgument>? settingFilters,
}) {
super.setActiveFilter(query: query);
Comment thread
elliette marked this conversation as resolved.
Outdated
}

Future<EditArgumentResponse?> editArgument<T>({
required String name,
required T value,
Expand All @@ -107,13 +131,18 @@ class PropertyEditorController extends DisposableController
textDocument: textDocument,
position: cursorPosition,
);
final args = result?.args ?? <EditableArgument>[];
final properties =
(result?.args ?? <EditableArgument>[])
.map(argToProperty)
.nonNulls
.toList();
final name = result?.name;
_editableWidgetData.value = (
args: args,
properties: properties,
name: name,
documentation: result?.documentation,
);
filterData(activeFilter.value);
// Register impression.
ga.impression(
gaId,
Expand All @@ -127,9 +156,11 @@ class PropertyEditorController extends DisposableController
TextDocument? document,
CursorPosition? cursorPosition,
}) {
setActiveFilter();
if (editableArgsResult != null) {
_editableWidgetData.value = (
args: editableArgsResult.args,
properties:
editableArgsResult.args.map(argToProperty).nonNulls.toList(),
name: editableArgsResult.name,
documentation: editableArgsResult.documentation,
);
Expand All @@ -140,5 +171,6 @@ class PropertyEditorController extends DisposableController
if (cursorPosition != null) {
_currentCursorPosition = cursorPosition;
}
filterData(activeFilter.value);
}
}
11 changes: 10 additions & 1 deletion .../devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_types.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import 'package:devtools_app_shared/utils.dart';
import 'package:meta/meta.dart';

import '../../../shared/editor/api_classes.dart';
import '../../../shared/primitives/utils.dart';
import '../../../shared/ui/search.dart';

/// Record representing an option for an [EditableProperty].
typedef PropertyOption = ({String text, bool isDefault});
Expand Down Expand Up @@ -130,7 +132,7 @@ class EditableEnum extends EditableProperty with FiniteValuesProperty {
}
}

class EditableProperty extends EditableArgument {
class EditableProperty extends EditableArgument with SearchableDataMixin {
Comment thread
elliette marked this conversation as resolved.
Outdated
EditableProperty(EditableArgument argument)
: super(
name: argument.name,
Expand Down Expand Up @@ -167,6 +169,13 @@ class EditableProperty extends EditableArgument {
Object? convertFromInputString(String? _) {
throw UnimplementedError();
}

@override
bool matchesSearchToken(RegExp regExpSearch) {
return name.caseInsensitiveContains(regExpSearch) ||
valueDisplay.caseInsensitiveContains(regExpSearch) ||
type.caseInsensitiveContains(regExpSearch);
}
}

mixin NumericProperty on EditableProperty {
Expand Down
54 changes: 46 additions & 8 deletions ...s/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'package:flutter/material.dart';

import '../../../shared/primitives/utils.dart';
import '../../../shared/ui/common_widgets.dart';
import '../../../shared/ui/filter.dart';
import 'property_editor_controller.dart';
import 'property_editor_inputs.dart';
import 'property_editor_types.dart';
Expand All @@ -25,6 +26,7 @@ class PropertyEditorView extends StatelessWidget {
controller.editorClient.editArgumentMethodName,
controller.editorClient.editableArgumentsMethodName,
controller.editableWidgetData,
controller.filteredData,
],
builder: (_, values, _) {
final editArgumentMethodName = values.first as String?;
Expand All @@ -42,7 +44,8 @@ class PropertyEditorView extends StatelessWidget {
);
}

final (:args, :name, :documentation) = editableWidgetData;
final filteredProperties = values.fourth as List<EditableProperty>;
final (:properties, :name, :documentation) = editableWidgetData;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expand All @@ -51,11 +54,11 @@ class PropertyEditorView extends StatelessWidget {
name: name,
documentation: documentation,
),
args.isEmpty
properties.isEmpty
? _NoEditablePropertiesMessage(name: name)
: _PropertiesList(
editableProperties: args.map(argToProperty).nonNulls.toList(),
editProperty: controller.editArgument,
controller: controller,
editableProperties: filteredProperties,
),
],
);
Expand All @@ -66,12 +69,12 @@ class PropertyEditorView extends StatelessWidget {

class _PropertiesList extends StatefulWidget {
const _PropertiesList({
required this.controller,
required this.editableProperties,
required this.editProperty,
});

final PropertyEditorController controller;
final List<EditableProperty> editableProperties;
final EditArgumentFunction editProperty;

static const defaultItemPadding = borderPadding;
static const denseItemPadding = defaultItemPadding / 2;
Expand Down Expand Up @@ -99,10 +102,13 @@ class _PropertiesListState extends State<_PropertiesList> {
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_FilterControls(controller: widget.controller),
if (widget.editableProperties.isEmpty)
Copy link
Copy Markdown
Member

@kenzieschmoll kenzieschmoll Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what if editableProperties is empty and the filter query is empty? In this case, this message may not make sense

Copy link
Copy Markdown
Member Author

@elliette elliette Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is actually handled before we get here - if there are no editable properties at all we display a message instead of rendering the _PropertiesList:

devtools/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart

Line 58 in d46c813

? _NoEditablePropertiesMessage(name: name)

const _NoMatchingPropertiesMessage(),
for (final property in widget.editableProperties)
_EditablePropertyItem(
property: property,
editProperty: widget.editProperty,
editProperty: widget.controller.editArgument,
),
].joinWith(const PaddedDivider.noPadding()),
);
Expand Down Expand Up @@ -142,6 +148,29 @@ class _EditablePropertyItem extends StatelessWidget {
}
}

class _FilterControls extends StatelessWidget {
const _FilterControls({required this.controller});

final PropertyEditorController controller;

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(_PropertiesList.defaultItemPadding),
child: Row(
children: [
Expanded(
child: StandaloneFilterField<EditableProperty>(
controller: controller,
filteredItem: 'property',
),
),
],
),
);
}
}

class _PropertyLabels extends StatelessWidget {
const _PropertyLabels({required this.property});

Expand Down Expand Up @@ -289,6 +318,15 @@ class _NoEditablePropertiesMessage extends StatelessWidget {
}
}

class _NoMatchingPropertiesMessage extends StatelessWidget {
const _NoMatchingPropertiesMessage();

@override
Widget build(BuildContext context) {
return const Text('No properties matching the current filter.');
}
}

class _WidgetNameAndDocumentation extends StatelessWidget {
const _WidgetNameAndDocumentation({required this.name, this.documentation});

Expand Down Expand Up @@ -320,7 +358,7 @@ class _WidgetNameAndDocumentation extends StatelessWidget {
),
],
),
const PaddedDivider(),
const PaddedDivider(padding: EdgeInsets.all(noPadding)),
Comment thread
elliette marked this conversation as resolved.
Outdated
],
);
}
Expand Down
99 changes: 98 additions & 1 deletion ...ages/devtools_app/test/standalone_ui/ide_shared/property_editor/property_editor_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'dart:async';
import 'package:devtools_app/devtools_app.dart';
import 'package:devtools_app/src/shared/editor/api_classes.dart';
import 'package:devtools_app/src/standalone_ui/ide_shared/property_editor/property_editor_controller.dart';
import 'package:devtools_app/src/standalone_ui/ide_shared/property_editor/property_editor_types.dart';
import 'package:devtools_app/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart';
import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
Expand Down Expand Up @@ -61,7 +62,9 @@ void main() {
final argsCompleter = Completer<List<EditableArgument>>();
listener = () {
if (!argsCompleter.isCompleted) {
argsCompleter.complete(controller.editableWidgetData.value!.args);
argsCompleter.complete(
controller.editableWidgetData.value?.properties,
);
}
};
controller.editableWidgetData.addListener(listener!);
Expand Down Expand Up @@ -288,6 +291,95 @@ void main() {
});
});

group('filtering editable arguments', () {
testWidgets('can filter by name', (tester) async {
// Load the property editor.
await tester.pumpWidget(wrap(propertyEditor));

// Change the editable args.
controller.initForTestsOnly(editableArgsResult: result1);
await tester.pumpAndSettle();

final titleInput = _findTextFormField('String? title');
final widthInput = _findTextFormField('double width');
final heightInput = _findTextFormField('double? height');

// Verify all inputs are visible.
expect(_findNoPropertiesMessage, findsNothing);
expect(titleInput, findsOneWidget);
expect(widthInput, findsOneWidget);
expect(heightInput, findsOneWidget);

// Filter by the "width" property.
final filterField = _findFilterField();
expect(filterField, findsOneWidget);
await _inputText(filterField, text: 'width', tester: tester);

// Verify only the "width" property is visible.
expect(widthInput, findsOneWidget);
expect(titleInput, findsNothing);
expect(heightInput, findsNothing);
});

testWidgets('can filter by type', (tester) async {
// Load the property editor.
await tester.pumpWidget(wrap(propertyEditor));

// Change the editable args.
controller.initForTestsOnly(editableArgsResult: result1);
await tester.pumpAndSettle();

final titleInput = _findTextFormField('String? title');
final widthInput = _findTextFormField('double width');
final heightInput = _findTextFormField('double? height');

// Verify all inputs are visible.
expect(_findNoPropertiesMessage, findsNothing);
expect(titleInput, findsOneWidget);
expect(widthInput, findsOneWidget);
expect(heightInput, findsOneWidget);

// Filter by the "double" type.
final filterField = _findFilterField();
expect(filterField, findsOneWidget);
await _inputText(filterField, text: 'double', tester: tester);

// Verify only the "width" and "height" properties are visible.
expect(widthInput, findsOneWidget);
expect(heightInput, findsOneWidget);
expect(titleInput, findsNothing);
});

testWidgets('can filter by value', (tester) async {
// Load the property editor.
await tester.pumpWidget(wrap(propertyEditor));

// Change the editable args.
controller.initForTestsOnly(editableArgsResult: result1);
await tester.pumpAndSettle();

final titleInput = _findTextFormField('String? title');
final widthInput = _findTextFormField('double width');
final heightInput = _findTextFormField('double? height');

// Verify all inputs are visible.
expect(_findNoPropertiesMessage, findsNothing);
expect(titleInput, findsOneWidget);
expect(widthInput, findsOneWidget);
expect(heightInput, findsOneWidget);

// Filter by the "Hello world!" value.
final filterField = _findFilterField();
expect(filterField, findsOneWidget);
await _inputText(filterField, text: 'Hello world!', tester: tester);

// Verify only the "title" property is visible.
expect(titleInput, findsOneWidget);
expect(widthInput, findsNothing);
expect(heightInput, findsNothing);
});
});

group('editing arguments', () {
late Completer<String> nextEditCompleter;

Expand Down Expand Up @@ -713,6 +805,11 @@ final _findNoPropertiesMessage = find.text(
'No widget properties at current cursor location.',
);

Finder _findFilterField() => find.descendant(
of: find.byType(StandaloneFilterField<EditableProperty>),
matching: find.byType(TextField),
);

Finder _findTextFormField(String inputName) => find.ancestor(
of: find.richTextContaining(inputName),
matching: find.byType(TextFormField),
Expand Down
Loading