Commit Graph

9 Commits

Author SHA1 Message Date
Michel Weststrate
525e079284 Implement deeplink, creating pastes, log deduplication
Summary:
This diff implements the remaining features in the logs plugin:

- deeplinking
- merging duplicate rows

The logs plugin source code has now been reduced from originally `935` to `285` LoC. All optimisation code has been removed from the plugin:

* debouncing data processing
* pre-rendering (and storing!) all rows

Finally applied some further styling tweaks and applied some renames to DataTable / DataSource + types finetuning. Some more will follow.
Fixed a emotion warning in unit tests which was pretty annoying.

Reviewed By: passy

Differential Revision: D26666190

fbshipit-source-id: e45e289b4422ebeb46cad927cfc0cfcc9566834f
2021-03-16 15:03:45 -07:00
Michel Weststrate
dec8e88aeb Add row styling
Summary:
Added styling / coloring to the new logs plugin, to bring it closer to feature completeness. Made the colum headers slightly more compact

Also made the API more foolproof by introducing the `useAssertStableRef` hook, that will protect against accidentally passing in props that would invalidate rendering every time.

Reviewed By: passy

Differential Revision: D26635063

fbshipit-source-id: 60b2af8db3cc3c12d8d25d922cf1735aed91dd2c
2021-03-16 15:03:45 -07:00
Michel Weststrate
59e6c98669 User experience improvements
Summary:
This diff has some jak-shaving UX improvements after playing with the DataTable a bit more:

Selection
* deselecting a row from a larger set will make the last selected item the default selection
* re-selecting an item in a single selection will unselect it

Column Filtering
* Introduced button to toggle between filtering on all, nothing, and the values present in the current selection

Column sorting
* The up / down arrows are now inidividually clickable, rather than action as a general toggle
* Title still works as a general toggle between asc / desc / not sorted

Context menu
* I found the context menu for column selection and on the selected rows itself a bit finicky to find and click and not super intuitive for noob users. Merged both menus instead into a single hamburger menu adjacent to the search bar

Reviewed By: passy

Differential Revision: D26580038

fbshipit-source-id: 220f501a1d996acbd51088c08ea866caed768572
2021-03-16 15:03:44 -07:00
Michel Weststrate
59a1327261 Introduce multi selection
Summary:
Make sure DataTable supports multiselection, which works largely the same as before, with a few changes

* shift + click and ctrl + click work as expected
* shift + keyboard navigation works as expected
* drag selection works as expected
* drag selection when dragging accross screens, or Shift icmw with HOME / END / PageUp / PageDown works as expect
* text selection stil works as expected

The context menu items have been updated as well
* filter will filter on all the distinct values in the selection
* copying cells will copy all cells of the given column in the selection, separated by newline
* copying rows / creating a past will create a json array of the selection

Not done yet

- Shifting the selection after inserting rows hasn't been implemented yet
- I'm not entirely happy with the context menu trigger, maybe a hamburger button in the toolbar will be better

Reviewed By: nikoant

Differential Revision: D26548228

fbshipit-source-id: 5d1cddd6aad02ce9649d7980ab3a223e222da893
2021-03-16 15:03:44 -07:00
Michel Weststrate
5c3a8742ef Introduce context menu
Summary:
Introduced a context menu for DataTable with some default options. Opted to put it under a visible hovered dropdown instead of on right-click, since this better alings with Ant's design guides (we don't have context clicks anywhere else I think), but if it isn't convincing we can still change it.

Included some default actions, to set up quick filters, and to copy values. For copying rows, implemented it to by default take the JSON from a row, rather than space separated values like in ManagedTable, as many existing plugins customize the onCopy handler to just do that, so it seemed like a better default since it is a richer format. If there are good use cases for the previous behavior, we'll probably find out after the old release :)

Introduced utility to copy text to clipboard in FlipperLib, but decoupled it from Electron.

Didn't include multi select yet, that will be done in a next diff.

Reviewed By: nikoant

Differential Revision: D26513161

fbshipit-source-id: b2b1b20b0a6f4ada9de2566bf6b02171f722c4aa
2021-03-16 15:03:44 -07:00
Michel Weststrate
11eb19da4c Introduce column filters
Summary:
Beyond a search across all columns, it is now possible to specific columns for specific values:

* for a row to be visible, all active column filters need to be matched (e.g. both a filter on time and app has to be satisfied)
* if multiple values within a column are filtered for, these are -or-ed.
* if no value at all within a column is checked, even when they are defined, the column won't take part in filtering
* if there is a general search and column filters, a row has to satisfy both

Filters can be preconfigured, pre-configured filters cannot be removed.

Reseting will reset the filters back to their original

Move `useMemoize` to flipper-plugin

Merged the `ui/utils` and `utils` folder inside `flipper-plugin`

Reviewed By: nikoant

Differential Revision: D26450260

fbshipit-source-id: 11693d5d140cea03cad91c1e0f3438d7b129cf29
2021-03-16 15:03:44 -07:00
Michel Weststrate
1ce665ceaf Added selection / keyboard navigation
Summary: per title

Reviewed By: nikoant

Differential Revision: D26368673

fbshipit-source-id: 7a458e28af1229ee8193dfe2a6d156afd9282acd
2021-03-16 15:03:43 -07:00
Michel Weststrate
fb7c09c972 Add support for search and custom actions
Summary: Introduced search bar and support for custom buttons therein.

Reviewed By: nikoant

Differential Revision: D26338666

fbshipit-source-id: e53cd3c4381e11f5f90c05c92e39a6c8ac2eca65
2021-03-16 15:03:43 -07:00
Michel Weststrate
44bb5b1beb Introduced sorting, column visibility and column resizing
Summary:
Add support for resizable columns, column sorting, and hiding / showing columns

Moved some utilities from Flipper to flipper-plugin, such as Interactive and LowPassFilter

Split DataTable into two components; DataSourceRenderer which takes care of purely rendering the virtualization, and DataTable that has the Chrome around that, such as column headers, search bar, etc.

Reviewed By: nikoant

Differential Revision: D26321105

fbshipit-source-id: 32b8fc03b4fb97b3af52b23e273c3e5b8cbc4498
2021-03-16 15:03:43 -07:00