🪟🧪 [Experiment] Move OAuth to top of signup page (#18899)

* 🪟🧪 [Experiment] Move OAuth to top of signup page

* bring separator back to login page

Author: letiescanciano

airbyte-webapp/src/hooks/services/Experiment/experiments.ts

@@ -19,4 +19,5 @@ export interface Experiments {
   "authPage.oauth.google.signUpPage": boolean;
   "authPage.oauth.github.signUpPage": boolean;
   "onboarding.speedyConnection": boolean;
+  "authPage.oauth.position": "top" | "bottom";
 }

airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx

@@ -17,6 +17,7 @@ import { BottomBlock, FieldItem, Form } from "packages/cloud/views/auth/componen
 import { FormTitle } from "packages/cloud/views/auth/components/FormTitle";
 
 import { OAuthLogin } from "../OAuthLogin";
+import { Separator } from "../SignupPage/components/Separator";
 import { Disclaimer } from "../SignupPage/components/SignupForm";
 import styles from "./LoginPage.module.scss";
 
@@ -112,6 +113,8 @@ const LoginPage: React.FC = () => {
           </Form>
         )}
       </Formik>
+
+      <Separator />
       <OAuthLogin />
       <Disclaimer />
     </div>

airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss

@@ -1,32 +1,6 @@
 @use "../../../../../scss/variables" as vars;
 @use "../../../../../scss/colors";
 
-.separator {
-  display: flex;
-  margin: vars.$spacing-xl 0;
-  font-size: 16px;
-  text-align: center;
-  font-weight: bold;
-  color: colors.$grey-800;
-  text-transform: uppercase;
-
-  &::before,
-  &::after {
-    content: "";
-    flex: 1 1;
-    border-bottom: 1px solid colors.$grey-300;
-    margin: auto;
-  }
-
-  &::before {
-    margin-right: vars.$spacing-md;
-  }
-
-  &::after {
-    margin-left: vars.$spacing-md;
-  }
-}
-
 .buttons {
   display: grid;
   grid-template-columns: 1fr;

airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.tsx

@@ -100,9 +100,6 @@ export const OAuthLogin: React.FC<OAuthLoginProps> = ({ isSignUpPage }) => {
 
   return (
     <div>
-      <div className={styles.separator}>
-        <FormattedMessage id="login.oauth.or" />
-      </div>
       {isLoading && (
         <div className={styles.spinner}>
           <Spinner />

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss

@@ -1,6 +1,12 @@
 @use "../../../../../scss/colors";
 @use "../../../../../scss/variables";
 
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-xl;
+}
+
 .title {
   width: 250px;
   margin-bottom: variables.$spacing-md;

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx

@@ -5,8 +5,10 @@ import { HeadTitle } from "components/common/HeadTitle";
 import { Heading } from "components/ui/Heading";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
+import { useExperiment } from "hooks/services/Experiment";
 
 import { OAuthLogin } from "../OAuthLogin";
+import { Separator } from "./components/Separator";
 import { Disclaimer, SignupForm } from "./components/SignupForm";
 import SpecialBlock from "./components/SpecialBlock";
 import styles from "./SignupPage.module.scss";
@@ -17,8 +19,10 @@ interface SignupPageProps {
 
 const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
   useTrackPage(PageTrackingCodes.SIGNUP);
+  const oAuthPosition = useExperiment("authPage.oauth.position", "bottom");
+
   return (
-    <div>
+    <div className={styles.container}>
       <HeadTitle titles={[{ id: "login.signup" }]} />
       <Heading as="h1" size="xl" className={styles.title}>
         <FormattedMessage
@@ -33,8 +37,19 @@ const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
         />
       </Heading>
       <SpecialBlock />
+      {oAuthPosition === "top" && (
+        <>
+          <OAuthLogin isSignUpPage />
+          <Separator />
+        </>
+      )}
       <SignupForm />
-      <OAuthLogin isSignUpPage />
+      {oAuthPosition === "bottom" && (
+        <>
+          <Separator />
+          <OAuthLogin isSignUpPage />
+        </>
+      )}
       <Disclaimer />
     </div>
   );

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/Separator.module.scss

@@ -0,0 +1,28 @@
+@use "../../../../../../scss/variables" as vars;
+@use "../../../../../../scss/colors";
+
+.separator {
+  display: flex;
+  padding: vars.$spacing-md 0;
+  font-size: 16px;
+  text-align: center;
+  font-weight: bold;
+  color: colors.$grey-800;
+  text-transform: uppercase;
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1 1;
+    border-bottom: 1px solid colors.$grey-300;
+    margin: auto;
+  }
+
+  &::before {
+    margin-right: vars.$spacing-md;
+  }
+
+  &::after {
+    margin-left: vars.$spacing-md;
+  }
+}

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/Separator.tsx

@@ -0,0 +1,10 @@
+import { FormattedMessage } from "react-intl";
+
+import styles from "./Separator.module.scss";
+export const Separator: React.FC = () => {
+  return (
+    <div className={styles.separator}>
+      <FormattedMessage id="login.oauth.or" />
+    </div>
+  );
+};

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldProps, Formik } from "formik";
+import { Field, FieldProps, Formik, Form } from "formik";
 import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useSearchParams } from "react-router-dom";
@@ -15,7 +15,7 @@ import { isGdprCountry } from "utils/dataPrivacy";
 import { links } from "utils/links";
 
 import CheckBoxControl from "../../components/CheckBoxControl";
-import { BottomBlock, FieldItem, Form, RowFieldItem } from "../../components/FormComponents";
+import { BottomBlock, FieldItem, RowFieldItem } from "../../components/FormComponents";
 import styles from "./SignupForm.module.scss";
 
 interface FormValues {