Merge branch 'master' into feature/312-plugin-test-and-list

packages/app/package.json

@@ -20,15 +20,14 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.0",
     "react-use": "^13.24.0",
     "zen-observable": "^0.8.15"
   },
   "scripts": {
-    "start": "cross-env EXTEND_ESLINT=true SKIP_PREFLIGHT_CHECK=true backstage-cli watch-deps -- react-scripts start",
-    "build": "cross-env EXTEND_ESLINT=true SKIP_PREFLIGHT_CHECK=true react-scripts build",
-    "test": "cross-env EXTEND_ESLINT=true SKIP_PREFLIGHT_CHECK=true react-scripts test",
-    "lint": "backstage-cli app:lint"
+    "start": "backstage-cli app:serve",
+    "build": "backstage-cli app:build",
+    "test": "backstage-cli test",
+    "lint": "backstage-cli lint"
   },
   "browserslist": {
     "production": [

packages/cli/config/jest.js

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// If the package has it's own jest config, we use that instead. It will have to
+// manually extend @spotify/web-scripts/config/jest.config.js that is desired
+if (fs.existsSync('jest.config.js')) {
+  module.exports = require(path.resolve('jest.config.js'));
+} else if (fs.existsSync('jest.config.ts')) {
+  module.exports = require(path.resolve('jest.config.ts'));
+} else {
+  const extraOptions = {};
+
+  // Use src/setupTests.ts as the default location for configuring test env
+  if (fs.existsSync('src/setupTests.ts')) {
+    extraOptions.setupFilesAfterEnv = ['<rootDir>/setupTests.ts'];
+  }
+
+  module.exports = {
+    // We base the jest config on web-scripts, it's pretty flat so we skip any complex merging of config objects
+    // Config can be found here: https://github.com/spotify/web-scripts/blob/master/packages/web-scripts/config/jest.config.js
+    ...require('@spotify/web-scripts/config/jest.config.js'),
+
+    ...extraOptions,
+
+    // If the package has a jest object in package.json we merge that config in. This is the recommended
+    // location for configuring tests.
+    ...require(path.resolve('package.json')).jest,
+  };
+}

packages/cli/package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "exec": "npx ts-node ./src",
     "build": "tsc --outDir dist --noEmit false --module CommonJS",
-    "lint": "web-scripts lint",
-    "test": "web-scripts test",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
     "start": "nodemon ."
   },
   "devDependencies": {
@@ -42,6 +42,7 @@
     "inquirer": "^7.0.4",
     "ora": "^4.0.3",
     "react-dev-utils": "^10.2.0",
+    "react-scripts": "^3.4.0",
     "recursive-readdir": "^2.2.2",
     "replace-in-file": "^5.0.2",
     "ts-loader": "^6.2.1",

packages/cli/src/commands/app/build.ts

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { Command } from 'commander';
 import { run } from '../../helpers/run';
 
-export default async (cmd: Command) => {
-  const args = ['lint', '--max-warnings=0', '--format=codeframe'];
-  if (cmd.fix) {
-    args.push('--fix');
-  }
+export default async () => {
+  const args = ['build'];
 
-  await run('web-scripts', args);
+  await run('react-scripts', args, {
+    env: {
+      EXTEND_ESLINT: 'true',
+      SKIP_PREFLIGHT_CHECK: 'true',
+    },
+  });
 };

packages/cli/src/commands/app/serve.ts

@@ -14,7 +14,18 @@
  * limitations under the License.
  */
 
-module.exports = {
-  ...require('@spotify/web-scripts/config/jest.config.js'),
-  setupFilesAfterEnv: ['../jest.setup.ts'],
+import { run } from '../../helpers/run';
+import { watchDeps } from '../watch-deps';
+
+export default async () => {
+  const args = ['start'];
+
+  // Start dynamic watch and build of dependencies, then serve the app
+  await watchDeps();
+  await run('react-scripts', args, {
+    env: {
+      EXTEND_ESLINT: 'true',
+      SKIP_PREFLIGHT_CHECK: 'true',
+    },
+  });
 };

packages/cli/src/commands/lint.ts

@@ -15,7 +15,7 @@
  */
 
 import { Command } from 'commander';
-import { run } from '../../helpers/run';
+import { run } from '../helpers/run';
 
 export default async (cmd: Command) => {
   const args = ['lint', '--max-warnings=0', '--format=codeframe'];

packages/cli/src/commands/testCommand.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { Command } from 'commander';
+import { resolve as resolvePath } from 'path';
+import { run } from '../helpers/run';
+
+export default async (cmd: Command) => {
+  const args = [
+    'test',
+    '--config',
+    resolvePath(__dirname, '../../config/jest.js'),
+  ];
+
+  if (cmd.watch) {
+    args.push('--watch');
+  }
+  if (cmd.coverage) {
+    args.push('--coverage');
+  }
+
+  await run('web-scripts', args, { stdio: 'inherit' });
+};

packages/cli/src/commands/watch-deps/index.ts

@@ -31,16 +31,9 @@ const PACKAGE_BLACKLIST = [
 
 const WATCH_LOCATIONS = ['package.json', 'src', 'assets'];
 
-/*
- * The watch-deps command is meant to improve iteration speed while working in a large monorepo
- * with packages that are built independently, meaning packages depends on each other's build output.
- *
- * The command traverses all dependencies of the current package within the monorepo, and starts
- * watching for updates in all those packages. If a change is detected, we stop listening for changes,
- * and instead start up watch mode for that package. Starting watch mode means running the first
- * available yarn script out of "build:watch", "watch", or "build" --watch.
- */
-export default async (_command: any, args: string[]) => {
+// Start watching for dependency changes.
+// The returned promise resolves when watchers have started for all current dependencies.
+export async function watchDeps() {
   const localPackagePath = resolvePath('package.json');
 
   // Rotate through different prefix colors to make it easier to differenciate between different deps
@@ -66,6 +59,19 @@ export default async (_command: any, args: string[]) => {
     const newDeps = await getPackageDeps(localPackagePath, PACKAGE_BLACKLIST);
     await watcher.update(newDeps);
   });
+}
+
+/*
+ * The watch-deps command is meant to improve iteration speed while working in a large monorepo
+ * with packages that are built independently, meaning packages depends on each other's build output.
+ *
+ * The command traverses all dependencies of the current package within the monorepo, and starts
+ * watching for updates in all those packages. If a change is detected, we stop listening for changes,
+ * and instead start up watch mode for that package. Starting watch mode means running the first
+ * available yarn script out of "build:watch", "watch", or "build" --watch.
+ */
+export default async (_command: any, args: string[]) => {
+  await watchDeps();
 
   if (args?.length) {
     await waitForExit(startChild(args));

packages/cli/src/helpers/run.ts

@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 
-import { SpawnSyncOptions, spawn, ChildProcess } from 'child_process';
+import { SpawnOptions, spawn, ChildProcess } from 'child_process';
 import { ExitCodeError } from './errors';
 
+type SpawnOptionsPartialEnv = Omit<SpawnOptions, 'env'> & {
+  env?: Partial<NodeJS.ProcessEnv>;
+};
+
 // Runs a child command, returning a promise that is only resolved if the child exits with code 0.
 export async function run(
   name: string,
   args: string[] = [],
-  options: SpawnSyncOptions = {},
+  options: SpawnOptionsPartialEnv = {},
 ) {
   const env: NodeJS.ProcessEnv = {
     ...process.env,

packages/cli/src/index.ts

@@ -19,11 +19,12 @@ import chalk from 'chalk';
 import fs from 'fs';
 import createPluginCommand from './commands/createPlugin';
 import watch from './commands/watch-deps';
-import appLint from './commands/app/lint';
+import lintCommand from './commands/lint';
+import testCommand from './commands/testCommand';
+import appBuild from './commands/app/build';
+import appServe from './commands/app/serve';
 import pluginBuild from './commands/plugin/build';
-import pluginLint from './commands/plugin/lint';
 import pluginServe from './commands/plugin/serve';
-import pluginTest from './commands/plugin/testCommand';
 import { exitWithError } from './helpers/errors';
 
 const main = (argv: string[]) => {
@@ -32,10 +33,14 @@ const main = (argv: string[]) => {
   program.name('backstage-cli').version(packageJson.version ?? '0.0.0');
 
   program
-    .command('app:lint')
-    .option('--fix', 'Attempt to automatically fix violations')
-    .description('Lint an app')
-    .action(actionHandler(appLint));
+    .command('app:build')
+    .description('Build an app for a production release')
+    .action(actionHandler(appBuild));
+
+  program
+    .command('app:serve')
+    .description('Serve an app for local development')
+    .action(actionHandler(appServe));
 
   program
     .command('create-plugin')
@@ -48,23 +53,23 @@ const main = (argv: string[]) => {
     .description('Build a plugin')
     .action(actionHandler(pluginBuild));
 
-  program
-    .command('plugin:lint')
-    .option('--fix', 'Attempt to automatically fix violations')
-    .description('Lint a plugin')
-    .action(actionHandler(pluginLint));
-
   program
     .command('plugin:serve')
     .description('Serves the dev/ folder of a plugin')
     .action(actionHandler(pluginServe));
 
   program
-    .command('plugin:test')
+    .command('lint')
+    .option('--fix', 'Attempt to automatically fix violations')
+    .description('Lint a package')
+    .action(actionHandler(lintCommand));
+
+  program
+    .command('test')
     .option('--watch', 'Enable watch mode')
     .option('--coverage', 'Report test coverage')
-    .description('Run all tests for a plugin')
-    .action(actionHandler(pluginTest));
+    .description('Run all tests for package')
+    .action(actionHandler(testCommand));
 
   program
     .command('watch-deps')

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

@@ -7,11 +7,12 @@
   "private": false,
   "scripts": {
     "build": "backstage-cli plugin:build",
-    "lint": "backstage-cli plugin:lint",
-    "test": "backstage-cli plugin:test"
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test"
   },
   "devDependencies": {
-    "@spotify-backstage/cli": "^{{version}}"
+    "@spotify-backstage/cli": "^{{version}}",
+    "@types/testing-library__jest-dom": "5.0.2"
   },
   "dependencies": {
     "@material-ui/lab": "4.0.0-alpha.45"

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -25,7 +25,7 @@ describe('ExampleComponent', () => {
     const rendered = render(
       <ThemeProvider theme={BackstageTheme}>
         <ExampleComponent />
-      </ThemeProvider>
+      </ThemeProvider>,
     );
     expect(rendered.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
   });

packages/core/package.json

@@ -7,11 +7,10 @@
   "types": "dist/cjs/index.d.ts",
   "scripts": {
     "build": "tsc --outDir dist/cjs --noEmit false --module CommonJS",
-    "lint": "web-scripts lint",
-    "test": "web-scripts test"
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test"
   },
   "dependencies": {
-    "@spotify-backstage/cli": "^0.1.0",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@types/google-protobuf": "^3.7.2",
@@ -27,7 +26,7 @@
     "recompose": "0.30.0"
   },
   "devDependencies": {
-    "@spotify/web-scripts": "^6.0.0",
+    "@spotify-backstage/cli": "^0.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

packages/core/src/layout/Page/PageThemeProvider.ts

@@ -45,7 +45,7 @@ export const gradients: Record<string, Gradient> = {
     colors: ['#F13DA2', '#FF8A48'],
   },
   purpleBlue: {
-    colors: ['#4100F4', '#AF2996'],
+    colors: ['#2D00AA', '#C769B5'],
   },
   tealGreen: {
     colors: ['#19E68C', '#1D7F6E'],