Merge branch 'master' into leti/experiment-add-source-in-signup

* master:
  🪟 🎨 Adapt Osano banner to new UI (#19029)
  🪟 🔧 Add a start:cloud command to the webapp (#19026)
  🪟🧪 [Experiment] Move OAuth to top of signup page (#18899)

Author: letiescanciano

airbyte-webapp/package-lock.json

@@ -9,6 +9,8 @@
     "prepare": "cd .. && husky install airbyte-webapp/.husky",
     "prestart": "npm run generate-client",
     "start": "craco start",
+    "prestart:cloud": "npm run generate-client",
+    "start:cloud": "AB_ENV=frontend-dev node -r ./scripts/environment.js ./node_modules/.bin/craco start",
     "prebuild": "npm run generate-client",
     "build": "BUILD_PATH='./build/app' craco build",
     "pretest": "npm run generate-client",
@@ -110,6 +112,7 @@
     "@types/unist": "^2.0.5",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
+    "dotenv": "^16.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.11.0",

airbyte-webapp/package.json

@@ -0,0 +1,25 @@
+const fs = require("fs");
+const path = require("path");
+
+const dotenv = require("dotenv");
+
+if (!process.env.AB_ENV) {
+  return;
+}
+
+const envFile = path.resolve(
+  __dirname,
+  "../../../airbyte-cloud/cloud-webapp/development",
+  `.env.${process.env.AB_ENV}`
+);
+
+if (!fs.existsSync(envFile)) {
+  console.error(
+    `~~~ This mode is for Airbyte employees only. ~~~\n` +
+      `Could not find .env file for environment ${process.env.AB_ENV} (looking at ${envFile}).\n` +
+      `Make sure you have the latest airbyte-cloud repository checked out in a directory directly next to the airbyte OSS repository.\n`
+  );
+  process.exit(42);
+}
+
+dotenv.config({ path: envFile });

airbyte-webapp/scripts/environment.js

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

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

@@ -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/LoginPage/LoginPage.tsx

@@ -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.module.scss

@@ -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/OAuthLogin/OAuthLogin.tsx

@@ -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.module.scss

@@ -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/SignupPage.tsx

@@ -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.module.scss

@@ -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/Separator.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";
@@ -16,7 +16,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 {

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

@@ -61,8 +61,9 @@ export const loadOsano = (): void => {
   style.appendChild(
     document.createTextNode(`
     .osano-cm-widget { display: none; }
+    .osano-cm-dialog__close { display: none; }
     .osano-cm-button--type_denyAll { display: none; }
-    .osano-cm-button--type_manage { background-color: inherit; border: 1px inherit; font-weight: 200; }`)
+    .osano-cm-button--type_manage { background-color: inherit;  border: 1px #1a194d solid; color: #1a194d; font-weight: 200; }`)
   );
   document.head.appendChild(style);