Merge pull request #224 from chef/nls/create-proj

Merged change d3cb427d-d43a-45b0-8627-b381aaa59ebf From review branch nls/create-proj into master Signed-off-by: adam <[email protected]>
habitat-sh · Feb 19, 2016 · a2af900 · a2af900
2 parents 4ca4559 + 142a0e9
commit a2af900
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 8 deletions.
diff --git a/web/app/AppComponent.ts b/web/app/AppComponent.ts
@@ -11,6 +11,7 @@ import {HeaderComponent} from "./header/HeaderComponent";
 import {HomePageComponent} from "./home-page/HomePageComponent";
 import {PackagePageComponent} from "./package-page/PackagePageComponent";
 import {PackagesPageComponent} from "./packages-page/PackagesPageComponent";
+import {ProjectCreatePageComponent} from "./project-create-page/ProjectCreatePageComponent";
 import {ProjectsPageComponent} from "./projects-page/ProjectsPageComponent";
 import {RouteConfig, Router, RouterOutlet} from "angular2/router";
 import {SideNavComponent} from "./side-nav/SideNavComponent";
@@ -48,6 +49,7 @@ import {routeChange} from "./actions";
         component: PackagePageComponent
     },
     { path: "/projects", name: "Projects", component: ProjectsPageComponent },
+    { path: "/projects/create", name: "ProjectCreate", component: ProjectCreatePageComponent },
     { path: "/sign-in", name: "SignIn", component: SignInPageComponent },
 ])
 

diff --git a/web/app/actions.ts b/web/app/actions.ts
@@ -18,6 +18,7 @@ export const FINISH_BUILD_STREAM = "FINISH_BUILD_STREAM";
 export const POPULATE_BUILDS = "POPULATE_BUILDS";
 export const POPULATE_BUILD_LOG = "POPULATE_BUILD_LOG";
 export const POPULATE_EXPLORE = "POPULATE_EXPLORE";
+export const POPULATE_PROJECT = "POPULATE_PROJECT";
 export const ROUTE_CHANGE = "ROUTE_CHANGE";
 export const ROUTE_REQUESTED = "ROUTE_REQUESTED";
 export const SET_CURRENT_PACKAGE = "SET_CURRENT_PACKAGE";
@@ -29,6 +30,13 @@ export const SIGN_UP_ATTEMPT = "SIGN_UP_ATTEMPT";
 export const SIGN_OUT = "SIGN_OUT";
 export const TOGGLE_USER_NAV_MENU = "TOGGLE_USER_NAV_MENU";
 
+export function addProject(project) {
+    return dispatch => {
+        dispatch(requestRoute(["Projects"]));
+        dispatch(populateProject(project));
+    };
+}
+
 function appendToBuildLog(build, text) {
     return {
         type: APPEND_TO_BUILD_LOG,
@@ -138,12 +146,21 @@ export function populateBuildLog(id, data) {
         payload: { id, data: data ? ansiToHtml(data) : undefined },
     };
 }
+
 export function populateExplore(data) {
     return {
         type: POPULATE_EXPLORE,
         payload: data,
     };
 }
+
+function populateProject(project) {
+    return {
+        type: POPULATE_PROJECT,
+        payload: project,
+    };
+}
+
 export function routeChange(newRoute) {
     return {
         type: ROUTE_CHANGE,

diff --git a/web/app/app.scss b/web/app/app.scss
@@ -16,6 +16,8 @@
 @import "home-page/home-page";
 @import "package-page/package-page";
 @import "packages-page/packages-page";
+@import "project-create-page/project-create-page";
+@import "projects-page/projects-page";
 @import "sign-in-page/sign-in-page";
 @import "sign-up-form/sign-up-form";
 

diff --git a/web/app/initialState.ts b/web/app/initialState.ts
@@ -12,6 +12,11 @@ export default Record({
     packages: [],
     password: null,
     projects: List(),
+    // This is a temporary hack that lets us add projects, and gets
+    // concatted with projects on display. In real life we'll make another
+    // server call when displaying a list after a project is added and it will
+    // be there
+    addedProjects: List(),
     requestedRoute: null,
     route: null,
     username: "smith",

diff --git a/web/app/project-create-page/ProjectCreatePageComponent.ts b/web/app/project-create-page/ProjectCreatePageComponent.ts
@@ -0,0 +1,63 @@
+// Copyright:: Copyright (c) 2016 Chef Software, Inc.
+//
+// The terms of the Evaluation Agreement (Bldr) between Chef Software Inc. and the party accessing
+// this file ("Licensee") apply to Licensee's use of the Software until such time that the Software
+// is made available under an open source license such as the Apache 2.0 License.
+
+import {addProject} from "../actions";
+import {AppStore} from "../AppStore";
+import {Component, OnInit} from "angular2/core";
+import {ControlGroup, FormBuilder, Validators} from "angular2/common";
+
+@Component({
+    template: `
+    <div class="bldr-project-create">
+        <h2>Add Project</h2>
+        <p>
+            All projects require a derivation (your username or organization
+            name) and a path to the plan in the source code repository.
+        </p>
+        <form [ngFormModel]="form" (ngSubmit)="addProject(form.value)" #formValues="ngForm">
+            <div class="scm-repo-fields">
+                <label>GitHub Repository</label>
+                smith / example
+                <a href="#">(change)</a>
+            </div>
+            <div class="project-fields">
+                <div class="deriv">
+                    <label for="derivation">Project Derivation</label>
+                    <input ngControl="derivation" disabled id="derivation" name="derivation">
+                </div>
+                <div class="name">
+                    <label for="name">Project Name</label>
+                    <input ngControl="name" id="name" name="name" placeholder="Required. Max 40 characters." required>
+                </div>
+                <div class="plan">
+                    <label for="plan">Path to Plan file</label>
+                    <p>The location in the repository of the plan.sh that will build this project.</p>
+                    <input ngControl="plan" id="plan" name="plan" required>
+                </div>
+                <div class="submit">
+                    <button type="submit">Save Project</button>
+                </div>
+            </div>
+        </form>
+    </div>`
+})
+
+export class ProjectCreatePageComponent {
+    private form: ControlGroup;
+
+    constructor(private formBuilder: FormBuilder, private store: AppStore) {
+        this.form = formBuilder.group({
+            derivation: ["smith", Validators.required],
+            name: ["", Validators.required],
+            plan: ["/plan.sh", Validators.required],
+        });
+
+    }
+
+    private addProject(values) {
+        this.store.dispatch(addProject(values));
+    }
+}
diff --git a/web/app/project-create-page/_project-create-page.scss b/web/app/project-create-page/_project-create-page.scss
@@ -0,0 +1,22 @@
+.bldr-project-create {
+  form {
+    @include outer-container;
+  }
+
+  .scm-repo-fields {
+    @include span-columns(3);
+  }
+
+  .project-fields {
+    @include span-columns(9);
+    @include outer-container;
+
+    .deriv, .name {
+      @include span-columns(6);
+    }
+
+    .plan, .submit {
+      @include span-columns(12);
+    }
+  }
+}
diff --git a/web/app/projects-page/ProjectsPageComponent.ts b/web/app/projects-page/ProjectsPageComponent.ts
@@ -6,16 +6,19 @@
 
 import {AppStore} from "../AppStore";
 import {Component, OnInit} from "angular2/core";
+import {RouterLink} from "angular2/router";
 import {fetchProjects} from "../actions";
 
 @Component({
+    directives: [RouterLink],
     template: `
     <div class="bldr-projects">
         <h2>Projects</h2>
+        <a class="create" [routerLink]="['ProjectCreate']">+ Add Project</a>
         <ul>
             <li *ngIf="projects.size === 0">
                 You do not have any Projects yet. Why not
-                <a href="#">create one</a>?
+                <a [routerLink]="['ProjectCreate']">create one</a>?
             </li>
             <li *ngFor="#project of projects">
                 <a class="bldr-item-list" href="#">

diff --git a/web/app/projects-page/_projects-page.scss b/web/app/projects-page/_projects-page.scss
@@ -0,0 +1,7 @@
+.bldr-projects {
+  a.create {
+    display: block;
+    float: right;
+    margin-top: -2.5em;
+  }
+}
diff --git a/web/app/rootReducer.ts b/web/app/rootReducer.ts
@@ -51,6 +51,9 @@ export function rootReducer(state = initialState, action) {
         case actionTypes.POPULATE_EXPLORE:
             return state.setIn(["explore", "packages"], List(action.payload));
 
+        case actionTypes.POPULATE_PROJECT:
+            return state.set("addedProjects", state.get("addedProjects").unshift(action.payload));
+
         case actionTypes.ROUTE_CHANGE:
             return state.set("route", action.payload).
                 set("requestedRoute", null);
@@ -80,7 +83,8 @@ export function rootReducer(state = initialState, action) {
             return state.set("packages", action.payload);
 
         case actionTypes.SET_PROJECTS:
-            return state.set("projects", List(action.payload));
+            return state.set("projects",
+                state.get("addedProjects").concat(List(action.payload)));
 
         case actionTypes.SET_VISIBLE_PACKAGES:
             q = query(state.get("packages"));

diff --git a/web/test/e2e/projects.test.ts b/web/test/e2e/projects.test.ts
@@ -1,12 +1,33 @@
 import {expect} from "./helper";
 
-describe("Projects list", () => {
-    beforeEach(() => {
-        browser.get("#/projects");
+describe("Projects", () => {
+    describe("Projects list", () => {
+        beforeEach(() => {
+            browser.get("#/projects");
+        });
+
+        it("has links", () => {
+            expect(element.all(by.css(".bldr-projects ul a")).count()).to.eventually.
+                be.greaterThan(0);
+        });
+
+        it("has a create link", () => {
+            expect(element.all(by.css(".bldr-projects a.create")).count()).to.eventually.
+                equal(1);
+        });
     });
 
-    it("has links", () => {
-        expect(element.all(by.css(".bldr-projects ul a")).count()).to.eventually.
-            be.greaterThan(0);
+    describe("Create a project", () => {
+        beforeEach(() => {
+            browser.get("#/projects");
+            element(by.css(".bldr-projects a.create")).click();
+            element(by.css("input[name=name]")).sendKeys("testname");
+            element(by.css(".bldr-project-create form")).submit();
+        });
+
+        it("creates a list entry for the new Project", () => {
+            expect(element(by.css(".bldr-projects ul a")).getText()).to.eventually.
+                equal("smith / testname");
+        });
     });
 });