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:
As suggested in the previous diff, I change the way to store row values. Now, (kinda) raw values are stored instead of processed values that can be used directly for `ManagedTable`. This simplifies logic in detail sidebar.
I'm not sure what the effect to performance.
Reviewed By: mweststrate
Differential Revision: D21621896
fbshipit-source-id: 472be3caa955ca32f876f81095af21e9c17cb159
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: Freshly init-ed plugins are not picked up by Flipper if they are not on the search path. This diff checks if the current dir is on the search path, and, if not, suggests to add it.
Reviewed By: jknoxville
Differential Revision: D21619632
fbshipit-source-id: b1dbe2695dbee9ce537999dc83e36f969ba4b747
Summary:
Created a test that snapshots the generated files, so that we can capture accidental regressions when generating files.
Also made the package id to package name a bit more robust
Reviewed By: jknoxville
Differential Revision: D21619633
fbshipit-source-id: 88ffb127e050d840df9ccd4b15ba29a71f341975
Summary:
Although there are tools that do this for you (create-react-app, react-native), and other that assume you are already in the created directory before you invoke the command (typescript, git), creating the directory by the tool has a few benefits:
1. less risk of making an accidental mess when people assume they don't need to create the dir first (I definitely ended up with a node_modules in the wrong directory)
1. it provide a naive way of detecting plugin name conflicts early (at least for plugins you create yourself)
1. in the next diff I'll add a pkg suggestion to add the current directory to the search path for flipper plugins. In the current setup, that would require needing to suggest to add the parent directory, which somehow feels less logical
2. makes sure that the directory name follows npm conventions: the package.json name should match the current directory name (not super important, but e.g VSCode will show warnings otherwise)
Reviewed By: jknoxville
Differential Revision: D21619631
fbshipit-source-id: 6d027ad18f14659e0347a66cacf056eacbc65680
Summary:
Added a watch mode to the bundle command of flipper plugins. This makes it easy to test develop plugins locally, even when you are using a production build of flipper, which lowers the barrier of developing / fixing plugins.
opted for `fs.watch` over watchman to avoid some overengineering:
1. pkg / pkg-lib don't have the watchman utilities that would be needed for this. I wasn't sure if I could move those over from `static` without breaking the bootstrapping process
2. watchman is often a nuisance on non FB machines that aren't set up for it. fs.watch in contrast doesn't have any further dependencies or setup requirements, and is much more likely to work ootb.
3. since we watch only the `src` folder we don't really need the watchman optimizations. (so for a package.json change people would have to restart, but I don't think that is much of a problem).
Reviewed By: jknoxville
Differential Revision: D21523814
fbshipit-source-id: b1de72b7d01c6fc50cb8ce5709f54f8019eb89e4
Summary: See previous diff, should have merged those two diffs
Reviewed By: jknoxville
Differential Revision: D21523815
fbshipit-source-id: 3db91d06d845f0764e28f0dbf3020e77812cde53
Summary: When opening a freshly generated plugin in VScode the IDE would be full of errors, even though it can bundle correctly thanks to the defaults used by bundle. This is fixed by diff by correctly setting up a tsconfig.
Reviewed By: jknoxville
Differential Revision: D21523817
fbshipit-source-id: 8f6b58fbfb704460ddb5b845ddfb137b28d37187
Summary: By adding a build command the flipper plugin can be picked up, even when using a production build of Flipper, as we don't require Flipper's own infrastructure anymore to compile plugins.
Reviewed By: jknoxville
Differential Revision: D21523819
fbshipit-source-id: eed935ee95a7e3bff2ace629836b4b2450b5d1ad
Summary:
As soon as any data was send to a freshly generated plugin, the plugin would crash as React doesn't support directly rendering data. Replaced it with a poor mans rendering that simply dumps all the data we received.
Also made sure the view is scrollable now which wasn't the case before.
Reviewed By: jknoxville
Differential Revision: D21523816
fbshipit-source-id: 3e04799facdf8b66ce9d66217a47fc7826d58d43
Summary:
This stack contains a bunch of improvements I made to smoothen the demo of plugin creating in the Flipper + React Native talk.
With 98% likelihood people will manage the source code of their Flipper plugins in git. This will make sure the `.gitignore` is configured properly ootb
Reviewed By: nikoant
Differential Revision: D21523818
fbshipit-source-id: b2ed769edc8fb9fd320464b05686e817e438f21e
Summary:
Very similar to the Logview plugin, showing a table with all logs (from all clients, if more than one is connected to Unity), and a right-side panel for details (the extra).
I'm still thinking how can I display the extra in the table (so it will be more convenient to compare logs), but still don't know (each extra can have different fields), and this is a good starting point.
Note: the POI plugin has an option to display marauder data, but I received requests for an easy way to debug just Pigeon, and since this is simple enough I don't see the harm here.
Reviewed By: timur-valiev
Differential Revision: D21549233
fbshipit-source-id: e7a48b4e21711bc9454e9b87a312e94a662917e2
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 updated the `flipper-out-of-contents` container to render with absolute position, which allows it to cover up all of the content in the plugin. This fixes an issue where content that exists in the plugin can be broken.
For example, the banner in the next diff would look like this:
{F237034745}
Reviewed By: mweststrate
Differential Revision: D21556849
fbshipit-source-id: 95ec4aac24ac995bd1c558123ef5da6087a40d0a
Summary: The effect of opening the screenshot after capturing was removed in D19765926.
Reviewed By: mweststrate
Differential Revision: D21571294
fbshipit-source-id: f3308d80e066cc01786c17323e4ff5f97c092de9
Summary:
Ugh, lockdown brain. This was supposed to be included in the test I added before
to get to 100% coverage. Well, it's here now.
Reviewed By: mweststrate
Differential Revision: D21550904
fbshipit-source-id: 044a11d38e211c6f57cce220adc8c42241a2043a
Summary:
This happened during startup:
{F237135281}
From `tmp` docs:
> IMPORTANT NOTE: template no longer accepts a path. Use the dir option instead if you require tmp to create your temporary filesystem object in a different place than the default tmp.tmpdir.
Reviewed By: mweststrate
Differential Revision: D21570416
fbshipit-source-id: 170886d0fda5e21cb23fe836fcde33eb457a4c1b
Summary: This is required for the new release of promisify-child-process.
Reviewed By: mweststrate
Differential Revision: D21543812
fbshipit-source-id: dc254ea51381696b9927f7c62dd36e10ef00fcac
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:
Bumps [tmp](https://github.com/raszi/node-tmp) from 0.2.0 to 0.2.1.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a href="https://github.com/raszi/node-tmp/blob/master/CHANGELOG.md">tmp's changelog</a>.</em></p>
<blockquote>
<h2>v0.2.1 (2020-04-28)</h2>
<h4>🚀 Enhancement</h4>
<ul>
<li><a href="https://github-redirect.dependabot.com/raszi/node-tmp/pull/252">https://github.com/facebook/flipper/issues/252</a> Closes <a href="https://github-redirect.dependabot.com/raszi/node-tmp/issues/250">https://github.com/facebook/flipper/issues/250</a>: introduce tmpdir option for overriding the system tmp dir (<a href="https://github.com/silkentrance">silkentrance</a>)</li>
</ul>
<h4>🏠 Internal</h4>
<ul>
<li><a href="https://github-redirect.dependabot.com/raszi/node-tmp/pull/253">https://github.com/facebook/flipper/issues/253</a> Closes <a href="https://github-redirect.dependabot.com/raszi/node-tmp/issues/191">https://github.com/facebook/flipper/issues/191</a>: generate changelog from pull requests using lerna-changelog (<a href="https://github.com/silkentrance">silkentrance</a>)</li>
</ul>
<h4>Committers: 1</h4>
<ul>
<li>Carsten Klein (<a href="https://github.com/silkentrance">silkentrance</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a href="https://github.com/raszi/node-tmp/commits">compare view</a></li>
</ul>
</details>
<br />
[](https://dependabot.com/compatibility-score/?dependency-name=tmp&package-manager=npm_and_yarn&previous-version=0.2.0&new-version=0.2.1)
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
**Note:** This repo was added to Dependabot recently, so you'll receive a maximum of 5 PRs for your first few update runs. Once an update run creates fewer than 5 PRs we'll remove that limit.
You can always request more updates by clicking `Bump now` in your [Dependabot dashboard](https://app.dependabot.com).
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `dependabot rebase` will rebase this PR
- `dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `dependabot merge` will merge this PR after your CI passes on it
- `dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `dependabot cancel merge` will cancel a previously requested merge and block automerging
- `dependabot reopen` will reopen this PR if it is closed
- `dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- `dependabot use these labels` will set the current labels as the default for future PRs for this repo and language
- `dependabot use these reviewers` will set the current reviewers as the default for future PRs for this repo and language
- `dependabot use these assignees` will set the current assignees as the default for future PRs for this repo and language
- `dependabot use this milestone` will set the current milestone as the default for future PRs for this repo and language
- `dependabot badge me` will comment on this PR with code to add a "Dependabot enabled" badge to your readme
Additionally, you can set the following in your Dependabot [dashboard](https://app.dependabot.com):
- Update frequency (including time of day and day of week)
- Pull request limits (per update run and/or open at any time)
- Out-of-range updates (receive only lockfile updates, if desired)
- Security updates (receive only security updates, if desired)
</details>
Pull Request resolved: https://github.com/facebook/flipper/pull/1127
Reviewed By: nikoant
Differential Revision: D21475580
Pulled By: passy
fbshipit-source-id: 5ddd73368b4178cd7a4b431e1661f9509f080635
Summary:
As mentioned in [the first comment in the Github issue](https://github.com/facebook/flipper/issues/989#issuecomment-616673590), we were mixing database `id` given from client and `index + 1` on server side. After investigating, most are used correctly; it searches `id` from given database `name`. However, there are a few (if not one) that, in my opinion, was used incorrectly. For example, [`tableOption`](https://fburl.com/diffusion/vlo7xbo1) assumed `id - 1` is the index, which is sometime incorrect.
This diff sorts the database listed from client by `id` before storing in the state.
Changelog: Fixed wrong order assumption on server side
Reviewed By: jknoxville
Differential Revision: D21496345
fbshipit-source-id: 5e15f776356b0357ac14fbde6c2a11efd76cd1e1
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: This was for V1 (D16990925) and is no longer referenced anywhere.
Reviewed By: nikoant
Differential Revision: D21501270
fbshipit-source-id: fef30f38c917afcd3d4150a0165cd0a59ad42b6a
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:
Fixes https://github.com/facebook/flipper/issues/1142
When using `client.call(methodName, params)`, params has to be an object, not, for example a string.
It may work on some client implementations, e.g. iOS, but this is a coincidence and not to be relied on. If this gives you new type errors, the plugin should continue to run in the short term but has no guarantees, please adapt it to conform. You can do this by preserving backwards compatibility by doing a typecheck in your client plugin if necessary.
CHANGELOG: Calling `client.call()` or `client.send()` now fails to type-check if params is not an object, to match client implementations.
Reviewed By: nikoant
Differential Revision: D21450694
fbshipit-source-id: 53db49f874838769e39a94b1c4bd4c0b30ecdbc7
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:
- Add detail sidebar to data tab. This reuses `renderSidebar` from SQL tab
- `renderTable` function is moved into the component to easier access `renderSidebar`
Reviewed By: mweststrate
Differential Revision: D21406942
fbshipit-source-id: 5c79489a80931b1133c0a28ca5897a27ba9dd6b8
Summary: It doesn't currently work on them, so removing to avoid confusion.
Reviewed By: priteshrnandgaonkar
Differential Revision: D21448681
fbshipit-source-id: 6ef46f8551921c1c5bdba17fd65f762292f1dd0e
Summary:
Both export methods behaved slightly differently:
* Export to file returned earlier when running in background, which skiped the tracking of export termination;
* Share link always showed notification, even when on foreground;
* Share link status "hanged" - the share was never unset.
This change makes both consistent:
* Always track export finish - whether its in foreground or background;
* Only show notificaiton if running in background;
* Always reset the share/status.
On top of this it also:
* Normalizes the screenshot status to terminate in '...' as all the others;
* Only copies export URL to clipboard when exporting link if running in the background.
Reviewed By: passy
Differential Revision: D21425095
fbshipit-source-id: 9864a63269df6bd05ab065ff0e5d9f17b9ac6db6
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:
per title
Changelog: Add multiple selector to layout inspector to allow user to select components at a position
Reviewed By: mweststrate
Differential Revision: D21214898
fbshipit-source-id: 7b52d9d3c93e7ec0d28124a3a675ccfdd014c54d
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:
- add type to represent the returned component tree
```
expected data:
{
[nodeID1]: [subtree1],
[nodeID2]: [subtree2],
...
}
example:
{
id1: {
id2: {
id3: {
id4: {},
id5: {
id6: {}
}
}
}
}
}
```
- add functions to deal with a tree
- `_getElementLeaves` for finding ids that don't have any child given the tree structure
- `_getPathForNode` for finding path (similar to previous path parameter) for given id
- This diff still retain functionality in case of selector appear to touch only one element.
Reviewed By: mweststrate
Differential Revision: D21040427
fbshipit-source-id: e6704535a437ad47d9664cc16896b9f24c9d6736
