Commit Graph

11 Commits

Author SHA1 Message Date
bizzguy
d07b74eed0 Network Plugin - Disable routes (#1969)
Summary:
Mock routes may contain quite a bit of data for header values and response bodies.  Currently, to turn off a mock a user must delete the mock and then go through the process of creating it when needed again.  This change will allow a user to temporarily disable a mock without deleting it.

A checkbox on the Routes list is used to enable/disable mocks.  As shown in this screenshot:

![image](https://user-images.githubusercontent.com/337874/109360670-3a3fb280-784d-11eb-83fd-724f0bb067d3.png)

## Changelog

Network Plugin - disable/enable mock routes

Pull Request resolved: https://github.com/facebook/flipper/pull/1969

Test Plan:
Create mocks using sample app
Verify that mocks are working as expected
Disable the mocks
Verify that the client has been updated with mocks (minus the disabled ones) user Flipper Messages plugin
Use the sample app to send the disabled requests again and verify that they are not mocked

Reviewed By: mweststrate

Differential Revision: D26888815

Pulled By: passy

fbshipit-source-id: cb8a05a27dd69ba4d2b60085a077efe795a99a7c
2021-03-08 11:52:36 -08:00
bizzguy
29d16feed5 Network Plugin - fix highlighting issues in routes list (#1917)
Summary:
Fix problems with row highlighting on mocks route list.  When selecting a row, the highlight would sometimes be on the wrong row.  Also, when adding routes, the routes would sometimes get added in the middle of the list instead of at the end.

These problems were caused by incorrectly referencing route rows in code.  Sometimes index was used and other times the key was used.  Fixed by consistently using key.

This fixes the problem described in issue https://github.com/facebook/flipper/issues/1733

## Changelog

Network Plugin - fix problems with row highlighting on mocks route list

Pull Request resolved: https://github.com/facebook/flipper/pull/1917

Test Plan:
Start with no mocks | No rows should be shown | TRUE
Add a single mock | First (and only row should be highlighted) | TRUE
Delete mock | No rows should be shown | TRUE
Add single mockAdd another mock | 2nd row should be highlighted | TRUE
Add another mock | 3rd row should be highlighted | TRUE
Add 2 more mocks and assign number to each row (5 total) | Last row should be highlighted | TRUE
Select 1st row | 1st row should be highlighted | TRUE
Delete 1st row | 1st row should be highlighed | TRUE
Select last row | last row should be highlighted | TRUE
Delete last row | last row should be deleted and new last row should be highlighted | TRUE
Highlight a middle row (row 3) | middle row should be highlighted | TRUE
Delete middle row | middle row should be deleted and last row should be in its place and should be highlighted | TRUE

Reviewed By: passy

Differential Revision: D26604455

Pulled By: mweststrate

fbshipit-source-id: f29690244e32b364983089541718f4bc75154dd1
2021-02-26 07:19:00 -08:00
bizzguy
6a9d06a4ce Misc UI fixes (#1873)
Summary:
Continue with cleanup of Network plugin mock screens.  This mostly consists of replacing FlexColumn, FlexRow and FlexBox with equivalent Sandy components.

Here is the new screen:

- replace text buttons with Button
- add NUX info to "Copy Highlighted Calls" button
- add message when no calls have been highlighted
- in routes list remove padding on line items

![image](https://user-images.githubusercontent.com/337874/106415468-d58f6480-6414-11eb-93a8-498fd81b54d9.png)

Here is the prior screen:

![image](https://user-images.githubusercontent.com/337874/106415499-e8099e00-6414-11eb-8e0e-48875a945621.png)

## Changelog

Network Plugin - Additional cleanup of UI on mock screen

Pull Request resolved: https://github.com/facebook/flipper/pull/1873

Test Plan:
Create and modify mocks
Verify that the functionality has not been affected by UI changes

Reviewed By: passy

Differential Revision: D26172915

Pulled By: mweststrate

fbshipit-source-id: f0af143d8509b53585076737832657fb095e75a6
2021-02-01 03:58:34 -08:00
bizzguy
8c3abf7450 Network Plugin - Minor UI fixes (#1864)
Summary:
Made UI fixes to Network Plugin (mostly to Route screens) to continue migration to the new design framework.  This consisted mostly of replacing FlexColumn and FlexRow with Layout.Container and Layout.Horizontal.

Also, contains some cosmetic changes to "Mock Network Response" page.

Here is the screenshot with UI changes:

![image](https://user-images.githubusercontent.com/337874/105937062-6d0e4500-601a-11eb-97ce-d9c4ae0c184f.png)

This was the old screen for comparison:

![image](https://user-images.githubusercontent.com/337874/105937028-5667ee00-601a-11eb-84a9-a2bd4bb78846.png)

## Changelog

Network Plugin - UI changes to continue migration to Sandy design framework

Pull Request resolved: https://github.com/facebook/flipper/pull/1864

Test Plan: Manual testing to ensure that all data still displayed with new UI changes (especially the Data and Headers info in the "Route Info" section)

Reviewed By: passy

Differential Revision: D26125656

Pulled By: mweststrate

fbshipit-source-id: a25104274ed25788e5c0738ac0a9609f2cead751
2021-01-29 09:02:54 -08:00
bizzguy
6df117ba04 Network Plugin - New functions to import, export and clear Routes (#1855)
Summary:
In the network plugin, add features to import and export routes as described in issue https://github.com/facebook/flipper/issues/1651

Primary use case is that external testers (such as QA teams) would be able to create test data, convert it to mocks and save the mocks to make bug fixes easier for devs.

Here is a screenshot showing location of buttons to perform import/export (and clearing) of mock routes:

![image](https://user-images.githubusercontent.com/337874/105658269-cb58ed80-5e8b-11eb-8118-f13efc96bf6d.png)

Here is another screenshot showing export dialog:

![image](https://user-images.githubusercontent.com/337874/105657733-afa11780-5e8a-11eb-9725-120617e1dd71.png)

Changelog: [Network] Mock routes can now be imported and exported. Thanks bizzguy!

Pull Request resolved: https://github.com/facebook/flipper/pull/1855

Test Plan:
Performed manual testing

- create new mocks
- export mocks
- clear mocks
- import mocks
- verify that mocks still work by making GET/POST requests in sample app

Performed various permutations of above manual tests, including restarting Flipper at various points to ensure that test plan still worked.  Also performed visual inspection of exported files to verify correctness.

Would be very interested in learning how to create automated tests for this functionality.

Reviewed By: passy

Differential Revision: D26072928

Pulled By: mweststrate

fbshipit-source-id: 51bd5e19e78d830b94add850d5dc9b9e45fa6fad
2021-01-26 05:34:36 -08:00
bizzguy
1559c1ef2c Network Plugin - Update UI for routes (#1831)
Summary:
The current UI for managing mock network request definitions (routes) has some issues
- too small for the amount of information it displays
- no formatting for JSON response bodies
- uses the older design system (not ant)
- no separation between commands for creating routes and the list of routes

The following screen images show these problems.

![image](https://user-images.githubusercontent.com/337874/104691438-deb9cb00-56cb-11eb-92df-9e2d122f65c2.png)

![image](https://user-images.githubusercontent.com/337874/104691471-eda07d80-56cb-11eb-8f82-444d591ff966.png)

## Changelog

Enhance UI for Mocks dialog in Network Plugin

Pull Request resolved: https://github.com/facebook/flipper/pull/1831

Test Plan:
Ran multiple manual tests using the Android sample app.  Here is a screen image (at 1280 x 720) for the enhanced UI.

![image](https://user-images.githubusercontent.com/337874/104691649-37896380-56cc-11eb-849f-4e470bb7fbc4.png)

Reviewed By: mweststrate

Differential Revision: D25922798

Pulled By: priteshrnandgaonkar

fbshipit-source-id: d27ba30a7eb51105a8d381097ecaafd82624cad5
2021-01-20 15:45:38 -08:00
James Harmon
0a06d6c546 Add button to copy highlighted requests to routes (mock requests) (#1447)
Summary:
Add feature to Network mocks in the Network Plugin which would allow a user to highlight network requests and copy into new routes (mocks).

For many production apps, network requests can contain many headers (easily 20 or more) and a large amount of data  returned in the response (1000's of characters).  Creating mocks for these manually is time consuming and error prone.

It would be better to make mocks automatically by allowing the user to highlight desired requests and have them automatically copied into new routes, also copying the headers and the response data.

Changelog: [network] Allow user to create new mock routes by highlighting existing network requests in the Network plugin

Pull Request resolved: https://github.com/facebook/flipper/pull/1447

Test Plan:
Tested this change manually by running through the following scenario using the sample Android app:

1). Run a GET request from the Sample app.  Verify that the request/response is correct.  Highlight the request to be copied.

![request-screen](https://user-images.githubusercontent.com/337874/89750945-baf6b700-da93-11ea-86f6-3ec600e1727d.png)

2). Go to the Mock dialog by clicking on the "Mock" button

![mock-screen](https://user-images.githubusercontent.com/337874/89750979-e8436500-da93-11ea-9dde-8717436a03bb.png)

3).  Click on "Copy Highlighted Call" to create a mock Route from the selected request.  Verify that the "data" and "headers" tab panels are correct.

![mock-screen-2](https://user-images.githubusercontent.com/337874/89751029-132db900-da94-11ea-9419-6294a304f232.png)

![mock-screen-3](https://user-images.githubusercontent.com/337874/89751053-29d41000-da94-11ea-85db-a034a20e5c18.png)

Close the Dialog

4).  Run the request again from the sample app and verify that a mock request is returned with the correct data.

![response-mock-1](https://user-images.githubusercontent.com/337874/89751083-4cfebf80-da94-11ea-8523-192ebdc869f6.png)

![response-mock-2](https://user-images.githubusercontent.com/337874/89751092-58ea8180-da94-11ea-85fe-82b7a660789f.png)

Reviewed By: cekkaewnumchai

Differential Revision: D23027793

Pulled By: mweststrate

fbshipit-source-id: 197fd5c3d120a20b6bc5d9121ae781923d69b748
2020-09-18 07:26:31 -07:00
ZHANG Qichuan
ae9c07c8f3 Persist the Network mock data (#1218)
Summary:
Persist the Network mock data, so it can survive after switching the plugins

Closes https://github.com/facebook/flipper/issues/1206
## Changelog

- Persist the Network mock data
- Remove the pref-filled '/' when creating a mock route
Pull Request resolved: https://github.com/facebook/flipper/pull/1218

Test Plan: <img width="807" alt="Screenshot 2020-06-02 at 11 45 15 PM" src="https://user-images.githubusercontent.com/410850/83540614-27e95000-a52b-11ea-8fc8-d7ad1373e904.png">

Reviewed By: mweststrate

Differential Revision: D21863561

Pulled By: passy

fbshipit-source-id: 4706ede721c7990a6bcc0bfe51f41e80306ffac7
2020-06-19 05:27:48 -07:00
Pascal Hartig
fc9ed65762 prettier 2
Summary:
Quick notes:

- This looks worse than it is. It adds mandatory parentheses to single argument lambdas. Lots of outrage on Twitter about it, personally I'm {emoji:1f937_200d_2642} about it.
- Space before function, e.g. `a = function ()` is now enforced. I like this because both were fine before.
- I added `eslint-config-prettier` to the config because otherwise a ton of rules conflict with eslint itself.

Close https://github.com/facebook/flipper/pull/915

Reviewed By: jknoxville

Differential Revision: D20594929

fbshipit-source-id: ca1c65376b90e009550dd6d1f4e0831d32cbff03
2020-03-24 09:38:11 -07:00
Chaiwat Ekkaewnumchai
76bf2f3603 (Server) Add Removing Route Button
Summary:
- Add a close button when hovering over the component
- Remove the route corresponding to it when clicking on closing

Note:
- This is a part of this PR: https://github.com/facebook/flipper/pull/488

Reviewed By: mweststrate

Differential Revision: D20444419

fbshipit-source-id: 5ebe112c542b033a3e10ed10f23d6a04a730c657
2020-03-17 10:09:14 -07:00
Chaiwat Ekkaewnumchai
adb1d6e976 (Server) Add ManageMockResponsePanel
Summary:
- Add ManageMockResponsePanel to add, modify and remove mocked route

Note:
- This is a part of this PR: https://github.com/facebook/flipper/pull/488

Reviewed By: mweststrate

Differential Revision: D20440147

fbshipit-source-id: 3af127c4b091f288c13b41b74d78c07b4eb0e52f
2020-03-17 10:09:13 -07:00