Summary: This diff adds a new PoC widget for the Layout Editor to select a string from a picker. It takes a Set of values and uses them as representation. One of them is considered selected.
Reviewed By: muraziz
Differential Revision: D23374681
fbshipit-source-id: 324a3dd74a6b16edb77b862345d5288dd714fea1
Summary:
`scrollTo` used there caused the window to scroll to the most left when a user was inspecting an element which horizontal scroll wasn't in the most left position.
This diff removes the horizontal constrain and only scroll vertically.
Reviewed By: mweststrate
Differential Revision: D23284227
fbshipit-source-id: 7c19cac7496927c631572e222cb1d635dd1f8ea4
Summary:
Converted the DeviceLogs plugin to sandy.
Kept logic and UI the same (so same batching, localstorage mechanisms etc). But used sandy api's for log subscribing, state, and separating the logical part of the component from the UI.
Note that some mechanisms work slightly different, like deeplinking and scrollToBottom handling, to reflect the fact that plugins are now long lived
Reviewed By: jknoxville
Differential Revision: D22845466
fbshipit-source-id: 7c98b2ddd9121dc730768ee1bece7e71bb5bec16
Summary: Useful for next diffs: enables to detect whether we have LithoComponent or CKComponent
Reviewed By: adityasharat
Differential Revision: D23128972
fbshipit-source-id: b9aef358c1426df4f05213c42e43402e8cae984f
Summary: Populate class name for Litho Components.
Reviewed By: adityasharat
Differential Revision: D22922106
fbshipit-source-id: e18b748e0e0bd6f511558124a28b4b58d217ded7
Summary:
Fix long standing issue where text by default in Flipper is not selectable. Which is super annoying when working with tables, trying to copy error messages, etc etc. Wanted to fix it with ant.design, but got so annoyed by not being able to select an error I needed, that I fixed it now :-P.
This diff makes all text selectable by default, and then bails out for specific elements, like section headers, button captions, the left toolbar (navigation) and top toolbar to preserve the desktop app look & feel.
Fixes a popular papercut issue
Changelog: All text is now selectable by default in Flipper.
Reviewed By: passy
Differential Revision: D22897793
fbshipit-source-id: 7bc50a987e012595956c07d1997959a5480790aa
Summary:
The current Popover component isn't compatible with the new (in progress) component library because it relies on overflowing container elements, which isn't allowed in the generic Layout component.
So this is a new Popover element, which uses absolute positioning instead. It takes heavy inspiration from the Tooltip and TooltipProvider components which do a similar thing.
Still to do:
[x] Edge cases when popover would be near a window edge
[x] Style it to look nice
[x] Split the use case (RatingButton) changes into a separate diff
[x] When the location of the popover container moves (the rating button in this case, e.g. if you resize the window), it doesn't currently cause the effect function in the popover, so it doesn't get moved when it should
[x] Add a little pointer thingy like a speech bubble
[x] Make sure it's perfectly positioned
[ ] Rename it to Popover and delete the old one. Not done, since it's just a stopgap.
Reviewed By: mweststrate
Differential Revision: D22693105
fbshipit-source-id: bc141433914bc20da48f8ae96764a95f7cd74ce5
Summary: All strong records with a matching record available in the store tab are underlined. When clicked on, it will direct the user to the corresponding store record.
Reviewed By: jonathoma
Differential Revision: D22622612
fbshipit-source-id: 537dbb282e4ae1ff695c577ab47c413d41a10fa4
Summary:
Bolded the record fields' keys if it is consistent (in the consistency white list).
*if the key is within an object, information on whether it is consistent will not be available in preview. The Object has to be physically expanded by the user in order to see the bolded key.
Reviewed By: mweststrate
Differential Revision: D22416084
fbshipit-source-id: 7eb1d8c65be07f880722a133b70195a4a63f0e75
Summary:
Found a bug in the archived device visualizer. I realized I never actually announced this feature to anyone, so fixing it up before doing so.
CHANGELOG: Visual Android View inspection available in layout plugin export files.
Reviewed By: passy
Differential Revision: D22548586
fbshipit-source-id: bcb5b8bee6aac7c76354d2c7cb44d72c7d23f5ca
Summary:
Created a few breakages. Would appreciate some closer eyes on this.
Pull Request resolved: https://github.com/facebook/flipper/pull/1366
Reviewed By: mweststrate
Differential Revision: D22501454
fbshipit-source-id: 9b882a12aecc65da85f29101bf87bf27519a7d2a
Summary: Unit tests with `.electron.tsx` are not run locally, as it is assumed they need Electron (?). However, since FBLogger is stubbed by default, it looks they all are actually runnable locally now.
Reviewed By: jknoxville
Differential Revision: D22431234
fbshipit-source-id: 9376923255bb96e2d7fc3bc8c3ec09962a07739c
Summary:
While reading through the Inspector I found this prop passed down and not used anywhere
printer_shredder
Reviewed By: Katalune
Differential Revision: D22431895
fbshipit-source-id: 6cbc97b3faec26349a1ad900ffa455e95f53bb2b
Summary: The ref would point to the DebouncedComponent instead of the ManagedTable passing an innerRef and handling binding manually.
Reviewed By: mweststrate
Differential Revision: D22374912
fbshipit-source-id: d404931405939ef8bfbde31f9aec7d531a3b62e3
Summary: Unit tests tend to randomly bail out once FBLogger is (indirectly) required by some module under test. This makes sure FBLogger is stubbed by default. We might want to do the same for `User` in the future.
Reviewed By: jknoxville
Differential Revision: D22186274
fbshipit-source-id: 2ede364c4b691d69826781355592226b075d8367
Summary: `forwardedRef` was always triggered, so it forced the container to scroll to the selected element. This diff stores element id so that it scrolls only once.
Reviewed By: mweststrate
Differential Revision: D22235284
fbshipit-source-id: 0eb7aaf2b484d345865db4da66d0f555dc314710
Summary: Fixed direct source import of Flipper code from layout plugin which broke its packaging
Reviewed By: cekkaewnumchai
Differential Revision: D22135716
fbshipit-source-id: 8f67a21ed94c13dd73d24ef8692d37ae51963319
Summary: The constructor that accepts `context` is deprecated and in turn causes `React.ComponentProps<typeof ManagedDataInspector>` and other type signatures to fail.
Reviewed By: mweststrate
Differential Revision: D22111964
fbshipit-source-id: 71553d749d0d7de6ef34350faa55d04433a639d1
Summary: I'm working on an attribute inspector that has particular top-level special keys that should not be editable, while the rest can be. This enables the functionality to allow dynamic determinations of what can be made editable, and is an additive non-breaking change to the API.
Reviewed By: mweststrate
Differential Revision: D22111965
fbshipit-source-id: 4bc6df0f76cf1e2bf0590235dcf543c665c7d8d8
Summary:
When the `Scrollable` component was introduced, this functionality regressed because the `ref` was no longer set on the right component.
changelog: Fix scrolling to inspected element in Layout plugin
Reviewed By: mweststrate
Differential Revision: D21979475
fbshipit-source-id: f84d515cb1593a33d1ae0e93a01681b6e11aa623
Summary:
`copyText` is generated when building rows for table, and is typically filled by JSON stringifying the incoming data. That is a pretty expensive process that could be done lazily. As shown in later diffs, this reduces the generation of rows for tables from ~18ms to ~3ms, which makes rendering a lot smoother.
(n.b. fixing the code duplication in the managedtables is part of the component lib plan)
Reviewed By: passy
Differential Revision: D21929660
fbshipit-source-id: 67cc69945e2bb28a6462a9d9ab765e33ced89378
Summary:
- Add value for null type to use `.value` easier
- Add value to string by directly converting to string if possible; otherwise null
Reviewed By: jknoxville
Differential Revision: D21788242
fbshipit-source-id: f3a9f995de6b4cb1b304981c8adaaba70105c988
Summary:
Update the UX of the mobilebuild download. When one clicks download one can see the the installation in progress in the main screen. Once its downloaded, you can open the finder pointed to the folder of download.
I didn't write the test for InstallSection as I was not able to test it through react-testing library. Seems like the data gets added to the document little late and not instantly.
Next work:
- Search in sidebar
- Persist downloaded app data for a session
- Show download data in the form of progress bar.
Reviewed By: mweststrate
Differential Revision: D21709229
fbshipit-source-id: e67db68ff16155230becf86c913dc6b1ec9d482c
Summary: This diff enables the babel transformer for emotion. It is supposed to be a bit faster, but the most interesting thing is that it will show component names inside the dom tree, which, at least for me, will be a huge performance booster is it will make it much easier to find out to which component style changes need to be applied
Reviewed By: nikoant
Differential Revision: D21722021
fbshipit-source-id: cab1278046b1aa7f8b875c016d43dfafdbaa0a2d
Summary:
Enabled linting rules that help to signal making errors with effect dependencies and such.
Fixed all errors, left any warnings generated by the hooks untouched
Reviewed By: nikoant
Differential Revision: D21721497
fbshipit-source-id: 9548453443fa7b663dc4d4289132f388c6697283
Summary: Previously, rows got highlighted after switching between data for `ManagedTable` even though `highlightableRows` was set to false. This diff forces the highlighting not to happen when the value is set to false
Reviewed By: mweststrate
Differential Revision: D21720266
fbshipit-source-id: 534944fe03ad1561bc2109468ae6c4c5f3fc947d
Summary: Trying to add tooltip to some components to promote tooltip itself and make it clearer what they do
Reviewed By: mweststrate
Differential Revision: D21649207
fbshipit-source-id: 4763ae9a99d687e6624c07bb636c5f4e869cafc9
Summary: Change some offset to make it point more direct to an element
Reviewed By: mweststrate
Differential Revision: D21649206
fbshipit-source-id: 64b4a3851e713baa6095d819a16cd207bebdf46f
Summary: Fixed a layout issue in the list items of GraphQL, background style / line didn't tend to continue when scrolling, because flexbox doesn't grow all lines similarly. Tables do.
Reviewed By: jonathoma
Differential Revision: D21662000
fbshipit-source-id: 767d2d7ffd7e5dacf2c49aa67babbb47a331282c
Summary:
We used flexbox to layout rows in the element inspector. The problem with that is that flexbox cannot nicely grow all its childrens to the largest one. Although we could still see contents thanks to the `overflow: visible` hack, this means that the backgrounds didn't continue when scrolling.
In contrast, tables do grow their children width :)
Also fixed an issue where the AX details tree wasn't scrollable
Reviewed By: cekkaewnumchai
Differential Revision: D21661766
fbshipit-source-id: 6b1d16c7aded8beebdd8a50f3e8ab0d9b8633e02
Summary:
in Layout plugin, scrollbars where often not visible, for example to see the vertical scrollbar, one had to scroll to the horizontal end first.
Also introduced the `Scrollable` component to simplify this in the feature and separate the concepts of rendering something large and making it scrollable.
This diff cleans up the layout structure and fixes the problem
changelog: Fixed several minor layout issues in the Layout plugin
Reviewed By: cekkaewnumchai
Differential Revision: D21283157
fbshipit-source-id: 81849151475165796c65001616f038a9d6cbdfb2
Summary:
Fixed the layout usage in QPL, the `horizontal` was correct, but the elements where swapped (the table was supposed to take all remaining size, and sidebar it's needed space, rather than the reverse).
Made this more explicit in the Layout component, by splitting it up in `Layout.(Top|Left|Right|Bottom)`, so that one has to make an explicit choice here, making it less error prone.
Reviewed By: passy
Differential Revision: D21572438
fbshipit-source-id: 29aa3462a3c96d048825be3157730e26182cb2fa
Summary:
This allows long text to be seen on the sidebar in database plugin. Also, remove weird padding in the sidebar and separate sidebar component to a new file
Refactoring is in the next diff
Reviewed By: mweststrate
Differential Revision: D21550672
fbshipit-source-id: 3e80be16783719e18392fe3d8f8068caf9283f8f
Summary:
To comply with recent agreement, coverage test for MultipleSelectorSection is added.
Also, add undefined check in `elements.tsx` found while adding the test
Reviewed By: mweststrate
Differential Revision: D21554782
fbshipit-source-id: 7cd868bf16f6105d6f523048f29bdaa052837f45
Summary: This diff updates the typescript version and it fixes `yarn lint:tsc`. It also successfully pointed out fes of the problems in our codebase. I have fixed those problems
Reviewed By: mweststrate
Differential Revision: D21548003
fbshipit-source-id: e69c986ee3c763588d9e1e290dad08d1cf1976a8
Summary: Naive implementation of searchable data inspector: matching of search term agains first level keys of data
Reviewed By: cgrushko
Differential Revision: D21510073
fbshipit-source-id: 2010e584248a64fb3351c95a5646b1935445a13b
Summary:
DataDescriptor currently shows a pencil icon next to text values starting with http/https. This is because otherwise it wouldn't be possible to edit them as a click would open the link in a web browser instead of triggering the edit mode.
Because of how this logic is implemented, it doesn't take into account whether editmode is enabled or not, thus it shows the pencil icon even when there's no need for it (custom plugins with no edit mode).
## Changelog
Fixed pencil icon visible in DataInspector for non-editable text fields
Pull Request resolved: https://github.com/facebook/flipper/pull/1002
Test Plan:
I tested this locally with LayoutInspector and my own custom plugin. The pencil still appears and works in the LayoutInspector but doesn't show up anymore in my custom plugin as the data there is not editable
## Result after the fix:
**Editable (LayoutInspector)**
**Non-Editable (Custom Plugin)**
Reviewed By: passy
Differential Revision: D21400359
Pulled By: mweststrate
fbshipit-source-id: 62b18f3f6c75c1b07440d51fca363d7e6fc60c6a
Summary: This allows props like `style` to be passed through (so it can be further styled), and makes `active` optional.
Reviewed By: jknoxville
Differential Revision: D21438791
fbshipit-source-id: bbab4a7768fce5de56e4deff67e50ff69914d123
Summary:
a bug found while trying to use multiple selector on Wilde. The data returned from specific call is not in the form that we expect. This caused an exception on layout plugin when using the selector
Specifically in WIlde, when we try to get data from node by calling client side to return it, sometimes the node has been invalidated or not saved. Hence, data returned are null or undefined. However, in previous implementation, this didn't take into consideration because we assumed that we always got correct data from client.
Reviewed By: mweststrate
Differential Revision: D21410989
fbshipit-source-id: 5135578606678973b504c9be897cb48fca547555
Summary:
There's an issue with the Searchable component, where the keys in manually typed filters (key=value) are case sensitive, but you would never know that because even after creating a filter by clicking on a cell, the new one looks capitalized "Tag=..." where really it is "tag=...".
This changes the blue filter tokens to show what you would have to type to recreate it.
I haven't made the key case insensitive because there may be some capitalized uses of it out in the world and that would break them.
Also, it would be nice, as the capitalized key tends to be equal to the column name you see in the header, but that column name can actually be anything, so that could be a bit misleading.
Context: https://fb.workplace.com/groups/flippersupport/permalink/869112616902731/
Reviewed By: mweststrate
Differential Revision: D21448087
fbshipit-source-id: 8b28e3b890f024bbad03ffd0809e9e1e888075f0
Summary:
This diff removes a bunch of performance bottlenecks of `DataInspector`, mostly by making sure that non new data structures are send to children during rendering. For example, before this diff, fields like `expanded`, `ancestry` and `path` would always be freshly constructed, resulting in new data structures send down, causing the full json tree to always re-render.
By migrating to hooks this became a lot easy to manage.
Also fixed some other minor component reuse issues
Fixed rendering of recursive trees which was broken in the past, and added regression test
Fixed issue with uppercase search string causing unnecessary re-filtering
Make sure changing expand / collapse resets the filter
Reviewed By: passy
Differential Revision: D21381647
fbshipit-source-id: 72834e15088432f55b4b9c88f182ffc9908d4e49
Summary:
This diff adds multiple selector UI on layout plugin, which shows up when there are more than one component at a touch.
This UI allows user to do similar thing to element inspector. Expanding functionality on main component will be added in next diffs.
Reviewed By: mweststrate
Differential Revision: D21214899
fbshipit-source-id: 5c9cae93122cc4f7c326ccd0878d2b9dddebf62b
Summary:
The component will show nothing if root element if not provided. In my case, I just want to reuse it without root specified due to elements are separated
## Explanation for seed and root
`flatElements` is the representation of component tree expressed in an array form. It is derived from an object `props.elements` where id (key) is corresponding to its information about a component (value). This includes children ids of a component. `flatElements` allows visual indentation to be easily done at render process; we can use level directly as the number of spaces we need to make.
`FlatElements` can be evaluated to tree by:
- the lowest number is the root of a tree (in this case, it is 1)
- a node with `i+1` level is a child of a closest previous node with level `i`
`seed` is the function trying to derive elements in object form to array form. First, it is given that there is one id to be a root node.
However, This component will not be rendered if a root node id is not given, while a root node id can be null or undefined, which doesn't make sense to me. In addition, if I want to reuse this component, this component should render without root node id given. That's the reason why there's this diff.
The implementation is as followed:
1. Set every node to be root (level 1)
2. Iterate through elements
2.1. Remove nodes that are children of elements because they cannot be roots
Assumed that there is no cycle, in the end we get all root nodes. Then, we do `seed` for all root nodes to get all trees in `FlatElements` structure
Even though to cover my feature the removal of ids are not needed because we know that all elements will be roots of themselves, I want to cover the case that a user wants tree-like (or forest-like) hierarchy view without given root id.
(Disclaimer: this is written from what I have observed while investigating this. I am not a person who have initially designed this, so apologize in advance in this is not correct)
Reviewed By: mweststrate
Differential Revision: D21214897
fbshipit-source-id: 7657d0ea8607e07e97be968ef927f17c2bc8990e
Summary: Panels need to let their content overflow, for example the color picker.
Reviewed By: priteshrnandgaonkar
Differential Revision: D21404621
fbshipit-source-id: 70498e335c9fcb3767aaef2bbd2ce22324adc8e5
Summary:
Before this diff filtering and manual expanding / collapsing could not be combined, this diff fixes that
{F236120000}
Reviewed By: jonathoma
Differential Revision: D21381515
fbshipit-source-id: b0662fcbad3b0dfcb0bfe846e3c05a3a78294dde
