Merge pull request #1382 from spotify/rugvip/espin

cli: cleanup and fixes for app template

packages/app/package.json

@@ -15,6 +15,7 @@
     "@backstage/plugin-sentry": "^0.1.1-alpha.9",
     "@backstage/plugin-tech-radar": "^0.1.1-alpha.9",
     "@backstage/plugin-welcome": "^0.1.1-alpha.9",
+    "@backstage/test-utils": "^0.1.1-alpha.9",
     "@backstage/theme": "^0.1.1-alpha.9",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
@@ -22,6 +23,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-hot-loader": "^4.12.21",
+    "react-router": "6.0.0-alpha.5",
     "react-router-dom": "6.0.0-alpha.5",
     "react-use": "^14.2.0",
     "zen-observable": "^0.8.15"

packages/app/src/App.test.tsx

@@ -15,23 +15,24 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
 import App from './App';
 
 describe('App', () => {
-  beforeAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      value: jest.fn(() => {
-        return {
-          matches: true,
-          addListener: jest.fn(),
-          removeListener: jest.fn(),
-        };
-      }),
+  it('should render', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [
+        {
+          data: {
+            app: { title: 'Test' },
+          },
+          context: 'test',
+        },
+      ],
     });
-  });
-  it('should render', () => {
-    const rendered = render(<App />);
+
+    const rendered = await renderWithEffects(<App />);
     expect(rendered.baseElement).toBeInTheDocument();
   });
 });

packages/cli/templates/default-app/package.json.hbs

@@ -31,6 +31,9 @@
     "lerna": "^3.20.2",
     "prettier": "^1.19.1"
   },
+  "resolutions": {
+    "**/esbuild": "0.5.3"
+  },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

packages/cli/templates/default-app/packages/app/package.json.hbs

@@ -8,10 +8,12 @@
     "@material-ui/lab": "4.0.0-alpha.45",
     "@backstage/cli": "^{{version}}",
     "@backstage/core": "^{{version}}",
+    "@backstage/test-utils": "^{{version}}",
     "@backstage/theme": "^{{version}}",
     "plugin-welcome": "0.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router": "6.0.0-alpha.5",
     "react-router-dom": "6.0.0-alpha.5",
     "react-use": "^14.2.0"
   },

packages/cli/templates/default-app/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/cli/templates/default-app/packages/app/src/App.test.tsx

@@ -1,10 +1,22 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
 import App from './App';
 
 describe('App', () => {
-  it('should render', () => {
-    const rendered = render(<App />);
+  it('should render', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [
+        {
+          data: {
+            app: { title: 'Test' },
+          },
+          context: 'test',
+        },
+      ],
+    });
+
+    const rendered = await renderWithEffects(<App />);
     expect(rendered.baseElement).toBeInTheDocument();
   });
 });

packages/cli/templates/default-app/packages/app/src/App.tsx

@@ -1,26 +1,7 @@
-import { makeStyles } from '@material-ui/core';
 import { createApp } from '@backstage/core';
 import React, { FC } from 'react';
 import * as plugins from './plugins';
 
-const useStyles = makeStyles(theme => ({
-  '@global': {
-    html: {
-      height: '100%',
-      fontFamily: theme.typography.fontFamily,
-    },
-    body: {
-      height: '100%',
-      fontFamily: theme.typography.fontFamily,
-      'overscroll-behavior-y': 'none',
-    },
-    a: {
-      color: 'inherit',
-      textDecoration: 'none',
-    },
-  },
-}));
-
 const app = createApp({
   plugins: Object.values(plugins),
 });
@@ -29,15 +10,12 @@ const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
 const AppRoutes = app.getRoutes();
 
-const App: FC<{}> = () => {
-  useStyles();
-  return (
-    <AppProvider>
-      <AppRouter>
-        <AppRoutes />
-      </AppRouter>
-    </AppProvider>
-  );
-};
+const App: FC<{}> = () => (
+  <AppProvider>
+    <AppRouter>
+      <AppRoutes />
+    </AppRouter>
+  </AppProvider>
+);
 
 export default App;