packages/core: move LoginPage to layouts and remove it as a hardcoded route in the app (#1020)

packages/app/src/App.tsx

@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-import { createApp, AlertDisplay, OAuthRequestDialog } from '@backstage/core';
+import {
+  createApp,
+  AlertDisplay,
+  OAuthRequestDialog,
+  LoginPage,
+} from '@backstage/core';
 import React, { FC } from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Root from './components/Root';
 import * as plugins from './plugins';
 import apis from './apis';
@@ -35,6 +40,7 @@ const App: FC<{}> = () => (
     <OAuthRequestDialog />
     <Router>
       <Root>
+        <Route key="login" path="/login" component={LoginPage} exact />,
         <AppComponent />
       </Root>
     </Router>

packages/core/src/api/app/App.tsx

@@ -38,7 +38,6 @@ import {
   AppThemeSelector,
   appThemeApiRef,
 } from '../apis';
-import LoginPage from './LoginPage';
 import { lightTheme, darkTheme } from '@backstage/theme';
 import { ApiAggregator } from '../apis/ApiAggregator';
 
@@ -138,10 +137,6 @@ class AppImpl implements BackstageApp {
       FeatureFlags.registeredFeatureFlags = registeredFeatureFlags;
     }
 
-    routes.push(
-      <Route key="login" path="/login" component={LoginPage} exact />,
-    );
-
     const rendered = (
       <Switch>
         {routes}

packages/core/src/index.ts

@@ -28,6 +28,7 @@ export { default as InfoCard } from './layout/InfoCard';
 export { CardTab, TabbedCard } from './layout/TabbedCard';
 export { default as ErrorBoundary } from './layout/ErrorBoundary';
 export * from './layout/Sidebar';
+export * from './layout/LoginPage';
 export { AlertDisplay } from './components/AlertDisplay';
 export { default as HorizontalScrollGrid } from './components/HorizontalScrollGrid';
 export { default as ProgressCard } from './components/ProgressBars/ProgressCard';

packages/core/src/layout/LoginPage/LoginPage.tsx

@@ -16,10 +16,10 @@
 
 import React, { FC, useState } from 'react';
 import GitHubIcon from '@material-ui/icons/GitHub';
-import Page from '../../../layout/Page';
-import Header from '../../../layout/Header';
-import Content from '../../../layout/Content/Content';
-import ContentHeader from '../../../layout/ContentHeader/ContentHeader';
+import Page from '../Page';
+import Header from '../Header';
+import Content from '../Content/Content';
+import ContentHeader from '../ContentHeader/ContentHeader';
 import {
   Grid,
   Typography,
@@ -29,13 +29,13 @@ import {
   ListItem,
   Link,
 } from '@material-ui/core';
-import InfoCard from '../../../layout/InfoCard/InfoCard';
+import InfoCard from '../InfoCard/InfoCard';
 
 enum AuthType {
   GitHub,
 }
 
-const LoginPage: FC<{}> = () => {
+export const LoginPage: FC<{}> = () => {
   const [githubUsername, setGithubUsername] = useState(String);
   const [githubPersonalAuthToken, setGithubPersonalAuthToken] = useState(
     String,
@@ -72,11 +72,11 @@ const LoginPage: FC<{}> = () => {
         'Content-Type': 'application/x-www-form-urlencoded',
       }),
     })
-      .then((response) => {
+      .then(response => {
         if (response.status === 200) return response.json();
         throw Error(`${response.status} ${response.statusText}`);
       })
-      .then((data) => {
+      .then(data => {
         const info = {
           username: username,
           token: token,
@@ -176,5 +176,3 @@ const LoginPage: FC<{}> = () => {
     </Page>
   );
 };
-
-export default LoginPage;

packages/core/src/layout/LoginPage/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './LoginPage';
+export { LoginPage } from './LoginPage';