feat(create-app): requested changes

2020-07-30 01:08:07 +02:00
parent 5eb1f2d69f
commit 489a57b0c7
46 changed files with 59 additions and 44 deletions
@@ -0,0 +1,3 @@
+module.exports = {
+  root: true,
+};
@@ -0,0 +1,3 @@
+# [Backstage](https://backstage.io)
+
+This is your newly scaffolded Backstage App, Good Luck!
@@ -0,0 +1,22 @@
+app:
+  title: Scaffolded Backstage App
+  baseUrl: http://localhost:3000
+
+organization:
+  name: Acme Corporation
+
+backend:
+  baseUrl: http://localhost:7000
+  listen: 0.0.0.0:7000
+  cors:
+    origin: http://localhost:3000
+    methods: [GET, POST, PUT, DELETE]
+    credentials: true
+
+proxy:
+  '/test':
+    target: 'https://example.com'
+    changeOrigin: true
+
+techdocs:
+  storageUrl: https://techdocs-mock-sites.storage.googleapis.com
@@ -0,0 +1,6 @@
+{
+  "packages": ["packages/*", "plugins/*"],
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "0.1.0"
+}
@@ -0,0 +1,46 @@
+{
+  "name": "root",
+  "version": "1.0.0",
+  "private": true,
+  "engines": {
+    "node": "12"
+  },
+  "scripts": {
+    "start": "yarn workspace app start",
+    "build": "lerna run build",
+    "tsc": "tsc",
+    "clean": "backstage-cli clean && lerna run clean",
+    "diff": "lerna run diff --",
+    "test": "lerna run test --since origin/master -- --coverage",
+    "test:all": "lerna run test -- --coverage",
+    "lint": "lerna run lint --since origin/master --",
+    "lint:all": "lerna run lint --",
+    "create-plugin": "backstage-cli create-plugin",
+    "remove-plugin": "backstage-cli remove-plugin"
+  },
+  "workspaces": {
+    "packages": [
+      "packages/*",
+      "plugins/*"
+    ]
+  },
+  "devDependencies": {
+    "@backstage/cli": "^{{version}}",
+    "@spotify/prettier-config": "^7.0.0",
+    "lerna": "^3.20.2",
+    "prettier": "^1.19.1"
+  },
+  "resolutions": {
+    "esbuild": "0.6.3"
+  },
+  "prettier": "@spotify/prettier-config",
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  }
+}
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};
@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3001",
+  "fixturesFolder": false,
+  "pluginsFile": false
+}
@@ -0,0 +1,21 @@
+{
+  "plugins": ["cypress"],
+  "extends": ["plugin:cypress/recommended"],
+  "rules": {
+    "jest/expect-expect": [
+      "error",
+      {
+        "assertFunctionNames": ["expect", "cy.contains"]
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "optionalDependencies": true,
+        "peerDependencies": true,
+        "bundledDependencies": true
+      }
+    ]
+  }
+}
@@ -0,0 +1,8 @@
+describe('App', () => {
+  it('should render the welcome page', () => {
+    cy.visit('/');
+    cy.contains('Welcome to Backstage');
+    cy.contains('Getting Started');
+    cy.contains('Quick Links');
+  });
+});
@@ -0,0 +1,55 @@
+{
+  "name": "app",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "@backstage/cli": "^{{version}}",
+    "@backstage/core": "^{{version}}",
+    "@backstage/test-utils": "^{{version}}",
+    "@backstage/theme": "^{{version}}",
+    "history": "^5.0.0",
+    "plugin-welcome": "0.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router": "6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.0",
+    "react-use": "^14.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^10.4.1",
+    "@testing-library/user-event": "^12.0.7",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^12.0.0",
+    "@types/react-dom": "^16.9.8",
+    "cross-env": "^7.0.0",
+    "cypress": "^4.2.0",
+    "eslint-plugin-cypress": "^2.10.3",
+    "start-server-and-test": "^1.10.11"
+  },
+  "scripts": {
+    "start": "backstage-cli app:serve",
+    "build": "backstage-cli app:build",
+    "test": "backstage-cli test",
+    "lint": "backstage-cli lint",
+    "test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev",
+    "test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run",
+    "cy:dev": "cypress open",
+    "cy:run": "cypress run"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Backstage is an open platform for building developer portals"
+    />
+    <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="<%= publicPath %>/manifest.json"
+      crossorigin="use-credentials"
+    />
+    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="<%= publicPath %>/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="<%= publicPath %>/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="<%= publicPath %>/favicon-16x16.png"
+    />
+    <link
+      rel="mask-icon"
+      href="<%= publicPath %>/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <style>
+      #root {
+        min-height: 100%;
+      }
+    </style>
+    <title><%= app.title %></title>
+  </head>
+  <body style="margin: 0;">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
@@ -0,0 +1,15 @@
+{
+  "short_name": "Backstage",
+  "name": "Backstage",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M492 4610 c-4 -3 -8 -882 -7 -1953 l0 -1948 850 2 c898 1 945 3 1118
+49 505 134 823 531 829 1037 2 136 -9 212 -44 323 -40 125 -89 218 -163 310
+-35 43 -126 128 -169 157 -22 15 -43 30 -46 33 -12 13 -131 70 -188 91 l-64
+22 60 28 c171 77 317 224 403 404 64 136 92 266 91 425 -5 424 -245 770 -642
+923 -79 30 -105 39 -155 50 -11 3 -38 10 -60 15 -22 6 -60 13 -85 17 -25 3
+-58 9 -75 12 -36 8 -1643 11 -1653 3z m1497 -743 c236 -68 352 -254 305 -486
+-26 -124 -110 -224 -232 -277 -92 -40 -151 -46 -439 -49 l-283 -3 -1 27 c-1
+36 -1 760 0 790 l1 23 298 -5 c226 -4 310 -9 351 -20z m-82 -1538 c98 -3 174
+-19 247 -52 169 -78 257 -212 258 -395 0 -116 -36 -221 -100 -293 -64 -72
+-192 -135 -314 -155 -23 -3 -181 -7 -350 -8 l-308 -2 -1 26 c-6 210 1 874 9
+879 9 5 366 6 559 0z"/>
+<path d="M4160 1789 c-275 -24 -499 -263 -503 -536 -1 -115 21 -212 66 -292
+210 -369 697 -402 950 -65 77 103 110 199 111 329 0 50 -6 113 -13 140 -16 58
+-62 155 -91 193 -33 43 -122 132 -132 132 -5 0 -26 11 -46 25 -85 56 -219 85
+-342 74z"/>
+</g>
+</svg>
@@ -0,0 +1,22 @@
+import React from 'react';
+import { renderWithEffects } from '@backstage/test-utils';
+import App from './App';
+
+describe('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();
+  });
+});
@@ -0,0 +1,21 @@
+import { createApp } from '@backstage/core';
+import React, { FC } from 'react';
+import * as plugins from './plugins';
+
+const app = createApp({
+  plugins: Object.values(plugins),
+});
+
+const AppProvider = app.getProvider();
+const AppRouter = app.getRouter();
+const AppRoutes = app.getRoutes();
+
+const App: FC<{}> = () => (
+  <AppProvider>
+    <AppRouter>
+      <AppRoutes />
+    </AppRouter>
+  </AppProvider>
+);
+
+export default App;
@@ -0,0 +1,6 @@
+import '@backstage/cli/asset-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
@@ -0,0 +1 @@
+export { plugin as WelcomePlugin } from 'plugin-welcome';
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};
@@ -0,0 +1,3 @@
+# Title
+
+Welcome to the welcome plugin!
@@ -0,0 +1,4 @@
+import { createDevApp } from '@backstage/dev-utils';
+import { plugin } from '../src/plugin';
+
+createDevApp().registerPlugin(plugin).render();
@@ -0,0 +1,41 @@
+{
+  "name": "plugin-welcome",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "private": true,
+  "publishConfig": {
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "start": "backstage-cli plugin:serve",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "diff": "backstage-cli plugin:diff",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/core": "^{{version}}",
+    "@backstage/theme": "^{{version}}",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-use": "^14.2.0",
+    "react-router-dom": "6.0.0-beta.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^{{version}}",
+    "@backstage/dev-utils": "^{{version}}",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^10.4.1",
+    "jest-fetch-mock": "^3.0.3"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,58 @@
+import React, { FC } from 'react';
+import { HeaderLabel } from '@backstage/core';
+
+const timeFormat = { hour: '2-digit', minute: '2-digit' };
+const utcOptions = { timeZone: 'UTC', ...timeFormat };
+const nycOptions = { timeZone: 'America/New_York', ...timeFormat };
+const tyoOptions = { timeZone: 'Asia/Tokyo', ...timeFormat };
+const stoOptions = { timeZone: 'Europe/Stockholm', ...timeFormat };
+
+const defaultTimes = {
+  timeNY: '',
+  timeUTC: '',
+  timeTYO: '',
+  timeSTO: '',
+};
+
+function getTimes() {
+  const d = new Date();
+  const lang = window.navigator.language;
+
+  // Using the browser native toLocaleTimeString instead of huge moment-tz
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+  const timeNY = d.toLocaleTimeString(lang, nycOptions);
+  const timeUTC = d.toLocaleTimeString(lang, utcOptions);
+  const timeTYO = d.toLocaleTimeString(lang, tyoOptions);
+  const timeSTO = d.toLocaleTimeString(lang, stoOptions);
+
+  return { timeNY, timeUTC, timeTYO, timeSTO };
+}
+
+const HomePageTimer: FC<{}> = () => {
+  const [{ timeNY, timeUTC, timeTYO, timeSTO }, setTimes] = React.useState(
+    defaultTimes,
+  );
+
+  React.useEffect(() => {
+    setTimes(getTimes());
+
+    const intervalId = setInterval(() => {
+      setTimes(getTimes());
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <>
+      <HeaderLabel label="NYC" value={timeNY} />
+      <HeaderLabel label="UTC" value={timeUTC} />
+      <HeaderLabel label="STO" value={timeSTO} />
+      <HeaderLabel label="TYO" value={timeTYO} />
+    </>
+  );
+};
+
+export default HomePageTimer;
@@ -0,0 +1 @@
+export { default } from './Timer';
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import WelcomePage from './WelcomePage';
+import { ThemeProvider } from '@material-ui/core';
+import { lightTheme } from '@backstage/theme';
+
+describe('WelcomePage', () => {
+  it('should render', () => {
+    const rendered = render(
+      <ThemeProvider theme={lightTheme}>
+        <WelcomePage />
+      </ThemeProvider>,
+    );
+    expect(rendered.baseElement).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,106 @@
+import React, { FC } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import {
+  Typography,
+  Grid,
+  List,
+  ListItem,
+  ListItemText,
+  Link,
+} from '@material-ui/core';
+import Timer from '../Timer';
+import {
+  Content,
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+  ContentHeader,
+  SupportButton,
+} from '@backstage/core';
+
+const WelcomePage: FC<{}> = () => {
+  const profile = { givenName: '' };
+
+  return (
+    <Page theme={pageTheme.home}>
+      <Header
+        title={`Welcome ${profile.givenName || 'to Backstage'}`}
+        subtitle="Some quick intro and links."
+      >
+        <Timer />
+      </Header>
+      <Content>
+        <ContentHeader title="Getting Started">
+          <SupportButton />
+        </ContentHeader>
+        <Grid container>
+          <Grid item xs={12} md={6}>
+            <InfoCard>
+              <Typography variant="body1" gutterBottom>
+                You now have a running instance of Backstage!
+                <span role="img" aria-label="confetti">
+                  🎉
+                </span>
+                Let's make sure you get the most out of this platform by walking
+                you through the basics.
+              </Typography>
+              <Typography variant="h6" gutterBottom>
+                The Setup
+              </Typography>
+              <Typography variant="body1" paragraph>
+                Backstage is put together from three base concepts: the core,
+                the app and the plugins.
+              </Typography>
+              <List>
+                <ListItem>
+                  <ListItemText primary="The core is responsible for base functionality." />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="The app provides the base UI and connects the plugins." />
+                </ListItem>
+                <ListItem>
+                  <ListItemText
+                    primary="The plugins make Backstage useful for the end users with
+                  specific views and functionality."
+                  />
+                </ListItem>
+              </List>
+              <Typography variant="h6" gutterBottom>
+                Try It Out
+              </Typography>
+              <Typography variant="body1" paragraph>
+                We suggest you either check out the documentation for{' '}
+                <Link href="https://github.com/spotify/backstage/blob/master/docs/getting-started/create-a-plugin.md">
+                  creating a plugin
+                </Link>{' '}
+                or have a look in the code for the{' '}
+                <Link component={RouterLink} to="/home">
+                  Home Page
+                </Link>{' '}
+                in the directory "plugins/home-page/src".
+              </Typography>
+            </InfoCard>
+          </Grid>
+          <Grid item>
+            <InfoCard>
+              <Typography variant="h5">Quick Links</Typography>
+              <List>
+                <ListItem>
+                  <Link href="https://backstage.io">backstage.io</Link>
+                </ListItem>
+                <ListItem>
+                  <Link href="https://github.com/spotify/backstage/blob/master/docs/getting-started/create-a-plugin.md">
+                    Create a plugin
+                  </Link>
+                </ListItem>
+              </List>
+            </InfoCard>
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
+  );
+};
+
+export default WelcomePage;
@@ -0,0 +1 @@
+export { default } from './WelcomePage';
@@ -0,0 +1 @@
+export { plugin } from './plugin';
@@ -0,0 +1,7 @@
+import { plugin } from './plugin';
+
+describe('welcome', () => {
+  it('should export plugin', () => {
+    expect(plugin).toBeDefined();
+  });
+});
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createPlugin } from '@backstage/core';
+import WelcomePage from './components/WelcomePage';
+
+export const plugin = createPlugin({
+  id: 'welcome',
+  register({ router }) {
+    router.registerRoute('/', WelcomePage);
+  },
+});
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
@@ -0,0 +1,14 @@
+{
+  "extends": "@backstage/cli/config/tsconfig.json",
+  "include": [
+    "packages/*/src",
+    "plugins/*/src",
+    "plugins/*/dev",
+    "plugins/*/migrations"
+  ],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "skipLibCheck": true
+  }
+}
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Backstage is an open platform for building developer portals"
+    />
+    <title>Backstage</title>
+  </head>
+  <body style="margin: 0">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
				`@@ -0,0 +1 @@`
				`export { plugin as WelcomePlugin } from 'plugin-welcome';`