Merge branch 'master' of github.com:spotify/backstage into blam/react-router

* 'master' of github.com:spotify/backstage: (89 commits)
  Use URLSearchParams
  Use location?.type once more
  chore(catalog): clean up CatalogTable, use only Entity
  chore(catalog): clean up ComponentPage, use only Entity
  chore(catalog): tweak getEntityByName a bit, handle 404s properly
  chore(catalog/star): only set the cache if there are entries from the response
  chore(catalog/star): added a comment about why we are using a simple cache here
  chore(catalog/star): removing msw dependency, wrong branch
  chore(catalog): consistent use of named exports
  chore(msw): Added msw dependency
  chore(catalog/star): fixing issues with unmocked deps
  chore(catalog/star): adding a simple cache to stop flicker as a stopgap
  chore(catalog/star): reworking how the starring works, it now stores uri sort of references for entities
  fix(core): Tabs useEffect dependency list
  docs: format with prettier (#1218)
  Optional namespace and name as one part of URL
  docs/auth: added overview, oauth description and glossary
  docs: added plantuml generation script
  docs: added prettier config
  Remove deleted UserBadge component from Sidebar story
  ...

packages/app/package.json

@@ -1,21 +1,21 @@
 {
   "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-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-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",

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,7 +16,6 @@
 
 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';
@@ -34,11 +33,9 @@ const App: FC<{}> = () => (
   <AppProvider>
     <AlertDisplay />
     <OAuthRequestDialog />
-    <Router>
-      <Root>
-        <AppComponent />
-      </Root>
-    </Router>
+    <Root>
+      <AppComponent />
+    </Root>
   </AppProvider>
 );
 

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

@@ -31,9 +31,11 @@ import {
   SidebarDivider,
   SidebarSearchField,
   SidebarSpace,
-  SidebarUserBadge,
+  SidebarUserSettings,
   SidebarThemeToggle,
+  SidebarPinButton,
 } from '@backstage/core';
+import { NavLink } from 'react-router-dom';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -56,7 +58,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>
@@ -84,7 +91,8 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />
-      <SidebarUserBadge />
+      <SidebarUserSettings />
+      <SidebarPinButton />
     </Sidebar>
     {children}
   </SidebarPage>