fix(ui): Move `/auth/login/` outside of `views/app` route (#18994)

This moves our experimental `/auth/login/` route outside of `views/app`. `views/app` expects the user to already be logged in. This fixes an issue where when you login via experimental SPA, you do not have a list of organizations to choose from since the request was made when you were logged out in the login screen.

src/sentry/static/sentry/app/main.tsx

@@ -1,9 +1,12 @@
 import {CacheProvider} from '@emotion/core'; // This is needed to set "speedy" = false (for percy)
+import {ThemeProvider} from 'emotion-theming';
 import {cache} from 'emotion'; // eslint-disable-line emotion/no-vanilla
 import React from 'react';
 import {Router, browserHistory} from 'react-router';
 
+import GlobalStyles from 'app/styles/global';
 import routes from 'app/routes';
+import theme from 'app/utils/theme';
 import {loadPreferencesState} from 'app/actionCreators/preferences';
 
 class Main extends React.Component {
@@ -14,7 +17,10 @@ class Main extends React.Component {
   render() {
     return (
       <CacheProvider value={cache}>
-        <Router history={browserHistory}>{routes()}</Router>
+        <ThemeProvider theme={theme}>
+          <GlobalStyles theme={theme} />
+          <Router history={browserHistory}>{routes()}</Router>
+        </ThemeProvider>
       </CacheProvider>
     );
   }

src/sentry/static/sentry/app/views/app/index.tsx

@@ -1,6 +1,5 @@
 import $ from 'jquery';
 import {RouteComponentProps} from 'react-router/lib/Router';
-import {ThemeProvider} from 'emotion-theming';
 import {browserHistory} from 'react-router';
 import Cookies from 'js-cookie';
 import PropTypes from 'prop-types';
@@ -20,14 +19,12 @@ import AlertActions from 'app/actions/alertActions';
 import ConfigStore from 'app/stores/configStore';
 import ErrorBoundary from 'app/components/errorBoundary';
 import GlobalModal from 'app/components/globalModal';
-import GlobalStyles from 'app/styles/global';
 import HookStore from 'app/stores/hookStore';
 import Indicators from 'app/components/indicators';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import NewsletterConsent from 'app/views/newsletterConsent';
 import OrganizationsStore from 'app/stores/organizationsStore';
 import getRouteStringFromRoutes from 'app/utils/getRouteStringFromRoutes';
-import theme from 'app/utils/theme';
 import withApi from 'app/utils/withApi';
 import withConfig from 'app/utils/withConfig';
 
@@ -259,15 +256,12 @@ class App extends React.Component<Props, State> {
     }
 
     return (
-      <ThemeProvider theme={theme}>
-        <GlobalStyles theme={theme} />
-        <div className="main-container" tabIndex={-1} ref={this.mainContainerRef}>
-          <GlobalModal onClose={this.handleGlobalModalClose} />
-          <SystemAlerts className="messages-container" />
-          <Indicators className="indicators-container" />
-          <ErrorBoundary>{this.renderBody()}</ErrorBoundary>
-        </div>
-      </ThemeProvider>
+      <div className="main-container" tabIndex={-1} ref={this.mainContainerRef}>
+        <GlobalModal onClose={this.handleGlobalModalClose} />
+        <SystemAlerts className="messages-container" />
+        <Indicators className="indicators-container" />
+        <ErrorBoundary>{this.renderBody()}</ErrorBoundary>
+      </div>
     );
   }
 }

tests/js/spec/components/modals/sudoModal.spec.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {mount} from 'sentry-test/enzyme';
+import {mountWithTheme} from 'sentry-test/enzyme';
 
 import {Client} from 'app/api';
 import App from 'app/views/app';
@@ -47,7 +47,7 @@ describe('Sudo Modal', function() {
       ...ConfigStore.get('user'),
       hasPasswordAuth: true,
     });
-    const wrapper = mount(<App>{<div>placeholder content</div>}</App>);
+    const wrapper = mountWithTheme(<App>{<div>placeholder content</div>}</App>);
 
     const api = new Client();
     const successCb = jest.fn();
@@ -131,7 +131,7 @@ describe('Sudo Modal', function() {
       ...ConfigStore.get('user'),
       hasPasswordAuth: false,
     });
-    const wrapper = mount(<App>{<div>placeholder content</div>}</App>);
+    const wrapper = mountWithTheme(<App>{<div>placeholder content</div>}</App>);
 
     const api = new Client();
     const successCb = jest.fn();