Merge pull request #110 from spotify/freben/core-package

Progress toward making core a standalone distributable package

frontend/packages/app/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@backstage/plugin-github-actions": "0.0.0",
     "@backstage/plugin-hello-world": "0.0.0",
     "@backstage/plugin-home-page": "0.0.0",

frontend/packages/app/src/App.tsx

@@ -1,4 +1,4 @@
-import { BackstageTheme, createApp, InfoCard } from '@backstage/core';
+import { BackstageTheme, createApp, InfoCard } from '@spotify-backstage/core';
 //import PageHeader from './components/PageHeader';
 import { LoginComponent } from '@backstage/plugin-login';
 import HomePagePlugin from '@backstage/plugin-home-page';

frontend/packages/app/src/entities/MockEntityCard.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { useEntityUri } from '@backstage/core';
+import { useEntityUri } from '@spotify-backstage/core';
 
 const MockEntityPage: FC<{}> = () => {
   const uri = useEntityUri();

frontend/packages/app/src/entities/index.ts

@@ -2,7 +2,7 @@ import {
   createEntityKind,
   createWidgetView,
   createEntityPage,
-} from '@backstage/core';
+} from '@spotify-backstage/core';
 import ComputerIcon from '@material-ui/icons/Computer';
 import WebIcon from '@material-ui/icons/Web';
 import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';

frontend/packages/core/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

frontend/packages/core/package.json

@@ -1,15 +1,19 @@
 {
-  "name": "@backstage/core",
-  "version": "0.0.0",
+  "name": "@spotify-backstage/core",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "private": false,
   "main": "src/index.ts",
   "main:src": "src/index.ts",
-  "devDependencies": {
+  "scripts": {
+    "build": "web-scripts build",
+    "lint": "web-scripts lint",
+    "test": "web-scripts test"
+  },
+  "dependencies": {
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
-    "@spotify/web-scripts": "^6.0.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@types/google-protobuf": "^3.7.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
@@ -18,15 +22,16 @@
     "classnames": "^2.2.6",
     "rc-progress": "^2.5.2",
     "react": "^16.12.0",
+    "react-addons-text-content": "0.0.4",
     "react-dom": "^16.12.0",
     "react-helmet": "5.2.1",
-    "react-addons-text-content": "0.0.4",
     "react-router-dom": "^5.1.2",
     "recompose": "0.30.0"
   },
-  "scripts": {
-    "lint": "web-scripts lint",
-    "test": "web-scripts test"
-  },
-  "license": "Apache-2.0"
+  "devDependencies": {
+    "@spotify/web-scripts": "^6.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2"
+  }
 }

frontend/packages/core/src/api/app/AppBuilder.tsx

@@ -120,6 +120,8 @@ export default class AppBuilder {
             );
             break;
           }
+          default:
+            break;
         }
       }
     }

frontend/packages/core/src/components/CircleProgress.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
 import { Circle } from 'rc-progress';
-import { COLORS } from '@backstage/core';
+import { COLORS } from '@spotify-backstage/core';
 
 const styles = theme => ({
   root: {

frontend/packages/core/src/components/CircleProgress.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInThemedTestApp } from '../testUtils';
 import CircleProgress from './CircleProgress';
-//import { COLORS, V1 } from 'core/app/Themes';
+// import { COLORS, V1 } from 'core/app/Themes';
 
 describe('<CircleProgress />', () => {
   it('renders without exploding', () => {
@@ -34,13 +34,14 @@ describe('<CircleProgress />', () => {
     getByText('10m');
   });
 
-  xit('colors the progress correct', () => {
+  /*
+  it('colors the progress correct', () => {
     expect(CircleProgress.getProgressColor()).toBe(V1.palette.textVerySubtle);
     expect(CircleProgress.getProgressColor(10)).toBe(COLORS.STATUS.ERROR);
     expect(CircleProgress.getProgressColor(50)).toBe(COLORS.STATUS.WARNING);
     expect(CircleProgress.getProgressColor(90)).toBe(COLORS.STATUS.OK);
   });
-  xit('colors the inverse progress correct', () => {
+  it('colors the inverse progress correct', () => {
     expect(CircleProgress.getProgressColor()).toBe(V1.palette.textVerySubtle);
     expect(CircleProgress.getProgressColor(10, true)).toBe(COLORS.STATUS.OK);
     expect(CircleProgress.getProgressColor(50, true)).toBe(
@@ -48,4 +49,5 @@ describe('<CircleProgress />', () => {
     );
     expect(CircleProgress.getProgressColor(90, true)).toBe(COLORS.STATUS.ERROR);
   });
+  */
 });

frontend/packages/core/src/components/ProgressCard.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
 
-import { InfoCard, CircleProgress } from '@backstage/core';
+import { InfoCard, CircleProgress } from '@spotify-backstage/core';
 
 const styles = {
   root: {

frontend/packages/core/src/layout/HeaderLabel/OwnerHeaderLabel.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, prettyDOM } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import OwnerHeaderLabel from './OwnerHeaderLabel';
 import { wrapInThemedTestApp } from '../../testUtils';
 
@@ -8,30 +8,40 @@ const badOwner = { id: 'tools-xxx', name: 'tools-xxx' };
 
 describe('<OwnerHeaderLabel />', () => {
   it('should have a label', () => {
-    const rendered = render(wrapInThemedTestApp(<OwnerHeaderLabel owner={properOwner} />));
+    const rendered = render(
+      wrapInThemedTestApp(<OwnerHeaderLabel owner={properOwner} />),
+    );
     expect(rendered.getByText('Owner')).toBeInTheDocument();
     expect(rendered.getByText('tools')).toBeInTheDocument();
     expect(rendered.queryByText('Squad not verified!')).not.toBeInTheDocument();
   });
 
   it('should have an org link', () => {
-    const rendered = render(wrapInThemedTestApp(<OwnerHeaderLabel owner={properOwner} />));
+    const rendered = render(
+      wrapInThemedTestApp(<OwnerHeaderLabel owner={properOwner} />),
+    );
     const anchor = rendered.container.querySelector('a');
     expect(anchor.href).toBe('http://localhost/org/tools');
   });
 
   it('should have WARNING label', () => {
-    const rendered = render(wrapInThemedTestApp(<OwnerHeaderLabel owner={badOwner} />));
+    const rendered = render(
+      wrapInThemedTestApp(<OwnerHeaderLabel owner={badOwner} />),
+    );
     expect(rendered.getByText('Squad not verified!')).toBeInTheDocument();
   });
 
   it('should have status error label', () => {
-    const rendered = render(wrapInThemedTestApp(<OwnerHeaderLabel owner={badOwner} />));
+    const rendered = render(
+      wrapInThemedTestApp(<OwnerHeaderLabel owner={badOwner} />),
+    );
     expect(rendered.getByLabelText('Status error')).toBeInTheDocument();
   });
 
   it('should handle empty input', () => {
-    const rendered = render(wrapInThemedTestApp(<OwnerHeaderLabel owner={{}} />));
+    const rendered = render(
+      wrapInThemedTestApp(<OwnerHeaderLabel owner={{}} />),
+    );
     expect(rendered.getByLabelText('Status error')).toBeInTheDocument();
   });
 });

frontend/packages/core/src/testUtils/index.js

@@ -2,7 +2,6 @@
  *  Helpers for testing components
  */
 import React from 'react';
-import { MuiThemeProvider } from '@material-ui/core';
 import { ThemeProvider } from '@material-ui/styles';
 
 import { MemoryRouter } from 'react-router';

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "main:src": "src/index.ts",
   "devDependencies": {
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@spotify/web-scripts": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin } from '@backstage/core';
+import { createPlugin } from '@spotify-backstage/core';
 
 export default createPlugin({
   id: '{{ cookiecutter.plugin_name }}',

frontend/packages/plugins/create-entity/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "main:src": "src/index.ts",
   "devDependencies": {
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@backstage/protobuf-definitions": "0.0.0",
     "@spotify/web-scripts": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",

frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, useState } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import { useFormik } from 'formik';
 import { Button, TextField, makeStyles } from '@material-ui/core';
-import { InfoCard, Progress } from '@backstage/core';
+import { InfoCard, Progress } from '@spotify-backstage/core';
 import { scaffolderV1 } from '@backstage/protobuf-definitions';
 const google_protobuf_struct_pb = require('google-protobuf/google/protobuf/struct_pb.js');
 // import * as google_protobuf_struct_pb from 'google-protobuf/google/protobuf/struct_pb.js';
@@ -47,43 +47,51 @@ const CreateEntityFormPage = () => {
     },
   });
 
-  if(submitting) {
-    return <Progress/>;
+  if (submitting) {
+    return <Progress />;
   }
-  
+
   return (
     <Fragment>
       <InfoCard title={`Create New ${templateId}`}>
-        {componentCreated ? <div>{componentCreated} is created! <span role="img" aria-label="tada">🎉</span></div> :
-        <form onSubmit={formik.handleSubmit}>
-          <div className={classes.formGroup}>
-            <TextField
-              label="Entity Id:"
-              name="entityId"
-              id="entityId"
-              onChange={formik.handleChange}
-              variant="outlined"
-            ></TextField>
+        {componentCreated ? (
+          <div>
+            {componentCreated} is created!{' '}
+            <span role="img" aria-label="tada">
+              🎉
+            </span>
           </div>
-          <div className={classes.formGroup}>
-            <TextField
-              label="Description:"
-              name="description"
-              id="description"
-              onChange={formik.handleChange}
-              variant="outlined"
-            ></TextField>
-          </div>
-          <div className={classes.formGroup}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={formik.submitForm}
-            >
-              Submit
-            </Button>
-          </div>
-        </form>}
+        ) : (
+          <form onSubmit={formik.handleSubmit}>
+            <div className={classes.formGroup}>
+              <TextField
+                label="Entity Id:"
+                name="entityId"
+                id="entityId"
+                onChange={formik.handleChange}
+                variant="outlined"
+              ></TextField>
+            </div>
+            <div className={classes.formGroup}>
+              <TextField
+                label="Description:"
+                name="description"
+                id="description"
+                onChange={formik.handleChange}
+                variant="outlined"
+              ></TextField>
+            </div>
+            <div className={classes.formGroup}>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={formik.submitForm}
+              >
+                Submit
+              </Button>
+            </div>
+          </form>
+        )}
       </InfoCard>
     </Fragment>
   );

frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx

@@ -1,5 +1,5 @@
 import React, { FC, Fragment, useEffect, useState } from 'react';
-import { InfoCard, TemplateList } from '@backstage/core';
+import { InfoCard, TemplateList } from '@spotify-backstage/core';
 import { scaffolderV1 } from '@backstage/protobuf-definitions';
 
 const CreateEntityPage: FC<{}> = () => {

frontend/packages/plugins/create-entity/src/plugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin } from '@backstage/core';
+import { createPlugin } from '@spotify-backstage/core';
 import CreateEntityPage from './components/CreateEntityPage';
 import CreateEntityFormPage from './components/CreateEntityFormPage';
 
@@ -8,4 +8,4 @@ export default createPlugin({
     router.registerRoute('/create', CreateEntityPage);
     router.registerRoute('/create/:templateId', CreateEntityFormPage);
   },
-});
+});

frontend/packages/plugins/github-actions/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "main:src": "src/index.ts",
   "devDependencies": {
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@backstage/protobuf-definitions": "0.0.0",
     "@spotify/web-scripts": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",

frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx

@@ -17,7 +17,7 @@ import {
   Button,
   Theme,
 } from '@material-ui/core';
-import { RelativeEntityLink } from '@backstage/core';
+import { RelativeEntityLink } from '@spotify-backstage/core';
 import BuildStatusIndicator from '../BuildStatusIndicator';
 
 const useStyles = makeStyles<Theme>(theme => ({

frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { RelativeEntityLink, useEntity } from '@backstage/core';
+import { RelativeEntityLink, useEntity } from '@spotify-backstage/core';
 import { BuildsClient } from '../../apis/builds';
 import { useAsync } from 'react-use';
 import {

frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx

@@ -13,7 +13,7 @@ import {
   makeStyles,
   Theme,
 } from '@material-ui/core';
-import { RelativeEntityLink, useEntity } from '@backstage/core';
+import { RelativeEntityLink, useEntity } from '@spotify-backstage/core';
 import { BuildsClient } from '../../apis/builds';
 import { useAsync } from 'react-use';
 import BuildStatusIndicator from '../BuildStatusIndicator';

frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx

@@ -5,7 +5,7 @@ import FailureIcon from '@material-ui/icons/Error';
 import SuccessIcon from '@material-ui/icons/CheckCircle';
 import ProgressIcon from '@material-ui/icons/Autorenew';
 import UnknownIcon from '@material-ui/icons/Help';
-import { IconComponent } from '@backstage/core';
+import { IconComponent } from '@spotify-backstage/core';
 
 type Props = {
   status?: BuildStatus;

frontend/packages/plugins/github-actions/src/plugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin } from '@backstage/core';
+import { createPlugin } from '@spotify-backstage/core';
 import BuildDetailsPage from './components/BuildDetailsPage';
 import BuildListPage from './components/BuildListPage';
 import BuildIcon from '@material-ui/icons/Build';

frontend/packages/plugins/hello-world/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "main:src": "src/index.ts",
   "devDependencies": {
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@spotify/web-scripts": "^6.0.0",

frontend/packages/plugins/hello-world/src/plugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin } from '@backstage/core';
+import { createPlugin } from '@spotify-backstage/core';
 
 export default createPlugin({
   id: 'hello-world',

frontend/packages/plugins/home-page/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "main:src": "src/index.ts",
   "devDependencies": {
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@spotify/web-scripts": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

frontend/packages/plugins/home-page/src/components/HomePage/HomePage.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import HomePage from './HomePage';
 import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/core';
+import { BackstageTheme } from '@spotify-backstage/core';
 
 describe('HomePage', () => {
   it('should render', () => {

frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -10,7 +10,7 @@ import {
   theme,
   Progress,
   getTimeBasedGreeting,
-} from '@backstage/core';
+} from '@spotify-backstage/core';
 import SquadTechHealth from './SquadTechHealth';
 import { useAsync } from 'react-use';
 

frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Grid, Typography } from '@material-ui/core';
 
-import { HorizontalScrollGrid, ProgressCard } from '@backstage/core';
+import { HorizontalScrollGrid, ProgressCard } from '@spotify-backstage/core';
 
 const SquadTechHealth: FC<{}> = () => {
   return (

frontend/packages/plugins/home-page/src/components/HomepageTimer/HomepageTimer.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { HeaderLabel } from '@backstage/core';
+import { HeaderLabel } from '@spotify-backstage/core';
 
 const timeFormat = { hour: '2-digit', minute: '2-digit' };
 const nycOptions = { timeZone: 'America/New_York', ...timeFormat };

frontend/packages/plugins/home-page/src/plugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin } from '@backstage/core';
+import { createPlugin } from '@spotify-backstage/core';
 import HomePage from './components/HomePage';
 
 export default createPlugin({

frontend/packages/plugins/login/package.json

@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "main:src": "src/index.ts",
   "devDependencies": {
-    "@backstage/core": "0.0.0",
+    "@spotify-backstage/core": "1.0.0",
     "@spotify/web-scripts": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

frontend/packages/plugins/login/src/plugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin } from '@backstage/core';
+import { createPlugin } from '@spotify-backstage/core';
 
 export default createPlugin({
   id: 'login',

frontend/yarn.lock

@@ -2568,6 +2568,25 @@
     inquirer "^7.0.4"
     recursive-readdir "^2.2.2"
     replace-in-file "^5.0.2"
+"@spotify-backstage/core@file:packages/core":
+  version "1.0.0"
+  dependencies:
+    "@material-ui/core" "^4.9.1"
+    "@material-ui/icons" "^4.9.1"
+    "@types/google-protobuf" "^3.7.2"
+    "@types/jest" "^24.0.0"
+    "@types/node" "^12.0.0"
+    "@types/react" "^16.9.0"
+    "@types/react-dom" "^16.9.0"
+    "@types/react-router-dom" "^5.1.3"
+    classnames "^2.2.6"
+    rc-progress "^2.5.2"
+    react "^16.12.0"
+    react-addons-text-content "0.0.4"
+    react-dom "^16.12.0"
+    react-helmet "5.2.1"
+    react-router-dom "^5.1.2"
+    recompose "0.30.0"
 
 "@spotify/eslint-config-base@^6.0.0":
   version "6.0.0"
@@ -2873,6 +2892,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/google-protobuf@^3.7.2":
+  version "3.7.2"
+  resolved "https://registry.npmjs.org/@types/google-protobuf/-/google-protobuf-3.7.2.tgz#cd8a360c193ce4d672575a20a79f49ba036d38d2"
+  integrity sha512-ifFemzjNchFBCtHS6bZNhSZCBu7tbtOe0e8qY0z2J4HtFXmPJjm6fXSaQsTG7yhShBEZtt2oP/bkwu5k+emlkQ==
+
 "@types/history@*":
   version "4.7.5"
   resolved "https://registry.npmjs.org/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"