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 7226c82ea7..93e312937b 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -1,8 +1,8 @@ -import React, { Fragment } from 'react'; +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 } from '@backstage/core'; +import { InfoCard, Progress } from '@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'; @@ -15,6 +15,8 @@ const useStyles = makeStyles(theme => ({ const CreateEntityFormPage = () => { const classes = useStyles(); + const [submitting, setSubmitting] = useState(false); + const [componentCreated, setComponentCreated] = useState(''); const match = useRouteMatch<{ templateId: string }>(); const templateId = decodeURIComponent(match.params.templateId); @@ -24,6 +26,7 @@ const CreateEntityFormPage = () => { description: '', }, onSubmit: (values: any) => { + setSubmitting(true); const client = new scaffolderV1.Client('http://localhost:8080'); const req = new scaffolderV1.CreateRequest(); req.setComponentId(values.entityId); @@ -36,15 +39,22 @@ const CreateEntityFormPage = () => { ); req.setPrivate(false); client.create(req).then((res: scaffolderV1.CreateReply) => { + setSubmitting(false); console.log('COMPONENT CREATED'); console.log(res.toObject().componentId); + setComponentCreated(res.toObject().componentId); }); }, }); + if(submitting) { + return ; + } + return ( + {componentCreated ? {componentCreated} is created! 🎉 : { Submit - + } );