diff --git a/packages/cli/e2e-test/cli-e2e-test.js b/packages/cli/e2e-test/cli-e2e-test.js index 8f518762cd..8a3285c544 100644 --- a/packages/cli/e2e-test/cli-e2e-test.js +++ b/packages/cli/e2e-test/cli-e2e-test.js @@ -246,7 +246,7 @@ async function testAppServe(pluginName, appDir) { try { const browser = new Browser(); - await waitForPageWithText(browser, '/', 'Welcome to Backstage'); + await waitForPageWithText(browser, '/', 'Backstage Service Catalog'); await waitForPageWithText( browser, `/${pluginName}`, diff --git a/packages/create-app/templates/default-app/.gitignore b/packages/create-app/templates/default-app/.gitignore new file mode 100644 index 0000000000..3e786d566e --- /dev/null +++ b/packages/create-app/templates/default-app/.gitignore @@ -0,0 +1,33 @@ + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Coverage directory generated when running tests with coverage +coverage + +# Dependencies +node_modules/ + +# Node version directives +.nvmrc + +# dotenv environment variables file +.env +.env.test + +# Build output +dist + +# Temporary change files created by Vim +*.swp + +# MkDocs build output +site + +# Local configuration files +*.local.yaml diff --git a/packages/create-app/templates/default-app/app-config.yaml b/packages/create-app/templates/default-app/app-config.yaml index 9fafbf4d76..49c3dc3691 100644 --- a/packages/create-app/templates/default-app/app-config.yaml +++ b/packages/create-app/templates/default-app/app-config.yaml @@ -24,3 +24,33 @@ techdocs: auth: providers: {} + +catalog: + locations: + # Backstage Example Component + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/artist-lookup-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/playback-order-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/podcast-api-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/queue-proxy-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/searcher-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/playback-lib-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/www-artist-component.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/shuffle-api-component.yaml + + # Backstage Example Templates + - type: github + target: https://github.com/spotify/backstage/blob/master/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/plugins/scaffolder-backend/sample-templates/springboot-grpc-template/template.yaml + - type: github + target: https://github.com/spotify/backstage/blob/master/plugins/scaffolder-backend/sample-templates/create-react-app/template.yaml + - type: github + target: https://github.com/spotify/cookiecutter-golang/blob/master/template.yaml diff --git a/packages/create-app/templates/default-app/packages/app/cypress/integration/app.js b/packages/create-app/templates/default-app/packages/app/cypress/integration/app.js index 6c561a734c..dde26b7b39 100644 --- a/packages/create-app/templates/default-app/packages/app/cypress/integration/app.js +++ b/packages/create-app/templates/default-app/packages/app/cypress/integration/app.js @@ -1,8 +1,6 @@ describe('App', () => { - it('should render the welcome page', () => { + it('should render the catalog', () => { cy.visit('/'); - cy.contains('Welcome to Backstage'); - cy.contains('Getting Started'); - cy.contains('Quick Links'); + cy.contains('Backstage Service Catalog'); }); }); diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs index c3de7ada80..57e705d4fc 100644 --- a/packages/create-app/templates/default-app/packages/app/package.json.hbs +++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs @@ -5,13 +5,14 @@ "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/plugin-catalog": "^{{version}}", + "@backstage/plugin-register-component": "^{{version}}", + "@backstage/plugin-scaffolder": "^{{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", diff --git a/packages/create-app/templates/default-app/packages/app/src/App.test.tsx b/packages/create-app/templates/default-app/packages/app/src/App.test.tsx index b94eab587f..a05924ee00 100644 --- a/packages/create-app/templates/default-app/packages/app/src/App.test.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/App.test.tsx @@ -10,6 +10,7 @@ describe('App', () => { { data: { app: { title: 'Test' }, + backend: { baseUrl: 'http://localhost:7000' }, }, context: 'test', }, diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx index 8a0aedca2e..c96bd9d05e 100644 --- a/packages/create-app/templates/default-app/packages/app/src/App.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx @@ -1,8 +1,16 @@ -import { createApp } from '@backstage/core'; import React, { FC } from 'react'; +import { + createApp, + AlertDisplay, + OAuthRequestDialog, + SidebarPage, +} from '@backstage/core'; +import { apis } from './apis'; import * as plugins from './plugins'; +import { AppSidebar } from './sidebar'; const app = createApp({ + apis, plugins: Object.values(plugins), }); @@ -12,8 +20,13 @@ const AppRoutes = app.getRoutes(); const App: FC<{}> = () => ( + + - + + + + ); diff --git a/packages/create-app/templates/default-app/packages/app/src/apis.ts b/packages/create-app/templates/default-app/packages/app/src/apis.ts new file mode 100644 index 0000000000..35f3e076d6 --- /dev/null +++ b/packages/create-app/templates/default-app/packages/app/src/apis.ts @@ -0,0 +1,53 @@ +import { + ApiRegistry, + alertApiRef, + errorApiRef, + AlertApiForwarder, + ConfigApi, + ErrorApiForwarder, + ErrorAlerter, + oauthRequestApiRef, + OAuthRequestManager, + storageApiRef, + WebStorage, +} from '@backstage/core'; + +import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog'; + +import { scaffolderApiRef, ScaffolderApi } from '@backstage/plugin-scaffolder'; + +export const apis = (config: ConfigApi) => { + // eslint-disable-next-line no-console + console.log(`Creating APIs for ${config.getString('app.title')}`); + + const backendUrl = config.getString('backend.baseUrl'); + + const builder = ApiRegistry.builder(); + + const alertApi = builder.add(alertApiRef, new AlertApiForwarder()); + const errorApi = builder.add( + errorApiRef, + new ErrorAlerter(alertApi, new ErrorApiForwarder()), + ); + + builder.add(storageApiRef, WebStorage.create({ errorApi })); + builder.add(oauthRequestApiRef, new OAuthRequestManager()); + + builder.add( + catalogApiRef, + new CatalogClient({ + apiOrigin: backendUrl, + basePath: '/catalog', + }), + ); + + builder.add( + scaffolderApiRef, + new ScaffolderApi({ + apiOrigin: backendUrl, + basePath: '/scaffolder/v1', + }), + ); + + return builder.build(); +}; diff --git a/packages/create-app/templates/default-app/packages/app/src/plugins.ts b/packages/create-app/templates/default-app/packages/app/src/plugins.ts index 000bd79f3e..4063fb509b 100644 --- a/packages/create-app/templates/default-app/packages/app/src/plugins.ts +++ b/packages/create-app/templates/default-app/packages/app/src/plugins.ts @@ -1 +1,3 @@ -export { plugin as WelcomePlugin } from 'plugin-welcome'; +export { plugin as CatalogPlugin } from '@backstage/plugin-catalog'; +export { plugin as RegisterComponent } from '@backstage/plugin-register-component'; +export { plugin as ScaffolderPlugin } from '@backstage/plugin-scaffolder'; diff --git a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx new file mode 100644 index 0000000000..1ced85cff2 --- /dev/null +++ b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import HomeIcon from '@material-ui/icons/Home'; +import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; +import { + Sidebar, + SidebarItem, + SidebarDivider, + SidebarSpace, + SidebarUserSettings, + SidebarThemeToggle, + SidebarPinButton, +} from '@backstage/core'; + +export const AppSidebar = () => ( + + + {/* Global nav, not org-specific */} + + + {/* End global nav */} + + + + + + + +); diff --git a/packages/create-app/templates/default-app/plugins/welcome/.eslintrc.js b/packages/create-app/templates/default-app/plugins/welcome/.eslintrc.js deleted file mode 100644 index 13573efa9c..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: [require.resolve('@backstage/cli/config/eslint')], -}; diff --git a/packages/create-app/templates/default-app/plugins/welcome/README.md b/packages/create-app/templates/default-app/plugins/welcome/README.md deleted file mode 100644 index e9b9dd0edf..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Title - -Welcome to the welcome plugin! diff --git a/packages/create-app/templates/default-app/plugins/welcome/dev/index.tsx b/packages/create-app/templates/default-app/plugins/welcome/dev/index.tsx deleted file mode 100644 index 6fce113093..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/dev/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { createDevApp } from '@backstage/dev-utils'; -import { plugin } from '../src/plugin'; - -createDevApp().registerPlugin(plugin).render(); diff --git a/packages/create-app/templates/default-app/plugins/welcome/package.json.hbs b/packages/create-app/templates/default-app/plugins/welcome/package.json.hbs deleted file mode 100644 index 77e57c1a7c..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/package.json.hbs +++ /dev/null @@ -1,41 +0,0 @@ -{ - "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": "^15.3.3", - "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" - ] -} diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/components/Timer/Timer.tsx b/packages/create-app/templates/default-app/plugins/welcome/src/components/Timer/Timer.tsx deleted file mode 100644 index 24c79f91ee..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/components/Timer/Timer.tsx +++ /dev/null @@ -1,58 +0,0 @@ -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 ( - <> - - - - - - ); -}; - -export default HomePageTimer; diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/components/Timer/index.ts b/packages/create-app/templates/default-app/plugins/welcome/src/components/Timer/index.ts deleted file mode 100644 index f1fc55bfe9..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/components/Timer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Timer'; diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx b/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx deleted file mode 100644 index 27e44a3f75..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -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( - - - , - ); - expect(rendered.baseElement).toBeInTheDocument(); - }); -}); diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx deleted file mode 100644 index 31c1c0f3e2..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx +++ /dev/null @@ -1,106 +0,0 @@ -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 ( - -
- -
- - - - - - - - - You now have a running instance of Backstage! - - 🎉 - - Let's make sure you get the most out of this platform by walking - you through the basics. - - - The Setup - - - Backstage is put together from three base concepts: the core, - the app and the plugins. - - - - - - - - - - - - - - Try It Out - - - We suggest you either check out the documentation for{' '} - - creating a plugin - {' '} - or have a look in the code for the{' '} - - Home Page - {' '} - in the directory "plugins/home-page/src". - - - - - - Quick Links - - - backstage.io - - - - Create a plugin - - - - - - - - - ); -}; - -export default WelcomePage; diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/index.ts b/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/index.ts deleted file mode 100644 index b031301e7e..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/components/WelcomePage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './WelcomePage'; diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/index.ts b/packages/create-app/templates/default-app/plugins/welcome/src/index.ts deleted file mode 100644 index 99edba26c3..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { plugin } from './plugin'; diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/plugin.test.ts b/packages/create-app/templates/default-app/plugins/welcome/src/plugin.test.ts deleted file mode 100644 index f5bf8e68c3..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/plugin.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { plugin } from './plugin'; - -describe('welcome', () => { - it('should export plugin', () => { - expect(plugin).toBeDefined(); - }); -}); diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/plugin.ts b/packages/create-app/templates/default-app/plugins/welcome/src/plugin.ts deleted file mode 100644 index a65fad5348..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/plugin.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createPlugin } from '@backstage/core'; -import WelcomePage from './components/WelcomePage'; - -export const plugin = createPlugin({ - id: 'welcome', - register({ router }) { - router.registerRoute('/', WelcomePage); - }, -}); diff --git a/packages/create-app/templates/default-app/plugins/welcome/src/setupTests.ts b/packages/create-app/templates/default-app/plugins/welcome/src/setupTests.ts deleted file mode 100644 index 7b0828bfa8..0000000000 --- a/packages/create-app/templates/default-app/plugins/welcome/src/setupTests.ts +++ /dev/null @@ -1 +0,0 @@ -import '@testing-library/jest-dom'; diff --git a/packages/create-app/templates/default-app/tsconfig.json b/packages/create-app/templates/default-app/tsconfig.json index 9dbc3bbe27..cccc375f63 100644 --- a/packages/create-app/templates/default-app/tsconfig.json +++ b/packages/create-app/templates/default-app/tsconfig.json @@ -9,6 +9,7 @@ "exclude": ["node_modules"], "compilerOptions": { "outDir": "dist", + "rootDir": ".", "skipLibCheck": true } } diff --git a/tsconfig.json b/tsconfig.json index 1a6128b5c9..7ea674798c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,6 +7,7 @@ "plugins/*/migrations" ], "compilerOptions": { - "outDir": "dist" + "outDir": "dist", + "rootDir": "." } }