Summary: Luckily I put all my types in one file, so this was very easy to convert over.
Reviewed By: danielbuechele
Differential Revision: D17132226
fbshipit-source-id: cacd0d66e15504d6f82ccc4aaaa4e27339e513f1
Summary: This commit provides the navigation plugin with more value, showing the ViewController of the rendered view.This allows the user to quickly start working on that view controller once they have the name. This works on nearly all views in the iOS app.
Reviewed By: passy
Differential Revision: D17071558
fbshipit-source-id: 22a22d4a0991e9f20bc85eb106a98a42214d4d0c
Summary:
Here I've attempted to add screenshots to the nav plugin. This isn't the most elegant solution, but it might have to do due to limitations on the event handler for navigation being fired when the navigation occurs, and not when all remote content on the view has loaded. With this in mind, I added a 1 second delay for the screenshot. This has its own issues such as navigating within a second away from the page will display the wrong view.
If anyone has some suggestions I am open.
Another issue faced here was that incoming nav events are now impure as I need to go take a screenshot on each nav event. Therefore, I have removed the the tests which no longer work for the NavPlugin.
Reviewed By: danielbuechele
Differential Revision: D16915859
fbshipit-source-id: 95db0d1ded2084441d49e1f2e4712c55acf9f1b8
Summary: Since I've published docs for the Nav Plugin, might as well remove the Gate Keeper. When integrating the Nav Plugin in our sample app, I've observed that the Plugin is stable.
Reviewed By: passy
Differential Revision: D16857344
fbshipit-source-id: c4b0b5828ae82f6e43cfcb000e7f003c5ccce568
Summary: I added the height css style to align the sheet. In this revision, I removed the height to recenter the text, but I've had to nudge the sheet up 3 pixels.
Reviewed By: danielbuechele
Differential Revision: D16855746
fbshipit-source-id: 14b4b83abeb74c01c3706c5b81921f30c8d7e2d3
Summary: Booleans must also be validated. These are denoted by {!boolParam}, as in they have a '!' symbol in front.
Reviewed By: danielbuechele
Differential Revision: D16802996
fbshipit-source-id: c03b858f0872dea0610e1d28aa9b48936f1117a6
Summary: Taking on the feedback from the demo yesterday, I've improved the required parameter's dialog by showing where specific errors occur in the form and adding live editing to the URI displayed.
Reviewed By: danielbuechele
Differential Revision: D16802921
fbshipit-source-id: 2e729549306a8efb79ca76d3da6f70632ccd9212
Summary:
Here I've added the LocationsButton to the TitleBar in Flipper. This allows the user to navigate to saved bookmarks, or display the current page URI without ever opening the Navigation Plugin (Except to add bookmarks). The challenge of this diff was having a TitleBar child be controlled by a plugin.
The LocationsButton pulls bookmarks straight from the database whenever a mouseDown event is called on the button. (The Electron popup menu does not respond to props changes, so the menu is opened on mouse up and getting the bookmarks from the database occurs on mouse down... This seems to work fine).
The nav plugin on the Android side will now also send a welcome message alerting the app to created a persisted state for the navigation plugin, which shows the button in the TitleBar.
Let me know if I can answer any questions.
Reviewed By: danielbuechele
Differential Revision: D16786330
fbshipit-source-id: afc95348d9b7ec4ee041f42bb4d022f58c6bb969
Summary:
When a user enters a uri with optional parameters in the nav bar, I chose to automatically filter these out, yet still show the parameters in the nav bar.
The device receive uri's with no optional parameters, but the user will still see the parameters in the UI.
Reviewed By: danielbuechele
Differential Revision: D16762529
fbshipit-source-id: e3bbdf886dca7fba793b140b5fb303c4a77926ba
Summary: Fixed issue with the timeline not having a key prop, and added some text when there are no navigation events.
Reviewed By: jknoxville, passy
Differential Revision: D16762034
fbshipit-source-id: 8f4618c8365c1a8b5a18b6176e1d80fc401f3ca5
Summary:
Some uris parsed from the device contain required parameters. Here we parse the uri and check if there is a required parameter on navigation. If there is we alert the user to correct the error.
In the next diff, I will strip away non-required parameters if they are present but not filled in.
Reviewed By: danielbuechele
Differential Revision: D16710944
fbshipit-source-id: ea32cfe60e2bb5e4f395caebf585ba1b220dcefe
Summary:
This commit adds the match patterns that were parsed from the app into the nav bar.
Planned for next commit: Alerting the user if they havn't filled in required parameters, and automatically excluding non-required parameters if not filled in.
Reviewed By: danielbuechele
Differential Revision: D16646774
fbshipit-source-id: 0f9130d659b6b635bfa1240dbd05c5956c6756ce
Summary:
Here I parse in the match patterns belonging to the Facebook app into Flipper. In order to keep things generalized, we can add match patterns for other apps here also e.g. Instagram.
These functions are internal only, but I cannot hide them as we do not have dynamic imports. Instead, the match patterns file is hidden, and I plan to have the file read fail silently for external use.
Reviewed By: danielbuechele
Differential Revision: D16646444
fbshipit-source-id: c7978f61e5e9cfc137552777a9ed53b264184293
Summary: This was an error appearing in the console that was bugging me. About how arrays of React nodes should have a key prop.
Reviewed By: passy
Differential Revision: D16646487
fbshipit-source-id: b61841c001eb4a93f0a071557b921ca7365e2ac3
Summary:
Okay so the main changes here are integrating the providers into the auto complete sheet and getting the search bar to work with it also.
For instance, in the search bar, I want to update the value string to whatever the user has highlighted in the auto complete sheet, without executing a new query. So thus, I had to create a new state variable in the search bar component for this.
I've also moved the custom hook into its own file to keep the component short in size. It had to be mainly rewritten to support providers instead of only bookmarks. Same goes for the entire AutoCompleteSheet component.
The bookmarksProvider is stored in the persisted state as to not regenerate every-time on render. It is only updated if the bookmarks are updated which are also now stored in the persistedState for the same reason.
Lastly, a DefaultProvider object was also made for the initial persisted state object.
Reviewed By: danielbuechele
Differential Revision: D16581644
fbshipit-source-id: 88723a4081d96250f723a4cd7b1ade101bf3e8f3
Summary:
These are a series of utility functions for the auto complete system in the nav bar.
Essentially, the auto complete system will gather information from Providers. Providers provide auto complete information from various sources i.e. bookmarks, recently viewed, or uri match patterns from the build.
There are two main functions in this commit. The first is to turn the bookmarks Map into a Provider (bookmarksToAutoCompleteProvider). This runs in O(n) time where n is the number of bookmarks. A provider has an associated icon and matchPatterns to match what the user types to a uri. Here I concatenate the commonName and the uri of the bookmark together for the match pattern so that the user can search for both.
filterProvidersToLineItems takes an Array of providers and returns line items. These are objects that will be displayed by the nav bar auto complete system. This has a little bit of a longer running time. O(mnop). Where m is the number of providers, n is the number of items in the largest provider, o is the length of the query and p is the length of the line items. This may seem bad, but I've tested the performance using 364 entries and it completes the function in less than a millisecond.
The Providers will have precedence in the final auto complete box. With the most recent provder taking the most precedence, followed by bookmarks, followed by match patterns.
Reviewed By: danielbuechele
Differential Revision: D16568500
fbshipit-source-id: 00b043d51051ee86b3dbe18564e6f582b19e5359
Summary:
Here I've added a drop down sheet for the nav bar. Currently it only supports showing the first five bookmarks with no filtering.
I use a custom hook to handle navigation with the keyboard in the nav bar, so that works well.
So you can use the arrow keys to select a uri from the dropdown, or by using the mouse.
Reviewed By: danielbuechele
Differential Revision: D16542218
fbshipit-source-id: 4c242fd3097297fc599b36523bb4821bbc172f88
Summary: The bookmarks would appear in different order upon reloading the app. Here I have a fixed order.
Reviewed By: jknoxville
Differential Revision: D16540496
fbshipit-source-id: ebc3e1065dbd2ae76b919a943c2cc7f81d857ca8
Summary: Here I add the ability to remove bookmarks. If a bookmark already exists, a different dialouge menu appears.
Reviewed By: danielbuechele
Differential Revision: D16540394
fbshipit-source-id: 5d6737e1efb1a9663519bf17084ef3b55a6ba28e
Summary: Moved Flow types into their own file. I will be adding more types as part of the auto complete for the navigation bar and this is to keep the code more organized.
Reviewed By: danielbuechele
Differential Revision: D16540279
fbshipit-source-id: d69ac0d05f91e9d92fcda37325c791ddc83a52c9
Summary:
This is a glue commit that glues all the components I've added in the past together.
Favouriting a page (i.e. clicking on the star) adds it as a bookmark.
There's four main parts to make your rreview easier:
1. Add bookmarks and favouriting to all the components that support it, including their parents. (NavigationInfoBox, SearchBar, Timeline)
2. Persist bookmarks using the indexedDB. (index.js)
3. Add saving to db through the SaveBookmarksDialog
4. Various other changes due to a changed architecture. i.e. moving bookmarks from persistedState to state.
Still to come.
1. Removing bookmarks.
2. Pressing enter to save the bookmarks when the SaveBookmarksDialog pops up.
3. Alphabetizing bookmarks? Order seems to jump around.
Reviewed By: jknoxville
Differential Revision: D16518013
fbshipit-source-id: 2e0cef14123c611db43cca360bc66dc4c05b11ed
Summary:
These are utility function for reading from the IndexedDB and writing to it. This will be used for persistant storage of bookmarks.
The reason I chose IndexedDB over local storage is due to the poor efficiency of stringifying and parsing a long list of bookmarks everytime we read and write to local storage.
With IndexedDB we can modify a single value at a time.
Bookmarks are passed around as a Map, with the key being the uri's and the common names being the values. This allows me to check if a specified uri is in the Map in O(1) time, so that I can highlight the star icon in the UI with gold.
Reviewed By: jknoxville
Differential Revision: D16498744
fbshipit-source-id: 7c7af28bf4eb3fcc985a71dfd61ffbdb8481b6a6
Summary: This adds a dialog box component that allow saving of bookmarks.
Reviewed By: jknoxville
Differential Revision: D16491842
fbshipit-source-id: fc8332bba491ad0583564fd6a85b5ad225bbd461
Summary: I've added the ability to navigate to different pages in the app via the bookmarks sidebar. Still no way to add bookmarks yet.
Reviewed By: jknoxville
Differential Revision: D16438415
fbshipit-source-id: f7dcda1add701eba8655518fba7cb9a82cf49ca1
Summary:
This is another WIP. Here I construct a skeleton functional component which currently just displays that there is no bookmark information.
I have also placed the component into the layout.
Reviewed By: jknoxville
Differential Revision: D16419794
fbshipit-source-id: fe1722255bde2b8363e5514c284a242f077e5185
Summary: I've added a favorite button component. The FavoriteButton is a toggle button that has a gold favorited state and an outlined non-favorited state. This is passed in as a prop.
Reviewed By: jknoxville
Differential Revision: D16418215
fbshipit-source-id: b695ea223d5a543df6bf1e588dc6756f9e84e8e1
Summary: This is a WIP component that displays the timeline of nav events to the user.
Reviewed By: jknoxville
Differential Revision: D16417087
fbshipit-source-id: 45a4bcdc271941d413c78fab2424628499c6d5ea
Summary: What happens in NavInfoBoxes stays in NavInfoBoxes i.e. the text now wraps instead of leaking out of the container. Also the eye icon works for navigation.
Reviewed By: jknoxville
Differential Revision: D16416974
fbshipit-source-id: 029b1c7e56db9fdf6499a52296080cd340078353
Summary: The original flex colum that came as standard did not flex to fill the remainder of the screen. Adding this component allows for a full screen flex column so that the scroll bar in the timeline looks correct.
Reviewed By: jknoxville
Differential Revision: D16416933
fbshipit-source-id: bd296aea85730f192778ed0aca4b226893b2829d
Summary: Since events will be displayed in a timeline view with a flex-cloumn, it is more efficient to have the events be added to the event array in reverse order; that is the newest events at the front of the array.
Reviewed By: passy
Differential Revision: D16379893
fbshipit-source-id: c85a2cca118e2d4ae990f69134f5d5770c360fbd
Summary: Added IconButton component with a ripple effect. I also placed it into the components where it will be used.
Reviewed By: passy
Differential Revision: D16378064
fbshipit-source-id: 6b677ec4a43adf94eb38136a9c607c85919c0176
Summary:
Here I added an info box to display the info of the incoming navigation events.
The component is currently missing interaction (navigating to uris and favoriting), but I will add that in my next diff.
While I was here, I modified the component file structure a tiny bit to make importing components easier.
Reviewed By: jknoxville
Differential Revision: D16357204
fbshipit-source-id: 70b137e052181559a2fda02b091a71e54cb1ade0
Summary:
Here I added two tests to test the persisted state reducer in the navigation pliugin.
I uncovered that my state reducer is not pure, as it calls the Date constructor, but I will fix this in a future update by passing the date recorded on the Android device when the nav event occurs and sending that via the socket connection.
For now I have modified the state reducer to take a date as part of the payload on a nav_event, or if none exists record the date as before. Also, if a page has no uri, but we want to record a nav event, I send null uri from the Android side. This doesn't send the uri as null to flipper; the uri object property simply doesn't exist. In this case I explicitly cast the undefined value for uri to null.
Reviewed By: jknoxville
Differential Revision: D16330958
fbshipit-source-id: fe338ea3a244df6ef33356bc7fdef8da9291dc68
Summary: After setting up the navigation event emitter on the android side, we must now receive them on the client side and persist them in the Redux store.
Reviewed By: passy
Differential Revision: D16280944
fbshipit-source-id: 3dc4c5c6add41388469c801700974eb0ccd9a56b
Summary:
Here I've started work on a search bar for the top of my plugin. Currently it supports navigation in a device by typing in an app uri and pressing the enter key or by pressing the send icon.
More features will be added as other components for this plugin are added. I have added a function stub for the bookmark button for now and the drop down icon is purely cosmetic at the moment.
Reviewed By: jknoxville
Differential Revision: D16183223
fbshipit-source-id: 0313d8c6e3a967c9400b9e9d3f24960e6a021a8c
Summary: Adding the auto-genrated scarf files from creating the Flipper navigation plugin. GK for this plugin is flipper-navigation.
Reviewed By: jknoxville, danielbuechele
Differential Revision: D16119841
fbshipit-source-id: 74e19c82dc95e73fe2ae06d1eb8cef2456b81931
