Add entity form page

2020-02-07 11:26:31 +01:00
parent 305fb20849
commit e53ec4fb34
6 changed files with 93 additions and 11 deletions
@@ -55,7 +55,7 @@ export class TemplateCard extends Component {
          </CardContent>
        )}
        <CardActions className={classes.cardActions}>
-          <Link to={item.link || `/create-component/${item.id}`}>
+          <Link href={item.link || `/create/${item.id}`}>
            <Button color="primary">{item.callToAction || 'Choose'}</Button>
          </Link>
        </CardActions>
@@ -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",
@@ -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 (
+    <Fragment>
+      <InfoCard title={`Create New ${templateId}`}>
+        <form onSubmit={formik.handleSubmit}>
+          <div className={classes.formGroup}>
+            <TextField
+              label="Entity Id:"
+              name="entity-id"
+              id="entity-id"
+              value={formik.values.entityId}
+              variant="outlined"
+            ></TextField>
+          </div>
+          <div className={classes.formGroup}>
+            <TextField
+              label="Description:"
+              name="description"
+              id="description"
+              value={formik.values.description}
+              variant="outlined"
+            ></TextField>
+          </div>
+          <div className={classes.formGroup}>
+            <Button variant="contained" color="primary">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </InfoCard>
+    </Fragment>
+  );
+};
+
+export default CreateEntityFormPage;
@@ -0,0 +1 @@
+export { default } from './CreateEntityFormPage';
@@ -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);
  },
 });
@@ -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"
				`@@ -0,0 +1 @@`
				`export { default } from './CreateEntityFormPage';`