feat(spa): Add /auth/login/:orgId route (#38835)

static/app/routes.tsx

@@ -145,6 +145,7 @@ function buildRoutes() {
   const experimentalSpaRoutes = EXPERIMENTAL_SPA ? (
     <Route path="/auth/login/" component={errorHandler(AuthLayout)}>
       <IndexRoute component={make(() => import('sentry/views/auth/login'))} />
+      <Route path=":orgId/" component={make(() => import('sentry/views/auth/login'))} />
     </Route>
   ) : null;
 

static/app/views/auth/login.spec.jsx

@@ -13,7 +13,7 @@ describe('Login', function () {
       body: {},
     });
 
-    render(<Login />);
+    render(<Login params={{}} />);
 
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
   });
@@ -24,7 +24,7 @@ describe('Login', function () {
       statusCode: 500,
     });
 
-    render(<Login />);
+    render(<Login params={{}} />);
 
     expect(
       await screen.findByText('Unable to load authentication configuration')
@@ -37,7 +37,7 @@ describe('Login', function () {
       body: {canRegister: false},
     });
 
-    render(<Login />);
+    render(<Login params={{}} />);
 
     expect(await screen.findByText('Lost your password?')).toBeInTheDocument();
     expect(screen.queryByText('Register')).not.toBeInTheDocument();
@@ -49,7 +49,7 @@ describe('Login', function () {
       body: {canRegister: true},
     });
 
-    render(<Login />);
+    render(<Login params={{}} />);
 
     expect(await screen.findByRole('link', {name: 'Register'})).toBeInTheDocument();
   });
@@ -60,7 +60,7 @@ describe('Login', function () {
       body: {canRegister: true},
     });
 
-    render(<Login />);
+    render(<Login params={{}} />);
 
     // Default tab is login
     expect(await screen.findByPlaceholderText('username or email')).toBeInTheDocument();

static/app/views/auth/login.tsx

@@ -1,11 +1,14 @@
 import {Component, Fragment} from 'react';
+import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
 import {Client} from 'sentry/api';
+import Alert from 'sentry/components/alert';
+import Button from 'sentry/components/button';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import NavTabs from 'sentry/components/navTabs';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {AuthConfig} from 'sentry/types';
 import withApi from 'sentry/utils/withApi';
@@ -24,7 +27,7 @@ type ActiveTab = keyof typeof FORM_COMPONENTS;
 
 type TabConfig = [key: ActiveTab, label: string, disabled?: boolean];
 
-type Props = {
+type Props = RouteComponentProps<{orgId?: string}, {}> & {
   api: Client;
 };
 
@@ -103,6 +106,8 @@ class Login extends Component<Props, State> {
         </li>
       );
 
+    const {orgId} = this.props.params;
+
     return (
       <Fragment>
         <Header>
@@ -110,6 +115,7 @@ class Login extends Component<Props, State> {
           <AuthNavTabs>{tabs.map(renderTab)}</AuthNavTabs>
         </Header>
         {loading && <LoadingIndicator />}
+
         {error && (
           <StyledLoadingError
             message={t('Unable to load authentication configuration')}
@@ -118,6 +124,21 @@ class Login extends Component<Props, State> {
         )}
         {!loading && authConfig !== null && !error && (
           <FormWrapper hasAuthProviders={this.hasAuthProviders}>
+            {orgId !== undefined && (
+              <Alert
+                type="warning"
+                trailingItems={
+                  <Button to="/" size="xs">
+                    Reload
+                  </Button>
+                }
+              >
+                {tct(
+                  "Experimental SPA mode does not currently support SSO style login. To develop against the [org] youll need to copy you'll production session cookie.",
+                  {org: this.props.params.orgId}
+                )}
+              </Alert>
+            )}
             <FormComponent {...{api, authConfig}} />
           </FormWrapper>
         )}