Added start of Front-end repo.

.gitignore

@@ -2,4 +2,8 @@ main-packr.go
 packrd
 /commit0
 .history/
-tmp/
+tmp/
+
+# Generated files from Config UI.
+intenral/ui/node_modules
+intenral/ui/build

Makefile

@@ -56,6 +56,7 @@ clean-example:
 build:
 	CGO_ENABLED=0 packr2 build -o commit0
 	packr2 clean
+	cd internal/ui && yarn && yarn build
 
 # Installs the CLI int your GOPATH
 install-go:

README.md

@@ -80,6 +80,25 @@ cd test-app
 ../../commit0 generate -c commit0.yml
 ```
 
+### Configuration UI
+
+If you're working on the configuration UI locally, you can run just the ui by doing the following.
+
+``` bash
+cd internal/ui
+yarn
+yarn start
+open http://localhost:3000
+```
+
+If you want to test the full integration with the go app, you'll need to do a build and run the app with `./commit0 ui`.
+
+``` bash
+make build
+./commit0 ui
+open http://localhost:8080
+```
+
 ### Architecture
 The project is built with GoLang and requires Docker
 - /cmd - the CLI command entry points

internal/api/generate_api.go

@@ -28,13 +28,18 @@ func generateProject(w http.ResponseWriter, req *http.Request) {
 		w.WriteHeader(http.StatusNotFound)
 		w.Write([]byte(`{"message": "Not found"}`))
 	}
-
 }
 
 func Commit0Api() {
 	var router = mux.NewRouter()
 	var api = router.PathPrefix("/v1/generate").Subrouter()
 	api.NotFoundHandler = http.HandlerFunc(generateProject)
 
+	staticHandler := http.StripPrefix("/static/", http.FileServer(http.Dir("internal/ui/build/static")))
+	router.PathPrefix("/static/").Handler(staticHandler)
+
+	buildHandler := http.FileServer(http.Dir("internal/ui/build"))
+	router.PathPrefix("/").Handler(buildHandler)
+
 	log.Fatal(http.ListenAndServe(":8080", router))
 }

internal/ui/.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+build

internal/ui/commit0.yml

@@ -0,0 +1,26 @@
+organization: 
+name: 
+description: 
+maintainers:
+
+
+infrastructure:
+  aws:
+    accountId: 
+    region: 
+    eks:
+      clusterName: staging
+    cognito:
+      enabled: true
+    s3Hosting:
+      enabled: true
+
+frontend:
+  framework: 
+  ci:
+    system: github
+  app:
+    name: 
+
+services:
+

internal/ui/package.json

@@ -6,6 +6,7 @@
     "@material-ui/core": "^4.6.1",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/lab": "^4.0.0-alpha.32",
+    "axios": "^0.19.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-scripts": "3.2.0"

internal/ui/src/AWSProvider.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+
+export default class AWSProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedProfile: 0,
+      selectedRegion: 0,
+      regionMenuOpen: false,
+      profileMenuOpen: false
+    };
+  }
+
+  regions = [
+    'US East (Ohio) us-east-2',
+    'US East (N. Virginia) us-east-1',
+    'US West (N. California) us-west-1',
+    'US West (Oregon) us-west-2',
+    'Asia Pacific (Hong Kong) ap-east-1',
+    'Asia Pacific (Mumbai) ap-south-1',
+    'Asia Pacific (Seoul) ap-northeast-2',
+    'Asia Pacific (Singapore) ap-southeast-1 ',
+    'Asia Pacific (Sydney) ap-southeast-2 ',
+    'Asia Pacific (Tokyo) ap-northeast-1 ',
+    'Canada (Central) ca-central-1 ',
+    'China (Beijing) cn-north-1 ',
+    'China (Ningxia) cn-northwest-1',
+    'EU (Frankfurt) eu-central-1 ',
+    'EU (Ireland) eu-west-1 ',
+    'EU (London) eu-west-2 ',
+    'EU (Paris) eu-west-3 ',
+    'EU (Stockholm) eu-north-1 ',
+    'Middle East (Bahrain) me-south-1 ',
+    'South America (Sao Paulo) sa-east-1 '
+  ];
+
+  profiles = [
+    'default',
+    'testing',
+    'fake-data'
+  ];
+
+  handleClickListItemRegion = (event) => {
+    this.props.setProvider(this.state);
+  }
+
+  handleMenuItemClickRegion = (event, index) => {
+    // this.setState({
+    //   regionMenuOpen: true
+    // })
+  };
+
+  handleMenuClick = () => {
+    this.setState({ regionMenuOpen: true});
+  }
+
+  handleClickListItemProfile = (event) => {
+  }
+
+  handleMenuItemClickProfile = (event, index) => {
+  };
+
+  handleClose = () => {
+    this.setState({ regionMenuOpen: false, profileMenuOpen: false })
+  };
+
+  render() {
+    return (
+      <div><h3>AWS</h3>
+        <Grid container spacing={4} direction="row" alignItems="center" justify="center">
+          <Grid item>
+            <List component="nav" aria-label="Region">
+              <ListItem
+                button
+                aria-haspopup="true"
+                aria-controls="lock-menu"
+                aria-label="Region"
+                onClick={this.handleClickListItemRegion}
+              >
+                <ListItemText primary="Region" secondary={this.regions[this.state.selectedRegion]} />
+              </ListItem>
+            </List>
+            <Menu
+              id="lock-menu"
+              anchorEl={this.state.regionMenuOpen}
+              keepMounted
+              open={this.state.regionMenuOpen}
+              onClose={this.handleClose}
+            >
+              {this.regions.map((region, index) => (
+                <MenuItem
+                  key={region}
+                  selected={index === this.state.selectedRegion}
+                  onClick={event => this.handleMenuItemClickRegion(event, index, "region")}
+                >
+                  {region}
+                </MenuItem>
+              ))}
+            </Menu>
+          </Grid>
+          <Grid item>
+            <List component="nav" aria-label="Profiles">
+              <ListItem
+                button
+                aria-haspopup="true"
+                aria-controls="lock-menu"
+                aria-label="Profile"
+                onClick={this.handleClickListItemProfile}
+              >
+                <ListItemText primary="Profile" secondary={this.profiles[this.selectedProfile]} />
+              </ListItem>
+            </List>
+            <Menu
+              id="lock-menu"
+              anchorEl={this.state.currentProfile}
+              keepMounted
+              open={this.profileMenuOpen}
+              onClose={this.handleClose}
+            >
+              {this.profiles.map((profile, index) => (
+                <MenuItem
+                  key={profile}
+                  selected={index === this.state.selectedProfile}
+                  onClick={event => this.handleMenuItemClickProfile(event, index)}
+                >
+                  {profile}
+                </MenuItem>
+              ))}
+            </Menu>
+          </Grid>
+        </Grid>
+      </div>
+    )
+  }
+}

internal/ui/src/App.js

@@ -6,17 +6,72 @@ import Divider from '@material-ui/core/Divider';
 import Providers from './Providers.js';
 import Frontend from './Frontend.js';
 import Services from './Services.js';
+import GenerateButton from './GenerateButton.js';
+import Complete from './Complete.js';
 
-function App() {
-  return (
-    <div className="App">
-      <h1>Commit0 - Create a new project</h1>
-      <Providers />
-      <Frontend />
-      <Services />
-      <Divider variant="bottom"/>
-    </div>
-  );
-}
+import axios from 'axios';
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      success: null,
+      provider: 'aws',
+      frontend: 'react',
+      services: [
+        {
+          name: "test service 1",
+          description: "Things.",
+          language: "go"
+        }
+      ]
+    };
+  }
+
+  setProvider = (p) => {
+    this.setState({ provider: p });
+  }
+
+  setFrontend = (f) => {
+    this.setState({ frontend: f });
+  }
 
-export default App;
+  addServices = (s) => {
+    this.setState({ services: [1] });
+  }
+
+  generate = () => {
+    let self = this;
+    axios.post('http://localhost:8080/v1/generate', {
+      frontendFramework: this.state.frontend,
+    })
+      .then(function (response) {
+        // handle success
+        console.log(response);
+        this.setState({success: true});
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error);
+        self.setState({success: false});
+      })
+      .finally(function () {
+        // always executed
+      });
+  }
+
+  render() {
+    console.log(this.state);
+    return (
+      <div className="App">
+        <h1>Commit0 - Create a new project</h1>
+        <Providers provider={this.state.provider} setProvider={this.setProvider} />
+        <Frontend frontend={this.state.frontend} setFrontend={this.setFrontend} />
+        <Services services={this.state.services} addService={this.addService} />
+        <Divider variant="middle" />
+        <GenerateButton generate={this.generate} />
+        {this.state.success !== null && <Complete succes={this.state.success} />}
+      </div>
+    );
+  }
+}

internal/ui/src/Complete.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default class Complete extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        if (this.props.success) {
+            return (
+                <div><h3>Success</h3>
+                    <p>You're project has been generated.</p>
+                </div>
+            )
+        } else {
+            return (
+            <div><h3>Failed</h3>
+                <p>You're project has not been generated.</p>
+            </div>)
+        }
+    }
+}