[sandbox] Preserve settings in URL query parameters for easy sharing

[edvinasjurele]

Is your feature request related to a problem? Please describe.

To ensure smooth QA process, we have a need to share the sandbox URLs to other people with the settings preserved, hence it is not possible to have it now, which makes it inconvenient to share link and share what to enter to settings to test out different look or configuration of the plugin for QA or other developers.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Whenever anything changes in "Settings" (manifest / translatable toggle / language) changes, preserve the state in URL query parameters.

Additional context

Screen.Recording.2024-03-21.at.16.44.10.mov

[eunjae-lee]

Hi @edvinasjurele, actually we have a ticket exactly for this in our backlog. We cannot guarantee the ETA, but we'll internally discuss about this. Thank you!

[Harrywg]

Would be nice to get this feature. Some times a page reload is needed to shake off any live reload related bugs, which then means I need to re-add any options I've been working with!

[edvinasjurele]

The data preserving can also be done by saving data to local storage in browser, but I have intentionally suggested the query parameter because of possibility to share setup via URL. This is handy for adding such link in ticket for QA or other developers for easy click & go.

[Harrywg]

Good to know, thanks :)

[demetriusfeijoo]

Hey @edvinasjurele @Harrywg 👋

As we don't have an ETA yet for implementing this feature, I wonder then if, in the meantime, using a manifest file would help, somehow 🤔 .

Under the hood, it will add all the options defined in the manifest file to the Sandbox URL as query parameters, allowing you to do hard reloads while preserving them.

Please let me know if it helps 🙏

[edvinasjurele]

Oh, nice! it is indeed a hidden feature 🙌

I see it is being taken and applied with https://github.com/storyblok/field-plugin/blob/main/packages/sandbox/src/components/FieldPluginSandbox.tsx#L88

and I see you are already building the query params string with

field-plugin/packages/lib-helpers/vite/src/sandbox.ts

Line 38 in aadb678

const queryString = buildQueryString(queryParams)

Thank you for sharing, this could be an escape for ourselves in manually building such links in the meantime with some:

const manifest = {
  "options": [
    {
      "name": "Option 1",
      "value": "option-1"
    },
    {
      "name": "Option 2",
      "value": "option-2"
    }
  ]
}

const queryParams = new URLSearchParams({
  url: 'http://localhost:8080/',
  manifest: JSON.stringify(manifest),
}).toString();

console.log(`https://plugin-sandbox.storyblok.com/field-plugin?${queryParams}`);

which produces: https://plugin-sandbox.storyblok.com/field-plugin?url=http%3A%2F%2Flocalhost%3A8080%2F&manifest=%7B%22options%22%3A%5B%7B%22name%22%3A%22Option+1%22%2C%22value%22%3A%22option-1%22%7D%2C%7B%22name%22%3A%22Option+2%22%2C%22value%22%3A%22option-2%22%7D%5D%7D

or just copying it from the dev console outcome.

---

I see the feature is so close. We just need it to be used in the sandbox application itself!

Though we still need these fields be in query params too: