Initial commit to integrate with scaffolder

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

@@ -18,7 +18,8 @@
     "react-dom": "^16.12.0",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
-    "formik": "2.1.4"
+    "formik": "2.1.4",
+    "formik-material-ui": "2.0.0-alpha.3"
   },
   "scripts": {
     "lint": "web-scripts lint",

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

@@ -3,6 +3,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { useFormik } from 'formik';
 import { Button, TextField, makeStyles } from '@material-ui/core';
 import { InfoCard } from '@backstage/core';
+import { scaffolderV1 } from '@backstage/protobuf-definitions';
 
 const useStyles = makeStyles(theme => ({
   formGroup: {
@@ -21,8 +22,18 @@ const CreateEntityFormPage = () => {
       description: '',
     },
     onSubmit: (values: any) => {
-      alert(JSON.stringify(values, null, 2));
-    },
+      console.log(JSON.stringify(values, null, 2));
+      const client = new scaffolderV1.Client('http://localhost:8080');
+      const req = new scaffolderV1.CreateRequest();
+      req.setComponentId(values.entityId);
+      req.setTemplateId(templateId);
+      // req.setOrg('soapraj');
+      req.setPrivate(false);
+      client.create(req).then((res: scaffolderV1.CreateReply) => {
+        console.log('COMPONENT CREATED');
+        console.log(res.toObject().componentId);
+      });
+    }
   });
 
   return (
@@ -32,9 +43,9 @@ const CreateEntityFormPage = () => {
           <div className={classes.formGroup}>
             <TextField
               label="Entity Id:"
-              name="entity-id"
-              id="entity-id"
-              value={formik.values.entityId}
+              name="entityId"
+              id="entityId"
+              onChange={formik.handleChange}
               variant="outlined"
             ></TextField>
           </div>
@@ -43,12 +54,12 @@ const CreateEntityFormPage = () => {
               label="Description:"
               name="description"
               id="description"
-              value={formik.values.description}
+              onChange={formik.handleChange}
               variant="outlined"
             ></TextField>
           </div>
           <div className={classes.formGroup}>
-            <Button variant="contained" color="primary">
+            <Button variant="contained" color="primary" onClick={formik.submitForm}>
               Submit
             </Button>
           </div>

frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx

@@ -59,7 +59,7 @@ const LoginComponent: FC<Props> = ({ onLogin }) => {
           Login
         </Button>
       </Grid>
-      <Typography>{error || 'Just enter any fake username'}</Typography>
+      <Typography>{error || 'Use your github username'}</Typography>
     </form>
   );
 };

frontend/yarn.lock

@@ -7127,6 +7127,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik-material-ui@2.0.0-alpha.3:
+  version "2.0.0-alpha.3"
+  resolved "https://registry.npmjs.org/formik-material-ui/-/formik-material-ui-2.0.0-alpha.3.tgz#1f5e4d98068686fa1c1c0cf54e75b51e92b14981"
+  integrity sha512-jVG18/cFa89j9omVPQUSJ+4kK7mJ1Wxz0hPVUKwdX+Cr1Z4Vfl1pBo6tJ0xzS2cOj4NEN35D+9Ft1DPAsDa90g==
+
 formik@2.1.4:
   version "2.1.4"
   resolved "https://registry.npmjs.org/formik/-/formik-2.1.4.tgz#8deef07ec845ea98f75e03da4aad7aab4ac46570"