i51: Deep Linking

[jollyjerr]

This PR adds support for copying a deep link to a request.

Closes #51

Steps to test

1. Set up a request however you like (with a body/qsParams/etc...)
2. Click "Copy Link"
3. Paste that link in another browser
4. Observe you were "deep linked" to that request

Video Demo

https://user-images.githubusercontent.com/51095001/194618143-de0805fb-d594-47eb-8885-ed8333706e6a.mov

[jollyjerr]

Loved your design feedback @tscritch!

https://user-images.githubusercontent.com/51095001/194617721-89f58fc3-3b57-48d1-965f-8f0d72a51509.mov

[jollyjerr]

Hey @jwdotjs thank you for testing the upper bound of this approach. I initially considered porting the app over to react-router, but I think we can achieve the desired behavior without such a big shift at the moment. GREAT call out with the leaked security headers - I have to admit I was lazy with my approach and I didn't notice all that metadata was included 😨. How do you feel about these latest changes where only the required data is encoded? If we would rather port over to react-router instead of encoding the URI I'm down with that as well! We could also look into hashing the URI or various string-shortening techniques if size is still a concern.

[jwdotjs]

Wow, thanks for the quick turnaround time. I was not expecting that! ❤️

I retested this morning and the URI size problem seems to be fixed and I think the type of data we're capturing all makes sense!

I noticed that when I pasted the url, it seems to be not be loading the route definition correctly. If I get some free time today I'll try and see what might be causing that. 🙏

Route Definition With QS Params Specified

Pasted URL

[jwdotjs]

Sorry for the delay on this. I was thinking of integrating React Router so we can have more documentation, but I've been blocking this for too long 😆

I'm going to look at the bug I posted in October, fix, and get this merged and tagged this weekend for us. 🙏

cc: @briansmithSR

[justincy]

If the current approach is too complicated, could we just go with the original idea of only deep linking to the route?

[jwdotjs]

@justincy, yes, but this branch had bugs on it. I was working on it locally and I think it's in a better place, but I never had enough time to feel 100% confident. Let me push the updates to a branch targeting this branch for review

[jwdotjs]

@justincy https://github.com/smartrent/badmagic/pull/90

[jwdotjs]

Also note: I tried integrating React-Router and because it doesn't have control over the overall application and what route/path we're starting on, I was running into a lot of unexpected behaviors, so I more or less abandoned that idea in favor of getting this branch ready to merge. I think it's doable, but I just didn't have the time to work through the subtleties with components using a router when we don't know what path we started on

[jollyjerr]

Hey @jwdotjs and @justincy,

I took a look at #90 and pulled out the primary fix for route definitions not loading (thanks for finding that, Jason!). I also fixed a bug where actual requests would break after deep linking depending on if the project provided baseURL for route definitions.

I think everything is good to go now. Let me know if you would like to see a video of a specific thing - I know setting this project up to test can be a hassle haha.

https://github.com/smartrent/badmagic/assets/51095001/3a8a313e-3aac-47b6-a288-4f34e696e0e7

https://github.com/smartrent/badmagic/assets/51095001/cc1e832d-4856-4246-b62b-3358b8f16a91

Invalid url just goes home

https://github.com/smartrent/badmagic/assets/51095001/749e9b02-f60c-48d4-90dc-0aad919c87b5