From dcb5fa9ee2f1889bf5328a8716f85848b5cea5b5 Mon Sep 17 00:00:00 2001
From: letiescanciano <45267095+letiescanciano@users.noreply.github.com>
Date: Wed, 8 Feb 2023 15:23:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=C2=A0=F0=9F=8E=A8=F0=9F=94=A7=20Re?=
 =?UTF-8?q?move=20oauth=20position=20ff=20(#22304)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🪟 🎨🔧 Remove oauth position ff

We validated that having oauth signup methods on top led to better
conversion rate.

This PR just removes the feature flag we used and set the ouath on top
of the signup form.

I also took the chance to change the position in the login page for
consistency 
---
 .../hooks/services/Experiment/experiments.ts  |  1 -
 .../cloud/views/auth/LoginPage/LoginPage.tsx  | 14 ++++++------
 .../auth/SignupPage/SignupPage.module.scss    |  6 -----
 .../views/auth/SignupPage/SignupPage.tsx      | 22 +++++--------------
 4 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts
index f5cf670c8611..4d10d956e6d7 100644
--- a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts
+++ b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts
@@ -18,7 +18,6 @@ export interface Experiments {
   "authPage.signup.hideName": boolean;
   "authPage.signup.hideCompanyName": boolean;
   "onboarding.speedyConnection": boolean;
-  "authPage.oauth.position": "top" | "bottom";
   "connection.onboarding.sources": string;
   "connection.onboarding.destinations": string;
   "connection.autoDetectSchemaChanges": boolean;
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx
index 3550002beeaf..fb93cd15ea18 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx
@@ -1,4 +1,4 @@
-import { Field, FieldProps, Formik } from "formik";
+import { Field, FieldProps, Formik, Form } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { NavigateOptions, To, useNavigate } from "react-router-dom";
@@ -7,13 +7,14 @@ import * as yup from "yup";
 import { LabeledInput, Link } from "components";
 import { HeadTitle } from "components/common/HeadTitle";
 import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useQuery } from "hooks/useQuery";
 import { CloudRoutes } from "packages/cloud/cloudRoutePaths";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
-import { BottomBlock, FieldItem, Form } from "packages/cloud/views/auth/components/FormComponents";
+import { BottomBlock, FieldItem } from "packages/cloud/views/auth/components/FormComponents";
 import { FormTitle } from "packages/cloud/views/auth/components/FormTitle";
 
 import styles from "./LoginPage.module.scss";
@@ -35,12 +36,14 @@ export const LoginPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.LOGIN);
 
   return (
-    <div>
+    <FlexContainer direction="column" gap="xl">
       <HeadTitle titles={[{ id: "login.login" }]} />
       <FormTitle>
         <FormattedMessage id="login.loginTitle" />
       </FormTitle>
 
+      <OAuthLogin />
+      <Separator />
       <Formik
         initialValues={{
           email: "",
@@ -113,10 +116,7 @@ export const LoginPage: React.FC = () => {
           </Form>
         )}
       </Formik>
-
-      <Separator />
-      <OAuthLogin />
       <Disclaimer />
-    </div>
+    </FlexContainer>
   );
 };
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss
index 64407c1b10a7..409f7a190f34 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss
+++ b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss
@@ -1,12 +1,6 @@
 @use "../../../../../scss/colors";
 @use "../../../../../scss/variables";
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: variables.$spacing-xl;
-}
-
 .title {
   width: 250px;
   margin-bottom: variables.$spacing-md;
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
index b498ed90b149..90ad2aa591e9 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { HeadTitle } from "components/common/HeadTitle";
+import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
-import { useExperiment } from "hooks/services/Experiment";
 
 import { Separator } from "./components/Separator";
 import { Disclaimer, SignupForm } from "./components/SignupForm";
@@ -19,10 +19,9 @@ interface SignupPageProps {
 
 const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
   useTrackPage(PageTrackingCodes.SIGNUP);
-  const oAuthPosition = useExperiment("authPage.oauth.position", "bottom");
 
   return (
-    <div className={styles.container}>
+    <FlexContainer direction="column" gap="xl">
       <HeadTitle titles={[{ id: "login.signup" }]} />
       <Heading as="h1" size="xl" className={styles.title}>
         <FormattedMessage
@@ -37,21 +36,12 @@ const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
         />
       </Heading>
       <SpecialBlock />
-      {oAuthPosition === "top" && (
-        <>
-          <OAuthLogin />
-          <Separator />
-        </>
-      )}
+
+      <OAuthLogin />
+      <Separator />
       <SignupForm />
-      {oAuthPosition === "bottom" && (
-        <>
-          <Separator />
-          <OAuthLogin />
-        </>
-      )}
       <Disclaimer />
-    </div>
+    </FlexContainer>
   );
 };