[$200] Investigate linking into forums MFE

[jmgasper]

@yoution - I'm hoping you and @atelomycterus can work together to figure out a good solution to link into the forums MFE. For instance, from the challenge listing or from Work Manager or from registration emails / notifications from the forum. Is there a way we can support deep links in the MFE / embedded Vanilla?

[jmgasper]

Challenge https://www.topcoder.com/challenges/217096a1-10ae-4cb8-8846-eb4506a0c0d2 has been created for this ticket.

This is an automated message for ghostar via Topcoder X

[jmgasper]

Challenge https://www.topcoder.com/challenges/217096a1-10ae-4cb8-8846-eb4506a0c0d2 has been assigned to yoution.

This is an automated message for ghostar via Topcoder X

[yoution]

@jmgasper @atelomycterus I am facing a issue about the mfe framework, it has been discussed here single-spa/single-spa-layout#123, it seems it has been fixed in the new version
we should synchronize the url between iframe and parent,
when users jump to the new forum from other apps,it will take some query parameers, we should pass them from parent to the iframe,
and user navigates between pages in the iframe , we should also pass the url query to the parent, otherwise user refresh the current page, the page navigation info will be lost
so we need to use browser hash or browser history to change the parent url when user navigate between pages in the iframe, currently when we change the url, the page will refresh
https://monosnap.com/file/0lkYrqgrLw2DcgcbBAsn0wBhRvbm9F
and when we navigate between pages in the forums, it will refresh many times.
first reload page is when user navigate to other page,after that, it will synchronize the url info to the parent,
parent will change the url hash,it will refresh again, so it will be at least reloading page two times.
https://monosnap.com/file/CIb8EPaPePxnrQLAEMDjsI1B9OxKnO
but when we refresh many times in a short time, the iframe will be blocked, it seems the backend has the restrictions

so maybe we should update the mfe framework, but if we do it, many apps will need to update
or we can let the app refresh, but he experience is not very good, and I don't know why the iframe is blocked

[yoution]

@atelomycterus I think we can ignore the url synchronization now, we can keep the url unchange. we can use sessionStorage to store the url path, so user refresh the page in current tab , the state will be saved.
but current redirect plan maybe not correct.
If user clicks on 'https://vanilla.topcoder-dev.com/categories/657cf9d1-469a-4c6e-a1a2-dd8b29106433' , Vanilla Forums should redirect to https://platform.topcoder-dev.com/forums/#/categories/657cf9d1-469a-4c6e-a1a2-dd8b29106433.
the url hash will be lost when redirect from backend, you can test it after deploy
if it do not work, we can change the url hash to url path, so we can change the url https://platform.topcoder-dev.com/forums/#/categories/657cf9d1-469a-4c6e-a1a2-dd8b29106433 to https://platform.topcoder-dev.com/forums/categories/657cf9d1-469a-4c6e-a1a2-dd8b29106433
you should update the code in embed.js.
you should get the path categories/657cf9d1-469a-4c6e-a1a2-dd8b29106433 from sessionStorage,
if sessionStorage is empty, you can extract the path from the url https://platform.topcoder-dev.com/forums/categories/657cf9d1-469a-4c6e-a1a2-dd8b29106433,
you also need to save the path to sessionStorage,
when create the iframe element, you should update the iframe src https://vanilla.topcoder-dev.com/?remote=https://local.topcoder-dev.com/forums&locale= to https://vanilla.topcoder-dev.com/${path}?remote=https://local.topcoder-dev.com/forums&locale=

[atelomycterus]

@yoution Thanks! I'm going to test it tomorrow. Keep you updated on it.

[atelomycterus]

@yoution I faced with several issues to run micro-frontend forums on local env because it ran using http. I managed to setup local env using a Vanilla docker with https + a proxy to fix CSP issues. So I can test it locally now and I am working on embed.js. I followed your recommendation and updated embed.js. If I update the iframe src with a path https://vanilla.topcoder-dev.com/${path}?remote=https://local.topcoder-dev.com/forums&locale= then a new nested frame is created each time. I am going to debug it tomorrow.

[atelomycterus]

@jmgasper Please

• apply PR-mfe-issues-8: Rollback some changes forums-plugins#106
• apply PR-Issues-9: using Vanilla embed.js #10
• and configure Vanilla forums. See the section Embed Vanilla.

I removed MFE url from Topcoder plugins because Garden.Embed.RemoteUrl and Garden.Embed.RemoteUrlFormat should be used. Unfortunately, the Vanilla documentation is poor and some settings can only be found out during debugging or by looking at the source code.

Thanks!

Embed Vanilla

1. Go to https://vanilla.topcoder-dev.com/embed/settings and set url + enable the Force the forum to only be accessible through the above url and click on 'Save'.
   

2. Trusted domains should be specified (https://vanilla.topcoder-dev.com/settings/security). Now this field has been configured.

Testing

Please clear browser cache before testing.

1. If user goes to

• http://localhost/discussion/1854/test-2 then user should be redirected to http://embed.vanilla.localhost:8000/#/discussion/1854/test-2
• http://localhost/drafts = > http://embed.vanilla.localhost:8000/#/drafts
• http://localhost/categories/algorithm-matches => http://embed.vanilla.localhost:8000/#/categories/algorithm-matches
  and etc.

2. No redirections for Admin dashboard
3. No redirections for Rest API.

Let me know if you notice any issues. I'll also re-test it when it's deployed on https://platform.topcoder-dev.com/. I want to be sure that it works as expected.

[jmgasper]

Payment task has been updated: https://www.topcoder.com/challenges/217096a1-10ae-4cb8-8846-eb4506a0c0d2
Payments Complete
Winner: yoution
Copilot: ghostar
Challenge 217096a1-10ae-4cb8-8846-eb4506a0c0d2 has been paid and closed.

This is an automated message for ghostar via Topcoder X