Flipper: After pressing the "Add Route/Copy Highlighted Calls" the "untitled" route replaces existing routes.

[mgoyanes]

🐛 Bug Report

After pressing the "Add Route/Copy Highlighted Calls" the "untitled" route replaces existing routes.

To Reproduce

Have some mocked routes (5) and press the "Add Route" or the "Copy Highlighted Calls". Sometimes, the new "untitled" route replaces existing routes. This behavior is inconsistent but I can reproduce it several times.

Expected behavior

The new route should be placed at the top of the list without overriding any existing routes.

Environment

Flipper desktop app version 0.67.0 but I could reproduce the issue at least from version 0.64.0

[mweststrate]

cc @bizzguy would you mind looking into this one?

[bizzguy]

I'll take a look.

[bizzguy]

@mgoyanes - I was not able to reproduce the error. I was using the sample Android app to test. Behavior does sometimes change when using more complex network calls than those in the sample app. Would you be able to share the actual API calls you were using?

Also, I did find another error that is caused by responses that don't have a body. (The POST request in the sample app returns a 404 and no body in the response and causes the problem). I was able to post a fix for this in PR-1776 (https://github.com/facebook/flipper/pull/1776)

I'll try to do more testing on more complex APIs but if you could provide some more detail on how to recreate that error, that would be really helpful. Thanks.

[mgoyanes]

Hello @bizzguy
Thanks for looking at this.

I will try to create a video with the behavior I'm seeing.

I don't know if I can ask this but here it goes.
This is what I'm missing in the mock network responses:

1. A toggle to enable/disable the mocking of that request. Just like, the response code, have a toggle there to enable or disable that mock.
2. Mock response alias. Add a field where we could add an alias for that mock. That alias would show on the mocks list (left column) thus allowing us to easily see/go to the mock that we want. Normally my mocks start with https://my.server.ulr/something/somethig/endpoint and I only can see the initial part in the left column. I then need to iterate all over the other mocks to find the one that I'm looking for.
3. Make the mocks list column horizontally scrollable.

Thanks.

[bizzguy]

@mgoyanes I like those ideas! I'm also working on a feature to save the mocks to a file so they could be imported by another developer. I'd be interested in your ideas on that.

[bizzguy]

@mweststrate. Could you add a "plugin-network" label to this issue?

[bizzguy]

@mweststrate
This can be closed. It is fixed by https://github.com/facebook/flipper/pull/1917

[mgoyanes]

Thank you @bizzguy