Plug in experiment

Author: Laurie T. Malau

components/dashboard/src/Login.tsx

@@ -11,6 +11,7 @@ import { UserContext } from "./user-context";
 import { TeamsContext } from "./teams/teams-context";
 import { getGitpodService } from "./service/service";
 import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName, getSafeURLRedirect } from "./provider-utils";
+import { Experiment } from './experiments';
 import gitpod from './images/gitpod.svg';
 import gitpodDark from './images/gitpod-dark.svg';
 import gitpodIcon from './icons/gitpod.svg';
@@ -47,9 +48,12 @@ export function hasVisitedMarketingWebsiteBefore() {
 export function Login() {
     const { setUser } = useContext(UserContext);
     const { setTeams } = useContext(TeamsContext);
+    const experiment = "login-from-context-6826";
+
     const urlHash = getURLHash();
     let hostFromContext: string | undefined;
     let repoPathname: string | undefined;
+
     try {
         if (urlHash.length > 0) {
             const url = new URL(urlHash);
@@ -63,20 +67,26 @@ export function Login() {
     const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
     const [providerFromContext, setProviderFromContext] = useState<AuthProviderInfo>();
-    const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore() && !urlHash.startsWith("https://");
+
+    const showWelcome = Experiment.has(experiment) ?
+        (!hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore() && !urlHash.startsWith("https://"))
+        : (!hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore())
+        ;
 
     useEffect(() => {
         (async () => {
             setAuthProviders(await getGitpodService().server.getAuthProviders());
         })();
     }, [])
 
-    useEffect(() => {
-        if (hostFromContext && authProviders) {
-            const providerFromContext = authProviders.find(provider => provider.host === hostFromContext);
-            setProviderFromContext(providerFromContext);
-        }
-    }, [authProviders])
+    if (Experiment.has(experiment)) {
+        useEffect(() => {
+            if (hostFromContext && authProviders) {
+                const providerFromContext = authProviders.find(provider => provider.host === hostFromContext);
+                setProviderFromContext(providerFromContext);
+            }
+        }, [authProviders])
+    }
 
     const authorizeSuccessful = async (payload?: string) => {
         updateUser().catch(console.error);
@@ -178,16 +188,16 @@ export function Login() {
                         <div className="flex flex-col space-y-3 items-center">
                             {providerFromContext
                                 ?
-                                    <button key={"button" + providerFromContext.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(providerFromContext.host)}>
-                                        {iconForAuthProvider(providerFromContext.authProviderType)}
-                                        <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(providerFromContext.host)}</span>
-                                    </button>
+                                <button key={"button" + providerFromContext.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(providerFromContext.host)}>
+                                    {iconForAuthProvider(providerFromContext.authProviderType)}
+                                    <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(providerFromContext.host)}</span>
+                                </button>
                                 :
-                                    authProviders.map(ap =>
-                                        <button key={"button" + ap.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(ap.host)}>
-                                            {iconForAuthProvider(ap.authProviderType)}
-                                            <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(ap.host)}</span>
-                                        </button>)
+                                authProviders.map(ap =>
+                                    <button key={"button" + ap.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(ap.host)}>
+                                        {iconForAuthProvider(ap.authProviderType)}
+                                        <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(ap.host)}</span>
+                                    </button>)
                             }
                         </div>
 

components/dashboard/src/experiments.ts

@@ -28,6 +28,7 @@ const Experiments = {
      * Experiment "example" will be activate on login for 10% of all clients.
      */
     // "example": 0.1,
+    "login-from-context-6826": 0.5,
 };
 const ExperimentsSet = new Set(Object.keys(Experiments)) as Set<Experiment>;
 export type Experiment = keyof (typeof Experiments);