Merge branch 'master' into gitops-profiles

packages/app/package.json

@@ -1,27 +1,28 @@
 {
   "name": "example-app",
-  "version": "0.1.1-alpha.6",
+  "version": "0.1.1-alpha.7",
   "private": true,
   "dependencies": {
-    "@backstage/cli": "^0.1.1-alpha.6",
-    "@backstage/core": "^0.1.1-alpha.6",
-    "@backstage/plugin-catalog": "^0.1.1-alpha.6",
-    "@backstage/plugin-circleci": "^0.1.1-alpha.6",
-    "@backstage/plugin-explore": "^0.1.1-alpha.6",
-    "@backstage/plugin-gitops-profiles": "^0.1.1-alpha.6",
-    "@backstage/plugin-home-page": "^0.1.1-alpha.6",
-    "@backstage/plugin-lighthouse": "^0.1.1-alpha.6",
-    "@backstage/plugin-register-component": "^0.1.1-alpha.6",
-    "@backstage/plugin-scaffolder": "^0.1.1-alpha.6",
-    "@backstage/plugin-sentry": "^0.1.1-alpha.6",
-    "@backstage/plugin-tech-radar": "^0.1.1-alpha.6",
-    "@backstage/plugin-welcome": "^0.1.1-alpha.6",
-    "@backstage/theme": "^0.1.1-alpha.6",
+    "@backstage/cli": "^0.1.1-alpha.7",
+    "@backstage/core": "^0.1.1-alpha.7",
+    "@backstage/plugin-catalog": "^0.1.1-alpha.7",
+    "@backstage/plugin-circleci": "^0.1.1-alpha.7",
+    "@backstage/plugin-explore": "^0.1.1-alpha.7",
+    "@backstage/plugin-gitops-profiles": "^0.1.1-alpha.7",
+    "@backstage/plugin-home-page": "^0.1.1-alpha.7",
+    "@backstage/plugin-lighthouse": "^0.1.1-alpha.7",
+    "@backstage/plugin-register-component": "^0.1.1-alpha.7",
+    "@backstage/plugin-scaffolder": "^0.1.1-alpha.7",
+    "@backstage/plugin-sentry": "^0.1.1-alpha.7",
+    "@backstage/plugin-tech-radar": "^0.1.1-alpha.7",
+    "@backstage/plugin-welcome": "^0.1.1-alpha.7",
+    "@backstage/theme": "^0.1.1-alpha.7",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-hot-loader": "^4.12.21",
     "react-router-dom": "^5.2.0",
     "react-use": "^14.2.0",
     "zen-observable": "^0.8.15"
@@ -74,10 +75,10 @@
       }
     },
     "/catalog/api": {
-      "target": "http://localhost:3003",
+      "target": "http://localhost:7000",
       "changeOrigin": true,
       "pathRewrite": {
-        "^/catalog/api/": "/"
+        "^/catalog/api/": "/catalog/"
       }
     }
   }

packages/app/public/index.html

@@ -8,47 +8,38 @@
       name="description"
       content="Backstage is an open platform for building developer portals"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="<%= publicPath %>/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link
       rel="manifest"
-      href="%PUBLIC_URL%/manifest.json"
+      href="<%= publicPath %>/manifest.json"
       crossorigin="use-credentials"
     />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/apple-touch-icon.png"
+      href="<%= publicPath %>/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicon-32x32.png"
+      href="<%= publicPath %>/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicon-16x16.png"
+      href="<%= publicPath %>/favicon-16x16.png"
     />
     <link
       rel="mask-icon"
-      href="%PUBLIC_URL%/safari-pinned-tab.svg"
+      href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
     <style>
@@ -56,9 +47,9 @@
         min-height: 100%;
       }
     </style>
-    <title>Backstage</title>
+    <title><%= app.title %></title>
   </head>
-  <body style="margin: 0">
+  <body style="margin: 0;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

packages/app/src/App.tsx

@@ -16,26 +16,14 @@
 
 import { createApp, AlertDisplay, OAuthRequestDialog } from '@backstage/core';
 import React, { FC } from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
 import Root from './components/Root';
 import * as plugins from './plugins';
 import apis from './apis';
+import { hot } from 'react-hot-loader/root';
 
 const app = createApp({
   apis,
   plugins: Object.values(plugins),
-  configLoader: async () => ({
-    app: {
-      title: 'Backstage Example App',
-      baseUrl: 'http://localhost:3000',
-    },
-    backend: {
-      baseUrl: 'http://localhost:7000',
-    },
-    organization: {
-      name: 'Spotify',
-    },
-  }),
 });
 
 const AppProvider = app.getProvider();
@@ -45,12 +33,10 @@ const App: FC<{}> = () => (
   <AppProvider>
     <AlertDisplay />
     <OAuthRequestDialog />
-    <Router>
-      <Root>
-        <AppComponent />
-      </Root>
-    </Router>
+    <Root>
+      <AppComponent />
+    </Root>
   </AppProvider>
 );
 
-export default App;
+export default hot(App);

packages/app/src/apis.ts

@@ -25,9 +25,13 @@ import {
   featureFlagsApiRef,
   FeatureFlags,
   GoogleAuth,
+  GithubAuth,
   oauthRequestApiRef,
   OAuthRequestManager,
   googleAuthApiRef,
+  githubAuthApiRef,
+  storageApiRef,
+  WebStorage,
 } from '@backstage/core';
 
 import {
@@ -45,8 +49,12 @@ import { gitOpsApiRef, GitOpsRestApi } from '@backstage/plugin-gitops-profiles';
 const builder = ApiRegistry.builder();
 
 const alertApi = builder.add(alertApiRef, new AlertApiForwarder());
+const errorApi = builder.add(
+  errorApiRef,
+  new ErrorAlerter(alertApi, new ErrorApiForwarder()),
+);
 
-builder.add(errorApiRef, new ErrorAlerter(alertApi, new ErrorApiForwarder()));
+builder.add(storageApiRef, WebStorage.create({ errorApi }));
 builder.add(circleCIApiRef, new CircleCIApi());
 builder.add(featureFlagsApiRef, new FeatureFlags());
 
@@ -66,6 +74,15 @@ builder.add(
   }),
 );
 
+builder.add(
+  githubAuthApiRef,
+  GithubAuth.create({
+    apiOrigin: 'http://localhost:7000',
+    basePath: '/auth/',
+    oauthRequestApi,
+  }),
+);
+
 builder.add(
   techRadarApiRef,
   new TechRadar({

packages/app/src/components/Root/Root.tsx

@@ -34,6 +34,7 @@ import {
   SidebarUserBadge,
   SidebarThemeToggle,
 } from '@backstage/core';
+import { NavLink } from 'react-router-dom';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -56,7 +57,12 @@ const SidebarLogo: FC<{}> = () => {
 
   return (
     <div className={classes.root}>
-      <Link href="/" underline="none" className={classes.link}>
+      <Link
+        component={NavLink}
+        to="/"
+        underline="none"
+        className={classes.link}
+      >
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
     </div>