Summary: Make sure that DataSources can be serialized directly with a single setting, just like plain state atoms
Reviewed By: nikoant
Differential Revision: D26944954
fbshipit-source-id: 2b0d625d7d67f27a7c2e33dd7c4b534dfa4d3e82
Summary: ..and some earlier reviews comments has been processed + some fine tuning on the ui
Reviewed By: priteshrnandgaonkar
Differential Revision: D26816559
fbshipit-source-id: adf2586763be185ee8e7cc22b2827ecefe4e4cab
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
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
Summary:
Per title. Give the user some feedback on why he doesn't see any records (filtering to aggressive vs there are simply no records).
Fixes the old Flipper behavior where tables are merely empty, which always looks kinda broken to me. (Didn't it work, or is there nothing?)
Reviewed By: nikoant
Differential Revision: D26611173
fbshipit-source-id: 7ac798bd7d5c31f6d9fbacf30c6727d2e0e94570
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
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
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
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
Summary: Show a hint during scrolling of the relative offset the user is looking at. This is based on the current virtualisation window, so not 100% accurate, but probably still provides the right signal to the user. See the bottom right of the recording
Reviewed By: nikoant
Differential Revision: D26450261
fbshipit-source-id: 206a860024e346c6b872edc3fc7919019046a6d7
Summary: Introduced search bar and support for custom buttons therein.
Reviewed By: nikoant
Differential Revision: D26338666
fbshipit-source-id: e53cd3c4381e11f5f90c05c92e39a6c8ac2eca65
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
Summary:
First rudementary setup of DataTable component that follows a data source. Initially used react-virtuose library, but it performed really badly by doing expensive layout shifts and having troublesome scroll handling. Switched to react-virtual library, which is a bit more level, but much more efficient, and the source code is actually understandable :)
Features:
- hook up to window events of datasource
- high and low prio rendering, based on where the change is happening (should be optimized further)
- sticky scrolling support
- initial column configuration (custom rendering, styling, columns etc will follow in next diffs)
Reviewed By: nikoant
Differential Revision: D26175665
fbshipit-source-id: 224be13b1b32d35e7e01c1dc4198811e2af31102
Summary:
Changelog: Fixed issue where a Flipper crash would result in an entirely blank screen, rather than a useful error message.
While debugging another issue, discovered that React errors that happen outside a Plugin aren't caught at all, resulting in the infamous gray screen of deaths. This was the case because no error boundary has been set up for our Chrome, and since React 16 the default error handling has becoming rendering blank, rather than freezing. See https://reactjs.org/docs/error-boundaries.html#new-behavior-for-uncaught-errors.
Thanks to ant.design styling this decently was trivial :). But sadly involved a component class since error boundaries are not yet available as hook.
With these changes the errors should also end up more readably in our monitoring.
Reviewed By: nikoant
Differential Revision: D26422666
fbshipit-source-id: 6c0f8611c80a4a5e0d7e61d58afcf5eabe410e57
Summary: Wired up tracking to all chrome sections and some import UI elements
Reviewed By: jknoxville
Differential Revision: D25219089
fbshipit-source-id: c75bed91894609dafc5fcc6423a5228211fb92d8
Summary:
This wires up tracking directly to the ANT component library for the following components:
1. `Button`
2. `Collapse.Panel`
3. `Tabs`
Other less commonly used elements can be connected in the future if needed.
I played a bit with different patterns, but in testing the patch-package patching give the most reliable results. Alternatives considered:
1. Expect users to explicitly wrap there components, e.g. `<Tracked><Button>Hi</Button></Tracked>`
1. Didn't implement this because it would be very common to forget, and at the moment you want to make some analysis you'll discover there is no interesting data available. I think for tracking we want to have opt-out rather than opt-in
2. The additional wrapping can cause some subtile layout issues due to static field inspection / forwarded refs (e.g. Ant often has an assumption that relevant children types are _directly_ nested under their parent element. For examle `<Tooltip><Tracked><Button>` does not work as expected
2. Expose our own `Button` / `Collapse` / `Tabs` that applies `Tracked` to an underlying Ant component.
1. also suffers from 1.b.
2. It is gonna be quite confusing for other devs that some elements would need to be imported from `flipper-plugin`, ant some from `antd`, and that this is likely to change over time. We could lint against it, but it will be still suboptimal
Reviewed By: jknoxville
Differential Revision: D25196321
fbshipit-source-id: b559356498c3191a283062a88daacb354b0f79f4
Summary:
Set up basic primitives for user interaction tracking. I hope the docs and unit tests in this diff are self explanatory :)
In upcoming diffs:
* Wire up to scuba events
* Annotate all important parts of Flipper Chrome
* Investigate if we can wrap important interactions of ANT by default
Reviewed By: jknoxville
Differential Revision: D25120234
fbshipit-source-id: 9849d565d7be27e498cc2b4db33e7d6e6938ee06
Summary: This prefixes APIs of `flipper-plugin`, that are used by Flipper, but should not be used by plugins directly, with `_`. Also added tests to make sure we are always intentional when extending the exposed APIs
Reviewed By: passy
Differential Revision: D24991700
fbshipit-source-id: ed3700efa188fca7f5a14d5c68250598cf011e42
Summary:
allow-large-files
This diff introces the `NUX` element that can be wrapped around any other element to give a first-time usage hint.
Hint dismissal is stored by taking a hash of the hint contents, and scoped per plugin.
Users can reset the 'read' status in the settings page
Example usage:
```
<NUX
title="Use bookmarks to directly navigate to a location in the app."
placement="right">
<Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
</NUX>
```
Reviewed By: nikoant
Differential Revision: D24622276
fbshipit-source-id: 0265634f9ab50c32214b74f033f59482cd986f23
Summary: This blesses the `Layout` and `theme` components and exposes them from `flipper-plugin`, so that they can be used in (public) Sandy plugins. Also marked old abstractions as going to be deprecated.
Reviewed By: cekkaewnumchai
Differential Revision: D24503560
fbshipit-source-id: a8f384667b8f66e3b9f00771a123fe5c9d755eb3
