Added possibility to use encoded JSONs at designer's query params

[Diegorro98]

Description

Added the possibility to set at the designer query params JSON strings encoded so that people can build links to share its Adaptive Cards or maybe restore the work they were working before

I made this by trying to generate an URL object, if an exception is launched it will try to parse a JSON. If that also launches an exception, it will not do anything else.

An example would be: https://adaptivecards.io/designer?card=%7B%0A...%0A%7D&data=%7B%0A...%0A%7D

How Verified

I'm waiting that this PR creates the webpage so that I can test it. Whenever it gets working, the above link should work and should have an example adaptive card.

Microsoft Reviewers: Open in CodeFlow

[Diegorro98]

I was thinking that pr automatically created a test page, but seems like not. There is any other way to test it? I tried to build adaptativecards-site with npm but it was unsuccessful. I've also tried to run js pipelines which completed successfully .

[anna-dingler]

Hi @Diegorro98,

The test site is not built if you create a PR from a forked repo.

I can kick off a pipeline for you, but the site will be gone once it runs again (i.e. by another PR or from new changes).

The easiest solution would be for you to clone our repository and move your changes there, or to test locally (happy to help with errors you are seeing here).

[anna-dingler]

@JeanRoca Can you take a look at this from a PM perspective for adding this feature to the designer. Thanks!

[Diegorro98]

@anna-dingler Thank you for your answer!
Maybe we can review if the changes looks right and are the correct changes, and then try once to kick off a pipeline to test if works as expected.
If it doesn't work as expected and request changes, I will try again to clone and test locally with your help :)

[JeanRoca]

Hey @Diegorro98 thank you for this contribution! I think this will be super helpful to allow users to share their cards and also save their progress in a way to come back to it. Some considerations we should be aware of:

• Will this allow developers to also encode their desired platform and AC schema version? What if I am building out a JSON for Widgets for example, but when I send the encoded link it automatically opens up the Teams container and thus my card does not look good. This would not be the best experience and could create confusion.
• @anna-dingler / @paulcam206 / @jwoo-msft do you folks see any security concerns with this feature? I am worried that users could somehow exploit the encoded query params and cause some form of harm to the person opening the link. Might not be an issue though :)

[Diegorro98]

@JeanRoca Glad to help! :)

• Will this allow developers to also encode their desired platform and AC schema version? What if I am building out a JSON for Widgets for example, but when I send the encoded link it automatically opens up the Teams container and thus my card does not look good. This would not be the best experience and could create confusion.

These changes attempt to obtain to parse the encoded JSON from the query params from the query param and copy it right into the editors, and as far as I know, the platform is not specified in the card payload neither in the data payload. I think it would be great to specify the desired platform on a query param.
EDIT: I have created another branch with this change #8548

About AC schema version, do you refer to these values that are at the card payload?:

{
    "type": "AdaptiveCard",
    ...
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6"
}

If you are speaking about that the answer is that if is at the encoded JSON, it will be at the editor.

[Diegorro98]

I was able to test it as I could, and I saw that the params are already decoded.
Also I found that JSONs needs to be in one line because new lines trigger Content Security Policies. This is not a problem because it will be parsed and later it would be pasted to the editor with the required new lines.

[microsoft-github-policy-service]

Hi @Diegorro98. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along.

[microsoft-github-policy-service]

Hi @Diegorro98. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along.

[microsoft-github-policy-service]

Hi @Diegorro98. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along.

[Diegorro98]

Any update on this?

[Diegorro98]

I was finally able to test this functionality, and it works like a charm! It would be really useful to have this feature!!

Also, this feature combined with #8850 makes them pretty awesome!!!