Skip to content

🪟 🎉 Add experimentation support to auth pages #14650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jul 14, 2022

Conversation

edmundito
Copy link
Contributor

What

Closes #13063

Adds the ability to experiment with the auth pages, most notably the sign up page:

  1. The signup button string can be customized without changing other buttons
  2. The right side of the auth pages can be replaced with a URL
  3. The self-hosted CTA can be hidden

How

For the most part, the text experiments can be enabled by changing the i18n strings. The Signup button has been given a unique string id so that it doesn't override titles or other uses on the button on other pages (like the email invitation page.)

For the side panel URL, it renders an iframe with the page. The page is limited to the airbyte domain and must be https. Otherwise, there will be an error.

For the self-hosted CTA (aka <GitBlock />) it just adds a boolean that can be controlled from LaunchDarkly to hide it.

Finally, the customizations for <PersonQuoteCover /> have been removed.

Recommended reading order

Top to bottom

Tests

  1. Each flag has been tested through LaunchDarkly to ensure that it updates correctly.
  2. Tested invalid urls for right side

@edmundito edmundito added area/frontend area/frontend Related to the Airbyte webapp labels Jul 12, 2022
@edmundito edmundito requested a review from a team as a code owner July 12, 2022 22:05
@github-actions github-actions bot added the area/platform issues related to the platform label Jul 12, 2022
@@ -39,7 +59,11 @@ const Auth: React.FC = () => {
</FormContent>
</div>
<div className={styles.rightSide}>
<PersonQuoteCover />
{hasValidRightSideUrl(rightSideUrl) ? (
<iframe src={rightSideUrl} title="Right Side" scrolling="no" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the title might be read out by assistive technology, I would suggest we change this to something that gives a bit more hint about the iframe's content, e.g. Why you should use Airbyte or Benefits of using Airbyte. Also I think we should ideally i18n this string.

@edmundito edmundito force-pushed the edmundito/signup-experiment-support branch from be8dfe4 to 9375b5c Compare July 13, 2022 23:18
@@ -18,4 +18,11 @@
display: flex;
flex-direction: column;
justify-content: space-between;

> iframe {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎨 Nitpick: Could we give the iFrame a className as well, to not need to work with tag selectors here?

@timroes timroes force-pushed the edmundito/signup-experiment-support branch from b56dddd to 0e277c6 Compare July 14, 2022 08:13
Comment on lines +14 to +19
const getExperiment: ExperimentService["getExperiment"] = (key): any => {
if (key === TEST_EXPERIMENT_KEY) {
return { test: 13 };
}
throw new Error(`${key} not mocked for testing`);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@edmundito I pushed a small change to this, so the method is throwing for not implemented ones, which helps us catch it more reliable during a test if it would ever be called with a different key. (Also helps us getting rid of one any ;) )

@edmundito edmundito requested a review from timroes July 14, 2022 16:12
Copy link
Contributor

@timroes timroes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM, have viewed and tried in session together

@edmundito edmundito merged commit 21fbf22 into master Jul 14, 2022
@edmundito edmundito deleted the edmundito/signup-experiment-support branch July 14, 2022 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp area/platform issues related to the platform
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add experimentation support to sign up
2 participants