Summary:
Currently, we call onSelect in DataTable only when user changes their selection. At that moment, we pass the row data to the `onSelect` callback. However, if later the data changes, but the selection stays the same, we do not call `onSelect` again. As result, any listener to onSelect does not receive the latest data.
In this diff, we start calling `onSelect` when the selection does not change, but the underlying data does.
Reviewed By: mweststrate
Differential Revision: D37520346
fbshipit-source-id: a88d34654e9ad0721caf5918dde49b86ba20fc1f
Summary:
This diff builds on the previous ones by enabling other colors to be used as highlights for the search terms. Current color options are: yellow(default), red, blue, green. Possible extensions to this feature could include allow the user to enter a custom hex-color string and use that as the highlight color.
Changelog: DataTable will now have option to have its search terms highlighted in the search results by toggling and customizing the highlight colors in the menu bar
Reviewed By: mweststrate
Differential Revision: D37383163
fbshipit-source-id: c81e383c0570ef5efbf3171b92b81a8fb2e55ea7
Summary: Building on the previous diff which added a setting to enable/disable highlighting search terms in the logs. This diff adds the actual highlighting and connects with the setting. The highlighting currently only supports one color, while the next diff will seek to support a preset of a "custom" colors for the highlighting
Reviewed By: mweststrate
Differential Revision: D37348441
fbshipit-source-id: 7a2b74b16f239d5e36c213e06ccb86f74eaa8df5
Summary:
Created search highlight settings to be stored as part of persisted state. Added toggle/menu option in the dropdown.
This diff serves as the start of the stack that introduces highlighting the search terms in the search results of flipper. Currently, the results returned do not show why(the key word) they are appearing.
The next diffs will introduce not only the actual highlighting but also "custom"-ish color-picking for the highlights. The colors will be chosen from the sub-menu where the highlighting is enabled.
Reviewed By: mweststrate
Differential Revision: D37229735
fbshipit-source-id: d681f8e7b7fdfce8135c2c3fa81d8450447565c1
Summary:
Added a mouse hover state to detail inspector. The hover state follows you into and out of the hierarchy.
changelog: Added hover state to detail inspector
Reviewed By: mweststrate
Differential Revision: D36781553
fbshipit-source-id: eafbf119a81779bf07199142d305b06ad6b98c52
Summary:
Previously if you activated context menu in detail inspector it would trigger a context menu for multiple
overlapping children. This behaviour can be observed in live by right clicking a nested property an selecting 'Copy value'.
Most of the time you will copy the entire tree as you are clicking on the parents context menu. This is
the solution recommended by the antd team. https://github.com/ant-design/ant-design/issues/33865 (see the
response fiddle from the maintainer)
changelog: Fixed bug when copying value from context menu in detail sidebar
Reviewed By: mweststrate
Differential Revision: D36781555
fbshipit-source-id: 010a04648eb90eb19a47aa0f1f2b0427c9f5f7cc
Summary:
Getting the behavior exactly right was tricky, now settled on the following:
* Don't automatically show the search history (the default) but introduce an explicit button to toggle it, as opening it by default was pretty obtrusive in testing
* Items are added to the history when using return / explicitly clicking search, to only get "clean" entries into the history, and not half complete searches. Needing to press enter might be to subtle since datatable will also search without that, but not searching on keypress felt as a regression as well.
* Introduced a menu item for clearing the search history
* Search history is persisted like search filters.
Yay to Antd's AutoComplete, which is really straightforward and cleanly composes with Input.Search.
Changelog: DataTable will now keep a history of search items when hitting <return> to search. Use the history button to bring up the history.
Reviewed By: aigoncharov
Differential Revision: D36736821
fbshipit-source-id: 8d18b85308a39bd1644057371040855d199545c7
Summary:
The `Control` button press, that hides the current search filter, had some specific logic to make sure that the current selection remained visible. Since this is now generically supported, this is no longer needed.
Also updated the `Control` button behavior to also toggle back the search filter if needed, which was never finished in the original implementation.
Changelog: DataTable: pressing the control key can be used to temporarily turn the current search filter on and off.
Reviewed By: aigoncharov
Differential Revision: D36736494
fbshipit-source-id: 2c4949efa0d6935735f61ee43f9268b7e27d1fcf
Summary:
During filter changes, DataTable would loose any selections made, which was posted multiple times as papercut
I didn't implement preserving multi line selections. That should be straightforward, but wasn't sure that'd be desirable or not.
Changelog: DataTable: Data tables will now preserve the current selection and scroll it into view when changing the search filter.
Reviewed By: aigoncharov
Differential Revision: D36736496
fbshipit-source-id: 401ef351c847f58a5d411cf9f352390f6a110b24
Summary:
DataTable selected rows are a bit hard to spot when changing search, scrolling etc, so give them a bit more prominent background
Changelog: DataTable: more pronounced background color for selections
Reviewed By: aigoncharov
Differential Revision: D36736495
fbshipit-source-id: 2cab9eb99594ffaaccdd9ebe0d922691adb27bdc
Summary:
This adds support for the key of DataTableColumn to be a dotted path into a nested object, e.g foo.bar. Currently the typescript types only allow a top level key to be set, making this feature currently unusuable from plugin code.
While this could be addressed in a future commit the intention of this is to allow the user to add custom fields into their table columns at run time
Note there is a side effect to free text search from this commit. Previously it would search all top keys in the object. Now it will only search in columns that are in the table.
changelog: Searching data table will now only search columns in the table, rather than all top level attributes of the object
Reviewed By: mweststrate
Differential Revision: D36663929
fbshipit-source-id: 3688e9f26aa7e1828f8e9ee69f8e6f86268c8a54
Summary:
When filter is applied for the first time we shouldn't debounce to avoid "flashing" on datatable loading when it is first loaded without filter and then filter applied after 250ms.
Changelog:
Fixed flashing on opening datatable-based plugin with a filter.
Reviewed By: timur-valiev
Differential Revision: D36602929
fbshipit-source-id: 8bd33f50c92036f2a5565f636f4f2fbe69d900f2
Summary:
As we persist column filters between sessions - sometimes it's not obvious that they are applied.
This diff adds "Reset filters" action just near message "No records match the current search / filter criteria" to make it obvious that some records are hidden because of filters and let user quickly disable filters to see all items.
The same action also added to datatable's context menu.
Changelog:
Quick action "Reset filters" for datatable-based plugins which is shown in context menu and in empty table when all items filtered out.
Reviewed By: timur-valiev
Differential Revision: D36600535
fbshipit-source-id: 782e7f863f2f52d7f6017685bdebcb1feeb97dbd
Summary: Expose uuid from flipper-common as it is required in multiple packages
Reviewed By: lblasa
Differential Revision: D36441889
fbshipit-source-id: 1fa539cb437976dbefe7d5d9a52e5e098a6402a7
Summary:
Adding a feature to Flipper's Logs plugin where:
1) you search for something,
2) click on a line among the filtered search results,
3) press control,
4) get taken back to unfiltered list of all messages, centered on your selected line
This is to help debugging where the user may add a print statement but the error happens after it, and it's difficult to catch without a lot of scrolling.
Reviewed By: mweststrate
Differential Revision: D33446285
fbshipit-source-id: 19aa472a12de074e561dbe37b44821fc29bf5c91
Summary:
Changelog: most data tables allow for horizontal scrolling now if they run out of space
This diff introduces support for horizontal scrolling in datatables. Originally thought about making this a view option, but doing automatically works actually quite fine. By default the columns resize as they did, but if either a column is made bigger or the window is so small no space is left, a horizontal scrollbar can be used.
This adresses several usability issues reported in GH / workplace
fixes https://github.com/facebook/flipper/issues/2608
Reviewed By: antonk52
Differential Revision: D33368216
fbshipit-source-id: 206c761a5873cf0396af091f2cbdedc3e638afac
Summary:
Changelog: Data tables will now remember their configuration by default and share it across different applications
As reported, column configurations were often not remembered across restarts. This was caused by two things
1. persisting config was by default turned off
2. the persistence key was based on pluginKey, that includes device and client identification, rather than purely the plugin name.
Reviewed By: cekkaewnumchai
Differential Revision: D33364780
fbshipit-source-id: 6c38182dc35e3cce23b858f931d554111b080c97
Summary:
changelog: Improved column widths in data tables
This diff fixes two issues:
1) dynamic width columns became invisible if there is too much else, and therefor it was hard to make them bigger or even notice them
2) column headers could be out of sync with the actually rendered rows, due to minor styling differences
Reviewed By: cekkaewnumchai
Differential Revision: D33364781
fbshipit-source-id: c3d47bb8db4af521859a5cbdf525d8ce39c71d00
Summary: In dev build there were tons of warnings on opening table context menu, because some items had same keys. This diff fixes that by differentiating item keys.
Reviewed By: mweststrate
Differential Revision: D33277520
fbshipit-source-id: aca2fa2f1163a2b6782be0ca4c5baebdecc5acd5
Summary:
This diff adds `types` fields on the compiler config for every project. This way we can make sure that for example node types and packages are not available in flipper-ui-core. Without an explicit types field, all types would be shared between all packages, and implicitly included into the compilation of everything. For the same reason `types/index.d.ts` has been removed, we want to be intentional on which types are being used in which package.
This diff does most of the work, the next diff will fine tune the globals, and do some further cleanup.
As an alternative solution I first tried a `nohoist: **/node_modules/types/**` and make sure every package list explicitly the types used in package json, which works but is much more error prone, as for example two different react types versions in two packages will cause the most unreadable compiler error due to the types not being shared and not literally the same.
Reviewed By: lawrencelomax
Differential Revision: D33124441
fbshipit-source-id: c2b9d768f845ac28005d8331ef5fa1066c7e4cd7
Summary: Changelog: Expose "downloadFile" API to Flipper plugins. Allow them to download files form the web to Flipper Server.
Reviewed By: mweststrate
Differential Revision: D32950685
fbshipit-source-id: 7b7f666e165ff7bf209230cdc96078272ede3616
Summary:
Remove crypto dep, which was only used by NUX, to hash the elements that has been confirmed.
Sadly trickier than hoped; there is no uniform api in both browser and Node available that can take a sha-256 hash, and the browser APIs are async.
Reviewed By: aigoncharov
Differential Revision: D32721204
fbshipit-source-id: 32625f83bf6c60cedc4fb7096240c2fa0d8434a7
Summary: Add shared FileSelector component compatibe with the new FlipperLib API
Reviewed By: mweststrate
Differential Revision: D32667100
fbshipit-source-id: dca1e8b7693d134a99617e916c7cfd30432cef78
Summary:
- Per the title, we're explicitly setting the `flex-basis` to 0 and `flex-grow` and `flex-shrink` to 1.
- We've noticed that the `Sidebar` does not allow shrinking less than half the page when `flex-basis` is 1.
- With this change, we can now resize the `Sidebar` component without issue.
- ** We're taking this approach because the linter has issues with us using `styled` with `Sidebar` **
#nocancel
Differential Revision: D32477863
fbshipit-source-id: 99a50bc047d59add833c1fc113ab159c08767e05
Summary:
I've decided to migrate [a desktop plugin](https://github.com/bamlab/react-native-performance) to Sandy.
When doing so, I decided to rise to the challenge from the [Flipper docs](https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic): `we are going to pretend that we always write unit tests first` 😅
However, I've realized that when creating a plugin with `npx flipper-pkg init`, running `yarn jest` directly after creation actually fails.
There are 3 issues solved in the different commits:
1. an absolute import seem to not be resolved, since all the other imports were relative in the file, I changed it as well
2. some dependencies are missing.
They used to be included in the `flipper` dependency but when migrating to use `flipper-plugin` instead, they're not present anymore.
I don't think this is an ideal fix, I would believe a dependency like a `flipper-dev-environment` including all of those would be more appropriate. So I'm open to suggestions to fix/remove of course
3. jest.config needs to be fixed to run in jsdom environment and ensure we can test the react component
## Changelog
Fix: ensure desktop plugin template tests run
Pull Request resolved: https://github.com/facebook/flipper/pull/3039
Test Plan:
I've cloned the repo and run:
```
cd flipper/desktop/pkg
yarn
cd ../../..
./flipper/desktop/pkg/bin/run init
```
I run the tests on the newly package created, but it actually still failed because of the first issue (since it still installed `flipper-plugin` from npm`)
However, by adding this patch, it now runs!
```patch
diff --git a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js
index 2e07ff5..ff3181d 100644
--- a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js
+++ b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js
@@ -39,7 +39,7 @@ const useAssertStableRef_1 = require("../../utils/useAssertStableRef");
const PluginContext_1 = require("../../plugin/PluginContext");
const lodash_1 = require("lodash");
const useInUnitTest_1 = require("../../utils/useInUnitTest");
-const createDataSource_1 = require("flipper-plugin/src/state/createDataSource");
+const createDataSource_1 = require("../../state/createDataSource");
function DataTable(props) {
var _a, _b;
const { onRowStyle, onSelect, onCopyRows, onContextMenu } = props;
```
Reviewed By: aigoncharov
Differential Revision: D32358207
Pulled By: mweststrate
fbshipit-source-id: 7761b4150c24dd5379a24c3c1deeb78bf3dda4ee
Summary: Fixed some incorrect non-null assertions that showed up in monitoring.
Reviewed By: timur-valiev
Differential Revision: D32278433
fbshipit-source-id: afe4913d8aef38c371461b4d0b817b2625153de1
Summary: - We are using the `Sidebar` component in our `LogViewer` implementation and we noticed that it needed some styling updates to be used properly as a vertical `Sidebar`.
Reviewed By: mweststrate
Differential Revision: D32083159
fbshipit-source-id: 441f3972ae900b5d5f353d3c7b56117c489850ba
Summary: Current implementation uses type `string` as a key for indexing items stored in datasource. However, users can provide any key as an index which means that the type of index item can be anything, not only string. This diff introduces a more refined types for the key. It adds another requirement to provide a key property to a generic which is used to infer the index type.
Reviewed By: mweststrate, aigoncharov
Differential Revision: D31895751
fbshipit-source-id: 19ba907bd6f35df87e3fa442db5fc5cec6af174d
Summary:
- We're using the `Tabs` component from `flipper-plugin` and upon adding them, we noticed that our view being displayed within the tabs no longer scrolled and the tab internally was being stretched far off the screen. (D31538124)
- After egp did some digging, he discovered that by adding the `maxWidth` style property to the inner `Layout.Container`, the tab no longer stretched and the scrolling was restored.
- We played around by adding wrapper elements around the contents of our Tab and adding the same style prop, but this did not yield the same result.
***Would Love some input from the Flipper team as to the best way to ensure that this won't break other's plugins. Thank you!***
Reviewed By: mweststrate
Differential Revision: D31672790
fbshipit-source-id: 99cab1873f359f4c1827e4c94f2527636884c237
Summary: Moved Logger, sleep, timeout and server contract types to flipper-common packages.
Reviewed By: passy
Differential Revision: D31475790
fbshipit-source-id: 42d2147698875f9e919ad5250f9953f3bff3ec2d
Summary:
This diff cleans up order remaining dialogs, the ones involved in exporting to file or url. Includes some legacy component cleanup boyscouting, but not too much.
This removes a lot of code where state of the wizard was stored globally, and makes it locally instead.
Other code that was removed involves interaction with the old UI, which allowed import / export to be running in the background as well. (which is no longer needed since we optimised the process)
Reviewed By: timur-valiev
Differential Revision: D30192000
fbshipit-source-id: 13be883c5bf217a3d58b610b78516359e9bd0ebc
Summary:
This diff moves the dialogs
* Settings
* Plugin Manager
* Doctor
* Sign in
* Changelog
To use the imperative dialog APIs, rather then organising them through reducers which adds a lot of indirection which isn't really needed but hard to follow.
Reviewed By: passy
Differential Revision: D30192002
fbshipit-source-id: ba38b2e700da3e442653786448fcbf85074981ad
Summary:
Grey -> gray. "Cancelled" seems quite common in APIs though, so I disabled that.
A few promise cleanups
Reviewed By: aigoncharov
Differential Revision: D31323610
fbshipit-source-id: c8863d995936f451c24eb408fe5c26677187f089
Summary: Seems Antd always requires a `key` for Menu Items, even when React doesn't strictly need them.
Reviewed By: timur-valiev
Differential Revision: D30839589
fbshipit-source-id: 9cbef32c8fa083a7e23e486e15c537b4a9259a08
Summary: Based on afcoplan's feedback, now we're showing a button for launching the emulators instead of having it inline.
Reviewed By: mweststrate
Differential Revision: D30603659
fbshipit-source-id: edae6c63fd58647b406398c897215910938ae429
Summary:
This diff makes the new deeplink format feature complete, make sure VPN connection, plugin installation, client & device selection are now all handled. See the test plan for examples.
Changelog: Flipper now supports a richer protocol for opening deeplinks: https://fbflipper.com/docs/extending/deeplinks#open-plugin
Reviewed By: timur-valiev
Differential Revision: D30423809
fbshipit-source-id: e6cf4bf852b2c64e9a79a33ef0842eb27f68f840
Summary: Made it easier to build 'pick' dialogs, and introduced Dialogs.options for a set of radio buttions
Reviewed By: timur-valiev
Differential Revision: D30424708
fbshipit-source-id: 98abd0d64f47c552c81053b4433e5fc524574145
Summary: Introduce `Dialog.alert` to show users a FYI message, and be able to wait for it to be handled, as utility around several `Modal` utilities.
Reviewed By: jknoxville
Differential Revision: D29875484
fbshipit-source-id: 5d2ea83e486631ac18a81800b467f97dfaac6d34
Summary: Check if Flipper is up to date before handling deeplink.
Reviewed By: nikoant
Differential Revision: D29846236
fbshipit-source-id: 011d05958346c3d18c76cf0ae63c3cb087f5933c
Summary: Introduce convenience abstractions to make it easier to manage dialogs imperatively, by promisyfying common dialog abstractions.
Reviewed By: jknoxville, nikoant
Differential Revision: D29790462
fbshipit-source-id: c092c15cf569ec353b9c1042f25cd67e6c76db01
