🪟 🎨🔧 Remove oauth position ff (#22304)

* 🪟 🎨🔧 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
airbytehq · Feb 8, 2023 · dcb5fa9 · dcb5fa9
1 parent 9834ca1
commit dcb5fa9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };