From 73ba54fea59af49ac933713609fd05c50284a221 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 11:45:09 +0100 Subject: [PATCH 1/9] add create entity plugin --- frontend/packages/app/package.json | 1 + frontend/packages/app/src/App.tsx | 10 +++++-- .../packages/plugins/create-entity/README.md | 1 + .../plugins/create-entity/jest.config.js | 4 +++ .../plugins/create-entity/jest.setup.ts | 1 + .../plugins/create-entity/package.json | 27 +++++++++++++++++++ .../CreateEntityPage.test.tsx | 10 +++++++ .../CreateEntityPage/CreateEntityPage.tsx | 21 +++++++++++++++ .../src/components/CreateEntityPage/index.ts | 1 + .../plugins/create-entity/src/index.ts | 2 ++ .../plugins/create-entity/src/plugin.test.ts | 7 +++++ .../plugins/create-entity/src/plugin.ts | 9 +++++++ frontend/yarn.lock | 7 +++++ 13 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 frontend/packages/plugins/create-entity/README.md create mode 100644 frontend/packages/plugins/create-entity/jest.config.js create mode 100644 frontend/packages/plugins/create-entity/jest.setup.ts create mode 100644 frontend/packages/plugins/create-entity/package.json create mode 100644 frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx create mode 100644 frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx create mode 100644 frontend/packages/plugins/create-entity/src/components/CreateEntityPage/index.ts create mode 100644 frontend/packages/plugins/create-entity/src/index.ts create mode 100644 frontend/packages/plugins/create-entity/src/plugin.test.ts create mode 100644 frontend/packages/plugins/create-entity/src/plugin.ts diff --git a/frontend/packages/app/package.json b/frontend/packages/app/package.json index 55f747560a..adc216d0b6 100644 --- a/frontend/packages/app/package.json +++ b/frontend/packages/app/package.json @@ -8,6 +8,7 @@ "@backstage/plugin-hello-world": "0.0.0", "@backstage/plugin-home-page": "0.0.0", "@backstage/plugin-login": "0.0.0", + "@backstage/plugin-create-entity": "0.0.0", "@react-workspaces/react-scripts": "^3.3.0-alpha-08", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx index 9fbbf28dca..e3a03db49f 100644 --- a/frontend/packages/app/src/App.tsx +++ b/frontend/packages/app/src/App.tsx @@ -1,7 +1,12 @@ -import { BackstageTheme, createApp, InfoCard } from '@backstage/core'; -import HomePagePlugin from '@backstage/plugin-home-page'; +import { + BackstageTheme, + createApp, + InfoCard, +} from '@backstage/core'; //import PageHeader from './components/PageHeader'; import { LoginComponent } from '@backstage/plugin-login'; +import HomePagePlugin from '@backstage/plugin-home-page'; +import CreateEntityPlugin from '@backstage/plugin-create-entity'; import { CssBaseline, makeStyles, ThemeProvider } from '@material-ui/core'; import React, { FC } from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; @@ -60,6 +65,7 @@ const app = createApp(); app.registerEntityKind(...entities); app.registerPlugin(HomePagePlugin); +app.registerPlugin(CreateEntityPlugin); const AppComponent = app.build(); diff --git a/frontend/packages/plugins/create-entity/README.md b/frontend/packages/plugins/create-entity/README.md new file mode 100644 index 0000000000..e084431c00 --- /dev/null +++ b/frontend/packages/plugins/create-entity/README.md @@ -0,0 +1 @@ +Welcome to your create-entity plugin! diff --git a/frontend/packages/plugins/create-entity/jest.config.js b/frontend/packages/plugins/create-entity/jest.config.js new file mode 100644 index 0000000000..6b28dacb3d --- /dev/null +++ b/frontend/packages/plugins/create-entity/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + ...require('@spotify/web-scripts/config/jest.config.js'), + setupFilesAfterEnv: ['../jest.setup.ts'], +}; diff --git a/frontend/packages/plugins/create-entity/jest.setup.ts b/frontend/packages/plugins/create-entity/jest.setup.ts new file mode 100644 index 0000000000..666127af39 --- /dev/null +++ b/frontend/packages/plugins/create-entity/jest.setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom/extend-expect'; diff --git a/frontend/packages/plugins/create-entity/package.json b/frontend/packages/plugins/create-entity/package.json new file mode 100644 index 0000000000..ae84cd3472 --- /dev/null +++ b/frontend/packages/plugins/create-entity/package.json @@ -0,0 +1,27 @@ +{ + "name": "@backstage/plugin-create-entity", + "version": "0.0.0", + "main": "src/index.ts", + "main:src": "src/index.ts", + "devDependencies": { + "@backstage/core": "0.0.0", + "@backstage/protobuf-definitions": "0.0.0", + "@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/jest": "^24.0.0", + "@types/node": "^12.0.0", + "@types/react": "^16.9.0", + "@types/react-dom": "^16.9.0", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "@material-ui/core": "^4.9.1", + "@material-ui/icons": "^4.9.1" + }, + "scripts": { + "lint": "web-scripts lint", + "test": "web-scripts test" + }, + "license": "Apache-2.0" +} diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx new file mode 100644 index 0000000000..6f45cef9cb --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import CreateEntityPage from './CreateEntityPage'; + +describe('CreateEntityPage', () => { + it('should render', () => { + const rendered = render(); + expect(rendered.getByText('Hello!')).toBeInTheDocument(); + }); +}); diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx new file mode 100644 index 0000000000..b273c0fbfe --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx @@ -0,0 +1,21 @@ +import React, { FC, Fragment } from 'react'; +import { InfoCard } from '@backstage/core'; +import { IdentityClient, GetUserRequest } from "@backstage/protocol-definitions/generated/identity/v1/identity_pb_service"; + +const client = new IdentityClient("http://localhost:8080"); +const req = new GetUserRequest(); +req.setUsername("johndoe"); +client.getUser(req, (err, user) => { + console.log(err); + console.log(user); +}); + +const CreateEntityPage: FC<{}> = () => { + return ( + + + + ); +}; + +export default CreateEntityPage; diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/index.ts b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/index.ts new file mode 100644 index 0000000000..9593a79ece --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/index.ts @@ -0,0 +1 @@ +export { default } from './CreateEntityPage'; diff --git a/frontend/packages/plugins/create-entity/src/index.ts b/frontend/packages/plugins/create-entity/src/index.ts new file mode 100644 index 0000000000..ee7f3893af --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/index.ts @@ -0,0 +1,2 @@ +export { default } from './plugin'; +export { default as CreateEntityPage } from './components/CreateEntityPage'; diff --git a/frontend/packages/plugins/create-entity/src/plugin.test.ts b/frontend/packages/plugins/create-entity/src/plugin.test.ts new file mode 100644 index 0000000000..0f9e9609f4 --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/plugin.test.ts @@ -0,0 +1,7 @@ +import plugin from './plugin'; + +describe('create-entity', () => { + it('should export plugin', () => { + expect(plugin).toBeDefined(); + }); +}); diff --git a/frontend/packages/plugins/create-entity/src/plugin.ts b/frontend/packages/plugins/create-entity/src/plugin.ts new file mode 100644 index 0000000000..5d342bd217 --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/plugin.ts @@ -0,0 +1,9 @@ +import { createPlugin } from '@backstage/core'; +import CreateEntityPage from './components/CreateEntityPage'; + +export default createPlugin({ + id: 'create-entity', + register({ router }) { + router.registerRoute('/create', CreateEntityPage); + }, +}); \ No newline at end of file diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8873cbc461..a702c57590 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15730,6 +15730,13 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== +ts-protoc-gen@^0.12.0: + version "0.12.0" + resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" + integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== + dependencies: + google-protobuf "^3.6.1" + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From 59a37f657c91379f139844fac6ec840d62112194 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Thu, 6 Feb 2020 17:41:38 +0100 Subject: [PATCH 2/9] list templates --- backend/proxy/envoy.yaml | 4 +- docker-compose.yaml | 3 + .../TemplateList/CardLayoutStyles.js | 21 ++++++ .../components/TemplateList/TemplateCard.js | 67 +++++++++++++++++++ .../TemplateList/TemplateCardMedia.js | 41 ++++++++++++ .../components/TemplateList/TemplateList.js | 42 ++++++++++++ frontend/packages/core/src/index.ts | 1 + .../CreateEntityPage/CreateEntityPage.tsx | 31 +++++---- frontend/yarn.lock | 7 -- 9 files changed, 196 insertions(+), 21 deletions(-) create mode 100644 frontend/packages/core/src/components/TemplateList/CardLayoutStyles.js create mode 100644 frontend/packages/core/src/components/TemplateList/TemplateCard.js create mode 100644 frontend/packages/core/src/components/TemplateList/TemplateCardMedia.js create mode 100644 frontend/packages/core/src/components/TemplateList/TemplateList.js diff --git a/backend/proxy/envoy.yaml b/backend/proxy/envoy.yaml index eca02ae0c8..b23d39ccb6 100644 --- a/backend/proxy/envoy.yaml +++ b/backend/proxy/envoy.yaml @@ -36,7 +36,7 @@ static_resources: route: cluster: inventory_service max_grpc_timeout: 0s - - match: { prefix: '/spotify.backstage.scaffolder.v1.Scaffolder' } + - match: { prefix: '/spotify.backstage.scaffolder.v1.Scaffolder/' } route: cluster: scaffolder_service max_grpc_timeout: 0s @@ -87,5 +87,5 @@ static_resources: lb_policy: round_robin hosts: - socket_address: - address: identity + address: scaffolder port_value: 50051 diff --git a/docker-compose.yaml b/docker-compose.yaml index 647fa6a4cf..765c9a32b5 100755 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -48,4 +48,7 @@ services: args: service: scaffolder restart: unless-stopped + volumes: + - ./backend/scaffolder/templates:/app/templates + env_file: secrets.env diff --git a/frontend/packages/core/src/components/TemplateList/CardLayoutStyles.js b/frontend/packages/core/src/components/TemplateList/CardLayoutStyles.js new file mode 100644 index 0000000000..215a904ec3 --- /dev/null +++ b/frontend/packages/core/src/components/TemplateList/CardLayoutStyles.js @@ -0,0 +1,21 @@ +import { makeStyles } from '@material-ui/core/styles'; + +// Shared MUI styles for a grid-based Card layout +export const CardLayoutStyles = theme => ({ + container: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, 296px)', + gridGap: theme.spacing(3), + marginBottom: theme.spacing(6), + }, + card: { + display: 'flex', + flexDirection: 'column', + }, + cardActions: { + flexGrow: '1', + alignItems: 'flex-end', + }, +}); + +export const useCardLayoutStyles = makeStyles(CardLayoutStyles); diff --git a/frontend/packages/core/src/components/TemplateList/TemplateCard.js b/frontend/packages/core/src/components/TemplateList/TemplateCard.js new file mode 100644 index 0000000000..96f3a06198 --- /dev/null +++ b/frontend/packages/core/src/components/TemplateList/TemplateCard.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import TemplateCardMedia from './TemplateCardMedia'; +import { + Button, + Card, + CardActions, + CardContent, + Chip, + Typography, + withStyles, +} from '@material-ui/core'; +import { Link } from '@material-ui/core'; +import { CardLayoutStyles } from './CardLayoutStyles'; + +const styles = theme => ({ + ...CardLayoutStyles(theme), + chip: { + backgroundColor: theme.palette.gold, + marginRight: 6, + }, +}); + +export class TemplateCard extends Component { + static propTypes = { + isGoldenPath: PropTypes.bool, + item: PropTypes.object.isRequired, + }; + + static defaultProps = { + isGoldenPath: false, + }; + + render() { + const { item, isGoldenPath, classes } = this.props; + const isExperimental = item.lifecycle === 'experimental'; + // if (!item.owner) { + // // If an item has no owner, it has most likely been unregistered from sysmodel. Should not crash the whole page. + // return null; + // } + return ( + + + {item.description && ( + + {isGoldenPath && ( + + )} + {isExperimental && } + {item.description} + + )} + + + + + + + ); + } +} + +export default withStyles(styles)(TemplateCard); diff --git a/frontend/packages/core/src/components/TemplateList/TemplateCardMedia.js b/frontend/packages/core/src/components/TemplateList/TemplateCardMedia.js new file mode 100644 index 0000000000..a68212e9e0 --- /dev/null +++ b/frontend/packages/core/src/components/TemplateList/TemplateCardMedia.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react'; +import { Typography, withStyles } from '@material-ui/core'; + +const styles = theme => ({ + media: { + color: theme.palette.bursts.fontColor, + backgroundColor: theme.palette.bursts.backgroundColor.default, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + padding: theme.spacing(2), + minHeight: 120, + position: 'relative', + isolation: 'isolate', + }, + title: { + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(1), + lineHeight: 1, + }, + slackChannel: { + color: theme.palette.bursts.slackChannelText, + }, +}); + +export class TemplateCardMedia extends Component { + render() { + const { classes, name, ownerName } = this.props; + + return ( +
+ {ownerName} + + {name} + +
+ ); + } +} + +export default withStyles(styles)(TemplateCardMedia); diff --git a/frontend/packages/core/src/components/TemplateList/TemplateList.js b/frontend/packages/core/src/components/TemplateList/TemplateList.js new file mode 100644 index 0000000000..707ab62580 --- /dev/null +++ b/frontend/packages/core/src/components/TemplateList/TemplateList.js @@ -0,0 +1,42 @@ +import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core'; +import TemplateCard from './TemplateCard'; +import { CardLayoutStyles } from './CardLayoutStyles'; + +export class TemplateList extends Component { + static GOLDEN_PATH_TEMPLATE_IDS = [ + 'simple-apollo-standalone', + 'scio-cookie', + 'react-skeleton', + 'science-box-cookie', + ]; + + static propTypes = { + items: PropTypes.array.isRequired, + }; + + static isGoldenPathItem(item) { + return TemplateList.GOLDEN_PATH_TEMPLATE_IDS.includes(item.id); + } + + render() { + const { items, classes } = this.props; + + return ( + +
+ {items.map(item => ( + + ))} +
+ + ); + } +} + +export default withStyles(CardLayoutStyles)(TemplateList); diff --git a/frontend/packages/core/src/index.ts b/frontend/packages/core/src/index.ts index be8b1e851e..32467adfc3 100644 --- a/frontend/packages/core/src/index.ts +++ b/frontend/packages/core/src/index.ts @@ -16,3 +16,4 @@ export { default as ProgressCard } from './components/ProgressCard'; export { default as CircleProgress } from './components/CircleProgress'; export { default as Progress } from './components/Progress'; export { default as SortableTable } from './components/SortableTable'; +export { default as TemplateList } from '../src/components/TemplateList/TemplateList'; diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx index b273c0fbfe..697b804431 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx @@ -1,19 +1,26 @@ -import React, { FC, Fragment } from 'react'; -import { InfoCard } from '@backstage/core'; -import { IdentityClient, GetUserRequest } from "@backstage/protocol-definitions/generated/identity/v1/identity_pb_service"; - -const client = new IdentityClient("http://localhost:8080"); -const req = new GetUserRequest(); -req.setUsername("johndoe"); -client.getUser(req, (err, user) => { - console.log(err); - console.log(user); -}); +import React, { FC, Fragment, useEffect, useState } from 'react'; +import { InfoCard, TemplateList } from '@backstage/core'; +import { scaffolderV1 } from '@backstage/protobuf-definitions'; const CreateEntityPage: FC<{}> = () => { + const [templates, setTemplates] = useState< + scaffolderV1.Template.AsObject[] + >(); + + useEffect(() => { + const client = new scaffolderV1.Client('http://localhost:8080'); + const req = new scaffolderV1.Empty(); + client.listTemplates(req).then((res: scaffolderV1.ListTemplatesReply) => { + console.log(res.toObject().templatesList); + setTemplates(res.toObject().templatesList); + }); + }, []); + return ( - + + {templates && } + ); }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a702c57590..8873cbc461 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15730,13 +15730,6 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== -ts-protoc-gen@^0.12.0: - version "0.12.0" - resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" - integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== - dependencies: - google-protobuf "^3.6.1" - tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From 305fb208496fa63b7dcc7c264f5af3878e58e9cf Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Thu, 6 Feb 2020 13:24:52 +0100 Subject: [PATCH 3/9] add create entity plugin --- frontend/yarn.lock | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8873cbc461..a702c57590 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15730,6 +15730,13 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== +ts-protoc-gen@^0.12.0: + version "0.12.0" + resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" + integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== + dependencies: + google-protobuf "^3.6.1" + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From e53ec4fb34d3c657ef522717d5a30388d5c47805 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 11:26:31 +0100 Subject: [PATCH 4/9] Add entity form page --- .../components/TemplateList/TemplateCard.js | 2 +- .../plugins/create-entity/package.json | 3 +- .../CreateEntityFormPage.tsx | 61 +++++++++++++++++++ .../components/CreateEntityFormPage/index.ts | 1 + .../plugins/create-entity/src/plugin.ts | 2 + frontend/yarn.lock | 35 ++++++++--- 6 files changed, 93 insertions(+), 11 deletions(-) create mode 100644 frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx create mode 100644 frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/index.ts diff --git a/frontend/packages/core/src/components/TemplateList/TemplateCard.js b/frontend/packages/core/src/components/TemplateList/TemplateCard.js index 96f3a06198..525ab6ec9e 100644 --- a/frontend/packages/core/src/components/TemplateList/TemplateCard.js +++ b/frontend/packages/core/src/components/TemplateList/TemplateCard.js @@ -55,7 +55,7 @@ export class TemplateCard extends Component { )} - + diff --git a/frontend/packages/plugins/create-entity/package.json b/frontend/packages/plugins/create-entity/package.json index ae84cd3472..4855921c54 100644 --- a/frontend/packages/plugins/create-entity/package.json +++ b/frontend/packages/plugins/create-entity/package.json @@ -17,7 +17,8 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "@material-ui/core": "^4.9.1", - "@material-ui/icons": "^4.9.1" + "@material-ui/icons": "^4.9.1", + "formik": "2.1.4" }, "scripts": { "lint": "web-scripts lint", diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx new file mode 100644 index 0000000000..0720523471 --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -0,0 +1,61 @@ +import React, { Fragment } from 'react'; +import { useRouteMatch } from 'react-router-dom'; +import { useFormik } from 'formik'; +import { Button, TextField, makeStyles } from '@material-ui/core'; +import { InfoCard } from '@backstage/core'; + +const useStyles = makeStyles(theme => ({ + formGroup: { + padding: '10px', + }, +})); + +const CreateEntityFormPage = () => { + const classes = useStyles(); + const match = useRouteMatch<{ templateId: string }>(); + const templateId = decodeURIComponent(match.params.templateId); + + const formik = useFormik({ + initialValues: { + entityId: '', + description: '', + }, + onSubmit: (values: any) => { + alert(JSON.stringify(values, null, 2)); + }, + }); + + return ( + + +
+
+ +
+
+ +
+
+ +
+
+ + + ); +}; + +export default CreateEntityFormPage; diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/index.ts b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/index.ts new file mode 100644 index 0000000000..e5eabfdf87 --- /dev/null +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/index.ts @@ -0,0 +1 @@ +export { default } from './CreateEntityFormPage'; diff --git a/frontend/packages/plugins/create-entity/src/plugin.ts b/frontend/packages/plugins/create-entity/src/plugin.ts index 5d342bd217..627f7da037 100644 --- a/frontend/packages/plugins/create-entity/src/plugin.ts +++ b/frontend/packages/plugins/create-entity/src/plugin.ts @@ -1,9 +1,11 @@ import { createPlugin } from '@backstage/core'; import CreateEntityPage from './components/CreateEntityPage'; +import CreateEntityFormPage from './components/CreateEntityFormPage'; export default createPlugin({ id: 'create-entity', register({ router }) { router.registerRoute('/create', CreateEntityPage); + router.registerRoute('/create/:templateId', CreateEntityFormPage); }, }); \ No newline at end of file diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a702c57590..a4961f9b5c 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -5733,6 +5733,11 @@ deep-is@~0.1.3: resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + default-gateway@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b" @@ -7122,6 +7127,20 @@ form-data@~2.3.2: combined-stream "^1.0.6" mime-types "^2.1.12" +formik@2.1.4: + version "2.1.4" + resolved "https://registry.npmjs.org/formik/-/formik-2.1.4.tgz#8deef07ec845ea98f75e03da4aad7aab4ac46570" + integrity sha512-oKz8S+yQBzuQVSEoxkqqJrKQS5XJASWGVn6mrs+oTWrBoHgByVwwI1qHiVc9GKDpZBU9vAxXYAKz2BvujlwunA== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.14" + lodash-es "^4.17.14" + react-fast-compare "^2.0.1" + scheduler "^0.18.0" + tiny-warning "^1.0.2" + tslib "^1.10.0" + forwarded@~0.1.2: version "0.1.2" resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" @@ -7783,7 +7802,7 @@ hoist-non-react-statics@^2.3.1: resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -10347,6 +10366,11 @@ lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" +lodash-es@^4.17.14: + version "4.17.15" + resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78" + integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ== + lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -13470,7 +13494,7 @@ react-error-overlay@^6.0.5: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.5.tgz#55d59c2a3810e8b41922e0b4e5f85dcf239bd533" integrity sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A== -react-fast-compare@^2.0.2, react-fast-compare@^2.0.4: +react-fast-compare@^2.0.1, react-fast-compare@^2.0.2, react-fast-compare@^2.0.4: version "2.0.4" resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== @@ -15730,13 +15754,6 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== -ts-protoc-gen@^0.12.0: - version "0.12.0" - resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" - integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== - dependencies: - google-protobuf "^3.6.1" - tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From 79c2000a18875d92ad6159872f58fba320f96de2 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Thu, 6 Feb 2020 13:24:52 +0100 Subject: [PATCH 5/9] add create entity plugin --- .../src/components/CreateEntityPage/CreateEntityPage.tsx | 1 - frontend/yarn.lock | 7 +++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx index 697b804431..970267896b 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.tsx @@ -11,7 +11,6 @@ const CreateEntityPage: FC<{}> = () => { const client = new scaffolderV1.Client('http://localhost:8080'); const req = new scaffolderV1.Empty(); client.listTemplates(req).then((res: scaffolderV1.ListTemplatesReply) => { - console.log(res.toObject().templatesList); setTemplates(res.toObject().templatesList); }); }, []); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a4961f9b5c..28aedcada0 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15754,6 +15754,13 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== +ts-protoc-gen@^0.12.0: + version "0.12.0" + resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" + integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== + dependencies: + google-protobuf "^3.6.1" + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From 2721d96e90f45e9a7d95eba5980d350bd298cc09 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Thu, 6 Feb 2020 17:41:38 +0100 Subject: [PATCH 6/9] list templates --- frontend/yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 28aedcada0..a4961f9b5c 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15754,13 +15754,6 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== -ts-protoc-gen@^0.12.0: - version "0.12.0" - resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" - integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== - dependencies: - google-protobuf "^3.6.1" - tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From 049659bba90591a9cb393677e2d1c7064ef3a824 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Thu, 6 Feb 2020 13:24:52 +0100 Subject: [PATCH 7/9] add create entity plugin --- frontend/yarn.lock | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a4961f9b5c..28aedcada0 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15754,6 +15754,13 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== +ts-protoc-gen@^0.12.0: + version "0.12.0" + resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" + integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== + dependencies: + google-protobuf "^3.6.1" + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From 757a549740f420881811990bf2578f1411a0e965 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 11:29:40 +0100 Subject: [PATCH 8/9] Update yarn lock --- frontend/yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 28aedcada0..a4961f9b5c 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -15754,13 +15754,6 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== -ts-protoc-gen@^0.12.0: - version "0.12.0" - resolved "https://registry.npmjs.org/ts-protoc-gen/-/ts-protoc-gen-0.12.0.tgz#932e5738f14b67e7202825b06f8c548cb7d8ef34" - integrity sha512-V7jnICJxKqalBrnJSMTW5tB9sGi48gOC325bfcM7TDNUItVOlaMM//rQmuo49ybipk/SyJTnWXgtJnhHCevNJw== - dependencies: - google-protobuf "^3.6.1" - tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" From bc01c71cd1e05ada005a391840d37095962178ec Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 11:43:44 +0100 Subject: [PATCH 9/9] Fix PR comments --- docker-compose.yaml | 2 +- .../components/CreateEntityFormPage/CreateEntityFormPage.tsx | 2 +- .../src/components/CreateEntityPage/CreateEntityPage.test.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index 765c9a32b5..ddde99b79a 100755 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -49,6 +49,6 @@ services: service: scaffolder restart: unless-stopped volumes: - - ./backend/scaffolder/templates:/app/templates + - ./backend/scaffolder/templates:/app/templates:ro env_file: secrets.env diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx index 0720523471..6482aff6bf 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -6,7 +6,7 @@ import { InfoCard } from '@backstage/core'; const useStyles = makeStyles(theme => ({ formGroup: { - padding: '10px', + padding: theme.spacing(2), }, })); diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx index 6f45cef9cb..5e84fa9a51 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityPage/CreateEntityPage.test.tsx @@ -5,6 +5,8 @@ import CreateEntityPage from './CreateEntityPage'; describe('CreateEntityPage', () => { it('should render', () => { const rendered = render(); - expect(rendered.getByText('Hello!')).toBeInTheDocument(); + expect( + rendered.getByText('Create New', { exact: false }), + ).toBeInTheDocument(); }); });