feat(Experiments): Allow users to edit and preview no-code experiments from experiment page.

[Phanatic]

Problem

In the past, creating a no-code experiment required a user to navigate to the Toolbar page and then launch the toolbar from there to edit an existing experiment.

This PR instead adds a custom implementation section to the experiment page that allows a user to bring up the toolbar with the experiment pre-selected. It also adds a preview variant button to each variant of the web experiment.

Changes

1. Editing a web experiment from its individual page.

On the edit page of a web experiment, this is what you see now for implementation

Clicking on Edit Web experiment on website brings up this dialog that shows the authorized URLs for the posthog project

Selecting a URL takes one to the domain with the experiment pre-selected

2. Previewing web experiment variants from an experiment page.

The Distribution table now has an additional column if its a web experiment, all widths adjusted accordingly.

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

How did you test this code?

[jurajmajerik]

Not sure if this is still on a todo list, but transforms for a variant still isn't applied correctly here:

Screen.Recording.2024-10-29.at.17.06.46.mov

[jurajmajerik]

When saving a new experiment, an empty error banner flickers before successfully saving:

Screen.Recording.2024-10-29.at.17.11.06.mov

[jurajmajerik]

Working well, some comments :)

[Phanatic]

@jurajmajerik thanks for taking a look!

re : #25877 (comment)

The transform the HTML is overriding the transform for the text. Maybe I should order it so that the most significant changes happen first and then the lower priority. As an example HTML Changes -> CSS changes -> Text changes.

This way, the Text changes are always applied.

This should be fixed now

[Phanatic]

Good catch on #25877 (comment)
I just fixed this, it was an issue with checking if any errors existed on the logic before saving.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[github-actions]

Size Change: +613 B (+0.05%)

Total Size: 1.15 MB

ℹ️ View Unchanged

Filename	Size	Change
frontend/dist/toolbar.js	1.15 MB	+613 B (+0.05%)

_{compressed-size-action}

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.